Firebase kullanarak bir web uygulaması geliştirirken, aşina olmadığınız kavramlarla veya projeniz için doğru kararlar verebilmek adına daha fazla bilgiye ihtiyaç duyduğunuz alanlarla karşılaşabilirsiniz. Bu sayfa, bu soruları yanıtlamayı veya daha fazla bilgi edinmek için kaynaklara yönlendirmeyi amaçlamaktadır.
Bu sayfada ele alınmayan bir konu hakkında sorunuz varsa online topluluklarımızdan birini ziyaret edin. Bu sayfayı da düzenli olarak yeni konularla güncelleyeceğiz. Bu nedenle, öğrenmek istediğiniz konunun eklenip eklenmediğini görmek için sayfayı tekrar kontrol edin.
SDK sürümleri: ad alanlı ve modüler
Firebase, web uygulamaları için iki API yüzeyi sağlar:
- JavaScript - ad alanı. Bu, Firebase'in uzun yıllar boyunca desteklediği ve eski Firebase uygulamaları olan web geliştiricilerin aşina olduğu JavaScript arayüzüdür. Ad alanlı API, devam eden yeni özellik desteğinden yararlanmadığı için çoğu yeni uygulamanın bunun yerine modüler API'yi kullanması gerekir.
- JavaScript - modular. Bu SDK, webpack veya Rollup gibi modern JavaScript derleme araçlarıyla daha küçük bir SDK boyutu ve daha fazla verimlilik sağlayan modüler bir yaklaşıma dayanır.
Modüler API, uygulamanızda kullanılmayan kodu temizleyen derleme araçlarıyla iyi entegre olur. Bu işleme "tree-shaking" adı verilir. Bu SDK ile oluşturulan uygulamaların boyutları önemli ölçüde küçülür. Ad alanı API'si, modül olarak kullanılabilse de kesinlikle modüler bir yapıya sahip değildir ve aynı oranda boyut küçültme sağlamaz.
Modüler API'nin büyük bir kısmı ad alanlı API ile aynı kalıpları izlese de kodun düzeni farklıdır. Genel olarak, ad alanlı API bir ad alanı ve hizmet modeline, modüler API ise ayrı işlevlere yöneliktir. Örneğin, ad alanlı API'nin nokta zincirleme yöntemi (ör. firebaseApp.auth()
), modüler API'de firebaseApp
alan ve Authentication örneği döndüren tek bir getAuth()
işleviyle değiştirilir.
Bu, ad alanı içeren API ile oluşturulan web uygulamalarının modüler uygulama tasarımından yararlanmak için yeniden düzenlenmesi gerektiği anlamına gelir. Daha ayrıntılı bilgi için yükseltme kılavuzuna bakın.
JavaScript - yeni uygulamalar için modüler API
Firebase ile yeni bir entegrasyona başlıyorsanız SDK'yı ekleyip başlatırken modüler API'yi etkinleştirebilirsiniz.
Uygulamanızı geliştirirken kodunuzun temel olarak işlevler etrafında düzenleneceğini unutmayın. Modüler API'de hizmetler ilk bağımsız değişken olarak iletilir ve işlev, geri kalan işlemleri 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 ürün alanıyla ilgili kılavuzların yanı sıra modüler API referans belgelerini inceleyin.
Web SDK'larını uygulamanıza ekleme yöntemleri
Firebase, Remote Config ve FCM 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 kullandığınız araçlara (ör. modül paketleyici) bağlıdır.
Kullanılabilir kitaplıklardan herhangi birini, desteklenen yöntemlerden birini kullanarak uygulamanıza ekleyebilirsiniz:
- npm (modül paketleyiciler için)
- CDN (içerik yayınlama ağı)
Ayrıntılı kurulum talimatları için Firebase'i JavaScript uygulamanıza ekleme başlıklı makaleyi inceleyin. Bu bölümün geri kalanında, mevcut seçenekler arasından seçim yapmanıza yardımcı olacak bilgiler yer almaktadır.
npm
Firebase npm paketini (hem tarayıcı hem de Node.js paketlerini içerir) indirdiğinizde Firebase SDK'nın yerel bir kopyasını elde edersiniz. Bu kopya, Node.js uygulamaları, React Native veya Electron gibi tarayıcı dışı uygulamalar için gerekli olabilir. İndirme işleminde, bazı paketler için Node.js ve React Native paketleri de bulunur. Node.js paketleri, SSR çerçevelerinin sunucu tarafı oluşturma (SSR) adımında gereklidir.
npm'yi webpack veya Rollup gibi bir modül paketleyiciyle kullanmak, kullanılmayan kodu "tree-shake" etmek ve hedeflenen polyfill'leri uygulamak için optimizasyon seçenekleri sunar. Bu da uygulamanızın boyutunu önemli ölçüde azaltabilir. Bu özellikleri uygulamak, yapılandırmanıza ve derleme zincirinize biraz karmaşıklık katabilir ancak çeşitli yaygın CLI araçları bu durumu hafifletmeye yardımcı olabilir. Bu araçlar arasında Angular, React, Vue, Next ve diğerleri bulunur.
Özet olarak:
- Değerli uygulama boyutu optimizasyonu sağlar
- Modülleri yönetmek için güçlü araçlar mevcuttur.
- Node.js ile SSR için gereklidir
CDN (içerik yayınlama 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 derleme aracına ihtiyacınız olmaz ve derleme zinciriniz, modül paketleyicilere kıyasla daha basit ve kullanımı daha kolay olabilir. Uygulamanızın yüklü boyutuyla ilgili özel bir endişeniz yoksa ve TypeScript'ten derleme gibi özel gereksinimleriniz yoksa CDN iyi bir seçenek olabilir.
Özet olarak:
- Tanıdık ve basit
- Uygulama boyutu önemli bir sorun olmadığında uygundur.
- Web sitenizde derleme araçları kullanılmadığında uygundur.
Firebase Web SDK varyantları
Firebase'in web SDK'sı hem tarayıcı hem de Node uygulamalarında kullanılabilir. Ancak bazı ürünler Node ortamlarında kullanılamaz. Desteklenen ortamların listesini inceleyin.
Bazı ürün SDK'ları, her biri hem ESM hem de CJS biçimlerinde sağlanan ayrı tarayıcı ve Node varyantları sunar. Bazı ürün SDK'ları ise Cordova veya React Native varyantları bile sunar. Web SDK, araç yapılandırmanıza veya ortamınıza göre doğru varyantı sağlayacak şekilde yapılandırılır ve çoğu durumda manuel seçim gerektirmez. Tüm SDK varyantları, son kullanıcı erişimi için web uygulamaları veya istemci uygulamaları oluşturmaya yardımcı olmak üzere tasarlanmıştır. Örneğin, Node.js masaüstü veya IoT uygulamasında. Amacınız ayrıcalıklı ortamlardan (ör. sunucular) yönetici erişimi ayarlamaksa Firebase Admin SDK'ı kullanın.
Paketleyiciler ve çerçevelerle ortam algılama
Firebase web SDK'sını npm kullanarak yüklediğinizde hem JavaScript hem de Node.js sürümleri yüklenir. Paket, uygulamanız için doğru paketlerin etkinleştirilmesi amacıyla ayrıntılı ortam algılama sağlar.
Kodunuzda Node.js require
ifadeleri kullanılıyorsa SDK, Node'a özel paketi bulur. Aksi takdirde, paketleyicinizin ayarları package.json
dosyanızdaki doğru giriş noktası alanını (örneğin, main
, browser
veya module
) algılayacak şekilde doğru yapılandırılmalıdır. SDK ile ilgili ç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 olmak üzere kontrol edin.
Firebase yapılandırma nesnesi hakkında bilgi
Uygulamanızda Firebase'i başlatmak için uygulamanızın Firebase yapılandırmasını sağlamanız gerekir. Dilediğiniz zaman Firebase yapılandırma nesnenizi edinebilirsiniz.
Yapılandırma nesnenizi, özellikle aşağıdaki zorunlu "Firebase seçenekleri" olan
apiKey
,projectId
veappID
'yi manuel olarak düzenlemenizi önermiyoruz. 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. Bu durumun istisnası,authDomain
olup signInWithRedirect'i kullanmayla ilgili en iyi uygulamalar izlenerek güncellenebilir.Firebase projenizde Google Analytics özelliğini etkinleştirdiyseniz yapılandırma nesnenizde
measurementId
alanı bulunur. Bu alan hakkında daha fazla bilgiyi Analytics kullanmaya başlama sayfasında bulabilirsiniz.Firebase web uygulamanızı oluşturduktan Google Analytics veya Realtime Database sonra 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 edinebilirsiniz.
Tüm hizmetlerin etkinleştirildiği bir yapılandırma nesnesinin biçimi aşağıda verilmiştir (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", // The value of `storageBucket` depends on when you provisioned your default bucket (learn more) storageBucket: "", messagingSenderId: "SENDER_ID", appId: "APP_ID", // For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field measurementId: "G-MEASUREMENT_ID", }; PROJECT_ID.firebasestorage.app
Kullanılabilen kitaplıklar
Ek kurulum seçenekleri
Firebase SDK'larının (CDN'den) yüklenmesini geciktirme
Firebase SDK'larının dahil edilmesini, sayfanın tamamı yüklenene kadar geciktirebilirsiniz. <script type="module">
ile modüler API CDN komut dosyaları kullanıyorsanız bu varsayılan davranıştır. Ad alanı içeren CDN komut dosyalarını modül olarak kullanıyorsanız yüklemeyi ertelemek için aşağıdaki adımları tamamlayın:
Firebase SDK'ları için her
defer
etikete birscript
işareti ekleyin, ardından Firebase'in başlatılmasını ikinci bir komut dosyası kullanarak 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 ve dosyaya aşağıdakileri ekleyin:// TODO: Replace the following with your app's Firebase configuration var firebaseConfig = { // ... }; // Initialize Firebase firebase.initializeApp(firebaseConfig);
Tek bir uygulamada birden fazla Firebase projesi kullanma
Çoğu durumda, Firebase'i yalnızca tek bir varsayılan uygulamada başlatmanız gerekir. Firebase'e bu uygulamadan iki eşdeğer şekilde erişebilirsiniz:
Web
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
// 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. Dilerseniz bir projeyi kimlik doğrularken ikinci bir projeyi kimlik doğrulanmamış olarak tutabilirsiniz.
Firebase JavaScript SDK, tek bir uygulamada aynı anda birden fazla Firebase projesini başlatmanıza ve kullanmanıza olanak tanır. Her proje kendi Firebase yapılandırma bilgilerini kullanır.
Web
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
// 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ırma
Bir web uygulaması oluşturuyorsanız Firebase JavaScript SDK'sının bazı bölümleri, web uygulamanızı yerel dosya sisteminden değil, bir sunucudan sunmanızı gerektirir. Yerel sunucu çalıştırmak için Firebase KSA'yı kullanabilirsiniz.
Uygulamanız için Firebase Hosting'yı daha önce ayarladıysanız aşağıdaki adımların birçoğunu tamamlamış olabilirsiniz.
Web uygulamanızı sunmak için komut satırı aracı olan Firebase CLI'yı kullanacaksınız.
Firebase CLI belgelerini ziyaret ederek CLI'yı nasıl yükleyeceğinizi veya en son sürümüne nasıl güncelleyeceğinizi öğrenin.
Firebase projenizi başlatın. Yerel uygulama dizininizin kökünden aşağıdaki komutu çalıştırın:
firebase init
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 kaynaklı kaynaklar
Firebase, açık kaynak geliştirmeyi destekler. Topluluğun katkılarını ve geri bildirimlerini bekliyoruz.
Firebase JavaScript SDK'ları
Çoğu Firebase JavaScript SDK'sı, herkese açık Firebase GitHub depomuzda açık kaynak kitaplıklar olarak geliştirilir.
Hızlı başlangıç örnekleri
Firebase, Web'deki çoğu Firebase API'si için hızlı başlangıç örnekleri koleksiyonu tutar. Bu hızlı başlangıç kılavuzlarını herkese açık Firebase GitHub hızlı başlangıç deposunda bulabilirsiniz. Bu hızlı başlangıçları, Firebase SDK'larını kullanmayla ilgili örnek kod olarak kullanabilirsiniz.