Образ виртуальной машины Linux Ubuntu 20.04 для выполнения заданий курса
Лекция 1. История Web, трехуровневая модель приложений, MVC
Лекция 2. Методология Agile, состав команды. Диаграммы UML
Лекция 3. Основы Web, шаблонизация, Django
Лекция 4. Базы данных, ER, PostgreSQL. ORM. Админка Django. Курсоры
Лекция 5. Веб-сервис. Swagger. Микросервисы
Лекция 6. Работа в git. Примеры специализированных сервисов - S3, уведомления, очереди
Лекция 7. Введение в фронтенд и React
Лекция 8. React, сборка, компоненты
Лекция 10. Ajax, запросы на React. WebSocket
Лекция 11. Авторизация, куки, хранилище сессий
Лекция 13. Общая лекция про мобильные приложения. Верстка
Лекция 14. Конкретные кейсы с примерами кода. Сетевое взаимодействие.
Лекция 15. Деплой, DevOps, RE
У каждого своя предметная область на весь курс: бронирование отелей, билетов в театр/кинотеатр, онлайн-магазин
Основной вариант лаб по беку - это Django. Но есть ещё варианты на Go, Java, C# и Node.js
При защите необходимо продемонстрировать работу приложения, UML диаграмму, репозиторий github с кодом и ответить на вопросы.
Базовая шаблонизация в Django для словаря. Создание базового интерфейса для просмотра списка (отели, товары, рейсы и тд) с ссылками и частью полей (цена, город) и при переходе по ссылке другая страница с более подробной информацией о товаре (описание, картинка и тд).
В приложении должны быть использованы стили, для каждого элемента списка подгружается свое изображение.
Добавить поле input для ограничения количества записей, отображаемых на странице (по умолчанию отображать все).
На выбор Django, Go, Spring, Node.js
Контрольные вопросы: MVC, Django, шаблонизация, HTTP, Web, HTML
Создание базы данных PostgreSQL/MySQL (SQLite использовать нельзя), подключение к шаблонизатору. Создание админки.
Для карточек таблицы услуг добавить кнопку удаления услуги с помощью выполнения SQL запроса.
Таблицы: таблица услуг - словарь, таблица фактов - бронирования (с датами и статусом, три даты и менеджер), таблица пользователей
Статусы: введен, в работе, завершён, удалён
ER диаграмма: таблицы, связи, столбцы, типы столбцов и их длина, первичные, вторичные ключи
Контрольные вопросы: ORM, SQL, модель и миграции
Создание веб-сервиса для получения/редактирования данных из вашей БД. Требуется разработать методы для основных (минимум трех) таблиц вашего приложения. Проверка в swagger/postman.
Добавить метод для подсчета суммы (количества) покупок/бронирований за определенную дату через обращение к методам модели.
Диаграмма компонентов+классов: компонент сервиса, интерфейс, структура модели по классам
Контрольные вопросы: веб-сервис, микросервисы, REST, RPC
Базовая работа по фронтенду. Карточки элементов, навигация. Необходимо разработать страницы, аналогичные лабораторной работе №1 для просмотра услуг. Использовать компоненты React-Bootstrap. Без взаимодействия с сервисом, карточки наполняются через mock-объекты.
Навигация по двум страницам должна быть организована посредством Навигационной цепочки Breadcrumbs: Магазин / Название услуги
На выбор React, Vue, Angular
Deployment диаграмма: узлы фронтенда, веб-сервиса, базы данных, web-сервера со статикой
Контрольные вопросы: react, props, компонент, элемент, состояние, хуки, жизненный цикл компонента
Подключение разработанного интерфейса фронтенда к веб-сервису из лабораторной №3. Ajax-запросы написать самостоятельно (через fetch например).
Добавление менеджера состояний (redux или через хуки useReducer, useContext) для кеширования полученных по API данных и их использования в компонентах.
На выбор React, Vue, Angular
Sequence диаграмма: получение HTML страницы, AJAX запросы
Контрольные вопросы: AJAX, json, XmlHttpRequest/fetch, redux, контекст
Добавление страницы просмотра для таблицы бронирований (корзина товаров, бронирования) и кнопки бронирования услуги. Из корзины товар можно удалить.
Для подключения к нужным сервисам/методам бэкенда желательно использовать автоматическую кодогенерацию через swagger (дополнительные баллы). На бэкенде должна быть доступна админская панель.
В приложении должно быть реализовано переключение между интерфейсом гостя и интерфейсом пользователя - без аутентификации, просто смена состояния.
Добавление фильтрации и поиска на странице услуг (сама фильтрация на стороне бэкенда):
- По наименованию услуги
- По диапазону значений (цене). Максимальное и минимальное значение запрашиваются с сервера
Activity диаграмма: описание основного алгоритма, разделение на дорожки по элементам системы или ролям пользователей
Контрольные вопросы: AJAX, json, XmlHttpRequest/fetch, react, props, компонент, элемент, состояние, веб-сервис, микросервисы, REST, RPC
Добавить модель таблицы пользователей, реализовать методы бэкенда и окна фронтенда для аутентификации и регистрации. Авторизация через хранение сессий (Redis - дополнительные баллы) и куки. Автозаполнение пользователя в таблице фактов при создании нового бронирования.
Диаграмма компонентов с детализацией бэкенда: все компоненты системы с интерфейсами, выделить сервисы и интерфейсы данных и авторизации
Контрольные вопросы: куки, сессия, redis, jwt, авторизация, аутентификация
Создание мобильного приложения с подключением к web-сервису. Просмотр услуг (товаров и тд), без бронирования и редактирования.
Добавление роли пользователя-менеджера контента, доработка под эту роль фронтенда и веб-сервиса:
- Редактирование таблицы услуг
- Изменение статусов таблицы бронирования
- Фильтрация записей таблицы бронирования по дате и статусу. Список статусов начитывается с сервера
Доработка ролевой модели - ограничение прав на интерфейс для пользователь-клиента. Добавление главного меню приложения.
Добавить ограничение на вызовы методов веб-сервиса. Без авторизации менеджера в Insomnia должно быть доступно только чтение-получение данных через API
Добавить диаграмму состояний для бронирований или услуг и диаграмму прецедентов.
Актуализировать все диаграммы из лабораторных, добавить краткое описание к диаграммам.
Пять разделов отчета:
- Введение (цель, задачи, актуальность)
- Бизнес-процесс. Диаграмма прецедентов, диаграмма состояний
- Архитектура. Диаграммы развертывания, ER с назначением таблиц и диаграмма компонентов с детализацией бекенда
- Алгоритмы. Диаграмма последовательности и деятельности
- Описание интерфейса. Перечень окон и их назначение
- Шаблон MVC
- Django
- Шаблонизация
- Протокол HTTP
- Web
- HTML
- URI
- ORM
- SQL
- Модель и миграции
- Веб-сервис
- Сервис-ориентированная архитектура
- Микросервисная архитектура
- REST
- RPC
- AJAX
- JSON
- XmlHttpRequest/fetch
- Архитектура React приложения
- Функциональные компоненты. React Hooks
- Менеджер состояний Redux
- Куки
- Redis
- JWT
- Авторизация и аутентификация
- Отличия Axios от fetch