/ Angular

Come realizzare una PWA con Firebase e Angular 6

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:

Schermata-2018-11-29-alle-11.51.44

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.

Schermata-2018-11-29-alle-11.51.03

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

Schermata-2018-11-29-alle-12.03.34

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.

Schermata-2018-11-29-alle-12.05.10

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.

Schermata-2018-11-29-alle-12.22.30

Cliccando sull'icona del codice evidenziata nell'immagine

Schermata-2018-11-29-alle-12.19.52-copia

Otterremo dei codici che ci serviranno successivamente per collegare la nostra app al progetto Firebase.

Schermata-2018-11-29-alle-12.20.00

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.

Schermata-2018-11-29-alle-12.20.29

Abbiamo configurato con successo il nostro account Firebase e creato il nostro database.
Schermata-2018-11-29-alle-12.20.52

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:

Schermata-2018-11-29-alle-12.40.32

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.

Schermata-2018-11-29-alle-12.57.26

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

Schermata-2018-11-29-alle-13.53.30

Aggiungiamo una semplice form HTML nel file src/app/app.component.html

Schermata-2018-11-29-alle-13.54.14

Infine nel file src/app/app.component.ts creiamo la funzione save()

Schermata-2018-11-29-alle-14.01.07

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

Schermata-2018-11-29-alle-14.10.33

Nel controller andiamo ad aggiungere la lista nella funzione ngOnInit

Schermata-2018-11-29-alle-14.10.41

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.

Schermata-2018-11-29-alle-14.20.09

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"

Schermata-2018-11-29-alle-14.29.42

Nella nostra applicazione aggiungiamo il modulo AngularFireAuthModule nel file app.module.ts

Schermata-2018-11-29-alle-14.48.56

Aggiungiamo ora nella vista HTML un pulsante per chiamare la funzion di login nel file src/app/app.component.html.

Schermata-2018-11-29-alle-14.46.51

Ed aggiungiamo al component src/app/app.component.ts la funzione stessa.

Schermata-2018-11-29-alle-14.47.15

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.

Schermata-2018-11-29-alle-15.12.11-copia

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.

Schermata-2018-11-29-alle-15.32.18

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:

Schermata-2018-11-29-alle-15.41.09

Schermata-2018-11-29-alle-15.42.45

Crea ora la tua PWA con Skaffolder