Web için Firebase'i anlama

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 ve appID'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 ve databaseURL) 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: "PROJECT_ID.firebasestorage.app",
  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ı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:

  1. Firebase SDK'ları için her defer etikete bir script 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>
    
  2. 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.

  1. 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.

  2. Firebase projenizi başlatın. Yerel uygulama dizininizin kökünden aşağıdaki komutu çalıştırın:

    firebase init

  3. 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.