Веб-студии, не разрабатывайте свое eCommerce мобильное приложение, воспользуйтесь нашим опытом

Технологии разработки гибридных мобильных приложений развиваются с невероятной скоростью. Это объясняется высокой востребованностью кроссплатформенной разработки мобильных бизнес приложений для различных задач. Никто не хочет платить дважды, когда можно создавать, улучшать и отлаживать сразу два приложения под iOS и Android, внося правки в код один раз, тем более, когда технологии созрели до приемлемого качества.

Наиболее популярные фреймворки для создания гибридных приложений предлагают удобный для веб-студий стек TypeScript(JavaScript) + HTML. Однако это не означает, что процесс создания полноценного мобильно приложения будет схож по уровню сложности с созданием среднего корпоративного сайта.

Мы – разработчики SaaS сервиса ReadyScript Mobile с 2016 года каждый день с утра до вечера работаем с Angular и IonicFramework и знаем об этом фреймворке и его экосистеме, наверное, все. В этой статье мы расскажем, как мы создавали наше приложение и с какими проблемами столкнулись.

Бурное развитие Ionic и Angular со сжиганием мостов

Когда мы начинали разрабатывать мобильное приложение в 2016 году, самым свежим был IonicFramework 2 Beta, а все его компоненты использовали Angular 2. Мы попали в эпицентр развития данной технологии, и почти каждый месяц выходило обновление, которое требовало внесения изменений в уже существующий код. Так, нам каждые 3-4 дня в месяц приходилось выделять на рефакторинг старого когда и исправление возникших после обновления проблем, чтобы все работало.

Изначально мы не могли представить, что процесс развития фреймворка будет таким кардинальным, и спустя год наш код уже будет заточен уже под IonicFramework 3 и Angular 4 с использованием всех фишек, которые предоставляют нам данные технологии.

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

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

Подбор cordova плагинов. Не все работают корректно. Не все проходят building на сервисах ionic

Эта проблема настигла нас в самом неожиданном виде. В какой-то момент мы решили прикрутить Push уведомления к нашему приложению, используя один из рекомендуемых ionic’ом push-плагинов. И вроде все работало, но спустя какое-то время мы выяснили, что приложения с кириллическими названиями(BundleDisplayName) не билдятся через сервис Ionic и виной тому был именно push-плагин. Проблема остается актуальной до сих пор. Ожидаем разбора проблемы на стороне сервиса Ionic.

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

Когда на ПК все работает, а на телефоне – нет

80% времени гибридное приложение разрабатывается в браузере, обычно в GoogleChrome. В браузере удобно прорабатывать интерфейс, работу всех «активностей», а также отлаживать запросы к бэкенду.

Веб-студии, не разрабатывайте свое eCommerce мобильное приложение, воспользуйтесь нашим опытом

20% времени разработка ведется в эмуляторах, обычно чтобы протестировать работу плагинов, которые связаны с нативными функциями устройств. Отладка в эмуляторах очень медленная, потому что эмуляторы медленны сами по себе, выжирают львиную часть ресурсов даже на довольно производительном железе, но это не главная трудность. Главная трудность в том, что не всегда то, что работает в эмуляторе, работает на реальном устройстве.

В таком случае приходится делать специальный билд приложения с выводом в консоль всей необходимой отладочной информации, подключать устройство к компьютеру и отлаживать его через отладчик браузера. Благо, приложение, созданное на IonicFramework, работает в компоненте WKWebView и поддается простой удаленной отладке через инструменты разработчика браузера. Такой вариант отладки отнимает больше времени, чем те, что перечислены выше, но является в некоторых случаях единственно возможным вариантом.

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

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

В одном плагине (Push) нам даже пришлось разбираться с JAVA и OBJECTIVE-C кодом, чтобы понять, как правильно составить тело push уведомления, чтобы оно корректно приходило и на Android и iOS.

Отладка плагинов занимает непредсказуемое количество времени, особенно когда по теме вашей проблемы в интернете нет ничего.

Mac, iPhone и Android устройства все же нужно будет купить

Несмотря на то, что собирать IPA файлы можно с помощью облачного сервиса Ionic, как минимум MacMini все равно нужен для удобной отладки приложения. Нужны будут также физические устройства, такие как iPhone, любой смартфон на Android 5+, желательно любой планшет, чтобы проверить адаптацию дизайна.

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

Высокий уровень вхождения

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

Помимо этого нужно отлично знать особенности мобильных браузеров, так как весь интерфейс и поведение будет строиться в обычном браузере. Например, если в iOS 11 вы заметите, что при скроллировании страницы, у вас иногда пропадают изображения, нужно докопаться, что тегу IMG нужно установить CSS-хак в виде transform: translate3d(0, 0, 0); и это лишь один самый простой пример.

Позитив

Если все перечисленное выше преодолено, то наступает счастливое время поддержки и улучшения приложения. Приложения на IonicFramework + Angular 4 действительно работают быстро и комфортно. Благодаря их сервису Ionic Deploy можно выпускать обновления в обход AppStore и GooglePlay, напрямую на устройства клиентов.

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

Заключение. Что же делать?

Мы в компании ReadyScript прошли этот непростой путь разработки приложения в период развития теперь уже нашего любимого Ionic фреймворка и готовы предложить разработчикам коробочный продукт – мобильное eCommerce приложение ReadyScript Mobile вместе с платформой для интернет-магазина ReadyScript.

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

А если у вашего клиента типовые требования к интернет-магазину, то мы готовы предложить аренду платформы для интернет-магазина совместно с мобильным приложением ReadyScript Mobile по SaaS схеме.

Оценить возможности ReadyScript Mobile, можно с помощью демо-приложения RS Mobile в AppStore и GooglePlay.

44
3 комментария

React Native смотрит на происходящее с легким недоумением

1
Ответить

Эммм... Запустил демо приложение и вижу следующее.
Отличный framework, который умеет делать статичные картинки...? 👍

Ответить

Добрый день! Проверили, на наших устройствах такого не наблюдается. Нам очень интересны подробности. Напишите, пожалуйста нам в поддержку support@readyscript.ru какое у вас устройство.

Ответить