Firebase for Web'i anlama

Firebase kullanarak bir web uygulaması geliştirirken bilmediğiniz kavramlarla veya projenizle ilgili doğru kararları vermek için daha fazla bilgiye ihtiyaç duyduğunuz alanlarla karşılaşabilirsiniz. Bu sayfa, bu soruları yanıtlamayı veya sizi daha fazla bilgi edinebileceğiniz kaynaklara yönlendirmeyi amaçlar.

Bu sayfada ele alınmayan bir konuyla ilgili sorularınız varsa online topluluklarımızdan birini ziyaret edin. Ayrıca bu sayfayı düzenli aralıklarla yeni konularla güncelleyeceğiz. Bilgi almak istediğiniz konuyu ekleyip eklemediğimizi görmek için tekrar kontrol edin.

SDK sürümleri: ad alanlı ve modüler

Firebase, Web uygulamaları için iki API yüzeyi sunar:

  • JavaScript - ad alanlı. Bu, Firebase'in yıllardır yönettiği JavaScript arayüzüdür ve eski Firebase uygulamalarına sahip web geliştiricilerinin aşina olduğu bir arayüzdür. Ad alanına sahip API devam eden yeni özellik desteğinden yararlanmadığı için çoğu yeni uygulama bunun yerine modüler API'yi benimsemelidir.
  • JavaScript - modüler. Bu SDK, webpack veya Toplayıcı gibi modern JavaScript oluşturma araçlarıyla daha küçük SDK boyutu ve daha yüksek verimlilik sağlayan modüler bir yaklaşıma dayanır.

Modüler API, uygulamanızda kullanılmayan kodları ortadan kaldıran derleme araçlarıyla ("ağaç sallama" olarak bilinir) etkili bir şekilde entegre olur. Bu SDK ile oluşturulan uygulamalar büyük ölçüde daha az yer kaplar. Ad alanına sahip API, modül olarak bulunsa da kesin bir şekilde modüler bir yapıya sahip değildir ve boyut açısından aynı derecede küçültme sağlamaz.

Modüler API'nin büyük kısmı ad alanına sahip API ile aynı kalıpları izlese de, kodun düzeni farklıdır. Genel olarak ad alanına sahip API bir ad alanı ve hizmet kalıbına, modüler API ise ayrı işlevlere yöneliktir. Örneğin, ad alanına sahip API'nin firebaseApp.auth() gibi nokta zincirleri, modüler API'de firebaseApp alan ve bir Kimlik Doğrulama örneği döndüren tek bir getAuth() işleviyle değiştirilir.

Bu, ad alanına sahip API ile oluşturulan web uygulamalarının modüler uygulama tasarımından yararlanabilmek için yeniden düzenlenmesi gerektiği anlamına gelir. Daha fazla ayrıntı için yeni sürüme geçiş 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, gerisini yapmak için hizmetin ayrıntılarını kullanır. Örnek:

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ının kılavuzlarının yanı sıra modüler API referans belgelerini inceleyin.

Uygulamanıza Web SDK'larını ekleme yöntemleri

Firebase, Remote Config ve FCM gibi birçok Firebase ürünü için JavaScript kitaplıkları sağlar. Firebase SDK'larını web uygulamanıza nasıl ekleyeceğiniz, uygulamanızla hangi aracı (ör. modül paketi) kullandığınıza bağlıdır.

Desteklenen yöntemlerden birini kullanarak kullanılabilir kitaplıklardan herhangi birini 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 bölümüne bakın. Bu bölümün geri kalanında, mevcut seçenekler arasından seçim yapmanıza yardımcı olacak bilgiler bulunur.

npm

Hem tarayıcı hem de Node.js paketlerini içeren Firebase npm paketini indirmeniz, Firebase SDK'sının Node.js uygulamaları, React Native veya Electron gibi tarayıcı olmayan uygulamalar için gerekli olabilecek yerel bir kopyasını sağlar. İndirme işlemi, bazı paketler için 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'nin webpack veya Rollup gibi bir modül paketleyiciyle kullanılması, kullanılmayan kodları "ağaç sallamak" ve hedeflenen polyfill'leri uygulamak için optimizasyon seçenekleri sunar. Böylece uygulamanızın boyut ayak izini önemli ölçüde azaltabilirsiniz. Bu özelliklerin uygulanması, yapılandırmanıza ve derleme zincirinize biraz karmaşıklık katabilir ancak çeşitli ana CLI araçları bunu azaltmaya yardımcı olabilir. Bu araçlar arasında Angular, React, Vue, Next ve diğerleri bulunur.

Özet olarak:

  • Uygulama boyutu için değerli optimizasyon sağlar
  • Modülleri yönetmek için sağlam araçlar mevcuttur
  • Node.js ile SSR için gerekli

CDN (içerik yayınlama ağı)

Firebase CDN'sinde depolanan kitaplıkları eklemek, birçok geliştiriciye tanıdık gelebilecek 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 zincirinizin çalışması, modül paketleyicilere kıyasla daha basit ve daha kolay olabilir. Özellikle uygulamanızın yüklü boyutuyla ilgili değilseniz ve TypeScript'ten aktarma gibi özel gereksinimleriniz yoksa CDN iyi bir tercih olabilir.

Özet olarak:

  • Tanıdık ve basit
  • Uygulama boyutu çok önemli olmadığı durumlarda uygundur
  • Web sitenizde derleme araçları kullanılmıyorsa uygundur.

Firebase Web SDK varyantları

Firebase'in Web SDK'sı hem tarayıcı hem de Düğüm uygulamalarında kullanılabilir. Ancak birçok ürün Node ortamlarında kullanılamaz. Desteklenen ortamların listesine bakın.

Bazı ürün SDK'ları ayrı tarayıcı ve Düğüm varyantları sağlar. Bunların her biri hem ESM hem de CJS biçimlerinde sağlanır. Bazı ürün SDK'ları ise Cordova veya React Native varyantlarını sağlar. Web SDK, araç yapılandırmanıza veya ortamınıza göre doğru varyantı sağlayacak şekilde yapılandırılmıştır ve çoğu durumda manuel seçim gerektirmez. Tüm SDK varyantları, Node.js masaüstü uygulaması veya IoT uygulaması gibi son kullanıcı erişimi için web uygulamaları ya da istemci uygulamaları derlemeye yardımcı olmak amacıyla tasarlanmıştır. Hedefiniz ayrıcalıklı ortamlardan (ör. sunucular) yönetim erişimi ayarlamaksa bunun yerine Firebase Admin SDK'yı kullanın.

Paketleyiciler ve çerçevelerle ortam algılama

npm kullanarak Firebase Web SDK'sını yüklediğinizde JavaScript ve Node.js sürümleri yüklenir. Paket, uygulamanız için doğru paketleri etkinleştirmek amacıyla ayrıntılı ortam algılama sağlar.

Kodunuz Node.js require ifadelerini kullanıyorsa SDK, Düğüme özel paketi bulur. Aksi takdirde, package.json dosyanızda doğru giriş noktası alanının (örneğin, main, browser veya module) algılanması için paketleyicinizin ayarlarının doğru şekilde yapılması gerekir. SDK ile çalışma zamanı hatalarıyla karşılaşı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

Uygulamanızda Firebase'i ilk kullanıma hazırlamak için uygulamanızın Firebase proje yapılandırmasını sağlamanız gerekir. Firebase yapılandırma nesnenizi istediğiniz zaman edinebilirsiniz.

  • Yapılandırma nesnenizi, özellikle de şu gerekli "Firebase seçenekleri"ni manuel olarak düzenlemenizi önermeyiz: apiKey, projectId ve appID. Uygulamanızı bu zorunlu "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. Bunun bir istisnası, signInWithRedirect'i kullanmayla ilgili en iyi uygulamalar izleyerek güncellenebilen authDomain değeridir.

  • 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 edinebilirsiniz.

  • Google Analytics'i veya Realtime Database'i Firebase Web Uygulamanızı oluşturduktan 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 etkin olduğu bir yapılandırma nesnesinin biçimini burada görebilirsiniz (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ılabilen kitaplıklar

Ek kurulum seçenekleri

Firebase SDK'larının yüklenmesinde gecikme (CDN'den)

Firebase SDK'larının dahil edilmesini sayfanın tamamı yüklenene kadar erteleyebilirsiniz. <script type="module"> ile modüler API CDN komut dosyaları kullanıyorsanız varsayılan davranış budur. Modül olarak ad alanına sahip CDN komut dosyalarını kullanıyorsanız yüklemeyi ertelemek için aşağıdaki adımları tamamlayın:

  1. Firebase SDK'ları için her script etiketine defer işareti 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>
    
  2. Bir init-firebase.js dosyası oluşturun, ardından dosyaya aşağıdakini 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 varsayılan tek bir uygulamada başlatmanız gerekir. Firebase'e bu uygulamadan iki eş değer şekilde erişebilirsiniz:

Web Modüler API'si

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 ad alanına sahip API'sı

// 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ından veri okuyup dosyaları farklı bir Firebase projesinde depolamak isteyebilirsiniz. Bir projenin kimliğini doğrularken ikinci bir projenin kimliğini doğrulanmamış olarak tutmak isteyebilirsiniz.

Firebase JavaScript SDK, her bir projenin kendi Firebase yapılandırma bilgilerini kullanarak aynı anda tek bir uygulamada birden fazla Firebase projesini başlatıp kullanabilmenizi sağlar.

Web Modüler API'si

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 ad alanına sahip API'sı

// 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 web sunucusu çalıştırma

Web uygulaması oluşturuyorsanız Firebase JavaScript SDK'sının bazı kısımları, web uygulamanızı yerel dosya sistemi yerine bir sunucudan sunmanızı gerektirir. Yerel sunucu çalıştırmak için Firebase CLI'yı kullanabilirsiniz.

Uygulamanız için Firebase Hosting'i zaten kurduysanız aşağıdaki adımlardan birkaçını tamamlamış olabilirsiniz.

Web uygulamanızı yayınlamak için bir komut satırı aracı olan Firebase CLI'yi kullanırsınız.

  1. CLI'yı yükleme veya en son sürüme güncelleme hakkında bilgi edinmek için Firebase CLI belgelerini inceleyin.

  2. Firebase projenizi başlatın. Aşağıdaki komutu yerel uygulama dizininizin kök dizininden çalıştırın:

    firebase init

  3. Geliştirme için yerel sunucuyu başlatın. Yerel uygulama dizininizin kök dizininden 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. Ayrıca, topluluğun katkılarını ve geri bildirimi de teşvik ederiz.

Firebase JavaScript SDK'ları

Çoğu Firebase JavaScript SDK, herkese açık Firebase GitHub depomuzda açık kaynak kitaplık olarak geliştirilir.

Hızlı başlangıç örnekleri

Firebase, Web'deki çoğu Firebase API'si için hızlı başlangıç örnekleri koleksiyonu sunar. Bu hızlı başlangıç kılavuzlarını herkese açık Firebase GitHub hızlı başlangıç depomuzda bulabilirsiniz. Firebase SDK'larını kullanmak için bu hızlı başlangıç kılavuzlarını örnek kod olarak kullanabilirsiniz.