Join us in person and online for Firebase Summit on October 18, 2022. Learn how Firebase can help you accelerate app development, release your app with confidence, and scale with ease. Register now

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: