Google is committed to advancing racial equity for Black communities. See how.
Bu sayfa, Cloud Translation API ile çevrilmiştir.
Switch to English

Firebase'i JavaScript projenize ekleyin

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.

Ön şartlar

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

  1. 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.

  2. 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.

  3. (İ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.

  4. 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ı (paketleyici gibi) kullandığınıza 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, Firebase yapılandırma nesnesini dağıttığınız Firebase projesinden 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.

  1. 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/7.17.2/firebase-app.js"></script>

  <!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
  <script src="/__/firebase/7.17.2/firebase-analytics.js"></script>

  <!-- Add Firebase products that you want to use -->
  <script src="/__/firebase/7.17.2/firebase-auth.js"></script>
  <script src="/__/firebase/7.17.2/firebase-firestore.js"></script>
</body>


  2. 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 bir Firebase JavaScript SDK kitaplığını global CDN'mizde (içerik dağıtım ağı) depolar.

  1. Yalnızca belirli Firebase ürünlerini dahil etmek için (örneğin, Kimlik Doğrulama 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/7.17.2/firebase-app.js"></script>

  <!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
  <script src="https://www.gstatic.com/firebasejs/7.17.2/firebase-analytics.js"></script>

  <!-- Add Firebase products that you want to use -->
  <script src="https://www.gstatic.com/firebasejs/7.17.2/firebase-auth.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.17.2/firebase-firestore.js"></script>
</body>


  2. Uygulamanızda Firebase'i başlatın: 

    <body>
  <!-- Previously loaded Firebase SDKs -->

  <script>
    // TODO: Replace the following with your app's Firebase project configuration
    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. Paketleyici kullanıyorsanız (Browserify veya web paketi gibi) ihtiyaç duyduğunuzda bağımsız Firebase ürünlerini import .

  1. Firebase JavaScript SDK'sını yükleyin:

    1. 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

    2. firebase npm paketini kurun ve firebase çalıştırarak package.json dosyanıza kaydedin: 

      npm install --save firebase

  2. 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 * 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";

  3. Uygulamanızda Firebase'i başlatın: 

    // TODO: Replace the following with your app's Firebase project configuration
const firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

Node.js uygulamaları

  1. Firebase JavaScript SDK'sını yükleyin:

    1. 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

    2. firebase npm paketini kurun ve firebase çalıştırarak package.json dosyanıza kaydedin: 

      npm install --save firebase

  2. Firebase modülünü uygulamanızda 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 kullanabilirsiniz

      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
import * as firebase from "firebase/app";

// Add the Firebase services that you want to use
import "firebase/auth";
import "firebase/firestore";

  3. Uygulamanızda Firebase'i başlatın: 

    // TODO: Replace the following with your app's Firebase project configuration
var firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

Firebase yapılandırma nesnesi

Firebase'i uygulamanızda başlatmak için uygulamanızın Firebase proje yapılandırmasını sağlamanız gerekir.

Ayrılmış Barındırma URL'leri kullanırsanız , Firebase yapılandırmanız Firebase projenizden otomatik olarak alınır, böylece nesneyi kodunuzda açıkça belirtmeniz gerekmez.

Firebase Web Uygulamanızı (özellikle Bulut Depolama veya Google Analytics) oluşturduktan sonra Firebase projenizde yeni Firebase hizmetlerini etkinleştirirseniz, uygulamanızda Firebase yapılandırma nesnenizi güncellediğinizden emin olun veya ayrılmış URL'ler kullanıyorsanız sitenize yeniden dağıtım yapın . Firebase konsolunda güncellenmiş yapılandırma nesnenizi edinin .

Yapılandırma nesnenizdeki alanları manuel olarak düzenlemenizi önermiyoruz, ancak özellikle şu gerekli " apiKey seçeneklerini" değiştirmemeye dikkat edin: apiKey , projectId ve appID . Uygulamanızı bu gerekli Firebase seçeneklerinden herhangi biri için geçersiz veya eksik değerlerle başlatırsanız, uygulamanızın kullanıcıları ciddi sorunlarla karşılaşabilir.

İşte tüm hizmetlerin etkin olduğu bir yapılandırma nesnesinin biçimi (bu değerler otomatik olarak doldurulur): 

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

Örnek değerlerle doldurulmuş bir yapılandırma nesnesi: 

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

Firebase yapılandırma nesnenizi istediğiniz zaman edinebilirsiniz .

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.

  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. İç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 ve firebaseapp.com alanlarında ( project-id .web.app ve project-id .firebaseapp.com ) ücretsiz alt alanları vardır.

    1. Sitenize dağıtın. Uygulamanızın kök dizininden aşağıdaki komutu çalıştırın: 

      firebase deploy

    2. 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.

    1. Sizin sitenizi ekleyin firebase.json dosyası (sırasında oluşturulan firebase init ).

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

    // ...
  }
}

    2. Sitenize dağıtın. Uygulamanızın kök dizininden aşağıdaki komutu çalıştırın: 

      firebase deploy --only hosting: site-name

    3. 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()
Kimlik 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.

  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/7.17.2/firebase-app.js"></script>

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

// ...

<script defer src="./init-firebase.js"></script>

  2. 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 yoldan 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. Ya da 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.

  1. CLI'nın nasıl yükleneceğini 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

  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

Sonraki adımlar

Firebase hakkında bilgi edinin:

Firebase hizmetlerini uygulamanıza ekleyin: