Postępuj zgodnie z tym przewodnikiem, aby używać Firebase JavaScript SDK w swojej aplikacji internetowej lub jako klient dostępu dla użytkowników końcowych, na przykład w aplikacji komputerowej Node.js lub aplikacji IoT.
Krok 1 : Utwórz projekt Firebase i zarejestruj swoją aplikację
Zanim dodasz Firebase do swojej aplikacji JavaScript, musisz utworzyć projekt Firebase i zarejestrować swoją aplikację w tym projekcie. Gdy zarejestrujesz swoją aplikację w Firebase, otrzymasz obiekt konfiguracyjny Firebase, którego użyjesz do połączenia aplikacji z zasobami projektu Firebase.
Odwiedź stronę Projekty Firebase, aby dowiedzieć się więcej o projektach Firebase i sprawdzonych metodach dodawania aplikacji do projektów.
Jeśli nie masz jeszcze projektu JavaScript i chcesz tylko wypróbować produkt Firebase, możesz pobrać jeden z naszych przykładów szybkiego startu .
Krok 2 : Zainstaluj SDK i zainicjuj Firebase
Na tej stronie opisano instrukcje konfiguracji wersji 9 pakietu Firebase JS SDK, który korzysta z formatu modułu JavaScript .
Ten przepływ pracy używa npm i wymaga programów do pakowania modułów lub narzędzi JavaScript Framework, ponieważ zestaw SDK w wersji 9 jest zoptymalizowany do pracy z programami do pakowania modułów w celu wyeliminowania nieużywanego kodu (potrząsanie drzewem) i zmniejszenia rozmiaru zestawu SDK.
Zainstaluj Firebase za pomocą npm:
npm install firebase
Zainicjuj Firebase w swojej aplikacji i utwórz obiekt aplikacji Firebase:
import { initializeApp } from 'firebase/app'; // TODO: Replace the following with your app's Firebase project configuration const firebaseConfig = { //... }; const app = initializeApp(firebaseConfig);Aplikacja Firebase to obiekt podobny do kontenera, który przechowuje wspólną konfigurację i udostępnia uwierzytelnianie w usługach Firebase. Po zainicjowaniu obiektu aplikacji Firebase w kodzie możesz dodać usługi Firebase i zacząć z nich korzystać.
Krok 3 : Uzyskaj dostęp do Firebase w swojej aplikacji
Usługi Firebase (takie jak Cloud Firestore, uwierzytelnianie, baza danych czasu rzeczywistego, zdalna konfiguracja i inne) są dostępne do zaimportowania w ramach poszczególnych pakietów podrzędnych.
Poniższy przykład pokazuje, jak możesz użyć pakietu Cloud Firestore Lite SDK do pobrania listy danych.
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;
}
Krok 4 : Użyj pakietu modułów (webpack/Rollup) w celu zmniejszenia rozmiaru
Firebase Web SDK został zaprojektowany do współpracy z narzędziami do pakowania modułów w celu usunięcia nieużywanego kodu (potrząsanie drzewem). Zdecydowanie zalecamy korzystanie z tego podejścia w przypadku aplikacji produkcyjnych. Narzędzia takie jak Angular CLI , Next.js , Vue CLI czy Create React App automatycznie obsługują grupowanie modułów dla bibliotek zainstalowanych przez npm i zaimportowanych do Twojej bazy kodu.
Więcej informacji znajdziesz w naszym przewodniku Używanie pakietów modułów z Firebase .
Dostępne usługi Firebase dla sieci
Po skonfigurowaniu korzystania z Firebase możesz zacząć dodawać i używać dowolnej z poniższych dostępnych usług Firebase w swojej aplikacji internetowej.
Poniższe polecenia pokazują, jak importować biblioteki Firebase zainstalowane lokalnie za pomocą npm . Aby zapoznać się z alternatywnymi opcjami importu, zapoznaj się z dokumentacją dostępnych bibliotek .
Następne kroki
Dowiedz się więcej o Firebase:
Poznaj przykładowe aplikacje Firebase .
Zdobądź praktyczne doświadczenie w Firebase Web Codelab .
Poznaj otwarty kod źródłowy w GitHub .
Przejrzyj obsługiwane środowiska dla Firebase JavaScript SDK.
Przyspiesz programowanie dzięki dodatkowym bibliotekom Open Source obsługiwanym przez Firebase, takim jak AngularFire , RxFire i FirebaseUI for web .
Przygotuj się do uruchomienia aplikacji:
- Skonfiguruj alerty budżetowe dla swojego projektu w Google Cloud Console.
- Monitoruj pulpit nawigacyjny Wykorzystanie i rozliczenia w konsoli Firebase, aby uzyskać ogólny obraz wykorzystania projektu w wielu usługach Firebase.
- Przejrzyj listę kontrolną uruchamiania Firebase .
Postępuj zgodnie z tym przewodnikiem, aby używać Firebase JavaScript SDK w swojej aplikacji internetowej lub jako klient dostępu dla użytkowników końcowych, na przykład w aplikacji komputerowej Node.js lub aplikacji IoT.
Krok 1 : Utwórz projekt Firebase i zarejestruj swoją aplikację
Zanim dodasz Firebase do swojej aplikacji JavaScript, musisz utworzyć projekt Firebase i zarejestrować swoją aplikację w tym projekcie. Gdy zarejestrujesz swoją aplikację w Firebase, otrzymasz obiekt konfiguracyjny Firebase, którego użyjesz do połączenia aplikacji z zasobami projektu Firebase.
Odwiedź stronę Projekty Firebase, aby dowiedzieć się więcej o projektach Firebase i sprawdzonych metodach dodawania aplikacji do projektów.
Jeśli nie masz jeszcze projektu JavaScript i chcesz tylko wypróbować produkt Firebase, możesz pobrać jeden z naszych przykładów szybkiego startu .
Krok 2 : Zainstaluj SDK i zainicjuj Firebase
Na tej stronie opisano instrukcje konfiguracji wersji 9 pakietu Firebase JS SDK, który korzysta z formatu modułu JavaScript .
Ten przepływ pracy używa npm i wymaga programów do pakowania modułów lub narzędzi JavaScript Framework, ponieważ zestaw SDK w wersji 9 jest zoptymalizowany do pracy z programami do pakowania modułów w celu wyeliminowania nieużywanego kodu (potrząsanie drzewem) i zmniejszenia rozmiaru zestawu SDK.
Zainstaluj Firebase za pomocą npm:
npm install firebase
Zainicjuj Firebase w swojej aplikacji i utwórz obiekt aplikacji Firebase:
import { initializeApp } from 'firebase/app'; // TODO: Replace the following with your app's Firebase project configuration const firebaseConfig = { //... }; const app = initializeApp(firebaseConfig);Aplikacja Firebase to obiekt podobny do kontenera, który przechowuje wspólną konfigurację i udostępnia uwierzytelnianie w usługach Firebase. Po zainicjowaniu obiektu aplikacji Firebase w kodzie możesz dodać usługi Firebase i zacząć z nich korzystać.
Krok 3 : Uzyskaj dostęp do Firebase w swojej aplikacji
Usługi Firebase (takie jak Cloud Firestore, uwierzytelnianie, baza danych czasu rzeczywistego, zdalna konfiguracja i inne) są dostępne do zaimportowania w ramach poszczególnych pakietów podrzędnych.
Poniższy przykład pokazuje, jak możesz użyć pakietu Cloud Firestore Lite SDK do pobrania listy danych.
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;
}
Krok 4 : Użyj pakietu modułów (webpack/Rollup) w celu zmniejszenia rozmiaru
Firebase Web SDK został zaprojektowany do współpracy z narzędziami do pakowania modułów w celu usunięcia nieużywanego kodu (potrząsanie drzewem). Zdecydowanie zalecamy korzystanie z tego podejścia w przypadku aplikacji produkcyjnych. Narzędzia takie jak Angular CLI , Next.js , Vue CLI czy Create React App automatycznie obsługują grupowanie modułów dla bibliotek zainstalowanych przez npm i zaimportowanych do Twojej bazy kodu.
Więcej informacji znajdziesz w naszym przewodniku Używanie pakietów modułów z Firebase .
Dostępne usługi Firebase dla sieci
Po skonfigurowaniu korzystania z Firebase możesz zacząć dodawać i używać dowolnej z poniższych dostępnych usług Firebase w swojej aplikacji internetowej.
Poniższe polecenia pokazują, jak importować biblioteki Firebase zainstalowane lokalnie za pomocą npm . Aby zapoznać się z alternatywnymi opcjami importu, zapoznaj się z dokumentacją dostępnych bibliotek .
Następne kroki
Dowiedz się więcej o Firebase:
Poznaj przykładowe aplikacje Firebase .
Zdobądź praktyczne doświadczenie w Firebase Web Codelab .
Poznaj otwarty kod źródłowy w GitHub .
Przejrzyj obsługiwane środowiska dla Firebase JavaScript SDK.
Przyspiesz programowanie dzięki dodatkowym bibliotekom Open Source obsługiwanym przez Firebase, takim jak AngularFire , RxFire i FirebaseUI for web .
Przygotuj się do uruchomienia aplikacji:
- Skonfiguruj alerty budżetowe dla swojego projektu w Google Cloud Console.
- Monitoruj pulpit nawigacyjny Wykorzystanie i rozliczenia w konsoli Firebase, aby uzyskać ogólny obraz wykorzystania projektu w wielu usługach Firebase.
- Przejrzyj listę kontrolną uruchamiania Firebase .