Создание мультиплатформенных мобильных приложений в режиме реального времени: примеры с использованием Ionic Framework и Firebase

Одной из основных проблем, с которой сталкиваются компании при создании приложения для смартфона, является мультипликативная стоимость создания нативного приложения для разных платформ. В то время как сообразительные фронтенд-разработчики включились в разработку нескольких гибридных платформ, которые обещают помочь решить эту проблему, Ionic Framework и Firebase представляют собой динамичный дуэт, который вместе действительно дает нам удивительную гибкость в создании приложений для смартфонов в реальном времени с использованием JavaScript и HTML5. .

В этом руководстве представлены возможности этих многоплатформенных инструментов для разработки мобильных приложений и даже приведены некоторые примеры Ionic и Firebase.

(Примечание: в этой статье предполагается некоторое знакомство с основами фреймворка AngularJS. Вот отличный вводный пост по AngularJS для тех, у кого нет такого опыта.)

Знакомство с ионным фреймворком

Ionic Framework состоит из трех основных компонентов:

1. Платформа пользовательского интерфейса на основе SASS, разработанная и оптимизированная для мобильных пользовательских интерфейсов.
2. Интерфейсный JavaScript-фреймворк AngularJS, используемый для быстрого создания масштабируемых и быстрых приложений.
3. Компилятор (Cordova или PhoneGap) для собственных мобильных приложений с CSS, HTML и JavaScript.

Фреймворк Ionic также содержит множество готовых полезных компонентов CSS.

Спасибо Ionic за предоставление обширной документации, примеров и начальных видеороликов, которые помогают упростить кривую обучения и быстро наладить работу разработчиков.

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

Firebase — это система данных без схемы «бэкенд как услуга», которая обеспечивает синхронизацию данных в режиме реального времени без необходимости написания какого-либо пользовательского кода. Firebase делает большую часть вашей внутренней разработки устаревшей, тем самым значительно сокращая время многоплатформенной разработки.

Ключевые особенности и преимущества включают в себя:

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 Getting Started. (Обратите внимание, что Ionic зависит от NodeJS, поэтому инструкции потребуют от вас его установки, если он еще не установлен на вашем компьютере).

5-минутный учебник по AngularFire — отличное место для начала знакомства с Firebase. И если вы «мастер» или тактильный ученик, как я, вы можете скачать мою реализацию с GitHub и начать играть с кодом.

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

В этом руководстве мы будем использовать образец приложения tabs , предоставленный как часть установки Ionic, в качестве основы для нашего приложения. (Вы можете запустить пример приложения с помощью команды ionic start myApp tabs .)

Откройте пример приложения с tabs в вашей любимой среде IDE (я использую Webstorm) и давайте начнем изменять его, чтобы создать наше приложение для соседей по комнате.

Для нашего примера приложения 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 :

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

Прежде чем мы подключим наши данные к Firebase, давайте создадим список и свяжем его с массивом под названием expenses , добавив следующий код в 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>

Нам также потребуется расширить DashCtrl в 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: < 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; }; })

Массив expenses — это то, что хранит элементы в списке расходов, метод addExpense() добавляет новое значение в массив expenses , а метод getTotal() дает нам общее количество всех элементов в массиве.

Аналогичный набор изменений необходимо внести в tab-friends.html . Попробуйте сделать это самостоятельно, но если у вас возникнут проблемы или вы захотите убедиться, что сделали это правильно, вы можете обратиться к моей реализации на GitHub.

Перехват в Firebase

Вам понадобится учетная запись Firebase. Вы можете зарегистрироваться здесь для бесплатного Firebase «Hacker Plan».

После регистрации вы получите корневой URL -адрес, который будет выглядеть примерно так https://<yourfirebase>.firebaseio.com .

Для включения Firebase в нашем приложении требуется два небольших мода для нашего приложения.

Во-первых, нам нужно включить сценарии Firebase в файл www/index.html приложения следующим образом:

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

Затем нам нужно добавить модуль Firebase в наше приложение, добавив 'firebase' в список в нашем 'starter' модуле AngularJS:

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

Теперь Firebase включен, как и любой другой модуль AngularJS.

Пятиминутный учебник AngularFire научит вас создавать ссылки на данные в контроллерах. Однако для нашего демонстрационного приложения я решил сохранить эти ссылки в отдельной службе (поскольку это значительно упрощает поддержку и обновление, если корневой URL-адрес изменен). Чтобы создать эту службу, добавьте в 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; } } });

Приведенный выше код добавляет три ссылочных URL-адреса. Один для корня и два для коллекций, которые мы назвали expenses и room-mates .

Чтобы добавить новую коллекцию в Firebase, просто добавьте ее имя в конец вашего корневого URL -адреса. Итак, чтобы создать необходимую нам коллекцию expenses , нам нужно следующее:

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

Это создаст коллекцию expenses , после чего мы сможем начать добавлять в нее объекты.

Хорошо, теперь мы можем подключить коллекцию расходов из Firebase, чтобы заменить «фиктивный» массив расходов, который мы создали ранее. Это делается путем изменения DashCtrl в www/js/controllers.js следующим образом:

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

Аналогичный набор изменений необходимо внести в FriendsCtrl . Я снова рекомендую вам попробовать сделать это самостоятельно, но если вы столкнетесь с проблемами или захотите убедиться, что сделали это правильно, вы можете обратиться к моей реализации на GitHub.

Чтобы убедиться, что оно работает, при запуске приложения на двух разных клиентах добавьте новый расход и убедитесь, что он отображается в списке на обоих клиентах. Если это сработает… у-у-у! Теперь вы успешно подключили свое приложение Ionic к Firebase!

Вы можете протестировать свое мультиплатформенное приложение на разных устройствах, подключив устройство к вашей системе и запустив ionic run android или ionic emulate ios . Обратитесь к документации Ionic для получения дополнительной информации о тестировании вашего приложения.

Управление учетными записями и безопасность с Firebase

Хотя основные функции теперь работают, есть одна серьезная проблема: наше приложение в настоящее время полностью небезопасно. Весь мир может видеть ваши расходы без каких-либо разрешений или входа в систему. Это, очевидно, нужно решать.

Firebase предоставляет мощную, но простую структуру аутентификации с использованием «правил». С помощью языка правил Firebase можно многое сделать. (Подробнее см. в документации по безопасности Firebase.)

В нашем случае мы напишем очень простое правило, чтобы заблокировать неавторизованным пользователям доступ к нашим данным. Для этого откройте свой корневой URL-адрес, нажмите «Безопасность и правила» на левой панели действий, вставьте приведенный ниже код в свои правила и нажмите «Сохранить».

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

Если вы запустите приложение сейчас, вы заметите, что данных нет. Вы даже можете попытаться проверить свой запрос с помощью инструментов браузера, и вы должны увидеть сообщение в своей консоли о том, что вы не авторизованы для просмотра данных.

Создание учетных записей пользователей и включение входа

Вы можете аутентифицировать своих пользователей, позволив им создать свою собственную комбинацию электронной почты и пароля или использовать любые из существующих учетных данных для входа в Google, Facebook, Twitter или Github. Для аутентификации по электронной почте/паролю Firebase предлагает полный набор методов API для изменения, сброса пароля и т. д. Дополнительную информацию об аутентификации с использованием Firebase можно найти в руководстве по Firebase.

Для нашего демонстрационного приложения мы создадим две учетные записи пользователей через интерфейс Firebase. Это можно сделать, перейдя по корневому URL-адресу Firebase и выполнив следующие действия:

1. Нажмите «Войти и авторизоваться» на левой панели действий.
2. Установите флажок, чтобы включить аутентификацию по электронной почте и паролю.
3. Прокрутите вниз, чтобы найти «Форму добавления новых учетных записей».
4. Добавьте свои учетные записи, используя «Добавить нового пользователя».

Чтобы включить интерфейс входа для ваших пользователей, сначала добавьте следующий код в 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>

Затем добавьте следующее в AccountCtrl в 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; }; });

Одна важная вещь, о которой следует помнить с точки зрения безопасности, заключается в том, что логины Firebase по умолчанию являются постоянными . Поэтому, если вы хотите, чтобы ваш пользователь входил в систему каждый раз при запуске приложения, вам необходимо соответствующим образом изменить конфигурацию Firebase. Для этого всего один раз после успешного входа выполните следующий код:

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

Вы можете добавить это в контроллер учетной записи после успешного входа в систему или поставить точку останова после успешного входа в систему и запустить ее в инспекторе консоли.

Фильтрация по пользователю

Однако в многоплатформенном мобильном приложении по-прежнему отсутствует одна важная функция. Мы хотим отличить ваши расходы от расходов вашего соседа по комнате. Теперь, когда мы создали две учетные записи, нам просто нужно отфильтровать данные в наших представлениях.

Сначала нам нужно изменить dashCtrl в www/js/controllers.js , чтобы (а) получить данные для текущего пользователя в $scope и (б) сэкономить любые дополнительные расходы для текущего пользователя:

 .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 , чтобы показывать только текущие расходы пользователя:

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

Хорошо, главный экран теперь идеален. Пользователь может видеть и добавлять только свои расходы.

Последний и заключительный шаг — включить обмен полным списком расходов между соседями по комнате. Для этого измените www/templates/tab-friends.html , чтобы добавить этот фильтр:

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

Затем измените FriendsCtrl в www/controllers.js следующим образом:

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

Вот и все! Установите/обновите приложение как на своем устройстве, так и на устройстве вашего соседа по комнате, и все будет готово!

Заворачивать

Наш простой пример только начинает царапать поверхность того, что можно сделать — и как легко это можно сделать — с помощью Ionic и Firebase. Они действительно представляют собой мощный дуэт для создания многоплатформенных приложений для смартфонов в режиме реального времени с использованием JavaScript и HTML5.