Обзор разработки мобильных приложений на Ionic Framework

Стоит сказать, что я занимаюсь разработкой нативных мобильных приложений на iOS семь лет, немного умею писать под Android. Последние два года занимался оболочкой под iOS для webView-приложений.

Собрал демонстрационную версию компонентов, представленных в Ionic, и записал скринкаст с iPhone.

Скринкаст компонентов Ionic Framework

А тут по ссылке можно вживую посмотреть работу компонент, и как они будут отображаться и работать на iOS и Android. Как нативщик могу сказать, что выглядит и работает, как родные компоненты в операционной системе. Торможения и каких-либо лагов не заметил. На слабеньком Android всё замечательно.

Если сравнивать с нативной разработкой — неоспоримая экономия раза в два, так как разрабатываешь, смотря результат в браузере, потом проверяешь на обеих платформах. Огромный набор плагинов для доступа к нативным функциям тоже радует, не нужно лезть в нативный код.

Единственное, что я не нашёл, — авторизацию через «ВКонтакте» нативным образом через соответсвующее SDK, при этом Facebook присутствует. Позже напишу соответсвующий плагин, если не найду подходящее решение.

Если сравнить с гибридными приложениями, к которым я привык за последние два года, когда в приложении отображается веб-контент с сервера, тут подход несколько иной. В приложении уже лежат HTML-файлы вёрстки, в которые динамически вставляется контент с данными, полученные с сервера или внутренней базы данных. Так достигается высокая скорость работы интерфейса, в том числе и работа без интернета.

Набросал небольшое приложение по получению заявок с сервера, которое может работать без интернета.

Работа мобильного приложения без интернета

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

Работа приложения с плохим интернетом

LiveReload — отличная функция, которая позволяет сразу же видеть результаты работы в мобильном приложении, поправил, сохранил, увидел.

Функция LiveReload в действии

Так же в наборе инструментов Ionic есть возможность публиковать изменения в уже размещённом приложении в AppStore и Google Play, что очень удобно при исправлении критических ошибок.

Без всякого программирования можно собрать интерфейс в специальном редакторе, который позволяет набросать в прямом смысле компоненты и определить их параметры.

Обзор разработки мобильных приложений на Ionic Framework

Интерфейс представляет из себя HTML, поэтому вёрстку можно заказать у любого веб-специалиста.

Мне лично понравилось, что в вёрстке сразу можно заложить элементы логики поведения интерфейса, которые легко читаются. В шаблоне ниже видно, что в интерфейсе будут отображаться строки из массива messages, а также определено нажатие по клику.

<ion-row *ngFor="let message of messages" (click)="goToDetailPage(message)">

А вот, например, строка с сообщением из чата, в котором сразу в интерфейсе обозначено, что данная строка будет отображена, только если ник написавшего не соответсвует текущему пользователю. Также в вёрстке сразу вставлены значения словаря message, который чуть выше и был определён.

<ion-col col-9 *ngIf="message.from !== nickname"> <span class="user_name">{{ message.from }}</span><br> <span>{{ message.text }}</span> <div class="time">{{message.created | date:'dd.MM hh:MM:ss'}}</div> </ion-col>

Кнопку можно описать и в интерфейсе, чтобы она была неактивна, если отправлять ещё нечего.

<button ion-button clear color="primary" (click)="sendMessage()" [disabled]="message === ''"> Отправить </button>

Вот тут по большому счёту описан вывод массива в таблицу, а также действие при нажатии на ячейку.

<ion-list [virtualScroll]="listData"> <ion-item *virtualItem="let item" (click)="goToDetailPage(item)"> <h2>{{item.title}}</h2> <p>{{item.timestamp}}</p> </ion-item> </ion-list>

Ещё пример вёрстки авторизации, где сначала предлагаем ввести номер телефона.

<div *ngIf="isLogin"> <ion-item> <ion-label stacked>Номер телефона</ion-label> <ion-input type="number" [(ngModel)]="phoneNumber"></ion-input> </ion-item> <button ion-button id="sign-in-button" (click)="signIn(phoneNumber)"> Войти </button> </div>

А затем при смене переменной isLogin интерфейс меняется на предложение ввести код из SMS.

<div *ngIf="!isLogin"> <ion-item> <ion-label stacked>Проверочный код</ion-label> <ion-input type="number" [(ngModel)]="confirmationCode"></ion-input> </ion-item> <button ion-button id="confirm-sms" (click)="confirmSMS(confirmationCode)"> Подтвердить </button> </div>

Надеюсь, не перегрузил вас кодом, хотел лишь донести простоту вёрстки в базовом варианте, которая неплохо выглядит.

Сам программный код с логикой пишется на Angular, это производная от Javascript, которая легко осваивается при знании Javascript.

Так как я считаю, что инструмент можно освоить лишь на практике, а не читая теорию, я решил написать мессенджер. Мессенджер позволит показать скорость работы мобильного приложения, а ещё это отличная основа для любого проекта с обменом данными в реальном времени.

Так и назову — RealTimePlatform. Платформа для создания мобильных приложений с обменом в реальном времени.

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

Давайте разберёмся, какими сообщениями будем обмениваться при модели Uber:

клиент отправляет заявку;
исполнители в зависимости от отдалённости и рейтинга получают сообщение с заявкой;
исполнитель откликается на заявку;
клиент получает подтверждение выезда исполнителя;
клиент получает GPS-маршрут приближения исполнителя;
при достижении точки А исполнителем, клиент получает сообщение;
клиент сообщает, что выходит;
исполнитель отмечает начало выполнения заявки;
исполнитель отмечает завершение задания;
с клиента списывается оплата за заявку;
исполнителю начисляются средства за выполненную заявку;
клиент оценивает выполненную заявку.

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

Что готово на текущий момент:

серверный скрипт на NodeJS для доставки данных между приложениями;
авторизация по номеру телефона и коду из SMS, использован сервис Firebase, который даёт бесплатно 10 тысяч авторизаций в месяц;
реализован общий чат с обменом в режиме реального времени;
прокрутка к новому сообщению, если не листать вверх;
звук при новом сообщении при открытом приложении;
публикация роботом раз в 30 секунд тестовой заявки, тапнув по которой, можно посмотреть детальную информацию;
подгрузка 20 последних сообщений с сервера в момент отсутствия пользователя;
собрал iOS, доступно через TestFlight;
собрал приложение для Android.

В мессенджере доработаю в ближайшее время:

подтягивать старые сообщения при прокрутке вверх, те, что больше 20 уже подгруженных;
push-уведомления о новых сообщениях.

Ближайший план:

реализовать разные группы для чата;
выстраивать платформу в Uber-модель.

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

Кстати, Ionic позволяет собрать PWA-приложение и под Windows Phone.

Обзор разработки мобильных приложений на Ionic Framework

Ionic Framework — вид сверху

Ionic Framework — копаем в глубь

Фишечки Ionic

Немного кода — для общего понимания

Первый практический опыт