Firebase'i JavaScript projenize ekleyin

Firebase JavaScript SDK'yı web uygulamanızda veya son kullanıcı erişimi için istemci olarak (ör. bir Node.js masaüstü ya da IoT uygulamasında) kullanmak istiyorsanız bu kılavuzdan yararlanabilirsiniz.

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

JavaScript uygulamanıza Firebase'i ekleyebilmek için öncelikle 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 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, Firebase JS SDK'sının JavaScript Modülü biçimini kullanan modüler API'sinin kurulum talimatları açıklanmaktadır.

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

  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 hizmetlerinde kimlik doğrulamayı paylaşan, container benzeri bir nesnedir. Kodunuzda bir Firebase App nesnesini başlattıktan sonra Firebase hizmetleri 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 geçişlerinde kalıcı olmasını sağlamak için bazı ek adımlar atmanız gerekir. Uygulamanızın hizmet çalışanlarıyla oturum yönetimini optimize etmek için sunucu mantığınızda 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 ve daha fazlası), ayrı alt paketler içinde içe aktarılabilir.

Aşağıdaki örnekte, veri listesini 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: Boyut küçültme için bir 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 bu yaklaşımı kullanmanızı önemle tavsiye ederiz. Angular KSA, 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 rehberimize bakın.

Web için kullanılabilir Firebase hizmetleri

Firebase'i kullanmaya hazır olduğunuza göre, web uygulamanızda aşağıdaki Firebase hizmetlerini 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 belgelerine bakın.

Sonraki adımlar

Firebase hakkında bilgi edinin: