Creazione di applicazioni mobili multipiattaforma in tempo reale: esempi utilizzando Ionic Framework e Firebase

Uno dei principali problemi che le aziende incontrano quando realizzano un'applicazione per smartphone è il costo moltiplicativo della creazione di un'applicazione nativa su piattaforme diverse. Mentre gli esperti sviluppatori front-end si sono sintonizzati sullo sviluppo di diverse piattaforme ibride che promettono di aiutare a risolvere questo problema, Ionic Framework e Firebase sono una coppia dinamica che insieme ci offre davvero una straordinaria flessibilità nella creazione di applicazioni per smartphone in tempo reale utilizzando JavaScript e HTML5 .

Questo tutorial introduce le capacità di questi strumenti di sviluppo mobile multipiattaforma e fornisce anche alcuni esempi di Ionic e Firebase.

(Nota: questo articolo presuppone una certa familiarità con le basi del framework AngularJS. Ecco un ottimo post introduttivo su AngularJS per coloro che non hanno tale background.)

Presentazione della struttura ionica

Lo Ionic Framework è composto da tre componenti principali:

1. Un framework UI basato su SASS progettato e ottimizzato per UI mobili.
2. Un framework JavaScript front-end AngularJS utilizzato per creare rapidamente applicazioni scalabili e veloci.
3. Un compilatore (Cordova o PhoneGap) per applicazioni mobili native con CSS, HTML e JavaScript.

Il framework Ionic è anche ricco di molti utili componenti CSS pronti all'uso.

Complimenti a Ionic per aver fornito un'ampia documentazione, esempi e video introduttivi per aiutare a semplificare la curva di apprendimento e far funzionare rapidamente gli sviluppatori.

Presentazione di Firebase

Firebase è un sistema di dati senza schema back-end-as-a-service che fornisce la sincronizzazione dei dati in tempo reale senza richiedere la scrittura di codice personalizzato. Firebase rende obsoleto gran parte del tuo sviluppo back-end, riducendo così notevolmente i tempi di sviluppo multipiattaforma.

Le caratteristiche e i vantaggi principali includono:

1. Modifiche ai dati senza modifiche al codice. Tutte le modifiche ai dati vengono pubblicate immediatamente sui client, senza che sia necessaria alcuna modifica del codice back-end.
2. Molti adattatori. Sono disponibili adattatori, con un buon supporto e documentazione, per tutti i framework JavaScript più diffusi e gli SDK per piattaforme mobili. (Abbiamo usato AngularFire, che è l'associazione AngularJS per Firebase, in questo articolo.)
3. Facilità di autenticazione. L'autenticazione in Firebase è semplice come una singola chiamata al metodo, indipendentemente dal metodo di autenticazione. Supporta e-mail e password semplici, accessi basati su Google, Facebook, Twitter o Github.
4. Abilitato offline. Tutti i dati di Firebase sono abilitati offline, quindi un'applicazione può essere completamente (o quasi) funzionante in modalità disconnessa. Le applicazioni vengono sincronizzate automaticamente al ripristino della connessione.
5. Dashboard di configurazione. Gran parte di Firebase (regole di sicurezza, ad esempio) può essere facilmente configurata tramite l'interfaccia dashboard intuitiva di Firebase.
6. JSON-centrico. In Firebase, tutti i dati vengono archiviati e recuperati sotto forma di oggetti JSON.

Firebase offre anche servizi cloud per l'hosting del codice front-end che può richiedere molto tempo nell'implementazione e nella manutenzione.

Vale anche la pena notare che Firebase è stata acquisita da Google lo scorso ottobre, cosa che gli ha dato molta più attenzione e visibilità.

Un semplice esempio di caso d'uso: monitoraggio delle spese

I coinquilini spesso condividono le spese e fanno affidamento l'uno sull'altro nei momenti di bisogno. Quindi, aiutiamo i coinquilini a tenere traccia delle loro spese e li aiutiamo a riconciliarsi alla fine del mese.

Per rendere le cose ancora più interessanti, creiamo un'applicazione mobile multipiattaforma che fornirà aggiornamenti in tempo reale, in modo che ciascuno possa monitorare le spese man mano che si verificano.

Ora che abbiamo deciso cosa vogliamo costruire e siamo stati introdotti agli strumenti, iniziamo!

Introduzione a Ionic e Firebase

La prima cosa che dobbiamo fare è installare Ionic. Segui le istruzioni di installazione fornite nella pagina introduttiva di Ionic. (Nota che Ionic ha una dipendenza da NodeJS, quindi le istruzioni richiederanno di installarlo anche se non lo hai già sul tuo computer).

Il tutorial di 5 minuti di AngularFire è un ottimo posto per iniziare a familiarizzare con Firebase. E se sei un "armeggiatore" o uno studente tattile come me, potresti voler estrarre la mia implementazione da GitHub e iniziare a giocare con il codice.

Codifica la nostra app multipiattaforma

Per questo tutorial, utilizzeremo l'app di tabs di esempio fornita come parte dell'installazione di Ionic come base per la nostra app. (Puoi eseguire l'app di esempio con il comando ionic start myApp tabs .)

Apri l'app delle tabs di esempio nel tuo IDE preferito (sto usando Webstorm) e iniziamo a modificarla per creare la nostra app per i coinquilini.

Per la nostra app Ionic e Firebase di esempio, avremo bisogno delle seguenti tre schermate:

Prima di creare queste schermate, rimuoviamo la "Schermata dei dettagli degli amici" fornita per impostazione predefinita con l'app di esempio come segue:

1. Elimina il file www/templates/friend-detail.html .
2. In www/js/app.js , rimuovi (o commenta) lo stato per friend-detail.html .
3. In www/js/controllers.js , rimuovi il controller FriendDetailCtrl a cui si fa riferimento nello stato che abbiamo eliminato.

Ora cambiamo le icone e il testo dei selettori delle schede nella parte inferiore del nostro schermo in modo che siano i seguenti:

Questo viene fatto semplicemente apportando le seguenti modifiche in www/templates/tabs.html :

 <ion-tabs class="tabs-icon-top"> <!-- My Tab --> <ion-tab title="My Expense" icon="icon ion-log-in" href="#/tab/dash"> <ion-nav-view name="tab-dash"></ion-nav-view> </ion-tab> <!-- Friends Tab --> <ion-tab title="Roomie's" icon="icon ion-log-out" href="#/tab/friends"> <ion-nav-view name="tab-friends"></ion-nav-view> </ion-tab> <!-- Account --> <ion-tab title="Account" icon="icon ion-ios7-gear" href="#/tab/account"> <ion-nav-view name="tab-account"></ion-nav-view> </ion-tab> </ion-tabs>

Prima di collegare i nostri dati a Firebase, creiamo un elenco e lo colleghiamo a un array chiamato expenses aggiungendo il seguente codice a www/templates/tab-dash.html :

 <ion-view title="My Expenses"> <ion-content> <ion-list> <ion-item ng-repeat="expense in expenses|filter:user.password.email" type="item-text-wrap"> {{expense.label}} <span class="badge badge-balanced">{{expense.cost}}</span> </ion-item> </ion-list> <div class="card assertive"> <div class="item item-text-wrap"> Total Spent <span class="badge badge-positive">{{getTotal()}}</span> </div> </div> </ion-content> <ion-footer-bar> <input ng-model='label' type='text' placeholder='Type a new expense...' /> <input ng-model='cost' type="number" placeholder='$' /> <button class="button icon-left ion-plus" ng-click="addExpense($event)">Add</button> </ion-footer-bar> </ion-view>

Dovremo anche estendere DashCtrl in www/js/controllers.js per includere l'array delle expenses , nonché un metodo addExpense e un metodo getTotal , come segue:

 .controller('DashCtrl', function($scope) { $scope.expenses = [{ by: 'email', label: 'test', cost: 10 }]; $scope.addExpense = function(e) { $scope.expenses.push({ by: < some email > label: $scope.label, cost: $scope.cost }); $scope.label = ""; $scope.cost = 0; }; $scope.getTotal = function() { var rtnTotal = 0; for (var i = 0; i < $scope.expenses.length; i++) { rtnTotal += $scope.expenses[i].cost; } return rtnTotal; }; })

L'array expenses è ciò che memorizza gli elementi nell'elenco delle spese, il metodo addExpense() aggiunge un nuovo valore all'array delle expenses e il metodo getTotal() ci fornisce il totale di tutti gli elementi nell'array.

Ora è necessario apportare una serie simile di modifiche a tab-friends.html . Prova a farlo da solo, ma se riscontri problemi o vuoi verificare di averlo fatto correttamente, puoi fare riferimento alla mia implementazione su GitHub.

Aggancio a Firebase

Avrai bisogno di un account Firebase. Puoi iscriverti qui per un "Piano Hacker" Firebase gratuito.

Una volta registrato, riceverai il tuo URL di root , che assomiglierà a https://<yourfirebase>.firebaseio.com .

L'abilitazione di Firebase nella nostra app richiede due piccole modifiche alla nostra app.

Innanzitutto, dobbiamo includere gli script Firebase nel file www/index.html dell'app come segue:

 <script src='https://cdn.firebase.com/js/client/1.1.1/firebase.js'></script> <script src='https://cdn.firebase.com/libs/angularfire/0.8.0/angularfire.min.js'></script> <script src="js/app.js"></script>

Successivamente, dobbiamo aggiungere il modulo Firebase alla nostra applicazione aggiungendo 'firebase' all'elenco nel nostro modulo 'starter' AngularJS:

 angular.module('starter', ['ionic', 'starter.controllers', 'starter.services', 'firebase'])

Firebase è ora abilitato, proprio come qualsiasi altro modulo AngularJS.

Il tutorial di 5 minuti di AngularFire ti insegnerà a creare riferimenti ai dati nei controller. Per la nostra app demo, tuttavia, ho deciso di mantenere questi riferimenti in un servizio separato (poiché ciò semplifica notevolmente la manutenzione e l'aggiornamento se l'URL di root viene modificato). Per creare questo servizio, aggiungi quanto segue a www/js/services.js :

 .factory('fireBaseData', function($firebase) { var ref = new Firebase("https://luminous-fire-3429.firebaseio.com/"), refExpenses = new Firebase("https://luminous-fire-3429.firebaseio.com/expenses"), refRoomMates = new Firebase("https://luminous-fire-3429.firebaseio.com/room-mates"); return { ref: function() { return ref; }, refExpenses: function() { return refExpenses; }, refRoomMates: function() { return refRoomMates; } } });

Il codice sopra aggiunge tre URL di riferimento. Uno per la radice e due per le raccolte che abbiamo chiamato expenses e room-mates .

L'aggiunta di una nuova raccolta a Firebase viene eseguita semplicemente aggiungendo il suo nome alla fine dell'URL di root . Quindi, per creare la riscossione delle expenses di cui avremo bisogno, tutto ciò di cui abbiamo bisogno è quanto segue:

https://<yourfirebase>.firebaseio.com/expenses

Questo creerà la raccolta delle expenses e potremo quindi iniziare ad aggiungere oggetti ad essa.

OK, ora possiamo agganciare la riscossione delle spese da Firebase per sostituire l'array di spese "fittizie" che abbiamo creato in precedenza. Questo viene fatto modificando DashCtrl in www/js/controllers.js come segue:

 .controller('DashCtrl', function($scope, fireBaseData, $firebase) { $scope.expenses = $firebase(fireBaseData.refExpenses()).$asArray(); $scope.addExpense = function(e) { $scope.expenses.$add({ by: < someemail > , label: $scope.label, cost: $scope.cost }); $scope.label = ""; $scope.cost = 0; }; $scope.getTotal = function() { var rtnTotal = 0; for (var i = 0; i < $scope.expenses.length; i++) { rtnTotal += $scope.expenses[i].cost; } return rtnTotal; }; })

Una serie simile di modifiche deve essere apportata a FriendsCtrl . Ti consiglio ancora una volta di provare a farlo da solo, ma se riscontri problemi o vuoi verificare di averlo fatto correttamente, puoi fare riferimento alla mia implementazione su GitHub.

Per verificare che funzioni, durante l'esecuzione dell'app su due client diversi, aggiungi una nuova spesa e verifica che venga visualizzata nell'elenco di entrambi i client. Se funziona... woo-hoo! Ora hai collegato con successo la tua app Ionic a Firebase!

Puoi testare la tua app multipiattaforma su dispositivi diversi collegando un dispositivo al tuo sistema ed eseguendo ionic run android o ionic emulate ios . Fare riferimento alla documentazione di Ionic per ulteriori informazioni sul test dell'app.

Gestione e sicurezza dell'account con Firebase

Sebbene la funzionalità di base ora funzioni, un problema serio è che la nostra app è attualmente completamente insicura. Il mondo intero può vedere le tue spese, senza che siano richiesti permessi o accessi. Questo ovviamente deve essere affrontato.

Firebase fornisce un framework di autenticazione potente ma semplice utilizzando "regole". C'è molto che si può fare usando il linguaggio delle regole di Firebase. (Per maggiori dettagli, fare riferimento alla documentazione sulla sicurezza di Firebase.)

Nel nostro caso, scriveremo una regola molto semplice per impedire agli utenti non autorizzati di accedere ai nostri dati. Per fare ciò, apri il tuo URL di root, fai clic su "Sicurezza e regole" nella barra delle azioni a sinistra, incolla il codice qui sotto nelle tue regole e fai clic su Salva.

 { "rules": { ".read": "auth != null", ".write": "auth != null" } }

Se esegui ora la tua applicazione, noterai che non ci sono dati. Puoi anche provare a controllare la tua richiesta utilizzando gli strumenti del browser e dovresti vedere un messaggio nella tua console che afferma che non sei autorizzato a visualizzare i dati.

Creazione di account utente e abilitazione dell'accesso

Puoi autenticare i tuoi utenti consentendo loro di creare la propria combinazione e-mail/password o utilizzare le credenziali di accesso di Google, Facebook, Twitter o Github esistenti. Per l'autenticazione tramite e-mail/password, Firebase offre un set completo di metodi API per la modifica, la reimpostazione della password, ecc. Ulteriori informazioni sull'autenticazione tramite Firebase sono disponibili nella guida di Firebase.

Per la nostra app demo, creeremo due account utente tramite l'interfaccia Firebase. Questo può essere fatto andando all'URL della radice di Firebase e procedendo come segue:

1. Fare clic su Accesso e autenticazione nella barra delle azioni sul lato sinistro.
2. Seleziona la casella di controllo Abilita autenticazione e-mail e password.
3. Scorri verso il basso per trovare il "Modulo Aggiungi nuovi account"
4. Aggiungi i tuoi account usando "Aggiungi nuovo utente".

Per abilitare l'interfaccia di accesso per i tuoi utenti, aggiungi prima il seguente codice a www/templates/tab-account.html :

 <ion-view title="Account"> <ion-content> <div class="list" ng-show="showLoginForm"> <label class="item item-input"> <span class="input-label">Email</span><input type="text" ng-model="em"/> </label> <label class="item item-input"> <span class="input-label">Password</span><input type="password" ng-model="pwd"/> </label> <button class="button button-block button-positive" ng-click="login(em, pwd)">Login</button> </div> <div class="card" ng-hide="showLoginForm"> <div class="item item-text-wrap">You are logged in as {{user.password.email}}</div> </div> <button class="button button-stable" ng-click="logout()" ng-hide="showLoginForm">Logout</button> </ion-content> </ion-view>

Quindi aggiungi quanto segue a AccountCtrl in www/controller.js :

 .controller('AccountCtrl', function($scope, fireBaseData) { $scope.showLoginForm = false; //Checking if user is logged in $scope.user = fireBaseData.ref().getAuth(); if (!$scope.user) { $scope.showLoginForm = true; } //Login method $scope.login = function (em, pwd) { fireBaseData.ref().authWithPassword({ email : em, password : pwd },function(error, authData) { if (error === null) { console.log("User ID: " + authData.uid + ", Provider: " + authData.provider); $scope.user = fireBaseData.ref().getAuth(); $scope.showLoginForm = false; $scope.$apply(); } else { console.log("Error authenticating user:", error); } }); }; // Logout method $scope.logout = function () { fireBaseData.ref().unauth(); $scope.showLoginForm = true; }; });

Una cosa importante da tenere presente dal punto di vista della sicurezza è che gli accessi Firebase sono persistenti per impostazione predefinita . Pertanto, se desideri che il tuo utente debba effettuare il login ogni volta che viene avviata l'applicazione, dovrai modificare di conseguenza la configurazione di Firebase. Per fare ciò, solo una volta dopo un accesso riuscito, eseguire il seguente codice:

 var r = $firebase(fireBaseData.refRoomMates()).$asArray(); // NOTE: Substitute the email addresses of your two user accounts in the line below r.$add(["[email protected]","[email protected]"]);

Puoi aggiungerlo nel controller dell'account dopo l'accesso riuscito o inserire un punto di interruzione dopo l'accesso riuscito ed eseguirlo nell'ispettore della console.

Filtraggio in base all'utente

Tuttavia, all'app mobile multipiattaforma manca ancora una caratteristica importante. Vogliamo distinguere le tue spese da quelle del tuo coinquilino. Ora che abbiamo creato due account, non ci resta che filtrare i dati sulle nostre viste.

Dobbiamo prima modificare dashCtrl in www/js/controllers.js per (a) ottenere i dati per l'utente corrente in $ scope e (b) salvare eventuali spese aggiuntive per l'utente corrente:

 .controller('DashCtrl', function($scope, fireBaseData, $firebase) { $scope.expenses = $firebase(fireBaseData.refExpenses()).$asArray(); $scope.user = fireBaseData.ref().getAuth(); // ADD MESSAGE METHOD $scope.addExpense = function(e) { $scope.expenses.$add({ by: $scope.user.password.email, label: $scope.label, cost: $scope.cost }); $scope.label = ""; $scope.cost = 0; }; $scope.getTotal = function () { var rtnTotal = 0; for (var i = 0; i < $scope.expenses.length; i++) { rtnTotal += $scope.expenses[i].cost; } return rtnTotal; }; })

Successivamente dobbiamo aggiungere un filtro in www/templates/tab-dash.html per mostrare solo le spese dell'utente corrente:

 <ion-item ng-repeat="expense in expenses|filter:user.password.email" type="item-text-wrap">

OK, la schermata Home ora è perfetta. Un utente può solo vedere e aggiungere le proprie spese.

L'ultimo e ultimo passaggio è consentire la condivisione dell'elenco delle spese completo tra i coinquilini. Per farlo, cambia www/templates/tab-friends.html per aggiungere questo filtro:

 <ion-item ng-repeat="expense in expenses|filter:roomiesEmail" type="item-text-wrap">

Quindi modifica FriendsCtrl in www/controllers.js come segue:

 .controller('FriendsCtrl', function($scope, fireBaseData, $firebase) { $scope.user = fireBaseData.ref().getAuth(); $scope.expenses = $firebase(fireBaseData.refExpenses()).$asArray(); $scope.roomies = $firebase(fireBaseData.refRoomMates()).$asArray(); $scope.roomies.$loaded().then(function(array) { //array = [[set1_rm1_email, set1_rm2_email], [set2_rm1_email, set2_rm2_email] ...] for (var i = 0; i < array.length; i++) { if (array[i][0] === $scope.user.password.email) { $scope.roomiesEmail = array[i][1]; } else if (array[i][1] === $scope.user.password.email) { $scope.roomiesEmail = array[i][0]; } } $scope.$apply(); // NOTE: For simplicity, this demo only supports the 2-roommate use case }); $scope.addExpense = function(e) { $scope.expenses.$add({ by: $scope.roomiesEmail, label: $scope.label, cost: $scope.cost }); $scope.label = ""; $scope.cost = 0; }; $scope.getTotal = function () { var rtnTotal = 0; for (var i = 0; i < $scope.expenses.length; i++) { rtnTotal += $scope.expenses[i].cost; } return rtnTotal; }; })

Questo è tutto! Installa/aggiorna l'app sia sul tuo dispositivo che sul dispositivo del tuo coinquilino e dovresti essere tutto pronto!

Incartare

Il nostro semplice esempio inizia solo a scalfire la superficie di ciò che può essere realizzato – e quanto facilmente può essere realizzato – usando Ionic e Firebase. Sono davvero una coppia potente per la creazione di applicazioni per smartphone multipiattaforma in tempo reale utilizzando JavaScript e HTML5.