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 IoT.

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

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

  1. W konsoli Firebase kliknij Dodaj projekt.

    • Aby dodać zasoby Firebase do istniejącego projektu Google Cloud, wpisz jego nazwę lub wybierz ją z menu.

    • Aby utworzyć nowy projekt, wpisz jego nazwę. Opcjonalnie możesz też edytować identyfikator projektu wyświetlany pod nazwą projektu.

  2. Jeśli pojawi się taka prośba, zapoznaj się z warunkami usługi Firebase i je zaakceptuj.

  3. Kliknij Dalej.

  4. (Opcjonalnie) Skonfiguruj w projekcie Google Analytics, aby optymalnie korzystać z tych usług Firebase:

    Wybierz istniejące konto Google Analytics lub utwórz nowe konto.

    Jeśli tworzysz nowe konto, wybierz Analyticslokalizację raportowania, a następnie zaakceptuj ustawienia udostępniania danych i zasady Google Analytics dla projektu.

  5. Kliknij Utwórz projekt (lub Dodaj Firebase, jeśli używasz istniejącego projektu Google Cloud).

Firebase automatycznie udostępnia zasoby dla Twojego projektu Firebase. Po zakończeniu procesu wyświetli się strona podglądu projektu Firebase w konsoli Firebase.

Gdy masz już projekt Firebase, możesz zarejestrować w nim aplikację internetową.

  1. W centrum strony „Opis” projektu w konsoli Firebase kliknij ikonę Sieć (), aby uruchomić proces konfiguracji.

    Jeśli aplikacja została już dodana do projektu Firebase, kliknij Dodaj aplikację, aby wyświetlić opcje platformy.

  2. Wpisz pseudonim aplikacji.
    Ten przydomek to wewnętrzny, wygodny identyfikator, który jest widoczny tylko dla Ciebie w konsoli Firebase.

  3. Kliknij Zarejestruj aplikację.

  4. Postępuj zgodnie z instrukcjami wyświetlanymi na ekranie, aby dodać pakiet SDK Firebase do aplikacji i go zainicjować.

    W kolejnych krokach na tej stronie znajdziesz szczegółowe instrukcje dodawania, inicjowania i używania pakietu SDK Firebase.

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ć spójność konfiguracji w procesie 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 Firebase Web SDK 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: