Check out what’s new from Firebase@ Google I/O 2021, and join our alpha program for early access to the new Remote Config personalization feature. Learn more

JavaScript projenize Firebase ekleyin

Firebase JavaScript SDK'sını web uygulamanızda veya örneğin bir Node.js masaüstünde 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.

Adım 1 : Bir 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 Anlayın sayfasını ziyaret edin.

2. Adım : Uygulamanızı Firebase'e kaydedin

Bir Firebase projeniz olduktan sonra buna web uygulamanızı 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 Anlayın sayfasını ziyaret edin.

  1. Firebase konsolunun projeye genel bakış sayfasının , kurulum iş akışını başlatmak için Web simgesine ( ) 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 bir kullanışlı tanımlayıcıdır ve yalnızca Firebase konsolunda siz görebilirsiniz.

  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ı, istediğiniz zaman Proje ayarlarınızda bir Barındırma sitesine bağlayabilirsiniz.

    • Barındırma kurulumunu şimdi yapmayı 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örüntüler .

      • Bir Firebase Web Uygulamasına önceden 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. Mevcut kitaplıklardan herhangi birini uygulamanıza ekleyebilirsiniz.

Firebase SDK'larını Web uygulamanıza nasıl ekleyeceğiniz, uygulamanız için Firebase Hosting kullanmayı seçip seçmediğinize, uygulamanızla hangi araçları (bir modül paketleyici gibi) kullandığınıza veya bir Node.js yapılandırıp yapılandırmadığınıza bağlıdır. uygulama. 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. Beta sürümünde teknik destek zorunluluğu olmadığını unutmayın.

npm ile

Firebase JavaScript SDK'sının kısmi içe aktarımını yapılandırabilir ve yalnızca ihtiyacınız olan Firebase ürünlerini yükleyebilirsiniz. Bir paketleyici (Tarayıcı veya web paketi gibi) kullanıyorsanız, ihtiyacınız olduğunda ayrı ayrı Firebase ürünlerini import .

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

    1. Zaten bir package.json dosyanız yoksa, JavaScript projenizin kökünden 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 (Kimlik Doğrulama 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'sının kısmi içe aktarımını yapılandırabilir ve yalnızca ihtiyacınız olan Firebase ürünlerini yükleyebilirsiniz. Firebase, Firebase JavaScript SDK'sının her kitaplığını global CDN'mizde (içerik dağıtım ağı) depolar.

  1. Yalnızca belirli Firebase ürünlerini (örneğin, Kimlik Doğrulama ve Cloud Firestore) dahil etmek için, herhangi bir Firebase hizmetini kullanmadan önce <body> etiketinizin altına aşağıdaki komut dosyalarını ekleyin:

    <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.6.7/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.6.7/firebase-analytics.js"></script>

  <!-- Add Firebase products that you want to use -->
  <script src="https://www.gstatic.com/firebasejs/8.6.7/firebase-auth.js"></script>
  <script src="https://www.gstatic.com/firebasejs/8.6.7/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ı, ayrılmış URL'lerden Firebase JavaScript SDK kitaplıklarını 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ğıttı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, Kimlik Doğrulama veya Cloud Firestore) dahil etmek için, herhangi bir Firebase hizmetini kullanmadan önce <body> etiketinizin altına aşağıdaki komut dosyalarını ekleyin:

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

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

  <!-- Add Firebase products that you want to use -->
  <script src="/__/firebase/8.6.7/firebase-auth.js"></script>
  <script src="/__/firebase/8.6.7/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ünden 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üller 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 alabilirsiniz.

  • Ayrılmış Barındırma URL'leri kullanıyorsanız , Firebase yapılandırmanız Firebase projenizden otomatik olarak çekilir, bu nedenle yapılandırma nesnenizi kodunuzda açıkça belirtmeniz gerekmez.

  • Yapılandırma nesnenizi, özellikle şu gerekli " apiKey seçenekleri" apiKey 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 sorunlar yaşayabilir.

  • Eğer Firebase projesi Google Analytics etkin olursa, yapılandırma nesnesini alan içeriyor measurementId . Analytics'e başlarken sayfasında bu alan hakkında daha fazla bilgi edinin.

Tüm hizmetlerin etkinleştirildiği bir yapılandırma nesnesinin biçimi şu şekildedir (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"
};

Adım 4 : (İsteğe bağlı) CLI'yi yükleyin ve Firebase Hosting'e dağıtın

Firebase Web Uygulamanızı bir Firebase Barındırma 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'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

  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 Barındırma 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 ( firebase init sırasında oluşturulmuş) 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_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'sı 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 başvuru belgelerinde mevcut yöntemler hakkında bilgi edinin.

Firebase ürünü Ad alanı (v8 ve altı) ağ Node.js
Analitik firebase.analytics()
kimlik doğrulama firebase.auth()
Bulut Firestore firebase.firestore()
Firebase İstemci SDK'sı için Bulut İşlevleri 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()

Kullanılabilir kitaplıklar

Sonraki adımlar

Firebase hakkında bilgi edinin:

Uygulamanıza Firebase hizmetleri ekleyin: