Firebase kullanarak bir Web uygulaması geliştirirken, tanıdık olmayan kavramlarla veya projeniz için doğru kararları vermek için daha fazla bilgiye ihtiyaç duyduğunuz alanlarla karşılaşabilirsiniz. Bu sayfa, bu soruları yanıtlamayı veya daha fazla bilgi edinmek için sizi kaynaklara yönlendirmeyi amaçlamaktadır.
Bu sayfada ele alınmayan bir konu hakkında sorularınız varsa, çevrimiçi topluluklarımızdan birini ziyaret edin. Ayrıca bu sayfayı düzenli aralıklarla yeni konularla güncelleyeceğiz, bu nedenle öğrenmek istediğiniz konuyu ekleyip eklemediğimizi tekrar kontrol edin.
SDK'nın 8 ve 9 sürümleri
Firebase, Web uygulamaları için iki SDK sürümü sağlar:
- Sürüm 8. Bu, Firebase'in birkaç yıldır sürdürdüğü ve mevcut Firebase uygulamalarına sahip Web geliştiricilerinin aşina olduğu JavaScript arayüzüdür. Firebase, büyük bir yayın döngüsünden sonra bu sürüm için desteği kaldıracağından, yeni uygulamalar bunun yerine sürüm 9'u benimsemelidir.
- Modüler sürüm 9 . Bu SDK, web paketi veya Rollup gibi modern JavaScript oluşturma araçlarıyla daha düşük SDK boyutu ve daha yüksek verimlilik sağlayan modüler bir yaklaşım sunar.
Sürüm 9, "ağaç sallama" olarak bilinen bir işlem olan uygulamanızda kullanılmayan kodu çıkaran derleme araçlarıyla iyi bir şekilde bütünleşir. Bu SDK ile oluşturulan uygulamalar, büyük ölçüde azaltılmış boyut ayak izlerinden yararlanır. Sürüm 8, modül olarak mevcut olmasına rağmen, kesinlikle modüler bir yapıya sahip değildir ve aynı derecede boyut küçültme sağlamaz.
Sürüm 9 SDK'sının çoğu, sürüm 8 ile aynı kalıpları izlese de, kodun organizasyonu farklıdır. Genel olarak, sürüm 8 bir ad alanı ve hizmet modeline yöneliktir, sürüm 9 ise ayrık işlevlere yöneliktir. Örneğin, sürüm 8'in firebaseApp.auth()
gibi nokta zincirleme özelliği, sürüm 9'da firebaseApp
alan ve bir Kimlik Doğrulama örneği döndüren tek bir getAuth()
işleviyle değiştirilir.
Bu, sürüm 8 veya daha önceki sürümlerle oluşturulan Web uygulamalarının, sürüm 9'un modüler yaklaşımından yararlanmak için yeniden düzenleme gerektirdiği anlamına gelir. Firebase, bu geçişi kolaylaştırmak için uyumluluk kitaplıkları sağlar; daha fazla ayrıntı için yükseltme kılavuzuna bakın.
Ne desteklenir?
Sürüm 8 ve sürüm 9 farklı kod stillerine sahip olsa da, Firebase özellikleri ve seçenekleri için çok benzer destek sağlarlar. Bu kılavuzda ayrıntılı olarak açıklayacağımız gibi, her iki SDK sürümü de JavaScript ve Node.js türevlerinin yanı sıra SDK'ları eklemek/yüklemek için çeşitli seçenekleri destekler.
SDK'ları şununla ekleyin: | 8.0 (Ad alanlı) | 9.0 (Modüler) |
---|---|---|
npm |
|
|
CDN (İçerik Dağıtım Ağı) |
|
|
Barındırma URL'leri |
|
Daha fazla bilgi için, bu sayfada daha sonra Web SDK'larını uygulamanıza ve Firebase Web SDK türevlerine eklemenin yolları bölümüne bakın.
Yeni uygulamalar için Sürüm 9
Firebase ile yeni bir entegrasyona başlıyorsanız, SDK'yı ekleyip başlatırken sürüm 9 SDK'yı etkinleştirebilirsiniz.
Uygulamanızı geliştirirken, kodunuzun temel olarak işlevler etrafında düzenleneceğini unutmayın. Sürüm 9'da, hizmetler ilk argüman olarak iletilir ve işlev daha sonra gerisini yapmak için hizmetin ayrıntılarını kullanır. Örneğin:
import { getAuth, onAuthStateChanged } from "firebase/auth";
const auth = getAuth(firebaseApp);
onAuthStateChanged(auth, user => {
// Check for user status
});
Daha fazla örnek ve ayrıntı için, her bir ürün alanına ilişkin kılavuzlara ve ayrıca sürüm 9 başvuru belgelerine bakın.
Uygulamanıza Web SDK'ları eklemenin yolları
Firebase, Remote Config, FCM ve daha fazlası dahil olmak üzere çoğu Firebase ürünü için JavaScript kitaplıkları sağlar. Firebase SDK'larını Web uygulamanıza nasıl ekleyeceğiniz, uygulamanızda hangi araçları kullandığınıza (bir modül paketleyici gibi) veya uygulamanızın Node.js gibi tarayıcı olmayan bir ortamda çalışıp çalışmadığına bağlıdır.
Desteklenen yöntemlerden birini kullanarak mevcut kitaplıklardan herhangi birini uygulamanıza ekleyebilirsiniz:
- npm (modül paketleyiciler ve Node.js için)
- CDN (içerik dağıtım ağı)
Ayrıntılı kurulum talimatları için JavaScript Uygulamanıza Firebase Ekleme bölümüne bakın. Bu bölümün geri kalanı, mevcut seçenekler arasından seçim yapmanıza yardımcı olacak bilgiler içerir.
npm
Firebase npm paketini (hem tarayıcı hem de Node.js paketlerini içerir) indirmek size, Node.js uygulamaları, React Native veya Electron gibi tarayıcı dışı uygulamalar için gerekli olabilecek Firebase SDK'nın yerel bir kopyasını sağlar. İndirme, bazı paketler için bir seçenek olarak Node.js ve React Native paketlerini içerir. Node.js paketleri, SSR çerçevelerinin sunucu tarafı oluşturma (SSR) adımı için gereklidir.
npm'yi webpack veya Rollup gibi bir modül paketleyici ile kullanmak, kullanılmayan kodu "ağaç sallamak" ve hedeflenen çoklu dolguları uygulamak için optimizasyon seçenekleri sunar, bu da uygulamanızın boyut ayak izini büyük ölçüde azaltabilir. Bu özellikleri uygulamak, yapılandırmanıza ve yapı zincirinize biraz karmaşıklık katabilir, ancak çeşitli ana akım CLI araçları bunu azaltmaya yardımcı olabilir. Bu araçlar Angular , React , Vue , Next ve diğerlerini içerir.
Özetle:
- Değerli uygulama boyutu optimizasyonu sağlar
- Modülleri yönetmek için sağlam takımlar mevcuttur
- Node.js ile SSR için gerekli
CDN (içerik dağıtım ağı)
Firebase'in CDN'sinde depolanan kitaplıkları eklemek, birçok geliştiricinin aşina olduğu basit bir SDK kurulum yöntemidir. SDK'ları eklemek için CDN'yi kullandığınızda, bir derleme aracına ihtiyacınız olmaz ve derleme zinciriniz modül paketleyicilere kıyasla daha basit ve daha kolay çalışabilir. Uygulamanızın yüklü boyutuyla özellikle ilgilenmiyorsanız ve TypeScript'ten aktarma gibi özel gereksinimleriniz yoksa, CDN iyi bir seçim olabilir.
Özetle:
- tanıdık ve basit
- Uygulama boyutu önemli bir sorun olmadığında uygundur
- Web siteniz oluşturma araçları kullanmadığında uygundur.
Firebase Web SDK çeşitleri
Şu anda Firebase iki Web SDK çeşidi sunmaktadır:
- Tarayıcıda kullanım için tüm Firebase özelliklerini destekleyen bir JavaScript paketi.
- Firebase özelliklerinin çoğunu (ancak hepsini değil) destekleyen bir istemci tarafı Node.js paketi. Desteklenen ortamların listesine bakın.
Bu SDK varyantlarının her ikisi de, bir Node.js masaüstü veya IoT uygulamasında olduğu gibi, son kullanıcı erişimi için web uygulamaları veya istemci uygulamaları oluşturmaya yardımcı olmak üzere tasarlanmıştır. Amacınız ayrıcalıklı ortamlardan (sunucular gibi) yönetim erişimi kurmaksa, bunun yerine Firebase Admin SDK'yı kullanın.
Paketleyiciler ve çerçeveler ile ortam algılama
Firebase Web SDK'sını npm kullanarak kurduğunuzda, JavaScript ve Node.js sürümlerinin ikisi de yüklenir. Paket, uygulamanız için doğru paketleri etkinleştirmek için ayrıntılı ortam algılama sağlar.
Kodunuz Node.js require
deyimlerini kullanıyorsa SDK, Düğüme özgü paketi bulur. Aksi takdirde, paketleyicinizin ayarlarının, package.json
dosyanızdaki (örneğin, main
, browser
veya module
) doğru giriş noktası alanını algılamak için doğru şekilde yapılmış olması gerekir. SDK ile çalışma zamanı hatalarıyla karşılaşırsanız, paketleyicinizin ortamınız için doğru paket türüne öncelik verecek şekilde yapılandırıldığından emin olun.
Firebase yapılandırma nesnesi hakkında bilgi edinin
Firebase'i uygulamanızda başlatmak için uygulamanızın Firebase proje yapılandırmasını sağlamanız gerekir. Firebase yapılandırma nesnenizi istediğiniz zaman alabilirsiniz.
Yapılandırma nesnenizi, özellikle şu gerekli "Firebase seçenekleri"ni manuel olarak düzenlemenizi önermiyoruz:
apiKey
,projectId
veappID
. Uygulamanızı bu gerekli "Firebase seçenekleri" için geçersiz veya eksik değerlerle başlatırsanız, uygulamanızın kullanıcıları ciddi sorunlar yaşayabilir.measurementId
projenizde Google Analytics'i etkinleştirdiyseniz, yapılandırma nesneniz MeasureId alanını içerir. Analytics'e başlarken sayfasında bu alan hakkında daha fazla bilgi edinin.Firebase Web Uygulamanızı oluşturduktan sonra Google Analytics'i veya Gerçek Zamanlı Veritabanını etkinleştirirseniz, uygulamanızda kullandığınız Firebase yapılandırma nesnesinin ilişkili yapılandırma değerleriyle (sırasıyla
measurementId
vedatabaseURL
) güncellendiğinden emin olun. Firebase yapılandırma nesnenizi istediğiniz zaman alabilirsiniz.
Tüm hizmetlerin etkinleştirildiği bir yapılandırma nesnesinin biçimi şu şekildedir (bu değerler otomatik olarak doldurulur):
var firebaseConfig = { apiKey: "API_KEY", authDomain: "PROJECT_ID.firebaseapp.com", // The value of `databaseURL` depends on the location of the database databaseURL: "https://DATABASE_NAME.firebaseio.com", projectId: "PROJECT_ID", storageBucket: "PROJECT_ID.appspot.com", messagingSenderId: "SENDER_ID", appId: "APP_ID", // For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field measurementId: "G-MEASUREMENT_ID", };
Kullanılabilir kitaplıklar
Ek kurulum seçenekleri
Firebase SDK'larının gecikmeli yüklenmesi (CDN'den)
Tüm sayfa yüklenene kadar Firebase SDK'larının eklenmesini geciktirebilirsiniz. <script type="module">
ile sürüm 9 CDN komut dosyalarını kullanıyorsanız, bu varsayılan davranıştır. Modül olarak sürüm 8 CDN komut dosyalarını kullanıyorsanız, yüklemeyi ertelemek için şu adımları tamamlayın:
Firebase SDK'ları için her
script
etiketine birdefer
bayrağı ekleyin, ardından ikinci bir komut dosyası kullanarak Firebase'in başlatılmasını erteleyin, örneğin:<script defer src="https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js"></script> <script defer src="https://www.gstatic.com/firebasejs/8.10.1/firebase-auth.js"></script> <script defer src="https://www.gstatic.com/firebasejs/8.10.1/firebase-firestore.js"></script> // ... <script defer src="./init-firebase.js"></script>
Bir
init-firebase.js
dosyası oluşturun, ardından aşağıdakileri dosyaya ekleyin:// TODO: Replace the following with your app's Firebase project configuration var firebaseConfig = { // ... }; // Initialize Firebase firebase.initializeApp(firebaseConfig);
Tek bir uygulamada birden fazla Firebase projesi kullanın
Çoğu durumda, Firebase'i yalnızca tek bir varsayılan uygulamada başlatmanız gerekir. Firebase'e bu uygulamadan iki eşdeğer yolla erişebilirsiniz:
Web version 9
import { initializeApp } from "firebase/app"; import { getStorage } from "firebase/storage"; import { getFirestore } from "firebase/firestore"; // Initialize Firebase with a "default" Firebase project const defaultProject = initializeApp(firebaseConfig); console.log(defaultProject.name); // "[DEFAULT]" // Option 1: Access Firebase services via the defaultProject variable let defaultStorage = getStorage(defaultProject); let defaultFirestore = getFirestore(defaultProject); // Option 2: Access Firebase services using shorthand notation defaultStorage = getStorage(); defaultFirestore = getFirestore();
Web version 8
// Initialize Firebase with a "default" Firebase project const defaultProject = firebase.initializeApp(firebaseConfig); console.log(defaultProject.name); // "[DEFAULT]" // Option 1: Access Firebase services via the defaultProject variable let defaultStorage = defaultProject.storage(); let defaultFirestore = defaultProject.firestore(); // Option 2: Access Firebase services using shorthand notation defaultStorage = firebase.storage(); defaultFirestore = firebase.firestore();
Ancak bazen aynı anda birden fazla Firebase projesine erişmeniz gerekir. Örneğin, bir Firebase projesinin veritabanındaki verileri okumak, ancak dosyaları farklı bir Firebase projesinde depolamak isteyebilirsiniz. Veya ikinci bir projeyi kimliği doğrulanmamış halde tutarken bir projenin kimliğini doğrulamak isteyebilirsiniz.
Firebase JavaScript SDK'sı, her proje kendi Firebase yapılandırma bilgilerini kullanarak aynı anda birden fazla Firebase projesini tek bir uygulamada başlatmanıza ve kullanmanıza olanak tanır.
Web version 9
import { initializeApp, getApp } from "firebase/app"; import { getStorage } from "firebase/storage"; import { getFirestore } from "firebase/firestore"; // Initialize Firebase with a default Firebase project initializeApp(firebaseConfig); // Initialize Firebase with a second Firebase project const otherProject = initializeApp(otherProjectFirebaseConfig, "other"); console.log(getApp().name); // "[DEFAULT]" console.log(otherProject.name); // "otherProject" // Use the shorthand notation to access the default project's Firebase services const defaultStorage = getStorage(); const defaultFirestore = getFirestore(); // Use the otherProject variable to access the second project's Firebase services const otherStorage = getStorage(otherProject); const otherFirestore = getFirestore(otherProject);
Web version 8
// Initialize Firebase with a default Firebase project firebase.initializeApp(firebaseConfig); // Initialize Firebase with a second Firebase project const otherProject = firebase.initializeApp(otherProjectFirebaseConfig, "other"); console.log(firebase.app().name); // "[DEFAULT]" console.log(otherProject.name); // "otherProject" // Use the shorthand notation to access the default project's Firebase services const defaultStorage = firebase.storage(); const defaultFirestore = firebase.firestore(); // Use the otherProject variable to access the second project's Firebase services const otherStorage = otherProject.storage(); const otherFirestore = otherProject.firestore();
Geliştirme için yerel bir web sunucusu çalıştırın
Bir web uygulaması oluşturuyorsanız, Firebase JavaScript SDK'sının bazı bölümleri, web uygulamanızı yerel dosya sistemi yerine bir sunucudan sunmanızı gerektirir. Yerel bir sunucu çalıştırmak için Firebase CLI'yi kullanabilirsiniz.
Uygulamanız için Firebase Hosting'i zaten ayarladıysanız, aşağıdaki adımlardan birkaçını zaten tamamlamış olabilirsiniz.
Web uygulamanızı sunmak için bir komut satırı aracı olan Firebase CLI'yi kullanacaksınız.
CLI'nin nasıl kurulacağını veya en son sürümüne nasıl güncelleneceğini öğrenmek için Firebase CLI belgelerini ziyaret edin.
Firebase projenizi başlatın. Yerel uygulama dizininizin kökünden aşağıdaki komutu çalıştırın:
firebase init
Yerel uygulama dizininizi Firebase ile bağlar
Bir
firebase.json
dosyası oluşturur (Firebase Hosting için gerekli bir dosya)Genel statik dosyalarınızı (HTML, CSS, JS, vb.) içeren bir genel kök dizini belirtmenizi ister.
Firebase'in aradığı dizinin varsayılan adı "genel"dir. Ayrıca genel dizini daha sonra
firebase.json
dosyanızı doğrudan değiştirerek de ayarlayabilirsiniz.
Geliştirme için yerel sunucuyu başlatın. Yerel uygulama dizininizin kökünden aşağıdaki komutu çalıştırın:
firebase serve
Firebase JavaScript SDK'ları için açık kaynak kaynakları
Firebase, açık kaynak geliştirmeyi destekler ve topluluk katkılarını ve geri bildirimlerini teşvik ederiz.
Firebase JavaScript SDK'ları
Çoğu Firebase JavaScript SDK'sı, genel Firebase GitHub depomuzda açık kaynak kitaplıkları olarak geliştirilmiştir.
Hızlı başlangıç örnekleri
Firebase, Web'deki çoğu Firebase API'si için bir hızlı başlangıç örnekleri koleksiyonu bulundurur. Bu hızlı başlangıçları genel Firebase GitHub hızlı başlangıç depomuzda bulun. Bu hızlı başlangıçları, Firebase SDK'larını kullanmak için örnek kod olarak kullanabilirsiniz.