Join us for Firebase Summit on November 10, 2021. Tune in to learn how Firebase can help you accelerate app development, release with confidence, and scale with ease. Register

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

Poniższe polecenia pokazują, jak importować biblioteki Firebase zainstalowane lokalnie z npm . Zobacz stronie Dostępne Biblioteki alternatywnych opcji przywozie.

Następne kroki

Dowiedz się więcej o Firebase: