Кейсы
June 17, 2021

Разработка личного кабинета для "Города фотографов"

Страница входа. Слева тут идёт слайдшоу из фотографий.

Хотите увидеть самый крутой ЛК во всём геткурсе? Тогда вы попали по адресу))

Этот проект поразил даже моё искушенное воображение. В нём всё не так, как привыкли мы — не побоюсь этого слова, типичные геткурсоводы)

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

«‎Все знают, что это невозможно. Но вот приходит невежда, которому это неизвестно — он-то и делает открытие.» — Альберт Эйнштейн

В общем, сказано - сделано) Хотя, должен признаться, что не всё получилось перенести на ГК в точности так же, как это было на старом сайте заказчика, т.к. мы ограничены возможностями ГК. И поэтому где-то пришлось пойти на компромиссы. Но, несмотря на это, перенести получилось почти всё.

Вряд ли кто-то когда-то догадается, что под капотом у этого минималистичного ЛК скрывается геткурс.

Страница тренингов

Первое, на что вы, скорее всего, обратили внимание — это огромное боковое меню, которое видно практически на всех страницах. Поэтому давайте о нём и поговорим.

Левое меню

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

Новое боковое меню было свёрстано с нуля, и с помощью специального скрипта добавляется на все страницы, где показывалось бы стандартное.

В основном меню состоит из простых ссылок на разные разделы ЛК. Но некоторые ссылки, показываются по сегменту. Например, там есть разные виды оранжевых кнопок: для тех, кто купил; для тех, кто подписался на чат в телеграм; тех, кто не подписался т.п... Каждый пользователь видит только то, что предназначено для него.

Страница курсов

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

Сам список курсов сделан через стандартный блок "Плитка", просто застилизован по-другому.

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

Карточка курса с трейлером
А так выглядит сам трейлер тренинга, который показывается во всплывающем окне

Страница отдельного курса

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

Страница тренинга

Эта страница тоже сделана через новый конструктор, т.е. на реальной странице тренинга просто стоит редирект сюда.

В самом верху этой страницы находится список уроков. Это реальный стандартный, но застилизованный блок "Список уроков", в который подтягиваются уроки нужного тренинга. Все статусы уроков проработаны, и карточки уроков меняют свой вид, когда у урока изменяется статус (например, на скриншоте первый урок оранжевый, потому что он принят).

Дальше идут блоки "Файлы" и "Картинки плиткой", внешний вид которых тоже был изменён в соответствии с дизайн-макетом.


Страница урока

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

Страница урока

Это уже, кстати, настоящая (стандартная) страница урока, стили которой переписаны до неузнаваемости. Чтобы это провернуть, для этой страницы было написано 1220 строк кода :) Пришлось сделать так, потому что в геткурсе только в уроках можно создавать задания, которые будут попадать в Ленту ответов.

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

Страница задания

Да, в проекте "Город фотографов", кроме простых уроков, есть страница задания.

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

Страница задания


Подкасты

В проекте "Город фотографов" регулярно выходят подкасты, и для них сделана отдельная страница и кнопка в боковом меню.

Страница подкастов

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

Страница подкаста

Кстати, плеер полностью кастомный, его код я писал сам, чтобы он соответствовал дизайн-макету. По-моему, получилось круто, очень горжусь проделанной работой))

Страница методичек

Методички — это по сути книги для самостоятельного изучения. Для них тоже сделана отдельная страничка, на которой методички показываются по сегменту.
Если книга недоступна, то она тоже показывается, но с замочком, открыть её нельзя.

Страница методичек

Каждая методичка представляет из себя PDF-файл, который встроен в урок. Т.е. читать книгу можно прям там, не скачивая её на компьютер.

Методичка на странице урока



Страница вебинара

Со стилизацией стандартной страницы вебинара пришлось помучаться, потому что её вёрстка оставляет желать лучшего, но в итоге всё получилось. В целом, структура страницы вебинара осталась неизменной: слева видео, справа чат. Но она теперь выглядит намного лаконичнее и, самое главное, в стиле остального сайта.

Страница вебинара

Отличительной особенностью этой страницы стало боковое меню, которое по умолчанию скрыто, и выдвигается по клику на кнопку "Меню" (внизу слева).

Страница вебинара с открытым меню

Страница прогресса

Как вы уже догадались, на этой странице ученики могут отслеживать свой прогресс обучения. Но это не то, к чему мы с вами привыкли.

Страница прогресса

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

Эти шкалы состоят из точек (их может быть от 2 до 6 в неделе), и каждая из них может соответствовать уроку, вебинару, подкасту или методичке. Т.е. это могут быть разные сущности, поэтому у каждой точки свой определённый значок. Но внутри ГК это всё — уроки. Причём они все находятся в разных тренингах и комбинируются в этой шкале экспертами в том порядке, в котором их удобнее и интереснее было бы проходить.

И, конечно, как обычно у всех уроков есть разные статусы "открыт", "закрыт", "пройден" и т.п. Именно на этих статусах и основаны шкалы прогресса. Пока урок закрыт - точка бледная, открылся - становится ярче, пройденный отмечается галочкой.

Но мы добавили ещё один необычный статус "актуальный" — это последний доступный урок, и он светится белым.

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




Вместо заключения

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

Я на 100% доволен результатом, и сейчас с тем же заказчиком начинаю новый проект по кастомизации другого ЛК. Но это совсем другая история...

Кстати, ребята из продюсерского бюро solnyshko123.online, которые подарили мне возможность работать в таком классном проекте, всегда в поиске крутых техспецов по геткурсу и не только. Поэтому, если вы полны энтузиазма и уверены в своих силах, можете писать Ярославу @mefart 😊