Firebase JavaScript SDK'yı web uygulamanızda veya örneğin bir Node.js masaüstü veya IoT uygulamasında son kullanıcı erişimi için bir istemci olarak kullanmak için bu kılavuzu izleyin.
Önkoşullar
Tercih ettiğiniz düzenleyiciyi veya IDE'yi yükleyin.
Google hesabınızı kullanarak Firebase'de oturum açın.
Henüz bir JavaScript projeniz yoksa ve yalnızca bir Firebase ürününü denemek istiyorsanız, hızlı başlangıç örneklerimizden birini indirebilirsiniz.
1. Adım : Firebase projesi oluşturun
JavaScript uygulamanıza Firebase eklemeden önce, uygulamanıza bağlanmak için bir Firebase projesi oluşturmanız gerekir.
Firebase projeleri ve projelere uygulama eklemeye yönelik en iyi uygulamalar hakkında daha fazla bilgi edinmek için Firebase Projelerini Anlama bölümünü ziyaret edin.
2. Adım : Uygulamanızı Firebase'e kaydedin
Bir Firebase projeniz olduktan sonra, web uygulamanızı buna ekleyebilirsiniz.
Bir Firebase projesine uygulama eklemeye ilişkin en iyi uygulamalar ve dikkate alınması gereken noktalar hakkında daha fazla bilgi edinmek için Firebase Projelerini Anlama sayfasını ziyaret edin.
Firebase konsolunun projeye genel bakış sayfasının , kurulum iş akışını başlatmak için Web simgesini ( ) tıklayın.
Firebase projenize zaten bir uygulama eklediyseniz, platform seçeneklerini görüntülemek için Uygulama ekle'yi tıklayın.
Uygulamanızın takma adını girin.
Bu takma ad dahili, kullanışlı bir tanımlayıcıdır ve yalnızca Firebase konsolunda sizin tarafınızdan görülebilir.(İsteğe bağlı) Web uygulamanız için Firebase Hosting'i kurun.
Firebase Hosting'i şimdi veya daha sonra kurabilirsiniz. Ayrıca, Firebase Web Uygulamanızı Proje ayarlarınızdan istediğiniz zaman bir Barındırma sitesine bağlayabilirsiniz.
Hosting'i şimdi kurmayı seçerseniz, Firebase Web Uygulamanıza bağlanmak için açılır listeden bir site seçin.
Bu liste, projenizin varsayılan Barındırma sitesini ve projenizde kurduğunuz diğer siteleri gösterir.
Bir Firebase Web Uygulamasına zaten bağladığınız hiçbir site ek bağlantı için kullanılamaz. Her Barındırma sitesi yalnızca tek bir Firebase Web Uygulamasına bağlanabilir.
Uygulamayı kaydet'i tıklayın.
3. Adım : Firebase SDK'larını ekleyin ve Firebase'i başlatın
Desteklenen Firebase ürünlerinden herhangi birini uygulamanıza ekleyebilirsiniz.
Uygulamanıza Firebase SDK'larını nasıl ekleyeceğiniz, uygulamanız için Firebase Hosting'i kullanmayı seçip seçmediğinize, uygulamanızda hangi araçları kullandığınıza (paketleyici gibi) veya bir Node.js uygulaması yapılandırıp yapılandırmadığınıza bağlıdır.
Barındırma URL'lerinden
Firebase Hosting'i kullandığınızda, uygulamanızı Firebase JavaScript SDK kitaplıklarını ayrılmış URL'lerden dinamik olarak yükleyecek şekilde yapılandırabilirsiniz. Ayrılmış Barındırma URL'leri aracılığıyla SDK ekleme hakkında daha fazla bilgi edinin.
Bu kurulum seçeneğiyle, Firebase'e dağıtım yaptıktan sonra uygulamanız, dağıttığınız Firebase projesinden Firebase yapılandırma nesnesini otomatik olarak çeker. Aynı kod tabanını birden çok Firebase projesine dağıtabilirsiniz, ancak firebase.initializeApp()
için kullandığınız firebase.initializeApp()
yapılandırmasını izlemeniz gerekmez.
Bu kurulum seçeneği , web uygulamanızı yerel olarak test etmek için de çalışır.
Yalnızca belirli Firebase ürünlerini (örneğin, Analytics, Authentication veya Cloud Firestore) dahil etmek için aşağıdaki komut dosyalarını
<body>
etiketinizin altına ekleyin, ancak herhangi bir Firebase hizmetini kullanmadan önce:<body> <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services --> <!-- Firebase App (the core Firebase SDK) is always required and must be listed first --> <script src="/__/firebase/8.2.4/firebase-app.js"></script> <!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics --> <script src="/__/firebase/8.2.4/firebase-analytics.js"></script> <!-- Add Firebase products that you want to use --> <script src="/__/firebase/8.2.4/firebase-auth.js"></script> <script src="/__/firebase/8.2.4/firebase-firestore.js"></script> </body>
Uygulamanızda Firebase'i başlatın (ayrılmış Barındırma URL'lerini kullanırken Firebase yapılandırma nesnenizi eklemenize gerek yoktur):
<body> <!-- Previously loaded Firebase SDKs --> <!-- Initialize Firebase --> <script src="/__/firebase/init.js"></script> </body>
CDN'den
Firebase JavaScript SDK'nın kısmi içe aktarılmasını yapılandırabilir ve yalnızca ihtiyacınız olan Firebase ürünlerini yükleyebilirsiniz. Firebase, her Firebase JavaScript SDK kitaplığını global CDN'mizde (içerik dağıtım ağı) depolar.
Yalnızca belirli Firebase ürünlerini dahil etmek için (örneğin, Authentication ve Cloud Firestore) aşağıdaki komut dosyalarını
<body>
etiketinizin altına ekleyin, ancak herhangi bir Firebase hizmetini kullanmadan önce:<body> <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services --> <!-- Firebase App (the core Firebase SDK) is always required and must be listed first --> <script src="https://www.gstatic.com/firebasejs/8.2.4/firebase-app.js"></script> <!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics --> <script src="https://www.gstatic.com/firebasejs/8.2.4/firebase-analytics.js"></script> <!-- Add Firebase products that you want to use --> <script src="https://www.gstatic.com/firebasejs/8.2.4/firebase-auth.js"></script> <script src="https://www.gstatic.com/firebasejs/8.2.4/firebase-firestore.js"></script> </body>
Uygulamanızda Firebase'i başlatın:
<body> <!-- Previously loaded Firebase SDKs --> <script> // TODO: Replace the following with your app's Firebase project configuration // For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field var firebaseConfig = { // ... }; // Initialize Firebase firebase.initializeApp(firebaseConfig); </script> </body>
Modül paketlerini kullanma
Firebase JavaScript SDK'nın kısmi içe aktarılmasını yapılandırabilir ve yalnızca ihtiyacınız olan Firebase ürünlerini yükleyebilirsiniz. Bir paketleyici (Browserify veya web paketi gibi) kullanıyorsanız ihtiyaç duyduğunuzda bağımsız Firebase ürünlerini import
.
Firebase JavaScript SDK'sını yükleyin:
Zaten bir
package.json
dosyanız yoksa, JavaScript projenizin kök dizininden aşağıdaki komutu çalıştırarak bir tane oluşturun:npm init
firebase
npm paketini kurun vefirebase
çalıştırarakpackage.json
dosyanıza kaydedin:npm install --save firebase
Yalnızca belirli Firebase ürünlerini (Authentication ve Cloud Firestore gibi) dahil etmek için Firebase modüllerini
import
:// Firebase App (the core Firebase SDK) is always required and must be listed first import firebase from "firebase/app"; // If you are using v7 or any earlier version of the JS SDK, you should import firebase using namespace import // import * as firebase from "firebase/app" // If you enabled Analytics in your project, add the Firebase SDK for Analytics import "firebase/analytics"; // Add the Firebase products that you want to use import "firebase/auth"; import "firebase/firestore";
Uygulamanızda Firebase'i başlatın:
// TODO: Replace the following with your app's Firebase project configuration // For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field const firebaseConfig = { // ... }; // Initialize Firebase firebase.initializeApp(firebaseConfig);
Node.js uygulamaları
Firebase JavaScript SDK'sını yükleyin:
Zaten bir
package.json
dosyanız yoksa, JavaScript projenizin kök dizininden aşağıdaki komutu çalıştırarak bir tane oluşturun:npm init
firebase
npm paketini kurun vefirebase
çalıştırarakpackage.json
dosyanıza kaydedin:npm install --save firebase
Uygulamanızda Firebase modülünü kullanmak için aşağıdaki seçeneklerden birini kullanın:
Herhangi bir JavaScript dosyasından modül
require
Yalnızca belirli Firebase ürünlerini dahil etmek için (Kimlik Doğrulama ve Cloud Firestore gibi):
// Firebase App (the core Firebase SDK) is always required and // must be listed before other Firebase SDKs var firebase = require("firebase/app"); // Add the Firebase products that you want to use require("firebase/auth"); require("firebase/firestore");
Modülleri
import
için ES2015'i kullanabilirsinizYalnızca belirli Firebase ürünlerini dahil etmek için (Kimlik Doğrulama ve Cloud Firestore gibi):
// Firebase App (the core Firebase SDK) is always required and // must be listed before other Firebase SDKs import firebase from "firebase/app"; // Add the Firebase services that you want to use import "firebase/auth"; import "firebase/firestore";
Uygulamanızda Firebase'i başlatın:
// TODO: Replace the following with your app's Firebase project configuration // For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field var firebaseConfig = { // ... }; // Initialize Firebase firebase.initializeApp(firebaseConfig);
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 edinebilirsiniz .
Ayrılmış Barındırma URL'leri kullanırsanız , Firebase yapılandırmanız Firebase projenizden otomatik olarak alınır, böylece kodunuzda yapılandırma nesnenizi açıkça belirtmeniz gerekmez.
Yapılandırma nesnenizi, özellikle şu gerekli "
apiKey
seçeneklerini" manuel olarak düzenlemeniziapiKey
:apiKey
,projectId
veappID
. 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, yapılandırma nesneniz alan
measurementId
kimliğini içerir. Analytics başlangıç sayfasından bu alan hakkında daha fazla bilgi edinin.
İşte tüm hizmetlerin etkin olduğu bir yapılandırma nesnesinin biçimi (bu değerler otomatik olarak doldurulur):
// For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field var firebaseConfig = { apiKey: "API_KEY", authDomain: "PROJECT_ID.firebaseapp.com", databaseURL: "https://PROJECT_ID.firebaseio.com", projectId: "PROJECT_ID", storageBucket: "PROJECT_ID.appspot.com", messagingSenderId: "SENDER_ID", appId: "APP_ID", measurementId: "G-MEASUREMENT_ID", };
İşte örnek değerlere sahip bir yapılandırma nesnesi:
// For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field var firebaseConfig = { apiKey: "AIzaSyDOCAbC123dEf456GhI789jKl01-MnO", authDomain: "myapp-project-123.firebaseapp.com", databaseURL: "https://myapp-project-123.firebaseio.com", projectId: "myapp-project-123", storageBucket: "myapp-project-123.appspot.com", messagingSenderId: "65211879809", appId: "1:65211879909:web:3ae38ef1cdcb2e01fe5f0c", measurementId: "G-8GSGZQ44ST" };
4. Adım : (İsteğe bağlı) CLI'yi yükleyin ve Firebase Hosting'e dağıtın
Firebase Web Uygulamanızı bir Firebase Hosting sitesine bağladıysanız, sitenizin içeriğini ve yapılandırmasını şimdi (Web Uygulamanızı kurarken) veya daha sonra istediğiniz zaman dağıtabilirsiniz.
Firebase'e dağıtmak için bir komut satırı aracı olan Firebase CLI'yi kullanacaksınız.
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.
Firebase projenizi başlatın. Yerel uygulama dizininizin kökünden aşağıdaki komutu çalıştırın:
firebase init
Yerel uygulama dizininizi Firebase'e bağlar
Bir
firebase.json
dosyası oluşturur (firebase.json
Hosting için gerekli bir dosya)Genel statik dosyalarınızı (HTML, CSS, JS, vb.) İçeren genel bir kök dizini belirtmenizi ister.
Firebase'in aradığı dizinin varsayılan adı "herkese açık" tır. Genel dizini daha sonra doğrudan
firebase.json
dosyanızı değiştirerek de ayarlayabilirsiniz .
İçeriğinizi ve barındırma yapılandırmanızı Firebase Hosting'e dağıtın.
Varsayılan Barındırma sitesi
Varsayılan olarak, her Firebase projesinin
web.app
vefirebaseapp.com
alanlarında (project-id .web.app
veproject-id .firebaseapp.com
) ücretsiz alt alanları vardır.Sitenize dağıtın. Uygulamanızın kök dizininden aşağıdaki komutu çalıştırın:
firebase deploy
Sitenizi varsayılan sitelerinizden birinde görüntüleyin:
-
project-id .web.app
-
project-id .firebaseapp.com
-
Varsayılan olmayan Hosting sitesi
Firebase projeleri birden çok siteyi destekler (bunlar varsayılan olmayan siteleriniz olarak kabul edilir). Konsolun Web Uygulaması kurulum iş akışı sırasında veya konsolun Barındırma sayfasından projenize ek siteler ekleyebilirsiniz.
Sitenizi
firebase.json
dosyanıza ekleyin (firebase init
sırasında oluşturulmuştur).Bu
firebase.json
yapılandırmasının, sitelerinizin her biri için ayrı havuzlarınız olduğunu varsaydığını unutmayın.{ "hosting": { "site": "site-name>", "public": "public", // ... } }
Sitenize dağıtın. Uygulamanızın kök dizininden aşağıdaki komutu çalıştırın:
firebase deploy --only hosting:site-name
Sitenizi şunlardan birinde görüntüleyin:
-
site-name .web.app
-
site-name .firebaseapp.com
-
5. Adım : Uygulamanızda Firebase'e erişin
Firebase JavaScript SDK, aşağıdaki Firebase ürünlerini destekler. Her ürün isteğe bağlıdır ve firebase
ad alanından erişilebilir.
Firebase JavaScript referans belgelerinde mevcut yöntemler hakkında bilgi edinin.
Firebase ürünü | Ad alanı | ağ | Node.js |
---|---|---|---|
Analitik | firebase.analytics() | ||
Doğrulama | firebase.auth() | ||
Cloud Firestore | firebase.firestore() | ||
Firebase Client SDK için Cloud Functions | firebase.functions() | ||
Bulut Mesajlaşma | firebase.messaging() | ||
Bulut depolama | firebase.storage() | ||
Performans İzleme ( beta sürümü) | firebase.performance() | ||
Gerçek Zamanlı Veritabanı | firebase.database() | ||
Remote Config ( beta sürümü) | firebase.remoteConfig() |
Mevcut kitaplıklar
Ek kurulum seçenekleri
Firebase SDK'larının yüklenmesini geciktirme (CDN'den)
Firebase SDK'larının dahil edilmesini sayfanın tamamı yüklenene kadar erteleyebilirsiniz.
Firebase SDK'ları için her
script
etiketine birdefer
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.2.4/firebase-app.js"></script> <script defer src="https://www.gstatic.com/firebasejs/8.2.4/firebase-auth.js"></script> <script defer src="https://www.gstatic.com/firebasejs/8.2.4/firebase-firestore.js"></script> // ... <script defer src="./init-firebase.js"></script>
Bir
init-firebase.js
dosyası oluşturun ve 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 çok 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 şekilde erişebilirsiniz:
// Initialize Firebase with a "default" Firebase project
var defaultProject = firebase.initializeApp(firebaseConfig);
console.log(defaultProject.name); // "[DEFAULT]"
// Option 1: Access Firebase services via the defaultProject variable
var defaultStorage = defaultProject.storage();
var defaultFirestore = defaultProject.firestore();
// Option 2: Access Firebase services using shorthand notation
defaultStorage = firebase.storage();
defaultFirestore = firebase.firestore();
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 kimlik doğrulamadan tutarken bir projenin kimliğini doğrulamak isteyebilirsiniz.
Firebase JavaScript SDK, 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.
// Initialize Firebase with a default Firebase project
firebase.initializeApp(firebaseConfig);
// Initialize Firebase with a second Firebase project
var 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
var defaultStorage = firebase.storage();
var defaultFirestore = firebase.firestore();
// Use the otherProject variable to access the second project's Firebase services
var otherStorage = otherProject.storage();
var otherFirestore = otherProject.firestore();
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 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'yi kullanacaksınız.
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.
Firebase projenizi başlatın. Yerel uygulama dizininizin kökünden aşağıdaki komutu çalıştırın:
firebase init
Yerel uygulama dizininizi Firebase'e bağlar
Bir
firebase.json
dosyası oluşturur (firebase.json
Hosting için gerekli bir dosya)Genel statik dosyalarınızı (HTML, CSS, JS, vb.) İçeren genel bir kök dizini belirtmenizi ister.
Firebase'in aradığı dizinin varsayılan adı "herkese açık" tır. Genel dizini daha sonra doğrudan
firebase.json
dosyanızı değiştirerek de ayarlayabilirsiniz .
Yerel sunucuyu geliştirme için başlatın. Yerel uygulama dizininizin kökünden aşağıdaki komutu çalıştırın:
firebase serve
Sonraki adımlar
Firebase hakkında bilgi edinin:
Örnek Firebase uygulamalarını keşfedin.
Firebase Web Codelab ile uygulamalı deneyim edinin .
GitHub'da açık kaynak kodunu keşfedin.
Firebase JavaScript SDK için desteklenen ortamları inceleyin .
AngularFire , RxFire ve web için FirebaseUI gibi Firebase tarafından bakımı yapılan ek açık kaynak kitaplıklarla geliştirmenizi hızlandırın.
Uygulamanızı başlatmaya hazırlanın:
- Google Cloud Console'da projeniz için bütçe uyarıları ayarlayın.
- Firebase konsolunda Kullanım ve faturalandırma kontrol panelinizi izleyin.
- Firebase başlatma kontrol listesini inceleyin .
Firebase hizmetlerini uygulamanıza ekleyin:
Uygulamanızı Firebase Hosting ile barındırın .
Kimlik Doğrulama ile bir kullanıcı kimlik doğrulama akışı ayarlayın.
Kullanıcı bilgileri gibi verileri Cloud Firestore veya Realtime Database ile depolayın.
Fotoğraflar ve videolar gibi dosyaları Cloud Storage ile depolayın.
Performans İzleme ile uygulamanızın performans sorunları hakkında fikir edinin.
Cloud Functions ile güvenli bir ortamda çalışan arka uç kodunu tetikleyin.
Bulut Mesajlaşma ile bildirimler gönderin.