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:

• Przeglądaj przykładowe aplikacje Firebase .

• Zdobądź praktyczne doświadczenie z Firebase internetowej Codelab .

• Poznaj otwarty kod źródłowy w GitHub .

• Zapoznaj się z obsługiwanymi środowiskami dla Firebase JavaScript SDK.

• Przyspieszyć swój rozwój z dodatkowymi Firebase utrzymanych bibliotek open source, takich jak AngularFire , RxFire i FirebaseUI dla sieci web .

• Przygotuj się do uruchomienia aplikacji:

  • Skonfigurować alerty budżetu dla projektu w konsoli Google Cloud.
  • Monitorować Wykorzystanie i deski rozdzielczej rozliczeniowe w konsoli Firebase aby uzyskać ogólny obraz zużycia Twojego projektu w wielu usług Firebase.
  • Przeglądu launch kontrolną Firebase .