Web ve Firebase hakkında daha fazla bilgi edinin

Firebase kullanarak bir Web uygulaması geliştirirken, tanıdık olmayan 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 daha fazla bilgi edinmek 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 aralıklarla yeni konularla güncelleyeceğiz, bu nedenle öğrenmek istediğiniz konuyu ekleyip eklemediğimizi tekrar kontrol edin.

SDK'nın 8 ve 9 sürümleri

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 arayüzüdür. Firebase, büyük bir yayın 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, web paketi veya Rollup gibi modern JavaScript oluşturma araçlarıyla daha düşük SDK boyutu ve daha yüksek 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, modül olarak mevcut olmasına rağmen, kesinlikle 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ğ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ı ve hizmet modeline yöneliktir, sürüm 9 ise 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 daha ö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 sahip olsa da, 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 türevlerinin yanı sıra SDK'ları eklemek/yüklemek için çeşitli seçenekleri destekler.

Daha fazla bilgi için, bu sayfada daha sonra Web SDK'larını uygulamanıza ve Firebase Web SDK türevlerine eklemenin yolları 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şlatırken sürüm 9 SDK'yı etkinleştirebilirsiniz.

Uygulamanızı geliştirirken, kodunuzun temel olarak işlevler etrafında düzenleneceğini unutmayın. Sürüm 9'da, 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 bir ürün alanına ilişkin kılavuzlara ve ayrıca sürüm 9 başvuru belgelerine bakın.

Uygulamanıza Web SDK'ları 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ızda 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 birini kullanarak mevcut kitaplıklardan herhangi birini uygulamanıza ekleyebilirsiniz:

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

Ayrıntılı kurulum talimatları için JavaScript Uygulamanıza Firebase 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 bilgiler 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ı dışı 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 hedeflenen çoklu dolguları uygulamak için optimizasyon seçenekleri sunar, bu da uygulamanızın boyut ayak izini büyük ölçüde azaltabilir. Bu özellikleri uygulamak, yapılandırmanıza ve yapı zincirinize biraz karmaşıklık katabilir, ancak çeşitli ana akım CLI araçları bunu azaltmaya 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 takımlar 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 olduğu 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 daha kolay çalışabilir. 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 boyutu önemli bir sorun olmadığında uygundur
• Web siteniz oluşturma araçları kullanmadığında uygundur.

Firebase Web SDK çeşitleri

Ş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 çoğunu (ancak hepsini değil) destekleyen bir istemci tarafı 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. Amacınız ayrıcalıklı ortamlardan (sunucular gibi) yönetim erişimi kurmaksa, bunun yerine Firebase Admin SDK'yı kullanın.

Paketleyiciler ve çerçeveler ile ortam algılama

Firebase Web SDK'sını npm kullanarak kurduğunuzda, JavaScript ve Node.js sürümlerinin 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, paketleyicinizin ayarlarının, package.json dosyanızdaki (örneğin, main , browser veya module ) doğru giriş noktası alanını algılamak için doğru şekilde yapılmış olması gerekir. 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 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 şu gerekli "Firebase seçenekleri"ni 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.

• measurementId projenizde Google Analytics'i etkinleştirdiyseniz, yapılandırma nesneniz MeasureId alanını içerir. Analytics'e başlarken sayfasında bu alan hakkında daha fazla bilgi edinin.

• 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. Firebase yapılandırma nesnenizi istediğiniz zaman alabilirsiniz.

Tüm hizmetlerin etkinleştirildiği bir yapılandırma nesnesinin biçimi şu şekildedir (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 gecikmeli yüklenmesi (CDN'den)

Tüm sayfa yüklenene kadar Firebase SDK'larının eklenmesini geciktirebilirsiniz. <script type="module"> ile sürüm 9 CDN komut dosyalarını 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 fazla Firebase projesine erişmeniz gerekir. Örneğin, bir Firebase projesinin veritabanındaki verileri okumak, ancak dosyaları farklı bir Firebase projesinde depolamak isteyebilirsiniz. Veya 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, aynı anda birden fazla Firebase projesini 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'sı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'nin nasıl kurulacağını veya en son sürümüne nasıl güncelleneceğini öğ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 Hosting 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. Ayrıca genel dizini daha sonra firebase.json dosyanızı doğrudan 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 koleksiyonu bulundurur. Bu hızlı başlangıçları genel Firebase GitHub hızlı başlangıç ​​depomuzda bulun. Bu hızlı başlangıçları, Firebase SDK'larını kullanmak için örnek kod olarak kullanabilirsiniz.