{ "author_name": "Артем Полторанин", "author_type": "self", "tags": [], "comments": 3, "likes": 3, "favorites": 6, "is_advertisement": false, "section_name": "blog", "id": "29392", "is_wide": "" }
Артем Полторанин
254
Блоги

Веб-студии, не разрабатывайте свое 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. В браузере удобно прорабатывать интерфейс, работу всех «активностей», а также отлаживать запросы к бэкенду.

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.

{ "is_needs_advanced_access": false }

Комментарии Комм.

Популярные

По порядку

0

Прямой эфир

Нейронная сеть научилась читать стихи
голосом Пастернака и смотреть в окно на осень
Подписаться на push-уведомления
[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "create", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-158433683", "adfox_url": "//ads.adfox.ru/228129/getCode?p1=bxbwd&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid21=&puid22=&puid31=&fmt=1&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } } ]