Bygge sanntids mobilapplikasjoner med flere plattformer: Eksempler som bruker Ionic Framework og Firebase

Et av de største problemene selskapene støter på når de lager en smarttelefonapplikasjon, er multiplikasjonskostnaden på bygge en egen applikasjon på tvers av forskjellige plattformer . Samtidig som kunnskapsrike frontend-utviklere har innstilt på utviklingen av flere hybridplattformer som lover å hjelpe til med å løse dette problemet, Ionic Framework og Firebase er en dynamisk duo som sammen virkelig gir oss utrolig fleksibilitet i å bygge smarttelefonapplikasjoner i sanntid ved hjelp av JavaScript og HTML5.

Denne opplæringen introduserer funksjonene til disse multi-platform mobile utviklingsverktøyene og gir til og med noen ioniske og Firebase-eksempler.

(Merk: Disse artiklene forutsetter litt kjennskap til det grunnleggende i AngularJS-rammeverket. Her er en flott introduksjonsinnlegg på AngularJS for de uten den bakgrunnen.)

Vi introduserer det ioniske rammeverket

Det ioniske rammeverket består av tre hovedkomponenter:

1. Et SASS-basert UI-rammeverk designet og optimalisert for mobile UIer.
2. An AngularJS front-end JavaScript-rammeverk som brukes til å raskt bygge skalerbare og raske applikasjoner.
3. En kompilator ( Cordova eller PhoneGap ) for native mobilapplikasjoner med CSS, HTML og JavaScript.

Det ioniske rammeverket er også fullpakket med mange nyttige CSS-komponenter ut av boksen.

Kudos to Ionic for å tilby omfattende dokumentasjon, eksempler og startvideoer for å forenkle læringskurven og få utviklere i gang raskt.

Vi introduserer Firebase

Firebase er et skjemafritt datasystem for backend-as-a-service som gir datasynkronisering i sanntid uten at det kreves at noen tilpasset kode skal skrives. Firebase gjør mye av back-end-utviklingen din foreldet, og reduserer dermed utviklingstiden for flere plattformer betydelig.

Viktige funksjoner og fordeler inkluderer:

1. Dataendringer uten kodeendringer. Alle dataendringer blir publisert til klienter umiddelbart, uten behov for endring av backendkode.
2. Mange adaptere. Det er adaptere, med god støtte og dokumentasjon, for alle populære JavaScript-rammeverk og SDK-er for mobilplattformer. (Vi brukte AngularFire , som er AngularJS-bindingen for Firebase, i denne artikkelen.)
3. Enkel autentisering. Autentisering i Firebase er like enkelt som en enkeltmetodesamtale, uavhengig av godkjenningsmetoden. Støtter enkel e-post og passord, Google, Facebook, Twitter eller Github-baserte pålogginger.
4. Frakoblet aktivert. All Firebase-data er frakoblet, slik at et program kan være fullt (eller nært til) funksjonelt i frakoblet modus. Applikasjoner synkroniseres automatisk når forbindelsen gjenopprettes.
5. Konfigurasjons dashbord. Mye av Firebase (for eksempel sikkerhetsregler) kan enkelt konfigureres gjennom Firebases intuitive dashbordgrensesnitt.
6. JSON-sentrisk. I Firebase lagres og hentes all data i form av JSON-objekter.

Firebase tilbyr også skytjenester for hosting av front-end-koden som kan gi betydelig tid i distribusjon og vedlikehold.

Det er også verdt å merke seg det Firebase ble kjøpt opp av Google i oktober som har gitt den betydelig mer oppmerksomhet og synlighet.

Eksempel på enkel bruk: Sporing av kostnader

Romkamerater deler ofte utgifter og stoler på hverandre i tider med nød. Så la oss hjelpe romkamerater med å spore utgiftene, og hjelpe dem å forene seg på slutten av måneden.

For å gjøre ting enda mer interessant, la oss bygge en mobilapplikasjon med flere plattformer som vil gi sanntidsoppdateringer, slik at de kan overvåke utgiftene når de oppstår.

Nå som vi har bestemt oss for hva vi vil bygge, og vi har blitt introdusert for verktøyene, la oss komme i gang!

Komme i gang med Ionic og Firebase

Det første vi trenger å gjøre er å installere Ionic. Følg installasjonsinstruksjonene på Ionic Starter side. (Merk at Ionic er avhengig av NodeJS , så instruksjonene krever at du installerer det også hvis du ikke allerede har det på maskinen din).

De AngularFire 5-minutters opplæring er et flott sted å begynne å bli kjent med Firebase. Og hvis du er en 'tinker' eller en taktil lærer som meg, kan det være lurt å trekke min implementering fra GitHub og begynn å spille med koden.

Koding av vår flerplattform-app

For denne opplæringen skal vi bruke eksemplet tabs app levert som en del av den ioniske installasjonen som grunnlag for appen vår. (Du kan kjøre eksempelappen med kommandoen ionic start myApp tabs.)

Åpne prøven tabs app i din favoritt IDE (jeg bruker Webstorm ) og la oss begynne å endre den for å bygge romkamerat-appen vår.

For vårt eksempel Ionic og Firebase-app trenger vi følgende tre skjermer:

Før vi oppretter disse skjermbildene, la oss fjerne 'Vennedetaljskjermbildet' som følger med eksempelappen, som følger:

1. Slett www/templates/friend-detail.html fil.
2. I www/js/app.js fjerner (eller kommenterer) staten for friend-detail.html.
3. Fjern www/js/controllers.js i FriendDetailCtrl kontrolleren som det er referert til i tilstanden vi slettet.

La oss nå endre ikoner og teksten til fanevalgene nederst på skjermen vår for å være følgende:

Dette gjøres ganske enkelt ved å gjøre følgende endringer i www/templates/tabs.html:

Før vi kobler opp dataene våre til Firebase, la oss lage en liste og binde den til en matrise kalt www/templates/tab-dash.html ved å legge til følgende kode i {{expense.label}} {{expense.cost}} Total Spent {{getTotal()}} Add :

Vi må også utvide www/js/controllers.js i expenses å inkludere addExpense array, samt et getTotal metode og a .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; }; }) metode, som følger:

addExpense() array er det som lagrer varene i utgiftslisten, expenses metoden legger til en ny verdi i getTotal() array, og tab-friends.html metoden gir oss summen av alle elementene i matrisen.

Et lignende sett med endringer må nå gjøres til https://.firebaseio.com. Prøv å gjøre dette på egen hånd, men hvis du får problemer, eller vil bekrefte at du har gjort dette ordentlig, kan du referere til min implementering på GitHub.

Hooking in Firebase

Du trenger en Firebase-konto. Du kan registrere deg her for en gratis Firebase “Hacker Plan”.

En du registrerer deg, vil du motta din rot url , som vil se ut som www/index.html.

Aktivering av Firebase i appen vår krever to små mods til appen vår.

Først må vi inkludere Firebase-skriptene i appens 'firebase' filen som følger:

Deretter må vi legge til Firebase-modulen i applikasjonen vår ved å legge til angular.module('starter', ['ionic', 'starter.controllers', 'starter.services', 'firebase']) til listen i AngularJS www/js/services.js modul:

Firebase er nå aktivert, akkurat som alle andre AngularJS-moduler.

De AngularFire 5-minutters opplæring vil lære deg å lage datareferanser i kontrollere. For demo-appen vår bestemte jeg meg for å beholde disse referansene i en egen tjeneste (siden dette gjør det mye enklere å vedlikeholde og oppdatere hvis rot-url endres). For å opprette denne tjenesten, legg til følgende i expenses:

Ovennevnte kode legger til tre referanseadresser. En for roten og to for samlinger som vi har kalt expenses og https://.firebaseio.com/expenses .

Å legge til en ny samling i Firebase gjøres ganske enkelt ved å legge til navnet på slutten av din rot url . Så for å lage expenses samling vi trenger, alt vi trenger er følgende:

DashCtrl

Dette vil opprette www/js/controllers.js samling, og vi kan da begynne å legge til objekter i den.

OK, nå kan vi koble inn utgiftsinnsamlingen fra Firebase for å erstatte 'dummy' -utgiftsmatrisen vi opprettet tidligere. Dette gjøres ved å endre .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; }; }) i FriendsCtrl som følger:

Et lignende sett med endringer må gjøres i ionic emulate ios. Jeg anbefaler igjen at du prøver å gjøre dette alene, men hvis du får problemer, eller vil bekrefte at du har gjort dette ordentlig, kan du referere til min implementering på GitHub.

For å bekrefte at den fungerer, mens du kjører appen på to forskjellige klienter, legger du til en ny kostnad og ser at den vises i listen på begge klienter. Hvis det fungerer ... woo-hoo! Du har nå koblet Ionic-appen din til Firebase!

Du kan teste flerplattform-appen din på forskjellige enheter ved å koble en enhet til systemet ditt og kjøre { 'rules': { '.read': 'auth != null', '.write': 'auth != null' } } eller www/templates/tab-account.html. Se Ionic-dokumentasjonen for mer informasjon om teste appen din .

Kontostyring og sikkerhet med Firebase

Selv om den grunnleggende funksjonaliteten nå fungerer, er et alvorlig problem at appen vår for øyeblikket er helt usikker. Hele verden kan se utgiftene dine, uten at det kreves tillatelser eller pålogginger. Dette må åpenbart tas opp.

Firebase gir et kraftig, men likevel enkelt autentiseringsrammeverk ved bruk av 'regler'. Det er mye som kan gjøres ved hjelp av Firebase's Rules Language. (Referere til Firebase sikkerhetsdokumentasjon for mer detaljer.)

I vårt tilfelle vil vi skrive en veldig enkel regel for å hindre uautoriserte brukere i å få tilgang til dataene våre. For å gjøre dette, åpne root-url, klikk på 'Sikkerhet og regler' i venstre handlingslinje, lim inn koden nedenfor i reglene, og klikk Lagre.

Hvis du kjører søknaden din nå, vil du legge merke til at det ikke er data. Du kan til og med prøve å inspisere forespørselen din ved å bruke nettleserverktøy, og du bør se en melding i konsollen om at du ikke er autorisert til å se dataene.

Opprette brukerkontoer og aktivere pålogging

Du kan autentisere brukerne dine ved å la dem opprette sin egen e-post / passordkombinasjon, eller bruke noen av deres eksisterende påloggingsinformasjon for Google, Facebook, Twitter eller Github. For e-post / passordgodkjenning tilbyr Firebase et komplett sett med API-metoder for passordendring, tilbakestilling, etc. Mer informasjon om autentisering ved hjelp av Firebase finner du i Firebase-guiden.

For demo-appen vår vil vi opprette to brukerkontoer via Firebase-grensesnittet. Dette kan gjøres ved å gå til Firebase root-url og gjøre følgende:

1. Klikk på Logg inn og godkjenning på venstre sidelinje.
2. Merk av for Aktiver e-post og passordgodkjenning.
3. Rull ned for å finne 'Legg til nye kontoskjema'
4. Legg til kontoene dine ved hjelp av “Legg til ny bruker”.

For å aktivere påloggingsgrensesnittet for brukerne dine, må du først legge til følgende kode i AccountCtrl:

Legg deretter til følgende i .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; }; }); i 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] ']); :

En viktig ting å være klar over fra et sikkerhetsmessig synspunkt er at Firebase-pålogginger er vedvarende som standard . Derfor, hvis du vil at brukeren din må logge på hver gang applikasjonen startes, må du endre Firebase-konfigurasjonen deretter. For å gjøre dette, bare en gang etter en vellykket pålogging, utfør følgende kode:

Du kan legge til dette i kontokontrolleren etter vellykket pålogging, eller sette et bruddpunkt etter vellykket pålogging og kjøre det i konsollinspektøren.

Filtrering basert på bruker

Multiplattforms mobilappen mangler fremdeles en viktig funksjon. Vi vil skille utgiftene dine fra samboeren din. Nå som vi har opprettet to kontoer, trenger vi bare å filtrere dataene på synspunktene våre.

Vi må først endre .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; }; }) i www/templates/tab-dash.html for å (a) få dataene for den nåværende brukeren til $ omfang og (b) spare eventuelle ekstra utgifter for den nåværende brukeren:

Deretter må vi legge til et filter i FriendsCtrl for å vise bare brukerens nåværende utgifter:

OK, Hjem-skjermen er nå perfekt. En bruker kan bare se og legge til sine egne utgifter.

Det siste og siste trinnet er å gjøre det mulig å dele den komplette utgiftslisten mellom romkamerater. For å gjøre det, endre .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 for å legge til dette filteret:

Endre deretter

|_+_|

|_+_|