¶ Введение
В данном руководстве представлена общая информация о сервисе в целом, и о его составных частях.
Исходный код приложения расположен по ссылке
Здесь не будет приведено детальное описание работы каждого отдельного метода, так как весь код проекта задокументирован в виде комментариев, а также отчета по итогам его выполнения, который находится на странице проекта в разделе «Документы».
¶ Архитектура приложения
Сервис состоит из двух основных частей: front-сервера и back-сервера.
При реализации проекта были разработаны:
- API по созданию конференций Zoom, Jitsi, Google Meet, Webinar
- Клиентское приложение (front-сервер).
Front-сервер возвращает страницу пользователя, которая впоследствии заполняется данными полученными по API.
Back-сервер общается с API Zoom, Jitsi, Webinar и Google Meet для создания встреч и возвращает ссылки для присоединения к встречам на front-сервер.
¶ API back-сервера
Back-сервер реализован на языке Python с использованием фреймворка Django. Он представляет собой удобный интерфейс для взаимодействия с сервисами для создания видеоконференций. С помощью него можно создавать, редактировать, удалять встречи, а также выполнять прочие задачи, в числе которых аутентификация, обновление расписания, получение сохраненного расписания и получение ссылок на пары.
Полный набор методов back-сервера представлен ниже.
- «Zoom»
Методы из данного раздела ответственны за создание, получение и завершение конференций Zoom.
- «Lessons»
Методы из данного раздела ответственны за создание, получение и удаление встреч/пар.
- «Авторизация»
Методы из данного раздела ответственны за авторизацию пользователей.
/api/keycloak/login - Запрос на авторизацию
/api/keycloak/login/callback - Ловит ответ от системы авторизации
¶ Клиент
Данный сервис является front-end частью приложения и был реализован на языке JavaScript с использованием фреймворка Vue.js.
Клиентское приложение (online.miem.hse.ru) предназначено для взаимодействия пользователей с проектом: оно позволяет просматривать обработанные пары на сегодня, личные пары и пользовательские встречи, на которые приглашен пользователь (данные отображаются в виде календаря), а также, если пользователь является преподавателем — выбирать предпочитаемые платформы для онлайн-занятий.
¶ Календарь
Одна из важшейших состовляющих клиентсокго приложения - календарь, через который пользователь получает основную информацию и взаимодействует с приложением.
¶ Реализация
Календарь реализован с помощью компонента v-calendar UI фреймворка Vuetify, располагается в компоненте my.vue, представленном ниже. Максимально подробную информацию о компонентах Vuetify можно найти в официальной документации.
Код сервиса хранится в вышеуказанном репозитории и разделен по разделам, представленным на рисунке ниже.
Рассмотрим данные разделы:
- api — содержит файлы, предназначенные для взаимодействия с Gate-сервисом;
- assets — ресурсы веб-приложения, такие, как шрифты, картинки, иконки, глобальные стили и пр.;
- components — блоки кода, подходящие для многократного использования;
- layout — шаблоны веб-страниц проекта или, другими словами, визуальная оболочка над основным приложением: default — основной слой с навигацией и кнопкой войти, с навигацией и error — слой с ошибкой;
- plugins — различные утилиты (и их настройки), необходимые для работы фронтенда: например, скрипт «screen.js», который отслеживает величину экрана пользователя для применения правильной адаптивности веб-приложения, или скрипт «axios.js» для HTTP-запросов и пр.;
- static — иконки для сайта;
- router - глобальная маршрутизация по сайту;
- store — глобальное хранилище состояния всего приложения, который содержит данные об авторизованном пользователе (например, его аватар и пр.). Есть само состояние («loggedIn» и «user»), есть мутации, позволяющие изменять это состояние, а также действия, которые позволяют асинхронно вызывать эти мутации;
- utils - содержит файлы, предназначенные для взаимодействия c cookies;
- views — сами страницы, состоящие из вышеуказанных компонентов, скриншот которых приведен выше. По этим страницам может «ходить» пользователь: страница с выбором платформы (для преподавателя и учебного офиса), личные пары каждого пользователя, общий список текущих пар на сегодня и страница авторизации.