= Host een dynamische website op Google Firebase met behulp van Node.js en Cloud Firestore DB =
Tushar Kapoor: (httpswww.tusharck.com/)
Demo Git-URL: httpsgithub.com/tusharck/firebase-demo
= Waarom Firebase-hosting? =
Firebase is een uitgebreid app-platform dat is gebouwd op de infrastructuur van Google. Daarom biedt het een veilige, snelle, gratis (betaalde opties zijn ook beschikbaar voor aanvullende bronnen) en gemakkelijke manier om uw inhoud op de web- of mobiele toepassingen
== Belangrijkste kenmerken en voordelen van de gratis laag: ==
- Het geeft een gratis aangepast domein&
SSL(SSL biedt een standaard beveiligingslaag voor https-verbindingen
- Cloud Firestore: een flexibele en schaalbare database voor realtime gegevenssynchronisatie tussen client-apps
- Andere functies: Cloud Functions, Cloud Messaging (FCM), Crashlytics, Dynamic Links, Hosting, ML Kit, Storage, Performance Monitoring, Predictions en Test Lab (de functionaliteit en bronnen van deze producten kunnen worden uitgebreid door een betaald abonnement te kopen, maar de gratis tier-services zijn erg goed. Om de plannen te bekijken, raadpleegt u Firebase-prijzen)
- Automatisch schalen van bronnen
= Stappen voor het hosten van uw dynamische website op Firebase =
== Vereisten ==
**1. Google-account**Als u geen Google-account heeft, moet u zich hiervoor aanmelden. U kunt dit doen door naar httpsaccounts.google.com/SignUp te gaan. **2. Node.js en npm** Mac/WindowsU kunt het installatieprogramma downloaden van httpsnodejs.org/en/download/. Linux
Volg de onderstaande stappen om Node.js te installeren:
1. Open een terminal
2. Voer de volgende opdrachten uit:
sudo apt-get install curlcurl -sL httpsdeb.nodesource.com/
installatie_13.x| sudo bash -sudo apt install nodejs **Ik heb Opmerking gebruikt: ** **
setup_13.xomdat ten tijde van de tutorial de nieuwste versie was
**13**je kunt de nieuwste release bekijken door naar httpsnodejs.org/en/ te gaan
Om te controleren of Node.js en npm met succes zijn geïnstalleerd, voert u de volgende opdrachten uit, die de geïnstalleerde versie uitvoeren:
knooppunt -v
npm -v
**3. Firebase-CLI (Command-Line InterfaceDit zijn de tools voor het beheren, bekijken en implementeren van de Firebase-projecten
npm install -g firebase-tools
= Stap 1: Firebase-project maken =
- Ga naar httpsfirebase.google.com en
Meld u aan in de rechterbovenhoek
- Klik op
Ga naar console, vanuit de rechterbovenhoek
- Klik dan op
Maak een project aan, zoals hieronder weergegeven
4. Het volgende is om de naam van uw project in te voeren en op Doorgaan te drukken
5. Druk op doorgaan om Google Analytics in te schakelen voor uw Firebase-project (als u dit niet wilt, vink dan aan om uit te schakelen)
6. Selecteer de dichtstbijzijnde locatie voor Google Analytics
7. Klik op
** Maak een project aan en wacht tot het is geladen. Dan zie je zoiets als hieronder
= Stap 2: Firebase-login initialiseren =
- Open een opdrachtregel/terminal en maak vervolgens een nieuwe map aan en ga naar deze map
mkdir mijn-firebase-projectcd mijn-firebase-project
2. Om een website op Firebase te hosten, logt u in op Firebase met de volgende opdracht. Nadat u de opdracht hebt uitgevoerd, wordt er een browservenster geopend waarin u wordt gevraagd u aan te melden bij Firebase met uw Google-inloggegevens. Voer daar de inloggegevens in en Firebase logt in op uw systeem
firebase-login
= Stap 3: Initialiseer het Firebase-project in uw systeem =
- Nu moeten we het project dat we op de Firebase-console hebben gemaakt in het systeem initialiseren. Voer hiervoor de onderstaande opdracht uit
vuurbasis init
2. Druk op de toets Omlaag en selecteer vervolgens
**twee dingen **door op de **spatiebalktoets te drukken
- Functies
- Hosting
Dan
**druk op Enter** om door te gaan
3. Selecteer vervolgens
druk dan op enter
**Gebruik een bestaand project**
4. Druk op Enter op de
**mijn-firebase-project** **of de projectnaam die je hebt gebruiktof de projectnaam die je hebt gebruikt
5. Selecteer
**Javascript** en druk op enter
6. Je kunt zeggen
**Nee** tegen Wilt u ESLint gebruiken om waarschijnlijke bugs op te vangen en stijl af te dwingen?
7. Typ
**Ja** voor het installeren van de afhankelijkheden met npm
8. Hier moeten we twee taken uitvoeren:
- U moet de map selecteren waarin uw website en activa zich zullen bevinden. Standaard is dat zo
pubicu kunt op enter drukken om door te gaan of u kunt de gewenste mapnaam wijzigen
- Soorten
Ja voor de pagina met één app, zodat uw dynamische URL's kunnen worden omgeleid naar hun juiste bestemming
9. Test de firebase-app op uw lokale systeem door de volgende opdracht uit te voeren. Ga dan naar
**httplocalhost:5000** om uw basiswebsite actief te zien
firebase serve --only hosting,functies
Je zou zoiets hieronder moeten zien na het openen van de
**httplocalhost:5000** URL
10. Sluit de server vanaf de terminal
= Stap 4: Pakketten installeren en weergavemap maken voor dynamische website =
- Hier schakelen we binnen de functiesmap om dit te gebruiken
cd-functies
**2. Installeer Express**Het is een minimaal en flexibel Node.js-webtoepassingsframework
npm i express --save
**3. Install Handle Bars**Het is een template-engine voor Node.js die wordt gebruikt voor de dynamische voorkant van de website
npm i stuur --save
**4. Installatie consolideren**
npm ik consolideer --save
5. Maak een map met de naam
**views** in de map **functions** waarin we alle frontend-code zullen opslaan
mkdir
keer bekeken
6. Schakel terug naar de hoofddirectory door de volgende opdracht uit te voeren:
cd.
= Stap 5: Firestore instellen (Cloud Database) =
== Databaseconfiguratie ==
- Ga naar httpsconsole.firebase.google.com/
- Selecteer uw project
- Selecteer
Database vanuit het deelvenster aan de linkerkant
4. Klik op
**Database aanmaken**
5. Selecteer Start in testmodus omdat u anders geen toegang krijgt tot de database vanaf uw systeem. We zullen deze instelling wijzigen zodra we klaar zijn met de ontwikkeling van de website
Dan klikken
**Volgende** daarna
6. Selecteer de locatie van uw Firestore DB
**Nadat je deze locatie hebt ingesteld, kun je deze later niet meer wijzigen. Opmerking: **
== CreateData ==
- Klik op incasso starten
2. Voer de
**Collectie-ID waarvan u nu een voorbeeld kunt nemen
3. Voer de voorbeeldgegevens in. Binnenkomen
**sample_doc **als de **Document-ID. **Voer **Koptekst** in het veld ** in. Ik hou van Cloud** binnen de **Waarde Klik vervolgens op **Opslaan**
= Stap 6: Opbouwen van de dynamische inhoud van de website =
We zullen het gedeelte in twee delen splitsen, in het eerste deel zullen we zien hoe we de gegevens van Firestore kunnen ophalen en in de website kunnen gebruiken. In het tweede deel zullen we zien hoe de formuliergegevens moeten worden ingediend
**Eerst zullen we de inloggegevens downloaden om toegang te krijgen tot Firestore**
2. Klik op
**instellingen** in het linkerdeelvenster en ga naar **Projectinstellingen**
3. Ga naar
**Serviceaccounts** en klik op **Nieuwe privésleutel genereren
4. Klik op
**Sleutel genereren Er verschijnt een pop-up om de sleutel te downloaden. Bewaar de sleutel in de map **functies** van uw website
== Ophalen uit Firestore ==
- Open
index.j in de map functions
2. We moeten een aantal bibliotheken definiëren die we in onze applicatie willen gebruiken. Dit zijn dezelfde bibliotheken die we eerder hebben geïnstalleerd
const-functies = vereisen ('firebase-functiesconst express = vereisen ('expressconst-engines = vereisen ('consolidatevar hbs = vereisen ('stuurconst admin = vereisen ('firebase-admin
3. Hier stellen we een paar dingen in:
- Initialiseer de app met Express
- We zullen onze motor instellen als stuur
- Dan zullen we de expres vertellen dat onze front-endcode in de map Views komt te staan
const app = expressapp.engine('hbs',engines.stuur);app.set('viewsviewsapp.set('view enginehbs
4. Autoriseer uw applicatie om toegang te krijgen tot uw Firestore DB
*Opmerking:*
1. Wijzigen
**YOUR_SDK_NAMEjson met het bestand dat je hebt gedownload voor **referenties voor toegang tot Firestore2. Wijzig de database-URL in uw database-URL. Om de URL te zien, kunt u naar **Instellingen >Serviceaccount**
var serviceAccount = vereisen
UW_SDK_NAME.jsonadmin.initializeApp({credential: admin.credential.cert(serviceAccount), databaseURL: "httpsmyfirebaseproject-bx54dasx3.firebaseio.com
5. Functie om gegevens op te halen uit Firestore
- Collectie-ID is
steekproef
- Document-ID is
voorbeeld_doc
We hebben het bovenstaande gedefinieerd tijdens het invoeren van de voorbeeldgegevens
asynchrone functie getFirestoreconst firestore_con = wacht admin.firestoreconst writeResult = firestore_con.collection('sampledoc('sample_docgetthen(doc =>{
if (!doc.exists) { console.log('Geen dergelijk document }
else {geef doc.data terug
.catch(err =>{ console.log('Fout bij ophalen document', errreturn writeResult
}
**We gebruiken Opmerking: ** **async**omdat we moeten wachten tot de belofte is voltooid tussen de database en onze website
6. Creëer de route en stuur het resultaat naar de frontend
app.getasync (verzoek, antwoord) var db_result = wacht op getFirestoreresponse.render('indexdb_resultexports.app = functies.https.onRequest(app);
7. Creëer
**index.hbs** in de map **views**. hbs is een stuurbarbestand Opmerking: **
8. Schrijf deze eenvoudige HTML-code erin
**index.hbs** om het opgehaalde resultaat te zien
Tushar Chand Kapoor
