Особистий кабінет студента та викладача
Про проєкт
Webnauts Academy – це освітній стартап нашої компанії. Тут ми навчаємо IT-професіям з нуля та підвищуємо кваліфікацію молодих спеціалістів. А ще робимо процес навчання сучасним, комфортним і приємним.
Ми вже розповідали про розробку сайту та платіжного додатка в чат-боті Telegram. Сьогодні черга історії про створення особистого кабінету для студентів і викладачів Webnauts Academy.
Завдання
Від наших розробників вимагалося створити платформу для зручної та ефективної комунікації між студентом і викладачем. У такий спосіб ми хотіли надати всі умови для результативного навчання та максимальної реалізації можливостей студентів Академії.
Щоб досягти бажаних цілей, ми вирішили створити «Кабінет студента» та наділити його наступним функціоналом:
- особистий профіль студента,
- постійний доступ до лекцій і навчальних матеріалів,
- можливість здавати викладачеві виконані завдання,
- можливість відслідковувати успішність і заборгованості,
- підтримка зв’язку не лише з викладачем, а й з адміністратором Академії для уточнення організаційних моментів.
При цьому ми повинні кожному студенту гарантувати конфіденційність та забезпечити доступність навчальної платформи. А також нарівні зі студентами організувати можливість зручно та продуктивно працювати в Кабінеті викладачам і адміністратору Академії.
Front-end розробка на React
1. Створення особистого кабінету
Для створення «Особистого кабінету Академії» нам потрібна була така платформа, яка б змогла:
- легко підтримувати всі компоненти,
- забезпечити швидкісну роботу кабінету,
- мати максимальну продуктивність за наявності складних програмних структур.
Саме тому фронтенд частину ми вирішили реалізувати на React.
React — це JavaScript-бібліотека з відкритим вихідним кодом для створення користувальницьких інтерфейсів. Завдяки простоті, масштабованості та високій швидкості, React часто використовують для розробки односторінкових і мобільних додатків. Бібліотека підтримується компанією Facebook і великою спільнотою розробників: це означає, що вона дуже добре протестована, регулярно оновлюється, чудово підтримується та максимально гладко переходить до більш нових версій.
2. Додавання авторизації та реєстрації
Цю функцію ми реалізували за допомогою JSON Web Token (JWT) і забезпечили реєстрацію, а також вхід до особистого кабінету користувача за допомогою введення логіну та пароля.
JSON Web Token (JWT) — це відкритий стандарт, призначений для передачі даних при аутентифікації користувача в клієнтських програмах, а саме там, де є необхідність ввести логін і пароль, щоб увійти до системи. Саме створення токенів відбувається на сервері, після чого вони підписуються секретним ключем і передаються користувачеві.
3. Наповнення особистого кабінету функціоналом
Щоб Кабінет зміг повноцінно працювати, ми використали всі можливості React, які дозволили нам задіяти й інші бібліотеки. Так, застосування React Router v.6 дозволило реалізувати швидке переміщення між різними компонентами Кабінету без оновлення сторінки під час навігації користувача. А з бібліотекою Redux ми вибудували систему надсилання повідомлень. Її ми використали разом із набором спеціально розроблених рішень і методів у додатковому пакеті Redux Toolkit. Це дозволило нам суттєво спростити код. Також був використаний двонаправлений протокол зв’язку між користувачем і сервером — WebSocket, який дав можливість студентам і викладачам обмінюватися повідомленнями в режимі реального часу.
Усі ці інструменти в комплексі дозволили нам у розрізі ролей «викладач-студент» винести наступний функціонал:
- надати викладачу можливість створювати уроки,
- реалізувати функцію надсилання та перевірки домашніх завдань,
- додати систему коментарів,
- створити внутрішній персональний онлайн-чат,
- відображати статус виконання домашніх завдань,
- налаштувати роботу повідомлень.
Особистий кабінет студента
Для наочності розглянемо докладніше, як виглядають особисті кабінети студента та викладача після того, як ми на практиці реалізували всі бажані можливості.
Робота з особистим кабінетом
Після введення логіну та пароля користувач потрапляє безпосередньо до Кабінету:
Розділ «Налаштування»
При переході до вкладки «Налаштування» можна заповнити особистий профіль, прикріпити фото. І саме тут, у разі потреби, можна змінити пароль входу.
Тут же студент самостійно налаштовує роботу сповіщень, а також за бажанням підписується на новини Академії:
Розділ «Мої курси»
У вкладці «Мої курси» відображається обраний курс із доступом до уроків за кнопкою «Докладніше»:
Після переходу за активним посиланням обраного користувачем уроку, з’являється блок з навчальними матеріалами. Це оглядовий план лекції, відеоурок і посилання на матеріал для звантаження:
Нижче винесено домашнє завдання, яке студенту рекомендують до виконання для закріплення отриманих знань і навичок. Виконане завдання прикріплюється окремим файлом і надсилається на перевірку викладачу:
Особистий кабінет викладача
Кабінет викладача у нас вийшов не менш функціональний і зручний, аніж кабінет студента.
Вхід до кабінету здійснюється лише після введення логіна та пароля.
Зсередини Особистий кабінет викладача дуже схожий на кабінет студента: має два аналогічні розділи «Налаштування» та «Мої курси». Відрізняється наявністю додаткового розділу «Статистика».
Розділ «Налаштування»
У розділі «Налаштування» викладач може на власний розсуд заповнити особистий профіль і прикріпити фото. Тут же можна встановити чи змінити пароль, а також налаштувати отримання сповіщень про нові листи на свій імейл. Це налаштування дуже зручне, тому що дозволяє консолідувати всі сповіщення від багатьох студентів на одній платформі та позбавляє необхідності постійно заходити до Кабінету для уточнення наявності нових повідомлень:
Розділ «Мої курси»
З розділу «Мої курси» викладачу доступні всі дисципліни, які він читає студентам. Тут же відображаються швидкі сповіщення від студентів, адресовані особисто викладачу — так званий «онлайн-чат».
Тут же, без необхідності переходити до інших вкладок, викладач має доступ до вибору групи студентів. Самі групи розрізняються за датою початку навчання та за кількістю студентів у ній:
Функціонал розділу також дозволяє викладачеві створювати уроки для студентів і бачити статистику успішності кожного учня в обраній групі:
Перед майбутньою лекцією викладач має можливість створити урок безпосередньо в Особистому кабінеті. Це дуже зручно, оскільки після створення лекція стане доступною студентам обраної групи. Додатково до лекції прикріплюються всі навчальні матеріали, необхідні для опрацювання теми: презентації, документи, відеозаписи.
Тут же прикріплюється домашнє завдання з усіма файлами та посиланнями для його успішного виконання. Ця функція зручна і викладачу, і студенту, оскільки відразу видно весь обсяг завдання, а також до нього можна швидко повернутися в будь-який момент, обравши тему, що цікавить.
Ось так виглядатиме урок в Особистому кабінеті викладача після його розміщення на платформі:
Тут же для викладача відображається статистика виконання студентами конкретного завдання:
- скільки студентів здали роботу,
- скільки завдань викладач прийняв,
- скільки завдань відправив на доопрацювання,
- статистика по кожному студенту.
Додатково в кабінеті відображається листування в онлайн-чаті: видні питання та відповіді від студента викладачу та навпаки. Одним словом, увесь процес комунікації доступний викладачу та зберігається в його Особистому кабінеті:
Розділ «Статистика»
Третій розділ у Власному кабінеті викладача представлений у вигляді електронного журналу. Гранично простий та зручний, полегшує викладацьку роботу, відображаючи результати та успішність студентів у розрізі занять. Дозволяє відстежувати рейтинг кожного студента.
Отже, зручність кабінету вкотре підтверджується його логічно продуманим функціоналом. Всі необхідні викладачу інструменти завжди «під рукою» та позбавляють необхідності переходити з розділу в розділ у пошуках потрібного.
Back-end розробка на Django
Вся back-end частина реалізована на фреймворку Django з досить багатими можливостями. Для API використали Django Rest Framework, який і дозволив додатку React взаємодіяти з back-end частиною.
Django — це високорівневий вебфреймворк, написаний мовою Python із відкритим вихідним кодом, який дозволяє створювати все, починаючи зі звичайних сайтів і простих чат-ботів, і закінчуючи додатками зі складною архітектурою та високим навантаженням.
Саме за допомогою фреймворку Django ми створили роль «адміністратор», наділили її можливістю керувати контентом із адміністративної панелі та надали можливість:
- створювати та видаляти користувачів,
- створювати та змінювати нові курси та групи,
- давати та змінювати доступи користувачам,
- створювати чи змінювати лекції,
- інші додаткові можливості.
Для зберігання даних ми використали одну з найбільш безпечних, стабільних, надійних і масштабованих систем управлення базами даних — PostgreSQL. Таблиці в ній організовані у вигляді об’єктів, а дії виконуються за допомогою об’єктно-орієнтованих функцій.
Для зручності деплою ми використали систему контейнеризації Docker, яка також була застосована й у Front-end розробці. Вона дозволила нам швидко перенести сайт на сервер, перезапускати програму в разі збоїв сервера чи помилок додатка. Для додаткового захисту від несанкціонованого доступу запити до додатка передаються через проксі-сервер.
Отже, за допомогою нескладної в управлінні адмін-панелі адміністратор має доступ абсолютно до всієї платформи та бачить:
- кожен навчальний курс,
- склад групи,
- лекції кожного потоку,
- оплату по кожному студенту.
Адміністратор має можливість додавати нові та видаляти курси, що вже закінчилися:
Вносити зміни до поточних курсів, наприклад, за необхідності змінювати дату початку курсу:
Може додавати чи видаляти студентів зі списків груп:
За потреби змінювати дані лекцій:
Наявність простих фільтрів дозволяє швидко та легко шукати потрібну інформацію — лекції, курси, завдання та файли:
Функціонал адміністратора дозволяє відкривати чи закривати доступ студентів до курсу залежно від наявності чи відсутності оплати за навчання:
Підсумки
Таким чином, створивши «Особистий кабінет студента та викладача Академії», ми отримали повноцінний інструмент, який:
- чудово підійшов для комфортного навчання студентів,став зручною
- та зрозумілою робочою платформою для викладачів і адміністратора Академії,
- показав черговий вдалий досвід наших розробників у створенні додатків із подібним функціоналом і поділом ролей користувачів.
