Разработка веб-приложения на React с расчетом и отображением статистики

Наш клиент — врач, который помогает людям улучшить условия жизни с помощью авторских обучающих программ. Сейчас они представлены на сайте, его разработкой занимались специалисты Ziex.

Чтобы понять, насколько люди довольны тем, что у них есть, он провел большое социальное исследование на тему уровня жизни и хотел:

• перенести собранную информацию в цифровой формат на сайт;

• получать данные от новых пользователей, которые будут проходить опрос на сайте;

• показывать пользователям персональные результаты опроса удовлетворенностью жизнью и общую картину всех участников.

Как мы предложили реализовать идею

При обращении к нам у клиента был готовый макет от дизайнера в Figma и обязательное требование — сделать форму опроса с верификацией по номеру телефона, чтобы получать данные от «живого» пользователя. Только в таком случае результаты исследования будут максимально точными.

Наши разработчики собрали все вводные данные и предложили:

Создать веб-приложение (страницу application) для расчета статистики и ее визуального отображения на сайте.

В качестве основных технологий выбрали разработку на React и Node.js. Вторую использовали для создания серверной части приложения, чтобы обеспечить быструю и масштабируемую обработку запросов, а также эффективное взаимодействие с клиентской частью.

Так как важна быстрая обработка сложных данных — функционала и визуала в большом количестве, но так, чтобы это не повлияло на общую загрузку системы, выбор React оправдан. Концепция программирования с использованием Virtual DOM на React как раз дает возможность совместить одно с другим, обеспечивая высокую производительность и эффективное управление интерфейсом при работе с большим объемом данных.

К тому же, использование компонентного подхода в React позволяет эффективно организовывать код, улучшая его читаемость, поддерживаемость и масштабируемость.

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

Мы, к сожалению, не можем показать ссылки на работы, т.к. разработка выполнялась совместно с дизайн-командой под NDA.

Что делали

Backend — стек технологий:

1. Создание типа данных «Вопрос» с определенными полями:

   • название вопроса;

   • пол;

   • возраст;

   • ответ на данный вопрос в формате 5 степеней удовлетворенности.

2. Разработка функции обработки данных с формы, которую заполнил пользователь. Она нужна для:

   • отправки всех данных с формы в виде письма на электронную почту владельцу, т.е. нашему Заказчику;

   • обновления общей статистики (в базе данных) с учетом информации с отправленной формы.

3. Разработка функции для передачи данных с Backend на Frontend.

ИТОГ этой работы: Теперь данные успешно сохраняются, как только пользователь заполняет анкету, а также передаются на визуальную часть (Frontend) аппликации.

Frontend — стек технологий:

1. Сортировка данных, пришедших с функциональной части (Backend), по разным критериям для дальнейших расчетов.

2. Формирование групп данных для расчета и визуализации в соответствии с макетом, который мы получили от клиента.

3. Расчет обработанных данных для составления визуализации.

4. Визуализация расчетных данных:

• создание и стилизация круговой диаграммы;

• создание и стилизация линейчатых диаграмм с разделением на возрастные группы и на 5 уровней удовлетворенности жизнью.

ВАЖНО! Данные обеих диаграмм взаимосвязаны: при нажатии на конкретный уровень на линейчатой диаграмме, показатели круговой двигаются в соответствии с выбранной возрастной группой.

Кроме того, разработали функции, которые позволяют при просмотре страницы с общей статистикой переключать пол и возрастную группу. И функции переключения вопросов для общей и персонализированной статистики (данные конкретного пользователя после прохождения опроса).

Важно отметить, что разработка визуальной части веб-приложения проходила в нетипичной для нас форме — справа налево, так как язык сайта иврит, и это добавляло сложности.

ИТОГ этой работы: Успешно получили, отсортировали, обработали и визуализировали данные с функциональной части (Backend). Данные персонализируются при прохождении опроса, т.е. пользователь видит результат — к какой группе он теперь относится.

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

Персональные данные

Общие данные

Результат нашей работы

1. Теперь на сайте клиента есть интерактивная страница application для расчета и отображения статистики данных (общие и персонализированные) пользователей, которые приняли участие в социальном исследовании.

Вся информация представлена в понятном и эстетически привлекательном виде, а не в формате «сухого» текста, скучных таблиц. Разобраться в диаграммах намного проще.

1. Наш клиент в удобном для него формате получает письма на электронную почту с данными пользователя (по каждому отдельно), а не самостоятельно собирает, как это было раньше.

2. Тот, кто принял участие в опросе, сразу видит свой результат на сайте, т.е. ему не нужно выполнять еще несколько действий, например, отправлять смс или ждать письма на e-mail. Плюс удобно: общие результаты также отображаются онлайн.

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

И предлагать потенциальным клиентам разные авторские программы для улучшения их жизни с помощью смс или e-mail-рассылки. Эти данные пользователи оставляют еще на этапе заполнения анкеты, чтобы узнать свой уровень удовлетворенности жизнью.