Мобильное приложение для интернет-магазина
Разрабатываем мобильное приложение для интернет-магазина на iOS и Android, чтобы покупатели чаще возвращались и заказывали повторно. Приложение подключаем к действующему сайту через API, поэтому каталог, цены и заказы в нём те же, что на сайте. Для быстрого старта предлагаем PWA или Telegram Mini App.
Виды приложения для интернет-магазина
01
Что такое приложение для интернет-магазина
Мобильное приложение для интернет-магазина — программа для iOS и Android, которую покупатель устанавливает из App Store или Google Play. Каталог, цены, остатки и заказы приложение получает с вашего сайта, а при интеграции — из CRM или учётной системы. Приложение дополняет сайт и помогает получать повторные заказы. Покупатель открывает магазин с главного экрана смартфона, получает push-уведомления об акциях и статусе заказа, входит по отпечатку пальца или лицу, а бонусная карта (если есть программа лояльности) всегда под рукой.
02
API сайта для приложения
API — программный интерфейс для обмена данными между системами. Через API приложение получает с сайта каталог, цены и статусы заказов, а на сайт передаёт новые заказы. Если API на сайте нет или его функций не хватает, разрабатываем новый или дорабатываем имеющийся. Для этого нужен доступ к коду сайта. Если сайт доработать нельзя, предлагаем серверную часть на Laravel или Django для хранения содержимого приложения, управления им и обмена данными с вашими внутренними системами или сервисами.
03
Виды приложения для интернет-магазина
Разрабатываем приложение для магазина в четырёх видах: нативное, кроссплатформенное, PWA (сайт, который ставится на смартфон как приложение) и Telegram Mini App (приложение внутри мессенджера Telegram). PWA и Telegram Mini App поддерживают не все функции приложения или выполняют их иначе.
Нативные приложения для iOS и Android
Отдельные приложения для iPhone и Android-смартфонов. Выбирают, когда нужны сложный интерфейс, максимальная скорость работы и все функции смартфона. Подробнее — «разработка iOS-приложений» и «разработка Android-приложений».
Кроссплатформенное приложение
Одно приложение для iOS и Android на Flutter или React Native с общим кодом. Публикуется в App Store и Google Play и обычно обходится дешевле двух нативных приложений. Подробнее — «кроссплатформенная разработка».
PWA
Покупатель добавляет сайт на главный экран смартфона и открывает его как приложение, без адресной строки браузера и без загрузки из App Store и Google Play. Подходит для каталога и заказов, когда не нужны функции смартфона, недоступные в браузере. При необходимости PWA можно опубликовать в Google Play.
Telegram Mini App
Покупатель открывает магазин кнопкой в Telegram-боте или по ссылке, выбирает товары и оформляет заказ, не выходя из Telegram. Отдельная регистрация не нужна: покупатель входит через свой аккаунт Telegram. Подробнее — «Telegram Mini App».
04
С чего начать
Пока спрос на приложение не проверен, предлагаем начать с разработки PWA-приложения или Telegram Mini App. Оба варианта дешевле и быстрее в разработке, чем приложение для iOS и Android, а обновления в них покупатели видят сразу, без проверки в App Store и Google Play. Когда спрос подтвердится, можно перейти к приложению для iOS и Android на тех же данных сайта.
Создать приложение из сайта в виде PWA или Telegram Mini App можно двумя способами:
На основе страниц сайта. Вариант дешевле, но для него нужна адаптивная вёрстка (страницы правильно отображаются на экране смартфона). Если её нет, предлагаем сначала сверстать адаптивные страницы
С отдельным интерфейсом. Экраны проектируем под смартфон независимо от дизайна сайта, а данные приложение получает с сайта через API. Позже к этому же API можно подключить приложение для iOS и Android
05
Когда магазину нужно приложение
Приложение приносит прибыль не каждому магазину. Перед разработкой вместе с вами оцениваем, окупится ли оно сейчас.
Приложение оправдано, если
Многие клиенты возвращаются и делают повторные заказы
Магазин продаёт то, что покупают регулярно, например продукты, косметику, бытовую химию, корм для животных или детские товары
Магазин начисляет бонусы или продаёт подписку: в приложении покупатель видит баланс и подписку, а push-уведомления напоминают о начисленных бонусах
Большинство заказов на сайте оформляют со смартфонов
Разработку предлагаем отложить, если
Мебель или крупную технику покупают раз в несколько лет, и держать ради этого приложение на смартфоне покупатель не станет
Приложение установят единицы, поэтому сначала стоит увеличить число повторных заказов на сайте
На сайт магазина покупатели почти не заходят, поэтому и приложение открывать не станут
После публикации покупателей нужно приглашать установить приложение и давать им причину его открывать: push-рассылки, акции и бонусы только для приложения. Без этого приложение установят немногие
В таких случаях предлагаем начать с PWA или Telegram Mini App, чтобы проверить спрос с меньшим бюджетом.
06
Функционал приложения
Приложение для интернет-магазина может включать:
Каталог и заказ
Каталог с разделами и категориями, поиск и фильтры, карточки товаров с ценой и наличием, корзина, выбор способа доставки и оплата онлайн или при получении. Покупатель находит товар по разделам каталога, через поиск или фильтры и оформляет заказ прямо в приложении.
Личный кабинет
Вход по номеру телефона, почте или через аккаунт Apple или Google. В личном кабинете покупатель указывает адреса доставки, видит историю и статусы своих заказов, повторяет прошлые покупки, сохраняет избранные товары и следит за балансом бонусов.
Push-уведомления
Сообщения о статусе заказа, брошенной корзине, поступлении товара и акциях возвращают покупателя в приложение.
Программа лояльности
Баллы, кешбэк, промокоды и персональные скидки дают покупателю причину заказывать у вас повторно. Если у магазина есть розничные точки и приложение связано с учётной системой, бонусную карту из приложения покупатель показывает на кассе.
Оптовые заказы
Оптовые покупатели видят свои персональные цены и условия, оформляют заказы, отслеживают статусы заказов и отгрузок, получают счета и накладные и контролируют взаиморасчёты. Вопросы по заказам решают в чате с персональным менеджером, а уведомления сообщают о поступлениях и изменении цен.
Функции смартфона
Чаще всего это вход по отпечатку пальца или распознаванию лица, оплата через Apple Pay и Google Pay, определение адреса доставки и ближайших пунктов самовывоза по геолокации и сканирование QR-кодов камерой, например промокодов.
Управление приложением
Товары, цены и заказы вы ведёте на сайте, как и раньше. Чтобы вы управляли баннерами, акциями, push-рассылками и бонусной программой приложения, дорабатываем панель управления сайта. Если сайт доработать нельзя, предлагаем разработать серверную часть приложения с панелью управления для этих функций.
07
Этапы разработки
Бриф и аудит сайта
Анализируем задачи бизнеса и определяем функции приложения, затем проводим аудит сайта: проверяем, есть ли на нём API и какие данные через него можно передавать в приложение. По итогам брифа и аудита предлагаем, с чего начать: нативное или кроссплатформенное приложение, PWA или Telegram Mini App.
Техническое задание
Описываем функции приложения, доработки сайта и интеграции, указываем стоимость каждого этапа, чтобы бюджет был понятен до начала разработки.
Прототипы и дизайн
Проектируем экраны и путь покупателя к заказу и показываем вам на смартфоне кликабельный прототип — модель приложения с работающими переходами между экранами. После согласования прототипа создаём дизайн и готовим макеты экранов. PWA и Telegram Mini App на основе страниц сайта используют его дизайн, поэтому этот этап для них не нужен.
Интеграции и программирование
Программируем приложение по утверждённым макетам и подключаем его к сайту через API, а при необходимости — к CRM и учётной системе. PWA и Telegram Mini App на основе страниц сайта работают на его адаптивной вёрстке и обходятся без отдельного API. Push-рассылки и другие недостающие функции разрабатываем на сайте, а если сайт доработать нельзя, — в серверной части приложения.
Тестирование
Проверяем функции приложения и обмен данными с сайтом на iPhone и Android-смартфонах. До публикации вы устанавливаете тестовую версию на свой смартфон через TestFlight и закрытое тестирование Google Play. PWA проверяем в браузерах смартфонов на тестовом домене, а Telegram Mini App — в Telegram через тестового бота.
Публикация
Публикуем приложение в App Store и Google Play от имени вашей компании и сопровождаем проверку магазинов. Аккаунты разработчика на вашу компанию помогаем зарегистрировать ещё во время разработки: Apple и Google сначала проверяют данные компании, и без этой проверки приложение не опубликовать. PWA размещаем на сайте, Telegram Mini App подключаем к боту магазина.
08
Стоимость приложения для интернет-магазина
Стоимость приложения для интернет-магазина зависит от объёма работ. Помимо общих факторов, которые перечислены на странице о разработке мобильных приложений, для магазина важны:
Нативное или кроссплатформенное приложение. Два нативных приложения для iOS и Android программируют отдельно, поэтому работ больше, чем с одним кроссплатформенным приложением на общем коде
PWA и Telegram Mini App. Вариант на основе страниц сайта использует его готовую вёрстку и обходится дешевле всего. Вариант с отдельным интерфейсом дороже: каждый экран проектируем и программируем заново
Доработка сайта. Если на сайте нет API или его функций не хватает, к работам над приложением добавляется доработка сайта
Серверная часть. Если сайт доработать нельзя, разрабатываем серверную часть для хранения содержимого приложения, управления им и обмена данными с вашими внутренними системами или сервисами. Работ при этом больше, чем при доработке сайта
Функции, которых нет на сайте. Push-рассылки, бонусную программу и другие такие функции разрабатываем в двух местах: в приложении и на сайте или в серверной части, поэтому каждая из них увеличивает объём работ
Предварительную стоимость называем после брифа и аудита сайта.
Обсудить задачу09
Техподдержка сайта и приложения
Обеспечиваем техподдержку после запуска: реагируем на обращения в течение часа, а критические сбои устраняем и в нерабочее время, если это входит в тариф. Сайт магазина и приложение предлагаем взять на техподдержку вместе.
В техподдержку входят:
Поиск и исправление сбоев. Отслеживаем ошибки в работе магазина и ищем их причину сразу в приложении, на сайте и на сервере
Совместимость с новыми версиями iOS и Android. Каждый год выходят новые версии iOS и Android, а Apple и Google повышают требования к приложениям в App Store и Google Play. Дорабатываем приложение под эти изменения, чтобы оно работало без ошибок и оставалось доступным покупателям в магазинах
Обновления и безопасность. Обновляем библиотеки приложения и модули сайта до версий, где исправлены найденные ошибки и уязвимости
PWA и Telegram Mini App. Поддерживаем их работу при выходе новых версий браузеров и Telegram
Сервер и резервные копии. Если администрирование сервера магазина у нас, следим за нагрузкой и регулярно делаем резервные копии
Развитие магазина. Разрабатываем новые функции приложения и сайта и выпускаем их в очередных обновлениях
Подробнее — «техподдержка сайтов» и «техподдержка мобильных приложений».
Обсудить задачу10
Вопросы о приложении для интернет-магазина
01Зачем приложение, если есть мобильная версия сайта?
Мобильная версия сайта и приложение решают разные задачи. Сайт находят новые покупатели через поиск в Google и рекламу, приложение — через поиск в App Store и Google Play. Приложение в основном устанавливают постоянные покупатели: магазин всегда на главном экране смартфона, повторный заказ оформляется с сохранёнными данными и входом по отпечатку пальца, а push-уведомления сообщают о статусе заказа, акциях и бонусах. Приложение дополняет сайт и помогает чаще получать повторные заказы.
02Нужно ли переделывать сайт?
Нет. Приложение работает с данными сайта через API, поэтому сайт остаётся прежним. Дорабатываем его только в трёх случаях:
- на сайте нет API или его функций не хватает для приложения;
- приложению нужны функции, которых на сайте нет, например push-рассылки или бонусная программа;
- на сайте нет адаптивной вёрстки, а она нужна для PWA и Telegram Mini App на основе его страниц.
03Можно ли создать приложение из сайта, упаковав его страницы в оболочку?
Можно, но с риском отказа. Apple (правило 4.2) и Google (правило о минимальной функциональности) могут отклонить приложение, которое только показывает страницы сайта без собственных функций. Поэтому для App Store и Google Play предлагаем приложение с собственным интерфейсом, подключённое к сайту через API. Если нужен быстрый и недорогой запуск на основе страниц сайта, предлагаем PWA или Telegram Mini App.
04Как установить PWA и будут ли уведомления?
На Android покупатель устанавливает PWA через меню браузера или кнопкой установки на сайте, которую добавляем при разработке. На iPhone PWA устанавливают через кнопку «Поделиться» и пункт «На экран „Домой“». Push-уведомления (с согласия покупателя) на Android приходят из браузера без установки, а на iPhone — только после установки PWA на главный экран.
05Нужен ли бот для Telegram Mini App?
Да: Telegram Mini App запускается через бота компании, и этот же бот присылает уведомления тем, кто разрешил ему писать. Если бота нет, помогаем создать его в вашем аккаунте Telegram.
06Сколько времени занимает разработка?
Продолжительность разработки зависит от объёма функций и скорости согласования этапов. При публикации в App Store и Google Play добавляется время на проверку Apple и Google. Срок называем вместе с оценкой стоимости.
11
Заказать приложение для интернет-магазина
Почему RIVERIT доверяют разработку мобильного приложения для интернет-магазина:
С 2015 года и больше 100 проектов
Среди них мобильные приложения и интернет-магазины
Все виды приложений своими силами
Разрабатываем нативные и кроссплатформенные приложения для iOS и Android, PWA и Telegram Mini App без привлечения других подрядчиков
Изучаем ваш магазин
До разработки анализируем рынок, приложения конкурентов и ваш сайт и по итогам предлагаем функции приложения под задачи магазина
Управляемое ИИ-производство
Архитектуру задаёт фреймворк, а каждое изменение проверяют тесты
Сайт магазина и приложение вместе
Сопровождаем сайты и администрируем серверы, поэтому приложение, сайт и сервер магазина работают как одна система
Персональный менеджер
Ведёт проект, сообщает о ходе работ и согласует с вами каждый этап
Чтобы заказать мобильное приложение для сайта магазина, опишите задачу в форме ниже. Создание приложения интернет-магазина начинаем с брифа, по итогам которого предложим подходящий вариант: нативное или кроссплатформенное приложение, PWA или Telegram Mini App.
Обсудить задачуУслуги направления
Мобильные приложения
12Контакты
Расскажите
о задаче
Опишите проект или проблему с сайтом. Мы свяжемся с вами в рабочее время, уточним детали и подготовим предложение с этапами, сроками и стоимостью.
- 01Свяжемся с вами
- 02Обсудим задачу
- 03Подготовим предложение