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

Про проект

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

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

Завдання

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

Рішення

Ми вирішили розробляти особистий кабінет на фреймворку 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-вебінар.

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

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

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

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

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

Висновок

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

Розробка лендінгу під ключ

LSI-копірайтінг

Тарифи SEO

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

Про проект

Завдання

Рішення

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