Google is committed to advancing racial equity for Black communities. See how.
Ta strona została przetłumaczona przez Cloud Translation API.
Switch to English

Dodaj Firebase do swojego projektu JavaScript

Postępuj zgodnie z tym przewodnikiem, aby używać pakietu SDK Firebase JavaScript w swojej aplikacji internetowej lub jako klient do uzyskiwania dostępu przez użytkowników końcowych, na przykład w aplikacji komputerowej Node.js. lub aplikacji IoT.

Wymagania wstępne

Jeśli nie masz jeszcze projektu JavaScript i chcesz po prostu wypróbować produkt Firebase, możesz pobrać jeden z naszych przykładów szybkiego startu .

Krok 1 : utwórz projekt Firebase

Zanim dodasz Firebase do swojej aplikacji JavaScript, musisz utworzyć projekt Firebase, aby połączyć się z aplikacją.

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

Krok 2 : zarejestruj swoją aplikację w Firebase

Po utworzeniu projektu Firebase możesz dodać do niego swoją aplikację internetową.

Odwiedź artykuł Omówienie projektów Firebase, aby dowiedzieć się więcej o sprawdzonych metodach i kwestiach związanych z dodawaniem aplikacji do projektu Firebase.

  1. Na środku strony przeglądu projektu konsoli kliknij ikonę sieci Web ( ), aby uruchomić przepływ pracy konfiguracji.

    Jeśli dodałeś już aplikację do projektu Firebase, kliknij Dodaj aplikację, aby wyświetlić opcje platformy.

  2. Wpisz pseudonim aplikacji.
    Ten pseudonim jest wewnętrznym, wygodnym identyfikatorem i jest widoczny tylko dla Ciebie w konsoli Firebase.

  3. (Opcjonalnie) Skonfiguruj Hosting Firebase dla swojej aplikacji internetowej.

    • Hosting Firebase możesz skonfigurować teraz lub później . W dowolnym momencie możesz również połączyć swoją aplikację internetową Firebase z witryną hostingową w ustawieniach projektu .

    • Jeśli zdecydujesz się skonfigurować Hosting teraz, wybierz witrynę z listy rozwijanej, aby połączyć się z aplikacją internetową Firebase.

      • Ta lista wyświetla domyślną witrynę hostującą projektu i wszelkie inne witryny skonfigurowane w projekcie.

      • Żadna witryna, która została już połączona z aplikacją internetową Firebase, jest niedostępna do dodatkowego połączenia. Każda witryna hostingowa może być połączona tylko z jedną aplikacją internetową Firebase.

  4. Kliknij Zarejestruj aplikację .

Krok 3 : Dodaj pakiety SDK Firebase i zainicjuj Firebase

Firebase udostępnia biblioteki JavaScript dla większości produktów Firebase, w tym Remote Config, FCM i nie tylko. Możesz dodać dowolną z dostępnych bibliotek do swojej aplikacji.

Sposób dodawania pakietów SDK Firebase do aplikacji internetowej zależy od tego, czy zdecydujesz się korzystać z Hostingu Firebase w swojej aplikacji, jakich narzędzi używasz w swojej aplikacji (np. Pakietu modułów), czy też konfigurujesz Node.js aplikacja. Aby uzyskać więcej informacji na temat wyboru między tymi alternatywami, zobacz Sposoby dodawania pakietów SDK sieci Web do aplikacji .

Korzystanie z pakietów modułów

Możesz skonfigurować częściowe importowanie pakietu Firebase JavaScript SDK i ładować tylko te produkty Firebase, których potrzebujesz. Jeśli używasz pakietu (takiego jak Browserify lub webpack), możesz import poszczególne produkty Firebase, kiedy ich potrzebujesz.

  1. Zainstaluj pakiet Firebase JavaScript SDK:

    1. Jeśli nie masz jeszcze pliku package.json , utwórz go, uruchamiając następujące polecenie z katalogu głównego projektu JavaScript:

      npm init

    2. Zainstaluj pakiet firebase npm i zapisz go w pliku package.json , uruchamiając:

      npm install --save firebase

  2. Aby uwzględnić tylko określone produkty Firebase (takie jak Uwierzytelnianie i Cloud Firestore), import moduły Firebase:

    // Firebase App (the core Firebase SDK) is always required and must be listed first
import firebase from "firebase/app";
// If you are using v7 or any earlier version of the JS SDK, you should import firebase using namespace import
// import * as firebase from "firebase/app"

// If you enabled Analytics in your project, add the Firebase SDK for Analytics
import "firebase/analytics";

// Add the Firebase products that you want to use
import "firebase/auth";
import "firebase/firestore";

  3. Zainicjuj Firebase w swojej aplikacji:

    // TODO: Replace the following with your app's Firebase project configuration
// For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
const firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

Z CDN

Możesz skonfigurować częściowe importowanie pakietu Firebase JavaScript SDK i ładować tylko te produkty Firebase, których potrzebujesz. Firebase przechowuje każdą bibliotekę pakietu Firebase JavaScript SDK w naszej globalnej sieci CDN (sieci dostarczania treści).

  1. Aby uwzględnić tylko określone produkty Firebase (na przykład Uwierzytelnianie i Cloud Firestore), dodaj następujące skrypty na dole tagu <body> , ale przed użyciem jakichkolwiek usług Firebase:

    <body>
  <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->

  <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
  <script src="https://www.gstatic.com/firebasejs/8.2.10/firebase-app.js"></script>

  <!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
  <script src="https://www.gstatic.com/firebasejs/8.2.10/firebase-analytics.js"></script>

  <!-- Add Firebase products that you want to use -->
  <script src="https://www.gstatic.com/firebasejs/8.2.10/firebase-auth.js"></script>
  <script src="https://www.gstatic.com/firebasejs/8.2.10/firebase-firestore.js"></script>
</body>


  2. Zainicjuj Firebase w swojej aplikacji:

    <body>
  <!-- Previously loaded Firebase SDKs -->

  <script>
    // TODO: Replace the following with your app's Firebase project configuration
    // For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
    var firebaseConfig = {
      // ...
    };

    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
  </script>
</body>

Z adresów URL hostingu

Korzystając z Hostingu Firebase, możesz skonfigurować aplikację tak, aby dynamicznie ładowała biblioteki Firebase JavaScript SDK z zarezerwowanych adresów URL. Dowiedz się więcej o dodawaniu pakietów SDK za pośrednictwem zarezerwowanych adresów URL hostingu .

W przypadku tej opcji konfiguracji po wdrożeniu w Firebase aplikacja automatycznie pobiera obiekt konfiguracyjny Firebase z projektu Firebase, w którym został wdrożony. Możesz wdrożyć tę samą bazę kodu w wielu projektach Firebase, ale nie musisz śledzić konfiguracji Firebase, której używasz dla firebase.initializeApp() .

Ta opcja konfiguracji działa również w przypadku lokalnego testowania aplikacji internetowej .

  1. Aby uwzględnić tylko określone produkty Firebase (na przykład Analytics, Uwierzytelnianie lub Cloud Firestore), dodaj następujące skrypty na dole tagu <body> , ale przed użyciem jakichkolwiek usług Firebase:

    <body>
  <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->

  <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
  <script src="/__/firebase/8.2.10/firebase-app.js"></script>

  <!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
  <script src="/__/firebase/8.2.10/firebase-analytics.js"></script>

  <!-- Add Firebase products that you want to use -->
  <script src="/__/firebase/8.2.10/firebase-auth.js"></script>
  <script src="/__/firebase/8.2.10/firebase-firestore.js"></script>
</body>


  2. Zainicjuj Firebase w swojej aplikacji (nie musisz dołączać obiektu konfiguracyjnego Firebase, jeśli używasz zarezerwowanych adresów URL hostingu):

    <body>
  <!-- Previously loaded Firebase SDKs -->

  <!-- Initialize Firebase -->
  <script src="/__/firebase/init.js"></script>
</body>

Aplikacje Node.js.

  1. Zainstaluj pakiet Firebase JavaScript SDK:

    1. Jeśli nie masz jeszcze pliku package.json , utwórz go, uruchamiając następujące polecenie z katalogu głównego projektu JavaScript:

      npm init

    2. Zainstaluj pakiet firebase npm i zapisz go w pliku package.json , uruchamiając:

      npm install --save firebase

  2. Użyj jednej z poniższych opcji, aby użyć modułu Firebase w swojej aplikacji:

    • Możesz require modułów z dowolnego pliku JavaScript

      Aby uwzględnić tylko określone produkty Firebase (takie jak Uwierzytelnianie i Cloud Firestore):

      // Firebase App (the core Firebase SDK) is always required and
// must be listed before other Firebase SDKs
var firebase = require("firebase/app");

// Add the Firebase products that you want to use
require("firebase/auth");
require("firebase/firestore");


    • Możesz użyć ES2015 do import modułów

      Aby uwzględnić tylko określone produkty Firebase (takie jak Uwierzytelnianie i Cloud Firestore):

      // Firebase App (the core Firebase SDK) is always required and
// must be listed before other Firebase SDKs
import firebase from "firebase/app";

// Add the Firebase services that you want to use
import "firebase/auth";
import "firebase/firestore";

  3. Zainicjuj Firebase w swojej aplikacji:

    // TODO: Replace the following with your app's Firebase project configuration
// For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
var firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

Dowiedz się więcej o obiekcie konfiguracyjnym Firebase

Aby zainicjować Firebase w swojej aplikacji, musisz podać jej konfigurację projektu Firebase. W każdej chwili możesz pobrać obiekt konfiguracyjny Firebase .

  • Jeśli używasz zarezerwowanych adresów URL hostingu , konfiguracja Firebase jest automatycznie pobierana z projektu Firebase, więc nie musisz jawnie podawać obiektu konfiguracyjnego w kodzie.

  • Nie zalecamy ręcznej edycji obiektu konfiguracyjnego, zwłaszcza następujących wymaganych „opcji apiKey ”: apiKey , projectId i appID . Jeśli zainicjujesz aplikację z nieprawidłowymi lub brakującymi wartościami tych wymaganych „opcji Firebase”, użytkownicy Twojej aplikacji mogą napotkać poważne problemy.

  • Jeśli włączyłeś Google Analytics w projekcie Firebase, Twój obiekt konfiguracyjny zawiera pole measurementId . Dowiedz się więcej o tym polu na stronie wprowadzającej do Analytics .

Oto format obiektu konfiguracyjnego z włączonymi wszystkimi usługami (te wartości są wypełniane automatycznie):

// For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
var firebaseConfig = {
  apiKey: "API_KEY",
  authDomain: "PROJECT_ID.firebaseapp.com",
  databaseURL: "https://PROJECT_ID.firebaseio.com",
  projectId: "PROJECT_ID",
  storageBucket: "PROJECT_ID.appspot.com",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID",
  measurementId: "G-MEASUREMENT_ID",
};

Oto obiekt konfiguracyjny z przykładowymi wartościami:

// For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
var firebaseConfig = {
  apiKey: "AIzaSyDOCAbC123dEf456GhI789jKl01-MnO",
  authDomain: "myapp-project-123.firebaseapp.com",
  databaseURL: "https://myapp-project-123.firebaseio.com",
  projectId: "myapp-project-123",
  storageBucket: "myapp-project-123.appspot.com",
  messagingSenderId: "65211879809",
  appId: "1:65211879909:web:3ae38ef1cdcb2e01fe5f0c",
  measurementId: "G-8GSGZQ44ST"
};

Krok 4 : (opcjonalnie) zainstaluj CLI i wdróż w Hostingu Firebase

Jeśli połączyłeś swoją aplikację internetową Firebase z witryną hostingu Firebase, możesz wdrożyć zawartość i konfigurację witryny teraz (podczas konfigurowania aplikacji internetowej) lub w dowolnym momencie później.

Aby wdrożyć w Firebase, użyjesz Firebase CLI, narzędzia wiersza poleceń.

  1. Odwiedź dokumentację interfejsu wiersza polecenia Firebase, aby dowiedzieć się, jak zainstalować interfejs CLI lub zaktualizować go do najnowszej wersji .

  2. Zainicjuj projekt Firebase. Uruchom następujące polecenie z katalogu głównego lokalnego katalogu aplikacji:

    firebase init

  3. Wdróż zawartość i konfigurację hostingu w Hostingu Firebase.

    Domyślna witryna hostingowa

    Domyślnie każdy projekt web.app ma bezpłatne subdomeny w web.app i firebaseapp.com ( project-id .web.app project-id .firebaseapp.com project-id .web.app i project-id .firebaseapp.com ).

    1. Wdróż w swojej witrynie. Uruchom następujące polecenie z katalogu głównego aplikacji:

      firebase deploy

    2. Wyświetl swoją witrynę w jednej z domyślnych witryn:

      • project-id .web.app
      • project-id .firebaseapp.com

    Niedomyślna witryna hostingowa

    Projekty Firebase obsługują wiele witryn (są to witryny inne niż domyślne ). Możesz dodać dodatkowe witryny do projektu podczas przepływu pracy konfiguracji aplikacji internetowej konsoli lub na stronie Hosting konsoli.

    1. Dodaj swoją witrynę do pliku firebase.json (utworzonego podczas firebase init ).

      Pamiętaj, że ta konfiguracja firebase.json zakłada, że ​​masz oddzielne repozytoria dla każdej witryny.

      {
  "hosting": {
    "site": "site-name>",
    "public": "public",

    // ...
  }
}

    2. Wdróż w swojej witrynie. Uruchom następujące polecenie z katalogu głównego aplikacji:

      firebase deploy --only hosting:site-name

    3. Wyświetl swoją witrynę pod adresem:

      • site-name .web.app
      • site-name .firebaseapp.com

Krok 5 : Uzyskaj dostęp do Firebase w swojej aplikacji

Pakiet Firebase JavaScript SDK obsługuje następujące produkty Firebase. Każdy produkt jest opcjonalny i można uzyskać do niego dostęp z przestrzeni nazw firebase .

Dowiedz się o dostępnych metodach w dokumentacji referencyjnej JavaScript Firebase .

Produkt Firebase Przestrzeń nazw Sieć Node.js
Analityka firebase.analytics()
Poświadczenie firebase.auth()
Cloud Firestore firebase.firestore()
Cloud Functions for Firebase Client SDK firebase.functions()
Komunikacja w chmurze firebase.messaging()
Magazyn w chmurze firebase.storage()
Monitorowanie wydajności ( wersja beta ) firebase.performance()
Baza danych czasu rzeczywistego firebase.database()
Zdalna konfiguracja ( wersja beta ) firebase.remoteConfig()

Dostępne biblioteki

Następne kroki

Dowiedz się więcej o Firebase:

Dodaj usługi Firebase do swojej aplikacji: