Задача
Создатели обезболивающего и противовоспалительного средства Найз гель разработали Программу здоровья Найз с заботой о своих пользователях. Суть в следующем: человек использует гель, чтобы устранить болевые ощущения. Усилят его действие занятия по видеоурокам из Программы.
Чтобы пользователь мог принять в ней участие, нужен личный кабинет с уникальной программой упражнений по видеороликам. Она будет подсчитывать, насколько качественно пользователь проходит курс, и прогресс участника в дальнейшем (с учетом технического задания заказчика).
Система управления: Bitrix
Дизайн: Уникальный
Мобильная версия: Адаптивная верстка
Что сделали мы?
— Функциональная часть (Backend)
Подготовка логического алгоритма Программы здоровья. Она состоит из 6 видеороликов с упражнениями, и тут нужно понять, сколько показывать пользователю сразу, какая у них очередность и какая продолжительность каждого.
На этом моменте столкнулись с техническими трудностями. Пользователь нажимает кнопку “Начать” и запускает таймер — начинается отсчет времени. Потом приостанавливает, чтобы вернуться к нему позже, причем так, чтобы сделать это можно было с любого другого устройства, а данные сохранились.
Возникает следующий вопрос: как в таком случае считать его прогресс, если таймер обычно создают через JavaScript, а его данные хранят в Базе данных? Как сохранять такие данные?
Решение: использовали связку jQuery и PHP и добавили к ней сессионные cookie. После остановки таймера данные сохраняются в Базе данных. Кроме того, cookie полезны в случае, если пользователь вдруг захочет запустить Программу в другой вкладке.
У каждого пользователя есть шкала прогресса. Она заполняется зеленым цветом по мере завершения Программы. Как это сделать?
Решение: Мы приняли простое решение и сделали шкалу как изначально пустой html-progressbar с постепенным заполнением.
Как реализовать постепенное заполнение шкалы?
Решение: Использована длина каждого видеоролика и сумма продолжительности всех роликов. В результате полученное значение в минутах и стало максимальной величиной, равной 100%.
Проблема в том, что получить длину ролика в нужном формате непросто. К тому же, если ролики загружать в разных видеоформатах и с разных видеохостингов, то подсчет любых метаданных излишне нагружает сервер. Стало понятно, что нужен подсчет в процентах прогресса прохождения тренировок.
Решение: Роликам в административной панели назначили баллы в виде целых чисел. 1 балл примерно равен 1 минуте. Такими данными проще манипулировать. Если видео короткое, но в 2 раза ценнее более длинного видеоролика, в таких случаях администратор сам может указать “ценность” каждого отдельного ролика.
Видеоролики со своей стороны получили нужные цифровые данные, независимо от формата и источника, которые к тому же можно редактировать напрямую из административной панели. При публикации на странице (реализовано обычным PHP-циклом) сразу идет подсчет суммы этих баллов. Она нужна для расчета прогресса прохождения курса.
Если пользователь еще не занимался (в базе данных нет записей в таблицах прохождения курса), у него отображается таймер со значением 0ч:0м:0с; если он уже занимался – подгружаются его последние сохраненные показатели.
— Визуальная часть (Frontend)
Графические элементы (разные иконки и psd-макет) предоставил Заказчик. Наша задача была добавить их в разные части Программы.
Иконка здоровья. Состоит из 2-ух символов — фигурки человека и молнии. Задача — заполнить фигурку человека в зависимости от прохождения программы.
Заполнение фигурки человека происходит по такому же принципу, как и шкала прогресса.
Решение: Сделали CSS-блоки для каждого состояния и прописали в разметке функцию, которая анализирует шкалу прогресса и использует тот или иной CSS-класс.
Со значком молнии все еще проще. Использовали PHP-переменную статуса и в зависимости от того, больше или равно 100 ее значение, значок либо становится зеленым, либо нет. Реализовали так же, как и в предыдущем случае: через CSS сделали 2 блока с именем переменной, на уровне bool-значений (true/false).
Иконки наград. Для мотивации пользователя в Программе есть 4 награды. Чем больше он пройдет занятий, тем больше наград получит. Нужно сделать так, чтобы эти награды появлялись у пользователя по мере прогресса.
Решение: Такой же принцип реализации, как и с количеством видео. 4 награды представлены как значение 100/4 (25%). Затем наша переменная с прохождением курса с ней сравнивается: если пользователь прошел 25% курса, то награда появляется на странице, если 50% — появляется вторая награда и так далее.
Наши предложения на будущее
Мы успешно реализовали функционал личного кабинета для Программы здоровья. Но в процессе у нас появились идеи, их предложили клиенту.
Основная — это расширить функционал. Лучше, если видеороликов будет больше, тогда появится возможность создать больше групп (возраст, профессия и др.) и автоматический подбор курса в зависимости от принадлежности пользователя к одной из них. Тем более, что несколько групп по возрасту и профессии уже реализованы.
В итоге
Функционал личного кабинета Программы здоровья Найз — уникальная полезная разработка от специалистов ziex.by.
Даже на простом, уже существующем сайте можно сделать интересное решение для ваших потенциальных покупателей, причем это не займет слишком много времени (до 100 часов вместе с дизайном).