Firebase'i JavaScript projenize ekleyin

Firebase JavaScript SDK'yı web uygulamanızda veya son kullanıcı erişimi istemcisi olarak (ör. Node.js masaüstü ya da IoT uygulamasında) kullanmak için bu kılavuzdaki talimatları uygulayın.

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

JavaScript uygulamanıza Firebase'i ekleyebilmek için 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 elde edersiniz.

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

JavaScript projeniz yoksa ve sadece 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 modüler API'si için kurulum talimatları açıklanmaktadır.

Bu iş akışı npm kullanır ve modüler API, kullanılmayan kodları (ağaç sallama) ortadan kaldırmak ve SDK boyutunu küçültmek için modül paketleyicileriyle çalışacak şekilde optimize edildiğinden modül paketleyiciler veya JavaScript çerçevesi araçları gerektirir.

  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 ve Firebase hizmetleri genelinde kimlik doğrulamayı paylaşan, kapsayıcı benzeri bir nesnedir. Kodunuzda bir Firebase App nesnesi başlattıktan sonra Firebase hizmetleri ekleyebilir ve 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 kartları genelinde devam etmesini sağlamak için birkaç ek adım gerçekleştirmeniz gerekir. Sunucu mantığınızda FirebaseServerApp arayüzünü uygulayarak uygulamanızın Service Worker'larla oturum yönetimini optimize edin.

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

Firebase hizmetleri (ör. Cloud Firestore, Authentication, Realtime Database, Remote Config ve daha fazlası) farklı alt paketlere aktarılabilir.

Aşağıdaki örnekte, veri listesi almak için Cloud Firestore Lite SDK'sını 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: Boyutu küçültmek için modül paketleyici (web paketi/Birleştirme) kullanın

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

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

Web için mevcut Firebase hizmetleri

Firebase'i kullanmaya hazır olduğunuza göre aşağıdaki Firebase hizmetlerini web uygulamanıza eklemeye ve kullanmaya başlayabilirsiniz.

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

Sonraki adımlar

Firebase hakkında bilgi edinin: