Изграждане на мултиплатформени мобилни приложения в реално време: Примери за използване на Ionic Framework и Firebase

Един от основните проблеми, които компаниите срещат при създаването на приложение за смартфон, е мултипликативната цена на изграждане на собствено приложение на различни платформи . Докато хитроумни предни разработчици сме се настроили за разработването на няколко хибридни платформи, които обещават да помогнат за решаването на този проблем, Йонна рамка и Firebase са динамично дуо, което наистина наистина ни дава невероятна гъвкавост при изграждането на приложения за смартфони в реално време, използвайки JavaScript и HTML5.

Този урок представя възможностите на тези многоплатформени инструменти за мобилно развитие и дори предоставя някои примери за Ionic и Firebase.

(Забележка: Тази статия предполага известно запознаване с основите на рамката AngularJS. Ето a страхотна уводна публикация на AngularJS за тези без този опит.)

Представяме йонната рамка

Йонната рамка се състои от три основни компонента:

1. Базирана на SASS интерфейсна рамка, проектирана и оптимизирана за мобилни потребителски интерфейси.
2. An Ъглов JS фронт-енд JavaScript рамка, използвана за бързо изграждане на мащабируеми и бързи приложения.
3. Компилатор ( Кордова или PhoneGap ) за местни мобилни приложения с CSS, HTML и JavaScript.

Йонийската рамка също е пълна с много полезни CSS компоненти извън кутията.

Поздрави за Ionic за предоставяне на обширна документация, примери и начални видеоклипове, за да опрости кривата на обучение и да накара разработчиците да стартират и работят бързо.

Представяме ви Firebase

Firebase е бекенд като услуга система без данни за схема, която осигурява синхронизиране на данни в реално време, без да се изисква писане на персонализиран код. Firebase прави голяма част от вашето back-end развитие остаряло, като по този начин значително намалява времето за разработка на няколко платформи.

хакнати номера на кредитни карти с cvv и пощенски код 2017

Основните характеристики и предимства включват:

1. Данни се променят без промени в кода. Всички промени в данните се публикуват незабавно на клиентите, без да е необходима промяна на бекенд кода.
2. Много адаптери. Има адаптери с добра поддръжка и документация за всички популярни JavaScript рамки и SDK за мобилни платформи. (Използвахме AngularFire , което е обвързването AngularJS за Firebase, в тази статия.)
3. Лесно удостоверяване. Удостоверяването във Firebase е толкова просто, колкото едно извикване на метод, независимо от метода за удостоверяване. Поддържа прости имейли и пароли, базирани на Google, Facebook, Twitter или Github.
4. Офлайн активиран. Всички данни на Firebase са активирани офлайн, така че приложението може да бъде напълно (или почти напълно) функционално в режим на изключена връзка. Приложенията се синхронизират автоматично, когато връзката се възстанови.
5. Табло за конфигуриране. Голяма част от Firebase (например правила за сигурност) могат лесно да бъдат конфигурирани чрез интуитивния интерфейс на таблото за управление на Firebase.
6. JSON-ориентиран. Във Firebase всички данни се съхраняват и извличат под формата на JSON обекти.

Firebase предлага и облачни услуги за хостване на предния код, които могат да отделят значително време за внедряване и поддръжка.

Също така си струва да се отбележи това Firebase е придобита от Google този изминал октомври, който му даде значително повече внимание и видимост.

Пример за опростена употреба: Проследяване на разходите

Съквартирантите често споделят разходи и разчитат един на друг по време на нужда. Така че, нека помогнем на съквартирантите да проследят разходите си и да им помогнем да се помирят в края на месеца.

За да направим нещата още по-интересни, нека създадем мултиплатформено мобилно приложение, което ще предоставя актуализации в реално време, така че всеки да може да следи разходите, когато възникнат.

колко прави грим индустрията на година

След като решихме какво искаме да изградим и се запознахме с инструментите, нека да започнем!

Първи стъпки с Ionic и Firebase

Първото нещо, което трябва да направим, е да инсталираме Ionic. Следвайте инструкциите за инсталиране, предоставени на Ionic Приготвяме се да започнем страница. (Имайте предвид, че Ionic има зависимост от NodeJS , така че инструкциите ще изискват да инсталирате и това, ако все още не го имате на машината си).

The 5-минутен урок за AngularFire е чудесно място да започнете да се запознавате с Firebase. И ако сте „калайджия“ или тактилен ученик като мен, може да искате да дърпате моето изпълнение от GitHub и започнете да играете с кода.

Кодиране на нашето мултиплатформено приложение

За този урок ще използваме пробата tabs приложение, предоставено като част от йонийската инсталация като основа за нашето приложение. (Можете да стартирате примерното приложение с командата ionic start myApp tabs.)

Отворете пробата tabs приложение в любимата ви IDE (използвам Уеб буря ) и нека започнем да го модифицираме, за да създадем приложението ни за съквартиранти.

За примерното ни приложение Ionic и Firebase ще са ни необходими следните три екрана:

Преди да създадем тези екрани, нека премахнем „Екран с подробности за приятели“, предоставен по подразбиране с примерното приложение, както следва:

1. Изтрийте www/templates/friend-detail.html файл.
2. В www/js/app.js премахнете (или коментирайте) състоянието на friend-detail.html.
3. В www/js/controllers.js премахнете FriendDetailCtrl контролер, който е посочен в състоянието, което сме изтрили.

Сега нека променим икони и текстът на селекторите на раздели в долната част на нашия екран да бъде следният:

Това се прави просто, като направите следните промени в www/templates/tabs.html:

Преди да свържем данните си с Firebase, нека създадем списък и го обвържем с масив, наречен www/templates/tab-dash.html чрез добавяне на следния код към {{expense.label}} {{expense.cost}} Total Spent {{getTotal()}} Add :

Също така ще трябва да удължим www/js/controllers.js в expenses да включва addExpense масив, както и getTotal метод и .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; }; }) метод, както следва:

как да уча C++

addExpense() array е това, което съхранява елементите в списъка с разходи, expenses метод добавя нова стойност към getTotal() масив и tab-friends.html метод ни дава общата сума на всички елементи в масива.

Подобен набор от промени сега трябва да бъде направен на https://.firebaseio.com. Опитайте да направите това сами, но ако срещнете проблеми или искате да проверите дали сте направили това правилно, можете да се обърнете към моето изпълнение на GitHub.

Закачане във Firebase

Ще ви трябва акаунт във Firebase. Можете да се регистрирате тук за безплатен Firebase „Хакерски план“.

Ако се регистрирате, ще получите своя корен URL , което ще изглежда нещо като www/index.html.

Активирането на Firebase в нашето приложение изисква два малки мода за нашето приложение.

Първо, трябва да включим Firebase скриптовете в приложението 'firebase' файл, както следва:

След това трябва да добавим модула Firebase към нашето приложение, като добавим angular.module('starter', ['ionic', 'starter.controllers', 'starter.services', 'firebase']) към списъка в нашия AngularJS www/js/services.js модул:

Firebase вече е активиран, точно както всеки друг модул AngularJS.

The 5-минутен урок за AngularFire ще ви научи да създавате препратки към данни в контролери. За нашето демонстрационно приложение обаче реших да запазя тези референции в отделна услуга (тъй като това улеснява много поддръжката и актуализацията, ако основният URL адрес се промени). За да създадете тази услуга, добавете следното към expenses:

Горният код добавя три референтни URL адреса. Един за корен и два за колекции, които сме нарекли expenses и https://.firebaseio.com/expenses .

Добавянето на нова колекция към Firebase се извършва просто чрез добавяне на името й в края на вашата корен URL . Така че, за да създадете expenses колекция, която ще ни е необходима, трябва ни само следното:

DashCtrl

Това ще създаде www/js/controllers.js колекция и след това можем да започнем да добавяме обекти към нея.

Добре, сега можем да включим събирането на разходи от Firebase, за да заменим масива от фиктивни разходи, който създадохме по-рано. Това става чрез модифициране на .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; }; }) в FriendsCtrl както следва:

Подобен набор от промени трябва да се направи на ionic emulate ios. Отново препоръчвам да опитате да направите това сами, но ако срещнете проблеми или искате да проверите дали сте направили това правилно, можете да се обърнете към моето изпълнение на GitHub.

За да проверите дали работи, докато стартирате приложението на два различни клиента, добавете нов разход и вижте, че той се показва в списъка и на двата клиента. Ако работи ... у-у-у! Вече успешно свързахте приложението си Ionic с Firebase!

Можете да тествате своето мултиплатформено приложение на различни устройства, като свържете устройство към вашата система и стартирате { 'rules': { '.read': 'auth != null', '.write': 'auth != null' } } или www/templates/tab-account.html. Обърнете се към документацията за йони за повече информация относно тествате приложението си .

Управление на акаунти и сигурност с Firebase

Въпреки че основната функционалност вече работи, един сериозен проблем е, че нашето приложение в момента е напълно несигурно. Целият свят може да види разходите ви, без да са необходими разрешения или влизания. Това очевидно трябва да бъде разгледано.

Firebase предоставя мощна, но проста рамка за удостоверяване, използвайки „правила“. Има много неща, които могат да бъдат направени с помощта на езика за правила на Firebase. (Вижте Документация за защита на Firebase за повече подробности.)

В нашия случай ще напишем много просто правило, за да блокираме неупълномощените потребители да имат достъп до нашите данни. За да направите това, отворете главния си URL адрес, щракнете върху „Сигурност и правила“ в лявата лента за действие, поставете кода по-долу във вашите правила и щракнете върху Запазване.

как да използвате команди на бот на discord

Ако стартирате приложението си сега, ще забележите, че няма данни. Можете дори да опитате да проверите заявката си, като използвате инструменти на браузъра, и трябва да видите съобщение в конзолата си, в което се посочва, че не сте упълномощени да преглеждате данните.

Създаване на потребителски акаунти и активиране на влизане

Можете да удостоверите вашите потребители, като им позволите да създадат своя собствена комбинация от имейл / парола, или да използват някой от съществуващите им идентификационни данни за вход в Google, Facebook, Twitter или Github. За удостоверяване на имейл / парола, Firebase предлага пълен набор от API методи за промяна на парола, нулиране и др. Повече информация за удостоверяване чрез Firebase можете да намерите в ръководството за Firebase.

За нашето демонстрационно приложение ще създадем два потребителски акаунта чрез интерфейса на Firebase. Това може да стане, като отидете на основния си URL адрес на Firebase и направите следното:

1. Щракнете върху Login & Auth в лявата лента за действие.
2. Поставете отметка в Активиране на удостоверяване на имейл и парола.
3. Превъртете надолу, за да намерите „Формуляр за добавяне на нови акаунти“
4. Добавете акаунтите си, като използвате „Добавяне на нов потребител“.

За да активирате интерфейса за вход за вашите потребители, първо добавете следния код към AccountCtrl:

След това добавете следното към .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; }; }); в 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] ']); :

Едно важно нещо, което трябва да знаете от гледна точка на сигурността, е това Входните данни на Firebase са постоянни по подразбиране . Следователно, ако искате вашият потребител да трябва да влиза всеки път, когато приложението се стартира, ще трябва да промените съответно конфигурацията на Firebase. За да направите това, просто един път след успешно влизане изпълнете следния код:

Можете да добавите това в контролера на акаунта след успешно влизане или да поставите точка на прекъсване след успешно влизане и да го стартирате в инспектора на конзолата.

Филтриране въз основа на потребителя

Мултиплатформеното мобилно приложение все още липсва една важна функция. Искаме да разграничим разходите ви от тези на вашия съквартирант. След като създадохме два акаунта, просто трябва да филтрираме данните за нашите възгледи.

Първо трябва да модифицираме .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; }; }) в www/templates/tab-dash.html за да (a) получите данните за текущия потребител в $ scope и (b) да спестите всички допълнителни разходи за текущия потребител:

След това трябва да добавим филтър в FriendsCtrl за да покажете само текущите разходи на потребителя:

Добре, началният екран вече е перфектен. Потребителят може да вижда и добавя само собствените си разходи.

Последната и последна стъпка е да се даде възможност за споделяне на пълния списък с разходите между съквартирантите. За да направите това, променете .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 за да добавите този филтър:

кои са 8-те принципа на дизайна

След това модифицирайте

|_+_|

|_+_|