Web ve Firebase hakkında daha fazla bilgi edinin

Firebase kullanarak bir Web uygulaması geliştirirken, alışılmadık kavramlarla veya projeniz için doğru kararları vermek üzere daha fazla bilgiye ihtiyaç duyduğunuz alanlarla karşılaşabilirsiniz. Bu sayfa, bu soruları yanıtlamayı veya daha fazlasını öğrenmek için sizi 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 görmek için tekrar kontrol edin.

SDK sürüm 8 ve 9

Firebase, Web uygulamaları için iki SDK sürümü sağlar:

• Sürüm 8. Bu, Firebase'in birkaç yıldır sürdürdüğü ve mevcut Firebase uygulamalarına sahip Web geliştiricilerinin aşina olduğu JavaScript arabirimidir. Firebase, bir büyük sürüm döngüsünden sonra bu sürüm için desteği kaldıracağından, yeni uygulamalar bunun yerine sürüm 9'u benimsemelidir.
• Modüler sürüm 9 . 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şım sunar.

Sürüm 9, "ağaç sallama" olarak bilinen bir işlem olan, uygulamanızda kullanılmayan kodu çıkaran derleme araçlarıyla iyi bir şekilde bütünleşir. Bu SDK ile oluşturulan uygulamalar, büyük ölçüde azaltılmış boyut ayak izlerinden yararlanır. Sürüm 8, 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.

Sürüm 9 SDK'sının çoğunluğu sürüm 8 ile aynı kalıpları izlese de, kodun organizasyonu farklıdır. Genel olarak, sürüm 8, bir ad alanına ve hizmet modeline yönelikken, sürüm 9 ayrık işlevlere yöneliktir. Örneğin, sürüm 8'in firebaseApp.auth() gibi nokta zincirleme özelliği, sürüm 9'da firebaseApp alan ve bir Kimlik Doğrulama örneği döndüren tek bir getAuth() işleviyle değiştirilir.

Bu, sürüm 8 veya önceki sürümlerle oluşturulan Web uygulamalarının, sürüm 9'un modüler yaklaşımından yararlanmak için yeniden düzenleme gerektirdiği anlamına gelir. Firebase, bu geçişi kolaylaştırmak için uyumluluk kitaplıkları sağlar; daha fazla ayrıntı için yükseltme kılavuzuna bakın.

Ne desteklenir?

Sürüm 8 ve sürüm 9 farklı kod stillerine sahipken, Firebase özellikleri ve seçenekleri için çok benzer destek sağlarlar. Bu kılavuzda ayrıntılı olarak açıklayacağımız gibi, her iki SDK sürümü de JavaScript ve Node.js değişkenlerinin yanı sıra SDK'ları eklemek/yüklemek için çeşitli seçenekleri destekler.

Daha fazla bilgi için bu sayfanın ilerleyen kısımlarında yer alan Uygulamanıza Web SDK'ları eklemenin yolları ve Firebase Web SDK varyantları bölümüne bakın.

Yeni uygulamalar için Sürüm 9

Firebase ile yeni bir entegrasyona başlıyorsanız, SDK'yı ekleyip başlattığınızda sürüm 9 SDK'yı seçebilirsiniz.

Uygulamanızı geliştirirken, kodunuzun temelde işlevler etrafında düzenleneceğini unutmayın. 9. sürümde, hizmetler ilk bağımsız değişken olarak iletilir ve ardından işlev, gerisini halletmek 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 bir ürün alanı için kılavuzlara ve sürüm 9 referans belgelerine bakın.

Web SDK'larını uygulamanıza eklemenin 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ızla hangi araçları kullandığınıza (bir modül paketleyici gibi) veya uygulamanızın Node.js gibi tarayıcı olmayan bir ortamda çalışıp çalışmadığına bağlıdır.

Desteklenen yöntemlerden biri aracılığıyla mevcut kitaplıklardan herhangi birini uygulamanıza ekleyebilirsiniz:

• npm (modül paketleyicileri ve Node.js için)
• CDN (içerik dağıtım 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ı, mevcut seçenekler arasından seçim yapmanıza yardımcı olacak bilgileri içerir.

npm

Firebase npm paketini (hem tarayıcı hem de Node.js paketlerini içerir) indirmek size, Node.js uygulamaları, React Native veya Electron gibi tarayıcı olmayan uygulamalar için gerekli olabilecek Firebase SDK'nın yerel bir kopyasını sağlar. İndirme, bazı paketler için bir 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 paketleyici ile kullanmak, kullanılmayan kodu "ağaç sallamak" ve uygulamanızın boyut ayak izini büyük ölçüde azaltabilen hedeflenen çoklu doldurmaları uygulamak için optimizasyon seçenekleri sunar. Bu özellikleri uygulamak, yapılandırmanıza ve yapı zincirinize biraz karmaşıklık katabilir, ancak çeşitli genel CLI araçları bunu hafifletmeye yardımcı olabilir. Bu araçlar arasında Angular , React , Vue , Next ve diğerleri bulunur.

Ö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 gerekli

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 oluşturma aracına ihtiyacınız olmaz ve yapı zinciriniz, modül paketleyicilere kıyasla daha basit ve kullanımı 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ığı durumlarda uygundur
• Web siteniz oluşturma araçlarını kullanmadığında uygundur.

Firebase Web SDK varyantları

Şu anda, Firebase iki Web SDK çeşidi sunmaktadır:

• Tarayıcıda kullanım için tüm Firebase özelliklerini destekleyen bir JavaScript paketi.
• Firebase özelliklerinin hepsini olmasa da birçoğunu destekleyen, istemci tarafı bir Node.js paketi. Desteklenen ortamların listesine bakın.

Bu SDK varyantlarının her ikisi de, bir Node.js masaüstü veya IoT uygulamasında olduğu gibi, son kullanıcı erişimi için web uygulamaları veya istemci uygulamaları oluşturmaya yardımcı olmak üzere tasarlanmıştır. Hedefiniz ayrıcalıklı ortamlardan (sunucular gibi) yönetici erişimi ayarlamaksa, bunun yerine Firebase Admin SDK'yı kullanın.

Paket oluşturucular ve çerçevelerle ortam algılama

Firebase Web SDK'yı npm kullanarak yüklediğinizde JavaScript ve Node.js sürümlerinin her ikisi de yüklenir. Paket, uygulamanız için doğru paketleri etkinleştirmek için ayrıntılı ortam algılama sağlar.

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

• 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 edinin.

• Firebase Web Uygulamanızı oluşturduktan sonra Google Analytics'i veya Gerçek Zamanlı Veritabanını 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 alabilirsiniz.

Tüm hizmetlerin etkinleştirildiği bir yapılandırma nesnesinin biçimi aşağıdadır (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ılabilir kitaplıklar

<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js"></script>

<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-analytics.js"></script>

<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-app-check.js"></script>

<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-auth.js"></script>

<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-firestore.js"></script>

<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-functions.js"></script>

<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-installations.js"></script>

<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-messaging.js"></script>

<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-storage.js"></script>

<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-performance.js"></script>

<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-database.js"></script>

<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-remote-config.js"></script>

<script src="/__/firebase/8.10.1/firebase-app.js"></script>

<script src="/__/firebase/8.10.1/firebase-analytics.js"></script>

<script src="/__/firebase/8.10.1/firebase-app-check.js"></script>

<script src="/__/firebase/8.10.1/firebase-auth.js"></script>

<script src="/__/firebase/8.10.1/firebase-firestore.js"></script>

<script src="/__/firebase/8.10.1/firebase-functions.js"></script>

<script src="/__/firebase/8.10.1/firebase-installations.js"></script>

<script src="/__/firebase/8.10.1/firebase-messaging.js"></script>

<script src="/__/firebase/8.10.1/firebase-storage.js"></script>

<script src="/__/firebase/8.10.1/firebase-performance.js"></script>

<script src="/__/firebase/8.10.1/firebase-database.js"></script>

<script src="/__/firebase/8.10.1/firebase-remote-config.js"></script>

<script src="/__/firebase/8.10.1/firebase.js"></script>

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 dahil edilmesini erteleyebilirsiniz. <script type="module"> ile sürüm 9 CDN komut dosyaları kullanıyorsanız, bu varsayılan davranıştır. Modül olarak sürüm 8 CDN komut dosyalarını 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, ardından aşağıdakileri 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 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 yolla erişebilirsiniz:

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

// 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. Ya da ikinci bir projeyi kimliği doğrulanmamış halde tutarken bir projenin kimliğini doğrulamak isteyebilirsiniz.

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

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

// 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 sunucu ç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ızı sunmak için bir komut satırı aracı olan Firebase CLI'yi kullanacaksınız.

1. CLI'yi nasıl kuracağınızı 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

   Bu başlatma komutu ne işe yarar?

   • Yerel uygulama dizininizi Firebase ile bağlar

   • Bir firebase.json dosyası oluşturur (Firebase Barındırma için gerekli bir dosya)

   • Genel statik dosyalarınızı (HTML, CSS, JS, vb.) içeren bir genel kök dizini belirtmenizi ister.

     Firebase'in aradığı dizinin varsayılan adı "genel"dir. Genel dizini daha sonra doğrudan firebase.json dosyanızı değiştirerek de ayarlayabilirsiniz.

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 kaynak kitaplıkları olarak geliştirilmiştir.

hızlı başlangıç ​​örnekleri

Firebase, Web'deki çoğu Firebase API'si için bir hızlı başlangıç ​​örnekleri koleksiyonuna sahiptir. Bu hızlı başlangıçları genel Firebase GitHub hızlı başlangıç ​​depomuzda bulabilirsiniz. Bu hızlı başlangıçları, Firebase SDK'larını kullanmak için örnek kod olarak kullanabilirsiniz.