Web için Firebase'i anlama

Firebase kullanarak bir web uygulaması geliştirirken, projenizle ilgili doğru kararları vermek için daha fazla bilgiye ihtiyacınız olan alanların yanı sıra, aşina olmadığınız kavramlarla 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 konuyla ilgili sorularınız 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 - namespaced API. Bu, Firebase'in uzun yıllar boyunca sürdürdüğü ve eski Firebase uygulamaları olan web geliştiricilerin aşina olduğu JavaScript arayüzüdür. namespaced API, devam eden yeni özellik desteğinden yararlanmadığı için çoğu yeni uygulama bunun yerine modular API'yi kullanmalıdır.
  • JavaScript - modüler: 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 bir şekilde entegre olur. Bu işleme "gereksiz kod temizleme" adı verilir. Bu SDK ile oluşturulan uygulamaların boyutları önemli ölçüde küçülür. Namespaced API, 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 çoğu, namespaced API ile aynı kalıpları izlese de kodun düzeni farklıdır. Genellikle namespaced API, ad alanı ve hizmet kalıbına yöneliktir. Modüler API ise ayrı fonksiyonlara yöneliktir. Örneğin, namespaced API'nin nokta zincirleme yöntemi (firebaseApp.auth()), modüler API'de firebaseApp alan ve Authentication örneği döndüren tek bir getAuth() fonksiyonuyla değiştirilir.

Bu, namespaced 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 fazla 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 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 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 seçenek olarak Node.js ve React Native paketleri bulunur. Node.js paketleri, SSR çerçevelerinin sunucu tarafı oluşturma (SSR) adımı için gereklidir.

webpack veya Rollup gibi bir modül paketleyiciyle npm kullanmak, kullanılmayan kodu "tree-shake" etmek ve hedeflenen polyfill'leri uygulamak için optimizasyon seçenekleri sunar. Bu seçenekler, 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 ana akım CLI araçları bu durumu hafifletmeye yardımcı olabilir. Bu araçlar arasında Angular, React, Vue ve Next 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'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 bir 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 boyutunun önemli bir sorun olmadığı durumlarda 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 sağlar. 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 (ör. Node.js masaüstü veya IoT uygulaması). 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 özgü 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 türde pakete öncelik verecek şekilde yapılandırıldığından emin olun.

Firebase yapılandırma nesnesi hakkında bilgi edinme

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 de aşağıdaki zorunlu "Firebase seçenekleri"ni (apiKey, projectId ve appID) manuel olarak düzenlemenizi önermiyoruz. 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. Bu durumun istisnası, authDomain'dir. Bu seçenek, signInWithRedirect'i kullanmayla ilgili en iyi uygulamalar'a göre güncellenebilir.

  • Firebase projenizde Google Analytics'ı 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.

Aşağıda, tüm hizmetlerin etkinleştirildiği bir yapılandırma nesnesinin biçimi 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 erteleyebilirsiniz. <script type="module"> ile modüler API CDN komut dosyalarını 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. Alternatif olarak, bir projeyi kimlik doğrulaması yapılmış durumda tutarken ikinci bir projeyi kimlik doğrulaması yapılmamış durumda tutmak isteyebilirsiniz.

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

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 CLI'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ıç kılavuzlarını, Firebase SDK'larını kullanmak için örnek kod olarak kullanabilirsiniz.