Dodaj Firebase do swojego projektu JavaScript

Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.

Postępuj zgodnie z tym przewodnikiem, aby użyć pakietu Firebase JavaScript SDK w swojej aplikacji internetowej lub jako klienta w celu uzyskania dostępu użytkownika końcowego, na przykład w aplikacji Node.js na komputerze lub aplikacji IoT.

Krok 1 : utwórz projekt Firebase i zarejestruj swoją aplikację

Zanim dodasz Firebase do swojej aplikacji JavaScript, musisz utworzyć projekt Firebase i zarejestrować swoją aplikację w tym projekcie. Po zarejestrowaniu aplikacji w Firebase otrzymasz obiekt konfiguracji Firebase, którego będziesz używać do łączenia swojej aplikacji z zasobami projektu Firebase.

Odwiedź stronę Omówienie projektów Firebase , aby dowiedzieć się więcej o projektach Firebase i sprawdzonych metodach dodawania aplikacji do projektów.

Jeśli nie masz jeszcze projektu JavaScript, a chcesz tylko wypróbować produkt Firebase, możesz pobrać jeden z naszych krótkich przykładów .

Krok 2 : Zainstaluj pakiet SDK i zainicjuj Firebase

Na tej stronie opisano instrukcje konfiguracji dla wersji 9 pakietu Firebase JS SDK, która korzysta z formatu modułu JavaScript .

Ten przepływ pracy używa npm i wymaga pakietów modułów lub narzędzi frameworka JavaScript, ponieważ pakiet SDK v9 jest zoptymalizowany do pracy z pakietami modułów w celu wyeliminowania nieużywanego kodu (drżenie drzewa) i zmniejszenia rozmiaru zestawu SDK.

  1. Zainstaluj Firebase przy użyciu npm:

    npm install firebase

  2. Zainicjuj Firebase w swojej 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 obiektu Firebase App w kodzie możesz dodać usługi Firebase i zacząć z nich korzystać.

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) można importować w ramach poszczególnych podpakietów.

Poniższy przykład pokazuje, jak możesz użyć pakietu SDK Cloud Firestore Lite do pobrania listy 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 pakietu modułów (webpack/rollup) w celu zmniejszenia rozmiaru

Pakiet Firebase Web SDK został zaprojektowany do współpracy z pakietami modułów w celu usunięcia nieużywanego kodu (drżenie drzewa). Zdecydowanie zalecamy korzystanie z tego podejścia w przypadku aplikacji produkcyjnych. Narzędzia takie jak Angular CLI , Next.js , Vue CLI lub Create React App automatycznie obsługują łączenie modułów dla bibliotek zainstalowanych przez npm i zaimportowanych do bazy kodu.

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

Dostępne usługi Firebase dla internetu

Teraz, gdy masz już skonfigurowane korzystanie z Firebase, możesz zacząć dodawać i korzystać z dowolnej z następujących dostępnych usług Firebase w swojej aplikacji internetowej.

Poniższe polecenia pokazują, jak importować biblioteki Firebase zainstalowane lokalnie za pomocą npm . Aby zapoznać się z alternatywnymi opcjami importu, zapoznaj się z dokumentacją dostępnych bibliotek .

Następne kroki

Dowiedz się więcej o Firebase: