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

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

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

Образ виртуальной машины Linux Ubuntu 20.04 для выполнения заданий курса

Лекции

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Лабораторная работа №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 (дополнительные баллы). На бэкенде должна быть доступна админская панель.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Шаблон MVC
Django
Шаблонизация
Протокол HTTP
Web
HTML
URI
ORM
SQL
Модель и миграции
Веб-сервис
Сервис-ориентированная архитектура
Микросервисная архитектура
REST
RPC
AJAX
JSON
XmlHttpRequest/fetch
Архитектура React приложения
Функциональные компоненты. React Hooks
Менеджер состояний Redux
Куки
Redis
JWT
Авторизация и аутентификация
Отличия Axios от fetch

puzzzik / web-2022 Goto Github PK

web-2022's Introduction

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

Образ виртуальной машины Linux Ubuntu 20.04 для выполнения заданий курса

Лекции

Бекенд

Фронтенд

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

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