Услуги

  • Сайты

  • Контент

  • Продвижение

  • Битрикс24

  • Приложения

Все услуги Оплата
Все услуги Оплата

Поиск

  • Разработка интернет-магазина под ключ
  • Разработка сайтов
  • Разработка леднигов
  • Разработка на битрикс24
  • Разработка на Вордпресс
		Array
(
    [0] => 
    [1] => https://webnauts.pro/wp-content/uploads/2022/03/1.png
    [2] => 1174w
)
		

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

О проекте

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

В рамках сотрудничества с компанией мы разработали целую экосистему продуктов:

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

В этот раз мы расскажем о мобильном приложении Scan&Pay, которое создавалось для платформы Android c использованием фреймворка React Native.

Задача

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

Однако далеко не все гости планируют отдых заранее. Некоторые из них принимают решение спонтанно, будучи уставшими и находясь в поиске комфортного места для ожидания. Но в этом случае возникает неожиданное препятствие: администратор бизнес-зала не имеет права принимать деньги от клиента, поэтому оплатить доступ на месте не получится. Необходим сертификат, карта лояльности или билет высокого класса. Поэтому нашей задачей №2 стало решение вопроса оплаты.

Реализация

Идея разработки мобильного приложения возникла не сразу. Мы к ней пришли после нескольких мозговых штурмов и пары десятков правильно заданных вопросов. Вот основные предпосылки, из которых мы исходили:

  1. Как максимально быстро можно проверить и активировать сертификат? С помощью QR-кода, сканирование которого поможет избежать ручного ввода и долгих проверок.
  2. Как отделить процесс оплаты от администратора бизнес-зала, которому нельзя принимать наличные и карты? С помощью онлайн-покупки сертификата, которую можно будет совершить не отходя от стойки.
  3. Какое устройство одновременно позволяет отсканировать 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-код невозможно — код сертификата можно ввести вручную.

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-девелоперов на практике.

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