«Хочу мобильное приложение для интернет-магазина» — такие запросы все чаще поступают от владельцев брендов к веб-разработчикам.
Но как обычная веб-студия сможет удовлетворить столь масштабный запрос, если в компетенции компании только веб-разработка? По нашим данным, в большинстве случаев небольшие веб-студии пытаются отговорить клиента от мобильного приложения в пользу обычной адаптивности сайта или самостоятельной мобильной версии.
Зачастую это удается, хотя приходится отбиваться от многих непростых вопросов, например таких: «Почему у всех известных брендов есть свое мобильное приложение, зачем они тогда это делаютЭ» В тех случаях, когда клиента невозможно убедить и он все же хочет обеспечить своим пользователям высокий уровень сервиса и проникновение своего бренда на различные устройства, веб-студия начинает поиск доступных решений.
В 2016 году мы оценили эту проблему и через год предложили готовое решение для создания мобильного приложения для интернет-магазинов, разработанное на платформе ReadyScript. Как обычно, мы предлагаем как SaaS, так и коробочную версию.
Новый сервис называется ReadyScript Mobile. 
Ниже под катом мы расскажем, какие технологии мы использовали, с какими трудностями столкнулись и как их преодолели.
Попутно мы сравниваем уникальное качество нашего сервиса с другими решениями, а именно прямую интеграцию с интернет-магазином клиента, без посредников.
С чего все началось?
Однажды к нам в гости пришел руководитель партнерской веб-студии и пожаловался, что клиенты растут и постоянно ищут вдохновение для роста, просматривая проекты лидеров рынка электронной коммерции.Все больше людей просят мобильные приложения, но не все согласны на бюджеты шесть-ноль.
Мы подумали, а на самом деле клиенты хотят не просто какое-то ограниченное по функционалу мобильное приложение, а полноценное, как у лидеров рынка.
Они хотят, чтобы там было всё: и текущие остатки, и наличие на складах, и поддержка всех видов вариаций товара, и возможность оплаты, и выбор тех же способов доставки, что и на сайте, и всевозможные фильтры, и единая авторизация.
как на сайте и так далее.
Мы начали искать то, что сегодня есть на рынке в этой области и нашли всего пару универсальных конструкторов, обладающих достаточным функционалом.
Они построены по стандартной посреднической схеме, когда в них нужно загрузить товары через YML, а уже потом администрировать заказы интернет-магазина в личном кабинете такого стороннего сервиса.
Мы сразу поняли, что это слишком большой компромисс, на который пришлось пойти нашим клиентам, чтобы получить свое мобильное приложение:
- Информация о ценах, остатках и другие данные о товарах в мобильном приложении периодически становятся неактуальными.
- Заказы, оформленные через мобильное приложение, должны администрироваться в отдельной панели посреднической службы, а все остальные заказы - в административной панели интернет-магазина или в учетной системе (1С);
- Нет привязки к возможностям платформы (Например, если у пользователя есть персональный тип цен, то в мобильном приложении цены все равно не изменятся).
Оплата и доставка никак не связаны с CMS; все нужно вводить отдельно в панели управления посреднического сервиса.
Все каталоги городов, дисконтные программы – ничего автоматически не синхронизируется с вашим сайтом.
И мы должны предоставить нашим партнерам-разработчикам коробочную версию мобильного приложения с возможностью модификации приложения под клиента.
Это выгодно всем — партнеры могут зарабатывать на мобильных приложениях по той же схеме, по которой они работают с той или иной CMS: покупают лицензию CMS, модифицируют отдельные функции и продают ее клиенту.
Клиенты получают качественный продукт по доступной цене, который разработан и усовершенствован на многих клиентах.
Выбор технологии
С самого начала мы рассматривали только кроссплатформенные технологии, поскольку процесс разработки в этом случае будет максимально комфортным.Вы один раз добавляете фичи, один раз отлаживаете код, один раз исправляете ошибки, по сути, сразу в двух приложениях.
Это дешевле.
Экономика занимала важное место в нашем проекте, поэтому мы искали технологии, которые не заставляли бы нас потом направлять всю прибыль на поддержку проекта, а давали бы возможность инвестировать ее в развитие.
В мобильном приложении электронной коммерции нет больших вычислений, нет невероятных требований к графике, а соответственно, гибридные технологии вполне способны отображать типичные для интернет-магазина действия.
Мы выбирали между ReactNative и IonicFramework. Понятно, что первое сильно отличается от второго, поскольку ReactNative позволяет строить интерфейсы приложений, используя нативные компоненты, но используя JavaScript и React. В то время как IonicFramework — это фреймворк на основе кордовы, который позволяет создавать мобильные приложения в WebView, где можно использовать собственные возможности с помощью специальных плагинов моста кордовы.
Сначала наш выбор пал на ReactNative, нам казалось, что он даст максимальную производительность пользовательского интерфейса, на что так часто жаловались те, кто работал с кордовой.
Но после долгих поисков разработчиков ReactNative (это был июнь 2016 года) мы сдались и поняли, что в нашем городе (Краснодаре) людей, интересующихся этой технологией, очень мало.
Со временем мы все больше осознавали, что наш продукт будет ориентирован на веб-студии, хорошо знакомые с веб-технологиями.
Нам необходимо предоставить им продукт, который они смогут модифицировать и расширять в форме, знакомой веб-разработчикам.
Необходимо было максимально абстрагировать их от мобильных технологий, а не от мобильных приложений.
Мы начали внимательно присматриваться к ionicFramework. К тому времени у них уже была отличная экосистема, позволяющая создавать приложения для iOS и Android через командную строку.
Когда мы это увидели, мы были очень рады, потому что это означало, что мы сможем полностью автоматизировать сборку приложений, и нашим специалистам поддержки не нужно будет загружать проекты каждого клиентского приложения в xCode и AndroidStudio для генерации файлов APK и IPA. .
Далее мы увидели, что в экосистеме IonicFramework можно обновлять приложения без повторной публикации их в appStore и googlePlay (ionic Deploy), в том числе и через консольную команду.
Это означает, что исправления могут выпускаться автоматически для всех клиентов практически мгновенно, без волокиты и невыносимо долгого обзора (из appStore).
Отдельно стоит сказать о скорости.
Некоторые приложения, написанные на Cordova, действительно отличались низкой скоростью интерфейса, но чаще всего это было связано с низкой скоростью JS-интерфейса приложений, написанных с использованием jQuery. С выпуском Angular 2, а затем и Angular 4 все изменилось.
Скорость отклика и ощущения от приложения в целом стали приемлемыми.
В результате богатая экосистема, большое количество плагинов и приемлемая производительность помогли нам выбрать IonicFramework в качестве основы для нашего сервиса.
Реализация и подводные камни
Разработка оказалась не такой простой, как мы ожидали.Нам потребовался 1 год работы.
За это время мы написали все необходимые API на бэкенде, разработали все личные кабинеты и промо-страницы на нашем сайте, создали само клиентское приложение и вспомогательное ДЕМО-приложение.
Основная сложность заключалась в том, что Angular и IonicFramework активно развивались параллельно с тем, как мы разрабатывали свое приложение.
За этот период Angular обновился с версии 2 до 4, Ionic с версии 2 до 3. Мы только успели обновить пакеты и потратили недели на исправление проблем, возникших после обновления.
То один плагин переставал работать с другим, то из Angular или Ionic вырезали какой-то дизайн, то публиковались новые фичи, ускоряющие работу системы, и нам приходилось их реализовывать и переписывать код. В общем, мы все это мужественно переносили, но всегда работали только с последней версией, так как понимали, что выпустить сервис на устаревшей версии фреймворка невозможно.
Нам пришлось купить Apple MacMini для отладки приложения iOS, несмотря на то, что мы могли создавать файлы IPA и загружать их через iTunes на устройство на нашей основной машине с Windows.
В результате на данный момент у нас есть приложение, написанное на Angular4 + IonicFramework 3, и всё протестировано на iOS и Android. Приложение имеет огромный список функций и прекрасно интегрировано с нашей платформой ReadyScript. 
Как это работает сейчас?
Сервис ReadyScript Mobile интегрирован в экосистему и предоставляется в стандартной форме через личный кабинет на нашем сайте ReadyScript.ru. Мы разрешаем пользователю самостоятельно заполнить данные в личном кабинете для подключения к своему интернет-магазину ReadyScript через API (доменное имя, API-ключ), затем предлагаем заполнить все поля, необходимые для публикации приложения в appStore и googlePlay. (название, описание).Далее предлагаем определить цветовую схему будущего приложения.
Только после публикации приложения в маркетплейсах нам открывается возможность оплатить подписку.
Мы предлагаем свои услуги на всех сложных участках этого пути.
Точнее, мы предлагаем создание иконок и заставок приложений, предлагаем помощь в регистрации аккаунтов в appStore и googlePlay, а также берем на себя генерацию всех необходимых сертификатов в клиентских аккаунтах для сборки приложения, а также публикацию самого приложения.
Благодаря возможности сервиса Ionic развертывать (развертывать новую версию) напрямую на клиентские устройства, минуя маркетплейсы, мы реализовали возможность быстрого обновления приложений, если пользователь меняет, например, цветовую схему приложения в личном кабинете.
счет. Несмотря на это, мы периодически перевыпускаем приложения напрямую в AppStore и GooglePlay, чтобы новые клиенты не получали сразу сообщение о наличии обновления для приложения сразу после установки.
Владельцы интернет-магазинов видят всю информацию о статусе подписки в своей административной панели.
Если приближается срок подписки, уведомления будут отправляться по всем каналам, включая административную панель магазина.
Мобильное приложение работает напрямую с сервером интернет-магазина, а это значит, что все балансы, цены и настройки всегда будут актуальными.
Push-уведомления — отличный маркетинговый инструмент
Когда мы реализовали подсистему Push-уведомлений, мы подумали, что было бы неплохо еще и передавать модель устройства при регистрации Push-токена в интернет-магазине.Нам тогда очень сказали спасибо интернет-магазины по продаже электроники и аксессуаров.
Таким образом они смогли сделать таргетированные Push-рассылки о поступлении конкретных аксессуаров владельцам только определенных смартфонов, что значительно увеличило их продажи.
Впоследствии мы увидели, что некоторые наши клиенты сегментируют своих клиентов по платежеспособности, используя фильтр по модели телефона, и производят более целевые рассылки.
Важно сказать, что Push-рассылки можно осуществлять прямо из административной панели интернет-магазина.
Для каждого сообщения можно задать текст и пункт назначения, куда пользователь перейдет после нажатия кнопки push. Это может быть товар, категория или статья.
Как расширить возможности приложения?
Каждый бизнес уникален.Несмотря на то, что приложение теперь имеет достаточный набор функций с запасом, кому-то все равно понадобится кастомизация.
Мы это понимаем, и поэтому предусмотрели несколько вариантов.
Первый – самый простой – это расширение функционала приложения через торговую площадку ReadyScript. Как это возможно? При запуске приложения мы заложили точку роста в виде загрузки JS-скрипта, корректирующего работу Angular-компонентов с сервера интернет-магазина, а также загрузки шаблонов Ionic. Любой модуль платформы ReadyScript может редактировать JS-скрипт и шаблон с помощью хуков.
Такой подход позволяет корректировать или дополнять поведение существующих активностей и компонентов приложения, но не позволяет, например, добавлять новые активности приложения.
Например, используя этот механизм расширения функционала, модуль «Бонусная программа» из нашего маркетплейса настраивает работу корзины покупок в мобильном приложении, позволяя отображать текущее количество пользовательских бонусов, а также засчитывать их в качестве скидки.
Если клиент требует более кардинальных изменений, нужно создать индивидуальную сборку приложения и использовать модификацию и поддержку коробочной версии приложения, а не SaaS. Это возможно с помощью партнеров или наших сервисов (далее только партнеры).
Работа с разработчиками-партнерами или коробочной версией мобильного приложения.
Для партнеров, разрабатывающих проекты электронной коммерции на платформе ReadyScript, мы подготовили две партнерские программы, одна из которых предполагает агентскую схему продажи подписок на мобильные приложения для своих клиентов, а другая предоставляет возможность продавать коробочную лицензию на мобильное приложение компетентный партнер.
Коробочная лицензия на мобильное приложение — отличная возможность для веб-студии снизить затраты при разработке мобильного приложения электронной коммерции для конечного пользователя.
По сути, это позволяет студии сосредоточиться только на уникальных, индивидуальных особенностях клиента, не зацикливаясь на разработке рутинных вещей, таких как заказ, оплата, поиск, фильтрация товаров, подсистема push-уведомлений и многое другое.
Повышение
Для удобства продвижения сервиса мы создали демо-приложение, в котором вы можете указать доменное имя интернет-магазина на платформе ReadyScript и API-ключ, чтобы увидеть будущее мобильное приложение, наполненное данными о клиентах.
Приложение опубликовано в AppStore и GooglePlay под названием RS Mobile. Если у вас нет интернет-магазина, то оценить возможности приложения вы можете, нажав на надпись «У меня нет своего магазина» 
Заключение
ReadyScript Mobile — современное решение проблемы мобильных приложений для интернет-магазинов, построенное на технологиях 2017 года.Благодаря прямой интеграции сервиса с платформой ReadyScript достигается оптимальное слияние возможностей CMS электронной коммерции и мобильного приложения.
Сервис ReadyScript Mobile — это доступная возможность для конечного пользователя получить мобильное приложение для интернет-магазина своего бренда, а для партнеров по развитию удовлетворить растущий спрос клиентов на присутствие своего бизнеса на мобильных устройствах с наименьшими затратами.
Ссылки
Сайт сервиса Презентация Мобильный сервис ReadyScript Демо-приложение RS Мобайл В Магазин приложений И Гугл игры Теги: #readyscript #ionic #ionic framework #электронная коммерция #AppStore #googleplay #CMS #программирование #Разработка мобильных приложений #Разработка электронной коммерции-
Необходимость Обучающих Игр Для Детей
19 Oct, 24 -
Как Я Перешел На Ubuntu
19 Oct, 24 -
Microsoft Анонсировала Windows Mobile 6
19 Oct, 24 -
Любители Ruby On Rails
19 Oct, 24
