Firebase'i JavaScript projenize ekleyin

Web uygulamanızda Firebase JavaScript SDK'yı kullanmak veya son kullanıcı erişimi vermelidir (ör. Node.js masaüstü veya IoT).

1. Adım: Bir Firebase projesi oluşturun ve uygulamanızı kaydedin

Firebase'i JavaScript uygulamanıza eklemeden önce Firebase projesi oluşturun ve uygulamanızı bu projeye kaydedin. uygulamanız gerekiyorsa kullanacağınız bir Firebase yapılandırma nesnesi uygulamanızı Firebase proje kaynaklarınıza bağlayın.

Daha fazla bilgi için Firebase Projelerini Anlama sayfasını ziyaret edin Firebase projeleri ve projelere uygulama eklemeyle ilgili en iyi uygulamalar hakkında.

JavaScript projeniz yoksa ve yalnızca bir Firebase ürünü için hızlı başlangıç örneklerimizden birini indirebilirsiniz.

2. adım: SDK'yı yükleyin ve Firebase'i başlatın

Bu sayfada, Firebase JS SDK'nın modüler API'sinin kurulum talimatları açıklanmaktadır. JavaScript Modülü kullanan bir biçimindedir.

Bu iş akışı, npm'yi kullanıyor ve modül paketleyiciler veya JavaScript çerçevesi gerektiriyor çünkü modüler API'nin yeni özelliklerle çalışacak şekilde optimize edilmiş modül paketleyiciler Böylece kullanılmayan kodları (ağaç sallama) ortadan kaldırabilir ve SDK boyutunu küçültebilirsiniz.

başlıklı makaleyi inceleyin.

  1. npm kullanarak Firebase'i yükleyin:

    npm install firebase

  2. Uygulamanızda Firebase'i başlatın ve bir Firebase Uygulama 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 container benzeri bir nesnedir ve kimlik doğrulamasını Firebase hizmetleri genelinde paylaşır. Bir Kodunuzda Firebase Uygulaması nesnesi varsa, Firebase'i ekleyip kullanmaya başlayabilirsiniz kullanıma sunuyoruz.

    Uygulamanız sunucu tarafı oluşturmaya (SSR) dayalı dinamik özellikler içeriyorsa ve yapılandırmanızın düzgün şekilde tamamlandığından emin olmak için sunucu oluşturma ve istemci oluşturma geçişlerinde kalıcı hale gelir. İçinde sunucu mantığınıza göre, FirebaseServerApp arayüzünü kullanarak uygulamanızın hizmet çalışanlarıyla oturum yönetimi.

3. Adım: Uygulamanızda Firebase'e erişin

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

Aşağıdaki örnekte, verileri almak için Cloud Firestore Lite SDK'sını nasıl kullanabileceğiniz veri listesidir.

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

4. Adım: Boyut küçültme için bir modül paketleyici (web paketi/Birleştirme) kullanın

Firebase Web SDK'sı, mevcut SDK'ları kaldırmak için modül paketleyicilerle birlikte kullanılmayan kod (ağaç sallama). Proje yöneticilerinin üretim uygulamalarıdır. Angular KSA, Next.js, Vue CLI veya Oluştur Uygulamaya otomatik olarak tepki ver npm aracılığıyla yüklenen ve kod tabanınız içindir.

Daha fazla bilgi için Firebase ile modül paketleyicileri kullanma rehberimize bakın.

Web için kullanılabilir Firebase hizmetleri

Firebase'i kullanmaya hazırsınız. Artık Firebase'i kullanmaya başlamak için Web uygulamanızda kullanılabilir Firebase hizmetlerini kullanabilirsiniz.

Aşağıdaki komutlar, yerel olarak yüklenen Firebase kitaplıklarının nasıl içe aktarılacağını gösterir npm ile. Alternatif içe aktarma seçenekleri için şuraya bakın: kullanılabilir kitaplıklar dokümanlarına göz atın.

Sonraki adımlar

Firebase hakkında bilgi edinin: