Dodawanie Firebase do projektu JavaScript

Z tego przewodnika dowiesz się, jak używać pak0/} JavaScript SDK w aplikacji internetowej lub jako klienta dostępu dla użytkowników końcowych, np. w aplikacji na komputery lub IoT w Node.js.Firebase

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 Firebase i sprawdzonych sposobach dodawania aplikacji do projektów 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ładów szybkiego startu.

Krok 2. Zainstaluj pakiet SDK i zainicjuj Firebase

Na tej stronie znajdziesz instrukcje konfiguracji Modular API dla Firebase JavaScript pakietu SDK, który używa 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ż Modular API jest zoptymalizowany do współpracy z narzędziami do tworzenia pakietów modułów w celu wyeliminowania nieużywanego kodu (usuwanie nieużywanego kodu) i zmniejszenia rozmiaru 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);

    Firebase App to obiekt podobny do kontenera, który przechowuje wspólną konfigurację i udostępnia uwierzytelnianie w usługach Firebase. Po zainicjowaniu obiektu Firebase App w kodzie 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 mieć pewność, że konfiguracja będzie się utrzymywać podczas renderowania po stronie serwera i po stronie klienta. W logice serwera zaimplementuj FirebaseServerApp interfejs, aby zoptymalizować zarządzanie sesjami 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) są dostępne do importowania w poszczególnych podpakietach.

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 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 JavaScript jest zaprojektowany do współpracy z narzędziami do tworzenia pakietów modułów w celu usunięcia nieużywanego kodu (tree-shaking). Zdecydowanie zalecamy stosowanie tego podejścia w przypadku aplikacji produkcyjnych. Narzędzia takie jak Angular CLI, Next.js, Vue CLI lub Create React App automatycznie obsługują tworzenie pakietów modułów dla bibliotek zainstalowanych za pomocą npm i zaimportowanych do bazy kodu.

Więcej informacji znajdziesz w naszym przewodniku Używanie narzędzi do tworzenia pakietów modułów z Firebase.

Dostępne usługi Firebase dla aplikacji internetowych

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

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

1 Firebase AI Logic nazywała się wcześniej "Vertex AI in Firebase" i używała pakietu firebase/vertexai.

2 Firebase SQL Connect nazywała się wcześniej "Firebase Data Connect".

Dalsze kroki

Dowiedz się więcej o Firebase: