Crearea de aplicații mobile în timp real, cu mai multe platforme: exemple folosind Ionic Framework și Firebase

Una dintre problemele majore cu care se confruntă companiile atunci când realizează o aplicație pentru smartphone este costul multiplicativ al construirii unei aplicații native pe diferite platforme. În timp ce dezvoltatorii inteligenți front-end s-au adaptat la dezvoltarea mai multor platforme hibride care promit să contribuie la rezolvarea acestei probleme, Ionic Framework și Firebase sunt un duo dinamic care împreună ne oferă o flexibilitate uimitoare în construirea de aplicații pentru smartphone-uri în timp real folosind JavaScript și HTML5. .

Acest tutorial prezintă capacitățile acestor instrumente de dezvoltare mobilă multiplatformă și oferă chiar câteva exemple Ionic și Firebase.

(Notă: Acest articol presupune o anumită familiaritate cu elementele de bază ale cadrului AngularJS. Iată o postare introductivă grozavă despre AngularJS pentru cei fără acest context.)

Prezentarea Cadrului Ionic

Cadrul ionic este format din trei componente principale:

1. Un cadru UI bazat pe SASS, conceput și optimizat pentru interfețele mobile.
2. Un cadru JavaScript front-end AngularJS folosit pentru a construi rapid aplicații scalabile și rapide.
3. Un compilator (Cordova sau PhoneGap) pentru aplicații mobile native cu CSS, HTML și JavaScript.

Cadrul Ionic este, de asemenea, plin cu o mulțime de componente CSS utile.

Felicitari lui Ionic pentru că a furnizat documentație extinsă, exemple și videoclipuri de pornire pentru a ajuta la simplificarea curbei de învățare și pentru ca dezvoltatorii să funcționeze rapid.

Vă prezentăm Firebase

Firebase este un sistem de date backend-as-a-service, fără schemă, care oferă sincronizarea datelor în timp real, fără a fi nevoie să fie scris vreun cod personalizat. Firebase face ca o mare parte din dezvoltarea dvs. back-end să fie depășită, reducând astfel semnificativ timpul de dezvoltare pe mai multe platforme.

Caracteristicile și beneficiile cheie includ:

1. Datele se modifică fără modificări de cod. Toate modificările datelor sunt publicate imediat clienților, fără a fi necesară modificarea codului backend.
2. O mulțime de adaptoare. Există adaptoare, cu suport și documentare bune, pentru toate cadrele JavaScript populare și SDK-uri pentru platforme mobile. (Am folosit AngularFire, care este legarea AngularJS pentru Firebase, în acest articol.)
3. Ușurință de autentificare. Autentificarea în Firebase este la fel de simplă ca o singură metodă de apel, indiferent de metoda de autentificare. Acceptă e-mail și parolă simple, autentificări bazate pe Google, Facebook, Twitter sau Github.
4. Offline activat. Toate datele Firebase sunt activate offline, astfel încât o aplicație poate fi complet (sau aproape complet) funcțională în modul deconectat. Aplicațiile sunt sincronizate automat când conexiunea este restabilită.
5. Tabloul de bord de configurare. O mare parte din Firebase (reguli de securitate, de exemplu) poate fi configurată cu ușurință prin interfața intuitivă a tabloului de bord a Firebase.
6. Centrat pe JSON. În Firebase, toate datele sunt stocate și preluate sub formă de obiecte JSON.

Firebase oferă, de asemenea, servicii cloud pentru găzduirea codului front-end, care poate dura mult timp în implementare și întreținere.

De asemenea, merită remarcat faptul că Firebase a fost achiziționat de Google în octombrie trecut, ceea ce i-a oferit mult mai multă atenție și vizibilitate.

Un exemplu de caz de utilizare simplu: Urmărirea cheltuielilor

Colegii de cameră împart adesea cheltuielile și se bazează unul pe altul în momente de nevoie. Așadar, să-i ajutăm pe colegii de cameră să își urmărească cheltuielile și să-i ajutăm să se împace la sfârșitul lunii.

Pentru a face lucrurile și mai interesante, haideți să construim o aplicație mobilă multi-platformă care va oferi actualizări în timp real, astfel încât fiecare să poată monitoriza cheltuielile pe măsură ce apar.

Acum că ne-am hotărât ce vrem să construim și ne-am făcut cunoștință cu instrumentele, să începem!

Noțiuni introductive cu Ionic și Firebase

Primul lucru pe care trebuie să-l facem este să instalăm Ionic. Urmați instrucțiunile de instalare furnizate pe pagina Ionic Noțiuni introductive. (Rețineți că Ionic are o dependență de NodeJS, așa că instrucțiunile vă vor cere să instalați și asta dacă nu îl aveți deja pe mașina dvs.).

Tutorialul AngularFire de 5 minute este un loc minunat pentru a începe să vă familiarizați cu Firebase. Și dacă sunteți un „făcător” sau un învățat tactil ca mine, poate doriți să îmi extrageți implementarea din GitHub și să începeți să vă jucați cu codul.

Codarea aplicației noastre multi-platformă

Pentru acest tutorial, vom folosi aplicația eșantion de tabs furnizată ca parte a instalării Ionic ca bază pentru aplicația noastră. (Puteți rula aplicația eșantion cu comanda ionic start myApp tabs .)

Deschideți aplicația eșantion de tabs în IDE-ul dvs. preferat (folosesc Webstorm) și să începem să o modificăm pentru a construi aplicația pentru colegii de cameră.

Pentru exemplul nostru de aplicație Ionic și Firebase, vom avea nevoie de următoarele trei ecrane:

Înainte de a crea aceste ecrane, să eliminăm „Ecranul cu detalii Prieteni” furnizat implicit cu aplicația exemplu, după cum urmează:

1. Ștergeți fișierul www/templates/friend-detail.html .
2. În www/js/app.js , eliminați (sau comentați) starea pentru friend-detail.html .
3. În www/js/controllers.js , eliminați controlerul FriendDetailCtrl la care se face referire în starea pe care am șters-o.

Acum să schimbăm pictogramele și textul selectoarelor de file din partea de jos a ecranului nostru, astfel încât să fie următoarele:

Acest lucru se face pur și simplu făcând următoarele modificări în 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>

Înainte de a conecta datele noastre la Firebase, să creăm o listă și să o legăm la o matrice numită expenses , adăugând următorul cod la 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>

De asemenea, va trebui să extindem DashCtrl în www/js/controllers.js pentru a include matricea de expenses , precum și o metodă addExpense și o metodă getTotal , după cum urmează:

 .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; }; })

Matricea de expenses este cea care stochează articolele în lista de cheltuieli, metoda addExpense() adaugă o nouă valoare matricei de expenses , iar metoda getTotal() ne oferă totalul tuturor articolelor din matrice.

Acum trebuie făcut un set similar de modificări la tab-friends.html . Încercați să faceți acest lucru pe cont propriu, dar dacă întâmpinați probleme sau doriți să verificați că ați făcut acest lucru corect, puteți consulta implementarea mea pe GitHub.

Conectare în Firebase

Veți avea nevoie de un cont Firebase. Vă puteți înscrie aici pentru un „Plan hacker” Firebase gratuit.

După ce vă înregistrați, veți primi adresa URL de rădăcină , care va arăta ceva de genul https://<yourfirebase>.firebaseio.com .

Activarea Firebase în aplicația noastră necesită două mici modificări pentru aplicația noastră.

Mai întâi, trebuie să includem scripturile Firebase în fișierul www/index.html al aplicației, după cum urmează:

 <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>

În continuare, trebuie să adăugăm modulul Firebase la aplicația noastră adăugând 'firebase' la lista din modulul nostru 'starter' AngularJS:

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

Firebase este acum activat, la fel ca orice alt modul AngularJS.

Tutorialul AngularFire de 5 minute vă va învăța să creați referințe de date în controlere. Pentru aplicația noastră demo, totuși, am decis să păstrez aceste referințe într-un serviciu separat (din moment ce acest lucru face mult mai ușor de întreținut și actualizat dacă URL-ul rădăcină este schimbat). Pentru a crea acest serviciu, adăugați următoarele la 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; } } });

Codul de mai sus adaugă trei adrese URL de referință. Unul pentru rădăcină și două pentru colecțiile pe care le-am numit expenses și room-mates .

Adăugarea unei noi colecții la Firebase se face pur și simplu prin adăugarea numelui acesteia la sfârșitul adresei URL rădăcină . Deci, pentru a crea colectarea de expenses de care vom avea nevoie, tot ce ne trebuie este următorul:

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

Aceasta va crea colectarea expenses și apoi putem începe să adăugăm obiecte la aceasta.

OK, acum putem conecta colectarea de cheltuieli de la Firebase pentru a înlocui matricea de cheltuieli „fachinică” pe care am creat-o mai devreme. Acest lucru se face prin modificarea DashCtrl în www/js/controllers.js , după cum urmează:

 .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; }; })

Un set similar de modificări trebuie făcut la FriendsCtrl . Vă recomand din nou să încercați să faceți acest lucru pe cont propriu, dar dacă întâmpinați probleme sau doriți să verificați că ați făcut acest lucru corect, puteți consulta implementarea mea pe GitHub.

Pentru a verifica dacă funcționează, în timp ce rulați aplicația pe doi clienți diferiți, adăugați o cheltuială nouă și vedeți că aceasta apare în listă pentru ambii clienți. Dacă funcționează... woo-hoo! Acum v-ați conectat cu succes aplicația Ionic la Firebase!

Puteți testa aplicația multiplatformă pe diferite dispozitive conectând un dispozitiv la sistemul dvs. și rulând ionic run android sau ionic emulate ios . Consultați documentația Ionic pentru mai multe informații despre testarea aplicației dvs.

Managementul contului și securitatea cu Firebase

Deși funcționalitatea de bază funcționează acum, o problemă serioasă este că aplicația noastră este în prezent complet nesigură. Întreaga lume vă poate vedea cheltuielile, fără a fi necesare permisiuni sau autentificări. Acest lucru, evident, trebuie abordat.

Firebase oferă un cadru de autentificare puternic, dar simplu, folosind „reguli”. Există multe care se pot face folosind limbajul regulilor Firebase. (Consultați documentația de securitate Firebase pentru mai multe detalii.)

În cazul nostru, vom scrie o regulă foarte simplă pentru a bloca accesul utilizatorilor neautorizați la datele noastre. Pentru a face acest lucru, deschideți adresa URL rădăcină, faceți clic pe „Securitate și reguli” în bara de acțiuni din stânga, inserați codul de mai jos în regulile dvs. și faceți clic pe Salvare.

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

Dacă rulați aplicația dvs. acum, veți observa că nu există date. Puteți chiar să încercați să vă inspectați solicitarea utilizând instrumentele browserului și ar trebui să vedeți un mesaj în consola dvs. care să arate că nu sunteți autorizat să vizualizați datele.

Crearea conturilor de utilizator și activarea autentificarii

Puteți să vă autentificați utilizatorii permițându-i să creeze propria lor combinație de e-mail/parolă sau să utilizeze oricare dintre acreditările de conectare Google, Facebook, Twitter sau Github existente. Pentru autentificarea prin e-mail/parolă, Firebase oferă un set complet de metode API pentru schimbarea, resetarea parolei etc. Mai multe informații despre autentificare folosind Firebase pot fi găsite în ghidul Firebase.

Pentru aplicația noastră demonstrativă, vom crea două conturi de utilizator prin interfața Firebase. Acest lucru se poate face accesând adresa URL rădăcină Firebase și făcând următoarele:

1. Faceți clic pe Login & Auth din bara de acțiuni din partea stângă.
2. Bifați caseta de selectare pentru a activa autentificarea prin e-mail și parolă.
3. Derulați în jos pentru a găsi „Formular Adăugați conturi noi”
4. Adăugați-vă conturile utilizând „Adăugați un utilizator nou”.

Pentru a activa interfața de conectare pentru utilizatorii dvs., adăugați mai întâi următorul cod la 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>

Apoi adăugați următoarele la AccountCtrl în 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; }; });

Un lucru important de care trebuie să fii conștient din punct de vedere al securității este că conectările Firebase sunt persistente în mod implicit . Prin urmare, dacă doriți ca utilizatorul să se autentifice de fiecare dată când aplicația este pornită, va trebui să modificați configurația Firebase în consecință. Pentru a face acest lucru, doar o dată după o conectare cu succes, executați următorul cod:

 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]"]);

Puteți adăuga acest lucru în controlerul de cont după autentificarea cu succes sau puteți pune un punct de pauză după conectarea cu succes și îl puteți rula în inspectorul consolei.

Filtrarea în funcție de utilizator

Cu toate acestea, aplicației mobile multi-platformă îi lipsește încă o caracteristică importantă. Dorim să distingem cheltuielile tale de cele ale colegului tău de cameră. Acum că am creat două conturi, trebuie doar să filtram datele din vizualizările noastre.

Mai întâi trebuie să modificăm dashCtrl în www/js/controllers.js pentru a (a) să obținem datele pentru utilizatorul curent în $scope și (b) să salvăm orice cheltuieli adăugate pentru utilizatorul actual:

 .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; }; })

Apoi, trebuie să adăugăm un filtru în www/templates/tab-dash.html pentru a afișa doar cheltuielile utilizatorului curent:

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

OK, ecranul de pornire este acum perfect. Un utilizator poate vedea și adăuga doar propriile cheltuieli.

Ultimul și ultimul pas este să permiteți partajarea listei complete de cheltuieli între colegii de cameră. Pentru a face acest lucru, modificați www/templates/tab-friends.html pentru a adăuga acest filtru:

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

Apoi modificați FriendsCtrl în www/controllers.js după cum urmează:

 .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; }; })

Asta e! Instalați/actualizați aplicația atât pe dispozitivul dvs., cât și pe cel al colegului de cameră și ar trebui să fiți gata!

Învelire

Exemplul nostru simplu începe doar să zgârie suprafața a ceea ce poate fi realizat - și cât de ușor poate fi realizat - folosind Ionic și Firebase. Sunt cu adevărat un duo puternic pentru construirea de aplicații pentru smartphone-uri în timp real, multi-platformă, folosind JavaScript și HTML5.