Google 致力于为黑人社区推动种族平等。查看具体举措

Dodaj Firebase do swojego projektu JavaScript

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: Tworzenie projektu Firebase i zarejestrować 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 aplikacji z zasobami projektu Firebase.

Wizyta Zrozum Firebase Projekty aby dowiedzieć się więcej o projektach Firebase i najlepszych praktyk do dodawania aplikacji do projektów.

Jeżeli nie masz jeszcze projekt JavaScript i po prostu chcą wypróbować Firebase produkt można pobrać jeden z naszych próbek QuickStart .

Etap 2: Instalacja SDK zainicjować Firebase

Ta strona opisuje instrukcję konfiguracji dla wersji 9 Firebase JS SDK, który wykorzystuje moduł JavaScript format.

Ten przepływ pracy i wymaga zastosowania modułu NPM bundlers lub JavaScript ramową oprzyrządowania ponieważ SDK v9 jest zoptymalizowany do pracy z bundlers modułu wyeliminować niewykorzystany kod (tree drżenie) i zmniejsz rozmiar 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: Dostęp 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;
}

Etap 4: Zastosowanie modułu Bundler (WebPack / zbiorczy) do rozdrabniania

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 Kątowymi CLI , Next.js , Vue CLI lub Tworzenie React App automatycznie obsługiwać moduł grupowania dla bibliotek zainstalowanych przez KMP i importowanych w swoim kodzie.

Zobacz nasz przewodnik Korzystanie bundlers moduł Firebase aby uzyskać więcej informacji.

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.

Następne kroki

Dowiedz się więcej o Firebase: