Dodaj Firebase do projektu JavaScript

Z tego przewodnika dowiesz się, jak używać pakietu SDK Firebase JavaScript w swojej aplikacji internetowej lub jako klienta dostępu dla użytkowników, 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ę. Po zarejestrowaniu aplikacji w Firebase otrzymasz obiekt konfiguracji Firebase, którego możesz używać do połączenia aplikacji z zasobami projektu Firebase.

W sekcji Omówienie projektów Firebase znajdziesz więcej informacji o projektach Firebase oraz sprawdzonych metodach dodawania aplikacji do projektów.

Jeśli nie masz jeszcze projektu JavaScript, a chcesz tylko wypróbować usługę Firebase, możesz pobrać krótkie wprowadzenie.

Krok 2. Zainstaluj pakiet SDK i zainicjuj Firebase

Ta strona zawiera instrukcje konfiguracji modułowego interfejsu API pakietu Firebase JS SDK, który korzysta z formatu modułu JavaScript.

Ten przepływ pracy korzysta z npm i wymaga narzędzi do tworzenia pakietów modułów lub narzędzi platformy JavaScript, ponieważ modułowy interfejs API jest zoptymalizowany pod kątem współpracy z pakietami modułów, co pozwala wyeliminować nieużywany kod (trzęsienie drzew) i zmniejszyć rozmiar pakietu SDK.

  1. Zainstaluj Firebase przy użyciu npm:

    npm install firebase
  2. 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 przypominający kontener, który zawiera wspólną konfigurację i udostępnia uwierzytelnianie w usługach Firebase. Po zainicjowaniu w kodzie obiektu aplikacji Firebase możesz dodać do niego usługi Firebase i zacząć z niego korzystać.

    Jeśli Twoja aplikacja zawiera funkcje dynamiczne oparte na renderowaniu po stronie serwera (SSR), musisz wykonać kilka dodatkowych czynności, aby mieć pewność, że konfiguracja będzie trwała podczas renderowania na serwerze i renderowania klienta. W logice serwera zaimplementuj interfejs FirebaseServerApp, aby zoptymalizować zarządzanie sesjami aplikacji za pomocą mechanizmów Service Worker.

Krok 3. Otwórz Firebase w swojej aplikacji

Usługi Firebase (np. Cloud Firestore, Uwierzytelnianie, Baza danych czasu rzeczywistego, Zdalna konfiguracja i inne) można importować w ramach poszczególnych podpakietów.

Przykład poniżej 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 (pakietu internetowego/podsumowania), aby zmniejszyć rozmiar

Pakiet Firebase Web SDK działa z pakietami modułów i pozwala usunąć nieużywany kod (trzęsienie drzew). Zdecydowanie zalecamy stosowanie tego podejścia w aplikacjach produkcyjnych. Narzędzia takie jak interfejs wiersza poleceń Angular, Next.js, Vue CLI i Utwórz aplikację React 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.

Usługi Firebase dostępne w przypadku aplikacji internetowych

Gdy już wiesz, jak zacząć korzystać z Firebase, możesz zacząć dodawać w swojej aplikacji internetowej te dostępne usługi Firebase i ich używać.

Podane niżej polecenia pokazują, jak importować zainstalowane lokalnie biblioteki Firebase za pomocą narzędzia npm. Informacje o alternatywnych opcjach importowania znajdziesz w dokumentacji dostępnych bibliotek.

Dalsze kroki

Więcej informacji o Firebase: