Firebase Crashkurs

Der Leitfaden für Front-End-Entwickler legt die Geheimnisse von Firebase auf. Wir werden die Fähigkeiten von Firebase, seine Vorteile und praktische Beispiele untersuchen. Aber zuerst eine kurze Geschichte ...

Vor acht Jahren starteten Andrew Lee und James Tamplin Envolve, ein Echtzeit-Chat-Startup. Der Erfolg, der von prominenten Nutzern wie Ricky Martin und Limp Bizkit angeheizt wurde, beruhte auf der Benutzerfreundlichkeit und der schnellen Nachricht. Envolve war ein einfaches Chat -Widget - ein Skript -Tag, das einer Seite hinzugefügt wurde. Es lieferte effektiv eine vorgefertigte Datenbank und einen Server für Chat-Nachrichten.

Als Envolve wuchs, tauchte ein überraschender Trend auf: Entwickler verwendeten das (oft unsichtbare) Widget nicht nur für Chat, sondern für verschiedene Zwecke - Game -Daten, hohe Punktzahlen, App -Einstellungen und vieles mehr. Sie nutzten die Echtzeitfunktionen des Widgets für die nahtlose Datensynchronisation und umging die Notwendigkeit einer komplexen Back-End-Entwicklung.

Diese Offenbarung führte zur Schaffung von Firebase. Die Gründer stellten sich eine Plattform vor, die Entwickler befähigt, Anwendungen schnell aufzubauen und zu skalieren, wodurch die Belastung der Back-End-Infrastruktur beseitigt wurde und sie sich auf das Front-End konzentrieren können.

FireBase verstehen

Ist Firebase nur eine Datenbank? Nicht ganz. Firebase hat sich zunächst in einer Cloud-Datenbank in Echtzeit zu einer umfassenden Plattform entwickelt, die die Infrastruktur für Entwickler und Tools für Vermarkter umfasst. Derzeit bietet es 19 integrierte Produkte, die jeweils einen bestimmten Aspekt der Anwendungsentwicklung unterstützen und wertvolle Einblicke in die App -Leistung und das Benutzerverhalten bieten. Diese Produkte können einzeln oder gemeinsam verwendet werden, um eine vollständige Back-End-Lösung zu bilden.

Hier ist ein Einblick in die vielfältigen Angebote von Firebase:

• Hosting: Müheloses Bereitstellung von Website -Updates mit jeder Github Pull -Anfrage.
• Firestore: Echtzeit-Datenbankfunktionalität, auch offline, ohne Serververwaltung.
• Auth: Benutzerauthentifizierung und Verwaltung mit verschiedenen Anbietern.
• Speicher: Sicherungspeicher für benutzergenerierte Inhalte (Bilder, Videos usw.).
• Cloud -Funktionen: Serverlose Funktionen, die durch Ereignisse ausgelöst werden (Datenerstellung, Benutzeranmeldung usw.).
• Erweiterungen: Vorgefertigte Funktionen mit Benutzeroberflächen (z. B. Streifenzahlungen, Übersetzungsdienste).
• Google Analytics: umfassende Verfolgung und Analyse der Benutzeraktivität.
• Remote-Konfiguration: Dynamischer Schlüsselwertspeicher für Feature-Flags und A/B-Tests.
• Leistungsüberwachung: Detaillierte Leistungsmetriken und benutzerdefinierte Spuren.
• Cloud Messaging: plattformübergreifende Push-Benachrichtigungen.

Dies ist nur ein Bruchteil der Fähigkeiten von Firebase. Sie müssen nicht jeden Service nutzen. Die Auswahl der relevanten Tools für Ihr Projekt ist vollkommen akzeptabel. Lassen Sie uns mit praktischen Anwendungen befassen.

In den folgenden Abschnitten führen Sie die Einrichtung von Firebase und demonstrieren Sie die Merkmale anhand eingebetteter Beispiele. Dies ist ein hochrangiger Überblick, kein Schritt-für-Schritt-Tutorial. Für detaillierte Tutorials hinterlassen Sie einen Kommentar!

Einrichten von Firebase

Dieser Abschnitt ist von entscheidender Bedeutung, wenn Sie vorhaben, die Demo -App in Ihr eigenes Firebase Back End zu integrieren. Überspringen Sie dies, wenn Sie mit Firebase -Projekten vertraut sind.

Firebase ist Cloud-basiert und erfordert eine Erstkonto-Einrichtung. Die Entwicklung kann jedoch offline unter Verwendung lokaler Emulatoren auftreten. In diesem Handbuch wird CodePen verwendet, wodurch eine Cloud -Verbindung erforderlich ist. Der Prozess beinhaltet das Erstellen eines Firebase-Projekts und das Abrufen der erforderlichen Konfiguration für die Front-End-Integration.

Erstellen eines Firebase -Projekts

Navigieren Sie zur Firebase -Konsole. Sie können das Google Analytics -Setup vorerst überspringen.

Erstellen einer Web Firebase -App

Erstellen Sie eine neue Web -App und weisen Sie sie einen Namen zu. Firebase -Projekte können mehrere Apps enthalten. Nach der Erstellung erhalten Sie ein Konfigurationsobjekt:

 lass FirebaseConfig = {
  Apikey: "Dein Key",
  Authomain: "your-domain.firebaseApp.com",
  projectId: "your-projectid",
  StorageBucket: "your-projectid.appspot.com",
  Messagingsenderid: "Your-Senderid",
  Appid: "Your-Appid",
  mesurementid: "Ihre messen"
};

Diese Konfiguration verbindet Ihr Front-End mit Firebase. Die Einbeziehung dieser Eigenschaften in Ihren Front-End-Code ist sicher. Sicherheitsmechanismen werden später erklärt.

Lassen Sie uns diese App nun im Code darstellen. Diese App fungiert als Container für gemeinsame Logik und Authentifizierung in den Firebase -Diensten. Wir werden Firebase -Bibliotheken von einem CDN verwenden (obwohl auch Modulbundler unterstützt werden).

 // Dieser Stift fügt Firebase über die Option "Externe Skripte hinzufügen" in CodePen hinzu
// https://www.gstatic.com/firebasejs/8.2.10/firebase-app.js
// https://www.gstatic.com/firebasejs/8.2.10/firebase-auth.js

// Erstellen Sie ein Projekt an der Firebase -Konsole
// (console.firebase.google.com)
lass FirebaseConfig = {
  Apikey: "Dein Key",
  Authomain: "your-domain.firebaseApp.com",
  projectId: "your-projectid",
  StorageBucket: "your-projectid.appspot.com",
  Messagingsenderid: "Your-Senderid",
  Appid: "Your-Appid",
  mesurementid: "Ihre messen"
};

// Erstellen Sie Ihre Firebase -App
lass FirebaseApp = Firebase.initializeapp (FirebaseConfig);
// die Authinstanz
console.log (FirebaseApp.Auth ());

Aktivieren Sie als nächstes die erforderlichen Firebase Services.

Aktivieren von Authentifizierungsanbietern

In den Beispielen werden die Authentifizierung für Benutzeranmeldungen und Datensicherheit verwendet. Anfänglich sind Authentifizierungsanbieter aus Sicherheitsgründen deaktiviert. Aktivieren Sie Google und Anonymous Anmeldemethoden auf der Registerkarte Authentifizierung. Denken Sie daran, CodePen als autorisierte Domäne für Testzwecke hinzuzufügen (aber in der Produktion entfernen).

Erstellen einer Firestore -Datenbank

Erstellen Sie eine Firestore -Datenbank im "Testmodus". Die Sicherheit wird später behandelt.

Lassen Sie uns nun reale Anwendungsfälle untersuchen.

Benutzerauthentifizierung

Die App -Funktionalität erfordert häufig Benutzerkonten. Lassen Sie uns die anonyme Authentifizierung und Google Anmeldung untersuchen.

Anonyme Authentifizierung

Mit der anonymen Authentifizierung von Firebase können Benutzer ohne Registrierung auf die App zugreifen und eine temporäre BenutzerID für die Datenvereinigung bereitstellen.

(Code-Beispiel, das anonyme Anmeldung und Profil-Update für die Kürze nachgelassen wird)

Google -Authentifizierung

Google Sign-In funktioniert ähnlich wie die anonyme Authentifizierung.

(Code-Beispiel, das Google Sign-In aus der Kürze ausgelassen hat)

Überwachung des Authentifizierungszustands

Die onAuthStateChanged -Methode verfolgt die Authentifizierungsänderungen und aktiviert UI -Updates basierend auf dem Anmeldestatus.

(Code -Beispiel, onAuthStateChanged für die Kürze ausgelassen hat)

Konvertieren von Gästen in dauerhafte Benutzer

Gastkonten können mit linkWithRedirect auf dauerhafte Konten aktualisiert werden.

(Code -Beispiel, das das für die Kürze weggelassene Konto für die Kürze nachweisen)

Verschmelzungsfehler handeln

Die Fehlerbehandlung ist bei der Verschmelzung von Konto unerlässlich.

(Code -Beispiel, das die für die Kürze weggelassene Fehlerbehandlung demonstriert)

Datenvisualisierung und Echtzeitdatenströme

Dieser Abschnitt konzentriert sich auf das Erstellen eines Kreisdiagramms und die Synchronisierung mit Firestore -Daten.

(Erläuterung der benutzerdefinierten Eigenschaften von Conic-Gradienten und CSS für die Kürze)

(Code -Beispiel, das Firestore -Datenab Abruf und Kreisdiagramm -Update für Kürze weggelassen hat)

Datenmodellierung in NoSQL -Datenbanken

Firestore ist eine NoSQL -Dokumentdatenbank mit einer hierarchischen Struktur von Sammlungen und Dokumenten. Die Datenmodellierung beinhaltet die Strukturierung von Daten effektiv mithilfe von Sammlungen und Untersammelungen.

(Code -Beispiele, die das Abrufen von Firestore -Daten und Abfragen für die Kürze nachlassen)

Streaming -Daten zur Visualisierung

Die Methode von Firestors .onSnapshot() ermöglicht das Streaming von Echtzeitdaten.

(Code-Beispiel, das dem Nachweis von Echtzeitdaten, die für die Kürze weggelassen wurden)

Sicherung Ihrer Datenbank mit Firebase -Sicherheitsregeln

Sicherheitsregeln steuern Datenzugriff in Firebase. Sie werden für jede Anfrage auf dem Server ausgewertet.

(Erläuterung von Sicherheitsregeln und Beispielen, die für Kürze weggelassen wurden)

Abschluss

Diese Anleitung hat die Benutzerauthentifizierung, die Datenmodellierung, die Echtzeitdatensynchronisation und die Datenbanksicherheit unter Verwendung von Firebase behandelt. Denken Sie daran, zusätzliche Firebase -Ressourcen für ein weiteres Lernen zu erkunden. Firebase vereinfacht das Back-End-Management und ermöglicht es den Entwicklern, sich auf das Front-End zu konzentrieren.

Das obige ist der detaillierte Inhalt vonFirebase Crashkurs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!