Разработка личного кабинета абонента МУП «Тепло Коломны»

У каждого «инструмента» через определенный период времени наступает момент, когда он перестает справляться с поставленной задачей, происходит это в основном из-за банального износа или постоянно растущих требований потребителя.

К нам обратился IT отдел муниципального предприятия города Коломна МУП «Тепло Коломны» с задачей разработать новый личный кабинет, так как старый кабинет теряет актуальность в функциональном плане. За данный проект никто не хотел браться из-за его специфичности и сложности, обычного готового движка было бы недостаточно. Нам предстояло сделать ресурс на котором абоненты могли просматривать всю актуальныю информацию о их лицевый счетах в реальном времени.

Проблемы

Прежде чем создавать новое, нужно было учесть ошибки старого. В старом кабинете было много проблем:

1. Абоненты не могли сами зарегистрироваться, сменить пароль и почту, все эти шаги проходили через посещение IT отдела предприятия и трату кучи времени и нервов как сотрудников, так и абонентов.
2. Данные об абонентах не предоставлялись в «реальном времени». Синхронизация данных происходила раз в сутки через промежуточный файл, который генерировала 1С и подгружал старый ЛК в свою базу, при этом часто наблюдались сбои из-за парсинга огромного файла или нехватки оперативной памяти для такой задачи.
3. Кабинет не имел адаптивной верстки или мобильной версии, а количество пользователей со смартфонов растущее каждый год и 60% от общего трафика с мобильных устройств явно дает понять, что это не позволительно в 2018 году.
4. При онлайн оплате баланс абонента обновлялся только когда придет выписка из банка, а это несколько дней и более, что вызывало кучу вопросов и опять-же потерю времени.
5. Вся важная конфигурация хранились в PHP файле и для редактирования настроек приходилось подключаться к серверу по FTP и редактировать конфигурацию напрямую, что грозило неработоспособностью кабинета при малейшей синтаксической ошибке в файле.
6. Отсутствие нормальной системы коммуникации с поддержкой, в кабинете лишь была обычная форма, которая отправляла запрос на почту, возможности нормально просмотреть историю переписки не было.

Задачи

1. Регистрация абонета через email или телефон.
2. Авторизация через email/телефон/(один из номеров лицевых счетов) и пароль или соцсети Google, Yandex, Mail, ВКонтакте, Одноклассники, Facebook.
3. Восстановление пароля через email/телефон.
4. Смена email, телефона, пароля привязаного к профилю.
5. Добавление неограниченого количества лицевых счетов и их удаления с аккаунта.
6. Просмотр информации по лицевому счету:
   — Персональная информация;
   — Услуги;
   — Приборы учета;
   — Начисления;
   — Оплаты.
7. Передача показаний по приборам учета.
8. Просмотр и печать платежных документов.
9. Оплата предоставленных услуг.
10. Обратная связь.
11. Раздел Вопрос/Ответ.
12. Административный раздел для просмотра и редактирование пользователей и изменения конфигурации личного кабинета.

Разработка

— Общие положения

Для такого нестандартного проекта было принято решение использовать 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.

Подборка скриншотов с различных устройств:

Заключение

В итоге мы имеем современный и взаимовыгодный иструмент для коммуникации предприятия и абонента. 

За первый месяц работы кабинета:

— зарегистрированно 1500+ аккаунтов,

— прикрепленно более 1600 лицевых счетов,

— создано 300+ обращений,

— переданно 1000+ показаний,

— совершенно более 1200 платежей на сумму более чем 1 миллион рублей,

— снята нагрузка с отделов предприятия(меньше визитов и звонков по поводу работы с кабинетом, передачи показаний и личных вопросов),

— уменьшение затрат на типографию, благодаря рассылке квитанций по электронной почте зарегистрированным абонентам.

Разработка личного кабинета позволила автоматизировать большое количество время затратных процессов. Результат разработки полностью себя оправдал.