Google 致力于为黑人社区推动种族平等。查看具体举措

Web ve Firebase hakkında daha fazla bilgi edinin

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 yer almayan bir konu hakkında sorularınız varsa, bizim birini ziyaret online topluluklar . 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 birkaç yıldır tutulan ve mevcut Firebase uygulamalarıyla Web geliştiricilerine tanıdık 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 gibi modern JavaScript Yapım araçları ile SDK boyutunu ve verimliliği azalmış sağlayan modüler bir yaklaşım getirmektedir WebPack veya Toplaması .

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 en nokta zincirleme gibi firebaseApp.auth() , tek bir tarafından sürüm 9 değiştirilir getAuth() alır fonksiyonu firebaseApp ve döner bir kimlik doğrulama örneği.

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; bkz yükseltme kılavuzu daha detaylı bilgi için.

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
  • JavaScript için
  • Node.js için
  • JavaScript için
  • Node.js için
CDN (İçerik Dağıtım Ağı)
  • JavaScript için
  • JavaScript için
Barındırma URL'leri
  • JavaScript için
  • Node.js için

Daha fazla bilgi için, bkz Yolları uygulamanıza Web SDK'lerini eklemek ve Firebase Web SDK varyantları bu sayfada sonrası.

Yeni uygulamalar için Sürüm 9

Eğer Firebase ile yeni bir entegrasyon başlıyorsanız ne zaman, sürüm 9 SDK kaydolablirsiniz ekleyip SDK başlatmak .

Uygulamanızı geliştirirken, kodunuz fonksiyonları etrafında esas organize edilecektir 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 örnekler ve ayrıntılı bilgi için, her bir ürün için kılavuzları olarak bkz sürüm 9 referans belgeleri .

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.

Sen herhangi ekleyebilir mevcut kütüphanelerin desteklenen yöntemlerden birini kullanarak uygulamanıza:

  • npm (modül paketleyiciler ve Node.js için)
  • CDN (içerik dağıtım ağı)

Ayrıntılı kurulum yönergeleri için bkz JavaScript App Firebase ekleyin . 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.

Gibi paketleyici bir modül ile UÖM'yi kullanma WebPack veya Toplaması "ağaç-shake" kullanılmayan koda optimizasyon seçenekleri sağlar ve büyük ölçüde uygulamanın boyutu ayak izini azaltabilir hedeflenen polyfills, geçerlidir. 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 şunlardır Eğik , Tepki , Vue , İleri ve diğerleri.

Ö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. Listesine bakın desteklenen ortamlar .

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 kullanmak (örneğin sunucuları gibi) ayrıcalıklı ortamlardan yönetici erişimi kurmak için ise Firebase Yönetici SDK'yı yerine.

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.

Node.js kodunuzu kullanıyorsa require ifadeleri, SDK Düğüm özgü demetini bulur. Aksi takdirde, bundler ayarlarının doğru sağ giriş noktası alanını tespit etmek için düşündüm edilmelidir package.json dosyası (örneğin, main , browser veya module ). 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. Sen edebilirsiniz senin Firebase yapılandırma nesnesi elde herhangi bir zamanda.

  • : Biz elle özellikle aşağıdaki gerekli "Firebase seçenekler", sizin yapılandırma nesnesi düzenleme önermiyoruz apiKey , projectId ve appID . 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.

  • Eğer Firebase projesi Google Analytics etkin olursa, yapılandırma nesnesini alan içeriyor measurementId . Bu alan hakkında daha fazla bilgi başladı sayfasını almak Analytics .

Tüm hizmetlerin etkinleştirildiği bir yapılandırma nesnesinin biçimi şu şekildedir (bu değerler otomatik olarak doldurulur):

// For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
var firebaseConfig = {
  apiKey: "API_KEY",
  authDomain: "PROJECT_ID.firebaseapp.com",
  databaseURL: "https://PROJECT_ID.firebaseio.com",
  projectId: "PROJECT_ID",
  storageBucket: "PROJECT_ID.appspot.com",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID",
  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. Birlikte sürüm 9 CDN komut dosyalarını kullanıyorsanız <script type="module"> , 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:

  1. Bir ekleme defer her birine bayrağı script sonra örneğin bir ikinci script kullanarak Firebase başlatılması erteleme Firebase SDK'lara etiketi:

    <script defer src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script>
    
    <script defer src="https://www.gstatic.com/firebasejs/8.10.0/firebase-auth.js"></script>
    <script defer src="https://www.gstatic.com/firebasejs/8.10.0/firebase-firestore.js"></script>
    
    // ...
    
    <script defer src="./init-firebase.js"></script>
    
  2. Bir oluşturma init-firebase.js dosyasını, daha sonra dosyadaki aşağıdakileri içerir:

    // 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 sürümü 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 sürümü 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 sürümü 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 sürümü 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. Sen kullanabilirsiniz Firebase CLI yerel sunucuyu çalıştırmak için.

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.

  1. Öğrenmek için Firebase CLI belgelerine ziyaret CLI yüklemek veya en son sürüme güncelleme .

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

    firebase init

  3. Yerel sunucuyu başlatın gelişimi için. 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ı

En Firebase JavaScript SDK'larını bizim kamuda açık kaynak kütüphaneleri olarak geliştirilen Firebase GitHub depo .

Hızlı başlangıç ​​örnekleri

Firebase, Web'deki çoğu Firebase API'si için bir hızlı başlangıç ​​örnekleri koleksiyonu bulundurur. Bizim kamu bu Quickstarts bulun Firebase GitHub hızlı başlangıç depo . Bu hızlı başlangıçları, Firebase SDK'larını kullanmak için örnek kod olarak kullanabilirsiniz.