Web için Firebase'i anlama

Firebase'i kullanarak bir web uygulaması geliştirirken, aşina olmadığınız bazı doğru kararları vermek için daha fazla bilgiye ihtiyaç duyulan kavramlar veya alanlar belirleneceğini konuşacağız. Bu sayfa bu soruları yanıtlamayı veya sizi daha fazla bilgi edinebileceğiniz kaynaklar.

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

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

Firebase, web uygulamaları için iki API yüzeyi sağlar:

  • JavaScript - ad alanına sahip. Firebase, Google Cloud'un olan bir uygulamadır ve eski sürüm web geliştiricileri tarafından Firebase uygulamaları. Ad alanına sahip API, devam eden yeni özellik desteği sunulduğundan çoğu yeni uygulama bunun yerine modüler API'yi benimsemelidir.
  • JavaScript - modüler. Bu SDK, şu modüler bir yaklaşıma dayanır: modern JavaScript sayesinde daha küçük SDK boyutu ve daha yüksek verimlilik sağlar webpack veya Birleştirme.

Modüler API, etkin olmayan kodu ortadan kaldıran derleme araçlarıyla iyi bir şekilde entegre olur "ağaç sallama" olarak bilinen bir işlemle ilişkilendiriyoruz. Bu SDK ile oluşturulan uygulamalar büyük ölçüde daha az yer kaplar. Ad alanına sahip API ( kesinlikle modüler bir yapıya sahip değildir ve aynı derecede küçültür.

Modüler API'nin büyük bir kısmı, ad alanına sahip API ile aynı kalıpları izlese de kodun düzeni farklı olabilir. Genel olarak, ad alanına sahip API Bir ad alanı ve hizmet kalıbına, modüler API ise zaman alabilir. Örneğin, ad alanındaki API'nin nokta zincirlemesi, firebaseApp.auth(), modüler API'de tek bir getAuth() işleviyle değiştirilir firebaseApp öğesini alır ve Authentication örneği döndürür.

Yani, ad alanına sahip API ile oluşturulan web uygulamaları uygulamaya geçiriyoruz. Bkz. yükseltme kılavuzuna bakın.

JavaScript - yeni uygulamalar için modüler API

Firebase ile yeni bir entegrasyona başlıyorsanız modüler API'yi kullanarak SDK'yı ekleyin ve başlatın.

Uygulamanızı geliştirirken kodunuzun temel olarak işlevler ile ilgilidir. Modüler API'de hizmetler ilk olarak bağımsız değişkeni kullanır ve ardından işlev, geri kalan işlemleri gerçekleştirmek 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ılavuzlara da bakın. için modüler API referans belgelerine bakın.

Web SDK'larını uygulamanıza eklemenin yolları

Firebase, aşağıdakiler dahil çoğu Firebase ürünü için JavaScript kitaplıkları sağlar: Remote Config, FCM ve diğerleri. Firebase SDK'larını Web uygulaması, uygulamanızla kullandığınız araca bağlıdır (ör. bir modül paketleyici) ekleyebilirsiniz.

Buraya kitaplıklardan birini kullanarak uygulamanıza yükleyebilirsiniz desteklenen yöntemler:

  • npm (modül paketleyiciler için)
  • CDN (içerik yayınlama ağı)

Ayrıntılı kurulum talimatları için Firebase'i JavaScript Uygulamanıza ekleyin. 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 içerir) indirme Bundle) size Firebase SDK'sının yerel bir kopyasını sağlar. Bu kopya, (ör.Node.js uygulamaları, React Native veya Electron gibi tarayıcı dışı uygulamalar) İndirme işlemi, bazı istemciler için seçenek olarak Node.js ve React Yerel paketlerini içerir. paketlerini ekleyebilirsiniz. Sunucu tarafı oluşturma (SSR) için Node.js paketleri gereklidir temel adımıdır.

npm'yi şunun gibi bir modül paketleyiciyle kullanma: webpack veya Birleştirme, optimizasyon sağlar "ağaç sallama" seçenekleri daha iyi korunabilmeniz için optimize edilmiş uygulamanızın boyutunu önemli ölçüde küçültür. Bu özellikleri uygulamak yapılandırmanıza ve derleme zincirinize biraz karmaşıklık katabilir, ancak yaygın KSA araçları bu etkiyi azaltmaya yardımcı olabilir. Bu araçlar şunları içerir: Açısal, Tepki, Vue, Sonraki ve diğerleri.

Özet olarak:

  • Uygulama boyutu için değerli optimizasyon sağlar
  • Modülleri yönetmek için güçlü araçlar kullanılabilir
  • Node.js ile SSR için gereklidir

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

Firebase'in CDN'sinde depolanan kitaplıkları ekleme birçok geliştiricinin aşina olduğu basit bir SDK kurulum yöntemidir. Her bir CDN sayesinde, bir derleme aracına ihtiyacınız olmaz ve derleme zinciriniz genellikle daha basit ve kolay olmasını sağladı. Özellikle çok zahmetsizce uygulamanızın yüklü olduğu ve gibi bir özellik varsa CDN iyi bir seçim olabilir.

Özet olarak:

  • Tanıdık ve basit
  • Uygulama boyutu çok önemli bir mesele olmadığında uygundur
  • Web sitenizde geliştirme araçları kullanılmadığında uygundur.

Firebase Web SDK'sı varyantları

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

Bazı ürün SDK'ları, her biri ayrı tarayıcı ve Düğüm varyantları sağlar. hem ESM hem de CJS biçimlerinde sağlanır. Ayrıca bazı ürün SDK'ları Cordova veya React Yerel varyantları. Web SDK'sı araç yapılandırmanıza veya ortamınıza göre doğru varyantı. çoğu durumda manuel seçim gerektirir. Tüm SDK varyantları tasarlanmıştır istemci uygulamaları ve web uygulamaları (ör. Node.js masaüstü veya IoT uygulamasında) son kullanıcı erişimi sağlar. Eğer hedef, ayrıcalıklı ortamlardan (ör. sunucularda yer alan içerikler) Bunun yerine Firebase Admin SDK.

Paketleyiciler ve çerçevelerle ortam algılama

npm, JavaScript ve Node.js kullanarak Firebase Web SDK'sını yüklediğinizde her ikisi de yüklü. Bu paket, ayrıntılı ortam algılaması sağlar kullanın.

Kodunuz Node.js require ifadelerini kullanıyorsa SDK, Düğüme özgü paket. Aksi takdirde, paketleyicinizin ayarlarının doğru şekilde tanımlanması gerekir ve package.json dosyanızda doğru giriş noktası alanını (örneğin, main, browser veya module). SDK ile çalışma zamanı hatalarıyla karşılaşırsanız şunları kontrol edin: Paketleyicinizin doğru paket türüne öncelik verecek şekilde yapılandırıldığından emin olun size yardımcı olur.

Firebase yapılandırma nesnesi hakkında bilgi

Uygulamanızda Firebase'i başlatmak için uygulamanızın Firebase'ini sağlamanız gerekir ele alacağız. Firebase yapılandırmanızı nesne ekleyebilirsiniz.

  • Yapılandırma nesnenizi, özellikle de Şu zorunlu "Firebase seçenekleri": apiKey, projectId ve appID. Eğer Uygulamanızı bu gerekli değerler için geçersiz veya eksik değerlerle başlatırsanız Uygulamanızın kullanıcıları ciddi sorunlar yaşayabilir. Bunun istisnası, aşağıdaki şekilde güncellenebilen authDomain şeklindedir SignInWithRedirect ile ilgili en iyi uygulamalar.

  • Firebase projenizde Google Analytics özelliğini etkinleştirdiyseniz yapılandırmanız nesne measurementId alanını içeriyor. Şuradan bu alan hakkında daha fazla bilgi edinin: Analytics başlangıç sayfası.

  • Google Analytics veya Realtime Database öğenizi oluşturduktan sonra etkinleştirirseniz Firebase Web App kullanıyorsanız, kullandığınız Firebase yapılandırma nesnesinin Uygulamanız ilişkili yapılandırma değerleriyle (measurementId ve databaseURL) seçebilirsiniz. Firebase yapılandırmanızı nesne istediğiniz zaman izleyebilirsiniz.

ziyaret edin.

Tüm hizmetlerin etkinleştirildiği bir config nesnesinin biçimi (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üklenmesini geciktir (CDN'den)

Firebase SDK'larının dahil edilmesini, sayfanın tamamı görüntülenene kadar erteleyebilirsiniz. yüklendi. <script type="module"> ile modüler API CDN komut dosyaları kullanıyorsanız bu, varsayılan davranıştır. Örneğin, modülünü kullanıyorsanız, yüklemeyi ertelemek için şu adımları tamamlayın:

  1. Firebase SDK'ları için her script etiketine bir defer işareti ekleyin, ardından ikinci bir komut dosyası kullanarak Firebase'in başlatılmasını sağlar. Ö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 aşağıdaki dosyayı 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 kullanma

Çoğu durumda, Firebase'i tek bir varsayılan uygulamada başlatmanız yeterlidir. Bu uygulamadan Firebase'e 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();
app_default_init_options.js

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();
firebaseapp.js

Ancak zaman zaman aynı anda birden fazla Firebase projesine erişmeniz gerekir. gerekir. Örneğin, bir Firebase veritabanındaki verileri okumak isteyebilirsiniz. farklı bir Firebase projesinde depolamanıza yardımcı olabilir. Dilerseniz bir projeyi kimlik doğrulaması yaparken ikinci projenin kimliğini doğrulamaz.

Firebase JavaScript SDK'sı, birden fazla Firebase projesini başlatıp kullanmanıza olanak tanır aynı anda tek bir uygulamada oturum açıyor ve her proje kendi Firebase'ini kullanıyor. yapılandırma bilgileri.

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);
app_multi_project_init_options.js

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();
firebaseapp.js

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ı için şu gerekir: web uygulamanızı yerel dosya sistemi yerine bir sunucudan sunuyorsunuz. Siz yerel bir sunucu çalıştırmak için Firebase KSA'yı kullanabilir.

Uygulamanız için Firebase Hosting uygulamasını zaten kurduysanız aşağıdaki adımların birkaçını tamamladı.

Web uygulamanızı sunmak için bir komut satırı aracı olan Firebase KSA'yı kullanırsınız.

  1. Nasıl yapıldığını öğrenmek için Firebase CLI dokümanlarını ziyaret edin CLI'yı yükleyin veya en son sürümüne güncelleyin.

  2. Firebase projenizi başlatın. Yerel uygulama dizininizin kök dizininden 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 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 ve topluluğunu katkı ve geri bildirim sağlar.

Firebase JavaScript SDK'ları

Firebase JavaScript SDK'larının çoğu, herkese açık alanda açık kaynak kitaplıklar olarak geliştirilmiştir. Firebase GitHub deposu.

Hızlı başlangıç örnekleri

Firebase, Google Cloud Platform'da bulunan çoğu Firebase API'si için Web. Herkese açık bu hızlı başlangıç kılavuzlarını edinin Firebase GitHub hızlı başlangıç deposu. Bu hızlı başlangıç kılavuzlarını, Firebase SDK'larını kullanmak için örnek kod olarak kullanabilirsiniz.