Kodu Firebase Studio'ya aktarmak için bir düğme oluşturma

Kullanıcılara kodları doğrudan sitenizden Firebase Studio çalışma alanına aktarmak için sorunsuz bir yol sunmak üzere web sitenize "Firebase Studio'da aç" düğmesi ekleyin. Böylece kullanıcılar, bulut tabanlı bir geliştirme ortamında çalışmaya devam edebilir.

Bu özellik şu amaçlarla tasarlanmıştır:

• Kullanıcılarınızın temel bir düzenleyiciden tam bir geliştirme ortamına geçebileceği kod deneme alanları.

• Sitenizin kodu ve görsel prototipi oluşturduğu, kullanıcının da Firebase Studio içinde yinelediği uygulama prototipi oluşturma araçları.

Open in Firebase Studio SDK'sını kullanma

"Firebase Studio içinde aç" düğmesi, yeni bir çalışma alanı oluşturmak ve doldurmak için uygun bağlantıları oluşturan bir JavaScript kitaplığı olan Firebase Studio içinde açma SDK'sı tarafından desteklenir. Kodun nasıl içe aktarılacağı konusunda çeşitli seçenekler sunar.

İçe aktarma yöntemleri

Düğmeyi, aşağıdaki yöntemleri kullanarak kod içe aktaracak şekilde yapılandırabilirsiniz:

• Git deposundan veya şablondan: Git deposuna veya şablona Firebase Studio bağlantı oluşturun. Bu, tamamlanmış projeler veya önceden tanımlanmış şablonlar için idealdir. Bu kullanım alanları hakkında daha fazla bilgi için Google Workspace'te önceden tanımlanmış bir çalışma alanına kısayol oluşturma başlıklı makaleyi inceleyin. Firebase Studio

• Bir dizi proje dosyasından: Doğrudan web uygulamanızdaki bir dizi dosya ve kod snippet'inden dinamik olarak çalışma alanı oluşturun. Bu seçenek, kullanıcının mevcut çalışmasını başka bir yere kaydedilmemiş olsa bile dışa aktardığı için kod deneme alanları ve uygulama prototipçileri için en güçlü seçenektir.

Sitenize "Firebase Studio'da aç" düğmesini ekleyin

Firebase Studio'da Aç SDK'sı: Firebase Studio çalışma alanları oluşturmak için düğme resimleri oluşturma, derin bağlantılar oluşturma ve dosya içeriği gönderme gibi yardımcı işlevler de dahil olmak üzere ihtiyacınız olan her şeyi sağlar.

"Firebase Studio'da aç" düğmesini web sitenize eklemek için:

1. Paketi proje dizininize yükleyin:

   npm install @firebase-studio/open-sdk
   

2. Kitaplığı içe aktarmak için kodunuza aşağıdakileri ekleyin:

   import * as FirebaseStudio from '@firebase-studio/open-sdk';
   

Ayrıntılı talimatlar, kod örnekleri ve tam API referansı için resmi SDK belgelerine bakın.

Çalışma alanı ortamlarını anlama

Kullanıcılar sitenizden bir çalışma alanı oluşturduğunda Firebase Studio, onlar için geliştirme ortamını kurar. Otomasyon düzeyi, projenin türüne bağlıdır.

Optimize edilmiş ortam

React, Angular ve basit HTML projeleri için Firebase Studio, arayan kişi settings nesnesinde baselineEnvironment özelliğini doğru şekilde ayarladığı sürece optimize edilmiş ve önceden yapılandırılmış bir ortam sağlar. Bu durumda, kullanıcı bağlantıyı Firebase Studio içinde açtığında Firebase Studio, çalışma alanını oluşturur ve otomatik olarak:

• Gerekli tüm bağımlılıkları yükler.
• Doğru geliştirme sunucusunu yapılandırır ve başlatır.
• Ortamı doğru araçlar ve uzantılarla kurar.

Bu, kullanıcılarınızın uygulamanızın canlı önizlemesini açıp kodu doğrudan görebileceği bir ortam oluşturur.

Genel ortam

Diğer tüm proje türleri için Firebase Studio genel bir içe aktarıcı kullanır. Dosyaları çalışma alanına yükler ancak kullanıcınızın ilk kurulumu manuel olarak yapması gerekir. Kullanıcıların şunları yapması gerekebilir:

• Dil çalışma zamanlarını ve bağımlılıklarını yükleyin.
• dev.nix dosyasını yapılandırın.

Bu projeler için Firebase Studio, özelleştirilmemiş bir ortam oluşturur ve kullanıcının kurulum süreci üzerinde tam kontrol sahibi olmasını sağlar.

Kullanıcı deneyimi

Her iki çalışma alanı türünde de kullanıcı "Firebase Studio'da aç" düğmesini tıkladıktan sonra çalışma alanına ad vermesi ve içe aktarılacak dosyaların listesini incelemesi istenir.

Kullanıcı İçe aktar'ı tıkladığında yeni bir Firebase Studio çalışma alanı açılır. Bu pakette proje dosyalarınız, uygulama önizlemesi ve sonraki adımları içeren bir README dosyası bulunur.

"Firebase Studio'da aç" düğmesi tasarlama

Firebase Studio SDK'sında aç seçeneğini kullanarak düğmenizi tasarlayabilir veya Firebase Studio düğmesi için HTML oluşturmak üzere aşağıdaki aracı kullanabilirsiniz:

SDK'yı kullanıyorsanız düğme için isteğe bağlı yapılandırma özellikleri ekleyebilirsiniz:

• label: Düğmede gösterilen metin etiketini ayarlar.
  • İzin verilen değerler: open, try, export veya continue.
• color: Düğmenin renk düzenini tanımlar.
  • İzin verilen değerler: dark, light, blue veya bright.
• size: Düğmenin yüksekliğini piksel cinsinden belirtir.
  • İzin verilen değerler: 20 veya 32.
• imageFormat: Oluşturulan resmin dosya biçimini belirler.
  • İzin verilen değerler: svg veya png.

Örneğin:

img.src = FirebaseStudio.getButtonImageUrl({
  label: 'export',
  color: 'dark',
  size: 32,
  imageFormat: 'svg'
});

Sonraki adımlar

• Open in Firebase Studio SDK'sını yükleyin
• Firebase Studio çalışma alanını nasıl özelleştireceğinizi öğrenin.