Web için Firebase'i anlama

Firebase kullanarak bir web uygulaması geliştirirken, projeniz için doğru kararlar alabilmeniz için daha fazla bilgiye ihtiyaç duyabileceğiniz, bilmediğiniz kavramlarla veya alanlarla 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 konu hakkında sorularınız varsa çevrimiçi 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 kontrol edin.

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

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

  • JavaScript - ad alanlı. Bu, Firebase'in uzun yıllar boyunca desteklediği ve eski Firebase uygulamaları olan web geliştiricilerin aşina olduğu JavaScript arayüzüdür. Ad alanlı API, devam eden yeni özellik desteğinden yararlanmadığı için çoğu yeni uygulama bunun yerine modüler 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 entegre olur. Bu işleme "tree-shaking" adı verilir. Bu SDK ile oluşturulan uygulamaların boyutları önemli ölçüde küçülür. Ad alanı API'si, 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 büyük bir kısmı ad alanlı API ile aynı kalıpları izlese de kodun düzeni farklıdır. Genel olarak, ad alanlı API bir ad alanına ve servis düzenine yönelikken, modüler API ayrı işlevlere yöneliktir. Örneğin, firebaseApp.auth() gibi ad alanlı API'nin nokta zincirlemesi, modüler API'de firebaseApp alan ve bir Authentication örneği döndüren tek bir getAuth() işleviyle değiştirilir.

Bu, ad alanlı API ile oluşturulan web uygulamalarının modüler uygulama tasarımının avantajlarından yararlanabilmek için yeniden düzenlenmesi gerektiği anlamına gelir. Daha fazla ayrıntı 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şlattığınızda modüler API'yi seçebilirsiniz.

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ının kılavuzlarına ve modüler API başvuru 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 nasıl ekleyeceğiniz, uygulamanızla birlikte kullandığınız araçlara (örneğin bir modül paketleyici) bağlıdır.

Kullanılabilir kitaplıklardan herhangi birini, desteklenen yöntemlerden birini kullanarak uygulamanıza ekleyebilirsiniz:

  • npm (modül paketleyicileri için)
  • CDN (içerik dağıtım 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 gerekebilir. İ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ında gereklidir.

npm'yi webpack veya Rollup gibi bir modül paketleyiciyle 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 yaygın CLI araçları bu durumu hafifletmeye yardımcı olabilir. Bu araçlar arasında Angular, React, Vue, Next ve diğerleri bulunur.

Özet olarak:

  • Değerli uygulama boyutu optimizasyonu sağlar
  • Modülleri yönetmek için sağlam araçlar mevcuttur
  • Node.js ile SSR için gereklidir

CDN (içerik dağıtım ağı)

Firebase'in CDN'sinde saklanan kütüphaneleri 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 olmayacak ve derleme zinciriniz, modül paketleyicilere kıyasla daha basit ve kullanımı daha kolay olacaktır. Uygulamanızın yüklü boyutuyla ilgili özel bir endişeniz yoksa ve TypeScript'ten dönüştürme gibi özel gereksinimleriniz yoksa CDN iyi bir seçenek olabilir.

Özet olarak:

  • Tanıdık ve basit
  • Uygulama boyutunun önemli bir endişe olmadığı durumlarda uygundur
  • Web siteniz derleme araçları kullanmıyorsa 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 listesine bakın.

Bazı ürün SDK'ları ayrı tarayıcı ve Node varyantları sağlar ve bunların her biri hem ESM hem de CJS formatlarında sağlanır; 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 (örneğin sunucular) yönetimsel erişim kurmaksa bunun yerine Firebase Admin SDK kullanın.

Paketleyiciler ve çerçevelerle ortam tespiti

Firebase web SDK'sını npm kullanarak yüklediğinizde, JavaScript ve Node.js sürümlerinin her ikisi de 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 özel paketi bulur. Aksi takdirde, package.json dosyanızdaki doğru giriş noktası alanını (örneğin, main, browser veya module) algılayabilmek için paketleyicinizin ayarlarının doğru şekilde hesaplanması gerekir. SDK ile çalışma zamanı hataları yaşı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 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 aşağıdaki zorunlu "Firebase seçenekleri" olan apiKey, projectId ve appID'yi manuel olarak düzenlemenizi önermiyoruz. Uygulamanızı bu gerekli "Firebase seçenekleri" için geçersiz veya eksik değerlerle başlatırsanız, uygulama kullanıcıları ciddi sorunlar yaşayabilir. Bunun istisnası, signInWithRedirect'i kullanmak için en iyi uygulamalar'ı izleyerek güncellenebilen authDomain'dır.

  • Firebase projenizde Google Analytics öğesini etkinleştirdiyseniz, yapılandırma nesneniz measurementId alanını içerir. Bu alan hakkında daha fazla bilgi edinmek için Analytics Başlarken sayfasını ziyaret edin.

  • 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 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ı kullanıyorsanız bu varsayılan davranıştır. Modül olarak ad alanlı CDN betikleri kullanıyorsanız, yüklemeyi ertelemek için şu 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 ardından 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 projesini kullanın

Çoğu durumda, Firebase'ı yalnızca tek bir varsayılan uygulamada başlatmanız gerekir. Bu uygulamadan Firebase'a iki eşdeğer yolla 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 gerekebilir. Örneğin, bir Firebase projesinin veritabanından veri okumak ancak dosyaları farklı bir Firebase projesinde depolamak isteyebilirsiniz. Dilerseniz bir projeyi kimlik doğrularken ikinci bir projeyi kimlik doğrulanmamış olarak tutabilirsiniz.

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);
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ırın

Bir 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. 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 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 kaynaklı geliştirmeyi destekler ve topluluk katkılarını ve geri bildirimlerini teşvik ederiz.

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ıçları, Firebase SDK'larını kullanmayla ilgili örnek kod olarak kullanabilirsiniz.