Firebase Studio, çalışma alanınızı projenizin benzersiz ihtiyaçlarına göre uyarlamanıza olanak tanır. Bunun için, aşağıdakileri açıklayan tek bir .idx/dev.nix
yapılandırma dosyası tanımlamanız gerekir:
- Çalıştırmanız gereken sistem araçları (örneğin, derleyiciler veya diğer ikili dosyalar gibi Terminal'den).
- Yüklü olması gereken uzantılar (ör. programlama dili desteği).
- Uygulama önizlemelerinizin nasıl gösterileceği (örneğin, web sunucunuzu çalıştırma komutları).
- Çalışma alanınızda çalışan yerel sunucular için kullanılabilen genel ortam değişkenleri.
Kullanılabilir özelliklerin tam açıklaması için dev.nix
referansına bakın.
Projenize .idx/mcp.json
(Firebase'de Gemini için) veya .gemini/settings.json
(Gemini CLI için) dosyası ekleyerek Firebase MCP sunucusu da dahil olmak üzere Model Context Protocol (MCP) sunucularına da bağlanabilirsiniz.
Nix ve Firebase Studio
Firebase Studio, her çalışma alanının ortam yapılandırmasını tanımlamak için Nix'i kullanır. Firebase Studio özellikle şu amaçlarla kullanılır:
Çalışma alanı ortamlarını tanımlamak için Nix programlama dili. Nix, işlevsel bir programlama dilidir.
dev.nix
dosyasında tanımlayabileceğiniz özellikler ve paket kitaplıkları, Nix özellik kümesi söz dizimine uygundur.Çalışma alanınızda kullanılabilen sistem araçlarını yönetmek için Nix paket yöneticisi. Bu, APT (
apt
veapt-get
), Homebrew (brew
) vedpkg
gibi işletim sistemine özel paket yöneticilerine benzer.
Nix ortamları tekrarlanabilir ve bildirimsel olduğundan Firebase Studio bağlamında, projenizde çalışan herkesin aynı ortam yapılandırmasına sahip olmasını sağlamak için Nix yapılandırma dosyanızı Git kod deponuzun bir parçası olarak paylaşabilirsiniz.
Temel bir örnek
Aşağıdaki örnekte, önizlemeleri etkinleştiren temel bir ortam yapılandırması gösterilmektedir:
{ pkgs, ... }: {
# Which nixpkgs channel to use.
channel = "stable-23.11"; # or "unstable"
# Use https://search.nixos.org/packages to find packages
packages = [
pkgs.nodejs_20
];
# Sets environment variables in the workspace
env = {
SOME_ENV_VAR = "hello";
};
# Search for the extensions you want on https://open-vsx.org/ and use "publisher.id"
idx.extensions = [
"angular.ng-template"
];
# Enable previews and customize configuration
idx.previews = {
enable = true;
previews = {
web = {
command = [
"npm"
"run"
"start"
"--"
"--port"
"$PORT"
"--host"
"0.0.0.0"
"--disable-host-check"
];
manager = "web";
# Optionally, specify a directory that contains your web app
# cwd = "app/client";
};
};
};
}
Sistem araçları ekleme
Çalışma alanınıza derleyiciler veya bulut hizmetleri için CLI programları gibi sistem araçları eklemek üzere Nix paket kayıt defterinde benzersiz paket kimliğini bulun ve dev.nix
dosyanızın packages
nesnesine "pkgs." önekiyle ekleyin:
{ pkgs, ... }: {
# Which nixpkgs channel to use.
channel = "stable-23.11"; # or "unstable"
# Use https://search.nixos.org/packages to find packages
packages = [
pkgs.nodejs_20
];
...
}
Bu, genellikle APT (apt
ve apt-get
), Homebrew (brew
) ve dpkg
gibi işletim sistemine özgü paket yöneticilerini kullanarak sistem paketlerini yükleme yönteminden farklıdır. Hangi sistem paketlerinin gerektiğinin tam olarak bildirimli bir şekilde açıklanması, Firebase Studio çalışma alanlarının paylaşılmasını ve yeniden üretilmesini kolaylaştırır.
Yerel düğüm ikililerini kullanma
Yerel makinenizde olduğu gibi, yerel olarak yüklenen düğüm paketleriyle (örneğin, package.json
dosyanızda tanımlanan paketler) ilgili ikili dosyalar, npx
komutu ile çağrılarak bir Terminal panelinde yürütülebilir.
Ek bir kolaylık olarak, node_modules
klasörünün bulunduğu bir dizindeyken (ör. bir web projesinin kök dizini) yerel olarak yüklenen ikili dosyalar npx
öneki olmadan doğrudan çağrılabilir.
gcloud
bileşen ekleme
gcloud
CLI for Google Cloud'nin varsayılan yapılandırması tüm Firebase Studio çalışma alanlarında kullanılabilir.
Ek bileşenlere ihtiyacınız varsa bunları dev.nix
dosyanıza ekleyebilirsiniz:
{ pkgs }: {
packages = [
...
(pkgs.google-cloud-sdk.withExtraComponents [
pkgs.google-cloud-sdk.components.cloud-datastore-emulator
])
...
];
}
IDE uzantıları ekleme
Firebase Studio'da uzantıları OpenVSX uzantı kayıt defterini kullanarak iki şekilde yükleyebilirsiniz:
Uzantıları keşfetmek ve yüklemek için Firebase Studio'deki Uzantılar panelini kullanın. Bu yaklaşım, aşağıdakiler gibi kullanıcıya özel uzantılar için en iyisidir:
- Özel renk temaları
- VSCodeVim gibi düzenleyici emülasyonu
dev.nix
dosyanıza uzantı ekleyin. Bu uzantılar, çalışma alanı yapılandırmanızı paylaştığınızda otomatik olarak yüklenir. Bu yaklaşım, aşağıdakiler gibi projeye özel uzantılar için en uygundur:- Dile özgü hata ayıklayıcılar da dahil olmak üzere programlama dili uzantıları
- Projenizde kullanılan bulut hizmetleri için resmi uzantılar
- Kod biçimlendiriciler
İkinci yaklaşım için tam nitelikli uzantı kimliğini (<publisher>.<id>
biçiminde) bulup dev.nix
dosyanıza ekleyerek IDE uzantılarını dahil edebilirsiniz. Bunu idx.extensions
nesnesine şu şekilde ekleyebilirsiniz:
{ pkgs, ... }: {
...
# Search for the extensions you want on https://open-vsx.org/ and use the format
# "<publisher>.<id>"
idx.extensions = [
"angular.ng-template"
];
...
}
Sık kullanılan hizmetleri ekleme
Firebase Studio ayrıca geliştirme sırasında ihtiyaç duyabileceğiniz yaygın hizmetler için basitleştirilmiş kurulum ve yapılandırma sunar. Bu hizmetler arasında şunlar yer alır:
- Container'lar
- Docker (
services.docker.*
)
- Docker (
- Mesajlaşma
- Pub/Sub Emulator (
services.pubsub.*
)
- Pub/Sub Emulator (
- Veritabanları
- MySQL (
services.mysql.*
) - Postgres (
services.postgres.*
) - Redis (
services.redis.*
) - Spanner (
services.spanner.*
)
- MySQL (
Bu hizmetleri çalışma alanınızda etkinleştirme hakkında ayrıntılı bilgi için services.*
bölümlerindeki dev.nix
referansına bakın.
Önizlemeleri özelleştirme
Uygulama önizlemelerinizi nasıl özelleştireceğiniz hakkında ayrıntılı bilgi için Uygulamanızı önizleme başlıklı makaleyi inceleyin.
Çalışma alanı simgenizi ayarlama
icon.png
adlı bir PNG dosyasını dev.nix
dosyanızla aynı düzeydeki .idx
dizinine yerleştirerek çalışma alanınız için özel bir simge seçebilirsiniz.
Firebase Studio, daha sonra bu simgeyi kullanarak çalışma alanınızı kontrol panelinizde temsil eder.
Bu dosya kaynak kontrolüne (ör. Git) eklenebildiğinden, Firebase Studio kullanırken projenizde çalışan herkesin projeniz için aynı simgeyi görmesini sağlamak adına iyi bir yöntemdir. Dosya, Git dalları arasında değişiklik gösterebileceğinden bu simgeyi, beta ve üretim uygulama çalışma alanlarını görsel olarak ayırt etmek ve başka amaçlar için kullanabilirsiniz.
Özelleştirmelerinizi şablona dönüştürme
Ortam yapılandırmanızı herkesin yeni projeler oluşturmak için kullanabileceği bir "başlangıç ortamına" dönüştürmek istiyorsanız Özel şablon oluşturma ile ilgili dokümanlara bakın.
Tüm özelleştirme seçeneklerini keşfedin
Ortam yapılandırma şemasının ayrıntılı açıklaması için dev.nix
referansına göz atın.
Dosyalarınızı indirme
Dosyalarınızı ZIP dosyası olarak indirmek için:
- Gezgin bölmesinde herhangi bir dizini sağ tıklayın ve Zip ve İndir'i seçin.
Proje dizininizdeki her şeyi indirmek için:
Dosya > Klasör Aç'ı seçin.
Varsayılan
/home/user
dizinini kabul edin.Dosyalar yüklendikten sonra çalışma dizininizi sağ tıklayın ve Zip ve İndir'i seçin. App Prototyping agent kullanıyorsanız çalışma dizininiz
studio
olur. Şablon veya yüklenmiş proje kullanıyorsanız bu, proje adınız olur.Ortamı yeniden oluşturmanız istendiğinde İptal'i tıklayın.
İndirme işlemi tamamlandıktan sonra, çalışma alanınıza geri dönmek için Dosya menüsünden çalışma dizininizi yeniden açın.
MCP sunucularını kullanma
MCP sunucuları, Gemini için ek araçlar ve veri kaynakları sağlar. Örneğin, uygulamanızı oluştururken veya hatalarını ayıklarken doğal dil kullanarak verilerinizi Cloud Firestore'da keşfetmek için Firebase MCP sunucusunu ekleyebilirsiniz.
Ön koşullar
- MCP sunucusu gerektiriyorsa Node.js ve npm'nin çalışan bir yüklemesine sahip olduğunuzdan emin olun.
Uyumlu bir MCP sunucusu seçin
Firebase Studio, MCP sunucuları için temel destek sunar. Bu nedenle, tüm MCP sunucuları uyumlu değildir. Firebase Studio çalışma alanınıza eklemek için bir MCP sunucusu seçerken aşağıdakileri göz önünde bulundurun:
- Desteklenenler:
- Standart giriş/çıkış (stdio) veya Server-Sent Events (SSE)/Streamable HTTP aktarım sunucuları (özel kimlik doğrulama biçimleri gerektirmez)
- MCP sunucuları tarafından sağlanan araçlar
- Şu anda desteklenmiyor:
- Grafik kullanıcı arayüzü veya masaüstü oturumu gerektiren sunucular
- MCP sunucuları tarafından sağlanan istemler, örnekler veya diğer kaynaklar
MCP sunucusu ekleme
Gezgin'den
(Ctrl+Shift+E)
MCP yapılandırma dosyasını düzenleyin veya oluşturun.Firebase sohbetinde Gemini,
.idx/mcp.json
kullanır.Gemini CLI,
.gemini/settings.json
kullanıyor.
Dosya henüz yoksa ana dizini sağ tıklayıp Yeni dosya'yı seçerek dosyayı oluşturun. Firebase ve Gemini CLI'de Gemini'da MCP sunucusunu kullanmak için her iki dosyayı da oluşturun veya düzenleyin.
Sunucu yapılandırmasını dosyanın içeriğine ekleyin. Örneğin, Firebase MCP sunucusunu eklemek için şunu girin:
{ "mcpServers": { "firebase": { "command": "npx", "args": [ "-y", "firebase-tools@latest", "experimental:mcp" ] } } }
Bu yapılandırma dosyası, Gemini'ya hangi MCP sunucusunu kullanmasını istediğinizi bildirir. Bu örnekte,
firebase
adlı bir sunucu ekledik. Bu sunucu,npx
komutunu kullanarakfirebase-tools@latest
yükleyip çalıştıracak. Diğer MCP sunucuları farklı yapılandırmalar gerektirir ancak aynı genel biçimi kullanır.Terminalde (
Shift+Ctrl+C
) yüklemeyi tamamlamak için gerekli komutları çalıştırın. Örneğin, Firebase MCP sunucusunu kullanmak için hesabınızda oturum açmak üzere aşağıdaki komutu girin:firebase login --no-localhost
Oturumu yetkilendirmek için terminaldeki talimatları uygulayın. Bazı araçlar için bağlı bir Firebase projesi gerekir. Proje oluşturmak için Firebase MCP sunucusunu kullanabilir veya Firebase projesini başlatmak için aşağıdaki komutu çalıştırabilirsiniz:
firebase init
Bu işlem, kök dizininizde bir
firebase.json
dosyası oluşturur.Kurulumu tamamlamak için çalışma alanınızı yeniden oluşturun:
Komut paletini (
Shift+Ctrl+P
) açın.Firebase Studio: Rebuild Environment'ı (Firebase Studio: Ortamı Yeniden Oluşturma) girin.
MCP araçlarını kullanma
Kullanmak istediğiniz MCP sunucusunu yükledikten sonra, sağladığı araçlar veya veriler şu konumlarda kullanılabilir:
- Gemini CLI
- Aracı modu ve Aracı (Otomatik çalıştırma) modları kullanılırken Firebase sohbetinde Gemini
- App Prototyping agent
Örneğin, Firebase MCP sunucusunu eklerseniz Gemini mevcut proje için SDK yapılandırmasını getirmesini, Cloud Firestore ve Realtime Database içinde depolanan verileri almasını, Firebase hizmetlerini ayarlamanıza yardımcı olmasını isteyebilirsiniz.
MCP sunucularıyla ilgili sorunları giderme
Bir MCP sunucusu beklendiği gibi çalışmıyorsa Gemini günlüklerinizi açarak hataları kontrol edin:
Çıkış (
Shift+Ctrl+U
) bölümünde açılır menüyü tıklayın ve Gemini'ı seçin.[MCPManager]
etiketiyle başlayan mesajları kontrol edin. Bu günlükler, hangi MCP sunucularının ayarlandığı ve hata mesajları hakkında bilgi içerir. Yapılandırmanızla ilgili sorunları gidermek için bu bilgileri kullanın. Bir MCP sunucusu başarıyla bağlandığında, eklediği araçların listesini görürsünüz.
Bir MCP sunucusu yüklenemezse veya bağlanamazsa çalışma alanınızı yeniden oluşturmayı deneyin:
Komut paletini (
Shift+Ctrl+P
) açın.Firebase Studio: Rebuild Environment'ı (Firebase Studio: Ortamı Yeniden Oluşturma) girin.
Çalışma alanınızın yeniden oluşturulmasını bekleyin ve ardından seçtiğiniz MCP sunucusunu tekrar kullanmayı deneyin.
MCP sunucusu bağlanıyorsa ancak Gemini, sağladığı araçları kullanmıyorsa:
Gemini, MCP aracı kullanmadan görevi tamamlayabiliyorsa farklı bir yöntem deneyebilir. Belirli bir aracı kullanmak istiyorsanız isteminizde aracın adını belirtmeyi deneyin. Örneğin, "Mevcut projenin SDK yapılandırmasını almak için
firebase_get_sdk_config
kullanın." diyebilirsiniz.
Sonraki adımlar
- Firebase ve Google hizmetleriyle entegre edin.
- Özel şablonlar oluşturun.
- Firebase Studio uygulamasında aç düğmesi ekleyin.
- Firebase StudioÇalışma alanları hakkında daha fazla bilgi edinin.
- Firebase MCP sunucusu hakkında daha fazla bilgi edinin.
- Firebase Studio MCP sunucusu codelab'ini tamamlayın.