= Värd för en dynamisk webbplats på Google Firebase med Node.js och Cloud Firestore DB =
Tushar Kapoor: (httpswww.tusharck.com/)
Demo Git URL: httpsgithub.com/tusharck/firebase-demo
= Varför Firebase Hosting? =
Firebase är en omfattande appplattform byggd på Googles infrastruktur, därför ger den ett säkert, snabbt, gratis (betalda alternativ finns även för ytterligare resurser) och enkelt sätt att vara värd för ditt innehåll på webb- eller mobilapplikationer
== Nyckelfunktioner och fördelar med gratis nivå: ==
- Det ger gratis anpassad domän&
SSL(SSL tillhandahåller ett standard säkerhetslager för https-anslutningar
- Cloud Firestore: En flexibel och skalbar databas för datasynkronisering i realtid mellan klientappar
- Andra funktioner: Molnfunktioner, Cloud Messaging (FCM), Crashlytics, Dynamic Links, Hosting, ML Kit, Storage, Performance Monitoring, Predictions och Test Lab (Funktionaliteten och resurserna för dessa produkter kan ökas genom att köpa en betald plan, men gratisnivåtjänsterna är mycket bra. För att titta på planerna kolla Firebase-priser)
- Automatisk skalning av resurser
= Steg för att vara värd för din dynamiska webbplats på Firebase =
== Krav ==
**1. Google-konto**Om du inte har ett Google-konto måste du registrera dig för ett. Du kan göra det genom att gå till httpsaccounts.google.com/SignUp. **2. Node.js och npm** Mac/WindowsDu kan ladda ner installationsprogrammet från httpsnodejs.org/en/download/. Linux
Följ stegen nedan för att installera Node.js:
1. Öppna en terminal
2. Kör följande kommandon:
sudo apt-get install curlcurl -sL httpsdeb.nodesource.com/
setup_13.x| sudo bash -sudo apt install nodejs **Jag har använt Obs: ** **
setup_13.xbecause vid tidpunkten för handledningen var den senaste versionen
**13**du kan kontrollera den senaste versionen genom att gå till httpsnodejs.org/en/
För att kontrollera om Node.js och npm har installerats framgångsrikt kör följande kommandon, som kommer att mata ut den installerade versionen:
nod -v
npm -v
**3. Firebase-CLI (Command-Line Interface De här är verktygen för att hantera, visa och distribuera Firebase-projekten
npm installera -g firebase-tools
= Steg 1: Skapa Firebase-projekt =
- Gå till httpsfirebase.google.com och
Logga in från det övre högra hörnet
- Klicka på
Gå till konsolen, från det övre högra hörnet
- Klicka sedan på
Skapa projekt, som visas nedan
4. Nästa sak är att ange namnet på ditt projekt och trycka på fortsätt
5. Tryck på fortsätt för att aktivera Google Analytics för ditt Firebase-projekt (om du inte vill ha det, markera för att inaktivera)
6. Välj den närmaste platsen för Google Analytics
7. Klicka på
**Skapa projekt och vänta på att det laddas. Då kommer du att se något liknande nedan
= Steg 2: Initiera Firebase-inloggning =
- Öppna en kommandorad/terminal och skapa och gå till en ny katalog
mkdir my-firebase-projectcd my-firebase-project
2. Logga in på Firebase för att vara värd för en webbplats på Firebase med följande kommando. När du har kört kommandot öppnas ett webbläsarfönster som ber dig att logga in på firebase med dina Google-uppgifter. Ange användaruppgifterna där så loggar Firebase in på ditt system
firebase-inloggning
= Steg 3: Initiera Firebase-projektet i ditt system =
– Nu måste vi initiera projektet som vi skapade på Firebase-konsolen i systemet. Kör kommandot nedan för att göra det
firebase init
2. Tryck ned-knappen och välj sedan
**två saker **genom att trycka på **mellanslagstangenten
- Funktioner
- Värdskap
Sedan
**tryck på Enter** för att fortsätta
3. Välj sedan
tryck sedan på enter
**Använd ett befintligt projekt**
4. Tryck på enter på
**my-firebase-project** **eller projektnamnet du använde eller projektnamnet du använde
5. Välj
**Javascript** och tryck på enter
6. Man kan säga
**Nej** till Vill du använda ESLint för att fånga upp troliga buggar och upprätthålla stil?
7. Typ
**Ja** för att installera beroenden med npm
8. Här måste vi göra två uppgifter:
- Du måste välja i vilken katalog din webbplats och dina tillgångar ska finnas. Som standard är det
pubic du kan trycka på enter för att fortsätta eller så kan du ändra till önskat katalognamn
- Typer
Ja för enappsidan så att dina dynamiska webbadresser kan omdirigeras till sin rätta destination
9. Testa firebase-appen på ditt lokala system genom att köra följande kommando. Gå sedan till
**httplocalhost:5000** för att se din grundläggande webbplats igång
firebase tjäna --bara värdfunktioner
Du bör se något liknande nedan efter att ha öppnat
**httplocalhost:5000** URL
10. Stäng servern från terminalen
= Steg 4: Installera paket och skapa vykatalog för dynamisk webbplats =
- Här kommer vi att byta inuti funktionskatalogen för att göra det
cd-funktioner
**2. Installera Express**Det är ett minimalt och flexibelt ramverk för webbapplikationer för Node.js
npm jag uttrycker --spara
**3. Installera handtag**Det är en mallmotor för Node.js som används för den dynamiska fronten av webbplatsen
npm i styret --spara
**4. Installera konsolidera**
npm jag konsoliderar --spara
5. Skapa en mapp med namnet
**views** inuti **functions**-mappen där vi lagrar all frontend-kod
mkdir
vyer
6. Växla tillbaka till huvudkatalogen genom att köra följande kommando:
CD .
= Steg 5: Konfigurera Firestore (molndatabas) =
== Databaskonfiguration ==
- Gå till httpsconsole.firebase.google.com/
- Välj ditt projekt
- Välj
Databas från rutan till vänster
4. Klicka på
**Skapa databas**
5. Välj Starta i testläge eftersom du annars inte kommer att kunna komma åt databasen från ditt system. Vi kommer att ändra denna inställning när vi är klara med utvecklingen av webbplatsen
Klicka sedan
**Nästa** efter att ha gjort det
6. Välj platsen för din Firestore DB
**När du har angett den här platsen kan du inte ändra den senare. Notera: **
== SkapaData ==
- Klicka på starta insamling
2. Ange
**Samlings-ID kan du prova för nu
3. Ange exempeldata. Stiga på
**sample_doc **som **Dokument-ID. **Ange **Rubrik** i **fältet. Jag gillar Cloud** i **Värde Klicka sedan på **Spara**
= Steg 6: Bygga upp det dynamiska innehållet på webbplatsen =
Vi kommer att dela upp delen i två delar, i den första delen kommer vi att se hur man hämtar data från Firestore och använder på webbplatsen. I den andra delen kommer vi att se hur du skickar in formulärdata
**Först laddar vi ner användaruppgifterna för att komma åt Firestore**
2. Klicka på
**inställningar** från den vänstra rutan och gå till **Projektinställningar**
3. Gå till
**Tjänstekonton** och klicka på **Generera ny privat nyckel
4. Klicka på
**Generera nyckel Det kommer att visa en popup för att ladda ner nyckeln. Förvara nyckeln i mappen **funktioner** på din webbplats
== Hämtar från Firestore ==
- Öppet
index.jsinsi funktionsmappen
2. Vi måste definiera några av de bibliotek som vi vill använda i vår applikation. Det här är samma bibliotek som vi installerade tidigare
const functions = require('firebase-functionsconst express = require('expressconst engines = require('consolidatevar hbs = require('handlebarsconst admin = require('firebase-admin
3. Här ställer vi in några saker:
- Initiera appen med express
– Vi kommer att ställa in vår motor som styre
– Då kommer vi att berätta för expressen att vår frontend-kod kommer att finnas inne i visningsmappen
const app = expressapp.engine('hbs',engines.handlebars);app.set('viewsviewsapp.set('view enginehbs
4. Auktorisera ditt program för åtkomst till din Firestore DB
*Notera:*
1. Ändra
**YOUR_SDK_NAMEjson med filen du laddade ned för **inloggningsuppgifter för att komma åt Firestore2. Ändra databasens URL till din databas URL. För att se webbadressen kan du gå till**Inställningar >Servicekonto**
var serviceAccount = kräver
YOUR_SDK_NAME.jsonadmin.initializeApp({credential: admin.credential.cert(serviceAccount), databaseURL: "httpsmyfirebaseproject-bx54dasx3.firebaseio.com
5. Funktion för att hämta data från Firestore
- Insamlings-ID är
prov
- Dokument-ID är
sample_doc
Vi definierade ovanstående när vi skrev in exempeldata
async-funktion getFirestoreconst firestore_con = inväntar admin.firestoreconst writeResult = firestore_con.collection('sampledoc('sample_docgetthen(doc =>{
if (!doc.exists) { console.log('Inget sådant dokument }
annat {returnera doc.data
.catch(err =>{ console.log('Fel vid hämtande av dokument', errreturn writeResult
}
**Vi använder Obs: ** **async** eftersom vi måste vänta på att löftesoperationen ska slutföras mellan databasen och vår webbplats
6. Skapa rutten och skicka resultatet till frontend
app.getasync (request,response) var db_result = await getFirestoreresponse.render('indexdb_resultexports.app = functions.https.onRequest(app);
7. Skapa
**index.hbs** i mappen **views**. hbs är en handelbars-fil Obs: **
8. Skriv in den här grundläggande HTML-koden
**index.hbs** för att se det hämtade resultatet
Tushar Chand Kapoor
