Dodawanie Firebase do projektu JavaScript

Z tego przewodnika dowiesz się, jak używać pakietu Firebase JavaScript SDK w aplikacji internetowej lub jako klienta do uzyskiwania dostępu przez użytkowników końcowych, np. w aplikacji na komputery lub IoT w Node.js.

Krok 1. Utwórz projekt w Firebase i zarejestruj aplikację

Zanim dodasz Firebase do aplikacji JavaScript, musisz utworzyć projekt w Firebase i zarejestrować w nim aplikację. Gdy zarejestrujesz aplikację w Firebase, otrzymasz obiekt konfiguracji Firebase, którego użyjesz do połączenia aplikacji z zasobami projektu w Firebase.

Więcej informacji o projektach Firebase i sprawdzonych metodach dodawania aplikacji do projektów znajdziesz w artykule Informacje o projektach Firebase.

Jeśli nie masz jeszcze projektu JavaScript i chcesz tylko wypróbować usługę Firebase, możesz pobrać jeden z naszych przykładów szybkiego startu.

Krok 2. Zainstaluj pakiet SDK i zainicjuj Firebase

Ta strona zawiera instrukcje konfiguracji Modular API pakietu Firebase JS SDK, który używa formatu modułu JavaScript.

Ten przepływ pracy korzysta z npm i wymaga narzędzi do tworzenia pakietów modułów lub platform JavaScript, ponieważ Modular API jest zoptymalizowany do współpracy z narzędziami do tworzenia pakietów modułów w celu wyeliminowania nieużywanego kodu (tree-shaking) i zmniejszenia rozmiaru pakietu SDK.

  1. Zainstaluj Firebase za pomocą npm:

    npm install firebase

  2. Zainicjuj Firebase w aplikacji i utwórz obiekt Firebase App:

    import { initializeApp } from 'firebase/app';

// TODO: Replace the following with your app's Firebase configuration
const firebaseConfig = {
  //...
};

const app = initializeApp(firebaseConfig);

    Firebase App to obiekt podobny do kontenera, który przechowuje wspólną konfigurację i udostępnia uwierzytelnianie w usługach Firebase. Po zainicjowaniu obiektu Firebase App w kodzie 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 mieć pewność, że konfiguracja będzie się utrzymywać podczas renderowania po stronie serwera i po stronie klienta. W logice serwera zaimplementuj FirebaseServerApp interfejs, aby zoptymalizować zarządzanie sesjami aplikacji za pomocą service workerów.

Krok 3. Uzyskaj dostęp do Firebase w aplikacji

Usługi Firebase (takie jak Cloud Firestore, Authentication, Realtime Database, Remote Config, i inne) można importować w ramach poszczególnych podpakietów.

Poniższy przykład pokazuje, jak za pomocą pakietu Cloud Firestore Lite SDK można 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 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 Firebase Web SDK jest przeznaczony do współpracy z narzędziami do tworzenia pakietów modułów w celu usunięcia nieużywanego kodu (tree-shaking). Zdecydowanie zalecamy stosowanie tego podejścia w przypadku aplikacji produkcyjnych. Narzędzia takie jak Angular CLI, Next.js, Vue CLI, czy Create React App automatycznie obsługują tworzenie pakietów modułów dla bibliotek zainstalowanych za pomocą npm i zaimportowanych do bazy kodu.

Więcej informacji znajdziesz w naszym przewodniku Używanie narzędzi do tworzenia pakietów modułów z Firebase.

Dostępne usługi Firebase dla aplikacji internetowych

Teraz, gdy masz już skonfigurowaną usługę Firebase, możesz zacząć dodawać i używać w swojej aplikacji internetowej dowolnej z tych usług Firebase.

Te polecenia pokazują, jak importować biblioteki Firebase zainstalowane lokalnie za pomocą npm. Alternatywne opcje importowania znajdziesz w dokumentacji dostępnych bibliotek.

1 Firebase AI Logic była wcześniej nazywana "Vertex AI in Firebase" i używała pakietu firebase/vertexai.

2 Firebase SQL Connect była wcześniej nazywana "Firebase Data Connect".

Dalsze kroki

Więcej informacji o Firebase: