Dodaj Firebase do projektu JavaScript

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.

  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 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: