= Hosten Sie eine dynamische Website auf Google Firebase mit Node.js und Cloud Firestore DB =
Tushar Kapoor: (httpswww.tusharck.com/)
Demo-Git-URL: httpsgithub.com/tusharck/firebase-demo
= Warum Firebase-Hosting? =
Firebase ist eine umfassende App-Plattform, die auf der Infrastruktur von Google basiert, und bietet daher eine sichere, schnelle, kostenlose (kostenpflichtige Optionen sind auch für zusätzliche Ressourcen verfügbar) und eine einfache Möglichkeit, Ihre Inhalte auf der zu hosten Web- oder mobile Anwendungen
== Hauptmerkmale und Vorteile des kostenlosen Kontingents: ==
- Es gibt eine kostenlose benutzerdefinierte Domain&
SSL(SSL bietet eine Standardsicherheitsebene für https-Verbindungen
- Cloud Firestore: Eine flexible und skalierbare Datenbank für die Echtzeit-Datensynchronisierung zwischen Client-Apps
- Weitere Funktionen: Cloud-Funktionen, Cloud-Messaging (FCM), Crashlytics, dynamische Links, Hosting, ML-Kit, Speicher, Leistungsüberwachung, Vorhersagen und Testlabor (Die Funktionalität und Ressourcen dieser Produkte können durch den Kauf eines kostenpflichtigen Plans erhöht werden, aber Die kostenlosen Dienste sind sehr gut. Um sich die Pläne anzusehen, überprüfen Sie die Firebase-Preise.)
- Automatische Skalierung von Ressourcen
= Schritte zum Hosten Ihrer dynamischen Website auf Firebase =
== Anforderungen ==
**1. Google-Konto**Wenn Sie kein Google-Konto haben, müssen Sie sich für eines anmelden. Gehen Sie dazu zu httpsaccounts.google.com/SignUp. **2. Node.js und npm** Mac/WindowsSie können das Installationsprogramm von httpsnodejs.org/en/download/ herunterladen. Linux
Führen Sie die folgenden Schritte aus, um Node.js zu installieren:
1. Öffnen Sie ein Terminal
2. Führen Sie die folgenden Befehle aus:
sudo apt-get install curlcurl -sL httpsdeb.nodesource.com/
setup_13.x| sudo bash -sudo apt install nodejs **Ich habe Hinweis verwendet: ** **
setup_13.x, weil zum Zeitpunkt des Tutorials die neuste Version war
**13** Sie können die neueste Version überprüfen, indem Sie zu httpsnodejs.org/en/ gehen.
Um zu überprüfen, ob Node.js und npm erfolgreich installiert wurden, führen Sie die folgenden Befehle aus, die die installierte Version ausgeben:
Knoten -v
npm-v
**3. Firebase-CLI (Befehlszeilenschnittstelle) Dies sind die Tools zum Verwalten, Anzeigen und Bereitstellen der Firebase-Projekte
npm install -g firebase-tools
= Schritt 1: Firebase-Projekt erstellen =
- Gehen Sie zu httpsfirebase.google.com und
Melden Sie sich in der oberen rechten Ecke an
- Klicke auf
Gehen Sie von der oberen rechten Ecke zur Konsole
- Dann klicken Sie auf
Projekt erstellen, wie unten gezeigt
4. Geben Sie als Nächstes den Namen Ihres Projekts ein und drücken Sie auf Weiter
5. Klicken Sie auf Weiter, um Google Analytics für Ihr Firebase-Projekt zu aktivieren (wenn Sie es nicht möchten, aktivieren Sie es, um es zu deaktivieren).
6. Wählen Sie den nächstgelegenen Standort für Google Analytics aus
7. Klicken Sie auf
**Projekt erstellen und warten, bis es geladen ist. Dann sehen Sie etwas wie unten
= Schritt 2: Firebase-Anmeldung initialisieren =
- Öffnen Sie eine Befehlszeile/ein Terminal, erstellen Sie sie und wechseln Sie in ein neues Verzeichnis
mkdir mein-firebase-projektcd mein-firebase-projekt
2. Um eine Website auf Firebase zu hosten, melden Sie sich mit dem folgenden Befehl bei Firebase an. Nachdem Sie den Befehl ausgeführt haben, wird ein Browserfenster geöffnet, in dem Sie aufgefordert werden, sich mit Ihren Google-Anmeldeinformationen bei Firebase anzumelden. Geben Sie dort die Anmeldeinformationen ein und Firebase meldet sich bei Ihrem System an
Firebase-Anmeldung
= Schritt 3: Initialisieren Sie das Firebase-Projekt in Ihrem System =
- Jetzt müssen wir das Projekt, das wir auf der Firebase-Konsole erstellt haben, im System initialisieren. Führen Sie dazu den folgenden Befehl aus
Firebase-Init
2. Drücken Sie die Abwärtstaste und wählen Sie dann aus
**zwei Dinge **durch Drücken der **Leertaste
- Funktionen
- Gastgeber
Dann
**drücken Sie die Eingabetaste**, um fortzufahren
3. Wählen Sie dann aus
drücken Sie dann die Eingabetaste
**Bestehendes Projekt verwenden**
4. Drücken Sie die Eingabetaste
**my-firebase-project** **oder der von Ihnen verwendete Projektname oder der von Ihnen verwendete Projektname
5. Wählen Sie
**Javascript** und drücken Sie die Eingabetaste
6. Sie können sagen
**Nein** zu Möchten Sie ESLint verwenden, um wahrscheinliche Fehler zu finden und den Stil durchzusetzen?
7. Geben Sie ein
**Ja** für die Installation der Abhängigkeiten mit npm
8. Hier müssen wir zwei Aufgaben erledigen:
- Sie müssen das Verzeichnis auswählen, in dem sich Ihre Website und Ihre Assets befinden werden. Standardmäßig ist es
pubicSie können die Eingabetaste drücken, um fortzufahren, oder Sie können zu Ihrem gewünschten Verzeichnisnamen wechseln
- Typen
Ja für die Single-App-Seite, damit Ihre dynamischen URLs an ihr richtiges Ziel umgeleitet werden können
9. Testen Sie die Firebase-App auf Ihrem lokalen System, indem Sie den folgenden Befehl ausführen. Dann geh zu
**httplocalhost:5000**, um zu sehen, wie Ihre grundlegende Website ausgeführt wird
firebase serve - nur Hosting, Funktionen
Sie sollten nach dem Öffnen der unten so etwas sehen
**httplocalhost:5000**-URL
10. Schließen Sie den Server vom Terminal aus
= Schritt 4: Pakete installieren und Views-Verzeichnis für dynamische Website erstellen =
- Hier wechseln wir innerhalb des Funktionsverzeichnisses, um dies zu tun
CD-Funktionen
**2. Installieren Sie Express**Es ist ein minimales und flexibles Node.js-Framework für Webanwendungen
npm ich ausdrücke --save
**3. Handle Bars installieren** Dies ist eine Templating-Engine für Node.js, die für das dynamische Front-End der Website verwendet wird
npm i Lenker --save
**4. Konsolidieren installieren**
npm konsolidiere ich --save
5. Erstellen Sie einen Ordner namens
**views** innerhalb des Ordners **functions**, in dem der gesamte Frontend-Code gespeichert wird
mkdir
Ansichten
6. Wechseln Sie zurück zum Hauptverzeichnis, indem Sie den folgenden Befehl ausführen:
CD .
= Schritt 5: Einrichten von Firestore (Cloud-Datenbank) =
== Datenbankkonfiguration ==
- Gehen Sie zu httpsconsole.firebase.google.com/
- Wählen Sie Ihr Projekt aus
- Wählen
Datenbank aus dem Bereich auf der linken Seite
4. Klicken Sie auf
**Datenbank erstellen**
5. Wählen Sie Im Testmodus starten, da Sie sonst von Ihrem System aus nicht auf die Datenbank zugreifen können. Wir werden diese Einstellung ändern, sobald wir mit der Entwicklung der Website fertig sind
Dann klick
**Weiter**, nachdem Sie dies getan haben
6. Wählen Sie den Speicherort Ihrer Firestore-DB aus
**Nachdem Sie diesen Standort festgelegt haben, können Sie ihn später nicht mehr ändern. Notiz: **
== Daten erstellen ==
- Klicken Sie auf Sammlung starten
2. Geben Sie die ein
**Sammlungs-ID, die Sie vorerst testen können
3. Geben Sie die Probendaten ein. Eintreten
**sample_doc ** als **Dokument-ID. **Geben Sie **Überschrift** in das Feld ** ein. Ich mag Cloud** innerhalb des **Werts Dann klicke auf **Speichern**
= Schritt 6: Aufbau der dynamischen Inhalte der Website =
Wir werden den Teil in zwei Teile aufteilen, im ersten Teil werden wir sehen, wie die Daten von Firestore abgerufen und auf der Website verwendet werden. Im zweiten Teil werden wir sehen, wie die Formulardaten übermittelt werden
**Zuerst laden wir die Anmeldeinformationen herunter, um auf Firestore zuzugreifen**
2. Klicken Sie auf
**Einstellungen** im linken Bereich und gehen Sie zu **Projekteinstellungen**
3. Gehen Sie zu
**Dienstkonten** und klicken Sie auf **Neuen privaten Schlüssel generieren
4. Klicken Sie auf
**Schlüssel generieren Es wird ein Popup-Fenster zum Herunterladen des Schlüssels angezeigt. Speichern Sie den Schlüssel in Ihrem Ordner **Funktionen** Ihrer Website
== Abrufen von Firestore ==
- Offen
index.j im Ordner functions
2. Wir müssen einige der Bibliotheken definieren, die wir in unserer Anwendung verwenden möchten. Dies sind dieselben Bibliotheken, die wir zuvor installiert haben
const functions = require('firebase-functionsconst express = require('expressconst motors = require('consolidatevar hbs = require('handlebarsconst admin = require('firebase-admin
3. Hier stellen wir ein paar Dinge ein:
- Initialisieren Sie die App mit Express
- Wir werden unseren Motor als Lenker einstellen
- Dann teilen wir dem Express mit, dass sich unser Front-End-Code im Views-Ordner befinden wird
const app = expressapp.engine('hbs',engines.handlebars);app.set('viewsviewsapp.set('enginehbs anzeigen
4. Autorisieren Sie Ihre Anwendung für den Zugriff auf Ihre Firestore-DB
*Notiz:*
1. Ändern
**YOUR_SDK_NAMEjson mit der Datei, die Sie für **Anmeldeinformationen für den Zugriff auf Firestore2 heruntergeladen haben. Ändern Sie die Datenbank-URL in Ihre Datenbank-URL. Um die URL anzuzeigen, gehen Sie zu **Einstellungen >Dienstkonto**
var serviceAccount = erforderlich
YOUR_SDK_NAME.jsonadmin.initializeApp({credential: admin.credential.cert(serviceAccount), databaseURL: "httpsmyfirebaseproject-bx54dasx3.firebaseio.com
5. Funktion zum Abrufen von Daten aus Firestore
- Sammlungs-ID ist
Probe
- Dokument-ID ist
Beispiel_doc
Wir haben das oben bei der Eingabe der Beispieldaten definiert
asynchrone Funktion getFirestoreconst firestore_con = warte auf admin.firestoreconst writeResult = firestore_con.collection('sampledoc('sample_docgetthen(doc =>{
if (!doc.exists) { console.log('Kein solches Dokument }
sonst {return doc.data
.catch(err =>{ console.log('Fehler beim Abrufen des Dokuments', errreturn writeResult
}
**Wir verwenden Hinweis: ** **asynchron**, weil wir warten müssen, bis die Versprechungsoperation zwischen der Datenbank und unserer Website abgeschlossen ist
6. Erstellen Sie die Route und senden Sie das Ergebnis an das Frontend
app.getasync (Anfrage, Antwort) var db_result = await getFirestoreresponse.render('indexdb_resultexports.app = functions.https.onRequest(app);
7. Erstellen
**index.hbs** im Ordner **views**. hbs ist eine lenkbars-Datei Hinweis: **
8. Schreiben Sie diesen grundlegenden HTML-Code hinein
**index.hbs**, um das abgerufene Ergebnis anzuzeigen
Tushar Chand Kapoor
