Firebase'i JavaScript projenize ekleyin

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

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

Firebase'i JavaScript uygulamanıza ekleyebilmeniz için ö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 ekleme ile 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çimini kullanan Firebase JS SDK'nın modüler API'si için kurulum talimatları açıklanmaktadır.

Bu iş akışı npm'yi kullanır ve modüler API, kullanılmayan kodu (tree-shaking) ortadan kaldırmak ve SDK boyutunu küçültmek için modül paketleyicilerle çalışacak şekilde optimize edildiğinden modül paketleyiciler veya JavaScript framework araçları gerektirir.

  1. npm kullanarak Firebase'i yükleyin:

    npm install firebase

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

    import { initializeApp } from 'firebase/app';

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

const app = initializeApp(firebaseConfig);

    Firebase uygulaması, ortak yapılandırmayı depolayan ve Firebase hizmetleri arasında kimlik doğrulamayı paylaşan kapsayıcı benzeri bir nesnedir. Kodunuzda bir Firebase App nesnesi başlattıktan sonra Firebase hizmetlerini ekleyip kullanmaya başlayabilirsiniz.

    Uygulamanızda sunucu tarafı oluşturmaya (SSR) dayalı dinamik özellikler varsa yapılandırmanızın sunucu oluşturma ve istemci oluşturma geçişlerinde kalıcı olmasını sağlamak için bazı ek adımlar uygulamanız gerekir. Sunucu mantığınızda, uygulamanızın hizmet çalışanlarıyla oturum yönetimini optimize etmek için FirebaseServerApp arayüzünü uygulayın.

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

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

Aşağıdaki örnekte, Cloud Firestore Lite SDK'yı kullanarak nasıl veri listesi alabileceğ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 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: Boyutu küçültmek için bir modül paketleyici (webpack/Rollup) kullanın

Firebase Web SDK, kullanılmayan kodları (tree-shaking) kaldırmak için modül paketleyicilerle çalışacak şekilde tasarlanmıştır. Üretim uygulamaları için bu yaklaşımı 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 işler.

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

Web için kullanılabilen Firebase hizmetleri

Firebase'i kullanmak için kurulumu tamamladığınıza göre, web uygulamanıza aşağıdaki Firebase hizmetlerinden herhangi birini ekleyip kullanmaya başlayabilirsiniz.

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

1 Firebase AI Logic, daha önce firebase/vertexai paketiyle birlikte "Vertex AI in Firebase" olarak adlandırılıyordu.

Sonraki adımlar

Firebase hakkında bilgi edinin: