Dodawanie Firebase do projektu JavaScript

Postępuj zgodnie z tym przewodnikiem, aby używać pakietu SDK Firebase JavaScript w aplikacji internetowej lub jako klienta dostępu użytkownika, na przykład w aplikacji Node.js na komputer lub IoT.

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 w Firebase i sprawdzonych metodach dodawania do nich aplikacji znajdziesz w artykule Informacje o projektach w 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 z krótkim wprowadzeniem.

Krok 2. Zainstaluj pakiet SDK i zainicjuj Firebase

Na tej stronie znajdziesz instrukcje konfiguracji interfejsu Modular API dla pakietu SDK Firebase JavaScript, który używa formatu modułu JavaScript.

Ten przepływ pracy korzysta z npm i wymaga pakietów modułów lub narzędzi platformy JavaScript, ponieważ interfejs Modular API jest zoptymalizowany pod kątem współpracy z pakietami modułów, co pozwala eliminować nieużywany kod (usuwanie nieużywanego kodu) i zmniejszać rozmiar pakietu SDK.

  1. Zainstaluj Firebase za pomocą npm:

    npm install firebase

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

    import { initializeApp } from 'firebase/app';

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

const app = initializeApp(firebaseConfig);

    Aplikacja w Firebase to obiekt przypominający kontener, który przechowuje wspólną konfigurację i udostępnia uwierzytelnianie w usługach Firebase. Po zainicjowaniu obiektu aplikacji w Firebase w kodzie możesz dodać usługi Firebase i zacząć z nich korzystać.

    Jeśli aplikacja zawiera funkcje dynamiczne oparte na renderowaniu po stronie serwera (SSR), musisz wykonać kilka dodatkowych czynności, aby konfiguracja była zachowywana podczas renderowania po stronie serwera i klienta. W logice serwera zaimplementuj interfejs FirebaseServerApp, aby zoptymalizować zarządzanie sesjami w aplikacji za pomocą skryptów service worker.

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 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 &>#39;firebase/service';

// TODO: Replace the following with your app&#39;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. Aby zmniejszyć rozmiar, użyj modułu pakującego (webpack/Rollup)

Pakiet SDK Firebase JavaScript został zaprojektowany do współpracy z programami do tworzenia pakietów modułów, aby usuwać nieużywany kod (eliminacja martwego kodu). Zdecydowanie zalecamy korzystanie z tego podejścia w przypadku aplikacji produkcyjnych. Narzędzia takie jak Angular CLI, Next.js, Vue CLI czy Create React App automatycznie obsługują grupowanie modułów w przypadku bibliotek zainstalowanych za pomocą npm i zaimportowanych do bazy kodu.

Więcej informacji znajdziesz w naszym przewodniku Używanie bundlerów modułów z Firebase.

Dostępne usługi Firebase w aplikacjach internetowych

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

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

1 Firebase AI Logic wcześniej nosił nazwę „Vertex AI in Firebase” i był powiązany z pakietem firebase/vertexai.

2 Firebase SQL Connect wcześniej nosił nazwę „Firebase Data Connect”.

Dalsze kroki

Więcej informacji o Firebase: