GETPROFF
Продажа онлайн-курса не заканчивается на форме и странице оплаты. После покупки человеку нужно без ручной переписки выдать правильный курс, открыть уроки и предоставить понятный личный кабинет. Администратору, в свою очередь, необходимы инструменты для управления программой, видео, учениками, доступами и заданиями.
В этом уроке мы продолжим развивать проект, который собирали раньше. Публичный сайт, CRM и форма покупки уже находятся в одном workspace. Теперь добавим к ним LMS — систему управления обучением с курсами, уроками, кабинетом ученика и автоматической выдачей доступа после подтверждения оплаты.
В результате получится единая рабочая цепочка: посетитель знакомится с программой на лендинге, оставляет данные, заявка попадает в CRM, оплата получает подтверждение, а система открывает покупателю нужный тренинг. При этом администратор управляет содержанием в привычной панели, а ученик видит только собственное обучение.
Что мы создадим в этом уроке
Клиентский кабинет — это закрытая часть цифрового продукта, предназначенная не для случайного посетителя, а для зарегистрированного пользователя. В интернет-магазине такой кабинет показывает покупки и статусы заказов. В сервисном бизнесе в нём могут храниться документы, заявки и история взаимодействия. В компании это может быть внутренний портал для адаптации и обучения сотрудников.
В нашем примере клиентским кабинетом станет LMS — Learning Management System, или система управления обучением. В ней хранятся курсы, последовательные уроки, видео, материалы и задания. Система знает, кому выдан доступ, какие уроки человек уже прошёл и какие ответы ожидают проверки.
После выполнения урока в проекте появятся две связанные части. В существующей административной панели будет раздел «Курсы», где владелец проекта управляет тренингами, уроками и учениками. По адресу `/lms` будет расположен отдельный спокойный интерфейс ученика без CRM, редакторов и других внутренних инструментов.
Главное — это не две независимые страницы. Продажа на сайте, заявка в CRM, статус оплаты и право доступа к курсу должны быть связаны в одну систему. Именно эта связь превращает набор экранов в рабочую образовательную платформу.
Создаём LMS в существующем workspace
Работу продолжаем в том же workspace, где уже собраны сайт и CRM. Ботан видит существующие маршруты, таблицы, формы и оформление проекта, поэтому может не создавать новую систему с нуля, а органично расширить текущую.
В уроке используется подробный промпт. Он описывает не только внешний вид будущей LMS, но и её бизнес-логику: структуру курсов, защищённый доступ, связь с покупкой, работу с видео и поведение администратора. Такой уровень подробности помогает сразу получить результат, близкий к готовому продукту.
Готовый промпт для создания LMS
Скопируйте промпт целиком и отправьте его Ботану внутри workspace, в котором уже находятся сайт и CRM. Если структура вашего проекта отличается, замените названия разделов, продукта и маршрутов, но сохраните общую логику связи покупки с доступом.
Продолжи работу внутри текущего Workspace. В нём уже существуют:
- публичный сайт интегратора с предложением авторского курса;
- единая защищённая админка `/admin`;
- CRM в разделе «Заявки»;
- заявки на покупку курса и подготовленные поля для будущего платежа.
Не создавай новый Workspace, отдельную LMS-админку или второй административный сайдбар. Сначала изучи существующие маршруты, таблицы, авторизацию, CRM, дизайн-токены и компоненты. Затем органично расширь текущую систему двумя частями:
1. Добавь пункт **«Курсы»** в левый сайдбар существующей админки.
2. Создай отдельный клиентский кабинет по адресу **`/lms`**, в котором нет административных инструментов.
## Раздел «Курсы» в существующей админке
Сохрани текущий каркас админки, её меню, цвета, шрифты, поля, кнопки и правые панели. Новый пункт «Курсы» должен выглядеть так же органично, как «Услуги», «Кейсы», «Готовые решения», «Отзывы» и «Заявки».
На странице «Курсы» покажи список созданных тренингов с названием, обложкой, количеством уроков, статусом, числом учеников и датой изменения. В интерфейсе можно использовать понятное пользователю слово **«Тренинги»**, но не создавай ради этого отдельную сущность: тренинг является курсом с программой уроков. Добавь поиск, сортировку и кнопку **«Создать тренинг»**.
## Обязательное первоначальное наполнение
Не оставляй раздел пустым. Найди на существующем публичном лендинге авторский курс, который уже предлагается посетителям, и создай под него один полноценный тренинг в LMS. Используй его фактическое название, позиционирование, стоимость и обещанный результат с лендинга — не создавай второй посторонний продукт и не помечай курс как тестовый или демонстрационный.
Тренинг должен сразу быть содержательно наполнен и доступен для проверки:
- создай подходящую обложку в текущем стиле проекта;
- заполни краткое и полное описание, результат обучения, целевую аудиторию, продолжительность и срок доступа;
- составь логичную программу из **5–7 последовательных уроков**, соответствующих теме и обещанию курса на лендинге;
- для каждого урока напиши название, краткое описание, полноценный основной текст, практическое задание, примерную продолжительность и правило завершения;
- добавь уместные текстовые материалы или ссылки-заглушки только там, где они действительно нужны;
- свяжи тренинг со стабильным идентификатором именно того продукта, который продаётся на лендинге и создаёт заказ в CRM;
- опубликуй тренинг и уроки, чтобы их можно было сразу открыть в режиме предпросмотра и после выдачи доступа увидеть под учеником.
Единственное, что может остаться незаполненным, — само видео. В каждом уроке заранее создай оформленный блок видео со статусом **«Видео не выбрано»** и рабочей кнопкой **«Выбрать видео из файлового хранилища»**. После выбора файла видео должно появиться в этом же уроке без необходимости заново создавать или переписывать его содержимое.
Первичное наполнение должно храниться в тех же сущностях, которые редактируются через админку, а не быть захардкожено только в клиентском интерфейсе. Любое изменение названия, описания, программы или урока в админке должно сразу отражаться в LMS.
При создании или открытии курса используй выезжающую справа панель во всю высоту экрана. Внутри неё сделай вкладки или логичные разделы:
- «Основное»;
- «Уроки»;
- «Ученики и доступы»;
- «Ответы на задания».
### Настройки курса
Администратор может:
- задать название, slug, краткое и полное описание;
- выбрать обложку;
- указать продолжительность и срок доступа;
- сохранить курс как черновик, опубликовать или архивировать;
- связать курс с покупкой конкретного продукта из CRM через стабильный идентификатор продукта;
- открыть любой тренинг в новой вкладке в режиме предпросмотра глазами ученика;
- удалить курс только после понятного подтверждения, не оставляя повреждённых связей.
### Предпросмотр глазами ученика
У каждого тренинга в списке и в панели редактирования должна быть заметная кнопка **«Посмотреть глазами ученика»**. Она открывает тренинг в новой вкладке в настоящем клиентском интерфейсе LMS: с обложкой, программой, уроками, плеером, материалами, заданиями, последовательным открытием и адаптивной вёрсткой — именно так, как это увидит ученик.
Предпросмотр доступен только администратору и проверяется на сервере. Он может показывать черновики курса и уроков, но не должен создавать фиктивного ученика, покупку или доступ, менять статистику, сохранять прогресс, ответы и завершение уроков либо предоставлять постоянную публичную ссылку. На всех страницах предпросмотра покажи фиксированную плашку **«Режим предпросмотра»** и кнопку возврата в редактор. Обычный пользователь не может включить этот режим через query-параметр или подмену URL.
У панели должны быть закреплённая шапка, прокручиваемое содержимое, явные кнопки «Сохранить» и «Отменить» и предупреждение при закрытии с несохранёнными изменениями. На мобильном панель открывается на весь экран.
## Управление уроками
Внутри курса покажи последовательный список уроков. Администратор должен иметь возможность:
- создать урок;
- изменить порядок уроков перетаскиванием;
- открыть урок для редактирования;
- сохранить как черновик или опубликовать;
- открыть предпросмотр;
- дублировать, скрыть или удалить урок.
В редакторе урока предусмотри:
- название и slug;
- краткое описание;
- видео;
- основной текст с базовым форматированием;
- дополнительные файлы и ссылки;
- задание для ученика;
- примерную продолжительность;
- правило завершения: вручную учеником, после отправки задания или после принятия задания;
- настройки публикации и последовательного открытия.
Сгруппируй поля в разделы «Основное», «Видео», «Материалы», «Задание» и «Доступ». Не используй одну длинную неструктурированную форму.
## Видео из файлового хранилища Chatium
Не ограничивай добавление видео полем для ручного ввода ссылки. В разделе «Видео» размести кнопку **«Выбрать видео из файлового хранилища»** и открывай нативный интерфейс Chatium «Мой диск»:
```ts
import { selectStorageFiles } from '@vault/sdk'
const files = await selectStorageFiles(ctx, {
kind: 'video',
})
```
Администратор должен видеть реальные папки и поиск «Моего диска», выбрать существующее видео и вернуться в редактор урока.
Выбранные `hash` и `name` обязательно передавай в защищённый серверный endpoint импорта. Он должен проверить существование и тип файла, получить метаданные, исключить дубликаты и определить правильный способ воспроизведения. Для защищённого видео используй `getVideoInfo(ctx, fileHash)` и сохраняй полученный MP4/HLS playback URL; для публичного — штатный адрес файла.
Сам видеофайл остаётся в Chatium File Storage. В постоянной базе хранятся только его `fileHash`, название, метаданные, сведения о защите и связь с уроком. Не сохраняй короткоживущий upload URL как источник урока.
Плеер должен воспроизводить публичный MP4 через `После отправки Ботан сначала изучит существующий проект, а затем создаст новые таблицы, маршруты, серверные проверки и интерфейсы. Не закрывайте задачу, пока он работает, и не отправляйте одновременно противоречащие команды. Когда сборка закончится, обновите проект и проверьте результат последовательно: сначала административную часть, затем путь ученика.
Почему необязательно начинать с огромного промпта
Подробный промпт может выглядеть пугающе, особенно если вы только начинаете работать с вайбкодингом. Но это не обязательный формат каждого запроса. Его задача в уроке — показать, насколько точно можно описать конечный результат и заранее учесть важные связи.
Для собственного проекта можно начать с короткой команды: например, попросить создать LMS для одного курса. Затем открыть результат, посмотреть, какие решения предложил Ботан, и следующими сообщениями добавлять недостающие функции: задания, прогресс, сроки доступа, предпросмотр или связь с оплатой.
Такой итеративный подход часто удобнее попытки заранее спроектировать всё до последнего поля. Вы видите работающий промежуточный результат и формулируете следующую задачу на основании конкретного экрана. Если проект делается для клиента, изменения требований тоже нормальны: первый вариант помогает заказчику понять, что именно ему нужно.
Один workspace или несколько: как выбрать архитектуру
До создания LMS важно решить, где она будет находиться. В уроке сайт, CRM и обучение собраны внутри одного workspace. Это простая архитектура: все части проекта рядом, используют общие данные и изменяются в одном диалоге с Ботаном.
Когда лучше собрать всё в одном workspace
Единый workspace подходит эксперту, небольшой онлайн-школе или компании с одним основным сайтом. Лендинг, формы, CRM и LMS можно скачать вместе, сохранить как резервную копию или передать клиенту. Если нужно изменить название продукта, цену или оформление, Ботан видит всю систему и может согласованно обновить связанные части.
У такого подхода ниже порог входа: не приходится сразу проектировать обмен данными между несколькими приложениями. Для первого запуска и проверки бизнес-гипотезы это обычно самый понятный вариант.
Когда LMS лучше вынести отдельно
Разделение становится полезным, когда у бизнеса несколько сайтов, рекламных воронок или самостоятельных продуктов, а обучение и клиентская база должны оставаться едиными. Тогда публичные проекты могут жить в отдельных workspace, а общая LMS и CRM — в собственных.
Выбор можно свести к простой логике:
- один сайт и один основной продукт — начинайте с единого workspace;
- несколько лендингов, но одна школа — рассмотрите отдельную LMS;
- независимые клиентские проекты — разделяйте их с самого начала;
- если пока неясно, какая архитектура нужна, соберите рабочий прототип в одном workspace и только после теста усложняйте систему.
Ни один вариант не является универсально правильным. Цель эксперимента — понять, какая структура проще поддерживается именно в вашем бизнесе.
Как устроена административная часть LMS
После завершения задачи в левом меню существующей админки появляется пункт «Курсы». Внутри находится список тренингов с обложкой, статусом, количеством уроков и действиями администратора. В примере уже создан и опубликован тренинг, соответствующий продукту на лендинге.
Важно, что обучение добавляется в действующую админку, а не получает отдельное несвязанное меню. Администратор продолжает работать в одной системе: заявки находятся в разделе CRM, а программа и доступы — в разделе курсов.
Управление тренингом и программой
В настройках тренинга редактируются название, slug, краткое и полное описание, продолжительность, стоимость, обложка и статус публикации. Здесь же курс связывается с конкретным продуктом, который продаётся на сайте. Стабильный идентификатор продукта нужен системе, чтобы после оплаты открыть именно тот тренинг, который купил человек.
Программа курса состоит из последовательных уроков. Администратор может добавлять новые занятия, менять их порядок, публиковать, скрывать, дублировать или удалять. Благодаря этому курс можно сначала подготовить как черновик, проверить глазами ученика и только затем открыть покупателям.
При редактировании конкретного урока доступны отдельные настройки содержания, видео, материалов, задания и доступа. В уроке можно указать описание, основной текст, примерную продолжительность и правило завершения: вручную учеником, после отправки задания или после проверки администратором.
Как выглядит курс глазами ученика
Предпросмотр открывает настоящий клиентский интерфейс LMS, но не создаёт фиктивную покупку, ученика или прогресс. Администратор видит обложку, программу, видеоблок, материалы и последовательность уроков так, как они будут показаны пользователю.
У ученика нет левого сайдбара админки, списка заявок и внутренних данных CRM. На главной странице `/lms` отображаются только доступные ему курсы, прогресс и возможность продолжить обучение. На странице курса видна программа, а внутри урока — видео, основной текст, дополнительные материалы и задание.
Такое разделение важно не только для аккуратного интерфейса, но и для безопасности. Скрыть административную кнопку на клиенте недостаточно: право на курс, урок, видео и материалы должно проверяться сервером при каждом запросе.
Ученики, доступы и ответы на задания
Во вкладке «Ученики и доступы» администратор видит человека, связанный заказ, дату выдачи, срок доступа, прогресс и последнее действие. Доступ можно выдать вручную, продлить или отозвать. Ручная выдача удобна для тестов, бесплатного участия и индивидуальной работы, но она не должна менять статус покупки в CRM.
Ответы на задания собраны в отдельной очереди. Администратор может открыть работу ученика, оставить комментарий, принять ответ или вернуть его на доработку. Если урок завершается только после проверки задания, система не должна открывать следующий этап раньше времени.
Добавляем видео из файлового хранилища Chatium
Видеоурок не должен зависеть от случайной внешней ссылки. В редакторе есть кнопка «Выбрать видео из файлового хранилища», которая открывает нативный интерфейс «Моего диска» Chatium. Администратор видит папки и поиск, выбирает уже загруженный файл и возвращается в урок.
В постоянной базе сохраняются идентификатор файла, его название, метаданные и связь с уроком. Сам видеофайл остаётся в файловом хранилище. Благодаря этому урок не приходится создавать заново при замене ролика: достаточно выбрать другой файл и сохранить изменения.
Для ученика видео отображается в адаптивном плеере. При этом закрытый урок должен быть защищён не только визуально. Пользователь без доступа не должен получить адрес воспроизведения, идентификатор видео или ссылки на дополнительные материалы даже при прямом запросе.
Файловое хранилище подходит и для организации производства курса: видео можно разложить по папкам, хранить рядом дополнительные материалы и использовать одни и те же файлы в нужных разделах проекта. Более глубокая работа с хранилищем заслуживает отдельной инструкции, а в этом уроке нам важно проверить выбор видео и его появление внутри занятия.
Как работает путь ученика от лендинга до урока
Готовая LMS должна продолжать путь, который начинается на публичном сайте. Посетитель открывает предложение курса, изучает программу и заполняет форму оформления. В форме используются имя, телефон и email — по этим данным создаётся заявка и подготавливается будущая связь с учётной записью ученика.
После отправки формы система создаёт в CRM заявку и отдельный заказ с идентификатором продукта. Сама заявка ещё не является доказательством оплаты и не должна автоматически открывать обучение. В показанном сценарии реальный платёж не проводится: администратор открывает заказ и вручную подтверждает, что деньги получены.
После подтверждения статус заказа меняется на «Оплачено», фиксируется дата и запускается единый серверный сервис выдачи доступа. Сервис находит курс, связанный с продуктом, и создаёт право обучения. Повторное подтверждение того же заказа не должно создавать второй доступ.
Если покупатель уже авторизован, доступ связывается с его системным пользователем. Если заказ был оформлен раньше регистрации, система сохраняет ожидающее право по нормализованному email, а затем безопасно связывает его с подтверждённой учётной записью при первом входе.
Итоговая цепочка выглядит так:
- Посетитель выбирает курс и отправляет форму.
- CRM сохраняет заявку и заказ.
- Заказ ожидает подтверждения оплаты.
- Администратор подтверждает получение денег, а в будущем это сможет делать webhook платёжного провайдера.
- Система один раз создаёт доступ к связанному тренингу.
- Ученик входит в `/lms` под подтверждённой учётной записью.
- LMS показывает только оплаченный курс, его уроки и материалы.
Такой подход отделяет факт интереса к продукту от факта покупки. Он не позволяет открыть платный контент только потому, что кто-то отправил форму или подставил email в адрес страницы.
Проводим сквозной тест LMS
Проверять результат только через административный предпросмотр недостаточно. Он показывает внешний вид курса, но не доказывает, что покупка действительно создаёт доступ для обычного пользователя. Нужен сквозной тест по тому же пути, которым пройдёт реальный ученик.
Создайте заказ с отдельным тестовым email, откройте его в CRM и проверьте продукт, сумму, имя, телефон и начальный статус. Затем нажмите «Подтвердить получение оплаты» и убедитесь, что заказ перешёл в оплаченный статус, а человек появился во вкладке «Ученики и доступы».
После этого войдите через штатную авторизацию под пользователем с тем же подтверждённым email и откройте `/lms`. Проверьте весь сценарий:
- В кабинете виден только купленный тренинг.
- Название, обложка и описание совпадают с настройками админки.
- Уроки расположены в правильном порядке.
- Закрытые условиями занятия нельзя открыть прямой ссылкой.
- Видео воспроизводится внутри доступного урока.
- Первое открытие и последнее посещение сохраняются.
- Завершение урока меняет прогресс курса.
- Ответ на задание появляется в административной очереди.
- После отзыва доступа курс и защищённые материалы больше не открываются.
- Повторное подтверждение того же заказа не создаёт дубль ученика или доступа.
Если эта цепочка работает целиком, у вас уже не просто макет личного кабинета, а базовая система продажи и проведения онлайн-обучения.
Если что-то не работает
Заявка не появилась в CRM. Убедитесь, что вы отправили форму именно на том сайте и в том workspace, который изменял Ботан. Проверьте обязательные поля и повторите отправку с отдельными тестовыми данными.
Заказ оплачен, но доступ не создан. Проверьте, связан ли продукт заказа с конкретным курсом и заполнен ли email покупателя. Система не должна молча выдавать доступ, если не может однозначно определить тренинг или пользователя.
Ученик появился, но не видит курс. Сравните email заказа с подтверждённым email учётной записи. Значение из формы или query-параметра само по себе не подтверждает личность и не должно предоставлять доступ.
Курс виден, но урок или видео не открывается. Проверьте статус публикации урока, правило последовательного открытия, срок доступа и выбранный файл. Для защищённого видео отдельно убедитесь, что сервер получает актуальные данные воспроизведения.
Не просите Ботана одновременно переделать всю LMS. Сначала определите участок, на котором разрывается цепочка: форма, CRM, статус оплаты, доступ, курс, урок или видео. Затем дайте короткую задачу с наблюдаемым симптомом и ожидаемым результатом.
Что можно добавить в LMS дальше
Собранная система является основой, а не пределом возможностей. Через следующие запросы к Ботану можно постепенно добавить:
- выдачу всех уроков сразу или открытие по расписанию;
- разные сроки доступа для тарифов;
- напоминания о непройденных занятиях;
- письма и сообщения после регистрации и оплаты;
- тесты с автоматической проверкой;
- роли кураторов и преподавателей;
- аналитику прогресса и проблемных уроков;
- сертификаты после завершения программы;
- подписки, рассрочки и несколько вариантов продукта;
- явные правила отзыва доступа после отмены или возврата платежа.
Добавляйте функции тогда, когда понятен реальный сценарий их использования. Чем точнее вы описываете событие, пользователя и ожидаемый результат, тем меньше риск получить красивый, но не связанный с бизнесом экран.
Практическое задание
Скопируйте готовый промпт, отправьте его в свой проект и дождитесь завершения сборки. Изучите административный раздел «Курсы», откройте созданный тренинг глазами ученика и проверьте, как редактируются программа, уроки и видео.
Затем создайте тестовый заказ, вручную подтвердите оплату и пройдите весь путь под обычным учеником. Не ограничивайтесь администраторским аккаунтом: именно отдельный вход в `/lms` показывает, что авторизация и доступы настроены правильно.
После этого попробуйте повторить задачу в новом отдельном workspace. Сравните два подхода: насколько удобно поддерживать сайт, CRM и LMS вместе и когда разделение действительно упрощает развитие проекта. Через такие эксперименты вы выработаете собственную архитектуру для разных бизнес-задач.
В результате урока у нас появляется полноценная основа онлайн-школы: публичный лендинг продаёт курс, CRM хранит заказ, подтверждение оплаты открывает доступ, администратор управляет программой, а ученик проходит занятия в отдельном защищённом кабинете.
Автор материалаАндрей Власенко