Applicazione Angular con Firebase: guida completa

In questo tutorial vedremo come realizzare un’applicazione Angular con Firebase, andremo a compilare una web App CRUD.

Per CRUD si intende ‘CREATE READ UPDATE DELETE‘ ossia ‘CREA LEGGI AGGIORNA CANCELLA‘ che sta alla base delle azioni da compiere con un database relazionale. Anche se ci saranno delle query complesse alla fine tutto si riduce a queste quattro azioni fondamentali.

Firebase è un sistema su Cloud di proprietà di Google completo di hook API ,spazio di archiviazione file,sistema di autenticazione e funzionalità di Hosting, è molto semplice da configurare ed utilizzare.

Strumenti necessari per creare un’applicazione Angular con Firebase

Prima di poter procedere dobbiamo necessariamente scaricare alcuni strumenti fondamentali:

• Node.js (versione consigliata)
• Angular (ultima versione)
• Angular-cli (ultima versione)
• Firebase
• Git Bash (per utenti window o Mac)
• Ide (io consiglio Visual studio)

Una volta scaricato ed installato Node.js verifica che tutto sia andato per il verso giusto, apri il prompt dei comandi e digita : node -v e npm -v
se il risultato è il seguente:

PS C:\Users\lucio\Desktop\> node -v
v10.15.3
PS C:\Users\lucio\Desktop\> npm -v
6.4.1

è tutto a posto, cioè queste sono le versioni attuali di NODE e NPM.
Se vuoi saperne di più puoi andare a leggerti una guida che avevo realizzato un po di tempo fa.

Applicazione Angular con Firebase: cosa realizzeremo

Nel corso del tutorial andremo a realizzare Art Coffee, ossia un’applicazione atta ad ordinare il caffè in cui è possibile aggiungere ordini (quindi creare), elencare gli ordini dal database(leggere), aggiornare un ordine  e rimuovere un ordine.

Lo scopo della guida è quello di farti capire come funziona Firebase Firestore e  come sia facile l’integrazione di Angular con questo.

Installare il database Firebase Firestore

La configurazione di Google Firebase è piuttosto semplice. Aprite il browser e collegatevi su Google Firebase Console, loggatevi con il vostro account Google ( se non lo avete dovete crearlo).

Quindi cliccate su CREA PROGETTO , chiamatelo come volete (in questa guida lo chiameremo Art Coffee), alla fine verrete reindirizzati alla pagina seguente:

ora cliccate su sviluppo > database, verrete reindirizzati alla seguente pagina:

quindi fate click su crea database, comparirà un finestra tipo questa:

scegli ‘avvia in modalità di prova‘ e quindi clicca su Avanti, ora scegli la località (la nostra eur3 (europe-west)).

Ora fai click su PROJECT OVERVIEW come in figura:

quindi cliccate su come in figura sotto:

ora non vi resta che registrare l’app.

Installiamo Angular-cli e creiamo l’applicazione angular

Per installare ANGULAR-CLI da terminale digita:

npm install -g @angular/cli

se utilizzi linux:

sudo npm install -g @angular/cli

se vuoi saperne di più su Angular-Cli leggi la guida.

Ora siamo pronti per creare la nostra applicazione, create una cartella con nome AngularFirebase e da terminale dirigetevi all’interno di essa( vi ricordo che se utilizzate Visual Studio potete digitare i tasti ctrl+ò per aprire il terminale) quindi digitate:

ng new artCoffee

attendete qualche istante ,una volta creata, spostatevi su di questa , sempre da terminale digitando:

cd artCoffee

avviate il server digitando:

ng serve --open

Inserendo ‘–open’ la finestra del browser si apre automaticamente:

Applicazione Angular con Firebase:realiziamo i componenti dell’App

Per la nostra applicazione andremo a creare solamente 2 componenti ed un service: orders, order-list e quindi il service   shared/order. Quindi sempre dall’interno della directory del progetto, aprite il terminale e digitate:

ng g c orders

quindi

ng g c order-list

ed infine

ng g s service/orders

Quest’ultimo creerà il service all’interno della cartella service.

Aggiungere lo stile

In questa guida andremo ad utilizzare il framework Materialize, ma sei liberissimo di usarne un altro  a tuo piacimento , tipo Bootstrap.

Inoltre utilizzeremo le icone Material di Google, ma anche in  questo caso a te la scelta.

Implementeremo sia le icone che  lo stile mediante cdn (solo per velocizzare le spiegazioni). Aprite il file index.html della vostra applicazione ed incollate prima della chiusura del tag head:

<! - CSS materializzato compilato e minimizzato -> 
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" > 

<! - Materialise JavaScript compilato e minimizzato -> 
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"> </ script > <! - Icone materiali di Google -> 
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet" />

Modifichiamo l’App component

Aprite app.component.html ed eliminate tutto il codice presente in esso, quindi inserite:

<div class="container">

<divclass="row">

<app-orders class="col s6"></app-orders>

<app-order-list class="col s6"></app-order-list>

</div>

</div>

import { ReactiveFormsModule } from '@angular/forms';

imports: [

...,

ReactiveFormsModule,

...

],

import { FormControl, FormGroup } from "@angular/forms";
...
...export class OrdersService {
    constructor() {}
    form = new FormGroup({        
        customerName: new FormControl(''),
        orderNumber: new FormControl(''),
        coffeeOrder: new FormControl(''), 
        completed: new FormControl(false)
    })
}

...
import { OrdersService } from '../service/orders.service';
@Component({

selector: 'app-orders',

templateUrl: './orders.component.html',

styleUrls: ['./orders.component.scss']

})

export class OrdersComponent implements OnInit {

constructor(privateServiceOrder:OrdersService){}
...

<form [formGroup]="this.ordersService.form">

<inputplaceholder="Order Number"formControlName="orderNumber"type="text"class="input-field col s12">

<inputplaceholder="Nome cliente"formControlName="customerName"type="text"class="input-field col s12">

</form>

coffees = ["Americano", "Flat White", "Cappuccino", "Latte", "Espresso", "Machiato", "Mocha", "Hot Chocolate", "Tea"];

<buttonclass="waves-effect waves-light btn col s4"*ngFor="let coffee of coffees"(click)="addCoffee (coffee)">

{{coffee}}

</button>

<ulclass="collection ">

<li*ngFor=" let coffee of coffeeOrder ">

<spanclass=" col s11 "> {{coffee}} </span>

<aclass=" col s1 "(click)=" removeCoffee (coffee) "> x </a>

</li>

</ul>

coffeeOrder = [];

addCoffee=coffee=>this.coffeeOrder.push(coffee);

removeCoffee=coffee=>{

constindex=this.coffeeOrder.indexOf(coffee);

if(index >-1){this.coffeeOrder.splice(index,1);}

}

<form [formGroup]="this.ServiceOrder.form" (ngSubmit) = 'onSubmit()'>
...

<button class="waves-effect waves-light btn col s12" (click)="onSubmit()">

Submit

</button>

<table>

<thead>

<tr>

<th>Order No.</th>

<th>Name</th>

<th>Coffee List</th>

</tr>

</thead>

<tbody>

<tr>

<td>




</td>

<td></td>

<td>

</td>

<td>

<iclass="material-icons">check</i>

</td>

<td>

<iclass="material-icons">delete_forever</i>

</td>

</tr>

</tbody>

</table>

npm i --save firebase @angular/fire

export const environment = { 
 production: false, 
 firebaseConfig: { 
 apiKey: "xxx", 
 authDomain: "xxxx.firebaseapp.com", 
 databaseURL: "https://xxxx.firebaseio.com", 
 projectId: "xxxx", 
 storageBucket: "xxxx.appspot.com", 
 messagingSenderId: "xxxxx" 
 } 
};

import { environment } from "../environments/environment";
import { AngularFireModule } from "@angular/fire";
import { AngularFirestoreModule } from "@angular/fire/firestore";
...
@NgModule({
...
imports: [
...
AngularFireModule.initializeApp(environment.firebaseConfig),
AngularFirestoreModule
]
...
})

...

import { AngularFirestore } from '@angular/fire/firestore';

@Injectable({

providedIn: 'root'

})

export class OrdersService {

constructor(privatefirestore:AngularFirestore){}

...

/*Metodo add*/

createCoffeeOrder(data){

returnnewPromise<any>((resolve,reject)=>{

this.firestore

.collection('coffeeOrders')

.add(data)

.then(res=>{},err=>reject(err));

});

}

onSubmit(){

this.ServiceOrder.form.value.coffeeOrder =this.coffeeOrder;

constdata=this.ServiceOrder.form.value;

this.ServiceOrder.createCoffeeOrder(data)

.then(res=>{

/*do something here....

maybe clear the form or give a success message*/

});

}

getCoffeeOrders(){

return this.firestore.collection('coffeeOrders').snapshotChanges();

}

...

import { OrdersService } from '../service/orders.service';

@Component({

selector: 'app-order-list',

templateUrl: './order-list.component.html',

styleUrls: ['./order-list.component.scss']

})

export class OrderList Component implements OnInit {

constructor(private orderService:OrdersService){}

...

...

coffeeOrders;

ngOnInit(){this.getCoffeeOrders();}

getCoffeeOrders=()=>

this.serviceOrder

.getCoffeeOrders()

.subscribe(res=>this.coffeeOrders = res)

...

...

<tbody>

<tr*ngFor="let order of coffeeOrders">

<td>{{ order.payload.doc.data().orderNumber }}</td>

<td>{{ order.payload.doc.data().customerName }}</td>

<td><span*ngFor="let coffee of order.payload.doc.data().coffeeOrder">

{{ coffee }}

</span>

...

...

<td[hidden]="order.payload.doc.data().completed"(click)="markCompleted(order)">

<iclass="material-icons">check</i>

</td>

...

...

form = new FormGroup({

customerName: new FormControl(''),

orderNumber: new FormControl(''),

cofeeOrder: new FormControl(''),

completed: new FormControl(false),

});

...

...

 markCompleted = data => 
 this.ordersService.updateCoffeeOrder (data);

...

updateCoffeeOrder(data){

returnthis.firestore.collection

('coffeeOrders')

.doc(data.payload.doc.id).set

({ completed:true},{ merge:true});

}

...

...

<td[hidden]="order.payload.doc.data ().completed"(click)="deleteOrder (order)">

<iclass="material-icons"> delete_forever </i>

</td>

...

...

deleteOrder = data => this.serviceOrder.deleteCoffeeOrder(data);

...

...

/*Metodo delete */

deleteCoffeeOrder(data){

returnthis.firestore.collection

('coffeeOrders')

.doc(data.payload.doc.id)

.delete();

}

...