Catch up on everthing we announced at this year's Firebase Summit. 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.

1. Adım: Bir Firebase proje oluşturun ve uygulamanızı kayıt

JavaScript uygulamanıza Firebase eklemeden önce bir Firebase projesi oluşturmanız ve uygulamanızı bu projeye kaydetmeniz gerekir. Uygulamanızı Firebase'e kaydettiğinizde, uygulamanızı Firebase proje kaynaklarınızla bağlamak için kullanacağınız bir Firebase yapılandırma nesnesi alırsınız.

Ziyaret Firebase Projeleri anlama projelere uygulamalar ekleyerek daha Firebase proje ve en iyi uygulamalar hakkında bilgi edinmek için.

Zaten bir JavaScript projesi var ve sadece Firebase ürünü denemek istemiyorsanız, bizim birini indirebilirsiniz hızlı başlangıç örneklerinin .

2. Adım: Firebase SDK'yı yükleyin ve başlatmak

Bu sayfa bir kullanır Firebase JS SDK, sürüm 9 için kurulum talimatlarına açıklanır JavaScript Modülü biçimi.

V9 SDK ile çalışmak için optimize edilmiştir, çünkü kullanımları NPM ve bu iş akışı modülü bundlers veya JavaScript çerçeve kalıp gerektirir modül bundlers kullanılmayan kod (ağaç sarsan) ve azalış SDK boyutunu ortadan kaldırmak için.

  1. Firebase'i npm kullanarak kurun:

    npm install firebase

  2. Uygulamanızda Firebase'i başlatın ve bir Firebase Uygulaması nesnesi oluşturun:

    import { initializeApp } from 'firebase/app';

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

const app = initializeApp(firebaseConfig);

    Firebase Uygulaması, ortak yapılandırmayı depolayan ve Firebase hizmetlerinde kimlik doğrulamasını paylaşan kapsayıcı benzeri bir nesnedir. Kodunuzda bir Firebase App nesnesi başlattıktan sonra, Firebase hizmetlerini ekleyebilir ve kullanmaya başlayabilirsiniz.

Adım 3: Erişim Firebase uygulamanızda

Firebase hizmetleri (Cloud Firestore, Authentication, Realtime Database, Remote Config ve daha fazlası gibi) ayrı alt paketler içinde içe aktarılabilir.

Aşağıdaki örnek, bir veri listesini almak için Cloud Firestore Lite SDK'yı nasıl kullanabileceğinizi gösterir.

import { initializeApp } from 'firebase/app';
import { getFirestore, collection, getDocs } from 'firebase/firestore/lite';
// Follow this pattern to import other Firebase services
// import { } from 'firebase/<service>';

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

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

// Get a list of cities from your database
async function getCities(db) {
  const citiesCol = collection(db, 'cities');
  const citySnapshot = await getDocs(citiesCol);
  const cityList = citySnapshot.docs.map(doc => doc.data());
  return cityList;
}

Adım 4: Bir modül paketleyici (webpack / toplaması) boyutunu azaltmak için

Firebase Web SDK, kullanılmayan kodları (ağaç sallama) kaldırmak için modül paketleyicilerle birlikte çalışacak şekilde tasarlanmıştır. Üretim uygulamaları için bu yaklaşımı kullanmanızı şiddetle öneririz. Gibi araçları Açısal CLI , Next.js , Vue CLI veya App tepki oluşturma otomatik kütüphaneler NPM aracılığıyla yüklenen ve kod temeli ithal için modül donatılacak işlemek.

Bizim kılavuzuna bakın Firebase ile modül bundlers kullanma Daha fazla bilgi için.

Web için mevcut Firebase hizmetleri

Artık Firebase'i kullanmak üzere ayarladığınıza göre, web uygulamanıza aşağıdaki mevcut Firebase hizmetlerinden herhangi birini eklemeye ve kullanmaya başlayabilirsiniz.

Aşağıdaki komutlar ile yerel olarak yüklü Firebase kütüphanelerini ithal etmek göstermek npm . Bkz Mevcut Kütüphaneler sayfasını alternatif ithalat seçenekleri için.

Sonraki adımlar

Firebase hakkında bilgi edinin: