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