Dodawanie Firebase do projektu JavaScript

Z tego przewodnika dowiesz się, jak używać pakietu SDK Firebase JavaScript w swojej aplikacji internetowej lub jako klient dostępu użytkowników, np. w aplikacji komputerowej Node.js lub aplikacji IoT.

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

Zanim dodasz Firebase do swojej aplikacji JavaScript, musisz utworzyć projektu Firebase i zarejestruj w nim swoją aplikację. Gdy zarejestrujesz aplikacji za pomocą Firebase, otrzymasz obiekt konfiguracji Firebase, połączyć aplikację z zasobami projektu Firebase.

Więcej informacji znajdziesz w artykule Omówienie projektów Firebase. o projektach Firebase i sprawdzonych metodach dodawania aplikacji do projektów.

Jeśli nie masz jeszcze projektu JavaScript i chcesz wypróbować usługi Firebase, możesz pobrać jedne z naszych krótkich przykładów.

Krok 2. Zainstaluj pakiet SDK i zainicjuj Firebase

Na tej stronie opisujemy instrukcje konfiguracji modułowego interfejsu API Firebase JS SDK, który korzysta z modułu JavaScript .

Ten przepływ pracy używa npm i wymaga pakietów modułów lub platformy JavaScript ponieważ modułowy interfejs API jest zoptymalizowany pod kątem pakiety modułów, aby wyeliminować nieużywany kod (potrząśnięcie drzewa) i zmniejszyć rozmiar pakietu SDK.

  1. Zainstaluj Firebase przy użyciu npm:

    npm install firebase

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

    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 podobny do kontenera obiekt, który przechowuje wspólną konfigurację i współdzieli uwierzytelnianie między usługami Firebase. Po zainicjowaniu Obiekt aplikacji Firebase w kodzie, możesz dodać Firebase i zacząć z niego korzystać usług Google.

    Jeśli aplikacja zawiera funkcje dynamiczne oparte na renderowaniu po stronie serwera (SSR): musisz wykonać kilka dodatkowych czynności, aby upewnić się, będzie się utrzymywać w przypadku kart renderowania serwera i klienta. W Twoją logikę serwera, zaimplementuj FirebaseServerApp zoptymalizuj zarządzanie sesją za pomocą mechanizmów Service Worker.

Krok 3. Uzyskaj dostęp do Firebase w swojej aplikacji

Usługi Firebase (takie jak Cloud Firestore, Uwierzytelnianie, Baza danych czasu rzeczywistego, Zdalna konfiguracja i inne funkcje) można importować w ramach podpakietów.

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 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. Użyj narzędzia do tworzenia pakietów modułów (webpack/Rollup), aby zmniejszyć rozmiar.

Pakiet SDK Firebase został zaprojektowany do współpracy z modułami tworzącymi pakiet modułów, aby usuwać wszelkie nieużywany kod (potrząsanie drzewem). Zdecydowanie zalecamy takie podejście aplikacji w wersji produkcyjnej. Narzędzia, takie jak interfejs wiersza poleceń Angular, Next.js, Vue CLI lub Create Reaguj aplikację automatycznie grupowanie modułów obsługi w przypadku bibliotek zainstalowanych przy użyciu npm i zaimportowanych do w bazie kodu.

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

Dostępne usługi Firebase w internecie

Możesz już używać Firebase, więc możesz zacząć dodawać obserwując usługi Firebase dostępne w Twojej aplikacji internetowej.

Poniższe polecenia pokazują, jak zaimportować biblioteki Firebase zainstalowane lokalnie dzięki npm. Alternatywne opcje importowania znajdziesz w dostępnej dokumentacji bibliotek.

Dalsze kroki

Więcej informacji o Firebase: