Разработка Интернет Приложений (РИП) 2022

Отчеты по лабораторным работам и ДЗ отправлять на почту [email protected]

Видеозаписи лекций в youtube

Образ виртуальной машины 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, сборка, компоненты

Лекция 9. Redux, hooks

Лекция 10. Ajax, запросы на React. WebSocket

Лекция 11. Авторизация, куки, хранилище сессий

Лекция 12. JWT. SSO

Мобильные приложения

Лекция 13. Общая лекция про мобильные приложения. PWA

Лекция 14. Плюсы и минусы React Native. Сетевое взаимодействие на Swift

Инфраструктура

Лекция 15. Резюме, Tauri, Agile, DevOps

Лабораторные работы

У каждого своя предметная область на весь курс: бронирование отелей, билетов в театр/кинотеатр, онлайн-магазин

Основной вариант лаб по беку - это Django. Но есть ещё варианты на Go, Java, C# и Node.js

При защите необходимо продемонстрировать работу приложения, UML диаграмму, репозиторий github с кодом и ответить на вопросы.

Инструкция по работе c Python

Лабораторная работа №1

Базовая шаблонизация в Django для словаря. Создание базового интерфейса для просмотра списка (отели, товары, рейсы и тд) с ссылками и частью полей (цена, город) и при переходе по ссылке другая страница с более подробной информацией о товаре (описание, картинка и тд).

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

Добавить поле input для ограничения количества записей, отображаемых на странице (по умолчанию отображать все).

На выбор Django, Go, Spring, Node.js

Контрольные вопросы: MVC, Django, шаблонизация, HTTP, Web, HTML

• Методические указания Django
• Методические указания Golang

Лабораторная работа №2

Создание базы данных PostgreSQL/MySQL (SQLite использовать нельзя), подключение к шаблонизатору. Создание админки.

Для карточек таблицы услуг добавить кнопку удаления услуги с помощью выполнения SQL запроса.

Таблицы: таблица услуг - словарь, таблица фактов - бронирования (с датами и статусом, три даты и менеджер), таблица пользователей

Статусы: введен, в работе, завершён, удалён

ER диаграмма: таблицы, связи, столбцы, типы столбцов и их длина, первичные, вторичные ключи

Контрольные вопросы: ORM, SQL, модель и миграции

• Методические указания Django
• Методические указания Golang

Лабораторная работа №3

Создание веб-сервиса для получения/редактирования данных из вашей БД. Требуется разработать методы для основных (минимум трех) таблиц вашего приложения. Проверка в swagger/postman.

Добавить метод для подсчета суммы (количества) покупок/бронирований за определенную дату через обращение к методам модели.

Диаграмма компонентов+классов: компонент сервиса, интерфейс, структура модели по классам

Контрольные вопросы: веб-сервис, микросервисы, REST, RPC

• Методические указания DRF
• Методические указания Golang

Лабораторная работа №4

Базовая работа по фронтенду. Карточки элементов, навигация. Необходимо разработать страницы, аналогичные лабораторной работе №1 для просмотра услуг. Использовать компоненты React-Bootstrap. Без взаимодействия с сервисом, карточки наполняются через mock-объекты.

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

На выбор React, Vue, Angular

Deployment диаграмма: узлы фронтенда, веб-сервиса, базы данных, web-сервера со статикой

Контрольные вопросы: react, props, компонент, элемент, состояние, хуки, жизненный цикл компонента

• Методические указания

Лабораторная работа №5

Подключение разработанного интерфейса фронтенда к веб-сервису из лабораторной №3. Ajax-запросы написать самостоятельно (через fetch например).

Добавление менеджера состояний (redux или через хуки useReducer, useContext) для кеширования полученных по API данных и их использования в компонентах.

На выбор React, Vue, Angular

Sequence диаграмма: получение HTML страницы, AJAX запросы

Контрольные вопросы: AJAX, json, XmlHttpRequest/fetch, redux, контекст

• Методические указания

Лабораторная работа №6

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

Для подключения к нужным сервисам/методам бэкенда желательно использовать автоматическую кодогенерацию через swagger (дополнительные баллы). На бэкенде должна быть доступна админская панель.

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

Добавление фильтрации и поиска на странице услуг (сама фильтрация на стороне бэкенда):

1. По наименованию услуги
2. По диапазону значений (цене). Максимальное и минимальное значение запрашиваются с сервера

Activity диаграмма: описание основного бизнес-процесса, разделение на дорожки по ролям пользователей

Контрольные вопросы: AJAX, json, XmlHttpRequest/fetch, react, props, компонент, элемент, состояние, веб-сервис, микросервисы, REST, RPC

• Методические указания

Лабораторная работа №7

Добавить модель таблицы пользователей, реализовать методы бэкенда и окна фронтенда для аутентификации и регистрации. Авторизация через хранение сессий (Redis - дополнительные баллы) и куки. Автозаполнение пользователя в таблице фактов при создании нового бронирования.

Диаграмма компонентов с детализацией бэкенда: все компоненты системы с интерфейсами, выделить сервисы и интерфейсы данных и авторизации

Контрольные вопросы: куки, сессия, redis, jwt, авторизация, аутентификация

• Настройка Kafka через WSL
• Методические указания DRF Redis
• Методические указания Golang JWT

Лабораторная работа №8

Создание мобильного нативного приложения (дополнительные баллы) или PWA с адаптивной версткой для телефона.

Требуется реализовать подключение к web-сервису. Просмотр услуг (товаров и тд), без бронирования и редактирования.

Контрольные вопросы: PWA, service worker, manifest.json, media queries

• iOS (Swift)
• Android (Java)
• React Native + Redux Toolkit
• Progressive Web App

Домашнее задание

Добавление роли пользователя-менеджера контента, доработка под эту роль фронтенда и веб-сервиса:

1. Редактирование таблицы услуг
2. Изменение статусов таблицы бронирования
3. Фильтрация записей таблицы бронирования по дате и статусу. Список статусов начитывается с сервера

Доработка ролевой модели - ограничение прав на интерфейс для пользователь-клиента. Добавление главного меню приложения.

Добавить ограничение на вызовы методов веб-сервиса. Без авторизации менеджера в Insomnia должно быть доступно только чтение-получение данных через API

Контрольные вопросы: куки, сессия, AJAX, json, веб-сервис

• Методические указания и примеры диаграмм

Оформление единого отчёта

Добавить диаграмму состояний для бронирований или услуг и диаграмму прецедентов.

Актуализировать все диаграммы из лабораторных, добавить краткое описание к диаграммам. Объем не меньше 1000 слов.

Шесть разделов отчета:

1. Техническое задание: цель, задачи, требования к функциональным характеристикам (какие есть пользователи и какие у них возможности), требования к программному обеспечению (какое ПО должно быть на клиенте и на сервере для работы вашей системы)
2. Введение (описание предметной области, актуальность)
3. Бизнес-процесс. Диаграмма прецедентов, диаграмма состояний и деятельности
4. Архитектура. Диаграммы развертывания, ER с назначением таблиц и диаграмма компонентов (классов) с детализацией бэкенда и фронтенда
5. Алгоритмы. Диаграмма последовательности
6. Описание интерфейса. Перечень окон и их назначение

Вопросы к экзамену

1. Шаблон MVC
2. Django
3. Шаблонизация
4. Протокол HTTP
5. Web
6. HTML
7. URI
8. ORM
9. SQL
10. Модель и миграции
11. Веб-сервис
12. Сервис-ориентированная архитектура
13. Микросервисная архитектура
14. REST
15. RPC
16. AJAX
17. JSON
18. XmlHttpRequest/fetch
19. Архитектура React приложения
20. Функциональные компоненты. React Hooks
21. Менеджер состояний Redux
22. Куки
23. Redis
24. JWT
25. Авторизация и аутентификация
26. Отличия Axios от fetch