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

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

Лекция 14. Конкретные кейсы с примерами кода. Сетевое взаимодействие.

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

Лекция 15. Деплой, DevOps, RE

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

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

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

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

Лабораторная работа №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, авторизация, аутентификация

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

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

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

• iOS (Swift)
• Android (Java)

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

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

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

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

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

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

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

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

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

Пять разделов отчета:

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

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

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