Мобильное приложение для сканирования и покупки сертификатов
О проекте
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. Оно выглядит просто и понятно, что позволит даже неопытным пользователям с лёгкостью справиться с процессом покупки или активации. Спустя некоторое время после запуска все ошибки были обнаружены и устранены, сейчас приложение работает практически безупречно.
Комментарии