О проекте
Цель – создание комфортного и функционального личного кабинета на сайте, который позволит пользователю контролировать свои договора с компанией и вносить платежи.
Начало работ по разработке
Реализация функционала личного кабинета – не первая задача, которую «Красный хамелеон» делал для проекта «Найкращий ломбард». Наши разработчики были уже знакомы с сайтом:
- выполнили редизайн;
- установили и настроили готовое решение «Аспро Корпоративный сайт 2.0», адаптировали шаблон под тематику клиента;
- помогли установить «Битрикс» на VPS-хостинг;
- оказывали поддержку при настройке CMS;
- консультировали по работе с решением;
- добавили второй язык – украинский, используя многосайтовую версию системы;
- реализовали функционал отображения ближайших отделений ломбарда к пользователю с учетом его местоположения;
- выполнили кроссбраузерное и кроссплатформенное тестирование прорисовки сайта и работу функционала;
- доработали внешний вид и верстку для корректного отображения.
Но это была лишь прелюдия. С настоящей разработкой наши программисты столкнулись именно на этапе выполнения новой задачи – создание полноценного функционального личного кабинета.
Нужно было полностью отойти от старого кабинета ломбарда, который представлял собой встроенный интерфейс 1С в сайт, и создать с нуля новый оптимизированный, безопасный и быстрый.
Основными требованиями клиента были:
- безопасность (многоступенчатая авторизация, ограниченное время сессии, защита от роботов);
- понятный дизайн и простота операций;
- мгновенная оплата (через защищенный веб-сервис, с получением статуса оплаты).
Задачи по созданию личного кабинета
- создать и внедрить новый дизайн личного кабинета, страниц авторизации и оплаты;
- адаптировать внешний вид к разным устройствам и платформам;
- обеспечить получение из 1С данных по договорам авторизованного пользователя;
- корректно рассчитывать сроки и суммы кредитных платежей, штрафных санкций;
- добавить возможность онлайн-оплаты.
Чтобы не упустить деталей совместно со специалистом в 1С и заказчиком было составлено очень обширное и подробное техническое задание, которое нам и предстояло реализовать.
Сложность
5 из 5
Кейс получил высший бал сложности ввиду целого ряда факторов:
- интеграция с кастомным функционалом 1С, разработанным специально для ломбарда;
- повышенные требования к безопасности всех операций;
- высокая ответственность;
- работа «на горячую» – выгрузить сервис нужно было 100% рабочим, так как сайтом уже пользовались реальные клиенты, все должно было бесперебойно работать на ресурсе клиента в первый же день.
Работы по разработке личного кабинета пользователя
Дизайн и верстка
Для визуального отображения на сайте пошаговой авторизации с помощью пароля, получаемого по СМС, разработаны формы с элементами управления и подробными описаниями вероятных ошибок.
Сделана верстка персональной области сайта с данными по всем договорам клиента.
Разработаны страницы для онлайн оплаты в системе Portmone через сайт.
Внесены правки в верстку ряда элементов в личном кабинете для десктопных и мобильных устройств:
- оформление таблиц;
- замена текста в формах;
- оформление и размещение кнопок;
- для корректной работы плагина сортировки таблицы в личном кабинете стрелки сортировки заменены с img на объекты svg.
Обеспечена кроссбраузерность для страниц авторизации, оплаты и личного кабинета пользователя. Исправлены ошибки отображения блоков в Internet Explorer, Chrome, Safari. Верстка проверена на десткопных, планшетных и самый популярных мобильных устройствах.
Для удобства входа в личный кабинет со смартфонов поле ввода номера договора и полученного по СМС кода сделаны цифровыми – type="number". Так на мобильных сразу открывается цифровая клавиатура.
Чтобы клиенту было удобнее просматривать таблицу с данными по всем договорам, таблица в личном кабинете была выведена на всю ширину экрана. Для этого убрали левый блок с меню.
Блок меню, который располагался возле таблицы перенесли вверх, под хлебные крошки, и разместили его в горизонтальном положении, обеспечив его адаптивность.
Кроме этого, для повышения удобочитаемости таблицы увеличены размер шрифтов и межстрочное расстояние, добавлены расстояния между колонками для более очевидного визуального отделения предоставляемых данных.
Для мобильной версии личного кабинета сайта таблица сверстана с учетом параметров небольшого экрана.
В таблицу сведений по договорам добавлена колонка «Сумма пени», чтобы пользователь получал максимум полезной информации в одном месте. Во все столбцы, где выведены денежные единицы добавлена валюта – «грн».
При загрузке страницы элементы появлялись и отображались некорректно.
Чтобы пользователь не видел промежуточные этапы формирования документа, разработчики настроили корректный порядок загрузки кода.
Программирование
Программисты наполнили функционалом все создаваемые области: реализовали процесс авторизации, внедрили работоспособный личный кабинет и интегрировали онланй-оплату.
Авторизация
Вход в персональную область осуществляется в три шага по номеру договора и телефону клиента. На первом этапе пользователь вводит договор, номер которого проверяется и при успешном ответе открывается второй шаг. При отсутствии введенных данных в базе выводится сообщение об ошибке.
На втором этапе пользователю предложено внести сотовый номер. Если он совпадает с данными в базе, на номер отправляется сообщение, содержащее код для входа. Для рассылки СМС выбран сервис TurboSMS, к которому подключили форму входа на сайт ломбарда.
На третьем шагу пользователь должен ввести полученный пароль. При загрузке формы ввода срабатывает таймер обратного отсчета, по истечении 60 секунд выводится кнопка «Отправить СМС еще раз».
Предусмотрено пять попыток для ввода корректного кода. При каждой таймер сбрасывается и считает заново. Если пять раз код был введен неправильно, также появляется возможность повторной отправки СМС.
При успешном результате проверки временного пароля открывается личный кабинет пользователя.
На каждом этапе авторизации можно вернуться на предыдущий шаг.
Настроен сброс авторизации по окончании сессии, а также по таймеру неактивности (если клиент ничего не делает на сайте, по истечении определенного времени доступ к личному кабинету автоматически прекращается).
Личный кабинет пользователя
После удачной авторизации запрашиваются активные договоры клиента и формируется таблица со всеми данными по ним.
Над таблицей выводятся персональные данные пользователя, номер его карты и количество бонусов на счету.
Добавлен вывод текстового блока под таблицей из 1С.
Добавлена возможность выбрать все договора в таблице для формирования общей суммы задолженности. Клиент может сортировать представленные данные по разным колонкам (по возрастанию и убыванию).
Добавлены разные стили для отображения договоров:
- в пределах срока – серый цвет;
- на «льготном периоде» – синий цвет;
- с просроченным сроком и окончившимся «льготным периодом» – красный.
Предусмотрена возможность оплатить онлайн кредитный платеж, проценты и пеню за просрочку по выбранным чекбоксами договорам. В меню личного кабинета предусмотрена подробная инструкция по онлайн-оплате.
Платеж совершается после нажатия кнопки «Оплатить» в сервисе Portmone. После удачной оплаты клиент возвращается в личный кабинет на страницу удачной оплаты и ему отправляется сообщение в Viber. На странице договоров добавляется статус «Оплачено». Этот статус договора отображается до конца суток, пропадает в 00:00.
При возникновении ошибки клиент оповещается о неудавшейся операции – переводится на страницу ошибки.
Сообщение об ошибке появляется также в случае удачной оплаты в платежной системе, если невозможно связаться с базой данных и получить сведения о договорах.
Если пользователь отменил оплату на Portmone, он возвращается в личный кабинет на страницу с таблицей договоров.
Интеграции
Для подключения и настройки двустороннего обмена данными разработчики «Красного хамелеона» взаимодействовали с 1С-программистом на стороне клиента. Сложность интеграции была в том, что для ломбарда подключена самописная конфигурация системы учета. Она создавалась конкретно под требования работы компании. Главные ее особенности: повышенная безопасность и жесткая изолированность кабинета от основной базы данных.
Все процедуры для получения данных должны были реализовываться программистами на стороне заказчика.
Второй частью интеграции было подключение онлайн-оплаты через сервис Portmone.com. При этом информация для оплаты берется из 1С и туда же передаются данные о факте проведения платежа. Клиент, нажимая кнопку «Оплатить» переходит на страницу сервиса, где вводит необходимые реквизиты для совершения операции. База ожидает отчета от сервиса о факте совершения денежного перевода или об ошибках.
Наши разработчики настроили взаимодействие с платежным сервисом по API и базой данных 1C. При оформлении платежа с сайта передается вся необходимая информация в Portmone, откуда принимается ответ о судьбе операции оплаты и записывается в 1С. Программисты тщательно проработали все связи для снижения количества обращений в основную БД ломбарда, по просьбе заказчика, ввиду ее перегруженности.
Добавили возможность быстрого перехода в личный кабинет при нажатии кнопки «Онлайн оплата» в меню сайта.
Для шифрования данных установили SSL-сертификат LetsEncrypt.
В итоге
Все задачи, требования и пожелания заказчика были выполнены и учтены. Нам удалось создать комфортный и одновременно защищенный кабинет пользователя на сайте «Найкращий ломбард».
Так как большинство пользователей смотрят сайт со смартфонов, при разработке дизайна и верстке шаблона основной упор сделали именно на мобильную версию. Реализовали компактный и понятный вывод договоров. Таблица одинаково хорошо смотрится и работает на всех определенных заказчиком устройствах.
Мы сделали процесс взаимодействия клиента с сайтом несложным и прозрачным. Детали прорабатывали с дизайнером и заказчиком. На каждом шагу предусмотрели пояснения вероятных ошибок авторизации и оплаты, добавили подробную инструкцию по входу и работе в личном кабинете.
Максимальная безопасность обмена данными достигнута за счет многоступенчатой авторизации, ограничения сессии, подключения SSL и внедрения защиты от роботов.
Так как «права на ошибку» и времени на доработку на рабочем сайте у нас не было, мы многократно протестировали весь функционал личного кабинета на разных устройствах и платформах. Тестировали все возможные сценарии работы кабинета, авторизацию, просмотр договоров, оплату.
После успешных тестов функционал был выгружен на рабочий сайт, где отлично работает.
Заказчик остался доволен проделанной работой. Не упускайте и вы шанс получить крутой сайт, заказывайте разработку веб-проектов в «Красном хамелеоне».