Личный кабинет студента и преподавателя
О проекте
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 разработке. Она позволила нам быстро перенести сайт на сервер, перезапускать приложение в случае сбоев сервера либо ошибок приложения. Для дополнительной защиты от несанкционированного доступа запросы к приложению передаются через прокси-сервер.
Таким образом, с помощью несложной в управлении админ-панели администратор имеет доступ абсолютно ко всей платформе и видит:
- каждый обучающий курс,
- состав группы,
- лекции каждого потока,
- оплату по каждому студенту.
Администратор имеет возможность добавлять новые и удалять уже закончившиеся курсы:
Вносить изменения в текущих курсах, например, при необходимости изменять дату начала курса:
Может добавлять или удалять студентов из списков групп:
При необходимости изменять данные лекций:
Наличие простых фильтров позволяет быстро и легко искать нужную информацию — лекции, курсы, задания и файлы:
Функционал администратора позволяет открывать или закрывать доступ студентов к курсу в зависимости от наличия или отсутствия оплаты за обучение:
Итоги
Таким образом, создав «Личный кабинет студента и преподавателя Академии», мы получили полноценный инструмент, который:
- отлично подошёл для комфортного обучения студентов,
- стал удобной и понятной рабочей платформой для преподавателей и администратора Академии,
- показал очередной удачный опыт наших разработчиков в создании приложений с подобным функционалом и разделением ролей пользователей.
Комментарии