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 stacjonarne lub w aplikacji IoT w Node.js.

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ć kilka dodatkowych czynności, aby mieć pewność, ż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 nosiło wcześniej nazwę „Vertex AI in Firebase” w pakiecie firebase/vertexai.

Dalsze kroki

Więcej informacji o Firebase: