Обзор разработки мобильных приложений на Ionic Framework
Стоит сказать, что я занимаюсь разработкой нативных мобильных приложений на iOS семь лет, немного умею писать под Android. Последние два года занимался оболочкой под iOS для webView-приложений.
Ionic Framework — вид сверху
Собрал демонстрационную версию компонентов, представленных в Ionic, и записал скринкаст с iPhone.
А тут по ссылке можно вживую посмотреть работу компонент, и как они будут отображаться и работать на iOS и Android. Как нативщик могу сказать, что выглядит и работает, как родные компоненты в операционной системе. Торможения и каких-либо лагов не заметил. На слабеньком Android всё замечательно.
Ionic Framework — копаем в глубь
Если сравнивать с нативной разработкой — неоспоримая экономия раза в два, так как разрабатываешь, смотря результат в браузере, потом проверяешь на обеих платформах. Огромный набор плагинов для доступа к нативным функциям тоже радует, не нужно лезть в нативный код.
Единственное, что я не нашёл, — авторизацию через «ВКонтакте» нативным образом через соответсвующее SDK, при этом Facebook присутствует. Позже напишу соответсвующий плагин, если не найду подходящее решение.
Если сравнить с гибридными приложениями, к которым я привык за последние два года, когда в приложении отображается веб-контент с сервера, тут подход несколько иной. В приложении уже лежат HTML-файлы вёрстки, в которые динамически вставляется контент с данными, полученные с сервера или внутренней базы данных. Так достигается высокая скорость работы интерфейса, в том числе и работа без интернета.
Набросал небольшое приложение по получению заявок с сервера, которое может работать без интернета.
Так как данные представляют из себя небольшой текстовый набор в пару килобайт, на плохом интернете всё это бодренько загружается без всяких проблем, чем если бы грузилась вся веб-страница.
Фишечки Ionic
LiveReload — отличная функция, которая позволяет сразу же видеть результаты работы в мобильном приложении, поправил, сохранил, увидел.
Так же в наборе инструментов Ionic есть возможность публиковать изменения в уже размещённом приложении в AppStore и Google Play, что очень удобно при исправлении критических ошибок.
Без всякого программирования можно собрать интерфейс в специальном редакторе, который позволяет набросать в прямом смысле компоненты и определить их параметры.
Интерфейс представляет из себя HTML, поэтому вёрстку можно заказать у любого веб-специалиста.
Немного кода — для общего понимания
Мне лично понравилось, что в вёрстке сразу можно заложить элементы логики поведения интерфейса, которые легко читаются. В шаблоне ниже видно, что в интерфейсе будут отображаться строки из массива messages, а также определено нажатие по клику.
А вот, например, строка с сообщением из чата, в котором сразу в интерфейсе обозначено, что данная строка будет отображена, только если ник написавшего не соответсвует текущему пользователю. Также в вёрстке сразу вставлены значения словаря message, который чуть выше и был определён.
Кнопку можно описать и в интерфейсе, чтобы она была неактивна, если отправлять ещё нечего.
Вот тут по большому счёту описан вывод массива в таблицу, а также действие при нажатии на ячейку.
Ещё пример вёрстки авторизации, где сначала предлагаем ввести номер телефона.
А затем при смене переменной isLogin интерфейс меняется на предложение ввести код из SMS.
Надеюсь, не перегрузил вас кодом, хотел лишь донести простоту вёрстки в базовом варианте, которая неплохо выглядит.
Сам программный код с логикой пишется на Angular, это производная от Javascript, которая легко осваивается при знании Javascript.
Первый практический опыт
Так как я считаю, что инструмент можно освоить лишь на практике, а не читая теорию, я решил написать мессенджер. Мессенджер позволит показать скорость работы мобильного приложения, а ещё это отличная основа для любого проекта с обменом данными в реальном времени.
Так и назову — RealTimePlatform. Платформа для создания мобильных приложений с обменом в реальном времени.
Я два года занимаюсь платформой по созданию сервисов поиска исполнителей, так вот и хотелось сделать некое ответвление в более онлайновую и быструю систему подбора исполнителя, как в такси. Модель Uber подразумевает быстрое назначение исполнителя, вся работа так или иначе похожа на систему сообщений.
Давайте разберёмся, какими сообщениями будем обмениваться при модели Uber:
- клиент отправляет заявку;
- исполнители в зависимости от отдалённости и рейтинга получают сообщение с заявкой;
- исполнитель откликается на заявку;
- клиент получает подтверждение выезда исполнителя;
- клиент получает GPS-маршрут приближения исполнителя;
- при достижении точки А исполнителем, клиент получает сообщение;
- клиент сообщает, что выходит;
- исполнитель отмечает начало выполнения заявки;
- исполнитель отмечает завершение задания;
- с клиента списывается оплата за заявку;
- исполнителю начисляются средства за выполненную заявку;
- клиент оценивает выполненную заявку.
Я реализовываю сейчас транспортную модель доставки данных в мобильном приложении для основы нового проекта.
Что готово на текущий момент:
- серверный скрипт на NodeJS для доставки данных между приложениями;
- авторизация по номеру телефона и коду из SMS, использован сервис Firebase, который даёт бесплатно 10 тысяч авторизаций в месяц;
- реализован общий чат с обменом в режиме реального времени;
- прокрутка к новому сообщению, если не листать вверх;
- звук при новом сообщении при открытом приложении;
- публикация роботом раз в 30 секунд тестовой заявки, тапнув по которой, можно посмотреть детальную информацию;
- подгрузка 20 последних сообщений с сервера в момент отсутствия пользователя;
- собрал iOS, доступно через TestFlight;
- собрал приложение для Android.
В мессенджере доработаю в ближайшее время:
- подтягивать старые сообщения при прокрутке вверх, те, что больше 20 уже подгруженных;
- push-уведомления о новых сообщениях.
Ближайший план:
- реализовать разные группы для чата;
- выстраивать платформу в Uber-модель.
На мой взгляд, получится отличная основа для различных сфер бизнеса: такси, курьерская служба, ремонт, дед мороз, юридическая помощь, помощь на дороге и другие. В общем, любой вид услуг, который необходимо получить в ближайшие десть минут.
Кстати, Ionic позволяет собрать PWA-приложение и под Windows Phone.