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.
npm kullanarak Firebase'i yükleyin:
npm install firebase
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:
Örnek Firebase uygulamalarını keşfedin.
Firebase Web Codelab ile uygulamalı deneyim elde edin.
GitHub'daki açık kaynak kodunu keşfedin.
Firebase JavaScript SDK için desteklenen ortamları inceleyin.
AngularFire, RxFire ve FirebaseUI for web gibi Firebase tarafından yönetilen ek açık kaynak kitaplıklarla geliştirmenizi hızlandırın.
Uygulamanızı kullanıma sunmaya hazırlanın:
- Google Cloud Console'da projeniz için bütçe uyarıları oluşturun.
- Projenizin birden çok Firebase hizmetindeki kullanımına ilişkin genel bir fikir edinmek için Firebase konsolundaki Kullanım ve faturalandırma kontrol panelini izleyin.
- Firebase lansmanları için yapılacaklar listesini inceleyin.