Отчеты по лабораторным работам и ДЗ отправлять на почту aikanev@bmstu.ru
Образ виртуальной машины 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. Общая лекция про мобильные приложения. PWA
Лекция 14. Плюсы и минусы React Native. Сетевое взаимодействие на Swift
Лекция 15. Резюме, Tauri, Agile, DevOps
В рамках практических работ по курсу необходимо каждому разработать заявочную систему на услуги по своей предметной области. Система состоит из веб-сервиса, фронтенд приложения, нативного приложения и второго асинхронного сервиса.
У каждого своя предметная область на весь курс: бронирование отелей, билетов в театр/кинотеатр, онлайн-магазин по вариантам, тему выбирать из списка ниже. По каждой теме есть ключевой процесс, в котором пользователь оформляет заявки, в которой может быть несколько услуги. Также есть модератор, который может редактировать список услуг и одобрять заявки. От предметной области зависят: названия ролей пользователей, названия сущностей услуг и заявок, список полей для них, возможные статусы и изменяемые в них поля. В нативном приложении нужно реализовать интерфейс гостя - только просмотр услуг.
Основной вариант лабораторных по бэкенду - это Django и Go. Но можно выполнять также на Java, C# и Node.js, при выполнении условия лабораторных работ. Для фронтенда только React+Redux+axios+React-Bootstrap
Каждая лабораторная - это sprint, этап разработки по agile. Каждая работа демонстрируется и защищается отдельно. При защите необходимо продемонстрировать работу приложения по своей теме, UML диаграмму (из StarUML), репозиторий github с кодом и ответить на вопросы. По первому модулю необходимо также сделать ТЗ, а по второму отчет по курсу - РПЗ.
- Цель работы: выбор варианта-темы на весь курс, знакомство с разработкой бэкенда и разработка базового дизайна
- Порядок показа: показать две страницы приложения, объяснить шаблоны, контроллеры этих страниц и коллекцию данных
- Контрольные вопросы: MVC, Django/Go, шаблонизация, HTTP, Web, HTML
- Задание: Базовая шаблонизация в Django (для Go просто HTML) для
услуг
Создание базового интерфейса, состоящего из двух страниц. Первая для просмотра списка услуг (отели, товары, рейсы и тд) в виде карточек с наименованием, ценой и картинкой. При клике по карточке происходит переход на вторую страницу с подробной информацией об услуге (даты, описание и тд)
В приложении должны быть использованы стили, для каждого элемента списка подгружается свое изображение. Все данные для обеих страниц нужно брать прямо из коллекции, без использования БД.
Добавить поле input для фильтрации списка услуг по выбранному полю (наименование, цена), отображаемых на странице (по умолчанию отображать все).
- Цель работы: разработка структуры базы данных и ее подключение к бэкенду
- Порядок показа: показать панель администратора/adminer, добавить запись, посмотреть данные через select в БД, показать шаблоны страниц. Объяснить модели, контроллеры для созданных таблиц
- Контрольные вопросы: ORM, SQL, модель и миграции
- ER диаграмма: таблицы, связи, столбцы, типы столбцов и их длина, первичные, внешние ключи
- Задание: Создание базы данных
PostgreSQLпо теме работы, подключение к созданному шаблонизатору
Необходимо разработать структуру БД по выбранной теме и ее реализовать с учетом требований ниже. Использовать таблицу услуг в страницах разработанного приложения. Наполнить таблицы БД данными через админку Django или Adminer.
Для карточек таблицы услуг добавить кнопку логического удаления услуги (через статус) с помощью выполнения SQL запроса без ORM.
Требования к БД:
Обязательно наличие 4 таблицы: услуг (статус удален/действует), заявок (статус, дата создания, дата формирования, дата завершения и модератор), м-м заявки-услуги, пользователей
Обязательно наличие 5 или более статусов заявок: введён, в работе, завершён, отменён, удалён. Названия таблиц и их полей должны соответствовать предметной области.
- Цель работы: создание веб-сервиса в бэкенде для использования его в
SPA - Порядок показа: выполнить GET списка, сделать POST новой записи, показать новые данные через select. Объяснить модели, сериализаторы, контроллеры, роутеры для методов веб-сервиса
- Контрольные вопросы: веб-сервис, REST, RPC, HTTP, OSI ISO
- Диаграмма классов с детализацией бэкенда (домены методов по
urlс интерфейсами, модели, таблицы БД) + insomnia/postman - Задание: Создание веб-сервиса со всей итоговой бизнес логикой, но без авторизации, подключение его к БД и тестирование в
insomnia/swagger/postman
Создание веб-сервиса для получения/редактирования данных из вашей БД. Для изображений услуг использовать Minio или хранение файлов картинок в бинарном виде в БД.
Требуется разработать все методы для реализации итоговой бизнес логики вашего приложения. Методы и url в API должны соответствовать REST. Для списка услуг и заявок нужно предусмотреть фильтрацию на бэкенде. Для логических действий в приложении (оплата, подтверждение, завершение) предусмотреть отдельные методы для обновления конкретных полей (статусы нельзя менять с любого на любой).
- Методические указания DRF. Переделать на
API view - Методические указания Golang
- Цель работы: Разработка базового SPA на React
- Порядок показа: показать две страницы фронтенда в браузере из
localhostи вGitHub Pages, фильтрация заявок. Внести изменения в БД, показать их во фронтенде. Объяснить код компонентов, передаваемые props, вызовы fetch. - Контрольные вопросы: react, props, компонент, элемент, состояние, хуки, жизненный цикл компонента
- Deployment диаграмма узлы: фронтенда, веб-сервиса, базы данных, web-сервера со статикой. Узлы соединить протоколами, компоненты фронтенда и бэкенда поместить в узлах, указать API между ними.
- Задание: Разработать две страницы фронтенд приложения на
React,TSи подключить его к веб-сервису. Подготовить ТЗ на итоговую систему.
Разработать базовый интерфейс приложения на React для гостя, аналогичный двум страницам из лабораторной работы №1 для просмотра услуг. При этом на странице списка услуг должны быть все обходимые фильтры (по диапазону дат, названию, цене) с фильтрацией на бэкенде. Использовать компоненты React-Bootstrap. Необходимо развернуть фронтенд на GitHub Pages.
В приложении должна быть навигационная панель navbar для списка базовых страниц, а также навигационной цепочки breadcrumbs, где отображается путь от базовой страницы к текущей.
Содержимое карточек получать из веб-сервиса лабораторной №3. Ajax-запросы написать самостоятельно через fetch. Ограничение с CORS решить через проксирование React. В методах fetch предусмотреть получение данных из коллекции с mock-объектами при отсутствии доступа к вашему бэкенду (если он не поддерживает HTTPS).
- Методические указания. Переделать на TS
- Progressive Web App и адаптивный дизайн
ТЗ на итоговую систему:
- цель
- назначение - краткое описание для чего, кто работает в системе
- задачи
- методы веб-сервиса таблицей с группировкой по доменам: метод, url, описание, входные, выходные данные
- Описание UI - список окон и какие действия для каких групп пользователей доступны. Указать, какие методы бэкенда при этом вызываются.
- требования к аппаратному обеспечению для сервера и клиента
- требования к программному обеспечению с версиями для серверных компонентов и для клиента
- Цель работы: Завершение бэкенда для
SPA - Порядок показа: выполнить авторизацию через
swagger, использовать содержимое куки для остальных запросов черезswagger. Показать, что при отсутствии прав возникает ошибка. - Контрольные вопросы: куки, сессия, redis, jwt, авторизация, аутентификация
- Sequence диаграмма: весь набор
HTTPзапросов по бизнес-процессу - Задание: Добавление авторизации и
swaggerв веб-сервис
Реализовать методы бэкенда для аутентификации и регистрации. Авторизация через хранение сессий и куки. Автозаполнение пользователя в таблице заявок при создании новой. Добавить описание методов для swagger.
Добавить проверку Permissions для методов модератора. Без авторизации в Swagger должно быть доступно только чтение-получение данных через API, с авторизацией - методы пользователя, а для модератора доступны все методы.
- Цель работы: Завершение интерфейса
пользователявReact - Порядок показа: показать добавление
заявки. Пояснить в коде использованиеreduxиaxios. Показать авторизацию в браузере и содержимое localStorage/cookie. - Контрольные вопросы: схема redux, reducer, store, контекст, axios
- Диаграмма классов с детализацией бэкенда и фронтенда: добавить методы авторизации, фронтенд разделить на страницы, добавить у страниц зависимость от API.
- Activity диаграмма/BPMN для итогового бизнес-процесса для ДЗ: B873 писание бизнес-процесса, разделение на дорожки по ролям пользователей, действия соответствуют операциям пользователей в вашей системе.
- Задание: Добавить авторизацию и возможность оформления
заявокво фронтенд черезRedux Toolkit
Добавить страницы для регистрации и авторизации. Добавить окно для просмотра списка заявок пользователя в виде таблицы. Добавить в меню пункты для новых страниц. Для обращений к методам веб-сервиса использовать axios.
Добавление менеджера состояний Redux Toolkit для хранения создаваемой заявки и состояния интерфейса после авторизации. В приложении должно быть реализовано переключение между интерфейсом гостя и интерфейсом пользователя по кнопке Вход/Выход. При выходе должно сбрасываться содержимое конструктора новой заявки.
Добавление на странице услуг кнопки Добавить для внесения данной услуги в новую заявку. Добавление страницы конструктора заявки, где можно удалить уже добавленные в заявку услуги, поменять их количество или подтвердить заявку. После кнопки подтвердить новая заявка создается в БД, а до этого хранится в Redux Toolkit
- Цель работы: Создание нативного приложения
- Порядок показа: Отредактировать услуги в БД, продемонстрировать изменение в нативном приложении
- Контрольные вопросы: виды нативных приложений и отличие от web-приложений, react-native, pwa, tauri
- Задание: Создание приложения для
гостяна iOS/Android/Tauri/Qt/React-native и подключением к веб-сервису
Создание простого нативного приложения для интерфейса гостя (без авторизации и редактирования), состоящий из 2 страниц. Подключить приложение к разработанному API.
- Методические указания iOS (Swift)
- Методические указания Android (Java)
- Методические указания React Native + Redux Toolkit
- Методические указания Tauri
- Qt
- Цель работы: Знакомство с межсервисным взаимодействием и асинхронностью
- Порядок показа: вызвать через
insomniagrpc-метод асинхронного сервиса, показать что в основном приложении появился результат - Контрольные вопросы: grpc, асинхронность, веб-сервис
- Задание: Создание асинхронного сервиса для отложенного действия (вычисление, моделирование, оплата и тд)
Требуется разработать второй простой асинхронный сервис на другом языке (кто делал на Django - Go и наоборот) с одним grpc-методом для выполнения отложенного действия в вашей системе (вычисление, моделирование, оплата и тд).
В исходном веб-сервисе также необходимо добавить grpc-метод для внесения результатов.
- Цель работы: Закрепление полученный знаний
- Порядок показа: создать заявку в интерфейсе
пользователя. Авторизоваться подмодератором, одобритьзаявкуи отредактировать списокуслуг. - Отчет: отчет необходимо отправить на почту aikanev@bmstu.ru. Оценивается раскрытие предметной области в описании и приложении, корректность оформления отчета.
- Контрольные вопросы: любые вопросы по реализации интерфейса
модератора - Диаграммы: диаграмма состояний для статусов
заявоки диаграмма прецедентов. Актуализировать все диаграммы из лабораторных, все диаграммы должны соответствовать реализованной вами системе - Задание: Реализовать интерфейс
модератораи подготовить итоговый отчет
Необходимо добавить в приложение React интерфейс модератора, доступный после его авторизации и имеющий следующие отличия:
- Новое окно редактирования
услуг, список услуг отображается таблицей. Доступно добавление новых услуг (обязательные и необязательные поля), редактирование, удаление. - В окне списка
заявокдоступны кнопки для смены статуса заявок. Также есть поля фильтрации по диапазонудат формирования, пользователю и статусу заявок.
Отчет-РПЗ по всем лабораторным и ДЗ:
- Введение (актуальность, цель, назначение, требования, задачи)
- Бизнес-процесс. Описание предметной области. Диаграмма прецедентов, диаграмма состояний и деятельности/BPMN
- Архитектура. Диаграммы развертывания, ER с назначением таблиц и диаграмма классов с детализацией бэкенда и фронтенда
- Алгоритмы. Диаграмма последовательности HTTP запросов
- Описание интерфейса. Перечень окон, их назначение и выполняемые пользователями действия
- Заключение
- Список использованных источников
- Приложение. Техническое задание
- Индексы в БД, большое количество
услуг(> 100000) и пагинация (+4 балла) - Адаптивность дизайна (+2 балла)
- Кодогенерация из swagger (+2 балла)
-
Система заявок на вычисления: факториал, НОД и тд.
Услуги- виды вычислений,заявки- запрос с входными данными и результатами. -
Система заявок на моделирование: имитационное/аналитическое моделирование потоков метро и тд.
Услуги- виды моделирования,заявки- запрос с входными данными и результатами. -
Система заявок для поваров в быстром питании на приготовление.
Услуги- виды блюд,заявки- заявки на приготовление на нужный заказ. -
Система заявок на производстве
-
Заявки от коллцентра мелкого бизнеса: менеджер-создатель заявки, исполнитель+курьер.
Услуги- услуги данного бизнеса,заявки- заявки от клиентов на услуги. -
Заявки контроля маршрута беспилотных летательных аппаратов.
Услуги- районы города,заявки- заявки на пролет объекта в данной районе в определенное время. -
Контроль нарушений ПДД самокатами и др средств индивидуальной мобильности с двигателем.
Услуги- виды нарушений и штрафы для них,заявки- факты нарушения из средств фиксации -
Заявки на переходы космических аппаратов на различные орбиты.
Услуги- доступные орбиты,заявки- заявки на переход спутников на орбиту. -
Визовый центр РФ - заявки на визы.
Услуги- виды виз,заявки- заявки на получение нужной визы. -
Автоматический контроль паспортов на границе.
Услуги- паспорта, которые заведены в системе,заявки- факты пересечения границы по паспорту -
Заявки на доставку грузов на Марс на Starship.
Услуги- товары, доставляемы на Марс на Starship,заявки- заявки на конкретный объем товаров -
Отчеты по добыче ресурсов (вода, углекислый газ, гелий и тд) на Луне.
Услуги- добываемые ресурсы,заявки- месячные отчеты об объеме добычи в конкретном месте Луны -
Трудоустройство женщин в отпуске по уходу за ребенком.
Услуги- вакансии для женщин с детьми,заявки- подача заявок на вакансии от женщин -
Система трудоустройства для инвалидов.
Услуги- вакансии для инвалидов,заявки- подача заявок на вакансию от инвалидов -
Система социальной помощи инвалидам - доставка еды, сопровождение на мероприятие и тд.
Услуги- оказываемые услуги,заявки- заявки на них от инвалидов -
История ВОВ - участники ВОВ и их привязка к архивным документам (личные карточки, наградные, ЖБД итд).
Услуги- архивные документы,заявки- привязка участника с наградой/событием к документу -
Система археологов - находки и их привязка к раскопкам.
Услуги- места археологических раскопок,заявки- факты находок предметов с группировкой по экспедиции
- Опишите шаблон MVC, структуру и назначение компонентов.
- Опишите схему, как реализован шаблон MVC в фреймворке Django.
- Что такое Django? Его назначение и возможности.
- Что такое шаблонизация Django? Приведите примеры.
- Опишите протокол HTTP. Схему работы и основные понятия.
- Опишите стек протоколов интернета TCP/IP.
- Перечислите основные составляющие web и опишите их.
- Что такое HTML, CSS? Приведите примеры.
- Что такое URI? Опишите элементы URI для HTTP.
- Виды баз данных. Приведите примеры и отличия.
- Объясните назначение ORM, ее составляющие. Укажите преимущества и недостатки ORM.
- Что такое модель и миграция?
- Укажите группы SQL запросов, их примеры и назначение.
- Что такое веб-сервис? Отличие от веб-сервера.
- Что такое Web API? Назначение и применение.
- Микросервисная архитектура. Отличия от монолитной архитектуры.
- Перечислите требования REST, опишите их.
- Что такое RPC? Варианты RPC и их отличия.
- Что такое Swagger? Назначение и использование.
- Что такое AJAX? Схема работы и назначение.
- Назначение JSON и XML. Примеры и отличия.
- Что такое git? Опишите схему работы с ветками GitHub.
- Методология разработки Agile. Состав IT команды.
- Перечислите основные диаграммы UML и их назначение.
- Что такое Web реального времени? Что такое WebSocket?
- Укажите отличия XmlHttpRequest и fetch. Приведите примеры.
- Перечислите отличия Axios от fetch. Приведите примеры.
- Что такое React? Что такое компонент, его состояния и свойства.
- Структура React проекта. Назначение Babel и WebPack.
- Жизненный цикл React компонента.
- Назначение хуков useState и useEffect.
- Назначение хуков useContext и useReducer.
- Опишите схему работы менеджера состояний Redux.
- Опишите работу Redux на диаграмме последовательности.
- Какие параметры передаются при создании Store? Их назначение.
- Что такое Cors? Укажите варианты решения.
- Что такое Redis? Его назначение и варианты применения.
- Опишите схему авторизации с помощью JWT.
- Опишите схему авторизации с помощью сессий.
- Что такое авторизация и аутентификация? Укажите варианты авторизации и их отличия.
- Что такое SSO? Схема работы.
- Протокол OAuth. Схема работы.
- Отличия мобильных и веб-приложения. Языки и технологии для разработки мобильных приложений.
- Что такое pwa? Отличия от других вариантов приложений.
- Плюсы и минусы разработки на React Native.
- Назначение фреймворков Electron и Tauri. Их отличия.
- Опишите этапы подхода DevOps. Назначение GitHub Pages.