Reāllaika, daudzplatformu mobilo lietojumprogrammu veidošana: Ionic Framework un Firebase izmantošanas piemēri

Viena no lielākajām problēmām, ar ko uzņēmumiem rodas, veidojot viedtālruņa lietojumprogrammu, ir multiplikatīvās izmaksas veidojot vietējo lietojumprogrammu dažādās platformās . Kamēr gudri priekšgala izstrādātāji ir izstrādājuši vairākas hibrīdplatformas, kas sola palīdzēt risināt šo problēmu, Jonu ietvars un Firebase ir dinamisks duets, kas kopā patiešām dod mums pārsteidzošu elastību reāllaika viedtālruņu lietojumprogrammu veidošanā, izmantojot JavaScript un HTML5.

Šī apmācība iepazīstina ar šo daudzplatformu mobilo izstrādes rīku iespējām un pat sniedz dažus Ionic un Firebase piemērus.

(Piezīme. Šajā rakstā tiek pārzināta AngularJS ietvara pamati. Lūk, a lielisks ievada ziņojums par AngularJS tiem, kuriem nav šī fona.)

Iepazīstinām ar jonu sistēmu

Jonisko ietvarstruktūru veido trīs galvenās sastāvdaļas:

1. SASS bāzes UI ietvars, kas izstrādāts un optimizēts mobilajām lietotāja saskarnēm.
2. An StūraJS front-end JavaScript ietvars, ko izmanto, lai ātri izveidotu mērogojamas un ātras lietojumprogrammas.
3. Sastādītājs ( Kordova vai PhoneGap ) vietējām mobilajām lietojumprogrammām ar CSS, HTML un JavaScript.

Jonu ietvars ir arī pildīts daudz noderīgu CSS komponentu Ārā no kastes.

Kudos to Ionic, sniedzot plašu dokumentāciju, piemērus un iesācēju videoklipus, kas palīdz vienkāršot mācīšanās līkni un ļauj izstrādātājiem ātri darboties.

kurš no šiem ir labi pārzina html5, javascript un css?

Iepazīstinām ar Firebase

Firebase ir backend-as-a-service shēma bez datu sistēmas, kas nodrošina datu sinhronizēšanu reāllaikā, neprasot rakstīt pielāgotu kodu. Firebase padara lielu daļu no jūsu aizmugures izstrādes novecojušu, tādējādi ievērojami samazinot vairāku platformu izstrādes laiku.

Galvenās iezīmes un priekšrocības ir:

1. Datu izmaiņas bez koda izmaiņām. Visas datu izmaiņas tiek nekavējoties publicētas klientiem, bez nepieciešamības modificēt aizmugures kodu.
2. Daudz adapteru. Visiem populārajiem JavaScript ietvariem un mobilās platformas SDK ir pieejami adapteri ar labu atbalstu un dokumentāciju. (Mēs izmantojām AngularFire , kas šajā rakstā ir Firebase saistošs AngularJS.)
3. Autentifikācijas vienkāršība. Firebase autentifikācija ir tikpat vienkārša kā vienas metodes izsaukums, neatkarīgi no autentifikācijas metodes. Atbalsta vienkāršu e-pastu un paroli, Google, Facebook, Twitter vai Github pieteikšanos.
4. Bezsaistē iespējots. Visi Firebase dati ir iespējoti bezsaistē, tāpēc atvienotā režīmā lietojumprogramma var būt pilnībā (vai gandrīz pilnībā) funkcionāla. Kad savienojums tiek atjaunots, programmas tiek automātiski sinhronizētas.
5. Konfigurācijas informācijas panelis. Lielu daļu Firebase (piemēram, drošības kārtulas) var viegli konfigurēt, izmantojot Firebase intuitīvo vadības paneļa saskarni.
6. JSON centrēts. Firebase visi dati tiek saglabāti un izgūti JSON objektu veidā.

Firebase piedāvā arī mākoņpakalpojumus priekšējā koda mitināšanai, kas var ievērojami ietaupīt laiku izvietošanā un uzturēšanā.

Ir arī vērts to atzīmēt Firebase ieguva Google pagājušajā oktobrī, kas tai ir pievērsis ievērojami lielāku uzmanību un atpazīstamību.

Vienkārša lietojuma piemērs: izdevumu izsekošana

Istabas biedri bieži sadala izdevumus un vajadzības gadījumā paļaujas viens uz otru. Palīdzēsim istabas biedriem izsekot viņu izdevumiem un mēneša beigās palīdzēsim viņiem samierināties.

Lai viss būtu vēl interesantāk, izveidosim daudzplatformu mobilo lietojumprogrammu, kas nodrošinās atjauninājumus reāllaikā, lai viņi katrs varētu pārraudzīt izdevumus to rašanās brīdī.

Tagad, kad esam izlēmuši, ko vēlamies veidot, un esam iepazinušies ar rīkiem, sāksim!

Darba sākšana ar Ionic un Firebase

Pirmā lieta, kas mums jādara, ir instalēt Ionic. Izpildiet Ionic instalācijas instrukcijas Darba sākšana lappuse. (Ņemiet vērā, ka jonu atkarība no NodeJS , tāpēc instrukcijās būs jāinstalē arī tas, ja jūsu datorā tā vēl nav).

The AngularFire 5 minūšu apmācība ir lieliska vieta, kur sākt iepazīties ar Firebase. Un, ja jūs esat 'meistars' vai taktils mācītājs, piemēram, es, iespējams, vēlēsities vilkt mana ieviešana no GitHub un sāciet spēlēt ar kodu.

Mūsu daudzplatformu lietotnes kodēšana

Šajā apmācībā mēs izmantosim paraugu tabs lietotne, kas ir daļa no jonu instalācijas kā pamats mūsu lietotnei. (Lietotnes paraugu varat palaist ar komandu ionic start myApp tabs.)

Atveriet paraugu tabs lietotne jūsu iecienītākajā IDE (es izmantoju Tīmekļa vētra ) un sāksim to pārveidot, lai izveidotu mūsu istabas biedru lietotni.

Mūsu piemēram Ionic un Firebase būs nepieciešami šādi trīs ekrāni:

Pirms šo ekrānu izveidošanas noņemiet “Draugu detaļu ekrānu”, kas pēc noklusējuma ir pieejams lietotnes paraugā, šādi:

1. Dzēst www/templates/friend-detail.html failu.
2. Vietnē www/js/app.js noņemiet (vai komentējiet) stāvokli friend-detail.html.
3. Sadaļā www/js/controllers.js noņemiet FriendDetailCtrl kontrolieris, uz kuru atsaucas stāvoklī, kuru mēs izdzēsām.

Tagad mainīsim ikonas un cilnes atlasītāju teksts ekrāna apakšdaļā ir šāds:

To vienkārši veic, veicot šādas izmaiņas www/templates/tabs.html

atvērt xml failus ar vārdu

Pirms pievienojam savus datus Firebase, izveidosim sarakstu un piesaistīsim to masīvam ar nosaukumu www/templates/tab-dash.html pievienojot {{expense.label}} {{expense.cost}} Total Spent {{getTotal()}} Add šo kodu:

Mums būs jāpagarina arī www/js/controllers.js iekš expenses iekļaut addExpense masīvs, kā arī getTotal metodi un .controller('DashCtrl', function($scope) { $scope.expenses = [{ by: ‘email’, label: ’test’, cost: 10 }]; $scope.addExpense = function(e) { $scope.expenses.push({ 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; }; }) metodi šādi:

c corp vs s corp vs llc

addExpense() masīvs ir tas, kas glabā preces izdevumu sarakstā, expenses metode pievieno jaunu vērtību getTotal() masīvs un tab-friends.html metode dod mums visu masīva vienumu kopsummu.

Tagad ir jāveic līdzīgs izmaiņu kopums https://.firebaseio.com Mēģiniet to izdarīt pats, taču, ja rodas problēmas vai vēlaties pārbaudīt, vai esat to izdarījis pareizi, varat atsaukties uz mana ieviešana vietnē GitHub.

Piekabināšana Firebase

Jums būs nepieciešams Firebase konts. Jūs varat reģistrēties šeit par bezmaksas Firebase “Hacker Plan”.

Vienu, kuru pierakstīsit, jūs saņemsiet savu saknes URL , kas izskatīsies kaut kā www/index.html.

Lai iespējotu Firebase mūsu lietotnē, mūsu lietotnei ir nepieciešami divi mazi modifikācijas.

Pirmkārt, mums jāiekļauj Firebase skripti lietotnes 'firebase' failu šādi:

Pēc tam mums jāpievieno Firebase modulis mūsu lietojumprogrammai, pievienojot angular.module('starter', ['ionic', 'starter.controllers', 'starter.services', 'firebase']) sarakstam mūsu AngularJS www/js/services.js modulis:

Firebase tagad ir iespējots tāpat kā jebkurš cits AngularJS modulis.

The AngularFire 5 minūšu apmācība iemācīs jums izveidot datu atsauces kontrolieros. Tomēr mūsu demo lietotnei es nolēmu saglabāt šīs atsauces atsevišķā pakalpojumā (jo tas ievērojami atvieglo uzturēšanu un atjaunināšanu, ja tiek mainīts saknes URL). Lai izveidotu šo pakalpojumu, pievienojiet: _ + _ |

Iepriekš minētais kods pievieno trīs atsauces URL. Viens saknei un divi kolekcijām, kuras esam nosaukuši room-mates un expenses.

Jauna kolekcija tiek pievienota Firebase, vienkārši pievienojot tās nosaukumu jūsu kolekcijas beigām saknes URL . Tātad, lai izveidotu https://.firebaseio.com/expenses kolekcija, kas mums būs nepieciešama, ir nepieciešami tikai šādi:

expenses

Tas izveidos DashCtrl kolekciju, un tad mēs varam sākt tai pievienot objektus.

Labi, tagad mēs varam piesaistīt Firebase izdevumu iekasēšanu, lai aizstātu iepriekš izveidoto “fiktīvo” masīvu. Tas tiek darīts, modificējot www/js/controllers.js iekš .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; }; }) sekojoši:

Līdzīgs izmaiņu kopums jāveic arī ionic run android Es vēlreiz iesaku mēģināt to izdarīt pats, bet, ja rodas problēmas vai vēlaties pārbaudīt, vai esat to izdarījis pareizi, varat atsaukties uz mana ieviešana vietnē GitHub.

Lai pārbaudītu, vai tā darbojas, palaidot lietotni diviem dažādiem klientiem, pievienojiet jaunus izdevumus un pārliecinieties, ka tie tiek parādīti abu klientu sarakstā. Ja tas darbojas ... woo-hoo! Tagad esat veiksmīgi izveidojis savu Ionic lietotni Firebase!

Vairāku platformu lietotni varat pārbaudīt dažādās ierīcēs, savienojot ierīci ar sistēmu un palaižot ionic emulate ios vai { 'rules': { '.read': 'auth != null', '.write': 'auth != null' } } . Papildinformāciju skatiet Ionic dokumentācijā testējot jūsu lietotni .

Konta pārvaldība un drošība, izmantojot Firebase

Lai gan pamata funkcionalitāte tagad darbojas, viena nopietna problēma ir tā, ka mūsu lietotne pašlaik ir pilnīgi nedroša. Visa pasaule var redzēt jūsu izdevumus bez jebkādām atļaujām vai pieteikšanās. Tas acīmredzami ir jārisina.

dibinot privātā kapitāla fondu

Firebase nodrošina spēcīgu, bet vienkāršu autentifikācijas ietvaru, izmantojot “kārtulas”. Izmantojot Firebase kārtulu valodu, var paveikt ļoti daudz. (Skatīt Firebase drošības dokumentācija lai iegūtu sīkāku informāciju.)

Mūsu gadījumā mēs uzrakstīsim ļoti vienkāršu noteikumu, lai bloķētu nesankcionētu lietotāju piekļuvi mūsu datiem. Lai to izdarītu, atveriet saknes URL, kreisajā darbību joslā noklikšķiniet uz “Drošība un noteikumi”, ielīmējiet zemāk esošo kodu savās kārtulās un noklikšķiniet uz Saglabāt.

Ja palaidīsit savu lietojumprogrammu tagad, pamanīsit, ka nav datu. Jūs pat varat mēģināt pārbaudīt savu pieprasījumu, izmantojot pārlūkprogrammas rīkus, un konsolē jums vajadzētu redzēt ziņojumu, kurā norādīts, ka neesat pilnvarots skatīt datus.

Lietotāju kontu izveide un pieteikšanās iespējošana

Jūs varat autentificēt savus lietotājus, ļaujot viņiem izveidot savu e-pasta / paroles kombināciju vai izmantot jebkuru no esošajiem Google, Facebook, Twitter vai Github pieteikšanās akreditācijas datiem. E-pasta / paroles autentifikācijai Firebase piedāvā pilnu API metožu komplektu paroles maiņai, atiestatīšanai utt. Plašāka informācija par autentifikācija, izmantojot Firebase var atrast Firebase ceļvedī.

Mūsu demonstrācijas lietotnei mēs izveidosim divus lietotāju kontus, izmantojot Firebase saskarni. To var izdarīt, dodoties uz Firebase saknes URL un rīkojoties šādi:

1. Kreisās puses darbības joslā noklikšķiniet uz Pieteikties un autentificēt.
2. Atzīmējiet izvēles rūtiņu Iespējot e-pasta un paroles autentifikāciju.
3. Ritiniet uz leju, lai atrastu veidlapu “Pievienot jaunus kontus”
4. Pievienojiet savus kontus, izmantojot sadaļu “Pievienot jaunu lietotāju”.

Lai lietotājiem iespējotu pieteikšanās saskarni, vispirms pievienojiet šo kodu Email Password Login You are logged in as {{user.password.email}} Logout

Pēc tam pievienojiet šo vienumu 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; }; }); :

Viena svarīga lieta, kas jāapzinās no drošības viedokļa, ir tā Firebase pieteikšanās pēc noklusējuma ir pastāvīgas . Tāpēc, ja vēlaties, lai lietotājam būtu jāpiesakās katru reizi, kad tiek palaista programma, jums attiecīgi būs jāmaina Firebase konfigurācija. Lai to izdarītu, vienkārši vienu reizi pēc veiksmīgas pieteikšanās izpildiet šādu kodu:

Pēc veiksmīgas pieteikšanās to varat pievienot konta kontrolierī vai pēc veiksmīgas pieteikšanās ievietot pārtraukuma punktu un palaist to konsoles inspektorā.

Filtrēšana, pamatojoties uz lietotāju

Tomēr daudzplatformu mobilajai lietotnei joprojām trūkst vienas svarīgas funkcijas. Mēs vēlamies atšķirt jūsu izdevumus no istabas biedra izdevumiem. Tagad, kad esam izveidojuši divus kontus, mums vienkārši jāfiltrē dati par mūsu skatiem.

Vispirms mums ir jāmaina www/js/controllers.js iekš .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; }; }) lai (a) iegūtu datus par pašreizējo lietotāju $ darbības sfērā un (b) ietaupītu pašreizējam lietotājam pievienotos papildu izdevumus:

Tālāk mums jāpievieno filtrs www/templates/tab-friends.html lai parādītu tikai pašreizējā lietotāja izdevumus:

Labi, sākuma ekrāns tagad ir perfekts. Lietotājs var redzēt un pievienot tikai savus izdevumus.

kas ir blockchain spēle

Pēdējais un pēdējais solis ir ļaut kopīgot pilnīgu izdevumu sarakstu starp istabas biedriem. Lai to izdarītu, mainiet www/controllers.js lai pievienotu šo filtru:

|_+_|

|_+_|