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.

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

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

  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/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>


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


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

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

  3. 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ı

  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. 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 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 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
// 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üzenlemenizi apiKey : 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, 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.

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

    // ...
  }
}

    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()
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/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>

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

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

Firebase hizmetlerini uygulamanıza ekleyin: