Послуги

  • Сайти
  • Контент
  • Просування
  • Бітрікс24
  • Додатки
Усі послуги Оплата
Бітрікс24
Усі послуги Оплата

Пошук

  • Разработка интернет-магазина под ключ
  • Разработка сайтов
  • Разработка леднигов
  • Разработка на битрикс24
  • Разработка на Вордпресс

Мобільний додаток для сканування та покупки сертифікатів

Про проект

Golden Key — сервіс для доступу до бізнес-залів нового формату від офіційного партнера мережі залізниць. Клієнту достатньо придбати електронний сертифікат, після чого він отримує повний доступ на 3 години та все необхідне для комфортної роботи чи спокійного відпочинку.

У рамках співпраці з компанією ми розробили цілу екосистему продуктів:

  • Лендінг компанії з карткою бізнес-залів;
  • Мобільний додаток Scan&Pay для верифікації чи оплати сертифікатів користувачами;
  • Особистий кабінет покупця для онлайн-придбання сертифіката;
  • Додаток для адміністратора бізнес-залу;
  • Дизайн табличок та вивісок адміністратора.

На цей раз ми розповімо про мобільний додаток Scan&Pay, яке створювалося для платформи Android з використанням фреймворку React Native.

Завдання

При вході до бізнес-зали відвідувачів зустрічає адміністратор за стійкою. Перш ніж гості зможуть зайти всередину, адміністратору необхідно переконатися у справжності сертифіката та активувати його. Реалізувати цю процедуру максимально швидко та просто було нашим завданням №1.

Однак далеко не всі гості планують відпочинок наперед. Деякі з них приймають рішення спонтанно, будучи втомленими і знаходячись у пошуку комфортного місця для очікування. Але в цьому випадку виникає несподівана перешкода: адміністратор бізнес-залу не має права брати гроші від клієнта, тому сплатити доступ на місці не вийде. Необхідний сертифікат, мапа лояльності або квиток високого класу. Тому нашим завданням №2 стало вирішення питання оплати.

Реалізація

Ідея розробки мобільного додатку виникла не відразу. Ми до неї прийшли після кількох мозкових штурмів та кількох десятків правильно заданих питань. Ось основні передумови, з яких ми виходили:

  1. Як максимально швидко можна перевірити та активувати сертифікат? За допомогою QR-коду, сканування якого допоможе уникнути ручного введення та тривалих перевірок.
  2. Як відокремити процес оплати від адміністратора бізнес-залу, якому не можна приймати готівку та карти? За допомогою онлайн-покупки сертифіката, яку можна буде здійснити, не відходячи від стійки.
  3. Який пристрій дозволяє одночасно відсканувати QR-код і здійснити онлайн-покупку? Будь-який смартфон або планшет.

Таким чином, було прийнято рішення встановити планшети, які виступали б у ролі терміналів самообслуговування. І вже під них почали розробляти відповідне програмне забезпечення.

Розробка програми для покупки та сканування сертифікатів

Мобільний додаток було написано з нуля за допомогою кроссплатформенного фреймворку React Native, має JavaScript-коріння. За допомогою цієї технології були написані тисячі відомих додатків, серед яких Facebook, Instagram, Oculus, Tesla, Pinterest, Skype та SoundCloud Pulse.

Особливість React Native в тому, що він дозволяє створювати програми як для Android, так і для iOS. В нашому випадку програма Scan&Pay адаптована для користувачів смартфонів та планшетів на Android.

Також у процесі розробки були задіяні такі мобільні технології, як:

  • QR-scanner — дозволяє миттєво зчитувати QR-коди.
  • Redux — відповідає за стабільний стан програми.
  • React Native Camera — комплексний компонент камери в React Native, що дозволяє розпізнавати не лише QR-коди, а й фото, відео, текст та обличчя людей.

Дизайн та структура програми

Програма реалізована максимально мінімалістично: вся функціональність ховається за двома кнопками. Одна з них відповідає за сканування вже наявного сертифіката, друга — за покупку нового. Звідси і назва програми — «Scan&Pay».

Дизайн програми був розроблений за подобою сайту-лендінгу, раніше створеним у творчій лабораторії нашої компанії. Літерний логотип, стримана гамма кольорів з акцентом на золоті, сучасний шрифт Manrope, що мінімум відволікають елементів — все це робить дизайн інтерфейсу стильним, мінімалістичним та зручним у використанні. Великі клікабельні кнопки дозволяють легко переміщатися розділами програми (а значить, обслуговувати клієнтів без заминок).

Сканування сертифіката у додатку

Цей процес реалізований дуже просто і складається буквально з одного кроку (ви не повірите) – сканування. Гостю достатньо вибрати відповідний пункт на головному екрані та помістити QR-код сертифіката перед камерою планшета. Якщо з якихось причин вважати QR-код неможливо, код сертифіката можна ввести вручну.

01

/ 02

Якщо сертифікат був успішно активований, то система повідомить про це гостя на екрані планшета та адміністратора на екрані комп’ютера. Таймер автоматично запуститься на 3 години.

На випадок, якщо з якоїсь причини платіж не пройшов, ми передбачили екрани помилки з поясненням причин збою, передбачивши всі можливі варіанти. Ми не тільки пояснюємо користувачеві чому сталася помилка, але й підказуємо, як її можна виправити.

01

/ 03

Купівля сертифіката у додатку

Функція покупки працює за принципом оплати на сайті Golden Key за допомогою інтеграції з ЮKassa, яка дозволяє сплатити сертифікат будь-яким зручним способом: від Google та Sber Pay до ЮMoney гаманця або банківської картки.

При цьому сценарій оплати максимально спрощений і складається з 3 кроків (і те, один з них не обов’язковий):

  1. Вибір банку на оплату;
  2. Введення e-mail для надсилання чека (можна пропустити);
  3. Сканування QR-коду через додаток банку.

01

/ 03

Готово! Оплата миттєво проходить через СБП (систему швидких платежів), а адміністратору з його комп’ютер надходить автоматичне підтвердження купівлі. Активація сертифіката здійснюється автоматично, внаслідок чого таймер запускається на 3 години. Тепер адміністратор може запросити гостя пройти до бізнес-залу.

На випадок, якщо з якоїсь причини не пройшов платіж, ми передбачили екрани помилки з поясненням причини збою.

01

/ 03

Підсумок

Вся робота над створенням програми зайняла 2 тижні. Додаток розроблялося з нуля, а фірмові елементи дизайну до цього часу були реалізовані в дизайні лендингу компанії. До того ж, це далеко не перший проект нашої компанії, реалізований на React Native, тому особливих труднощів у процесі роботи не виникло. Додаток не публікувався у відкритий доступ для скачування, оскільки орієнтований на адміністраторів Golden Key – така політика компанії. Однак теоретично мобільний додаток також підходить і для самообслуговування пасажирів.

За підсумками, нам вдалося успішно вирішити обидві поставлені завдання, розробивши якісний мобільний додаток для Android. Воно виглядає просто і зрозуміло, що дозволить навіть недосвідченим користувачам легко впоратися з процесом купівлі або активації. Через деякий час після запуску всі помилки були виявлені та усунені, зараз програма працює практично бездоганно.

Бажаєте спростити життя співробітникам та вивести обслуговування клієнтів на новий рівень?

Наша команда розробить ефективний мобільний додаток, який підвищить не тільки продаж, а й імідж вашої компанії. Обговоріть свій проект вже сьогодні та оцініть суперможливості наших UI/UX дизайнерів та Mobile-девелоперів на практиці.

Над проектом работали

Схожі проекти

Мобільний додаток для сканування та покупки сертифікатів
5/5 (30 людей)