Save the date - Google I/O returns May 18-20. Register to get the most out of the digital experience: Build your schedule, reserve space, participate in Q&As, earn Google Developer profile badges, and more. Register now
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

Firebase; Remote Config, FCM ve daha fazlası dahil olmak üzere çoğu Firebase ürünü için JavaScript kitaplıkları sağlar. Kullanılabilir kitaplıklardan herhangi birini uygulamanıza ekleyebilirsiniz.

Firebase SDK'larını Web uygulamanıza 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 (bir modül paketleyici gibi) veya bir Node.js yapılandırıp yapılandırmadığınıza bağlıdır. app. Bu alternatifler arasında seçim yapma konusunda daha fazla yardım için Web SDK'larını uygulamanıza eklemenin yolları bölümüne bakın.

Modüler uygulama geliştirme için optimize edilmiş yeni Beta SDK'yı denemekle ilgileniyorsanız, sürüm 9 (Beta) seçeneğini belirleyin. Bir beta sürümde teknik destek zorunluluğu olmadığını unutmayın.

Npm ile

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

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, 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/8.4.1/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.4.1/firebase-analytics.js"></script>
    
      <!-- Add Firebase products that you want to use -->
      <script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-auth.js"></script>
      <script src="https://www.gstatic.com/firebasejs/8.4.1/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>
    

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.4.1/firebase-app.js"></script>
    
      <!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
      <script src="/__/firebase/8.4.1/firebase-analytics.js"></script>
    
      <!-- Add Firebase products that you want to use -->
      <script src="/__/firebase/8.4.1/firebase-auth.js"></script>
      <script src="/__/firebase/8.4.1/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>
    

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 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 otomatik olarak Firebase projenizden 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_ID",
          "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_ID
    3. Sitenizi şunlardan birinde görüntüleyin:

      • SITE_ID .web.app
      • SITE_ID .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 gösterildiği gibi erişilebilir.

Firebase JavaScript referans belgelerinde mevcut yöntemler hakkında bilgi edinin.

Firebase ürünü Ad alanı (v8 ve altı) 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

Sonraki adımlar

Firebase hakkında bilgi edinin:

Firebase hizmetlerini uygulamanıza ekleyin: