Мобільний додаток для інтернет-магазину
Розробляємо мобільний додаток для інтернет-магазину на 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Підготуємо пропозицію