Firebase kullanarak bir Web uygulaması geliştirirken, alışılmadık kavramlarla veya projeniz için doğru kararları vermek üzere daha fazla bilgiye ihtiyaç duyduğunuz alanlarla karşılaşabilirsiniz. Bu sayfa, bu soruları yanıtlamayı veya daha fazlasını öğrenmek 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 olarak yeni konularla güncelleyeceğiz, bu nedenle öğrenmek istediğiniz konuyu ekleyip eklemediğimizi görmek için tekrar kontrol edin.
SDK sürüm 8 ve 9
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 arabirimidir. Firebase, bir büyük sürüm 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, webpack veya Rollup gibi modern JavaScript oluşturma araçlarıyla azaltılmış SDK boyutu ve daha fazla 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, bir modül olarak mevcut olmasına rağmen, tam olarak 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ğunluğ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ına ve hizmet modeline yönelikken, sürüm 9 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 ö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 sahipken, 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 değişkenlerinin yanı sıra SDK'ları eklemek/yüklemek için çeşitli seçenekleri destekler.
Şunlarla SDK 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 sayfanın ilerleyen kısımlarında yer alan Uygulamanıza Web SDK'ları eklemenin yolları ve Firebase Web SDK varyantları 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şlattığınızda sürüm 9 SDK'yı seçebilirsiniz.
Uygulamanızı geliştirirken, kodunuzun temelde işlevler etrafında düzenleneceğini unutmayın. 9. sürümde, hizmetler ilk bağımsız değişken olarak iletilir ve ardından işlev, gerisini halletmek 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ı için kılavuzlara ve sürüm 9 referans belgelerine bakın.
Web SDK'larını uygulamanıza 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ızla 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 biri aracılığıyla mevcut kitaplıklardan herhangi birini uygulamanıza ekleyebilirsiniz:
- npm (modül paketleyicileri ve Node.js için)
- CDN (içerik dağıtım ağı)
Ayrıntılı kurulum talimatları için Firebase'i JavaScript Uygulamanıza 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 bilgileri 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ı olmayan 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 uygulamanızın boyut ayak izini büyük ölçüde azaltabilen hedeflenen çoklu doldurmaları uygulamak için optimizasyon seçenekleri sunar. Bu özellikleri uygulamak, yapılandırmanıza ve yapı zincirinize biraz karmaşıklık katabilir, ancak çeşitli genel CLI araçları bunu hafifletmeye yardımcı olabilir. Bu araçlar arasında Angular , React , Vue , Next ve diğerleri bulunur.
Özetle:
- Değerli uygulama boyutu optimizasyonu sağlar
- Modülleri yönetmek için sağlam araçlar 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 olabileceği basit bir SDK kurulum yöntemidir. SDK'ları eklemek için CDN'yi kullandığınızda, bir oluşturma aracına ihtiyacınız olmaz ve yapı zinciriniz, modül paketleyicilere kıyasla daha basit ve kullanımı daha kolay olabilir. 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 boyutunun önemli bir sorun olmadığı durumlarda uygundur
- Web siteniz oluşturma araçlarını kullanmadığında uygundur.
Firebase Web SDK varyantları
Ş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 hepsini olmasa da birçoğunu destekleyen, istemci tarafı bir 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. Hedefiniz ayrıcalıklı ortamlardan (sunucular gibi) yönetici erişimi ayarlamaksa, bunun yerine Firebase Admin SDK'yı kullanın.
Paket oluşturucular ve çerçevelerle ortam algılama
Firebase Web SDK'yı npm kullanarak yüklediğinizde JavaScript ve Node.js sürümlerinin her 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, package.json
dosyanızda (örneğin, main
, browser
veya module
) doğru giriş noktası alanını algılamak için paketleyicinizin ayarlarının doğru bir şekilde belirlenmesi gerekir. SDK ile çalışma zamanı hataları yaşıyorsanı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 aşağıdaki gerekli "Firebase seçeneklerini" 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.Firebase projenizde Google Analytics'i etkinleştirdiyseniz, yapılandırma nesneniz
measurementId
alanını içerir. Analytics başlangıç 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 aşağıdadır (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 yüklenmesini geciktirin (CDN'den)
Sayfanın tamamı yüklenene kadar Firebase SDK'larının dahil edilmesini erteleyebilirsiniz. <script type="module">
ile sürüm 9 CDN komut dosyaları 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 çok Firebase projesine erişmeniz gerekir. Örneğin, bir Firebase projesinin veritabanındaki verileri okumak, ancak dosyaları farklı bir Firebase projesinde depolamak isteyebilirsiniz. Ya da 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 birden çok Firebase projesini aynı anda 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'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'yi nasıl kuracağınızı veya en son sürümüne nasıl güncelleyeceğinizi öğ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 Barındırma 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. Genel dizini daha sonra doğrudan
firebase.json
dosyanızı 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 koleksiyonuna sahiptir. Bu hızlı başlangıçları genel Firebase GitHub hızlı başlangıç depomuzda bulabilirsiniz. Bu hızlı başlangıçları, Firebase SDK'larını kullanmak için örnek kod olarak kullanabilirsiniz.