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.
Firebase projesi oluşturma
-
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.
-
-
İstenirse Firebase şartlarını inceleyip kabul edin.
-
Devam'ı tıklayın.
-
(İ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.
-
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.
Uygulamanızı kaydetme
Bir Firebase projeniz olduktan sonra web uygulamanızı bu projeye kaydedebilirsiniz.
-
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.
-
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. -
Uygulamayı kaydet'i tıklayın.
-
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.
npm kullanarak Firebase'i yükleyin:
npm install firebase
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:
Örnek Firebase uygulamalarını inceleyin.
Firebase Web Codelab ile uygulamalı deneyim edinin.
GitHub'daki açık kaynak kodunu keşfedin.
Firebase JavaScript SDK'sı için desteklenen ortamları inceleyin.
AngularFire, RxFire ve web için FirebaseUI gibi Firebase tarafından yönetilen ek açık kaynak kitaplıklarla geliştirme sürecinizi hızlandırın.
Uygulamanızı kullanıma sunmaya hazırlanın:
- Google Cloud konsolunda projeniz için bütçe uyarıları ayarlayın.
- Projenizin birden fazla Firebase hizmetindeki kullanımına dair genel bir fikir edinmek için Firebase konsolundaki Kullanım ve faturalandırma kontrol panelini izleyin.
- Firebase lansman kontrol listesini inceleyin.