Dodawanie Firebase do projektu JavaScript

Postępuj zgodnie z tym przewodnikiem, aby używać pakietu SDK Firebase JavaScript w aplikacji internetowej lub jako klienta do udostępniania dostępu użytkownikowi końcowemu, np. w aplikacji na komputer z Node.js lub w 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órego użyjesz do połączenia aplikacji z zasobami projektu Firebase.

Więcej informacji o projektach Firebase i sprawdzonym sposobie dodawania aplikacji do projektów znajdziesz w artykule Projekty Firebase – informacje ogólne.

Jeśli nie masz jeszcze projektu JavaScript i chcesz wypróbować produkt Firebase, możesz pobrać jeden z naszych sampli szybkiego startu.

Krok 2. Zainstaluj pakiet SDK i inicjuj Firebase

Na tej stronie znajdziesz instrukcje konfigurowania modułowego interfejsu API pakietu Firebase JS SDK, który korzysta z formatu modułu JavaScript.

Ten proces używa npm i wymaga korzystania z pakietów modułów lub narzędzi do obsługi frameworków JavaScript, ponieważ interfejs API w wersji modułowej jest zoptymalizowany pod kątem współpracy z pakietami modułów, aby eliminować nieużywany kod (tree-shaking) i zmniejszać rozmiar pakietu SDK.

.

  1. Zainstaluj Firebase za pomocą npm:

    npm install firebase

  2. Inicjuj Firebase w aplikacji i utwórz obiekt Firebase App:

    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 obiekt podobny do kontenera, który przechowuje wspólną konfigurację i udostępnia uwierzytelnianie w usługach Firebase. Po zainicjowaniu w kodzie obiektu Firebase App możesz dodawać usługi Firebase i z nich korzystać.

    Jeśli Twoja aplikacja zawiera funkcje dynamiczne oparte na renderowaniu po stronie serwera (SSR), musisz wykonać kilka dodatkowych czynności, aby zapewnić zachowanie konfiguracji w trakcie renderowania po stronie serwera i klienta. W logice serwera zaimplementuj interfejs FirebaseServerApp, aby zoptymalizować zarządzanie sesjami aplikacji za pomocą usług działających w tle.

Krok 3. Uzyskaj dostęp do Firebase w aplikacji

Usługi Firebase (np. Cloud Firestore, Authentication, Realtime Database, Remote Config i inne) można importować w ramach poszczególnych pakietów podrzędnych.

Przykład poniżej pokazuje, jak za pomocą pakietu SDK Lite Cloud Firestore można 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. Aby zmniejszyć rozmiar, użyj narzędzia do tworzenia pakietów modułów (webpack lub Rollup).

Pakiet SDK Firebase Web został zaprojektowany tak, aby współpracować z modułowymi pakietami programów i usuwać nieużywany kod (czynność zwana „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ą grupowanie modułów w przypadku bibliotek zainstalowanych za pomocą npm i zaimportowanych do kodu źródłowego.

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

Dostępne usługi Firebase dla aplikacji internetowych

Gdy już skonfigurujesz Firebase, możesz zacząć dodawać do swojej aplikacji internetowej dowolne z tych usług Firebase:

Poniższe polecenia pokazują, jak zaimportować biblioteki Firebase zainstalowane lokalnie za pomocą npm. Alternatywnych opcji importowania możesz szukać w dokumentacji dostępnych bibliotek.

Dalsze kroki

Więcej informacji o Firebase: