Befolgen Sie diese Anleitung, um das Firebase JavaScript SDK in Ihrer Webanwendung oder als Client für den Endbenutzerzugriff zu verwenden, beispielsweise in einer Node.js-Desktop- oder IoT-Anwendung.
Schritt 1 : Erstellen Sie ein Firebase-Projekt und registrieren Sie Ihre App
Bevor Sie Firebase zu Ihrer JavaScript-App hinzufügen können, müssen Sie ein Firebase-Projekt erstellen und Ihre App bei diesem Projekt registrieren. Wenn Sie Ihre App bei Firebase registrieren, erhalten Sie ein Firebase-Konfigurationsobjekt, mit dem Sie Ihre App mit Ihren Firebase-Projektressourcen verbinden.
Besuchen Sie Firebase-Projekte verstehen , um mehr über Firebase-Projekte und Best Practices für das Hinzufügen von Apps zu Projekten zu erfahren.
Wenn Sie noch kein JavaScript-Projekt haben und nur ein Firebase-Produkt ausprobieren möchten, können Sie eines unserer Schnellstart-Beispiele herunterladen.
Schritt 2 : Installieren Sie das SDK und initialisieren Sie Firebase
Auf dieser Seite wird die Einrichtungsanleitung für Version 9 des Firebase JS SDK beschrieben, das ein JavaScript-Modulformat verwendet.
Dieser Workflow verwendet npm und erfordert Modul-Bundler oder JavaScript-Framework-Tools, da das v9-SDK für die Arbeit mit Modul-Bundlern optimiert ist, um nicht verwendeten Code (Tree-Shaking) zu eliminieren und die SDK-Größe zu verringern.
Installieren Sie Firebase mit npm:
npm install firebase
Initialisieren Sie Firebase in Ihrer App und erstellen Sie ein Firebase-App-Objekt:
import { initializeApp } from 'firebase/app'; // TODO: Replace the following with your app's Firebase project configuration const firebaseConfig = { //... }; const app = initializeApp(firebaseConfig);
Eine Firebase-App ist ein Container-ähnliches Objekt, das gemeinsame Konfigurationen speichert und die Authentifizierung für alle Firebase-Dienste freigibt. Nachdem Sie ein Firebase-App-Objekt in Ihrem Code initialisiert haben, können Sie Firebase-Dienste hinzufügen und verwenden.
Schritt 3 : Greifen Sie in Ihrer App auf Firebase zu
Firebase-Dienste (wie Cloud Firestore, Authentifizierung, Echtzeitdatenbank, Remote-Konfiguration und mehr) können in einzelne Unterpakete importiert werden.
Das folgende Beispiel zeigt, wie Sie mit dem Cloud Firestore Lite SDK eine Datenliste abrufen können.
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; }
Schritt 4 : Verwenden Sie einen Modulbündelr (Webpack/Rollup) zur Größenreduzierung
Das Firebase Web SDK wurde entwickelt, um mit Modul-Bundlern zusammenzuarbeiten, um ungenutzten Code zu entfernen (Tree-Shaking). Wir empfehlen dringend, diesen Ansatz für Produktions-Apps zu verwenden. Tools wie Angular CLI , Next.js , Vue CLI oder Create React App übernehmen automatisch die Modulbündelung für Bibliotheken, die über npm installiert und in Ihre Codebasis importiert werden.
Weitere Informationen finden Sie in unserem Leitfaden Modul-Bundler mit Firebase verwenden .
Verfügbare Firebase-Dienste für das Web
Nachdem Sie die Verwendung von Firebase eingerichtet haben, können Sie damit beginnen, einen der folgenden verfügbaren Firebase-Dienste in Ihrer Web-App hinzuzufügen und zu verwenden.
Die folgenden Befehle zeigen, wie Sie mit npm
lokal installierte Firebase-Bibliotheken importieren. Informationen zu alternativen Importoptionen finden Sie in der Dokumentation zu den verfügbaren Bibliotheken .
Nächste Schritte
Erfahren Sie mehr über Firebase:
Erkunden Sie Beispiel-Firebase-Apps .
Sammeln Sie praktische Erfahrungen mit dem Firebase Web Codelab .
Erkunden Sie den Open-Source-Code in GitHub .
Sehen Sie sich die unterstützten Umgebungen für das Firebase JavaScript SDK an.
Beschleunigen Sie Ihre Entwicklung mit zusätzlichen von Firebase verwalteten Open-Source-Bibliotheken wie AngularFire , RxFire und FirebaseUI for web .
Bereiten Sie den Start Ihrer App vor:
- Richten Sie Budgetbenachrichtigungen für Ihr Projekt in der Google Cloud Console ein.
- Überwachen Sie das Nutzungs- und Abrechnungs- Dashboard in der Firebase-Konsole, um sich einen Überblick über die Nutzung Ihres Projekts über mehrere Firebase-Dienste hinweg zu verschaffen.
- Überprüfen Sie die Firebase-Startcheckliste .