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
Zainstaluj preferowany edytor lub IDE.
Zaloguj się do Firebase, używając swojego konta Google.
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.
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.
Wpisz pseudonim aplikacji.
Ten pseudonim jest wewnętrznym, wygodnym identyfikatorem i jest widoczny tylko dla Ciebie w konsoli Firebase.(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.
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.
Zainstaluj pakiet Firebase JavaScript SDK:
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
Zainstaluj pakiet
firebase
npm i zapisz go w plikupackage.json
, uruchamiając:npm install --save firebase
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";
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).
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>
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 .
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>
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.
Zainstaluj pakiet Firebase JavaScript SDK:
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
Zainstaluj pakiet
firebase
npm i zapisz go w plikupackage.json
, uruchamiając:npm install --save firebase
Użyj jednej z poniższych opcji, aby użyć modułu Firebase w swojej aplikacji:
Możesz
require
modułów z dowolnego pliku JavaScriptAby 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łówAby 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";
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
iappID
. 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ń.
Odwiedź dokumentację interfejsu wiersza polecenia Firebase, aby dowiedzieć się, jak zainstalować interfejs CLI lub zaktualizować go do najnowszej wersji .
Zainicjuj projekt Firebase. Uruchom następujące polecenie z katalogu głównego lokalnego katalogu aplikacji:
firebase init
Łączy lokalny katalog aplikacji z Firebase
Generuje plik
firebase.json
(plik wymagany dla Hostingu Firebase)Monituje o określenie publicznego katalogu głównego, który zawiera publiczne pliki statyczne (HTML, CSS, JS itp.)
Domyślna nazwa katalogu, którego szuka Firebase, to „public”. Możesz również ustawić katalog publiczny później, bezpośrednio modyfikując plik
firebase.json
.
Wdróż zawartość i konfigurację hostingu w Hostingu Firebase.
Domyślna witryna hostingowa
Domyślnie każdy projekt
web.app
ma bezpłatne subdomeny wweb.app
ifirebaseapp.com
(project-id .web.app
project-id .firebaseapp.com
project-id .web.app
iproject-id .firebaseapp.com
).Wdróż w swojej witrynie. Uruchom następujące polecenie z katalogu głównego aplikacji:
firebase deploy
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.
Dodaj swoją witrynę do pliku
firebase.json
(utworzonego podczasfirebase init
).Pamiętaj, że ta konfiguracja
firebase.json
zakłada, że masz oddzielne repozytoria dla każdej witryny.{ "hosting": { "site": "site-name>", "public": "public", // ... } }
Wdróż w swojej witrynie. Uruchom następujące polecenie z katalogu głównego aplikacji:
firebase deploy --only hosting:site-name
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:
Poznaj przykładowe aplikacje Firebase .
Zdobądź praktyczne doświadczenie w Firebase Web Codelab .
Poznaj kod open source w GitHub .
Przejrzyj obsługiwane środowiska dla pakietu Firebase JavaScript SDK.
Przyspiesz rozwój dzięki dodatkowym bibliotekom Open Source obsługiwanym przez Firebase , takim jak AngularFire , RxFire i FirebaseUI dla sieci Web .
Przygotuj się do uruchomienia aplikacji:
- Skonfiguruj alerty dotyczące budżetu dla swojego projektu w Google Cloud Console.
- Monitoruj pulpit nawigacyjny użycia i rozliczeń w konsoli Firebase.
- Przejrzyj listę kontrolną uruchamiania Firebase .
Dodaj usługi Firebase do swojej aplikacji:
Hostuj swoją aplikację w Hostingu Firebase .
Skonfiguruj przepływ uwierzytelniania użytkownika z uwierzytelnianiem .
Przechowuj dane, takie jak informacje o użytkowniku, w Cloud Firestore lub Realtime Database .
Przechowuj pliki, takie jak zdjęcia i filmy, w Cloud Storage .
Uzyskaj wgląd w problemy z wydajnością aplikacji dzięki funkcji monitorowania wydajności .
Uruchom kod zaplecza, który działa w bezpiecznym środowisku dzięki Cloud Functions .
Wysyłaj powiadomienia za pomocą Cloud Messaging .