Мобільний додаток для сканування та покупки сертифікатів
Про проект
Golden Key — сервіс для доступу до бізнес-залів нового формату від офіційного партнера мережі залізниць. Клієнту достатньо придбати електронний сертифікат, після чого він отримує повний доступ на 3 години та все необхідне для комфортної роботи чи спокійного відпочинку.
У рамках співпраці з компанією ми розробили цілу екосистему продуктів:
- Лендінг компанії з карткою бізнес-залів;
- Мобільний додаток Scan&Pay для верифікації чи оплати сертифікатів користувачами;
- Особистий кабінет покупця для онлайн-придбання сертифіката;
- Додаток для адміністратора бізнес-залу;
- Дизайн табличок та вивісок адміністратора.
На цей раз ми розповімо про мобільний додаток Scan&Pay, яке створювалося для платформи Android з використанням фреймворку React Native.
Завдання
При вході до бізнес-зали відвідувачів зустрічає адміністратор за стійкою. Перш ніж гості зможуть зайти всередину, адміністратору необхідно переконатися у справжності сертифіката та активувати його. Реалізувати цю процедуру максимально швидко та просто було нашим завданням №1.
Однак далеко не всі гості планують відпочинок наперед. Деякі з них приймають рішення спонтанно, будучи втомленими і знаходячись у пошуку комфортного місця для очікування. Але в цьому випадку виникає несподівана перешкода: адміністратор бізнес-залу не має права брати гроші від клієнта, тому сплатити доступ на місці не вийде. Необхідний сертифікат, мапа лояльності або квиток високого класу. Тому нашим завданням №2 стало вирішення питання оплати.
Реалізація
Ідея розробки мобільного додатку виникла не відразу. Ми до неї прийшли після кількох мозкових штурмів та кількох десятків правильно заданих питань. Ось основні передумови, з яких ми виходили:
- Як максимально швидко можна перевірити та активувати сертифікат? За допомогою QR-коду, сканування якого допоможе уникнути ручного введення та тривалих перевірок.
- Як відокремити процес оплати від адміністратора бізнес-залу, якому не можна приймати готівку та карти? За допомогою онлайн-покупки сертифіката, яку можна буде здійснити, не відходячи від стійки.
- Який пристрій дозволяє одночасно відсканувати 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-код неможливо, код сертифіката можна ввести вручну.
Якщо сертифікат був успішно активований, то система повідомить про це гостя на екрані планшета та адміністратора на екрані комп’ютера. Таймер автоматично запуститься на 3 години.
На випадок, якщо з якоїсь причини платіж не пройшов, ми передбачили екрани помилки з поясненням причин збою, передбачивши всі можливі варіанти. Ми не тільки пояснюємо користувачеві чому сталася помилка, але й підказуємо, як її можна виправити.
Купівля сертифіката у додатку
Функція покупки працює за принципом оплати на сайті Golden Key за допомогою інтеграції з ЮKassa, яка дозволяє сплатити сертифікат будь-яким зручним способом: від Google та Sber Pay до ЮMoney гаманця або банківської картки.
При цьому сценарій оплати максимально спрощений і складається з 3 кроків (і те, один з них не обов’язковий):
- Вибір банку на оплату;
- Введення e-mail для надсилання чека (можна пропустити);
- Сканування QR-коду через додаток банку.
Готово! Оплата миттєво проходить через СБП (систему швидких платежів), а адміністратору з його комп’ютер надходить автоматичне підтвердження купівлі. Активація сертифіката здійснюється автоматично, внаслідок чого таймер запускається на 3 години. Тепер адміністратор може запросити гостя пройти до бізнес-залу.
На випадок, якщо з якоїсь причини не пройшов платіж, ми передбачили екрани помилки з поясненням причини збою.
Підсумок
Вся робота над створенням програми зайняла 2 тижні. Додаток розроблялося з нуля, а фірмові елементи дизайну до цього часу були реалізовані в дизайні лендингу компанії. До того ж, це далеко не перший проект нашої компанії, реалізований на React Native, тому особливих труднощів у процесі роботи не виникло. Додаток не публікувався у відкритий доступ для скачування, оскільки орієнтований на адміністраторів Golden Key – така політика компанії. Однак теоретично мобільний додаток також підходить і для самообслуговування пасажирів.
За підсумками, нам вдалося успішно вирішити обидві поставлені завдання, розробивши якісний мобільний додаток для Android. Воно виглядає просто і зрозуміло, що дозволить навіть недосвідченим користувачам легко впоратися з процесом купівлі або активації. Через деякий час після запуску всі помилки були виявлені та усунені, зараз програма працює практично бездоганно.
Комментарии