Как сделать приложение интернет магазина

ReadyScript Mobile — готовое eCommerce мобильное приложение

«Хочу мобильное приложение для интернет-магазина» — такие запросы все чаще поступают от владельцев брендов к веб-разработчикам. Но как обычной веб-студии удовлетворить столь масштабный запрос, если среди компетенций компании есть только веб-разработка?

По нашим данным, в большинстве случаев небольшие веб-студии пытаются отговорить клиента от мобильного приложения в пользу обычной адаптивности сайта или независимой мобильной версии. Часто это удается, хотя приходится отбиваться от множества сложных вопросов, например, таких как: “А почему у всех брендов, которые на слуху есть собственное мобильное приложение, зачем они тогда его делают?”.

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

В 2016 году мы оценили эту проблему и спустя год предложили готовое решение для создания мобильного приложения для интернет-магазинов, разработанных на платформе ReadyScript. Как обычно, мы предлагаем и SaaS и коробку. Новый сервис получил название ReadyScript Mobile.

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

С чего все началось?

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

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

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

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

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

Выбор технологии

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

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

Мы выбирали между ReactNative и IonicFramework. Понятно, что первое от второго очень сильно отличается, так ReactNative позволяет строить интерфейсы приложения с помощью нативных компонентов, но с помощью JavaScript и React. В то время как IonicFramework – это фреймворк, основанный на cordova, позволяющий строить мобильные приложения в WebView, где нативными возможностями можно пользоваться с помощью специальных cordova плагинов-мостов.

Вначале наш выбор пал на ReactNative, нам показалась, что он даст максимальную производительность UI, на которую так часто жаловались те, кто работал с cordova. Но после долгих поисков разработчиков ReactNative (это был июнь 2016 года), у нас опустились руки, мы поняли, что интересующихся данной технологией крайне мало в нашем городе (Краснодар).

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

Мы стали присматриваться к ionicFramework. Уже к тому времени у них была шикарная экосистема, которая позволяла билдить приложения для iOS и Android через командную строку. Увидев это, мы очень обрадовались, так как это означало, что мы сможем полностью автоматизировать сборку приложений, и нашим специалистам поддержки не нужно будет загружать в xCode и AndroidStudio проекты каждого клиентского приложения для генерации APK и IPA файлов.

Далее мы увидели, что в экосистеме IonicFramework есть возможность обновления приложений без перепубликации в appStore и googlePlay (ionic deploy) также через консольную команду. Это означает, что хотфиксы можно будет выпускать автоматически для всех клиентов почти мгновенно, без волокиты и невыносимо длительного Review (со стороны appStore).

Отдельно стоит сказать про скорость. Некоторые приложения, написанные на Cordova, действительно отличались невысокой скоростью интерфейсов, однако чаще это было связано с низкой скоростью JS фронтенда приложений, написанных с использованием jQuery. С выходом Angular 2, а позднее и Angular 4, все изменилось. Скорость отклика и ощущение от работы приложения в целом стали приемлемы.

В итоге богатая экосистема, большое количество плагинов, приемлемая производительность помогли нам выбрать IonicFramework в качестве основы для нашего сервиса.

Реализация и подводные камни

Разработка оказалась не такой простой, как мы предполагали. Она заняла у нас 1 год работы. За это время мы написали все необходимые API на бэкенде, разработали все личные кабинеты и промо-страницы на нашем сайте, создали непосредственно само клиентское приложение и вспомогательное DEMO приложение.

Основную сложность составило то, что 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 производить deploy(развертывание новой версии) напрямую на клиентские устройства в обход маркетплейсов, мы реализовали быструю возможность обновления приложений, если пользователь изменяет, например, цветовую схему приложения в своем личном кабинете.

Несмотря на это, мы периодически перевыпускаем приложения непосредственно в appStore и googlePlay, чтобы сразу после установки у новых клиентов не возникало сообщение, что для приложения имеется обновление.

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

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

Push уведомления — отличный маркетинговый инструмент

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

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

Важно сказать, что Push рассылки можно проводить прямо из административной панели интернет-магазина. Для каждого сообщения можно задать текст и точку назначения, в которую перейдет пользователь после нажатия на push. Это может быть товар, категория или статья.

Как расширять возможности приложения?

Каждый бизнес уникален. Несмотря на то, что сейчас в приложении реализован достаточный набор функций с запасом, все равно кому-то понадобятся кастомизации. Мы это понимаем, а потому предусмотрели несколько вариантов.

Первый – самый простой – это расширение функциональности приложения через маркетплейс ReadyScript.

Как это возможно? При запуске приложения мы заложили точку роста в виде загрузки корректирующего работу Angular компонентов JS скрипта с сервера интернет-магазина, а также загрузку Ionic шаблонов. Откорректировать JS скрипт и шаблон с помощью хуков может любой модуль платформы ReadyScript.

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

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

Работа с партнерами-разработчиками или коробочная версия мобильного приложения

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

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

Продвижение

Для удобства продвижения сервиса, мы создали демонстрационное приложение, в котором можно указать доменное имя интернет-магазина на платформе ReadyScript и API-ключ, чтобы увидеть будущее мобильное приложение, наполненное данными клиента.

Приложение опубликовано в appStore и googlePlay под именем RS Mobile. Если у вас нет интернет-магазина, то возможности приложения можно оценить, нажав на надпись «у меня нет своего магазина»

Заключение

ReadyScript Mobile – это современное решение проблемы мобильных приложений для интернет-магазинов, построенное на технологиях 2017 года. Благодаря прямой интеграции сервиса с платформой ReadyScript, достигается оптимальное слияние возможностей eCommerce CMS и мобильного приложения.

Сервис ReadyScript Mobile – это доступная возможность для конечного пользователя получить мобильное приложение для интернет-магазина своего бренда, а для партнеров-разработчиков – удовлетворить растущий спрос клиентов на присутствие их бизнеса в мобильных устройствах с наименьшими затратами.

Источник

Создаем приложение для интернет-магазина

Зачем магазину мобильное приложение?

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

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

2. Цели
Определитесь с целями, которые собираетесь достичь с помощью мобильного приложения. Цели должны лежать в плоскости вашего бизнеса и не ограничиваться самим мобильным приложением. То есть, получить десять тысяч скачиваний — это плохая цель, увеличить среднее количество заказов на 30% — хорошая цель. Ведь в идеале разработка мобильного приложения для интернет-магазина должна повлиять на весь бизнес в целом. Например, сокращается среднее время на обработку заказов— есть возможность увеличить общий объем продаж, не увеличивая штат.

3. Желание вкладываться
Мобильное приложение не сможет выжить в одиночку, без вашей помощи. Если выкинуть его в интернет и ждать от него отдачи, можно потратить кучу времени и денег зря. Поэтому, задумав начать разработку приложения, начинайте продумывать и стратегию его внедрения в работу, продвижения в интернете, соцсетях, через офлайновые каналы. У вас должен быть план, как преподнести ваше приложение, и команда, которая с удовольствием этим займется.

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

Если вы решили делать мобильное приложение, то подумайте, что ценного вы можете предложить будущим пользователям. Само по себе мобильное приложение не является ценностью — ценно то, что пользователь найдет внутри. И тут важно понять — кто они, ваши покупатели; какие боли они решают с помощью вашей продукции; какие у них могут быть страсти; чем вы можете помочь им непосредственно в приложении. Вы и так должны это понимать, даже если не собираетесь создавать мобильное приложение. Логично, что забывать об этом ни в коем случае нельзя при разработке приложения. Иначе может получиться отличный, суперценный инструмент — совершенно ненужный вашей аудитории.

В чем может быть ценность мобильного приложения интернет-магазина для пользователей?

Какие выбрать функции мобильного приложения для интернет-магазина?

1. Каталог товаров, удобный выбор по параметрам и просмотр деталей.

Есть два типа людей: одни приходят в магазин за выбором, другие ищут что-то конкретное. Чтобы удовлетворить потребности и тех других, нужно создать удобный для поиска каталог, где представлен весь ассортимент ваших товаров. Человек ищет по разным параметрам (если это одежда, то важен размер, цвет, производитель, марка, ткань, сезон и цена), но если человек просто ищет что-то, за что зацепиться взгляд, то множество деталей может рассеять его внимание, и он вряд ли совершит спонтанную покупку. Как решить эту задачу? В приложении для магазина обуви и аксессуаров Rendez-vous мы сделали такой каталог товаров: карточки товаров яркие и представляют модели во всей красе, а при нажатии на картинку пользователь видит детальное описание. При этом поиск товаров можно осуществлять по выбранным параметрам.

2. Возможность покупки онлайн.

Важная опция мобильного приложения для интернет-магазина — покупка онлайн, еще лучше, если несколькими способами. При этом важно учесть специфику вашей ниши. Например, где-то очень важно увидеть товар до покупки, поэтому, если у вас предусмотрены пункты выдачи, в мобильном приложении также должна быть карта пунктов, возможность выбора способа оплаты и пункта, а также, в идеале, возможность сменить способ оплаты и пункт выдачи, пока это возможно. Покупателю должно быть максимально удобно в вашем приложении, иначе зачем его скачивать, если на рынке полно конкурентных предложений и офлайновых пунктов продаж?
Упростить процесс покупки можно добавив опцию «привязки» банковской карты к приложению: покупателю даже вводить ничего не нужно, выбрал товар, нажал кнопку купить и подтвердил кодом. Но здесь есть свои минусы: люди по-прежнему опасаются доверять свои данные мобильным девайсам. Поэтому стоит всерьез подумать о безопасности и надежной системе авторизации, которая при этом будет удобна пользователю.

3. Wishlist сокращает время обслуживания клиента.

Не все магазины осуществляют продажи онлайн, и это не значит, что для них разработка мобильного приложения противопоказана. Есть сложные товары, и вы можете с помощью приложения облегчить покупателю выбор. Есть такие товары, за которыми покупатели ходят со списками, например, товары для ремонта и стройматериалы. Приложение может служить помощником пользователя в подборе товаров и сохранять списки желаемых покупок. Затем, придя в магазин, пользователю лишь нужно обратиться к продавцу со списком (либо сделать предзаказ прямо из приложения). Это сокращает время обслуживания клиента и время самого покупателя на осуществление покупок. Ведь теперь ему не нужно слоняться по отделам в поисках нужных товаров.

4. Система рекомендаций помогает делать допродажи.

Если на вашем сайте внедрена система рекомендаций, то грех не дать этот полезный инструмент и пользователям мобильного приложения. Если же вы пока не обладаете таким инструментом, то стоит задуматься о его реализации. Это нужно пользователям — клиенты теряются в огромном количестве товаров и устают от поисков, а тут вы предлагаете им именно то, что скорее всего им нужно. Это полезно и для вас — вы увеличиваете продажи. Рекомендательные системы бывают разные и с разным уровнем сложности для разработки. Рекомендовать можно на основе уже выбранных или просмотренных товаров, а также путем предложений сопутствующих товаров. Принцип один: проанализировав поведение пользователя, вы можете предположить его потребности и интересы, и предложить ему что-то ценное для него. Что он с большой вероятностью купит.

5. Наличие товаров и карта с ближайшими магазинами экономит время покупателей.

Представьте, что вам срочно нужно купить ботинки, поблизости нет компьютера, а сайтом на мобильном устройстве пользоваться не всем удобно. При этом поиск нужной модели по магазинам займет уйму времени. Представили? Это реальная боль многих покупателей, ведь совсем не каждый любит тратить время на затяжной шопинг. Вот почему опция проверки наличия товаров в магазинах, а затем быстрый и удобный поиск этих магазинов на карте, является ценным предложением пользователям мобильного приложения для интернет-магазина. Как это реализовать на практике? Можно попросить персонал вводить актуальные данные, а можно интегрировать приложение с сайтом, 1С, другими сервисами, которые отслеживают наличие товаров на вашем складе и в магазинах.

6. Новости и события вовлекают пользователей.

Совсем не обязательный раздел мобильного приложения для интернет-магазина, но в некоторых случаях может служить инструментом вовлечения пользователей и стимулирования покупок. Но чтобы новости и события работали на ваши цели, а не занимали место в приложении и не отвлекали внимание пользователей от ваших услуг, нужно оповещать только о важных маркетинговых акциях, мероприятиях по интересам (например, показ мод, выставка новой продукции и т.д.). В приложении для Rendez-vous мы реализовали календарь модных мероприятий для любительниц люксовых брендов обуви.

7. Система лояльности, индивидуальные бонусы и скидки увеличивают средний чек.

Бонусная система — самый популярный крючок, на который попадаются покупатели и скачивают мобильное приложение магазина. При этом можно продумать специальную систему лояльности именно для пользователей приложения. Для вас получать заказы из мобильного приложения может быть выгоднее (зависит от конкретного случая), а покупателю будет выгодно делать заказ из приложения, если это удобно, быстро и приносит дополнительные бонусы.

8. iBeacon помогает построить персонализированный маркетинг.

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

Если кто не знает, маячок iBeacon — это устройство размером со спичечный коробок, которое крепится в помещении магазина. Приложение посредством Bluetooth передает свой уникальный номер, и маячок «узнает» пользователя вместе с его историей покупок, посещений, времени, проведенном в магазине, и даже тепловой картой его хождения по отделам. Как говорится, любой каприз. Тема эта не до конца освоена и изучена и являет собой огромное поле для экспериментов. Однако уже сейчас ясно: настала пора персонализированного маркетинга на основе Big Data, который позволяет предугадывать потребности клиента. Это вызывает множество споров, как технических, так и этических. Пользователям тоже есть, о чем подумать. Одни боятся Большого Брата, другие же с удовольствием готовы получать персональные предложения и бонусы, тем самым экономя деньги и время.

Продвижение не только в Интернете

Есть такие покупатели, которые сами интересуются, есть ли у любимого магазина приложение. Но большинство просто не задумывается об этом, при этом не прочь были бы установить приложение, если оно действительно удобно. Как быть в такой ситуации? Очень просто. Мы настолько сильно пытаемся выиграть конкуренцию в Интернете, что забываем о самых простых способах продвижения услуг. Важно, чтобы ваши продавцы знали о приложении и спрашивали покупателей, знают ли они, хотят ли скачать, и если скачали, то пользуются ли. Не стоит навязывать: просто расскажите о приложении в личном общении. Пока это самый действенный способ, и если у вас есть возможность встретить клиента лицом к лицу, грех этим не пользоваться.

Напоследок немного статистики m-commerce

Доля проникновения мобильного интернета в крупных мегаполисах на начало 2016 года достигает 91%, в целом же по стране цифра выглядит более скромной — всего 15% мобильных онлайн-заказов (несмотря на рекламу, мобильный интернет все еще плохо ловится в глубинке). Но эти цифры неуклонно растут. Такая тенденция на сегодня выглядит выигрышной для крупных ретейлов, которые насчитывают выручку от мобильных приложений в миллиардах рублей. При этом эксперты отмечают, что создание мобильного приложения формирует группу лояльных клиентов, которые готовы делать постоянные покупки. Приложение в свою очередь служит каналом для индивидуального общения с лояльными пользователями, что при умном маркетинге ведет к повышению спроса.
Отсюда вывод: делать мобильное приложение для магазина стоит, если у вас есть постоянные покупатели, налажен стабильный бизнес и вас знают на рынке.

Источник