Web ve Firebase hakkında daha fazla bilgi edinin

Firebase'i kullanarak bir Web uygulaması geliştirirken, alışılmadık kavramlarla veya projeniz için doğru kararları vermek için daha fazla bilgiye ihtiyaç duyduğunuz alanlarla karşılaşabilirsiniz. Bu sayfa, bu soruları yanıtlamayı veya sizi daha fazla bilgi edinmenizi sağlayacak 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 aralıklarla yeni konularla güncelleyeceğiz; bu nedenle hakkında bilgi edinmek istediğiniz konuyu ekleyip eklemediğimizi görmek için tekrar 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ıllardır sürdürdüğü JavaScript arayüzüdür ve eski Firebase uygulamalarına sahip Web geliştiricilerinin aşina olduğu bir arayüzdür. Ad alanlı API, devam eden yeni özellik desteğinden faydalanmadığı için çoğu yeni uygulama bunun yerine modüler API'yi benimsemelidir.
  • JavaScript - modüler . Bu SDK, webpack veya Rollup gibi modern JavaScript oluşturma araçlarıyla azaltılmış SDK boyutu ve daha fazla verimlilik sağlayan modüler bir yaklaşıma dayanmaktadır.

Modüler API, uygulamanızda kullanılmayan kodu ortadan kaldıran derleme araçlarıyla iyi bir şekilde bütünleşir; bu süreç "ağaç sallama" olarak bilinir. Bu SDK ile oluşturulan uygulamalar, büyük ölçüde azaltılmış boyuttaki kaplama alanlarından yararlanır. Ad alanlı API, bir modül olarak mevcut olmasına rağmen tam olarak modüler bir yapıya sahip değildir ve aynı derecede boyut küçültme sağlamaz.

Modüler API'nin çoğunluğu ad alanlı API ile aynı kalıpları izlese de kodun organizasyonu farklıdır. Genel olarak ad alanlı API, bir ad alanı ve hizmet modeline yönelikken, modüler API ayrık işlevlere yöneliktir. Örneğin, firebaseApp.auth() gibi ad alanlı API'nin nokta zincirlemesi, modüler API'de firebaseApp alan ve bir Kimlik Doğrulama örneği döndüren tek bir getAuth() işlevi ile değiştirilir.

Bu, ad alanlı API ile oluşturulan Web uygulamalarının, modüler uygulama tasarımından yararlanmak için yeniden düzenlemeye ihtiyaç duyduğu 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 etkinleştirebilirsiniz.

Uygulamanızı geliştirirken kodunuzun esas olarak işlevler etrafında düzenleneceğini unutmayın. Modüler API'de hizmetler ilk argüman olarak iletilir ve işlev daha sonra gerisini 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 yönelik kılavuzların yanı sıra modüler API referans belgelerine bakın.

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

Firebase, Remote Config, FCM ve daha fazlası 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ızda hangi araçları kullandığınıza (modül paketleyici gibi) bağlıdır.

Desteklenen yöntemlerden birini kullanarak mevcut kitaplıklardan herhangi birini uygulamanıza ekleyebilirsiniz:

  • npm (modül paketleyiciler için)
  • CDN (içerik dağıtım ağı)

Ayrıntılı kurulum talimatları için Firebase'i JavaScript Uygulamanıza Ekleme konusuna bakın. Bu bölümün geri kalanında mevcut seçenekler arasından seçim yapmanıza yardımcı olacak bilgiler bulunmaktadır.

npm

Firebase npm paketini (hem tarayıcı hem de Node.js paketlerini içerir) indirdiğinizde, Node.js uygulamaları, React Native veya Electron gibi tarayıcı olmayan uygulamalar için gerekli olabilecek Firebase SDK'nın yerel bir kopyası sağlanır. İndirme, bazı paketler için seçenek olarak Node.js ve React Native paketlerini 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ç sallamak" ve hedeflenen çoklu doldurmaları uygulamak için optimizasyon seçenekleri sağlar; bu, uygulamanızın boyut ayak izini büyük ölçüde azaltabilir. Bu özelliklerin uygulanması, yapılandırmanıza ve derleme zincirinize bir miktar karmaşıklık katabilir, ancak çeşitli ana akım CLI araçları bu durumu hafifletmeye yardımcı olabilir. Bu araçlar Angular , React , Vue , Next ve diğerlerini içerir.

Özetle:

  • 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 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 olmayacaktır ve derleme zinciriniz, modül paketleyicilere kıyasla daha basit ve çalışması daha kolay olabilir. Uygulamanızın yüklü boyutuyla özellikle ilgilenmiyorsanız ve TypeScript'ten aktarma gibi özel gereksinimleriniz yoksa CDN iyi bir seçim olabilir.

Özetle:

  • Tanıdık ve basit
  • Uygulama boyutunun önemli bir sorun olmadığı durumlar için uygundur
  • Web siteniz derleme araçlarını kullanmadığında uygundur.

Firebase Web SDK çeşitleri

Firebase'in Web SDK'sı hem tarayıcıda hem de Node uygulamalarında kullanılabilir. Ancak bazı ürünler Node ortamlarında mevcut değildir. Desteklenen ortamların listesine bakın.

Bazı ürün SDK'ları, her biri hem ESM hem de CJS formatlarında sağlanan ayrı tarayıcı ve Node varyantları sağlar ve hatta bazı ürün SDK'ları Cordova veya React Native varyantlarını bile sağlar. Web SDK, takım yapılandırmanıza veya ortamınıza göre doğru değişkeni sağlayacak şekilde yapılandırılmıştır ve çoğu durumda manuel seçim gerektirmemelidir. Tüm SDK çeşitleri, Node.js masaüstü veya IoT uygulaması gibi son kullanıcı erişimi için web uygulamaları veya istemci uygulamaları oluşturmaya yardımcı olmak üzere tasarlanmıştır. Amacınız ayrıcalıklı ortamlardan (sunucular gibi) yönetim erişimi ayarlamaksa bunun yerine Firebase Yönetici SDK'sını 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 paketleri etkinleştirmek üzere ayrıntılı ortam tespiti sağlar.

Kodunuz Node.js require deyimlerini kullanıyorsa SDK, Node'a özgü paketi bulur. Aksi takdirde, package.json dosyanızdaki doğru giriş noktası alanını (örneğin, main , browser veya module ) algılamak için paketleyicinizin ayarlarının doğru şekilde belirlenmesi gerekir. SDK'da ç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 edinin

Firebase'i uygulamanızda başlatmak için uygulamanızın Firebase proje yapılandırmasını sağlamanız gerekir. Firebase yapılandırma nesnenizi istediğiniz zaman alabilirsiniz .

  • Yapılandırma nesnenizi, özellikle de şu gerekli "Firebase seçeneklerini" manuel olarak düzenlemenizi önermiyoruz: apiKey , projectId ve appID . Uygulamanızı bu gerekli "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.

  • Firebase projenizde Google Analytics'i etkinleştirdiyseniz config nesneniz measurementId alanını içerir. Analytics başlangıç ​​sayfasında bu alan hakkında daha fazla bilgi edinin.

  • Firebase Web Uygulamanızı oluşturduktan sonra Google Analytics veya Gerçek Zamanlı Veritabanını etkinleştirirseniz, uygulamanızda kullandığınız Firebase yapılandırma nesnesinin ilgili yapılandırma değerleriyle (sırasıyla measurementId ve databaseURL ) güncellendiğinden emin olun. Firebase yapılandırma nesnenizi istediğiniz zaman alabilirsiniz .

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",
  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",
};

Mevcut kütüphaneler

Ek kurulum seçenekleri

Firebase SDK'larının yüklenmesini geciktirin (CDN'den)

Sayfanın tamamı yüklenene kadar Firebase SDK'larının eklenmesini erteleyebilirsiniz. <script type="module"> ile modüler API CDN komut dosyaları kullanıyorsanız bu, varsayılan davranıştır. Ad alanlı CDN komut dosyalarını modül olarak kullanıyorsanız yüklemeyi ertelemek için şu adımları tamamlayın:

  1. Firebase SDK'ları için her script etiketine bir defer bayrağı 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 ardından 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 kullanın

Çoğu durumda Firebase'i yalnızca tek bir varsayılan uygulamada başlatmanız gerekir. Firebase'e bu uygulamadan iki eşdeğer yöntemle erişebilirsiniz:

Web modular 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 namespaced API

// 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ındaki verileri okumak, ancak dosyaları farklı bir Firebase projesinde depolamak isteyebilirsiniz. Veya ikinci bir projeyi kimlik doğrulaması yapılmadan tutarken bir projenin kimliğini doğrulamak isteyebilirsiniz.

Firebase JavaScript SDK'sı, her proje kendi Firebase yapılandırma bilgilerini kullanarak, tek bir uygulamada aynı anda birden fazla Firebase projesini başlatmanıza ve kullanmanıza olanak tanır.

Web modular 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 namespaced API

// 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'nın bazı bölümleri, web uygulamanızı yerel dosya sistemi yerine bir sunucudan sunmanızı gerektirir. Yerel bir sunucuyu çalıştırmak için Firebase CLI'yi kullanabilirsiniz.

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

Web uygulamanıza hizmet vermek için bir 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 kaynak kaynakları

Firebase açık kaynak geliştirmeyi destekler ve topluluk katkılarını ve geri bildirimlerini teşvik ederiz.

Firebase JavaScript SDK'ları

Çoğu Firebase JavaScript SDK'sı, genel Firebase GitHub depomuzda açık kaynaklı kitaplıklar olarak geliştirilir.

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. Bu hızlı başlangıçları genel Firebase GitHub hızlı başlangıç ​​depomuzda bulabilirsiniz. Firebase SDK'larını kullanmak için bu hızlı başlangıçları örnek kod olarak kullanabilirsiniz.