= Găzduiește un site web dinamic pe Google Firebase folosind Node.js și Cloud Firestore DB =
Tushar Kapoor: (httpswww.tusharck.com/)
Adresa URL Demo Git: httpsgithub.com/tusharck/firebase-demo
= De ce găzduire Firebase? =
Firebase este o platformă cuprinzătoare de aplicații construită pe infrastructura Google, prin urmare oferă o modalitate sigură, rapidă, gratuită (opțiuni plătite disponibile și pentru resurse suplimentare) și o modalitate ușoară de a vă găzdui conținutul pe aplicații web sau mobile
== Caracteristici cheie și beneficii ale nivelului gratuit: ==
- Oferă un domeniu personalizat gratuit&
SSL(SSL oferă un nivel de securitate standard pentru conexiunile https
- Cloud Firestore: O bază de date flexibilă și scalabilă pentru sincronizarea datelor în timp real între aplicațiile client
- Alte caracteristici: Funcții Cloud, Mesaje în cloud (FCM), Crashlytics, Legături dinamice, Găzduire, Kit ML, Stocare, Monitorizare performanță, Predicții și Laborator de testare (Funcționalitatea și resursele acestor produse pot fi mărite prin cumpărarea unui plan plătit, dar serviciile gratuite sunt foarte bune. Pentru a vedea planurile, verificați prețurile Firebase)
- Scalare automată a resurselor
= Pași pentru găzduirea site-ului dvs. web dinamic pe Firebase =
== Cerințe ==
**1. Cont Google**Dacă nu ai un cont Google, trebuie să te înscrii pentru unul. Puteți face acest lucru accesând httpsaccounts.google.com/SignUp. **2. Node.js și npm** Mac/WindowsPuteți descărca programul de instalare de pe httpsnodejs.org/en/download/. Linux
Urmați pașii de mai jos pentru a instala Node.js:
1. Deschideți un terminal
2. Rulați următoarele comenzi:
sudo apt-get install curlcurl -sL httpsdeb.nodesource.com/
setup_13.x| sudo bash -sudo apt install nodejs **Am folosit Notă: ** **
setup_13.xdeoarece la momentul tutorialului ultima versiune era
**13**puteți verifica cea mai recentă versiune accesând httpsnodejs.org/en/
Pentru a verifica dacă Node.js și npm sunt instalate cu succes, rulați următoarele comenzi, care vor afișa versiunea instalată:
nodul -v
npm -v
**3. Firebase-CLI (Command-Line Interface Acestea sunt instrumentele pentru gestionarea, vizualizarea și implementarea proiectelor Firebase
npm install -g firebase-tools
= Pasul 1: Creați proiect Firebase =
- Accesați httpsfirebase.google.com și
Conectați-vă din colțul din dreapta sus
- Click pe
Accesați consolă, din colțul din dreapta sus
- Apoi faceți clic pe
Creați proiect, așa cum se arată mai jos
4. Următorul lucru este să introduceți numele proiectului și să apăsați Continuare
5. Apăsați pe Continuare pentru a activa Google Analytics pentru proiectul dvs. Firebase (dacă nu doriți, bifați pentru a dezactiva)
6. Selectați cea mai apropiată locație pentru Google Analytics
7. Faceți clic pe
**Creați proiectul și așteptați să se încarce. Atunci vei vedea ceva ca mai jos
= Pasul 2: Inițializați autentificarea Firebase =
- Deschideți o linie de comandă/terminal, apoi creați și mergeți la un director nou
mkdir my-firebase-projectcd my-firebase-project
2. Pentru a găzdui un site web pe Firebase, conectați-vă la Firebase utilizând următoarea comandă. După ce rulați comanda, se va deschide o fereastră de browser care vă va cere să vă conectați la firebase folosind acreditările dvs. Google. Introduceți acreditările acolo și Firebase se va conecta la sistemul dvs
autentificare firebase
= Pasul 3: Inițializați proiectul Firebase în sistemul dvs. =
- Acum trebuie să inițializam proiectul pe care l-am creat pe consola Firebase în sistem. Pentru a face, rulați comanda de mai jos
firebase init
2. Apăsați tasta jos apoi selectați
**două lucruri **apăsând tasta **bara de spațiu
- Funcții
- Gazduire
Apoi
**apăsați Enter** pentru a continua
3. Apoi selectați
apoi apăsați enter
**Utilizați un proiect existent**
4. Apăsaţi enter pe butonul
**my-firebase-project** **sau numele proiectului pe care l-ați folosit sau numele proiectului pe care l-ați folosit
5. Selectați
**Javascript** și apăsați Enter
6. Poti spune
**Nu** la Doriți să utilizați ESLint pentru a detecta erori probabile și pentru a aplica stilul?
7. Tastați
**Da** pentru instalarea dependențelor cu npm
8. Aici trebuie să facem două sarcini:
- Trebuie să selectați directorul în care vor locui site-ul și activele dvs. Implicit este
pubicputeți apăsa enter pentru a continua sau puteți schimba numele de director dorit
- Tipuri
Da pentru pagina cu o singură aplicație, astfel încât adresele URL dinamice să poată fi redirecționate către destinația corectă
9. Testați aplicația Firebase pe sistemul dvs. local, rulând următoarea comandă. Apoi du-te la
**httplocalhost:5000** pentru a vedea site-ul dvs. de bază rulând
firebase serve --doar găzduire,funcții
Ar trebui să vedeți ceva de genul acesta mai jos după deschiderea
**httplocalhost:5000** URL
10. Închideți serverul de pe terminal
= Pasul 4: Instalarea pachetelor și crearea directorului de vizualizări pentru site-ul web dinamic =
- Aici vom comuta în directorul de funcții pentru a face acest lucru
functii cd
**2. Instalați Express** Este un cadru de aplicații web Node.js minim și flexibil
npm i express --save
**3. Instalați bare de ghidare**Este un motor de șabloane pentru Node.js utilizat pentru front-end-ul dinamic al site-ului web
npm i ghidon --save
**4. Instalați consolidate**
npm i consolida --save
5. Creați un folder numit
**views** în dosarul **functions** în care vom stoca tot codul frontend
mkdir
vederi
6. Reveniți la directorul principal rulând următoarea comandă:
cd .
= Pasul 5: Configurarea Firestore (Cloud Database) =
== Configurarea bazei de date ==
- Accesați httpsconsole.firebase.google.com/
- Selectați proiectul dvs
- Selectați
Baza de date din panoul din stânga
4. Faceți clic pe
**Creează o bază de date**
5. Selectați Start în modul de testare, deoarece altfel nu veți putea accesa baza de date din sistemul dumneavoastră. Vom schimba această setare după ce am terminat cu dezvoltarea site-ului web
Apoi apasa
**Următorul** după ce faci asta
6. Selectați locația DB Firestore
**După ce setați această locație, nu o puteți modifica mai târziu. Notă: **
== CreateData ==
- Faceți clic pe începe colectarea
2. Introduceți
** ID de colecție pe care îl puteți eșantiona pentru moment
3. Introduceți datele eșantionului. introduce
**sample_doc **ca **ID-ul documentului. **Introduceți **Titul** în câmpul **. Îmi place Cloud** în interiorul **Valoare Apoi faceți clic pe **Salvați**
= Pasul 6: Crearea conținutului dinamic al site-ului =
Vom împărți porțiunea în două părți, în prima parte, vom vedea cum să preluăm datele din Firestore și să le folosim pe site. În a doua parte, vom vedea cum să trimiteți datele formularului
**Mai întâi, vom descărca acreditările pentru a accesa Firestore**
2. Faceți clic pe
**Setări** din panoul din stânga și accesați **Setări proiect**
3. Accesați
**Conturi de serviciu** și faceți clic pe **Generează o cheie privată nouă
4. Faceți clic pe
**Generare cheie Va da un pop-up pentru a descărca cheia. Stocați cheia în dosarul **funcții** de pe site-ul dvs. web
== Preluare de la Firestore ==
- Deschis
index.jîn interiorul folderului functions
2. Trebuie să definim unele dintre bibliotecile pe care dorim să le folosim în aplicația noastră. Acestea sunt aceleași biblioteci pe care le-am instalat mai devreme
const functions = require('firebase-functionsconst express = require('expressconst engines = require('consolidatevar hbs = require('handlebarsconst admin = require('firebase-admin)
3. Aici setăm câteva lucruri:
- Inițializați aplicația folosind expres
- Ne vom seta motorul ca ghidon
- Apoi îi vom spune expresului că codul nostru front-end va fi în folderul vizualizări
const app = expressapp.engine('hbs',engines.handlebars);app.set('viewsviewsapp.set('view enginehbs)
4. Autorizați aplicația dvs. să vă acceseze DB Firestore
*Notă:*
1. Schimbarea
**YOUR_SDK_NAME, împreună cu fișierul pe care l-ați descărcat pentru **acreditările pentru a accesa Firestore2. Schimbați adresa URL a bazei de date la adresa URL a bazei de date. Pentru a vedea adresa URL, puteți să **Setări >Cont de serviciu**
var serviceAccount = cere
YOUR_SDK_NAME.jsonadmin.initializeApp({credential: admin.credential.cert(serviceAccount), databaseURL: „httpsmyfirebaseproject-bx54dasx3.firebaseio.com
5. Funcție de preluare a datelor din Firestore
- ID-ul colecției este
probă
- ID-ul documentului este
sample_doc
Am definit cele de mai sus în timp ce introducem datele eșantionului
funcția asincronă getFirestoreconst firestore_con = așteptați admin.firestoreconst writeResult = firestore_con.collection('sampledoc('sample_docgetthen(doc =>{
if (!doc.exists) { console.log('Nu există un astfel de document }
else {return doc.data
.catch(err =>{ console.log('Eroare la obținerea documentului', errreturn writeResult)
}
**Folosim Notă: ** **async** pentru că trebuie să așteptăm ca operațiunea de promisiune să fie finalizată între baza de date și site-ul nostru
6. Creați ruta și trimiteți rezultatul către front-end
app.getasync (cerere, răspuns) var db_result = await getFirestoreresponse.render('indexdb_resultexports.app = functions.https.onRequest(app);
7. Creați
**index.hbs** în dosarul **views**. hbs este un fișier pentru ghidon Notă: **
8. Scrieți înăuntru acest cod HTML de bază
**index.hbs** pentru a vedea rezultatul preluat
Tushar Chand Kapoor
