Web

KO | EN

gitlite — search

#python #ai #golang #deep-learning #docker #nodejs #java #windows #kubernetes #awesome-list #pytorch #ios #openai #open-source

(★ 117)

Репозиторий курса Разработка Интернет Приложений

파일 탐색기

최종 버전 다운로드 (.zip)

- 2024.md
- 2025.md
- - EmptyFolderIcon-977cc2bb.svg
  - FillingFolderIcon-82bf3eac.svg
  - hero-background-080a0749.mp4
  - index-0975aa4c.js
  - index-ab7cc928.css
  - logo-acabf3b9.svg
  - TrashSvg-398a58a5.svg
- index.html
- logo.svg
- Lecture_10_Redux.pdf
- Lecture_11_Axios.pdf
- Lecture_11_PWA.pdf
- Lecture_12_Axios.pdf
- Lecture_13_Async.pdf
- Lecture_14_Mobile.pdf
- Lecture_1_Web.pdf
- Lecture_2_Databases_ORM.pdf
- Lecture_3_Agile_UML_Git.pdf
- Lecture_4_HTTP.pdf
- Lecture_5_Web_Service.pdf
- Lecture_6_Authorization.pdf
- Lecture_7_jwt.pdf
- Lecture_8_React_Introduction.pdf
- Lecture_9_Frontend_architecture.pdf
- - ИУ5-52Б Мажитов В.docx
  - ИУ5-53 Абитов РПЗ.docx
  - РПЗ Бабасанова РТ5-51Б.docx
  - РПЗ Расулов ИУ5-55Б.docx
- РПЗ Бромберг ИУ5-54Б.docx
- - README.md
- - README.md
- - README.md
- - README.md
- - README.md
- - README.md
- - README.md
- - README.md
- - README.md
- - docker-compose.yml
  - README.md
- - README.md
- - README.md
- - README.md
- - README.md
- - arabic.md
  - README.md
- - FastAPI_ReadME.md
- - README.md
- - README.md
- - arabic.md
  - lab1_tutorial.md
  - lab1_tutorial_zh.md
- - docker-compose.yml
  - README.md
- - README.md
- - docker-compose.yml
  - README.md
- - README.md
- - lab2_tutorial.md
- - merged.swagger.json
  - README.md
- - README.md
- - lab3_tutorial.md
- - docker-compose.yml
  - README.md
- - README.md
- - old.md
  - Permissions.md
  - README.md
- - README.md
- - README.md
  - redux-toolkit.md
- - MinIO_bucket_setup_ReadMe.md
- - README.md
- - PWA.md
  - PWA.pdf
- - python.md
- - README.md
- - react_native.md
- - README.md
- - redux_toolkit.md
- - README.md
  - text.txt
- - README.md
- - README.md
- - README.md
- - README.md
  - tauri_application.md
- - README.md
.gitignore
README.md
topics.md

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/iu5git/Web

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd Web

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Docker

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Docker Desktop 컨테이너를 빌드하고 실행하려면 필요합니다. 설치 후 실행해서 백그라운드에 켜두세요.

⚠️ 이 프로젝트는 규모가 큰 저장소라, 이 방법이 실제 핵심 제품이 아니라 내부 하위 패키지를 가리키는 것일 수 있습니다. README 전체를 함께 확인해보세요.

docker compose -f tutorials/git-docker/docker-compose.yml up -d --build

compose 설정 파일에 정의된 서비스들을 대상으로 명령을 실행합니다.

✅ 터미널에 docker compose ps 를 입력해 컨테이너들이 Up 상태인지 확인하세요. README에 포트 번호가 적혀있다면 브라우저에서 http://localhost:포트번호 로 접속해보세요.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Проектирование систем и продуктовая веб-разработка 2026
### Разработка Интернет Приложений (РИП).

Отчеты по лабораторным работам и ДЗ отправлять на почту `aikanev@bmstu.ru`

## [Видеозаписи лекций в youtube](https://youtube.com/playlist?list=PLLELLTvDgUQ9cpB1XzSuZ0mNSBkbjVNJ_)
## [Видеозаписи лекций на VK Видео](https://vk.com/video/playlist/-211704031_2)

## Лекции

* [Лекция 1. История Web, MVC](lectures/Lecture_1_Web.pdf)

* [Лекция 2. Базы данных, ER, миграции, ORM](lectures/Lecture_2_Databases_ORM.pdf)

* [Лекция 3. Методология Agile, состав команды. Диаграммы UML. Работа в git](lectures/Lecture_3_Agile_UML_Git.pdf)

* [Лекция 4. OSI, HTTP. Стандарты интернета](lectures/Lecture_4_HTTP.pdf)

* [Лекция 5. Веб-сервис. REST. Swagger. Микросервисы](lectures/Lecture_5_Web_Service.pdf)

* [Лекция 6. ТЗ. Авторизация, сессии, permissions. Redis, swagger](lectures/Lecture_6_Authorization.pdf)

* [Лекция 7. Цифровая подпись. JWT. SSO](lectures/Lecture_7_jwt.pdf)

* [Лекция 8. Введение в React, жизненный цикл компонентов, CORS](lectures/Lecture_8_React_Introduction.pdf)

* [Лекция 9. Архитектура фронтенда: SSG, BFF, FSD](lectures/Lecture_9_Frontend_architecture.pdf)

* [Лекция 10. Redux](lectures/Lecture_10_Redux.pdf)

* [Лекция 11. POST, Axios. Диаграммы бизнес требований](lectures/Lecture_11_Axios.pdf)

* [Лекция 12. Адаптивная верстка. PWA. Tauri](lectures/Lecture_12_PWA.pdf)

* [Лекция 13. Брокер, очереди, gRPC. WebSocket, Polling](lectures/Lecture_13_Async.pdf)

* [Лекция 14. Нативные приложения. iOS vs Android](lectures/Lecture_14_Mobile.pdf)

* Лекция 15. Резерв

### Темы 2026:

Индивидуальные темы лабораторных 2026 года описаны в [файле](/topics.md)

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

У каждого своя предметная область на весь курс: бронирование отелей, билетов в театр/кинотеатр, онлайн-магазин по вариантам, тему выбирать из списка ниже. По каждой теме есть ключевой процесс, в котором `пользователь` оформляет `заявки`, в которой может быть несколько `услуг`. Также есть `модератор`, который может редактировать список `услуг` и одобрять `заявки`. От предметной области зависят: названия ролей пользователей, названия сущностей `услуг` и `заявок`, список полей для них, возможные статусы и изменяемые в них поля. В `нативном приложении` нужно реализовать интерфейс `гостя` - только просмотр `услуг`.

У каждого студента практически одинаковое задание на весь семестр. Но оно должно быть модифицировано под вашу тему:
* добавить 4-6 полей по теме в 3 таблицы
* весь код переписать по теме, только у вас будут такие названия таблиц, страниц и тд. Никаких общих text, search, order, cart, basket, service и т.д. Это должны быть `airplane`, `document`, `software_request`, `shipName`, `softwarePrice` и тд.
* ваши цвета и ваши данные

Каждая лабораторная - это `sprint`, этап разработки по `agile`, под каждую отдельная именованная по теме ветка в `git`. Два обязательных репозитория у всех (бекенд и фронтенд) и еще два для дополнительных заданий ДЗ (мобильное приложение и асинхронный сервис). Каждая работа демонстрируется и защищается отдельно. При защите необходимо продемонстрировать по вашей теме: 
* работу всех программ этой лабораторной
* документацию (UML диаграмму из `StarUML`(`draw.io`)/`figma` + 1 модуль ТЗ, 2 модуль - РПЗ). Все диаграммы делать в 1 файле `StarUML`
* отдельную ветку в `github` с кодом
* подготовить скриншоты в соответствии с `Порядоком показа`
* показать конспекты всех прошедших лекций
* перед показом письменно ответить на `Контрольные вопросы`
* Все исправления по предыдущим лабораторным вы обязательно исправляете и показываете вместе с новой. Нужно сделать файл `.doc`, в котором каждое замечание из таблицы должно быть прокомментировано текстом и должен быть скриншот на котором видно что вы его исправили

Основной вариант лабораторных по бэкенду - это `NestJS` и `Go` (`Django` использовать запрещается). Но можно самостоятельно изучить и выполнять их на `Java`, `C#`, `Rust` и `Node.js`, но только при согласовании с лектором и при выполнении всех условий лабораторных работ. В этом случае обязательно требуется согласовать веб-фреймворк, шаблонизатор, ORM и способ авторизации. При развертывании выбирается один из двух вариантов: все три хранилища `PostgreSQL`, `Minio`, `Redis` разворачиваются через `docker`; либо вся серверная часть развернута в виртуальной машине `Ubuntu 22.04`. Для фронтенда один стек `React`+`Redux`+`axios`+`React-Bootstrap`.

* [Демо версия](https://iu5git.github.io/Web/) интерфейса создателя заявки
* [Примеры](/reports/) документации - РПЗ. 
* [Примеры](/tutorials/homework) UML и ER диаграмм. Видео мастер-классов по UML [ER и структура системы](https://vk.com/video-211704031_456239172) и [Бизнес процесс, развертывание и запросы](https://vk.com/video-211704031_456239171)
* [Установка](/tutorials/install/README.md) `Python`, `NodeJS`, `Git`, `Docker` на Windows, MacOS, Linux
* [Основные команды git и описание Docker Compose](/tutorials/git-docker/). Подробные мастер-классы по [основам Git](https://devops.science.iu5.bmstu.ru/gitcicd/git/lectures/gitcicd/git/) и [основам Docker](https://devops.science.iu5.bmstu.ru/docker/containers/intro/)
* Образ виртуальной машины Linux [Ubuntu 22.04](https://github.com/iu5git/Standards/blob/main/Linux/Linux.md) для компьютеров с ограниченной оперативной памятью

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

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

- **Цель работы**: выбор варианта-темы на весь курс, знакомство с разработкой бэкенда и разработка дизайна для 3 страниц
- **Порядок показа**: Показать задание по вашей теме-варианту из списка внизу. Показать дизайн 3 страниц в Figma, показать что в приложении тоже самое. Показать сайт, откуда копировали дизайн, сказать, что скопировано и в CSS это перечислить. Показать три страницы приложения с поиском, при этом во вкладке `Network` для 3 запросов `GET` объяснить `url`: показать параметр фильтрации/поиска, а также id `заявки` и `услуг`. Для страницы списка `услуг` показать в HTML из `Response`: ид заявки, количество в корзине, `url` изображений и видео из `Minio`. В коде показать где эти `url` в коллекции `услуг`, показать словарь `заявка`, а также их использование в 3 шаблонах. Показать роутинг: 3 url и три контроллера для них, объяснить реализацию фильтрации/поиска.
- **Контрольные вопросы**: MVT, компоненты MVC в лабораторной, шаблонизация, HTTP и модель OSI, Web, HTML
- **Задание**: создание дизайна приложения в `figma`, базовая шаблонизация для `услуг`, развертывание `Minio`

Требуется разработать дизайн трех страниц приложения в `figma`, повторив при этом основную стилистику уже существующего популярного ресурса (3 цвета с точными кодами, hoover, форму карточек), связанного с вашей темой. Данные по теме также нужно искать реальные.

Создание базового интерфейса, состоящего из трех страниц. Первая для просмотра списка `услуг` (отели, товары, рейсы и тд) в виде карточек (плиткой в 2-4 столбца) с наименованием, ценой (датой рейса, мощностью устройства и т.д.) и картинкой, а также отдельным элементом-карточкой текущей `заявки` (корзина) с указанием количества `услуг` в ней. Это количество вычисляется в контроллере-обработчике. При клике по карточке происходит переход на вторую страницу с подробной информацией об `услуге` (даты, описание и тд), эту страницу сверстать в портретном режиме как `Vibes`, добавить короткое видео, которое автоматически проигрывается на странице. А при нажатии на текущую `заявку` по ее id открывается страница просмотра состава `заявки`, в которой есть поля самой `заявки`, каждая ее `услуга` отображается ниже отдельной карточкой друг под другом, поля `услуги` вывести слева направо в 1 строку и справа для каждой из них поле `м-м` (количества/порядка/главный/комментарий/другое), которое в последующих лабораторных сможет менять `пользователь`. Также в `заявке` или в еще одном поле `м-м` должно быть поле результата вычислений (пока указано готовое значение).

В `header` приложения добавить только кнопку/иконку `Домой`, она для навигации на страницу `услуг`. Добавить поле input для фильтрации на сервере списка `услуг` по одному из полей (наименование, цена, дата события), отображаемых на странице (по умолчанию отображать все). Поле поиска должно сохраняться после запроса. Всего в приложении должно быть 3 GET запроса и две модели-коллекции. Все данные для обеих страниц нужно брать прямо из двух коллекций (массива услуг и словаря заявки), без использования БД. Никаких массивов внутри отдельной `услуги` (соблюдать атомарность и 1НФ), но можно и нужно писать большие текстовые описания. Никакого редактирования, только поиск и просмотр. Без `JavaScript`

В приложении должны быть использованы стили, для каждого элемента списка подгружается свое изображение. Изображения `услуг` отображатся на всех трех страницах. Изображения и видео хранятся в `Minio`, наименование изображения и видео указано ключом на латинице, хранятся в модели двумя отдельными полями. Разработать стиль приложения, который будет применяться далее в последующих лабораторных по фронтенду. `CSS` вынести в отдельный файл.

* [Методические указания](/tutorials/lab1-design/README.md) по верстке и дизайну Figma [arabic Figma](/tutorials/lab1-design/arabic.md). [Видеоуроки](https://www.youtube.com/watch?v=DWicd2qo2pk) по Figma
* [Методические указания Golang](/tutorials/lab1-go/README.md)
* [Методические указания NestJS](/tutorials/lab1-nest/README.md)
* [Методические указания FastAPI](/tutorials/lab1-fastapi/FastAPI_ReadME.md)
* [Установка и администрирование Minio](/tutorials/minio/MinIO_bucket_setup_ReadMe.md)

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

- **Цель работы**: разработка структуры базы данных и ее подключение к бэкенду 
- **Порядок показа**: показать формулу для расчета результата, показать панель администратора `adminer`, в которой добавить новую `услугу`, посмотреть данные через `select` в БД. Показать 3 страницы приложения: выполнить поиск, удалить заявку, перейти по `url` удаленной `заявки`, добавить две услуги в заявку (изменение карточки корзины), содержимое заявки. Показать в БД запросом результаты логического удаления и новую заявку. В БД изменить поля по теме в `заявке` и `м-м` и показать их в приложении. В коде показать модели, составной уникальный ключ м-м, 4 контроллера через `ORM`, а удаление заявки через `SQL UPDATE`.
- **Контрольные вопросы**: виды БД, SQL запросы, курсоры, ORM, модель и миграции, чистая архитектура
- **ER диаграмма**: сделать в StarUML; таблицы, связи, столбцы, типы столбцов и их длина, первичные, внешние ключи
- **Задание**: Создание базы данных `PostgreSQL` по теме работы, подключение БД к созданным трем шаблонам

Необходимо разработать структуру БД по выбранной теме и ее реализовать с учетом требований ниже. Использовать таблицу `услуг` в страницах разработанного приложения. Наполнить таблицы БД данными через `Adminer`.

Получение и поиск `услуг`, добавление `услуги` в текущую `заявку` (статус черновик она же "корзина"), а также просмотр этой `заявки` сделать через `ORM`. Для страницы текущей `заявки` добавить кнопку логического удаления `заявки` (статус меняется на удален) с помощью выполнения SQL запроса `UPDATE`, без ORM. Всего пять HTTP методов: три GET и один POST добавления в заявку через `ORM`, еще один POST для удаления заявки через SQL.

При отстутствии `заявки` в статусе черновик у пользователя, она создается только при добавлении `услуги` в `заявку`. Если такая `заявка` уже есть, то `услуга` добавляется сразу в нее. Удаленные заявки просматривать нельзя, если у пользователя нет текущей `заявки`, ее карточка на странице услуг не активна.

**Требования к БД**:

Обязательно наличие 4 таблиц (каскадное удаление запрещено!): 
* `услуг` (наименование, описание, статус удален/действует, url к изображению `Nullable`, поля по предметной области)
* `заявок` (только 4 поля `NotNull`: id, статус, дата создания datetime, `создатель`; дата формирования (2 действия `создателя`) datetime, дата завершения (2 действия `модератора`) datetime и `модератор`, поля по предметной области). 
* `м-м заявки-услуги` (составной уникальный ключ, дополнительные поля количества/порядка/главный/другое)
* `пользователей`

Обязательно наличие 5 или более статусов `заявок`: черновик, удалён, сформирован, завершён, отклонён. У каждого пользователя не более одной заявки в статусе `черновик`. Названия таблиц и их полей должны соответствовать предметной области. Одно из доп. полей `заявки` или `м-м` рассчитывается при завершении заявки.

* [Установка в Docker и использование](/tutorials/lab2-db/README.md) PostgreSQL. [Лабораторные](https://github.com/iu5git/Database) по PostgreSQL, индексы, Tauri, чат-бот
* [Методические указания Golang](/tutorials/lab2-go/README.md). Видео мастер-класс [gORM и шаблоны Golang](https://vk.com/video-211704031_456239173)
* [Методические указания NestJS](/tutorials/lab2-nest/README.md)
* [Методические указания FastAPI](/tutorials/lab2-fastapi/README.md)

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

- **Цель работы**: создание веб-сервиса в бэкенде нашей системы для использования его в `SPA`
- **Порядок показа**: Через `insomnia`/`postman` показать коллекцию 16 запросов, выполнить GET списка `заявок` (отфильтровать по дате формирования и статусу), GET иконки корзины, удалить введенную `заявку` (если есть), выполнить GET списка `услуг` (с фильтром), добавить новую `услугу` с картинкой и видео, добавить `услугу` в `заявку`, добавить другую `услугу` в `заявку`, GET иконки корзины, посмотреть `заявку` (из 2 услуг), изменить `поле м-м`, изменить заявку, завершить введенную `заявку` (показать ошибку), сформировать `заявку` (вычисление стоимости/доставки/другое), завершить сформированную заявку, зарегистрировать нового пользователя. Показать измененные данные через `select`, объяснить модели, сериализаторы. Показать функцию-`singleton` где пользователь указан константой и использование этой функции в методах.
- **Контрольные вопросы**: веб-сервис, REST, RPC, заголовки и методы HTTP, версии HTTP, HTTPS, OSI ISO
- **Диаграмма классов** с детализацией бэкенда (домены методов по `url` с интерфейсами, перечислить все методы, модели, таблицы БД) + insomnia/postman. Связи у моделей сделать по коду: возможны 3 варианта (методы используют разные модели, модели используют другие модели, модели используют несколько таблиц) - поэтому опишите вашу реализацию
- **Задание**: Создание веб-сервиса со всей итоговой бизнес логикой (кроме авторизации), подключение его к БД и тестирование в `insomnia`/`postman`

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

**Требования к веб-сервису**

Методы и `url` в `API` должны соответствовать `REST`. Для списка `услуг` (как в 1 лабораторной) и `заявок` (по статусу и диапазону даты формирования) нужно предусмотреть фильтрацию на бэкенде. Взаимодействие с БД через `ORM`. Не делать `POST` `заявки`. Записи в статусе `удален` на клиент не передаются.

Статусы нельзя менять с любого на любой: `создатель` удаляет и формирует черновик заявки, а `модератор` отклоняет и завершает сформированную заявку. В данной лабораторной пользователь `создатель` зафиксирован во всех методах - укажите его константой через функцию-`singleton`. Системные поля (ид, статусы, создатель и модератор, даты создания, формирования и завершения) передавать с клиента для изменения запрещено. Они вычисляются на бэкенде через авторизацию и бизнес-логику. В начале адреса каждого метода добавьте `/api`

**Домен услуги:**
- GET список с фильтрацией
- GET одна запись 
- POST добавление + добавление файлов изображения и короткого видео, название файлов сохраняются в полях БД, а сами файлы в `minio`. Названия файлов генерируются на латинице

**Домен м-м:**
- DELETE удаление из заявки (без `PK м-м`)
- PUT изменение количества/порядка/значения в м-м (`без PK м-м`)
- POST добавления в заявку-черновик. `Заявка` создается пустой, указывается автоматически `создатель`, дата создания и статус, остальные поля указываются через `PUT` или смену статуса

**Домен заявки:**
- GET иконки корзины (без входных параметров, ид заявки вычисляется). Возвращается id заявки-черновика этого пользователя и количество `услуг` в этой `заявке`
- GET список (кроме `удаленных` и `черновика`, поля модератора и создателя через логины) с фильтрацией по диапазону `даты формирования` и статусу. В этом списке выводится `результат` или если результат в м-м, то нужно добавить вычисляемое поле, которое равно количеству записей м-м, в которых рассчитываемое поле результата не пустое (см `лаб. 8`)
- GET одна запись (поля `заявки` + ее `услуги`). При получении `заявки` возвращется список ее услуг с картинками
- PUT изменения полей заявки по теме
- PUT сформировать создателем (дата формирования). Происходит проверка на обязательные поля. Одно из доп. полей `заявки` или `м-м` рассчитывается (реализовать формулу представленную в лаб-2) при формировании заявки (вычисление стоимости заказа, даты доставки в течении месяца, вычисления в м-м).
- PUT завершить/отклонить модератором. При завершить/отклонении заявки проставляется `модератор` и дата завершения. 
- DELETE удаление (дата формирования)

**Домен пользователь:**
- POST регистрация
- POST аутентификация (заглушка для 4ой лабораторной)
- POST деавторизация (заглушка для 4ой лабораторной)

* [Методические указания Golang](/tutorials/lab3-go/README.md)
* [Методические указания NestJS](/tutorials/lab3-nest/README.md)

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

- **Цель работы**: Завершение бэкенда для `SPA`
- **Порядок показа**: выполнить метод аутентификации через `swagger` в режиме инкогнито, получить список заявок в `swagger`; из браузера использовать содержимое `куки` из вкладки `Application` или `JWT` из ответа аутентификации для заголовков `cookie` или `authorization` соответственно в остальных запросах через `insomnia`/`postman`. Далее в `insomnia`/`postman` выполнить GET списка заявок: 401/403 для гостя, для создателя только его заявки. Выполнить PUT завершения заявки: для создателя 403 статус, для модератора успех и обновление полей. Выполнить GET списка заявок - для модератора все заявки. Показать содержимое `Redis` через `cmd`, для сессий показать пользователя. В `StarUML` свойство `signature` у сообщений переиспользовано из диаграммы классов. Сделать скриншоты всех изменений в ТЗ по 2026 году.
- **Контрольные вопросы**: куки, сессия, Redis, JWT, авторизация и аутентификация, SSO, двухфакторная аутентификаци, RSA
- **Sequence диаграмма**: весь набор `HTTP` запросов по бизнес-процессу без БД и нативного приложения: аутентификация, список услуг, GET пустой иконки корзины, добавление услуги в заявку, GET иконки корзины, просмотр черновой заявки, редактирование заявки, формирование заявки, список заявок, завершение модератором из второго фронтенда, список заявок с расчетом. Добавить домены в качестве `Lifeline`, при добавлении сообщений выбирать методы доменов из диаграммы классов, передавать ключевые входные и выходные данные через `arguments` в скобках у `Message`
- **Задание**: Добавление авторизации и `swagger` в веб-сервис, подготовка ТЗ

Реализовать методы бэкенда для `аутентификации` и `регистрации`. Авторизация через хранение сессий и куки для `NestJS`, а для `Golang` соответственно `JWT` и `blacklist`. Автозаполнение пользователя в таблице `заявок` при создании новой. Добавить описание методов для `swagger`.

Добавить проверку `Permissions` для методов `модератора`. Без авторизации в `Swagger` должно быть доступно только чтение-получение данных через API, с авторизацией - методы `пользователя`, а для `модератора` доступны все методы.

* [Методические указания](/tutorials/redis/README.md) Redis
* [Методические указания Golang JWT](/tutorials/lab4-go/README.md). Видео мастер-класс [Авторизация, Swagger и Redis на Golang](https://vk.com/video-211704031_456239169)
* [Методические указания NestJS](/tutorials/lab4-nest/README.md)

Вместе с 4 лабораторной сдается текущий комплект документации, который требуется оформить в виде `.doc`:
- титульный лист РПЗ
- 3 диаграммы оформить как рисунки в РПЗ
- на 1 листе расчет аппаратных требований (число ядер, ОП, на 1 ядро по 4 ГБ ОП) по количеству пользователей и `rps`, а также требуемый размер жесткого диска с учетом прироста БД за 5 лет. Для расчета `rps` нужно взять количество `заявок` за день у одного пользователя, определить сколько HTTP `запросов` нужно выполнить для одной заявки, поделить на рабочее время пользователей. Для прироста БД описать в байта все поля таблиц `заявки` и `м-м`. Расчет оформить формулами, в них укащать ваши данные, а не общие переменные. 
- Приложение 1. ТЗ как приложение к РПЗ
- Приложение 2. Таблица методы веб-сервиса

Состав **ТЗ** на итоговую систему (использовать сплошную нумерацию внутри пунктов):
1. **цель**
2. **назначение** - краткое описание для чего, кто работает в системе
3. **задачи** - 12 задач (8 лабораторных-задач по бекенду/фронтенду, нативное приложение, демо в Pages, документация, репозиторий Git) с указанием ваших технологий по каждой задаче
4. **Функциональные требования** - список HTTP методов, далее список окон и какие действия для каких групп пользователей доступны. Указать, какие методы бэкенда при этом вызываются. Всего 8 подпунктов - HTTP методы, меню и 6 страниц приложения:

* `гость`: регистрация, аутентификация, список услуг, одна услуга

* `создатель` заявки: страница заявки, список заявок

* `модератор`: дополнительные функции для страницы `список заявок`

5. **требования к аппаратному** обеспечению для сервера и клиента
6. **требования к программному** обеспечению с версиями для серверных компонентов и для клиента

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

- **Цель работы**: Разработка базового SPA на React
- **Порядок показа**: Показать три страницы фронтенда с `mock`. Показать реализацию изображения по-умолчанию. Объяснить код компонентов для фильтрации, передаваемые props, все используемые хуки.
- **Контрольные вопросы**: react, props и состояние, компонент и элемент, useState и useEffect, жизненный цикл компонента, Vite и Babel
- **Диаграмма классов** с детализацией бэкенда и фронтенда: домены с методами, но без моделей и БД, фронтенд разделить на страницы (все страницы а не только 3), добавить у страниц зависимость от API.
- **Задание**: Разработать три страницы фронтенд приложения на `React`, `TS` и подключить его к веб-сервису

Разработать базовый интерфейс приложения на `React` для `гостя`, аналогичный двум страницам из лабораторной работы №1 для просмотра `услуг`. При этом на странице списка `услуг` должны быть необходимые фильтры (по дате, названию или цене). Использовать компоненты `React-Bootstrap`. Для карточек предусмотреть изображение по-умолчанию, если поле в `услуге` пустое. Содержимое карточек получать только из коллекции с `mock`-объектами без бэкенда. На странице `списка услуг` отображается `иконка корзины`.

В приложении должны быть навигационная панель `navbar` для списка базовых страниц, а также самописная навигационная цепочка `breadcrumbs`, где отображается путь от базовой страницы к текущей. В этой лабораторной никакого `Redux`, а `Context` вообще в курсе использовать нельзя.

* [Методические указания](/tutorials/lab5/README.md). Видео мастер-класс [Создание приложения на React](https://vkvideo.ru/video-211704031_456239220)

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

- **Цель работы**: Подключение бэкенда и добавление модели CLIP
- **Порядок показа**: Показать сначала три страницы фронтенда с `mock` без запущенного сервиса, а затем показать страницы фронтенда с бэкендом, показать в `network` адрес `fetch` через `proxy`, названия и адреса из `minio` для изображений. Внести изменения в БД, показать их во фронтенде. Объяснить вызовы fetch.
- **Контрольные вопросы**: CORS и обратный прокси, BFF и GraphQL, Next.js и SSG, FSD
- **Задание**: необходимо для 3 запросов GET для двух страниц приложения и реализовать мультимодальный поиск через CLIP

Содержимое карточек получать из вашего веб-сервиса. Ajax-запросы написать самостоятельно через `fetch`. Ограничение с `CORS` решить через проксирование `React`. В методах `fetch` предусмотреть получение данных из коллекции с `mock`-объектами при отсутствии доступа к вашему бэкенду. Фильтры (по дате, названию или цене в зависимости от вашей темы как в 1 и 3 лабораторных) также добавлять в запрос к бэкенду. Должны быть использованы 3 запроса GET: `список услуг` с фильтрацией, `одна услуга` и `иконка корзины` (без авторизации, но ответ 200)

На странице `Список услуг` добавить возможность загрузки файла изображения для поиска и использовать его для поиска похожих карточек на основе близости эмбеддингов `описаний на английском` (краткие описания в 50-100 символов строго на английском), для вычисления эмбеддингов использовать `transformer.js`. Подобрать порог (от 0.4 до 0.9) и максимальное количество результатов (TopK)

* [Методические указания CLIP](/tutorials/CLIP/README.md)

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

- **Цель работы**: Завершение интерфейса `пользователя` в `React`
- **Порядок показа**: показать авторизацию, добавление в заявку и просмотр заявки `url` назван по теме, черновик открывается тоже по id, на странице есть отдельные кнопки для всех 5 методов изменения `заявки` и `м-м`. Затем формирование `заявки` в режиме разработчика, страница списка заявок с указанным диапазоном даты формирования за сегодня, обновить страницу по `F5` в состояние гостя `Redux` а в `Application` показать что `JWT`/`сессия` остались. Затем использовать содержимое `localStorage`/`cookie` из вкладки `Application` чтобы показать заявки пользователя в `insomnia`/`postman`. Показать в коде все состояния `redux` и показать `axios` в кодогенерации. Показать применение сгенерированного кода фронтенда из `swagger` в `thunk` и что они названы по теме.
- **Контрольные вопросы**: схема redux-toolkit (reducer, store, middleware), useContext, axios, local storage
- **Activity диаграмма/BPMN** для итогового бизнес-процесса для ДЗ: описание бизнес-процесса, разделение на 3 дорожки по ролям двух пользователей и выделенного сервиса (при наличии), действия соответствуют операциям пользователей в вашей системе.
- **Задание**: Добавить авторизацию и возможность оформления `заявок` во фронтенд через `Redux Toolkit` `redux-thunk`, кодогенерация взаимодействия с `API` через `Axios`

Добавить страницы для регистрации и авторизации. Добавить страницу для просмотра списка `заявок` пользователя в виде таблицы. Добавить в меню пункты для новых страниц. Добавление в `Redux Toolkit` состояния интерфейса после авторизации. В приложении должно быть реализовано переключение между интерфейсом гостя и интерфейсом пользователя по кнопке `Вход`/`Выход`. После авторизации в меню должно отображаться Имя/Логин пользователя. При выходе должно сбрасываться содержимое конструктора новой заявки, а также фильтры пользователя.

Добавление на странице услуг кнопки `Добавить` для внесения данной услуги в новую заявку. Добавление страницы `заявки`, где в статусе `черновик` можно удалить уже добавленные в заявку услуги, поменять их количество или `подтвердить` заявку. Эта же страница используется для просмотра старых заявок в других статусах, но без возможности редактирования. Переход на страницу `заявки` через специальную кнопку, которая меняет состояние: если черновик есть - кнопка доступна, а если заявки-черновика нет - кнопка отображается с другим стилем и недоступна.

Для обращений к методам веб-сервиса доменов `заявка` и `м-м` использовать `axios`, кодогенерацию и `redux-thunk middleware`. При выполнении запросов отображать на странице анимацию, блокирующую кнопки пользователя. Для запросов `услуг` и `авторизации`/`регистрации` только `axios`.

Необходимо добавить в приложение React интерфейс `модератора`, доступный после его авторизации и имеющий следующие отличия:
- В окне списка `заявок` доступны кнопки для смены статуса заявок. Также есть поля фильтрации по диапазону `даты формирования` (только даты, без времени) и статусу заявок на стороне бэкенда. Но фильтрация по `создателю` `заявки` на фронтенде.
- Окно списка `заявок` переделать на `short polling` чтобы отображать актуальные статусы.

* [Методические указания Redux Toolkit + fetch](/tutorials/redux/redux_toolkit.md)
* [Методические указания Redux Toolkit + кодогенерация и Axios](/tutorials/lab7/README.md). Видео мастер-класс [Внедрение Redux-Toolkit и кодогенерация из Swagger](https://vkvideo.ru/video-211704031_456239221)

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

- **Цель работы**: Внедрение адаптивности и развертывание приложения
- **Порядок показа**: Открыть `GitHub Pages` с mock на телефоне, сохранить PWA. Открыть PWA, применить фильтрацию услуг, перейти на Подробнее и вернуться, чтобы показать старое значение фильтра. Перейти в адаптивный режим браузера, поменять ширину. Объяснить в коде настройки для размера карточек, количества колонок и тд - показать конкретные значения размера и количества колонок, карточек. Открыть на компьютере `GitHub Pages`, продемонстрировать работу с бэкендом. Показать работу с бэкендом собранного приложения Tauri, не dev. На компьютере показать подключение  к бэкенду по IP локальной сети (не `localhost`), сравнить IP сервера из консоли и в коде приложения. Через `wireshark` или `tcpdump` найти порт вашего `Tauri` приложения. Отредактировать услуги в БД и продемонстрировать изменение в Tauri. Показать `HTTPS` в локально развернутом фронтенде.
- **Контрольные вопросы**: flux, схема redux (store, reducer, dispatch, action), виды нативных приложений (PWA, Tauri и тд), Pages
- **Deployment диаграмма** все узлы и компоненты системы: фронтенда, web-сервера со статикой, веб-сервиса, базы данных и других хранилищ и тд. Узлы соединить протоколами, компоненты фронтенда и бэкенда поместить в узлах, указать API между ними.
- **Диаграммы**: диаграмма состояний для статусов `заявок` и диаграмма прецедентов интерфейса `React`.
- **Задание**: Внедрить менеджер состояний для хранения значений фильтров, добавление адаптивности и PWA, создание Tauri и развертывание в `Pages`

Добавление менеджера состояний `Redux Toolkit` для хранения фильтра услуг. Рекомендуется использовать расширение для браузера [redux-devtools](https://chromewebstore.google.com/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd). Необходимо развернуть фронтенд на `GitHub Pages` и добавить возможность работы в режиме `PWA`. Добавить адаптивность для трех страниц приложения.

Создание простого нативного приложения на `Tauri` для интерфейса гостя (без авторизации и редактирования), состоящий из 3 страниц с фильтрацией и картинками. Подключить приложение к разработанному API через IP адрес в локальной сети (не `localhost`).

* [Адаптивный дизайн и развертывание](/tutorials/pwa/PWA.md) (GitHub Pages, PWA, HTTPS)
* [Методические указания Tauri](/tutorials/tauri/). Видео мастер-класса [Tauri 2.0](https://www.youtube.com/watch?v=yLgcUKLKkpg)
* [Short Polling](/tutorials/short-polling/README.md)

### Домашнее Задание

- **Отчет**: отчет необходимо отправить на почту [aikanev@bmstu.ru](). Оценивается раскрытие предметной области в описании и приложении, корректность оформления отчета. 
- **Порядок показа**: Сделать скриншоты всех изменений в РПЗ по 2026 году, скриншоты `TestVKR` и объема файла РПЗ.
- **Диаграммы**: Актуализировать все диаграммы из лабораторных, все диаграммы должны соответствовать реализованной вами системе. Все диаграммы должны быть читаемые, шрифт на них должен не отличаться по размеру от шрифта текста отчета.
- **Задание**: подготовить итоговый отчет, дополнительные задания

**Отчет-РПЗ** по курсу не более 5 Мб:

#### ГОСТ
ГОСТ (1.5 интервал, 1.25 см отступ, 14 пт и тд) - [Требования](https://drive.google.com/file/d/1bmQMZeqCY9WmmqQviDvA0rju7a1RgMh_/view) по оформлению. Отчет обязательно проверить через программу `TestVKR`.

#### arxiv.org
- В отчете требуется использовать в качестве двух источников по теме за 2025-2026 год `preprint` из [arxiv.org]() (просто по предметной области или про ИТ-систему но по вашей предметной области). Один из них требуется распечатать, ручкой подписать перевод важных терминов по теме (пользователи, услуги/заявки, названия полей и тд)
- В разделе `Предметная область` при использовании понятий, названий сущностей, атрибутов этих сущностей, ролей пользователей необходимо ссылаться на `arxiv.org`, указывать название по-русски и перевод в скобках. Сам перевод понятий выполнять через [wooordhunt.ru]() или переключением языка статьи этого понятия в `Википедия`.
- Необходимо в данном разделе также кратко описать цель и результаты исследования из данного `preprint`

#### Структура РПЗ
1. **Введение** (актуальность с цифрами и датами, цель, назначение, нефункциональные требования, задачи)
2. **Предметная область**. Описание предметной области на примере конкретной компании/подразделения с названиями должностей и ссылками по теме, формула расчета значения по теме. Диаграмма прецедентов, диаграмма состояний и описания бизнес-процесса с диаграммой деятельности/BPMN (>500 слов)
3. **Архитектура**. Диаграмма развертывания, ER с назначением таблиц, список таблиц в виде таблиц Word с описанием колонок, диаграмма классов с детализацией бэкенда и фронтенда (>300 слов). Расчет аппаратных требований (число ядер, ОП, прирост БД) по количеству пользователей и rps
4. **Алгоритмы**. Диаграмма последовательности HTTP запросов (>300 слов)
5. **Описание интерфейса**. Перечень окон, их назначение и выполняемые пользователями действия (>300 слов)
6. **Заключение**. Перечень выполненных задач и достигнутые результаты. Ссылки на GitHub Pages и GitHub бэкенда (в README краткое описание проекта и ссылки на Pages и другие репозитории).
7. **Список использованных источников**  Минимум 2 по теме и 5 по технологиям
8. **Приложение А. Техническое задание**
9. **Приложение А. Методы веб-сервиса** таблицей с группировкой по доменам: №, метод, url, описание, входные, выходные данные с названиями полей и типами

### Дополнительные задания ДЗ

> Внести каждое в Задачи и Заключение

#### Индексы в БД (+4 балла)

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

Добавить в БД большое количество (> 100000) `услуг` или `заявок` соответственно + реализовать пагинация на фронтенде и ограничение количества в методе бэкенда.

* [Методические указания Пагинация и индексы](/tutorials/pagination_index/README.md)
* Полезные материалы [Индексы и план запроса](https://github.com/iu5git/Database/blob/main/tutorials/lab_index.md)

#### Создание мобильного приложения (+3 балла)

- **Порядок показа**: Показывать на телефоне (не эмулятор), отредактировать услуги в БД и продемонстрировать изменение в нативном приложении, показать поиск и переход в Подробнее. В коде показать реализацию фильтрации и IP в локальной сети
- **Контрольные вопросы**: виды нативных приложений и отличие от web-приложений, react-native, pwa, tauri
- **Задание**: Создание приложения для `гостя` на iOS/Android/Qt и подключение к веб-сервису

Создание простого нативного приложения для интерфейса гостя (без авторизации и редактирования), состоящий из 2 страниц с фильтрацией и картинками. Подключить приложение к разработанному API через IP адрес в локальной сети. Доработать диаграмму развертывания.

3 варианта: 
* [Методические указания iOS (Swift UI)](/tutorials/swiftui)
* [Методические указания Android (Kotlin + Compose)](/tutorials/android-kotlin/README.md)
* Запустить `Tauri 2.0` на смартфоне `Android` и виртуальной машине `ALT Linux`

#### Межсервисное взаимодействие (+3 балла)

- **Цель работы**: Межсервисное взаимодействие, асинхронность, внедрение Real-time web 
- **Порядок показа**: вызвать через `insomnia` GET списка заявок, затем http-метод асинхронного сервиса (в `insomnia` и отдельно кнопкой в интерфейсе), показать что в GET списка заявок появился результат с задержкой, потом вызвать новый метод основного сервиса с ключом, чтобы изменить результат. 
- **Контрольные вопросы**: grpc, асинхронность, веб-сервис
- **Задание**: Создание асинхронного сервиса для отложенного действия (вычисление, моделирование, оплата и тд), одобрение заявок модератором

Необходимо разделить код, который выполняется при формировании заявки, и перенести расчет поля по предметной области в выделенный сервис. Вызов метода этого сервиса должен происходить в методе формирования заявки. Доработать диаграммы последовательности и развертывания.

Требуется разработать второй простой асинхронный сервис на другом языке (кто делал на NestJS - Go и наоборот) с одним http-методом для выполнения отложенного действия в вашей системе (вычисление, моделирование, оплата и тд). Действие выполняется с задержкой 5-10 секунд, результат сервиса вычисляется по формулам. Достаточно в результате обновить одно поле по предметной области в `заявке`/`м-м`. При создании `заявки` это поле пустое.

В исходном веб-сервисе также необходимо добавить http-метод для внесения результатов. Асинхронный сервис взаимодействует с основным через `http`, без прямого обращения в БД. Добавить псевдо авторизацию в методе основного сервиса - передавать как константу какой-нибудь ключ-токен, например на 8 байт, и через if просто проверять на совпадение это поле.

> 💡 Для тех, у кого в асинхронно заполняются поля в м-м, а не в заявке

> Необходимо добавить в GET списка заявок одно поле, которое равно количеству записей м-м, в которых рассчитываемое поле результата не пустое. Таким образом, при формировании `заявки` этот столбец будет равен 0. А когда асинхронный сервис заполнит результаты в м-м, в этом поле или сразу, или постепенно возрастет количество до количества м-м. Сами результаты можно увидеть на странице самой `заявки`.

* [Методические указания NestJS](/tutorials/async-nest/README.md)
* [Методические указания Rust](/tutorials/async-rust/README.md)
* [Методические указания Asyncio](/tutorials/asyncio/README.md)

#### Темы методических указаний для детализации (+4 балла)
- Для доп. задания. Работа с индексами и пагинацией (в бэкенде и фронтенде): NextJS,  +4 балла
- Лабораторные работы 1-4 (каждая по 8 баллов) Fast API + Jinja2 + SQLAlchemy + Alembic+ куки

### Отработка РК (назначается преподавателем)

* Требуется выполнить дополнительное задание к ДЗ `Создание мобильного приложения`, но для интерфейса `создателя заявки` с авторизацией (засчитывается и +3 балла к ДЗ).
* Требуется опубликовать бэкенд для вашего фронтенда в `firebase`. [Методические указания Firebase](/tutorials/firebase/README.md)
* Добавить таблицу `атрибутов` и вертикальную таблицу значений `атрибутов` (как м-м между `атрибутами` и `услугами`) для хранения дополнительных полей `услуги`. Добавить список наименований `атрибутов` и их значений на страницу подробнее об `услуге` только для просмотра, а также на страницу редактирования `услуги` с возможностью добавлять/удалять `атрибуты` и редактировать значения `модератором`. Отображать в нижней части страницы таблицей из двух колонок. Никаких новых страниц делать не нужно, все на страницах просмотра и редактирования услуги. При добавлении нового атрибута на одной услуге, во всех остальных он тоже появляется с пустым значением. Нужны 4 метода: добавление (1) и удаление (2) нового атрибута, получение списка (3) значений атрибутов (если значения нет, то выводить пусто для студента), редактирование (4) значения (внутри проверка, если новое значение пусто - то удаляем старое)
* Добавить новую куку с сессией гостя (не связанную с авторизацией), которая заполняется при посещении сайта и действует 20 минут с создания. При использовании на сервере проверяется ее время создания и при необходимости обновляется. Хранится в Redis. К этой сессии привязываются просмотренные `услуги`. Добавить в метод списка услуг фильтрацию по недавно просмотренным из `redis`, использовать этот метод на странице подробнее, где отображать список недавно просмотренных карточек
* Добавить новую таблица `media` c внешним ключом на таблицу `услуг`, в которой хранить ссылки не на одно изображение, а несколько файлов из `Minio` к данной услуге (фото и видео). Добавить метод удаления конкретного фото/видео по id из `media`. В странице `Подробнее` добавить `карусель`, порядок файлов расположить по id в таблице `media`. Каждое видео автоматически проигрывается при отображении. 
* Требуется выполнить дополнительное задание к ДЗ `Индексы в БД` но добавить формирование ленты наподобие `TikTok` в `Redis` для авторизованного пользователя. Лента хранится в `Redis` и формируется во время входа в приложение. Лента включает случайный набор 100 неповторяющихся карточек с порядковыми номерами для пользователя. Фото в `Minio` заменить на `видео`, которое автоматически проигрывается на странице `Подробнее` об `услуге`, на странице добавить кнопку `Далее`, по которой отображается следующая карточка. 
* Требуется добавить мультимодальный поиск в `React` в списке услуг с помощью `CLIP` по методическим указаниям 
* Для каждой услуги на странице подробнее на фронтенде формировать `QR код`, который можно отсканироват с телефона и открыть эту страницу в приложении. Локальную сеть настроить с помощью `ZeroTier`
* Реализовать иконку корзины как микрофронтенд на `svelte`. [Методические указания](/tutorials/svelte/README.md)
* Добавление агента с помощью `WebLLM` для `гостя` на строне браузера (Chrome, Яндекс, Arc) в приложение React для формирования параметров поиска на странице `Списка услуг`: необходимо подобрать промпт для LLM, с помощью которого она будет формировать `JSON` для параметров поиска из текстового запроса пользователя по теме-варианту. Этот `JSON` используется параметров в запросе к бэкенду. [Методические указания WebLLM](/tutorials/WebLLM/README.md) 
* Выполнить задание `Интерфейс модератора`

#### Интерфейс модератора

- **Порядок показа**: Показать два окна в режиме разработчика (в разных браузерах, либо в одном, но одно окно через Инкогнито) - для `пользователя` показать услуги, а для `модератора` список заявок за сегодня. Создать заявку в интерфейсе `пользователя`, сформировать и показать ее у `модератора`. Завершить `заявку`, показав результаты вычисления полей, и отредактировать список `услуг`.
- **Задание**: Реализовать интерфейс `модератора`

Необходимо добавить в приложение React интерфейс `модератора`, доступный после его авторизации и имеющий следующие отличия:
- Новое окно редактирования `услуг`, список услуг отображается таблицей. Доступно добавление новых услуг (обязательные и необязательные поля), редактирование, удаление.
- Добавить статические страницы 403 и 404

Новые `страницы` и `методы`:
* `гость`: 403 и 404
* `модератор`: список услуг таблицей, редактирование/создание услуги

**Домен услуги:**
- PUT изменение
- DELETE удаление. Удаление изображения встроено в метод удаления услуги

## Примерные вопросы к экзамену и РК
1. Перечислите основные составляющие web и опишите их.
2. Что такое HTML, CSS? Приведите примеры.
3. Опишите шаблон MVC, структуру и назначение компонентов.
4. Что такое чистая архитектура?
5. Что такое MVC фреймворк? Его назначение и возможности.
6. Что такое шаблонизация? Приведите примеры.
7. Виды баз данных. Приведите примеры и отличия.
8. Объясните назначение ORM, ее составляющие. Укажите преимущества и недостатки ORM.
9. Что такое модель и миграция?
10. Укажите группы SQL запросов, их примеры и назначение.
11. Что такое курсор? Преимущества и пример.
12. Отличие продукта и процесса. Что такое эпики и дорожная карта?
13. Доска Kanban и пользовательские истории.
14. Перечислите основные диаграммы UML и их назначение.
15. Методология разработки Agile. Состав IT команды.
16. Что такое git? Опишите схему работы с ветками GitHub.
17. Опишите протокол HTTP. Схему работы и основные понятия.
18. Опишите стек протоколов интернета TCP/IP.
19. Что такое URI? Опишите элементы URI для HTTP.
20. Протокол HTTPS, схема, назначение ключей.
21. Что такое веб-сервис? Отличие от веб-сервера.
22. Что такое Web API? Назначение и применение.
23. Микросервисная архитектура. Отличия от монолитной архитектуры.
24. Перечислите требования REST, опишите их.
25. Что такое RPC? Варианты RPC и их отличия.
26. Назначение JSON и XML. Примеры и отличия.
27. Что такое Redis? Его назначение и варианты применения.
28. Опишите схему авторизации с помощью JWT.
29. Опишите схему авторизации с помощью сессий.
30. Что такое авторизация и аутентификация? Укажите варианты авторизации и их отличия.
31. Что такое Swagger? Назначение и использование.
32. Что такое алгоритм RSA? Опишите работу алгоритма.
33. Двухфакторная аутентификация
34. Что такое SSO? Схема работы.
35. Протокол OAuth. Схема работы.
36. Что такое React, схема работы виртуального DOM?
37. Что такое компонент, его состояния и свойства.
38. JSX что это? Пример и особенности.
39. Структура React проекта. Назначение Babel и Vite.
40. Жизненный цикл React компонента.
41. Назначение хуков useState и useEffect.
42. Что такое Cors? Укажите варианты решения.
43. Что такое WebLLM?
44. Отличия GraphQL, API Gateway.
45. Архитектура FSD, преимущества, назначение составляющих архитектуры.
46. Назначение хуков useContext и useReducer.
47. Опишите схему работы менеджера состояний Redux с примерами кода.
48. Какие параметры передаются при создании Store? Их примеры и назначение.
49. Что такое Redux Thunk, пример кода, схема.
50. Что такое AJAX? Схема работы и назначение.
51. Перечислите отличия Axios от fetch. Приведите примеры.
52. Опишите генерацию JS-кода взаимодействия с API на основе описания Swagger. 
53. Опишите этапы подхода DevOps. Назначение GitHub Pages.
54. Что такое pwa? Отличия от других вариантов приложений.
55. Назначение фреймворков Electron и Tauri. Их отличия.
56. Отличия мобильных и веб-приложений. Языки и технологии для разработки мобильных приложений.
57. Плюсы и минусы разработки на React Native.
58. Опишите плюсы и минусы реализации асинхронности и пути их преодоления.
59. Что такое Web реального времени? Что такое WebSocket?
60. Что такое DMZ? Опишите на примере системы разделение ее компонентов на подсети.

#### Темы индивидуальных заданий  (назначается преподавателем)

> кому на ОТЛ не хватило дополнительных заданий, +4 балла

1. Автоматическое тестирование вашего сервиса через Python - автотесты методов API
3. Полноценное нативное приложение - интерфейс модератора или клиента с авторизацией 
4. Заказ без авторизации через redis
5. Черновик-заявки через redux и 5 запросов-событий которые меняют это состояние: одобрение, удаление заявки, добавление в заявку, авторизация и деавторизация
7. Ролевая модель через несколько кастомных таблиц
8. Список услуг кешировать в redis
9. Сделать дашборд со статистикой заявок по месяцам и прирост новых услуг/заявок/клиентов
11. Атрибуты услуги через вертикальную таблицу атрибутов: список атрибутов в отдельной таблице, а значения через вторую м-м 
12. Запрос прав модератора при регистрации и окно подтверждения запросов в отдельной странице у модераторов.

### Дополнительные материалы
* [GraphQL](/tutorials/graphQL/README.md)
* [QR Code Django/React](/tutorials/qr/README.md)
* [Методические указания React Native + Redux Toolkit](/tutorials/react-native/react_native.md). Видео мастер-класс [React Native](https://vk.com/video-211704031_456239166)
* [Методические указания Flutter](/tutorials/flutter/README.md)

#### Команда курса выражает благодарность всем участвовавшим за помощь в подготовке материалов для данного курса

Web

파일 탐색기

# 설치 가이드

2. Docker

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Web

파일 탐색기

# 설치 가이드

2. Docker

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README