Услуги

  • Сайты
  • Контент
  • Продвижение
  • Битрикс24
  • Приложения
Все услуги Оплата
Все услуги Оплата

Поиск

  • Разработка интернет-магазина под ключ
  • Разработка сайтов
  • Разработка леднигов
  • Разработка на битрикс24
  • Разработка на Вордпресс

Личный кабинет студента и преподавателя

О проекте

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, который дал возможность студентам и преподавателям обмениваться сообщениями в режиме реального времени.

Все эти инструменты в комплексе позволили нам в разрезе ролей «преподаватель-студент» вынести следующий функционал :

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

Личный кабинет студента

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

Работа с личным кабинетом

После ввода логина и пароля пользователь попадает непосредственно в Кабинет:

Раздел «Настройки»

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

Здесь же студент самостоятельно настраивает работу уведомлений, а также по желанию подписывается на новости Академии:

Раздел «Мои курсы»

Во вкладке «Мои курсы» отображается выбранный курс с доступом к урокам по кнопке «Подробнее»:

01

/ 02

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

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

Личный кабинет преподавателя

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

Вход в кабинет осуществляется только после ввода логина и пароля.
Изнутри Личный кабинет преподавателя очень схож с кабинетом студента: имеет два аналогичных раздела «Настройки» и «Мои курсы». Отличается наличием дополнительного раздела «Статистика».

Раздел «Настройки»

В разделе «Настройки» преподаватель может по своему усмотрению заполнить личный профиль и прикрепить фото. Здесь же можно установить или сменить пароль, а также настроить получение уведомлений о новых письмах на свой имейл. Эта настройка очень удобна, так как позволяет консолидировать все уведомления от множества студентов на одной платформе и избавляет от необходимости постоянно заходить в Кабинет для уточнения наличия новых сообщений:

Раздел «Мои курсы»

Из раздела «Мои курсы» преподавателю доступны все дисциплины, которые он читает студентам. Здесь же отображаются быстрые уведомления от студентов, адресованные лично преподавателю — так называемый «онлайн-чат»:

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

Функционал раздела также позволяет преподавателю создавать уроки для студентов и видеть статистику успеваемости каждого ученика в выбранной группе:

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

Здесь же прикрепляется и домашнее задание со всеми файлами и ссылками для его успешного выполнения. Эта функция удобна и преподавателю, и студенту, так как сразу виден весь объём задания, а также к нему можно быстро вернуться в любой момент, выбрав интересующую тему.

Вот таким образом будет выглядеть урок в Личном кабинете преподавателя после его размещения на платформе:

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

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

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

Раздел «Статистика»

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

01

/ 02

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

Back-end разработка на Django

Вся back-end часть реализована на фреймворке Django с достаточно богатыми возможностями. Для API использовали Django Rest Framework, который и позволил приложению React взаимодействовать с back-end частью.

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

Именно с помощью фреймворка Django мы создали роль «администратор», наделили её возможностью управлять контентом из административной панели и предоставили возможность:

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

Для хранения данных мы использовали одну из самых безопасных, стабильных, надежных и масштабируемых систем управления базами данных — PostgreSQL. Таблицы в ней организованы в виде объектов, а действия выполняются с помощью объектно-ориентированных функций.

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

Таким образом, с помощью несложной в управлении админ-панели администратор имеет доступ абсолютно ко всей платформе и видит:

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

Администратор имеет возможность добавлять новые и удалять уже закончившиеся курсы:

Вносить изменения в текущих курсах, например, при необходимости изменять дату начала курса:

Может добавлять или удалять студентов из списков групп:

При необходимости изменять данные лекций:

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

01

/ 02

Функционал администратора позволяет открывать или закрывать доступ студентов к курсу в зависимости от наличия или отсутствия оплаты за обучение:

Итоги

Таким образом, создав «Личный кабинет студента и преподавателя Академии», мы получили полноценный инструмент, который:

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

Комментарии

Comments are closed.

Хотите обсудить наличие и функционал Личного кабинета на вашей платформе?

Заполните форму, и наш менеджер свяжется с вами в ближайшее время!

Над проектом работали