Web için Firebase'i anlama

Firebase'i kullanarak bir web uygulaması geliştirirken aşina olmadığınız kavramlarla veya projeniz için doğru kararları vermek üzere daha fazla bilgiye ihtiyaç duyduğunuz alanlarla karşılaşabilirsiniz. Bu sayfanın amacı, bu soruları yanıtlamak veya daha fazla bilgi edinmeniz için sizi kaynaklara yönlendirmektir.

Bu sayfada ele alınmayan bir konu hakkında sorularınız varsa online topluluklarımızdan birini ziyaret edin. Ayrıca bu sayfayı düzenli olarak yeni konularla güncelleyeceğiz. Bu nedenle, öğrenmek istediğiniz konuyu ekleyip eklemediğimizi görmek için sayfayı tekrar ziyaret edin.

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

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

  • JavaScript - ad alanı. Bu, Firebase'in uzun yıllar boyunca sürdürdüğü ve eski Firebase uygulamaları olan web geliştiricilerinin aşina olduğu JavaScript arayüzüdür. Ad alanı adı verilen API, sürekli yeni özellik desteğinden yararlanmadığından yeni uygulamaların çoğu modüler API'yi kullanmalıdır.
  • JavaScript - modüler. Bu SDK, webpack veya Rollup gibi modern JavaScript derleme araçlarıyla SDK boyutunu azaltan ve daha fazla verimlilik sağlayan modüler bir yaklaşıma dayanır.

Modüler API, uygulamanızda kullanılmayan kodu kaldıran derleme araçlarıyla iyi bir şekilde entegre olur. Bu işleme "ağaç sallama" adı verilir. Bu SDK ile oluşturulan uygulamalar, çok daha küçük boyutlardan yararlanır. Ad alanı adı verilen API, modül olarak kullanılabilir olsa da kesinlikle modüler bir yapıya sahip değildir ve aynı oranda boyut azaltma sağlamaz.

Modüler API'nin büyük kısmı, ad alanı içeren API ile aynı kalıpları izlese de kodun düzenlenmesi farklıdır. Genel olarak, ad alanı içeren API bir ad alanı ve hizmet modeline, modüler API ise ayrı işlevlere yöneliktir. Örneğin, ad alanı adı verilen API'nin nokta zinciri (ör. firebaseApp.auth()), modüler API'de firebaseApp alan adını alan ve Authentication örneği döndüren tek bir getAuth() işleviyle değiştirilir.

Bu, ad alanı adı verilen API ile oluşturulan web uygulamalarının modüler uygulama tasarımından yararlanmak için yeniden yapılandırmaya ihtiyaç duyduğu anlamına gelir. Daha ayrıntılı bilgi için yükseltme kılavuzuna göz atın.

JavaScript: Yeni uygulamalar için modüler API

Firebase ile yeni bir entegrasyona başlıyorsanız SDK'yı ekleyip başlattığınızda 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ını 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ına ait kılavuzların yanı sıra modüler API referans belgelerine bakın.

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 ekleme şekliniz, uygulamanızla birlikte kullandığınız araçlara (ör. modül birleyici) bağlıdır.

Aşağıdaki 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 başlıklı makaleyi inceleyin. 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) indirdiğinizde Firebase SDK'sı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şlemi, bazı paketler için Node.js ve React Native paketlerini de içerir. Node.js paketleri, SSR çerçevelerinin sunucu tarafı oluşturma (SSR) adımı için gereklidir.

npm'yi webpack veya Rollup gibi bir modül paketleyiciyle kullanmak, kullanılmayan kodu "ağaç sallama" 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 sorunu azaltmanıza yardımcı olabilir. Bu araçlar arasında Angular, React, Vue, Next ve diğerleri yer alır.

Ö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'ın 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 bir derleme aracına ihtiyacınız olmaz ve derleme zinciriniz, modül birleştirme araçlarına kıyasla daha basit ve kullanımı daha kolay olabilir. Uygulamanızın yüklü boyutu konusunda özellikle endişelenmiyorsanız ve TypeScript'ten derleme gibi özel gereksinimleriniz yoksa CDN iyi bir seçim olabilir.

Özet olarak:

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

Firebase Web SDK varyantları

Firebase'ın 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ı, Cordova veya React Native varyantları bile sağlar. Web SDK'sı, 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ı, son kullanıcı erişimi için web uygulamaları veya istemci uygulamaları (ör. Node.js masaüstü veya IoT uygulaması) oluşturmaya yardımcı olmak üzere tasarlanmıştır. Ayrıcalıklı ortamlardan (ör. sunucular) yönetici erişimi ayarlamak istiyorsanız bunun yerine Firebase Admin SDK değerini 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 de yüklenir. Paket, uygulamanız için doğru paketleri etkinleştirmek 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 şekilde belirlenmelidir. SDK ile çalışma zamanında hatalarla 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. Dilediğiniz zaman Firebase yapılandırma nesnenizi edinebilirsiniz.

  • Yapılandırma nesnenizi, özellikle de aşağıdaki zorunlu "Firebase seçeneklerini" 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 sorunlarla karşılaşabilir. Bunun istisnası, signInWithRedirect işlevinin kullanılmasıyla ilgili en iyi uygulamalar doğrultusunda güncellenebilen authDomain parametresidir.

  • Firebase projenizde Google Analytics'ü etkinleştirdiyseniz yapılandırma nesnenizde measurementId alanı bulunur. Bu alan hakkında daha fazla bilgiyi Analytics başlangıç sayfasında bulabilirsiniz.

  • Firebase web uygulamanızı oluşturduktan sonra Google Analytics veya Realtime Database'ü 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 dilediğiniz zaman edinebilirsiniz.

Tüm hizmetlerin etkin olduğu 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 yüklenmesini erteleme (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 bu varsayılan davranıştır. Modül olarak ad alanı içeren CDN komut dosyaları kullanıyorsanız yüklemeyi ertelemek için aşağıdaki 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ı 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 project 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. 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 bazen aynı anda birden fazla Firebase projesine erişmeniz gerekir. Örneğin, bir Firebase projesinin veritabanından veri okumak ancak dosyaları farklı bir Firebase projesinde depolamak isteyebilirsiniz. Dilerseniz ikinci bir projenin kimliğini doğrulamadan birinci projenin kimliğini doğrulayabilirsiniz.

Firebase JavaScript SDK'sı, 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);
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 bir web sunucusu çalıştırma

Web uygulaması geliştiriyorsanız Firebase JavaScript SDK'sının bazı bölümleri, web uygulamanızı yerel dosya sisteminden değil bir sunucudan yayınlamanızı gerektirir. Yerel bir sunucu çalıştırmak için Firebase KSA'yı kullanabilirsiniz.

Uygulamanız için Firebase Hosting'ü zaten ayarladıysanız aşağıdaki adımlardan bazılarını tamamlamış olabilirsiniz.

Web uygulamanızı sunmak için komut satırı aracı olan Firebase CLI'yi kullanacaksınız.

  1. CLI'yi nasıl yükleyeceğinizi veya en son sürümüne nasıl güncelleyeceğinizi öğrenmek için Firebase CLI belgelerini ziyaret edin.

  2. Firebase projenizi ilk kullanıma hazırlayı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 kaynak kaynaklar

Firebase, açık kaynak geliştirmeyi destekler ve topluluğun katkılarını ve geri bildirimlerini teşvik eder.

Firebase JavaScript SDK'ları

Firebase JavaScript SDK'larının çoğu, 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 bulundurur. Bu hızlı başlangıç kılavuzlarını herkese açık Firebase GitHub hızlı başlangıç depomuzda bulabilirsiniz. Bu hızlı başlangıç kılavuzlarını, Firebase SDK'larını kullanmaya yönelik örnek kod olarak kullanabilirsiniz.