= Ospita un sito web dinamico su Google Firebase utilizzando Node.js e Cloud Firestore DB =
Tushar Kapoor: (https://www.tusharck.com/)
URL demo Git: httpsgithub.com/tusharck/firebase-demo
= Perché l'hosting Firebase? =
Firebase è una piattaforma di app completa costruita sull'infrastruttura di Google, quindi fornisce un modo sicuro, veloce, gratuito (opzioni a pagamento disponibili anche per risorse aggiuntive) e semplice per ospitare i tuoi contenuti sul applicazioni web o mobili
== Caratteristiche principali e vantaggi del livello gratuito: ==
- Fornisce un dominio personalizzato gratuito&
SSL(SSL fornisce un livello di sicurezza standard per le connessioni https
- Cloud Firestore: un database flessibile e scalabile per la sincronizzazione dei dati in tempo reale tra le app client
- Altre caratteristiche: Funzioni cloud, Cloud Messaging (FCM), Crashlytics, Dynamic Links, Hosting, ML Kit, Storage, Performance Monitoring, Predictions e Test Lab (Le funzionalità e le risorse di questi prodotti possono essere aumentate acquistando un piano a pagamento, ma i servizi del livello gratuito sono molto buoni. Per esaminare i piani, controlla i prezzi di Firebase)
- Ridimensionamento automatico delle risorse
= Passaggi per l'hosting del tuo sito web dinamico su Firebase =
== Requisiti ==
**1. Account Google**Se non disponi di un account Google, devi crearne uno. Puoi farlo andando su httpsaccounts.google.com/SignUp. **2. Node.js e npm** Mac/WindowsPuoi scaricare il programma di installazione da httpsnodejs.org/en/download/. Linux
Segui i passaggi seguenti per installare Node.js:
1. Apri un terminale
2. Eseguire i seguenti comandi:
sudo apt-get install curlcurl -sL httpsdeb.nodesource.com/
setup_13.x| sudo bash -sudo apt install nodejs **Ho usato Nota: ** **
setup_13.xperché al momento del tutorial l'ultima versione era
**13**puoi controllare l'ultima versione andando su httpsnodejs.org/en/
Per verificare se Node.js e npm sono stati installati correttamente, eseguire i seguenti comandi, che restituiranno la versione installata:
nodo -v
npm -v
**3. Firebase-CLI (Command-Line InterfaceQuesti sono gli strumenti per gestire, visualizzare e distribuire i progetti Firebase
npm install -g firebase-tools
= Passaggio 1: crea il progetto Firebase =
- Vai su httpsfirebase.google.com e
Accedidall'angolo in alto a destra
- Clicca su
Vai alla console, dall'angolo in alto a destra
- Quindi fare clic su
Crea progetto, come mostrato di seguito
4. La prossima cosa è inserire il nome del tuo progetto e premere continua
5. Premi Continua per abilitare Google Analytics per il tuo progetto Firebase (se non lo desideri, seleziona per disabilitarlo)
6. Selezionare la posizione più vicina per Google Analytics
7. Fare clic su
**Crea progetto e attendi che venga caricato. Quindi vedrai qualcosa di simile sotto
= Passaggio 2: inizializza l'accesso a Firebase =
- Apri una riga di comando/terminale, quindi crea e vai in una nuova directory
mkdir mio-progetto-firebasecd mio-progetto-firebase
2. Per ospitare un sito Web su Firebase, accedi a Firebase utilizzando il seguente comando. Dopo aver eseguito il comando, si aprirà una finestra del browser che ti chiederà di accedere a Firebase utilizzando le tue credenziali Google. Inserisci le credenziali lì e Firebase accederà al tuo sistema
accesso firebase
= Passaggio 3: inizializza il progetto Firebase nel tuo sistema =
- Ora dobbiamo inizializzare nel sistema il progetto che abbiamo creato sulla console Firebase. Per eseguire il comando seguente
inizializzazione firebase
2. Premere il tasto giù quindi selezionare
**due cose **premendo il **tasto della barra spaziatrice
- Funzioni
- Ospitando
Quindi
**premi Invio** per continuare
3. Quindi selezionare
quindi premere invio
**Utilizza un progetto esistente**
4. Premere Invio sul
**my-firebase-project** **o il nome del progetto che hai usatoo il nome del progetto che hai usato
5. Selezionare
**Javascript** e premi Invio
6. Puoi dire
**No** a Vuoi usare ESLint per rilevare probabili bug e applicare lo stile?
7. Digitare
**Sì** per l'installazione delle dipendenze con npm
8. Qui dobbiamo svolgere due compiti:
- Devi selezionare la directory in cui risiederanno il tuo sito web e le tue risorse. Di default lo è
pubicpuoi premere invio per continuare o puoi cambiare il nome della tua directory desiderata
- Tipi
Sì per la pagina dell'app singola in modo che i tuoi URL dinamici possano essere reindirizzati alla loro destinazione corretta
9. Testa l'app Firebase sul tuo sistema locale eseguendo il seguente comando. Quindi vai a
**httplocalhost:5000** per vedere il tuo sito web di base in esecuzione
firebase serve --solo hosting, funzioni
Dovresti vedere qualcosa di simile sotto dopo aver aperto il file
**httplocalhost:5000** URL
10. Chiudere il server dal terminale
= Passaggio 4: installazione dei pacchetti e creazione della directory delle viste per il sito Web dinamico =
- Qui passeremo all'interno della directory delle funzioni per farlo utilizzare
funzioni CD
**2. Installa Express**È un framework per applicazioni Web Node.js minimale e flessibile
npm esprimo --save
**3. Installa Handle Bars**È un motore di template per Node.js utilizzato per il front-end dinamico del sito web
npm i manubrio --save
**4. Installa consolidamento**
npm consolido --save
5. Creare una cartella denominata
**views** all'interno della cartella **functions** in cui memorizzeremo tutto il codice del frontend
mkdir
visualizzazioni
6. Tornare alla directory principale eseguendo il seguente comando:
CD .
= Passaggio 5: configurazione di Firestore (database cloud) =
== Configurazione database ==
- Vai su httpsconsole.firebase.google.com/
- Seleziona il tuo progetto
- Selezionare
Databasedal riquadro a sinistra
4. Fare clic su
**Crea banca dati**
5. Seleziona Avvia in modalità test perché altrimenti non sarai in grado di accedere al database dal tuo sistema. Modificheremo questa impostazione una volta terminato lo sviluppo del sito web
Quindi fare clic
**Successivo** dopo averlo fatto
6. Seleziona la posizione del tuo Firestore DB
**Dopo aver impostato questa località, non potrai modificarla in un secondo momento. Nota: **
== CreaDati ==
- Clicca su inizia raccolta
2. Immettere il file
**ID collezione che puoi provare per ora
3. Immettere i dati del campione. accedere
**sample_doc **come **ID documento. **Inserisci **Intestazione** nel campo **. Mi piace Cloud** all'interno del **Valore Quindi fai clic su **Salva**
= Passaggio 6: Creazione del contenuto dinamico del sito Web =
Divideremo la parte in due parti, nella prima parte vedremo come recuperare i dati da Firestore e utilizzarli nel sito web. Nella seconda parte vedremo come inviare i dati del form
**Per prima cosa, scaricheremo le credenziali per accedere a Firestore**
2. Fare clic su
**impostazioni** dal riquadro a sinistra e vai a **Impostazioni progetto**
3. Vai a
**Account di servizio** e fai clic su **Genera nuova chiave privata
4. Fare clic su
**Genera chiave Apparirà un pop up per scaricare la chiave. Memorizza la chiave nella cartella **funzioni** del tuo sito web
== Recupero da Firestore ==
- Aprire
index.js all'interno della cartella functions
2. Dobbiamo definire alcune delle librerie che vogliamo utilizzare nella nostra applicazione. Queste sono le stesse librerie che abbiamo installato in precedenza
const functions = require('firebase-functionsconst express = require('expressconst engine = require('consolidatevar hbs = require('handlebarsconst admin = require('firebase-admin
3. Qui impostiamo alcune cose:
- Inizializza l'app usando express
- Imposteremo il nostro motore come manubrio
- Quindi diremo all'espresso che il nostro codice front-end sarà all'interno della cartella views
const app = expressapp.engine('hbs',engines.handlebars);app.set('viewsviewsapp.set('view enginehbs
4. Autorizza la tua applicazione ad accedere al tuo Firestore DB
*Nota:*
1. Cambia
**YOUR_SDK_NAMEjson con il file che hai scaricato per **le credenziali per accedere a Firestore2. Modificare l'URL del database nell'URL del database. Per vedere l'URL puoi andare a **Impostazioni >Account di servizio**
var serviceAccount = richiedi
YOUR_SDK_NAME.jsonadmin.initializeApp({credential: admin.credential.cert(serviceAccount), databaseURL: "httpsmyfirebaseproject-bx54dasx3.firebaseio.com
5. Funzione per recuperare i dati da Firestore
- L'ID raccolta è
campione
- L'ID documento è
campione_doc
Abbiamo definito quanto sopra durante l'inserimento dei dati di esempio
funzione asincrona getFirestoreconst firestore_con = attendi admin.firestoreconst writeResult = firestore_con.collection('sampledoc('sample_docgetthen(doc =>{
if (!doc.exists) { console.log('Nessun documento simile }
else {restituisci doc.data
.catch(err =>{ console.log('Errore durante il recupero del documento', errreturn writeResult
}
**Utilizziamo Nota: ** **async** perché dobbiamo attendere il completamento dell'operazione di promessa tra il database e il nostro sito Web
6. Crea il percorso e invia il risultato al front-end
app.getasync (request,response) var db_result = await getFirestoreresponse.render('indexdb_resultexports.app = functions.https.onRequest(app);
7. Crea
**index.hbs** all'interno della cartella **views**. hbs è un file per manubri Nota: **
8. Scrivi questo codice HTML di base all'interno
**index.hbs** per visualizzare il risultato recuperato
Tushar Chand Kapoor
