Reaalajas mitme platvormiga mobiilirakenduste loomine: näited Ionic Framework'i ja Firebase'i kasutamisest

Üks suurimaid probleeme, millega ettevõtted nutitelefoni rakendust tehes kokku puutuvad, on selle mitmekordne maksumus natiivrakenduse loomine erinevatele platvormidele . Kuigi nutikad esiotsa arendajad on välja töötanud mitmete hübriidplatvormide väljatöötamise, mis lubavad aidata seda probleemi lahendada, Ionic Framework ja Firebase on dünaamiline duo, mis ühiselt annab meile hämmastava paindlikkuse reaalajas JavaScripti ja HTML5 abil töötavate nutitelefonirakenduste loomisel.

See õpetus tutvustab nende mitmeplatvormiliste mobiilsete arendustööriistade võimalusi ja pakub isegi mõningaid näiteid Ionic ja Firebase.

(Märkus. Selles artiklis eeldatakse AngularJS raamistiku põhitõdesid. Siin on a suurepärane sissejuhatav postitus teemal AngularJS neile, kellel pole seda tausta.)

Ioonilise raamistiku tutvustamine

Iooniline raamistik koosneb kolmest põhikomponendist:

1. SASS-põhine kasutajaliidese raamistik, mis on loodud ja optimeeritud mobiilsete kasutajaliideste jaoks.
2. An NurgaJS esiotsa JavaScripti raamistik, mida kasutatakse kiiresti muudetavate ja kiirete rakenduste loomiseks.
3. Koostaja ( Cordova või PhoneGap ) natiivsete mobiilirakenduste jaoks, millel on CSS, HTML ja JavaScript.

Iooniline raamistik on ka täis palju kasulikke CSS-i komponente Karbist välja.

Kiitus Ionicile, et pakkuda ulatuslikku dokumentatsiooni, näiteid ja algusvideoid, mis aitavad õppekõverat lihtsustada ja arendajad kiiresti käima saada.

Firebase'i tutvustus

Firebase on taustaprogrammina teenuseta skeemivaba andmesüsteem, mis võimaldab andmete reaalajas sünkroonimist, ilma et oleks vaja kohandatud koodi kirjutada. Firebase muudab suure osa teie tagavaraarendusest vananenuks, vähendades seeläbi märkimisväärselt mitme platvormi arendamise aega.

Peamised omadused ja eelised on järgmised:

1. Andmed muutuvad ilma koodi muutmata. Kõik andmemuudatused avaldatakse klientidele kohe, ilma et oleks vaja taustaprogrammi koodi muuta.
2. Palju adaptereid. Kõigi populaarsete JavaScripti raamistike ja mobiilplatvormi SDK-de jaoks on olemas hea toe ja dokumentatsiooniga adapterid. (Me kasutasime Nurgatuli , mis on selles artiklis Firebase'i seonduv AngularJS-ga.)
3. Autentimise lihtsus. Firebase'i autentimine on sõltumata autentimismeetodist sama lihtne kui ühe meetodi kõne. Toetab lihtsaid e-posti ja parooli, Google'i, Facebooki, Twitteri või Githubi põhiseid sisselogimisi.
4. Võrguühenduseta on lubatud. Kõik Firebase'i andmed on võrguühenduseta lubatud, nii et rakendus saab täielikult (või peaaegu täielikult) toimida ka lahtiühendatud režiimis. Rakendused sünkroonitakse ühenduse taastamisel automaatselt.
5. Konfiguratsiooni juhtpaneel. Suuremat osa Firebase'ist (näiteks turbereeglid) saab hõlpsasti konfigureerida Firebase'i intuitiivse juhtpaneeli liidese kaudu.
6. JSON-keskne. Firebase'is salvestatakse ja hangitakse kõik andmed JSON-objektide kujul.

Firebase pakub ka pilveteenuseid esiotsa koodi majutamiseks, mis võib märkimisväärselt aega juurutada ja hooldada.

Samuti väärib märkimist Firebase omandas Google möödunud oktoobris, mis on sellele märkimisväärselt rohkem tähelepanu ja nähtavust pakkunud.

Näide lihtsast kasutamisest: kulude jälgimine

Toakaaslased jagavad sageli kulutusi ja toetuvad vajaduse korral üksteisele. Niisiis, aitame toanaabritel jälgida nende kulusid ja aitame neil kuu lõpus leppida.

Asjade veelgi huvitavamaks muutmiseks ehitame mitme platvormiga mobiilirakenduse, mis pakub värskendusi reaalajas, et nad saaksid igaüks kulusid jälgida nende tekkimisel.

Nüüd, kui oleme otsustanud, mida tahame ehitada, ja meile on tutvustatud tööriistu, alustame!

Ionic ja Firebase'i alustamine

Esimene asi, mida peame tegema, on Ionic installimine. Järgige Ionicus toodud paigaldusjuhiseid Alustamine lehele. (Pange tähele, et Ionic on sõltuv SõlmJS , nii et juhised nõuavad ka selle installimist, kui teil seda veel arvutis pole).

The AngularFire 5-minutiline õpetus on suurepärane koht Firebase'iga tutvumiseks. Ja kui olete minuga sarnane nokitseja või kombatav õppija, võiksite seda tõmmata minu teostus GitHubist ja hakake koodiga mängima.

Meie mitme platvormi rakenduse kodeerimine

Selle õpetuse jaoks kasutame valimi tabs meie rakenduse aluseks olev rakendus Ionic installi osana. (Näidisrakendust saate käivitada käsuga ionic start myApp tabs.)

Avage proov tabs rakendus teie lemmik IDE-s (kasutan Veebitorm ) ja alustame seda toakaaslaste rakenduse loomiseks.

Rakenduse Ionic ja Firebase näitena vajame järgmist kolme ekraani:

Enne nende ekraanide loomist eemaldame näidisrakendusega vaikimisi pakutava „Sõprade üksikasjade kuva” järgmiselt:

1. Kustutage www/templates/friend-detail.html faili.
2. Eemaldage (või kommenteerige) olekus www/js/app.js.
3. Eemaldage jaotises friend-detail.html www/js/controllers.js kontroller, millele viidatakse olekus, mille kustutasime.

Nüüd muudame ikoonid ja meie ekraani allosas olevate vahelehtede valijate tekst on järgmine:

Seda tehakse lihtsalt järgmistes muudatustes FriendDetailCtrl

Enne kui ühendame oma andmed Firebase'iga, loome loendi ja seome selle massiivi nimega expenses järgmise koodiga www/templates/tab-dash.html lisades:

Samuti peame laiendama DashCtrl aastal www/js/controllers.js lisada expenses massiiv, samuti addExpense meetod ja a getTotal järgmiselt:

c korporatsioon versus s korporatsioon

expenses massiiv on see, mis salvestab kuludokumendi üksused addExpense() meetod lisab väärtusele expenses massiiv ja getTotal() meetod annab meile massiivi kõigi üksuste koguarvu.

Sarnane muudatuste komplekt tuleb nüüd teha ka tab-friends.html Proovige seda ise teha, kuid kui teil tekib probleeme või soovite kontrollida, kas olete seda õigesti teinud, võite viidata minu teostus saidil GitHub.

Haakimine Firebase'is

Teil on vaja Firebase'i kontot. Saate registreeruda siin tasuta Firebase'i häkkeriplaani jaoks.

Kui registreerute, saate oma juur URL , mis näeb välja umbes selline https://.firebaseio.com.

Firebase'i lubamine meie rakenduses nõuab meie rakendusest kahte väikest modifikatsiooni.

Esiteks peame rakenduse www/index.html hulka lisama Firebase'i skriptid faili järgmiselt:

Järgmisena peame oma rakendusse lisama Firebase mooduli, lisades 'starter' meie AngularJS angular.module('starter', ['ionic', 'starter.controllers', 'starter.services', 'firebase']) loendisse moodul:

Firebase on nüüd lubatud, nagu iga teine ​​AngularJS moodul.

The AngularFire 5-minutiline õpetus õpetab teid kontrollerites andmeviiteid looma. Meie demorakenduse puhul otsustasin siiski hoida need viited eraldi teenuses (kuna see muudab juur-URL-i muutmise korral palju lihtsamaks hooldamist ja värskendamist). Selle teenuse loomiseks lisage üksusele .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; } } }); järgmine:

Ülaltoodud kood lisab kolm viide-URL-i. Üks juur- ja kaks kollektsioonide jaoks, mille oleme nimetanud room-mates ja expenses.

Uue kogu lisamine Firebase'i lisatakse lihtsalt, lisades selle nime teie kogu lõppu juur URL . Nii et https://.firebaseio.com/expenses loomiseks vajame vaid järgmist:

expenses

See loob DashCtrl kogu ja seejärel saame hakata sellele objekte lisama.

OK, nüüd saame ühendada Firebase'i kulude kogumise, et asendada varem loodud 'näiv' kulude massiiv. Seda tehakse www/js/controllers.js muutmisega aastal .controller('DashCtrl', function($scope, fireBaseData, $firebase) { $scope.expenses = $firebase(fireBaseData.refExpenses()).$asArray(); $scope.addExpense = function(e) { $scope.expenses.$add({ by: , 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; }; }) järgnevalt:

Sarnane muudatuste komplekt tuleb teha ka ionic run android Soovitan uuesti proovida seda ise teha, kuid kui teil tekib probleeme või soovite kontrollida, kas olete seda õigesti teinud, võite viidata minu teostus saidil GitHub.

Rakenduse töötamise ajal kahe erineva kliendi kinnitamiseks lisage uus kulu ja veenduge, et see ilmuks mõlema kliendi loendis. Kui see töötab ... woo-hoo! Olete nüüd oma Ionic'i rakenduse Firebase'iga edukalt ühendanud!

Mitme platvormiga rakendust saate testida erinevates seadmetes, ühendades seadme oma süsteemiga ja käivitades ionic emulate ios või { 'rules': { '.read': 'auth != null', '.write': 'auth != null' } } . Lisateavet leiate ioonide dokumentatsioonist teie rakenduse testimine .

Konto haldamine ja turvalisus Firebase'i abil

Kuigi põhifunktsionaalsus töötab nüüd, on üks tõsine probleem see, et meie rakendus on praegu täiesti ebaturvaline. Teie kulud näevad kogu maailm ilma lubade ja sisselogimiseta. Sellega tuleb ilmselgelt tegeleda.

Firebase pakub võimsa, kuid lihtsa reeglite abil autentimisraamistiku. Firebase’i reeglite keele abil saab palju ära teha. (Vt Firebase'i turbedokumentatsioon üksikasjalikumalt.)

Meie puhul kirjutame väga lihtsa reegli, et tõkestada volitamata kasutajate juurdepääsu meie andmetele. Selleks avage juur-URL, klõpsake vasakul toiminguribal valikul „Turvalisus ja reeglid”, kleepige allpool olev kood reeglitesse ja klõpsake nuppu Salvesta.

Kui käivitate oma rakenduse kohe, märkate, et andmeid pole. Võite isegi proovida oma taotlust kontrollida brauseri tööriistade abil ja peaksite oma konsoolis nägema teadet, et teil pole andmete vaatamiseks luba.

Kasutajakontode loomine ja sisselogimise lubamine

Kasutajate autentimiseks võite lasta neil luua oma e-posti / parooli kombinatsiooni või kasutada mõnda olemasolevat Google'i, Facebooki, Twitteri või Githubi sisselogimismandaati. E-posti / parooli autentimiseks pakub Firebase kõiki API-meetodite komplekte parooli muutmiseks, lähtestamiseks jne. Lisateave autentimine Firebase'i abil leiate Firebase'i juhendist.

kapitali eelarvestamine on investeeringute kavandamise ja kontrollimise protsess

Meie demorakenduse jaoks loome Firebase'i liidese kaudu kaks kasutajakontot. Seda saab teha minnes oma Firebase'i juur-URL-i ja tehes järgmist.

1. Klõpsake vasakul küljel asuvat toimimisriba Logi sisse ja Auth.
2. Märkige ruut E-posti ja parooli autentimise lubamine.
3. Kerige alla, et leida vorm „Uute kontode lisamine”
4. Lisage oma kontod, kasutades valikut „Lisa uus kasutaja”.

Kasutajatele sisselogimisliidese lubamiseks lisage esmalt järgmine kood Email Password Login You are logged in as {{user.password.email}} Logout

Seejärel lisage www/controller.js -i järgmine sisse .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; }; }); :

Turvalisuse seisukohast on oluline teada seda Firebase'i sisselogimised on vaikimisi püsivad . Seega, kui soovite, et teie kasutaja peaks iga kord rakenduse käivitamisel sisse logima, peate vastavalt muutma ka Firebase'i konfiguratsiooni. Selleks lihtsalt üks kord pärast edukat sisselogimist käivitage järgmine kood:

Saate selle pärast edukat sisselogimist kontokontrollerisse lisada või pärast edukat sisselogimist murda ja käivitada see oma konsooli inspektoris.

Filtreerimine kasutaja järgi

Mitme platvormiga mobiilirakendusel puudub siiski üks oluline funktsioon. Soovime eristada teie kulutusi toakaaslasest. Nüüd, kui oleme loonud kaks kontot, peame lihtsalt oma vaadete andmed filtreerima.

Kõigepealt peame muutma www/js/controllers.js aastal .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; }; }) (a) praeguse kasutaja andmete viimiseks $ ulatusse ja (b) praeguse kasutaja lisakulude salvestamiseks:

Järgmisena peame lisama filtri www/templates/tab-friends.html kuvada ainult praeguse kasutaja kulud:

OK, avaekraan on nüüd täiuslik. Kasutaja saab näha ja lisada ainult oma kulusid.

Viimane ja viimane samm on võimaldada kogu tooteloendi jagamine toakaaslaste vahel. Selleks muutke www/controllers.js selle filtri lisamiseks:

|_+_|

|_+_|