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.

  1. Firebase konsolunda Proje ekle'yi tıklayın.

    • Mevcut bir Google Cloud projesine Firebase kaynağı eklemek için proje adını girin veya açılır menüden seçin.

    • Yeni bir proje oluşturmak için istediğiniz proje adını girin. İsterseniz proje adının altında görüntülenen proje kimliğini de düzenleyebilirsiniz.

  2. İstenirse Firebase şartlarını inceleyip kabul edin.

  3. Devam'ı tıklayın.

  4. (İsteğe bağlı) Projeniz için Google Analytics'yi ayarlayın. Bu, aşağıdaki Firebase ürünlerinden herhangi birini kullanırken optimum bir deneyim yaşamanızı sağlar:

    Mevcut bir Google Analytics hesabını seçin veya yeni hesap oluşturun.

    Yeni bir hesap oluşturursanız Analytics raporlama konumunuzu seçin, ardından projeniz için veri paylaşım ayarlarını ve Google Analytics şartlarını kabul edin.

  5. Proje oluştur'u (veya mevcut bir Google Cloud projesi kullanıyorsanız Firebase ekle'yi) tıklayın.

Firebase, Firebase projeniz için kaynakları otomatik olarak sağlar. İşlem tamamlandığında Firebase konsolunda Firebase projenizin genel bakış sayfasına yönlendirilirsiniz.

Bir Firebase projeniz olduktan sonra web uygulamanızı bu projeye kaydedebilirsiniz.

  1. Kurulum iş akışını başlatmak için Firebase konsolunun projeye genel bakış sayfasının ortasındaki Web simgesini () tıklayın.

    Firebase projenize daha önce bir uygulama eklediyseniz platform seçeneklerini görüntülemek için Uygulama ekle'yi tıklayın.

  2. Uygulamanızın takma adını girin.
    Bu takma ad, dahili bir kolaylık tanımlayıcısıdır ve Firebase konsolunda yalnızca size görünür.

  3. Uygulamayı kaydet'i tıklayın.

  4. Firebase SDK'sını uygulamanıza eklemek ve başlatmak için ekrandaki talimatları uygulayın.

    Firebase SDK'sını ekleme, başlatma ve kullanmayla ilgili daha ayrıntılı talimatları bu başlangıç sayfasının sonraki adımlarında da bulabilirsiniz.

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: