diff --git a/README.md b/README.md index fa358c1..cc9168a 100644 --- a/README.md +++ b/README.md @@ -1,37 +1,38 @@ -# Интернет-программирование, ИС, УлГТУ, 2022-2023 +# Интернет-программирование, ИС, УлГТУ -Репозиторий для дисциплины Интернет-Программирование для кафедры ИС УлГТУ, 2022-2023 учебный год. +Репозиторий для дисциплины Интернет-Программирование для кафедры ИС УлГТУ, направление 09.03.03 Прикладная информатика (Авторизация бизнес-решений). ## Правила оформления и сдачи лабораторных работ 1. Лабораторные работы выполняются в аудитории или дистанционно. 2. Посещать лабораторные занятия обязательно только для сдачи работ. -3. Лабораторная работа считается завершённой, если в [таблице с прогрессом](https://files.ulstu.ru/s/WidAoc9F8BwinRc) есть об этом отметка. +3. Лабораторная работа считается завершённой, если в [таблице с прогрессом в LMS](https://lms.ulstu.ru/course/view.php?id=2028) есть об этом отметка. 4. Для выполнения п.3 необходимо показать преподавателю выполненное задание во время лабораторного занятия. 5. Во время защиты лабораторной работы преподаватель может спрашивать или просить что-то исправить по теме Вашей работы. -6. Иных отчётов помимо Вашего кода или других артефактов, необходимых для выполнения задания, предоставлять не надо. +6. Если необходимо оформить отчёт о выполнении лабораторной работы, об этом будет написано дополнительно. 7. Крайне не рекомендуется затягивать с выполнением лабораторных работ, т.к. их выполнение и защита должны быть последовательны. ## Лабораторные работы Обязательные лабораторные работы: -* [Лабораторная работа №1 - Создание макета сайта (Figma)](/lw01/README.md) -* [Лабораторная работа №2 - Вёрстка сайта (HTML, CSS)](/lw02/README.md) -* [Лабораторная работа №3 - Динамика сайта (JavaScript)](/lw03/README.md) -* [Лабораторная работа №4 - Разворачивание локального веб-сервера (PHP)](/lw04/README.md) -* [Лабораторная работа №5 - Создание веб-приложения при помощи ASP.NET Core](/lw05/README.md) +- [Лабораторная работа №1 - Создание макета сайта (Figma)](/lw01/README.md) +- [Лабораторная работа №2 - Вёрстка сайта (HTML, CSS)](/lw02/README.md) +- [Лабораторная работа №3 - Динамика сайта (JavaScript)](/lw03/README.md) +- [Лабораторная работа №4 - Разворачивание локального веб-сервера (PHP)](/lw04/README.md) +- [Лабораторная работа №5 - Создание веб-приложения при помощи ASP.NET Core](/lw05/README.md) Лабораторные работы на выбор: -* [Лабораторная работа №F1 - Одностраничное приложение (React)](/lwF1/README.md) -* [Лабораторная работа №F2 - Получение данных через API (Fetch)](/lwF2/README.md) -* [Лабораторная работа №B1 - Изучение шаблона проектирования MVC](/lwB1/README.md) -* [Лабораторная работа №B2 - Разработка чат-бота для Telegram](/lwB2/README.md) +- [Лабораторная работа №F1 - Одностраничное приложение (React)](/lwF1/README.md) +- [Лабораторная работа №F2 - Получение данных через API (Fetch)](/lwF2/README.md) +- [Лабораторная работа №B1 - Изучение шаблона проектирования MVC](/lwB1/README.md) +- [Лабораторная работа №B2 - Разработка чат-бота для Telegram](/lwB2/README.md) ## Правила допуска до экзамена Так как у ИСЭ дисциплина идёт всего 1 семестр, то в нём есть элементы как frontend, так и backend. Соответственно, и экзамен один, в котором два вопроса: на каждый раздел по одному. -Для допуска к экзамену надо защитить все обязательные работы и любую из необязательных на выбор. +Для допуска к экзамену надо защитить все обязательные работы и две их необязательных на выбор. +В сумме 8, что соответствует учебному плану. diff --git a/lw01/README.md b/lw01/README.md index 13d51e9..f3cc0d7 100644 --- a/lw01/README.md +++ b/lw01/README.md @@ -7,14 +7,14 @@ ## Ход выполнения работы 1. Выбрать тематику своего будущего сайта. -2. Зарегистрироваться в Figma или аналоге. +2. Зарегистрироваться в Figma или аналоге (например, Lunacy). 3. Создать макет сайта согласно требованиям. ## Выбор тематики будущего веб-сайта В рамках данного курса вам необходимо будет создать небольшое веб-приложение. -> Разработка таких приложений обычно делятся на 2 части: разработка frontend и backend. +> Разработка таких приложений обычно делятся на 2 части: разработка presentation layer (frontend) и business logic layer (backend). > > Frontend - это то, как веб-приложение (или веб-сайт) выглядит для пользователя. > То есть визуальные стили, шаблоны страниц и т.д. @@ -64,26 +64,26 @@ К сожалению, приложение работает только на английском языке. Однако, оно запускается прямо в браузере (в отличие от того же Adobe XD, который работает только под mac или windows и стал платным). -> В качестве альтернативы можете использовать Gimp, Adobe XD, Adobe Photoshop. +> В качестве альтернативы можете использовать Lunacy, Sketch, Gimp. ## Требования к макету -1. Два frame: для desktop и для мобильного устройства (например, iPhone 14). -2. На макете должны быть следующие блоки: - - Блок с ссылками. Например, шапка сайта. - Ссылки можно оформить в виде текста с подчёркиванием. - - Блок с компонентами. - На каждом компоненте можно использовать svg-иконку. - Компоненты необходимо расположить в несколько столбцов для desktop-версии. - - Блок с таблицей. - Для мобильной версии можно добавить горизонтальную прокрутку. - - Блок с формой. - Элементы формы для desktop-версии можно расположить в несколько столбцов. - Для мобильной - в один. -3. Обязательно черновик должен быть переименован в формат `Фамилия Имя, группа`. +1. Вы можете сделать либо многостраничный сайт, либо одностраничный (его ещё называются landing-page). +2. Для каждой страницы необходимо создать два frame: для desktop и для мобильного устройства (например, iPhone 14). +3. На макете на любой странице должны быть следующие блоки: -## Сдача лабораторной работы +- Блок с ссылками. Например, шапка сайта. + Ссылки можно оформить в виде текста с подчёркиванием. + Должна быть настроена интерактивность, чтобы при нажатии на ссылку пользователя переносило в нужный frame или его часть (для landing-page). +- Блок с карточками. + В каждой карточке можно использовать svg-иконку или какое-либо иное изображение, в т.ч. растровое. + Карточки необходимо расположить в несколько столбцов для desktop-версии. + В мобильной версии обычно карточки располагаются друг под другом. + Пример карточек: блок с анонсами новостей и событий. +- Блок с формой. + Элементы формы для desktop-версии можно расположить в несколько столбцов. + Для мобильной - в один. + Не забудьте кнопку отправки формы! + Пример формы: обратная связь, подписка на новости, форма входа в систему. -Для очной защиты достаточно показать работающий макет преподавателю. - -В случае дистанционной сдачи л/р необходимо скинуть ссылку на макет (проверьте её в режиме инкогнито / приватного окна) в [эту форму](https://forms.yandex.ru/u/63eef4a8d046880f47ffe776/) и написать об этом в [чате telegram](https://t.me/+MGRd5PxIoV83NTgy). +4. Обязательно файл с Вашим макетом должен быть переименован в формат `Фамилия Имя, группа`. diff --git a/lw02/README.md b/lw02/README.md index be57c8e..966603e 100644 --- a/lw02/README.md +++ b/lw02/README.md @@ -46,13 +46,51 @@ ## Создание документа HTML -На основании макета, выполненного в рамках лабораторной работы №1, необходимо добавить в HTML-документ элементы. +На основании макета, выполненного в рамках [лабораторной работы №1](../lw02/README.md), необходимо добавить в HTML-документ элементы. Главный документ должен иметь название `index.html`. Если макетом планируется создание нескольких страниц, то они должны называться аналогичным образом на английском языке. Например, `orders.html`, `feedback.html` или `sitemap.html`. +Для landing-page все блоки страницы должны быть обёрнуты в отдельные div-контейнеры со своим идентификатором, например: + +```html +... + + +
+ +
+
+ +
+
+ +
+ +... +``` + При вёрстке Вашего макета не бойтесь объединять элементы в контейнеры и присваивать им классы как общие на несколько блоков, так и индивидуальные под каждый блок. +Например: + +```html +
+
+

Заголовок новости-карточки 1

+
+
Текст новости-карточки.
+
+... +
+
+

Заголовок новости-карточки 2

+
+
Текст новости-карточки.
+
+``` Также можно сначала добавлять элементы без стилизации, а затем уже приниматься за "наведение красоты". Или же сразу добавлять стили к только что созданным элементам. @@ -94,10 +132,10 @@ body { margin-left: 1em; margin-right: 14pt; margin-bottom: 15px; - /*same as "margin: 60px 14pt 15px 1em;"*/ + /* Можно заменить просто на "margin: 60px 14pt 15px 1em;" */ padding: 10px 50px; - /*same as "padding: 10px 50px 10px 50px;"*/ + /* Можно заменить просто на "padding: 10px 50px 10px 50px;" */ font-size: 14px; font-family: "Times New Roman", serif; diff --git a/lw03/README.md b/lw03/README.md index 3c2c68f..dac9a85 100644 --- a/lw03/README.md +++ b/lw03/README.md @@ -41,7 +41,7 @@ JavaScript — слаботипизированный мультипарадиг Синтаксис JS похож на любой си-подобный язык (C / C++ / C#), однако при работе с ним особенно часто применяется асинхронный подход к обработке данных. Об этом стоит знать и помнить, если вы обмениваетесь данными с веб-сервером. -Из-за особенностей связи и реализации бекенда (кода на серверной стороне) наши запросы могут обрабатываться медленно, и на момент ожидания мы не должны блокировать работу пользователя с нашим веб-сайтом. +Из-за особенностей связи и реализации backend (кода на серверной стороне) наши запросы могут обрабатываться медленно, и на момент ожидания мы не должны блокировать работу пользователя с нашим веб-сайтом. Если в desktop-приложениях при долгих операциях можно сделать, чтобы приложение "зависло" в ожидании какого-либо запроса, то в веб-приложениях это не допустимо (да и благодаря JavaScript невозможно). Единственные случаи, когда браузер может зависнуть - это от слишком больного DOM-дерева или неправильно написанного кода на JavaScript. diff --git a/lw04/README.md b/lw04/README.md index 8e283ee..f74b20f 100644 --- a/lw04/README.md +++ b/lw04/README.md @@ -75,8 +75,6 @@ _P.S. Современные приложения на технологиях Mi Предлагаю установить среду разработки на PHP **XAMPP**: . -> Внимание! На текущий момент (март 2023) лучше устанавливать XAMPP 8 с PHP 8 внутри. - При установке не забудьте снять ненужные флажки: ![](xampp-1.png) diff --git a/lw05/README.md b/lw05/README.md index 51348f6..f03f992 100644 --- a/lw05/README.md +++ b/lw05/README.md @@ -3,16 +3,18 @@ ## Цель работы Получить навыки в создании кросс-платформенного веб-приложения в среде ASP.NET Core при помощи открытых кросс-платформенных инструментов. +Освоить принцип проектирования API REST. ## Ход работы 1. Установка Visual Studio Code. 2. Установка .NET (Core) SDK. -3. Создание простейшего веб-приложения. -4. Настройка Visual Studio Code для отладки приложения. -5. Изучение основных концепций ASP.NET Core. -6. Изменение pipeline. -7. Оформление кода и отчёта. +3. Настройка Visual Studio Code для работы с C# (.NET). +4. Создание ASP-NET-приложения через VS Code. +5. Запуск и отладка C#-приложения в VS Code. +6. Изучение основных концепций ASP.NET Core. +7. Изменение pipeline +8. Подключение Swagger Gen+UI для демонстрации ## Прочтите внимательно перед выполнением работы @@ -39,10 +41,10 @@ Visual Studio Code (VS Code) -- кросс-платформенный инстр dotnet --list-sdks ``` -Если вывод будет содержать строку наподобие `7.0.202 [C:\Program Files\dotnet\sdk]` и номер версии будет из актуальных (на апрель 2023 это 6.0, 7.0), то всё хорошо. +Если вывод будет содержать строку наподобие `8.0.202 [C:\Program Files\dotnet\sdk]` и номер версии будет из актуальных, то всё хорошо. В противном случае необходимо произвести установку. -Для этого необходимо установить .NET SDK (5.0 или 6.0) с официального сайта: . +Для этого необходимо установить .NET SDK с официального сайта: . > ASP.NET Core - это платформа для создания веб-приложений, использующих .NET. > C# - язык программирования, позволяющий работать с .NET. @@ -50,75 +52,60 @@ dotnet --list-sdks После установки SDK под свою систему и возможной перезагрузки компьютера выполните повторно команду из начала раздела. Теперь она должна выводить данные корректно. -## Создание простейшего веб-приложения +## Настройка Visual Studio Code для работы с C# (.NET) -Создавать простейшее веб-приложение на ASP.NET Core будем из консоли (командной строки). -Во-первых, это даёт вам возможность поработать с командной строкой. -Во-вторых, этот метод взаимодействия с утилитами / платформами / серверами является распространённым в профессиональной разработке и администрировании. -В-третьих, где ещё, если не в нашем курсе? :) +Для того, чтобы удобно работать в VS Code с C#, необходимо установить расширение [C# Dev Kit](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csdevkit). + +После установки расширение будет отображаться что-то наподобие следующего: + +![](vsc-extension-installed.png) + +## Создание ASP-NET-приложения через VS Code Создайте пустую папку где-нибудь на Вашем компьютере. Постарайтесь не использовать в пути до этой папки пробелы и отличные от английских букв и цифр символы. -Перейдите в папку при помощи команды `cd`. -Например, `cd d:\labworks\ip`. -Иногда в windows требуется первой командой указать букву диска, например, `d:`, а потом уже делать _change directory (cd)_. +Откройте эту папку в Visual Studio Code. +Для этого выберите пункт меню "Открыть папку" (Open Folder) со стартовой страницы или меню "Файл" (File). -После этого введите следующую команду: +Далее для создания нового C#-приложения нажмите F1. +Должна открыться строка команд по середине VC Code сверху. +В появившейся строке введите `.net new`, а затем выберите пункт ".NET: New project..." и нажмите Enter. -``` -dotnet new web -n hw-app -``` +![](net-new-project.png) -Что здесь происходит: +После этого выберите тип проекта как "ASP.NET Core Empty". -* _dotnet_ - общая команда для работы с платформой .NET (dot - это "точка" по-английски); -* _new_ - команда по созданию чего-то нового; -* _web_ - шаблон для создания простейшего веб-приложения. Есть и другие шаблоны, их можете поискать самостоятельно или с помощью команды `dotnet new`; -* _-n_ - начало аргумента _name_, то есть задание имени будущего веб-приложения; -* _hw-app_ - название будущего приложения. Можете использовать своё название. +![](net-project-type.png) -В результате выполненных шагов в вашей папке создастся ещё одна папка, в которой будет примерно следующий набор файлов: +Далее введите название проекта. +Например, `IntProgLw5`. -![](project-tree.png) +На заключительном шаге выберите каталог по умолчанию. -Если у Вас также, то значит всё хорошо. +В итоге на экране просмотра файлов в последнем блоке "Solution Explorer" должно быть видно название проекта. -## Настройка Visual Studio Code для отладки приложения +![](solution-explorer.png) -Теперь пришло время соединить предыдущие пункты. +Всё готово к первому запуску и отладке приложения! -Для этого перейдите в консоли в папку с приложением. -В примере выше это будет _d:\labworks\ip\hw-app_. -После этого наберите команду `code .`. -Это должно запустить Visual Studio Code с открытой папкой с проектом, т.е. в дереве файлов должны быть те же файлы, что и на снимке экрана выше. -Если этого не произошло, Вы можете самостоятельно открыть папку через меню _File_ -> _Open Folder_. +## Запуск и отладка C#-приложения в VS Code -Если Вы зайдёте в файл _.csproj_, VS Code снизу справа предложит установить необходимые расширения для работы с такими файлами. -Установите расширение _C#_. - -![](vsc-extension-show.png) - -![](vsc-extension-install.png) - -Возможно придётся перезагрузить VS Code. - -После этого возникнет подсказка о добавлении необходимых задач для найденного проекта на языке C#. -Можете смело их добавить. - -![](vsc-add-assets.png) - -В итоге должна создаться папка _.vscode_ с двумя файлами. - -Теперь, пока не вдаваясь в подробности кучи сгенерированного кода, зайдите в _Startup.cs_ и поставьте точку останова после `endpoints.MapGet("/",...`. +Пока не вдаваясь в подробности некоторого сгенерированного кода, зайдите в _Program.cs_, перенесите часть строки с `=> "Hello world");` на новую и поставьте точку останова в это место. ![](breakpoint-set.png) -При нажатии на F5 у Вас должен запуститься веб-сервер: в _Debug Console_ снизу будет выведено много информации. -Скорее всего у Вас одновременно с этим запустится веб-браузер с Вашим пока ещё пустым сайтом. -Если этого не произошло, можете поискать ссылку вида в выводе консоли отладки самостоятельно. +Для запуска приложения и включения режима отладки необходимо нажать `F5`. -> _localhost_ - это домен локального ПК. +VS Code может спросить, какой язык и какой проект необходимо отлаживать. +Выберите C# и стандартную конфигурацию вашего приложения. + +![](vsc-debug-run-1.png) +![](vsc-debug-run-2.png) + +В итоге должен открыться веб-браузер по ссылке или похожей. + +> _localhost_ - это домен (адрес) локального ПК. > Никто другой Ваш сайт по такому адресу не увидит. Заметьте, что выполнение программы остановилось в точке останова: @@ -132,53 +119,61 @@ dotnet new web -n hw-app Перед ознакомлением с основами ASP.NET Core, необходимо ознакомиться с основами построения веб-серверов. Как минимум надо вспомнить или узнать, что такое: протокол HTTP, запрос, ответ, тип запроса (GET, POST, PUT, ...) код ответа (200 OK, 404 NOT FOUND, 500, ...), составные части URL (схема, домен, путь, query-string, hash). -После этого можно переходить к основам ASP.NET Core, которые хорошо изложены тут: . +После этого можно переходить к основам ASP.NET Core, которые хорошо изложены тут: . Однако основные вещи изложу здесь, чтобы не заставлять вас сейчас читать столь сложный для понимания текст. ASP.NET Core, как и другие современные платформы для построения веб-приложений, использует принцип _pipeline_ - запрос от клиента (браузера) попадает в начало "конвейера", где затем каждый обработчик (практически любая функция на _C#_) может его или изменить, или пропустить без изменений, или остановить конвейер в зависимости от самого запроса. После прохождения всех обработчиков формируется ответ, который и возвращается клиенту (браузеру). +Визуально это можно изобразить так: + +``` +<запрос> <ответ> + ↑↑ ↓↓ +------------------------ +| обработчик 1 | +------------------------ + ↑↑ ↓↓ +------------------------ +| обработчик 2 | +------------------------ + ↑↑ ↓↓ +------------------------ +| обработчик 3 | +------------------------ +``` + Примеры обработчиков: -* проверка, что запрос клиентом составлен правильно; -* проверка доступа клиента к запрашиваемому ресурсу; -* если по пути из запроса найден файл на веб-сервере, то можно его вернуть; -* а если файл не найден, может какая-то подпрограмма может забрать обработку на себя? -* "Хмм, всё, что начинается с /api, отдавайте мне, остальное мне не надо"; -* отрисовка красивых страниц об ошибках (например, 404, 403, 500 и т.д.), если прошлые обработчики сказали, что запрос был плохим; -* обработчик-которые складывает с специальный файл информацию о запросах (логгер или служба/подсистема логирования). +- проверка, что запрос клиентом составлен правильно; +- проверка доступа клиента к запрашиваемому ресурсу; +- если по пути из запроса найден файл на веб-сервере, то можно его вернуть; +- а если файл не найден, может какая-то подпрограмма может забрать обработку на себя? +- "Хмм, всё, что начинается с /api, отдавайте мне, остальное мне не надо"; +- отрисовка красивых страниц об ошибках (например, 404, 403, 500 и т.д.), если прошлые обработчики сказали, что запрос был плохим; +- обработчик-которые складывает с специальный файл информацию о запросах (логгер или служба/подсистема логирования). Как видите, обработчиков бывает много, но этот конвейер где-то надо настроить. -В ASP.NET Core для этого существует класс _Startup.cs_ и метод _Configure_. -Как раз в нём настраивается порядок следования обработчиков. +В ASP.NET Core для этого существуют класс _WebApplicationBuilder_ и _WebApplication_, использование которых и можно видеть в файле _Program.cs_ нашего проекта. -В простейшем приложении порядок обработчиков такой: +В нашем простейшем приложении порядок обработчиков примерно такой: -* если окружение, в котором запускается сайт, для разработки, то надо включить обработчик по отрисовке красивых страниц с подробностями ошибок; -* необходимо включить обработчик, который сможет следить за тем, какие конкретно ресурсы запрашиваются; -* включатся обработчик по сопоставлению путей из запросов другим обработчикам; -* добавляется обработчик для _GET_-запросов по пути _/_: в ответ клиенту всегда пишется строка _"Hello World!"_. - -Можете самостоятельно поискать по коду, как описанные выше строки отображаются в исходный код на _C#_. +1. _(неявно)_ Если запрос составлен с ошибками, выводить код `400 BAD REQUEST`. +2. _(неявно)_ Если приложение выбросило исключение, вывод специальную страницу и код `500 INTERNAL SERVER ERROR`. +3. Если поступил GET-запрос на главную страницу (`/`), то выводится строка `Hello World!`. Как видите, пока ничего сложного. Далее необходимо сопоставить наше веб-приложение (по сути это набор обработчиков запросов) с конкретным веб-сервером. -Например, тем самым, что запускает ваше веб-приложение по адресу . +Например, тем самым, что запускает ваше веб-приложение по адресу . -Это делается в файле _Program.cs_ (знакомый файл?) в методе _Main_ (знакомый метод?). -Здесь у нас настраивается хост: то есть та часть приложения, которая может предоставить доступ к вашему веб-приложения из внешнего мира. -Другими словами, здесь и настраивается веб-сервер. -ASP.NET Core использует лёгкий веб-сервер _Kestrel_, о котором Вы даже можете не знать. -В этом, и в простоте настройки, и заключается его лёгкость. +А это делается в строке `app.Run();`. -Таким образом, мы выяснили, что наше приложение - это набор обработчиков. -Они настраиваются в _Startup.cs_ в специальном методе. -Веб-сервер для доступа к нашему веб-приложению настраивается в _Program.cs_. +> В рамках этого руководства не будем вдаваться в подробности того, что спрятано под этой строкой, а также под командой `WebApplication.CreateBuilder(args)` из начала файла. -Что находится в других файлах, можете изучить самостоятельно. -Дам только наводку, что launchSettings необходимы для запуска веб-сервера, а appsettings - для настройки веб-приложения. +Что находится в файлах помимо _Program.cs_, можете изучить самостоятельно. +Дам только наводку, что launchSettings необходим для запуска веб-сервера, а appsettings - для настройки веб-приложения. ## Изменение pipeline @@ -189,9 +184,48 @@ ASP.NET Core использует лёгкий веб-сервер _Kestrel_, о Предлагается сделать ещё как минимум несколько обработчиков для _GET_-запросов и проверить в браузере, как они будут работать. Например: -* При запросе _/time_ (через браузер необходимо будет перейти по адресу ) должно выводиться текущее время. -* При запросе _/whoami_ должна выводиться информация о текущем браузере. -* При запросе _/error_ должен возвращаться такой код статуса (`StatusCode`), который придёт в query-строке в параметре _status_. Если не придёт, то отдавать код статуса _200 OK_. Тогда запрос в адресной строке браузера будет выглядеть примерно как и в этом случае выводить якобы ошибку о том, что нет доступа к ресурсу. В Панели разработчика на вкладке "Сеть" должен возвращаться код из query-параметра. +- При GET-запросе _/time_ (через браузер необходимо будет перейти по адресу ) должно выводиться текущее время строкой в формате "ДД.ММ.ГГГГ ЧЧ:ММ.СС", например, "12.04.1961 09:07:00". +- При запросе _/whoami_ должна выводиться информация о текущем браузере. +- При запросе _/error_ должен возвращаться такой код статуса (`StatusCode`), который придёт из параметра обработчика `[FromQuery] int status`. Если не придёт, то отдавать код статуса _200 OK_. Тогда запрос в адресной строке браузера будет выглядеть примерно как и в этом случае выводить якобы ошибку о том, что нет доступа к ресурсу. В Панели разработчика на вкладке "Сеть" должен возвращаться код из query-параметра. Для работы с запросом пользователя для получения информации о браузере или параметрах этого запроса следует изучить использование переменной `context`, которая передаётся в обработчик. Там есть свойство `.Request`, которое должно Вам помочь. + +## Подключение Swagger Gen+UI для демонстрации + +Как проверить, что новые обработчики работают корректно? + +Для этого необходимо установить дополнительную зависимость в приложение и добавить обработчик для отображения нового интерфейса. + +Для этого в "Solution Explorer" нажмите правой кнопкой мыши на название проекта (на втором уровне вложенности!) и выберите пункт "Open In Integrated Terminal". + +В появившейся командой строке введите команду `dotnet add package Swashbuckle.AspNetCore`. + +![](swagger-installed.png) + +Далее в _Program.cs_ до построения приложения `builder.Build()` добавьте следующие строки: + +```csharp +builder.Services.AddEndpointsApiExplorer(); +builder.Services.AddSwaggerGen(); +``` + +> Этот код добавляет вспомогательные службы для обработчика-генератора контракта нашего API. + +Также до `app.Run()` добавьте следующие строки: + +```csharp +app.UseSwagger(); +app.UseSwaggerUI(); +``` + +> Этот код добавляет обработчики для возврата контакта API и интерфейс для просмотра этого контракта. + +Чтобы проверить наши обработчики, необходимо при отладке приложения в адресной строке добавить `/swagger` к адресу сайта. +Должна открыться похожая страница: + +![](swagger-test.png) + +Пример демонстрации работы query-параметра _status_ в запросе кода ошибки: + +![](swagger-error.png) diff --git a/lw05/breakpoint-catched.png b/lw05/breakpoint-catched.png index 74254c4..7f776c0 100644 Binary files a/lw05/breakpoint-catched.png and b/lw05/breakpoint-catched.png differ diff --git a/lw05/breakpoint-set.png b/lw05/breakpoint-set.png index 8a91226..37806c1 100644 Binary files a/lw05/breakpoint-set.png and b/lw05/breakpoint-set.png differ diff --git a/lw05/net-new-project.png b/lw05/net-new-project.png new file mode 100644 index 0000000..d61d27a Binary files /dev/null and b/lw05/net-new-project.png differ diff --git a/lw05/net-project-type.png b/lw05/net-project-type.png new file mode 100644 index 0000000..2235987 Binary files /dev/null and b/lw05/net-project-type.png differ diff --git a/lw05/project-tree.png b/lw05/project-tree.png deleted file mode 100644 index cc030b3..0000000 Binary files a/lw05/project-tree.png and /dev/null differ diff --git a/lw05/solution-explorer.png b/lw05/solution-explorer.png new file mode 100644 index 0000000..bf1a9a5 Binary files /dev/null and b/lw05/solution-explorer.png differ diff --git a/lw05/swagger-error.png b/lw05/swagger-error.png new file mode 100644 index 0000000..bb73b81 Binary files /dev/null and b/lw05/swagger-error.png differ diff --git a/lw05/swagger-installed.png b/lw05/swagger-installed.png new file mode 100644 index 0000000..2649e21 Binary files /dev/null and b/lw05/swagger-installed.png differ diff --git a/lw05/swagger-test.png b/lw05/swagger-test.png new file mode 100644 index 0000000..5aaa946 Binary files /dev/null and b/lw05/swagger-test.png differ diff --git a/lw05/vsc-add-assets.png b/lw05/vsc-add-assets.png deleted file mode 100644 index 6033529..0000000 Binary files a/lw05/vsc-add-assets.png and /dev/null differ diff --git a/lw05/vsc-debug-run-1.png b/lw05/vsc-debug-run-1.png new file mode 100644 index 0000000..949b6b0 Binary files /dev/null and b/lw05/vsc-debug-run-1.png differ diff --git a/lw05/vsc-debug-run-2.png b/lw05/vsc-debug-run-2.png new file mode 100644 index 0000000..762fc07 Binary files /dev/null and b/lw05/vsc-debug-run-2.png differ diff --git a/lw05/vsc-extension-install.png b/lw05/vsc-extension-install.png deleted file mode 100644 index dc8b308..0000000 Binary files a/lw05/vsc-extension-install.png and /dev/null differ diff --git a/lw05/vsc-extension-installed.png b/lw05/vsc-extension-installed.png new file mode 100644 index 0000000..fa7621a Binary files /dev/null and b/lw05/vsc-extension-installed.png differ diff --git a/lw05/vsc-extension-show.png b/lw05/vsc-extension-show.png deleted file mode 100644 index d1ed043..0000000 Binary files a/lw05/vsc-extension-show.png and /dev/null differ