Dodawanie Firebase do projektu JavaScript

Skorzystaj z tego przewodnika, aby używać pakietu SDK Firebase JavaScript w aplikacji internetowej lub jako klienta dostępu dla użytkowników, np. w aplikacji na komputery z Node.js lub w aplikacji IoT.

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

Zanim dodasz Firebase do aplikacji w JavaScript, musisz utworzyć projekt 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 Firebase.

Więcej informacji o projektach Firebase i sprawdzonych metodach dodawania do nich aplikacji znajdziesz w artykule Projekty Firebase.

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

Krok 2. Zainstaluj pakiet SDK i zainicjuj Firebase

Na tej stronie znajdziesz 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 platformy JavaScript, ponieważ modułowy interfejs API jest zoptymalizowany pod kątem współpracy z usługami tworzącymi pakiety modułów, co pozwala wyeliminować nieużywany kod (tree-shaking) i zmniejszyć rozmiar 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);

    Aplikacja Firebase to obiekt podobny do kontenera, który przechowuje wspólną konfigurację i udostępnia uwierzytelnianie w usługach 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 zapewnić, że konfiguracja będzie zachowywana podczas renderowania po stronie serwera i renderowania po stronie klienta. W logice serwera zaimplementuj interfejs FirebaseServerApp, aby zoptymalizować zarządzanie sesjami w 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.

Przykład poniżej pokazuje, jak za pomocą pakietu Cloud Firestore Lite SDK 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 łączenia modułów (webpack/Rollup), aby zmniejszyć rozmiar

Pakiet Firebase Web SDK został zaprojektowany do współpracy z programami do łączenia modułów, aby usuwać nieużywany kod (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ą łączenie modułów w przypadku bibliotek zainstalowanych za pomocą npm i zaimportowanych do kodu.

Więcej informacji znajdziesz w naszym przewodniku Korzystanie z pakietów modułów w Firebase.

Dostępne usługi Firebase dla aplikacji internetowych

Po skonfigurowaniu Firebase możesz zacząć dodawać i używać w aplikacji internetowej dowolnych z tych dostępnych usług Firebase:

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

1 Firebase AI Logic wcześniej nazywał się „Vertex AI in Firebase” w pakiecie firebase/vertexai.

Dalsze kroki

Więcej informacji o Firebase: