Особистий кабінет студента для онлайн-школи

Про проект

Світлана Шатаєва – наш постійний клієнт та практикуючий астролог. Ми вже писали про те, як розробили сайт для онлайн-школи астрології Світлани Шатаєвої та створили пакет графіки зі знаками зодіаку.

Цей кейс ми вирішили присвятити ще одному об’ємному блоку нашої роботи, в рамках якого розробили особистий кабінет для онлайн-школи, причому як адміністратора курсів, так і звичайних користувачів — студентів курсу.

Завдання

Під час розробки сайту онлайн-школи астрології виникла потреба створення особистого кабінету учня курсів. Більше того, необхідно було розробити дві версії кабінету: адмін-панель (для викладача) та користувальницьку (для студентів). Відповідно, кожен варіант повинен виконувати низку завдань, бути максимально комфортним та візуально приємним.

Рішення

Ми вирішили розробляти особистий кабінет на фреймворку Django – програмному каркасі, написаному мовою програмування Python. Фреймворк Django відрізняється широкими можливостями та підходить для розробки складних сайтів та web-додатків, тому виявився особливо актуальним у нашому випадку.

На замітку! Фреймворк Django активно використовується компаніями зі світовим ім'ям. Так, найбільший відео-хостинг YouTube – частина компанії Google, – написаний саме на ньому. Google Search, DropBox, Instagram, Pinterest – ці сайти також використовують Django.

Важливо також те, що Django захищений від поширених видів атак, включаючи атаки XSS і CSRF. Більшість відомих атак легко обробляються механізмами фреймворку, а значить – розробки на Django відрізняються підвищеною web-безпекою. Фреймворк відмінно підходить для сайтів та програм, які працюють з інтелектуальною власністю та авторськими продуктами.

Дизайн та можливості ЛК студента

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

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

На головній сторінці студент відразу ж бачить курс (один із трьох варіантів, купівля яких доступна на сайті онлайн-школи). Курс поділено на блоки, наповнення яких коригує адміністратор у своєму особистому кабінеті.

/ 02

У нульовому блоці студенти знайомляться з інструкцією, договором оферти, розкладом та можуть переглянути вступний вебінар.

У навчальних блоках студентам доступний матеріал для роботи. Це текстові та відео-лекції, вебінари та інше наповнення на розсуд викладача.

У блоках з лекціями доступне також завантаження домашнього завдання та форма для здачі вже виконаної роботи – передбачено як віконце для тексту, так і можливість прикріплення файлів.

Відео-лекції студенти можуть дивитися за допомогою віджету YouTube прямо в особистому кабінеті.

З головної сторінки особистого кабінету користувачі можуть потрапити до інших розділів. Одне з них — «Налаштування», у якому можна заповнити особистий профіль: додати фото, прописати e-mail чи змінити пароль входу.

Також є вкладка “Задати питання” для підтримки зв’язку з викладачем. У ній є повноцінний месенджер, в якому можна обмінюватись повідомленнями та прикріплювати файли.

Ще ми дублювали всі три сторінки ЛК у список, що відкривається, який відкривається в шапці кабінету біля нікнейму студента.

Особистий кабінет адміністратора (викладача): функціональні рішення

Потрапляючи в «адмінку», викладач отримує повний доступ до всіх необхідних функцій та налаштувань.

Налаштування доступу та домашні завдання

У вкладці Access (“Доступ”) можна відкривати доступ до одного з трьох тарифів за курсом: “Слухач”, “Студент” або “Практик”.

Тут же можна створювати домашні завдання з одним із чотирьох статусів: «У роботі», «Надіслано на перевірку», «Повернено з правками» та «Прийнято». Таке рішення дозволяє якісно опрацьовувати завдання, не вдаючись при цьому до сторонніх ресурсів та месенджерів – все відбувається виключно в ЛК.

Користувацький чат

Вкладка Chat >> User chats дозволяє викладачеві самому створювати чат зі студентом на вибір. Тут також можна прикріплювати файли.

Курси: легке адміністрування

Ще одна вкладка «Курси» створена для керування курсами та інформаційною базою. Всього в пару кліків можна створити курс – для цього передбачений інтуїтивно зрозумілий візуальний редактор з усіма необхідними кнопками, які позначені всіма іконками. Є можливість завантаження Preview (прев’ю) та додавання блоків.

У вкладці «Загальні дані» можна додавати матеріали, які не є навчальними, наприклад, договір оферти або інструкцію з придбання програми курсу. Ці матеріали дублюватимуться для різних курсів і їх не потрібно буде додавати заново під час створення нового курсу. Тут також передбачено зручний візуальний редактор. У цьому розділі можна додавати посилання на відео з відео-хостингів YouTube і VIMEO або посилання на ZOOM-вебінар.

Наприклад, так виглядає додавання тексту оферти у кабінеті викладача:

Так уже готовий матеріал відображається у кабінеті студента:

А у вкладці «Студенти» зберігаються всі необхідні дані про студентів курсу.

«Мої дії»: безпека та зручність

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

Висновок

Як бачите, можливості команди Вебнавтів, якщо не безмежні, то дуже широкі. Ми вміємо «розмовляти» різними мовами програмування та використовувати їх для досягнення різних цілей та вирішення навіть найскладніших технічних завдань. Розробка особистого кабінету викладача та студента для онлайн-школи астрології — незаперечний доказ. Перші студенти вже оцінюють якість нашої роботи, а ми готові допомогти створити та налаштувати подібну систему навчання і для інших клієнтів.

О проекте

Светлана Шатаева — наш постоянный клиент и практикующий астролог. Мы уже писали о том, как разработали сайт для онлайн-школы астрологии Светланы Шатаевой и создали пакет графики со знаками зодиака.

Этот кейс мы решили посвятить ещё одному объемному блоку нашей работы, в рамках которого разработали личный кабинет для онлайн-школы, причем как для администратора курсов, так и для обычных пользователей — студентов курса.

Задача

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

Решение

Мы приняли решение разрабатывать личный кабинет на фреймворке Django – программном каркасе, написанном на языке программирования Python. Фреймворк Django отличается широкими возможностями и подходит для разработки сложных сайтов и web-приложений, поэтому оказался особенно актуальным в нашем случае.

На заметку! Фреймворк Django активно используется компаниями с мировым именем. Так, крупнейший видео-хостинг YouTube — часть компании Google, — написан именно на нём. Google Search, DropBox, Instagram, Pinterest — эти сайты также используют Django.

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

Дизайн и возможности ЛК студента

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

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

На главной странице студент сразу же видит курс (один из трех вариантов, покупка которых доступна на сайте онлайн-школы). Курс поделен на блоки, наполнение которых корректирует администратор в своем личном кабинете.

/ 02

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

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

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

Видео-лекции студенты могут смотреть с помощью виджета YouTube также прямо в личном кабинете.

С главной страницы личного кабинета пользователи могут попасть в несколько других разделов. Один из них — «Настройки», в котором можно заполнить личный профиль: добавить фото, прописать e-mail или изменить пароль для входа.

Также есть вкладка «Задать вопрос» для поддержки связи с преподавателем. В ней есть полноценный мессенджер, в котором можно обмениваться сообщениями и прикреплять файлы.

Ещё мы дублировали все три страницы ЛК в выпадающий список, который открывается в шапке кабинета возле никнейма студента.

Личный кабинет администратора (преподавателя): функциональные решения

Попадая в «админку», преподаватель получает полный доступ ко всем необходимым функциям и настройкам.

Настройки доступа и домашние задания

Во вкладке Access («Доступ») можно открывать доступ к одному из трех тарифов по курсу: «Слушатель», «Студент» или «Практик».

Здесь же можно создавать домашние задания с одним из четырех статусов: «В работе», «Отправлено на проверку», «Возвращено с правками» и «Принято». Такое решение позволяет качественно прорабатывать задания, не прибегая при этом к сторонним ресурсам и мессенджерам — всё происходит исключительно в ЛК.

Пользовательский чат

Вкладка Chat >> User chats позволяет преподавателю самому создавать чат со студентом на выбор. Здесь также можно прикреплять файлы.

Курсы: легкое администрирование

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

Во вкладке «Общие данные» можно добавлять материалы, не являющиеся учебными, — например, договор оферты или инструкцию по приобретению программы курса. Эти материалы будут дублироваться для разных курсов и их не нужно будет добавлять заново при создании нового курса. Здесь также предусмотрен удобный визуальный редактор. В этом же разделе можно добавлять ссылки на видео из видео-хостингов YouTube и VIMEO или же ссылку на ZOOM-вебинар.

Например, так выглядит добавление текста оферты в кабинете преподавателя:

Так уже готовый материал отображается в кабинете студента:

А во вкладке «Студенты» хранятся все необходимые данные о студентах курса.

«Мои действия»: безопасность и удобство

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

Заключение

Как видите, возможности команды Вебнавтов если не безграничны, то очень широки. Мы умеем «говорить» на различных языках программирования и использовать их для достижения разных целей и решения даже самых сложных технических задач. Разработка личного кабинета преподавателя и студента для онлайн-школы астрологии — неопровержимое тому доказательство. Первые студенты уже оценивают качество нашей работы, а мы готовы помочь создать и настроить подобную систему обучения и для других клиентов.