Nativescript e Firebase : Installazione e Primi Passi

   

142

             

9

SafeValue must use [property]=binding:

In questo tutorial vedremo come utilizzare Nativescript con Firebase, una piattaforma di sviluppo di app per dispositivi mobili e web che offre agli sviluppatori una miriade di strumenti e servizi per aiutarli a sviluppare app di alta qualità, far crescere la loro base di utenti e guadagnare più profitti.
Il loro obbiettivo è infatti ridurre il carico di lavoro che farebbe uno sviluppatore backend senza scendere a compressi su ciò che la nostra applicazione sarà in grado di fare, infatti oltre a servizi ben conosciuti come l'autenticazione, l'utilizzo di db e il salvataggio di file, possiamo anche inserire codici personalizzati da far girare sul server.

In questa guida compieremo i primi passi verso l'utilizzo di questa piattaforma in Nativescript, andremo a vedere come installare le librerie JavaScript dedicate e creeremo una prima istanza nel nostro codice.

Utilizzeremo la combinazione Angular + Typescript per lo sviluppo . 

Angular e Firebase sono attualmente considerate due tecnologie che si sposano perfettamente per lo sviluppo di applicazioni web e già da molto tempo, diversi sviluppatori hanno costruito moduli che permettono l'integrazione delle librerie JavaScript di Firebase in Angular compatibili con Typescript. 

Come anticipato, la nostra applicazione Nativescript girerà su Angular ma ciò non basta per indurci a pensare che le librerie sopra citate, saranno completamente compatibili con Nativescript che necessita di alcune attenzioni che differenziano lo sviluppo di un'applicazione web da una mobile.
Infatti, Nativescript, come sappiamo, non utilizza Web Views come farebbe Ionic, ma andrà a creare un codice nativo che come detto poco fa, necessita di attenzioni da parte dello sviluppatore.

In Nativescript, hanno deciso di soprannominare quelli che vengono chiamati "moduli" in Angular in "plugins" e ne possiamo trovare davvero tanti sul marketplace ufficiale, quello che interessa a noi è quello dedicato a Firebase sviluppato da Eddy Verbruggen, grande sostenitore di questo framework che ocntribuisce attivamente lla crescita di quest'ultimo sviluppando plugins molto utili e interessanti.

Per lo sviluppo della nostra app, andremo proprio ad utilizzare il suo plugin che ci permetterà di avere una compatibilità con Firebase al 100% sia su Android che IOS

Prerequisiti

Per seguire questo tutorial, daremo per scontato che l'ambiente NodeJs e le librerie Nativescript siano installate sul tuo computer, le dipendenze Firebase avremo modo di vederle dopo, e che tu abbia già creato un'applicazione Firebase sulla tua console.

Iniziamo!

Installazione plugin Nativescript

La prima cosa da fare è creare l'applicazione Nativescript, useremo il template Blank ufficiale e indichiamo esplicitamente l'id dell'app che ci servirà in seguito

tns create firebasedemo --template tns-template-blank-ng  --appid io.deniscangemiapps.firebasedemo


cd firebasedemo


Come anticipato, avremo bisogno del plugin Firebase di Eddy Verbruggen, quindi installiamolo

tns plugin add nativescript-plugin-firebase

Durate l'installazione, ci verrà richiesto quali servizi vogliamo utilizzare in modo da scaricare solo le dipendenze necessarie. Noi avremo bisogno di Firestore, il db di Firebase per le funzionalità CRUD e di Google Authentication per l'autenticazione

Creazione progetto in Firebase

Apri https://console.firebase.google.com, autenticati con il tuo account Google e crea un nuovo progetto seguendo i passi indicati 


Ora ti troverai nella dashboard del tuo progetto

Andiamo ora a configurare il necessario per far girare la nostra app sia su Android che IOS

Inziamo con Android, clicca sulla sua celebre icona e il primo dato che ci viene richiesto è l'id della nostra app che abbiamo indicato precedentemente in fase di creazione, per me era io.deniscangemiapps.firebasedemo


Clicca su "Registra app" e nella prossima schermata ci verrà suggerito di scaricare il file google-services.json. Scarichiamolo e spostiamolo all'interno del seguente path App_Resources\Android.

Una volta copiato, ritorna sulla dashboard di Firebase chiudendo il popup in quanto i 2 passi successivi non ci interessano al momento.

In alto, clicca su Aggiungi App e successivamente sull'icona di IOS.

Compiamo le stesse operazioni di prima, indichiamo l'ide del bundle 

Clicca su "Registra app" e nella prossima schermata scarica il file GoogleService-Info.plist e spostalo all'interno del seguente path App_Resources\iOS.

Ora, lanciamo tns run android o tns run ios per vedere una prima preview della nostra app sull'emulatore per accertarci che sia tutto ok, oppure lancia tns preview se vuoi visualizzarla sul tuo device tramite Nativescript Playground.

Implementazione Firebase in Nativescript

Implementare Firebase in Nativescript è un'operazione molto semplice.

Il primo passo da compiere è importare il plugin di Eddy Verbruggen e inizializzarlo, come suggerito dalla sua doc di Github, inseriremo il tutto nell'app.component, inserendo l'import del plugin e l'inizializzare nell'evento OnInit

import { Component, OnInit } from "@angular/core"; 
import * as firebase from "nativescript-plugin-firebase"; 

@Component({ 
    moduleId: module.id, 
    selector: "ns-app", 
    templateUrl: "app.component.html" 
}) 

export class AppComponent implements OnInit{ 

    ngOnInit(): void { 

        firebase.init({}).then( instance => { 

                console.log("firebase.init done"); 

            }, 

            error => { 

                console.log(`firebase.init error: ${error}`); 

            } 

        )

    } 

}

Se utilizzi Visual Studio Code come me, nel terminale del progetto dovresti visualizzare il messaggio "firebase.init done" che ci indica che l'app è stata inizializzata con successo

(see http://g.co/ng/security#xss)