Онлайн образование. Новый модуль в Telegram WebApp

Привет, ботмейкеры!

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

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

🎓Так появился наш новый модуль "Онлайн-образование".

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

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

Кому

Модуль онлайн-школы будет актуален всем, кто занимается обучением.

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

Зачем

Данный модуль может применяться:

• Для продажи собственных курсов
• Для создания своей онлайн-школы
• Для формирования внутрикорпоративного обучения

Оглавление

• Стоимость
• Настройка Школы
• Настройка Модулей
• Настройка Уроков
• Работа со стилями
• Публикация в чатах и каналах
• Работа WebApp на разных устройствах
• Модульная кнопка "Онлайн-образование"
• Безопасность контента
• Требования и ограничения

Стоимость

Модуль "Онлайн-образование" - платный, доступен только на тарифе PRO и в пробный период. Стоимость будет рассчитываться по следующей схеме:

• базовая стоимость школы - 2000 рублей
• базовый размер хранилища - 10 Гб* - 200 рублей
• дополнительное место для хранилища - 1 Гб - 20 рублей
• стоимость пользователей - зависит от количества активных пользователей в боте

*Обратите внимание, что 1 Гб = 1000 Мб = 1 000 000 Кб = 1 000 000 000 байт.

После создания школы первые 14 дней - бесплатные. Далее списание депозита начнется в автоматическом режиме.

Каждая школа оплачивается отдельно.

Рассмотрим расчет стоимости на примерах:

1. У вас бот, в котором до 1000 активных пользователей. Вы создали школу, заняв от базового размера хранилища 5 Гб. Получается, что стоимость бота со школой за месяц будет следующая: 1250 рублей (за пользователей) + 2000 рублей (за школу) + 200 рублей (за базовое хранилище) = 3450 рублей в месяц.
2. У вас бот, в котором 1300 активных пользователей. Вы создали школу, заняв все хранилище и купив дополнительное место на 10 Гб. Стоимость бота со школой за месяц составит: 1650 рублей (за пользователей, согласно тарифной сетке) + 2000 рублей (за школу) + 200 рублей (за базовое хранилище) + 10 Гб * 20 рублей (за дополнительное место) = 4050 рублей в месяц.
3. У вас бот, в котором 900 пользователей. Вы создали 2 школы внутри бота. В первой школе вы заняли только 2 Гб хранилища. Во второй школе вам не хватило базового объема, и вы докупили ещё 10 Гб. Общая стоимость в месяц за бота со школами составит: 1250 рублей (за пользователей) + 2000 (за первую школу) + 200 рублей (за базовое хранилище для первой школы) + 2000 (за вторую школу) + 200 рублей (за базовое хранилище для второй школы) + 10 Гб * 20 рублей (за дополнительное место для второй школы) = 5850 рублей в месяц.

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

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

Как это работает

В модуле “Онлайн-образование” есть несколько основных сущностей, с которыми предстоит работать:

• Школа - образовательная платформа, состоящая из модулей и уроков.
• Модуль - отдельный тематический блок, объединенный одной темой, состоящий из уроков.
• Урок - отдельная тема в изучаемом блоке. Самая маленькая сущность в структуре образовательного контента в школе.

Разберем более подробно каждый из них.

Школа

При создании школы вам открывается блок с новыми разделами: Аналитика, Пользователи, Настройки, Страница регистрации, Медиа контент, Программа обучения, Описание школы, Модули, Архив, Оплата.

Аналитика

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

• Использовано места в хранилище - процент занятого места в хранилище от доступного вам
• Всего учеников - количество учеников зарегистрировавшихся в школе
• Завершили все модули\Завершили все уроки - количество учеников, завершивших все модули\все уроки
• Завершили хотя бы 1 модуль\Завершили хотя бы 1 урок - количество учеников, завершивших хотя бы 1 модуль\урок
• Самый сложный модуль - модуль, где было допущено больше всего ошибок в тестах. Считается по ошибкам в тестированиях к уроку
• Самый сложный урок - урок, где было допущено больше всего ошибок в тестировании
• Среднее время прохождения модулей\Среднее время прохождения уроков - время, которое в среднем тратит ученик на прохождение модуля\уроков. Считается: все время потраченное на прохождение модуля\уроков деленное на количество учеников, прошедших модуль\уроки. Время прохождения рассчитывается, как разница между моментом завершения модуля\урока и временем его начала
• Открыли хотя бы 1 модуль\Открыли хотя бы 1 урок - количество учеников, открывших хотя бы 1 модуль\урок

Добавляя уроки\модули или убирая их в архив после того, как пользователи начали прохождение, аналитика и прогресс будет изменяться.

Аналитика (графики) обновляются раз в сутки.

Пользователи

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

Как рассчитывается прогресс?

Для школы:Общее количество пройденных уроков учеником / Общее количество уроков во всех модулях школы

Для модуля:Общее количество пройденных уроков учеником внутри конкретного модуля / Общее количество уроков в данном модуле

Вы можете настроить как 1 фильтр, так и сразу несколько. Допустим вам нужно посмотреть сколько учеников, завершивших урок "Первый", завершили модуль "Первый". Для этого выстраиваете 2 фильтра "Завершил урок" и "Завершил модуль".

Чтобы сбросить фильтр, нажмите "Сбросить фильтр" (серый текст в правом верхнем углу).

Также вы можете открыть карточку нужного вам ученика.

Здесь вы найдете следующую информацию: Username ученика, его имя, указанное при входе в школу, номер телефона и почту (если вы добавляли сбор данной информации при регистрации в школе - раздел "настройки"), Прогресс по прохождению уроков и модулей, а также результаты тестирований.

Настройки

В данном разделе вы найдете все необходимое для базовой настройки школы:

• Задать название школы
• Определить режим доступа -бесплатный или платный
• Параметры регистрации
• Создание кнопок-ссылок
• Скопировать URL-адрес школы

Также в параметрах регистрации есть пункт про оферту. Зачем она?

Офе́рта — предложение о заключении сделки, в котором изложены существенные условия договора, адресованное определённому лицу, ограниченному или неограниченному кругу лиц. Если получатель принимает оферту, это означает заключение между сторонами предложенного договора на оговорённых в оферте условиях.

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

Настоятельно рекомендует формировать оферту, если у вас платная школа или внутри будут платные модули\уроки.

Если вы делаете доступ в школу платным, то параметры регистрации - запрос номера телефона и почты - устанавливаются автоматически. Это необходимо для проведения оплаты.

Рекомендуем создать (перенести) оферту через сервис Telegra.ph - это официальный сервис Telegram для написания текстовых материалов. Ссылка на этот сервис будет открыта внутри WebApp без открытия сторонних браузеров. Если же вы поставите ссылку на сторонний ресурс, например, https://example.com/oferta, то пользователь, нажав на неё, будет перенаправлен во внешний браузер, что не очень удобно и он может уже не вернуться обратно в школу.

Рассмотрим подробнее создание кнопок-ссылок и зачем они нужны.

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

Вы можете не создавать данные кнопки, если они вам не нужны.

В процессе редактирования кнопки-ссылки вы можете воспользоваться стандартным шаблоном размера кнопок, как показано ниже.

Либо вы можете кастомизировать данные кнопки, используя CSS-стили. Более подробно о работе со стилями можно прочитать  ниже.

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

Обращаем ваше внимание, что не все стили в выпадающем списке, будут срабатывать в связи с техническими особенностями браузеров (и их версий), операционных систем пользователей и версий Telegram.

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

При первом открытии школы ученик попадает на страницу регистрации, где бот попросит ввести данные: Имя, телефон, почта. Данные зависят от того, какие параметры регистрации вы задали в разделе "Настройки".

Также ученик будет видеть текст или медиа контент, который вы загрузите в разделе "Страница регистрации"

Название кнопки задавать обязательно.

Именно при нажатии на данную кнопку пользователь будет попадать в саму школу.

Медиа-контент

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

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

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

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

Загружать в хранилище вы можете файлы:

• Видео - MP4
• Изображения - JPEG/PNG
• Файлы - PDF/Excel/CSV/ZIP/DOC и т.д.

Ограничения для загрузки:

• Максимальный размер изображений - 25 Мб
• Максимальный размер документов - 100 Мб
• Максимальный размер видео - 5 Гб
• Длительность видео - не более 150 минут (2 часа 30 минут)

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

Программа обучения

После захода в школу ученику будет доступна вкладка "Программа", как это изображено ниже.

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

Раздел "Программа обучения" поможет вам сформировать данное описание и добавить нужный медиа-контент.

Описание школы

Данный блок виден ученику после того, как он совершил регистрацию в школе. Описание школы идет над отображением модулей.

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

Водяной знак будет отображаться в виде юзернейма\ID пользователя. Размещение знака вы можете выбрать самостоятельно.

Модули

С данного раздела начинается непосредственное создание модулей в вашей школе.

Количество модулей неограниченно.

Здесь также вы сможете отслеживать:

• сколько учеников открыло модуль
• сколько проходит на данный момент
• сколько успешно прошли - сдали все тесты
• сколько неудачно завершили - не сдали тесты

Помимо редактирования модулей, вам доступно клонирование модуля, его удаление и перемещение модулей между собой.

Порядок, в котором будут выставлены модули, будет использоваться и в самом WebApp для всех учеников. Вы можете менять порядок модулей, перетаскивая их за "::".

Архив

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

Архивировать урок или модуль можно в разле "Настройки" в самом модуле или уроке.

ВАЖНО!После архивации любые изменения, которые вы внесете, не сохраняются и не видны вашим ученикам.

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

Оплата

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

Также здесь вы сможете видеть дату, когда завершиться бесплатный тариф для вашей школы.

Вся информация из этого раздела будет дублироваться в разделе “Оплата и баланс” бота, в котором создана данная школа.

Пополнение депозита для оплаты будет происходить, как и раньше, в разделе "Настройки бота"- "Оплата и баланс".

Модуль

При создании модуля вам открывается блок с новыми разделами: Аналитика, Пользователи, Настройки, Описание, Дизайн, Уроки.

Аналитика

Данный раздел, как и аналитика школы, показывает вам статистику по успешным\неуспешным прохождениям модуля, среднему время прохождению модулю и самый сложный урок модуля.

Также внутри данного раздела вы сможете увидеть точечную аналитику по нужному вам уроку.

Пользователи

Раздел "Пользователи" полностью дублирует функционал аналогичного раздела в самой школе.

Настройки

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

Обязательно укажите Название модуля - то, как модуль будет отображаться у ученика. Также рекомендуем указывать Длительность модуля, чтобы ученик понимал сколько времени он затратит на изучение.

Режим доступа, как и в школе, позволяет настроить платный доступ к модулю, если это необходимо.

Плюс вы можете настроить открытие модуля в определенную дату в разделе "Дата открытия".

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

Если модуль стал неактуальным, то вы можете его архивировать. Таким образом он станет недоступен для учеников.

Пример отображения модуля в WebApp.

Описание

Чтобы при открытии модуля, ученик понимал про что будет данный модуль, задайте описание модуля.

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

Дизайн

В данном разделе вы сможете настроить нужный дизайн для вашего модуля.

Для стандартной настройки воспользуйтесь: иконками, цветом и размером.

В блоке preview вам доступен предпросмотр, если обновление не отображается - обновите страницу.

Как и в кнопках-ссылках в школе, о которых мы писали ранее, вам будет доступна кастомизация кнопки с модулем.

Через стили вы сможете настроить высоту кнопки, шрифт, расположение шрифта на кнопке, и сам задник.

Про стили вы можете подробнее прочитать ниже в разделе Стили данной статьи.

Уроки

В разделе "Уроки" вы можете: создать урок, открыть редактор урока, клонировать урок, удалить его и поменять уроки местами.

Урок

При создании урока вам открывается блок с новыми разделами: Аналитика, Пользователи, Настройки, Контент, Дизайн.

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

Настройки

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

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

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

Например, если вы устанавливаете напоминание "30 минут" - это значит, что вашему ученику придёт напоминание о прохождении урока через 30 минут от момента, когда ученик закрыл урок и вышел из школы.

Контент

В данном разделе будет происходить сбор самого урока - его контентной части.

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

При сборке контента ориентируйтесь на блок preview для оценки визуальной составляющей.

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

Также для визуального оформления контента вам будут доступны такие блоки, как:

• Параграф - начала нового блока
• Таблица - создание таблицы
• Список - маркированный список
• Код - блок для демонстрации кода, если у вас урок посвящен разработке. (ВАЖНО! Это не блок для вставки своего кода, чтобы он срабатывал внутри бота)
• Заголовок - большой текст для выделения нужных смыслов
• Разделитесь - горизонтальная полоса, отделяющая между собой разные части

Для форматирования текста вам доступен редактор внутри текстового окна. Для вставки смайла, скопируйте его из Телеграм и вставьте в текстовом окне в нужном вам месте.

После создания контентной части вы можете добавить тестирование - домашнее задание.

Тестирование доступно 2х типов: с открытыми вопросами и закрытыми вопросами. Между собой их можно будет миксовать.

Открытый вопрос - это вопрос, на который ученик должен дать письменный ответ. В таких вопросах вы можете задавать тип ответа. Допустим, вам важно, чтобы в ответе ученик написал 5 именно цифрой, а не прописью. Тогда в типе ответа укажите - число.

Посмотреть ответ на такие вопросы можно в карточке ученика в разделе "Пользователи".

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

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

Дизайн

Оформление дизайна урока происходит также, как и модуля.

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

Обработка медиа

Изображения

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

Рекомендуем загружать изображения в формате JPG без прозрачного фона.

Видео

Все загружаемые видео-материалы в процессе обработки редактируются следующим образом:

• уменьшаются (но не увеличиваются) до разрешения 1280х720 (720p)
• устанавливается видео кодек H.264
• звуковая дорожка никак не редактируется
• частота кадров устанавливается в значение 24

А так же задаются следующие параметры:

• Развертка может задаваться индивидуально для каждого видео
• Профиль может задаваться индивидуально для каждого видео
• GOP задаётся для каждого видео индивидуально
• Битрейт задаётся индивидуально для каждого видео, но не более 5 Мбит/c
• Цветовая субдискретизация может задаваться индивидуально для каждого видео
• Прочие изменения, не влияющие на качество видео, для улучшения пользовательского опыта учеников

Если вам важна скорость обработки (“дедлайн вчера”) и ваше видео длится более 2 часов и(или) его размер превышает 1 Гб, рекомендуем сконвертировать видео в любом видео редакторе, приведя его самостоятельно к формату 720p с кодеком H.264.

Обращаем ваше внимание, что каждое видео обрабатывается индивидуально в соответствии с его параметрами в связи с чем каждое видео имеет своё время обработки.

Документы

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

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

Стили

Настройка стилей доступна для:

• кнопок школы;
• карточек модулей;
• карточек уроков.

Если вы не знакомы с работой стилей в браузерах (CSS), то вам могут быть полезны следующие материалы:

• https://www.w3schools.com/css/default.asp
• https://www.tutorialrepublic.com/css-reference/css3-properties.php
• так же вы можете найти материалы через ваш любимый поисковик просто указав что-то подобное "css стили какие бывают".

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

Основные стили, которые вам будут полезны:

• color - цвет шрифта
• background-color - фоновый цвет (можно задать цвет через rgba систему, например rgba(255, 255, 255) или же через написание названия цвета - black, blue, white и тд)
• font-size - размер шрифта (лучше указывать в процентах для лучшего отображения на любых устройствах)
• font-style - стиль шрифта (основные: italic - курсив, normal - обычный шрифт)
• font-weight - объем шрифта (жирный или нет: возможные значения - 100, 200, 300, 400, 500, 600, где 100 - тоненький, а  600 - жирный)
• height - высота объекта (лучше указывать в процентах)
• background-image - фоновая картинка. Чтобы поместить на задник картинку, вставьте в поле следующие данные url(<ссылка_на_картинку>). Ссылка может быть из любого источника, рекомендуем использовать картинки, которые находятся в вашем облаке.

Публикация в чатах и каналах

Для того, чтобы опубликовать WebApp с онлайн-школой в своем канале или чате, вам необходимо сделать следующее.

1. Зайти в @Botfather (Официальный чат-бот Telegram)
2. Ввести команду /newapp
3. Выбрать тот бот, где у вас создана школа внутри
4. Далее сделать все согласно инструкции от Botfather: установить название нового WebApp, добавить короткое описание, загрузить фото нужного размера
5. Когда Botfather попросит отправить ссылку, которая будет открываться в WebApp, возьмите ссылку на нужную школу в настройках данной школы (URL адрес школы)
6. Далее задаете название для короткой ссылки WebApp
7. Все, вы можете использовать ссылку, которую вам выдал Botfather, для публикаций в канале и чате

Обратите внимание, что ссылку можно делать не только на школу, но и на отдельный модуль или урок.

Работа WebApp на разных устройствах

Также хотим обратить внимание, что технология WebApp может работать на разных устройствах по-разному.

Например на Windows пользователь может перемещать окно WebApp и продолжать работать в чатах, в то время как на MacOS данная функция не предусмотрена, чтобы продолжить работать в чатах, нужно будет закрыть WebApp.

Модульная кнопка "Онлайн-образование"

Для публикации школы в боте вы можете воспользоваться URL адресом школы и открывать его в любом месте школы через WebApp.

Либо воспользоваться модульной кнопкой "Онлайн-образование".

Безопасность контента

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

То есть сначала должна идти картинка, а ниже кнопка на открытие школы, все одним сообщением.

Требования и ограничения

• Количество школ для каждого бота неограничено
• Количество модулей для каждой школы неограничено
• Количество уроков для каждого модуля неограничено
• Объём хранилища
  • Минимальный - 10 Гб
  • Максимальный - ограничено только вашими финансами
• Количество учеников для каждой школы - неограничено
• Максимальная длительность видео - 150 минут = 2 часа 30 минут
• Максимальный размер изображений - 25 Мб
• Максимальный размер документов - 100 Мб
• Максимальный размер видео - 5 Гб
• Количество медиа-файлов ограничен только размером хранилища
• 1 Гб = 1000 Мб = 1 000 000 Кб = 1 000 000 000 байт
• Для публикаций изменений в школе необходимо нажать на кнопку "Опубликовать" в правом верхнем углу конструктора

А ещё

• Ускорили немного некоторые функции ботов;
• Исправили ситуацию с PayPal, которая могла возникать в некоторых ботах;
• Прочие исправления и улучшения.