Z tego przewodnika dowiesz się, jak używać pakietu SDK Firebase JavaScript w swojej aplikacji internetowej lub jako klient dostępu użytkownika, np. w aplikacji komputerowej Node.js lub aplikacji IoT.
Krok 1. Utwórz projekt Firebase i zarejestruj aplikację
Zanim dodasz Firebase do aplikacji JavaScript, musisz utworzyć projekt Firebase i zarejestrować w nim aplikację. Gdy zarejestrujesz aplikację w Firebase, otrzymasz obiekt konfiguracji Firebase, który posłuży do jej połączenia z zasobami projektu Firebase.
W artykule Omówienie projektów Firebase znajdziesz więcej informacji o projektach Firebase i sprawdzonych metodach dodawania aplikacji do projektów.
Jeśli nie masz jeszcze projektu JavaScript, a chcesz wypróbować usługę Firebase, możesz pobrać nasze krótkie wprowadzenie.
Krok 2. Zainstaluj pakiet SDK i zainicjuj Firebase
Na tej stronie opisujemy instrukcje konfiguracji modułowego interfejsu API pakietu SDK Firebase JS, który korzysta z formatu modułu JavaScript.
Ten przepływ pracy używa npm i wymaga usług tworzenia pakietów modułów lub narzędzi JavaScript, ponieważ modułowy interfejs API jest zoptymalizowany do współpracy z grupami pakietów modułów, co pozwala wyeliminować nieużywany kod (potrząsanie drzewa) i zmniejszyć rozmiar pakietu SDK.
Zainstaluj Firebase przy użyciu 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 przypominający kontener obiekt, który przechowuje wspólną konfigurację i współdzieli uwierzytelnianie między usługami Firebase. Po zainicjowaniu w kodzie obiektu aplikacji Firebase możesz dodać usługi Firebase i zacząć z nich korzystać.
Jeśli Twoja aplikacja zawiera funkcje dynamiczne oparte na renderowaniu po stronie serwera (SSR), musisz wykonać dodatkowe czynności, aby konfiguracja trwała niezależnie od renderowania na serwerze i przebiegu renderowania klienta. W logice serwera zaimplementuj interfejs
FirebaseServerApp
, aby zoptymalizować zarządzanie sesjami w aplikacji za pomocą mechanizmów Service Worker.
Krok 3. Uzyskaj dostęp do Firebase w swojej aplikacji
Usługi Firebase (takie jak Cloud Firestore, Uwierzytelnianie, Baza danych czasu rzeczywistego i Zdalna konfiguracja) można importować w ramach poszczególnych podpakietów.
Poniższy przykład pokazuje, jak za pomocą pakietu SDK Cloud Firestore Lite pobrać listę 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 narzędzia do tworzenia pakietów modułów (webpack/Rollup), aby zmniejszyć rozmiar.
Pakiet SDK Firebase Web SDK jest przeznaczony do współpracy z pakietami modułów i usuwa nieużywany kod (tj. drzewa). Zdecydowanie zalecamy stosowanie tego podejścia w przypadku aplikacji produkcyjnych. Narzędzia takie jak interfejs wiersza poleceń Angular, Next.js, Vue CLI czy Create React App automatycznie obsługują łączenie modułów w przypadku bibliotek zainstalowanych przy użyciu npm i zaimportowanych do bazy kodu.
Więcej informacji znajdziesz w przewodniku Korzystanie z pakietów pakietów modułów w Firebase.
Dostępne usługi Firebase w internecie
Możesz już korzystać z Firebase, więc możesz zacząć dodawać poniższe usługi Firebase i używać ich w swojej aplikacji internetowej.
Poniższe polecenia pokazują, jak zaimportować biblioteki Firebase zainstalowane lokalnie za pomocą npm
. Alternatywne opcje importu znajdziesz w dokumentacji dostępnych bibliotek.
Dalsze kroki
Więcej informacji o Firebase:
Zobacz przykładowe aplikacje Firebase.
Skorzystaj z ćwiczenia z programowania internetowego Firebase, aby zdobyć praktyczną wiedzę.
Zapoznaj się z kodem open source w GitHubie.
Sprawdź obsługiwane środowiska pakietu SDK Firebase JavaScript.
Przyspiesz programowanie dzięki dodatkowym bibliotekom open source obsługiwanym przez Firebase, takim jak AngularFire, RxFire i FirebaseUI na potrzeby witryn.
Przygotowanie do wprowadzenia aplikacji:
- W konsoli Google Cloud skonfiguruj alerty dotyczące budżetu dla swojego projektu.
- Monitoruj wykorzystanie i płatności panel w konsoli Firebase, aby mieć ogólny obraz wykorzystania projektu w wielu usługach Firebase.
- Zapoznaj się z listą kontrolną uruchamiania Firebase.