У каждого «инструмента» через определенный период времени наступает момент, когда он перестает справляться с поставленной задачей, происходит это в основном из-за банальной деградации качества или постоянно растущих требований потребителя.
Ко мне обратился IT отдел муниципального предприятия города Коломна МУП «Тепло Коломны» с задачей разработать новый ЛК(личный кабинет), так как старый кабинет теряет актуальность в функциональном плане. За данный проект никто не хотел браться из-за его специфичности и сложности, обычного готового движка было бы недостаточно. Мне предстояло сделать ресурс на котором абоненты могли просматривать всю актуальную информацию о их лицевой счетах в реальном времени.
Проблемы старого кабинета
Прежде чем создавать новое, нужно было учесть ошибки старого. В старом кабинете было много проблем:
- Абоненты не могли сами зарегистрироваться, сменить пароль и почту, все эти шаги проходили через посещение IT отдела предприятия и трату кучи времени и нервов как сотрудников, так и абонентов.
- Данные об абонентах не предоставлялись в «реальном времени». Синхронизация данных происходила раз в сутки через промежуточный файл, который генерировала 1С и подгружал старый ЛК в свою базу, при этом часто наблюдались сбои из-за парсинга огромного файла или нехватки оперативной памяти для такой задачи.
- Кабинет не имел адаптивной верстки или мобильной версии, а количество пользователей со смартфонов растущее каждый год и 60% от общего трафика с мобильных устройств явно дает понять, что это не позволительно в 2018 году.
- При онлайн оплате баланс абонента обновлялся только когда придет выписка из банка, а это несколько дней и более, что вызывало кучу вопросов и опять-же потерю времени.
- Вся важная конфигурация хранились в PHP файле и для редактирования настроек приходилось подключаться к серверу по FTP и редактировать конфигурацию напрямую, что грозило неработоспособностью кабинета при малейшей синтаксической ошибке в файле.
- Отсутствие нормальной системы коммуникации с поддержкой, в кабинете лишь была обычная форма, которая отправляла запрос на почту, возможности нормально просмотреть историю переписки не было.
Задачи
- Регистрация абонента через email или телефон.
- Авторизация через email/телефон/(один из номеров лицевых счетов) и пароль или соц сети Google, Yandex, Mail, ВКонтакте, Одноклассники, Facebook.
- Восстановление пароля через email/телефон.
- Смена email, телефона, пароля привязанного к профилю.
- Добавление неограниченного количества лицевых счетов и их удаления с аккаунта.
- Просмотр информации по лицевому счету:
— Персональная информация;
— Услуги;
— Приборы учета;
— Начисления;
— Оплаты. - Передача показаний по приборам учета.
- Просмотр и печать платежных документов.
- Оплата предоставленных услуг.
- Обратная связь (чат с отделами предприятия).
- Раздел Вопрос/Ответ.
- Административный раздел для просмотра и редактирование пользователей и изменения конфигурации личного кабинета.
Разработка
— Общие положения
Для такого нестандартного проекта было принято решение использовать PHP фреймворк Yii2 advanced версии. Yii - это быстрый, безопасный и эффективный фреймворк, позволяющий сконцентрироваться на специфичных задачах, а не думать о банальных вещах. Данный фреймворк позволяет быстро и качественно выстроить нужную структуру веб-приложения.
CSS фреймворком был выбран Bootstrap 4 — отличный, удобный и современный инструмент для создание адаптивной верстки.
SOAP API для работы с базой 1C было предоставлено специалистом из «Тепло Коломны»
В качестве базы данных была выбрана классическая MySQL;
В дизайне были использованы цвета предприятия (синий и желтый).
— API для работы с данными предприятия
Вся информация о абонентах хранится в базе данных 1С. Напрямую работа с базой 1С не представлялась возможной из-за неудобства и нарушения безопасности данных, поэтому сразу стало понятно, что для взаимодействия в реальном времени понадобиться API для обмена информацией. Логичным решение было-бы выбрать REST API, но к сожалению это было невозможно сделать на предоставленной редакции 1С, поэтому пришлось остановить свой выбор на более старом SOAP протоколе.
Для начала нужно было создать удобное окружение для работы с API предприятия. Поэтому был написан класс-обертка для стандартной PHP библиотеки SoapClient, в которой каждый запрос и ответ предоставлены отдельными классами потомками абстрактных базовых классов запроса и ответа.
Для удобной и унифицированной системы обмена запросами все ответы из 1С приходили в виде JSON объекта, в котором были поля о статусе запроса (1 — Успешно, 2 — Ошибка, 3 — Предупреждение), сообщения об запросе (Например описание ошибки в случае ошибки на стороне 1С), и произвольное поле с ответом на определенный запрос.
Всего было написано около 20 API функций в 1С и 42 класса библиотеки для работы с API и его запросами.
Как было сказано ранее, каждый запрос и ответ имели базового родителя в виде абстрактного класса, в котором была базовая логика обработки. В классе запроса наследуемого от стандартного Yii класса Model имеется валидация данных перед отправкой, а в классе ответа можно повесить функцию обработчик для получаемых данных, прежде чем их использовать в приложении или же дописать дополнительные функции обработки информации для различных нужд от одного и того же источника данных.
— SMS Сервис
Для отправки СМС уведомлений используется API от компании «Мегалабс», для отправки СМС был написан специальных класс, который отправляет СМС через API, записывает каждую СМС в базу данных и хранит статус отправки каждой СМСки чтоб в случае ошибки отправить её по новой через определенное время.
Так же данный класс имеет функцию преобразования телефонных номеров любого формата в унифицированную форму, так как предоставленный сервис очень капризен к передаваемому номеру телефона.
— Почтовый сервис
При отправке электронных писем используется минималистичный HTML шаблон с логотипом компании.
— Регистрация/Авторизация/Восстановление пароля
Регистрация на ресурсе выполнена в классическом стиле, от пользователя требуется ввести только ФИО, Пароль и Почту или Телефон на выбор. Чтоб подтвердить Почту или Телефон нужно перейти по ссылки из письма или ввести СМС код.
Авторизация так же представляет из себя классическую схему, в качестве логина пользователь может ввести Email, Номер телефона в любом формате или один из прикрепленных номеров лицевых счетов. Для быстрой авторизации можно войти через соц сети Google, Yandex, Mail, ВКонтакте, Одноклассники, Facebook.
Если абонент забыл пароль, то его легко можно восстановить через Email или Телефон, письмо или СМС о восстановлении придет в зависимости от введенных данных.
После авторизации нас встречает главная страница.
— Лицевые счета
Почти все функции абонента завязаны на лицевые счета, поэтому, если у абонента нет ни одного лицевого счета, то при попытке зайти на большинство разделов его перенаправит на страницу добавления ЛС.
Добавить ЛС можно введя его номер и ФИО либо секретный код (есть в квитанции) вместо ФИО.
Лицевые счета хранятся в базе данных кабинета, чтоб каждый раз не обращаться к API и обновляются при авторизации пользователя, а так же раз в 10 минут только у онлайн пользователей. Это сокращает нагрузку на 1С сервер и локальная база данных имеет молниеносный отклик, что хорошо сказывается на скорости.
Лицевые счета единственная сущность из всех, что есть в 1С, которая хранится в локальной базе кабинета. Для обновления ЛС онлайн пользователей используется скрипт, который запускается раз в несколько минут на сервере с помощью CRON, этот скрипт проверяет, какие счета давно не обновлялись и обновляет их в фоновом режиме, так мы имеем всегда актуальную информацию о балансе(что очень важно для абонента) и о других параметрах ЛС.
— Для чего нужно несколько лицевых счетов?
Например если у вас есть несколько домов или вы хотите оплачивать налоги за своего родственника, то будет удобно добавить их лицевые счета на один аккаунт и легко переключаться между ними.
После добавления лицевого счета слева в меню появится блок с данными о выбранном лицевом счете, информация в других разделах будет предоставляться об этом счете.
Чтоб выбрать другой ЛС(если он есть) нужно нажать на кнопку «Выбрать лицевой счет» и кликнуть на нужный.
— Услуги
Данный раздел представляет из себя простой перечень услуг предоставляемых абоненту для выбранного лицевого счета.
— Начисления и оплаты
Абонент может легко посмотреть данные об начислениях и оплатах, их суммы и даты. Так же тут сразу отображаются успешные онлайн оплаты.
— Платежные документы
Здесь абонент может скачать платежный документ выбрав нужный месяц и нажав кнопку «Сформировать». При формировании документа 1С передает в кабинет бинарную строку, которая в режиме потока без сохранения на сервере отправляется на скачивание пользователю в формате PDF.
— Приборы учета
Один из главных разделов, здесь абонент может посмотреть список своих приборов учета, историю передачи показаний, а так же передать показания с 15 по 25 число текущего месяца.
— Онлайн платежи
Одна из главных функций кабинета это оплата задолженностей по лицевому счету. Оплата происходит через сервис «Сбербанк эквайринг». В базе данных кабинета хранится история о каждом платеже. При успешной оплате данные сразу поступают в 1С, а баланс абонента в кабинете обновляется.
Абонент сразу видит статус нужного платежа, после оплаты так же обновляется информация в разделе «Начисления и оплаты».
— Обращения
Для удобства общения абонента с компанией был внедрен раздел «Обращения», в котором абонент может задать интересующие его вопросы определенному отделу предприятия. Ранее в старом кабинете раздел обращений был выполнен в формате обычной формы, которая отсылала заявку на почту, ответ так же приходил на почту, переписка нигде не хранилась и не имела целостности.
Для начала диалога абонент должен создать новое обращение в соответствующем разделе и заполнить форму выбрав нужный отдел предприятия, тему и текст.
После отправки в течении некоторого времени абоненту придет ответ. Уведомление об ответе придет на почту абонента(если он разрешил отправлять уведомления) и в меню в пункте обращения будет отображаться количество непрочитанных сообщений.
Каждое обращение выполнено в удобной форме привычного диалога, где можно после ответа задать дополнительный вопрос по теме.
— Как это работает?
Все сообщения хранятся в базе данных кабинета и коммуникация с абонентами происходила с помощью административного раздела, где администратор отвечал абонентам на их вопросы, но так как обращение может быть адресовано различным отделам эта реализация показалась неудобной.
На данный момент каждое обращение направляется на почту соответствующего отдела, 1С читает эту почту и добавляет заявку в свою систему, если заявка новая, то 1С создает новый тикет, если нет, то дополняет старый. При ответе на обращение 1С отправляет заявку на системную почту кабинета, а затем кабинет синхронизируют ответы со своей базой данных.
В итоге мы имеем удобную систему коммуникаций как для абонента, так и для предприятия.
— Вопрос-ответ
Информационный раздел предназначенный для ознакомления пользователя с функциями личного кабинета и информацией о предприятии.
Так же такие разъяснительные блоки можно найти в соответствующих разделах кабинета, они помогают пользователю более детально разобраться в функционале сайта. Эти блоки хранятся в базе 1С, а для вывода их в остальных разделах был создан специальный виджет.
— Настройки аккаунта
В настройках абонент может сменить ФИО, выбрать получать ли уведомление кабинета на почту, а так же сменить почту/телефон или пароль от аккаунта.
— Административная часть
Администратор кабинета может просматривать и редактировать информацию пользователей, делать email и SMS рассылки, смотреть информацию и статистику по платежам, отвечать на обращения абонентов, а так же мониторить все события и ошибки ресурса, которые постоянно логируются.
— Адаптивность
Кабинет имеет адаптивную верстку благодаря CSS фреймворку Bootstrap 4.
Подборка скриншотов с различных устройств:
Заключение
В итоге мы имеем современный и взаимовыгодный инструмент для коммуникации предприятия и абонента.
За год работы кабинета:
— зарегистрировано 8000+ аккаунтов,
— прикреплено более 10000+ лицевых счетов,
— создано 4000+ обращений,
— передано 100000+ показаний,
— совершено более 45000 платежей на сумму более чем на 14 милионнов рублей,
— снята нагрузка с отделов предприятия(меньше визитов и звонков по поводу работы с кабинетом, передачи показаний и личных вопросов),
— уменьшение затрат на типографию, благодаря рассылке квитанций по электронной почте зарегистрированным абонентам.
