Abbiamo parlato dei vantaggi del realizzare una PWA con Firebase nel precedente articolo, vediamo ora come costruirla da zero, capendo le varie componenti e in seguito come costruirla in pochi click con Skaffolder.
Se vuoi saltare le basi e vedere subito come realizzare la tua PWA in pochi secondi vai direttamente qui.
Installare le dipendenze
E’ necessario aver installato sul proprio PC un versione di NodeJS >= 8.9+, per verificare la versione installata è necessario eseguire il seguente comando:
node -v
Installare in seguito Angular-cli con il seguente comando:
npm install -g @angular/cli
Se è già installato verificare che la versione sia superiore della 6 con il comando:
ng version
Creare un nuovo progetto Angular
Creiamo un nuovo progetto con angular-cli eseguendo il comando
ng new pwa-app
Avremo quindi un progetto con la seguente struttura:
Installiamo le dipendeze del progetto con
npm i
Avviamo l'applicazione con
npm start
A questo punto andiamo su http://localhost:4200 per vedere la nostra app.
Trasformiamolo in una PWA
Possiamo ora convertire la nostra web app in una PWA con il comando
ng add @angular/pwa
Come risultato angular-cli aggiunge vari file necessari per il funzionamento della PWA
Per abilitare il service worker è necessario eseguire la build indicando che è una build di produzione con il comando
ng build --prod
Possiamo avviare questa build con un server lite npm, installiamolo con il comando
npm i -g http-server
Ed avviamo il server eseguendo nella cartella dist/pwa-app del progetto
cd dist/pwa-app http-server -o
Possiamo ora trovare la nostra app su http://localhost:8080
Test PWA
Per verificare che la nostra PWA è stata correttamente avviata, apriamo la console di Google Chrome ed andiamo nel tap "Application", dal menu "Service Worker" vedremo il nostro service worker avviato con un pallino verde come da immagine.
Spegnendo il server http ed aggiornando la pagina del browser, la nostra applicazione sarà ancora attiva e funzionante.
Abbiamo una PWA!
E' il momento di Firebase
Firebase è il backend-as-a-service di Google, ci permette di utilizzare un database persistente, funzionante anche offline. Nel momento in cui la connessione è nuovamente disponibile, si occupa lui di sincronizzare le modifiche con il server del database.
E' proprio quello che manca alla nostra app per essere una vera PWA.
Configuriamo il nostro account
Per prima cosa dobbiamo configurare il nostro account.
Creiamo quindi il nostro progetto Firebase accedendo alla console di Firebase con il nostro account Google all'URL:
https://console.firebase.google.com
Clicchiamo su "aggiungi progetto" e creiamone uno nuovo.
Cliccando sull'icona del codice evidenziata nell'immagine
Otterremo dei codici che ci serviranno successivamente per collegare la nostra app al progetto Firebase.
Possiamo ora creare il database, andando sulla voce di menù alla sinistra "Database" e cliccando su "Crea nuovo database" selezioniamo "Start in Test mode" come da immagine.
Abbiamo configurato con successo il nostro account Firebase e creato il nostro database.
Un po di codice ora!
Installiamo Firestore nel nostro progetto Angular eseguendo:
npm install firebase @angular/fire --save
Nel file src/environments/environment.ts aggiungiamo le credenziali del progetto Firebase ottenute precedentemente:
Nel file src/app.module.ts andiamo ad aggiungere i moduli Angular necessari per far funzionare Firebase, ovvero AngularFireModule e AngularFirestoreModule, come indicato nelle righe 10, 11, 21 e 22.
Aggiungiamo anche FormsModule che ci servirà successivamente come indicato nelle righe 3 e 19.
Siamo pronti ora per eseguire delle query di base.
Aggiungi documento nel DB
Per iniziare creiamo il nostro modello dati, creando l'interfaccia TestModel creando il file src/app/test-model.ts
Aggiungiamo una semplice form HTML nel file src/app/app.component.html
Infine nel file src/app/app.component.ts creiamo la funzione save()
In questo file abbiamo importato la dipendenza AngularFirestore nel costruttore e collegato this.testModelCollection alla collection del nostro database.
Nella funzione save() con l'istuzione this.testModelCollection.add(this.item); andiamo a salvare l'item nel database e alla riga successiva svuotiamo l'oggetto item.
Lista documenti dal DB
Nel file src/app/app.component.html aggiungiamo la stampa di un Observable di array utilizzando un *ngFor ed il pipe async
Nel controller andiamo ad aggiungere la lista nella funzione ngOnInit
Abbiamo associato la testModelCollection alla variable list, tramite la funzione snapshotChanges che aggiornerà in real time la lista per ogni modifica fatta sul database, anche da parte di altri utenti.
Sicurezza con Firebase
Con Firebase è anche possibile gestire l'autenticazione Google in poche semplici righe.
Per prima cosa dobbiamo configurare il nostro account Firebase.
Accediamo quindi alla console di Firebase ed andiamo nella sezione Authentication e nel tab Sign-in method.
In questa pagina abilitiamo il metodo di autenticazione richiesto, nel nostro caso "Google"
Nella nostra applicazione aggiungiamo il modulo AngularFireAuthModule nel file app.module.ts
Aggiungiamo ora nella vista HTML un pulsante per chiamare la funzion di login nel file src/app/app.component.html.
Ed aggiungiamo al component src/app/app.component.ts la funzione stessa.
La funzione login() sfrutta il modulo AngularFireAuth che è in grado di aprire la popup di autenticazione SSO Google e ritornare l'utente autenticato.
Applicazione CRUD completa in pochi click
L'applicazione realizzata è molto basilare, a scopo didattico.
Ora che abbiamo capito i concetti di base vediamo come ottenere il codice di un'applicazione completa in pochi click.
Installiamo Skaffolder-cli con il comando
npm install -g skaffolder-cli
Questa utility ci permette di creare applicazioni molto velocemente.
Eseguiamo l'accesso con il comando
sk login
Se già non ne siete in possesso, è possibile creare un'utenza gratuita a questo indirizzo https://app.skaffolder.com/#!/register
Possiamo ora creare un progetto eseguendo il seguente comando nella cartella dove vogliamo creare il progetto
sk new
Inserire di seguito il nome del progetto e selezionare Angular 6 - PWA - Firebase come frontend e NONE come backend.
Skaffolder-cli ha generato ora tutti i file necessari alla vostra applicazione per funzionare.
Dobbiamo solamente inserire nel file src/environments/environment.ts ed src/environments/environment.prod.ts le properties del nostro progetto Firebase come fatto precedentemente.
Possiamo avviare la nostra applicazione eseguendo
npm i npm start
Si aprirà utomaticamente la nostra app su
http://localhost:4200
Andiamo ora ad aggiungere un modello dati e creare le funzioni CRUD di inserimento, lista, modifica e cancellazione eseguendo il comando
sk add model
Indichiamo il nome del modello che vogliamo creare, aggiungiamo un attributo al modello dati e rispondiamo "Yes" alla richieste di voler creare le interfaccie CRUD come da immagine.
All'indirizzo http://localhost:4200 abbiamo ora una CRUD PWA funzionante, con la sicurezza gestita con Firebase e la possibilità di gestire tutti i dati con Firebase.
Crea ora la tua PWA con Skaffolder
Il risultato:
