Firebase for Web'i anlama

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

Bu sayfada ele alınmayan bir konuyla ilgili sorularınız varsa online topluluklarımızdan birini ziyaret edin. Ayrıca, bu sayfayı düzenli aralıklarla yeni konularla güncelleyeceğiz. Bu nedenle, öğrenmek istediğiniz konuyu ekleyip eklemediğimizi görmek için sayfayı 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. Bu, Firebase'in yıllardır kullandığı ve eski Firebase uygulamalarına sahip web geliştiricilerinin aşina olduğu JavaScript arayüzüdür. Ad alanına sahip API, devam eden yeni özellik desteğinden yararlanamadığı için çoğu yeni uygulama modüler API'yi benimsemelidir.
  • JavaScript - modüler. Bu SDK, webpack veya Rollup gibi modern JavaScript geliştirme araçlarıyla daha küçük SDK boyutu ve daha fazla verimlilik sağlayan modüler bir yaklaşıma dayanır.

Modüler API, uygulamanızda kullanılmayan kodu çıkarmaya yarayan derleme araçlarıyla iyi bir şekilde entegre olur. Bu işlem "ağaç sallama" olarak bilinir. Bu SDK ile oluşturulan uygulamalar, büyük ölçüde küçültülmüş yer izlerinden yararlanır. Ad alanına sahip API, modül olarak mevcut olsa da tamamen modüler bir yapıya sahip değildir ve aynı derecede boyut azaltma sağlamaz.

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ıdır. Genel olarak ad alanına sahip API, ad alanı ve hizmet kalıbına, modüler API ise ayrı işlevlere yöneliktir. Örneğin, ad alanına sahip API'nin nokta zincirlemesi (ör. firebaseApp.auth()), modüler API'de firebaseApp alan ve bir Authentication örneği döndüren tek bir getAuth() işleviyle değiştirilir.

Bu nedenle, ad alanına sahip API ile oluşturulan web uygulamalarının modüler uygulama tasarımından yararlanabilmek için yeniden düzenlenmesi gerekir. Daha fazla bilgi için yeni sürüme geçiş 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şlatırken modüler API'yi etkinleştirebilirsiniz.

Uygulamanızı geliştirirken kodunuzun temel olarak işlevler çerçevesinde 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ı gerçekleştirmek için hizmetin ayrıntılarını kullanır. Örnek:

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 ve modüler API referans belgelerine bakın.

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

Firebase; Remote Config ve FCM gibi ç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 kullandığınız araca (modül paketleyici gibi) bağlıdır.

Kullanılabilir kitaplıkların herhangi birini, desteklenen yöntemlerden biriyle 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 bölümüne bakın. Bu bölümün geri kalanında mevcut seçenekler arasından seçim yapmanıza yardımcı olacak bilgiler bulunur.

npm

Firebase npm paketini (hem tarayıcı hem de Node.js paketlerini içerir) indirerek Firebase SDK'sının yerel bir kopyasını elde edebilirsiniz. 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 Yerel paketleri seçeneğini 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 kodları "ağaç sallama" ve hedeflenmiş çoklu dolgular uygulamak için optimizasyon seçenekleri sunar. Böylece uygulamanızın boyut Bu araçlar arasında Angular, React, Vue, Next ve diğer araçlar bulunur.

Ö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ı eklemek, birçok geliştirici tarafından bilinen basit bir SDK kurulum yöntemidir. SDK'ları eklemek için CN'yi kullandığınızda bir derleme aracına ihtiyacınız olmaz. Ayrıca, derleme zincirinizin çalışması, modül paketleyicilere kıyasla daha basit ve kolay olabilir. Uygulamanızın yükleme boyutu sizin için özellikle önemli değilse ve TypeScript'ten dönüştürme gibi özel gereksinimleriniz yoksa 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 listesini inceleyin.

Bazı ürün SDK'ları ayrı tarayıcı ve Düğüm varyantları sağlar. Bunların her biri hem ESM hem de CJS biçimlerinde sağlanır. Bazı ürün SDK'ları ise Cordova veya React Yerel varyantlarını 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ılır ve çoğu durumda manuel seçim gerektirmemelidir. 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ı olacak şekilde tasarlanmıştır. Amacınız ayrıcalıklı ortamlardan (ör. sunucular) yönetim erişimi ayarlamaksa bunun yerine Firebase Yönetici SDK'sını 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ümlerinin her ikisi de yüklenir. Bu paket, uygulamanız için doğru paketleri etkinleştirmek üzere ayrıntılı ortam algılaması sağlar.

Kodunuz Node.js require ifadelerini kullanıyorsa SDK, Düğüme özel paketi bulur. Aksi takdirde, paketleyicinizin ayarları package.json dosyanızda doğru giriş noktası alanını (örneğin, main, browser veya module) algılayacak şekilde doğru şekilde belirlenmelidir. 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

Uygulamanızda Firebase'i başlatmak için uygulamanızın Firebase proje yapılandırmasını sağlamanız gerekir. İstediğiniz zaman Firebase yapılandırma nesnenize ulaşabilirsiniz.

  • Yapılandırma nesnenizi, özellikle de şu zorunlu "Firebase seçenekleri"ni 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 sorunlar yaşayabilir. Bunun istisnası, signInWithRedirect kullanımıyla ilgili en iyi uygulamalar doğrultusunda güncellenebilen authDomain öğesidir.

  • Firebase projenizde Google Analytics'i etkinleştirdiyseniz yapılandırma nesneniz measurementId alanını içerir. Analytics başlangıç sayfasında bu alan hakkında daha fazla bilgi edinebilirsiniz.

  • Firebase Web Uygulamanızı oluşturduktan sonra Google Analytics veya Realtime Database'i 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. İstediğiniz zaman Firebase yapılandırma nesnenize ulaşabilirsiniz.

Tüm hizmetlerin etkin olduğu bir config 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",
  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ı yüklenene kadar erteleyebilirsiniz. <script type="module"> ile modüler API CDN komut dosyalarını kullanıyorsanız varsayılan davranış budur. Modül olarak ad alanına sahip CDN komut dosyaları kullanıyorsanız yüklemeyi ertelemek için aşağıdaki adımları uygulayın:

  1. Firebase SDK'ları için her script etiketine 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, 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. Firebase'e bu uygulamadan iki eşdeğer yöntemle erişebilirsiniz:

Web modüler API

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 ad alanı API'si

// 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 çok Firebase projesine erişmeniz gerekir. Örneğin, bir Firebase projesinin veritabanındaki verileri okumak, ancak dosyaları farklı bir Firebase projesinde depolamak isteyebilirsiniz. Dilerseniz bir projenin kimliğini doğrularken ikinci bir projenin kimliğini doğrulayabilirsiniz.

Firebase JavaScript SDK, tek bir uygulamada birden fazla Firebase projesini aynı anda başlatıp kullanmanıza olanak tanır. Her proje, kendi Firebase yapılandırma bilgilerini kullanır.

Web modüler API

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 ad alanı API'si

// 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

Bir web uygulaması oluşturuyorsanız Firebase JavaScript SDK'nın bazı bölümleri, web uygulamanızı yerel dosya sistemi yerine bir sunucudan sunmanızı gerektirir. Yerel bir sunucu çalıştırmak için Firebase CLI'yı kullanabilirsiniz.

Uygulamanız için Firebase Hosting'i kurduysanı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'yı kullanırsınız.

  1. KSA'yı yüklemeyi veya en son sürümüne güncelleme yapmayı öğrenmek için Firebase CLI belgelerini inceleyin.

  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 topluluk katkılarını ve geri bildirimleri teşvik ederiz.

Firebase JavaScript SDK'ları

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

Hızlı başlangıç örnekleri

Firebase, web'deki çoğu Firebase API'si için hızlı başlangıç örneklerinden oluşan bir koleksiyona sahiptir. Herkese açık Firebase GitHub hızlı başlangıç depomuzda bu hızlı başlangıç kılavuzlarını bulabilirsiniz. Bu hızlı başlangıç kılavuzlarını, Firebase SDK'larını kullanmak için örnek kod olarak kullanabilirsiniz.