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 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, 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 azaltmak 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 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 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 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 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 rehberimize bakın.

Web için kullanılabilir 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 kullanılabilir kitaplıklar belgelerine bakın.

Sonraki adımlar

Firebase hakkında bilgi edinin: