Firebase'i JavaScript projenize ekleyin

Firebase JavaScript SDK'sını web uygulamanızda veya son kullanıcı erişimi için istemci olarak (ör. Node.js masaüstü veya IoT uygulamasında) kullanmak üzere bu kılavuzu uygulayın.

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

Firebase'i JavaScript uygulamanıza 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ıza bağlamak için kullanacağınız bir Firebase yapılandırma nesnesi alırsınız.

Firebase projeleri ve projelere uygulama eklemeyle ilgili en iyi uygulamalar hakkında daha fazla bilgi edinmek için Firebase Projelerini Anlama başlıklı makaleyi inceleyin.

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

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

Bu sayfada, JavaScript modülü biçimi kullanan Firebase JS SDK'sının modüler API'si için kurulum talimatları açıklanmaktadır.

Bu iş akışında npm kullanılır ve modüler API, kullanılmayan kodu ortadan kaldırmak (ağaç sallama) ve SDK boyutunu küçültmek için modül paketleyicilerle çalışmak üzere optimize edildiğinden modül paketleyiciler veya JavaScript çerçevesi araçları gerekir.

  1. npm kullanarak Firebase'i yükleyin:

    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 kimlik doğrulamayı Firebase hizmetleri arasında paylaşan kapsayıcı benzeri bir nesnedir. Kodunuzda bir Firebase uygulaması nesnesi başlattıktan sonra Firebase hizmetlerini ekleyip kullanmaya başlayabilirsiniz.

    Uygulamanız sunucu tarafı oluşturmaya (SSR) dayalı dinamik özellikler içeriyorsa yapılandırmanızın sunucu oluşturma ve istemci oluşturma aşamalarında korunmasını sağlamak için bazı ek adımlar atmanız gerekir. Sunucu mantığınızda, uygulamanızın oturum yönetimini hizmet işçileriyle optimize etmek için FirebaseServerApp arayüzünü uygulayın.

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

Firebase hizmetleri (Cloud Firestore, Authentication, Realtime Database, Remote Config vb.) ayrı alt paketler halinde içe aktarılabilir.

Aşağıdaki örnekte, veri listesi almak için Cloud Firestore Lite SDK'yı nasıl kullanabileceğiniz gösterilmektedir.

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 azaltmak için modül birleştirme aracı (webpack/Rollup) kullanın

Firebase Web SDK'sı, kullanılmayan kodları kaldırmak (ağaç sallama) için modül birleştiricilerle çalışacak şekilde tasarlanmıştır. Bu yaklaşımı üretim uygulamaları için kullanmanızı önemle tavsiye ederiz. Angular CLI, Next.js, Vue CLI veya Create React App gibi araçlar, npm aracılığıyla yüklenen ve kod tabanınıza aktarılan kitaplıklar için modül paketlemeyi otomatik olarak yönetir.

Daha fazla bilgi için Firebase ile modül paketleyicileri kullanma başlıklı kılavuzumuza bakın.

Web için kullanılabilen Firebase hizmetleri

Firebase'i kullanmaya hazır olduğunuza göre, web uygulamanıza aşağıdaki Firebase hizmetlerinden herhangi birini ekleyip kullanmaya başlayabilirsiniz.

Aşağıdaki komutlarda, yerel olarak yüklü Firebase kitaplıklarının npm ile nasıl içe aktarılacağı gösterilmektedir. Alternatif içe aktarma seçenekleri için mevcut kitaplıklarla ilgili dokümanlara bakın.

Sonraki adımlar

Firebase hakkında bilgi edinin: