Переписана л/р 5, актуализированы тексты работ 1-4

This commit is contained in:
Vladislav Moiseev 2024-04-14 23:59:09 +04:00
parent a7e62d1dc5
commit ac9c7e1ce4
21 changed files with 198 additions and 127 deletions

View File

@ -1,37 +1,38 @@
# Интернет-программирование, ИС, УлГТУ, 2022-2023 # Интернет-программирование, ИС, УлГТУ
Репозиторий для дисциплины Интернет-Программирование для кафедры ИС УлГТУ, 2022-2023 учебный год. Репозиторий для дисциплины Интернет-Программирование для кафедры ИС УлГТУ, направление 09.03.03 Прикладная информатика (Авторизация бизнес-решений).
## Правила оформления и сдачи лабораторных работ ## Правила оформления и сдачи лабораторных работ
1. Лабораторные работы выполняются в аудитории или дистанционно. 1. Лабораторные работы выполняются в аудитории или дистанционно.
2. Посещать лабораторные занятия обязательно только для сдачи работ. 2. Посещать лабораторные занятия обязательно только для сдачи работ.
3. Лабораторная работа считается завершённой, если в [таблице с прогрессом](https://files.ulstu.ru/s/WidAoc9F8BwinRc) есть об этом отметка. 3. Лабораторная работа считается завершённой, если в [таблице с прогрессом в LMS](https://lms.ulstu.ru/course/view.php?id=2028) есть об этом отметка.
4. Для выполнения п.3 необходимо показать преподавателю выполненное задание во время лабораторного занятия. 4. Для выполнения п.3 необходимо показать преподавателю выполненное задание во время лабораторного занятия.
5. Во время защиты лабораторной работы преподаватель может спрашивать или просить что-то исправить по теме Вашей работы. 5. Во время защиты лабораторной работы преподаватель может спрашивать или просить что-то исправить по теме Вашей работы.
6. Иных отчётов помимо Вашего кода или других артефактов, необходимых для выполнения задания, предоставлять не надо. 6. Если необходимо оформить отчёт о выполнении лабораторной работы, об этом будет написано дополнительно.
7. Крайне не рекомендуется затягивать с выполнением лабораторных работ, т.к. их выполнение и защита должны быть последовательны. 7. Крайне не рекомендуется затягивать с выполнением лабораторных работ, т.к. их выполнение и защита должны быть последовательны.
## Лабораторные работы ## Лабораторные работы
Обязательные лабораторные работы: Обязательные лабораторные работы:
* [Лабораторная работа №1 - Создание макета сайта (Figma)](/lw01/README.md) - [Лабораторная работа №1 - Создание макета сайта (Figma)](/lw01/README.md)
* [Лабораторная работа №2 - Вёрстка сайта (HTML, CSS)](/lw02/README.md) - [Лабораторная работа №2 - Вёрстка сайта (HTML, CSS)](/lw02/README.md)
* [Лабораторная работа №3 - Динамика сайта (JavaScript)](/lw03/README.md) - [Лабораторная работа №3 - Динамика сайта (JavaScript)](/lw03/README.md)
* [Лабораторная работа №4 - Разворачивание локального веб-сервера (PHP)](/lw04/README.md) - [Лабораторная работа №4 - Разворачивание локального веб-сервера (PHP)](/lw04/README.md)
* [Лабораторная работа №5 - Создание веб-приложения при помощи ASP.NET Core](/lw05/README.md) - [Лабораторная работа №5 - Создание веб-приложения при помощи ASP.NET Core](/lw05/README.md)
Лабораторные работы на выбор: Лабораторные работы на выбор:
* [Лабораторная работа №F1 - Одностраничное приложение (React)](/lwF1/README.md) - [Лабораторная работа №F1 - Одностраничное приложение (React)](/lwF1/README.md)
* [Лабораторная работа №F2 - Получение данных через API (Fetch)](/lwF2/README.md) - [Лабораторная работа №F2 - Получение данных через API (Fetch)](/lwF2/README.md)
* [Лабораторная работа №B1 - Изучение шаблона проектирования MVC](/lwB1/README.md) - [Лабораторная работа №B1 - Изучение шаблона проектирования MVC](/lwB1/README.md)
* [Лабораторная работа №B2 - Разработка чат-бота для Telegram](/lwB2/README.md) - [Лабораторная работа №B2 - Разработка чат-бота для Telegram](/lwB2/README.md)
## Правила допуска до экзамена ## Правила допуска до экзамена
Так как у ИСЭ дисциплина идёт всего 1 семестр, то в нём есть элементы как frontend, так и backend. Так как у ИСЭ дисциплина идёт всего 1 семестр, то в нём есть элементы как frontend, так и backend.
Соответственно, и экзамен один, в котором два вопроса: на каждый раздел по одному. Соответственно, и экзамен один, в котором два вопроса: на каждый раздел по одному.
Для допуска к экзамену надо защитить все обязательные работы и любую из необязательных на выбор. Для допуска к экзамену надо защитить все обязательные работы и две их необязательных на выбор.
В сумме 8, что соответствует учебному плану.

View File

@ -7,14 +7,14 @@
## Ход выполнения работы ## Ход выполнения работы
1. Выбрать тематику своего будущего сайта. 1. Выбрать тематику своего будущего сайта.
2. Зарегистрироваться в Figma или аналоге. 2. Зарегистрироваться в Figma или аналоге (например, Lunacy).
3. Создать макет сайта согласно требованиям. 3. Создать макет сайта согласно требованиям.
## Выбор тематики будущего веб-сайта ## Выбор тематики будущего веб-сайта
В рамках данного курса вам необходимо будет создать небольшое веб-приложение. В рамках данного курса вам необходимо будет создать небольшое веб-приложение.
> Разработка таких приложений обычно делятся на 2 части: разработка frontend и backend. > Разработка таких приложений обычно делятся на 2 части: разработка presentation layer (frontend) и business logic layer (backend).
> >
> Frontend - это то, как веб-приложение (или веб-сайт) выглядит для пользователя. > Frontend - это то, как веб-приложение (или веб-сайт) выглядит для пользователя.
> То есть визуальные стили, шаблоны страниц и т.д. > То есть визуальные стили, шаблоны страниц и т.д.
@ -64,26 +64,26 @@
К сожалению, приложение работает только на английском языке. К сожалению, приложение работает только на английском языке.
Однако, оно запускается прямо в браузере (в отличие от того же Adobe XD, который работает только под mac или windows и стал платным). Однако, оно запускается прямо в браузере (в отличие от того же Adobe XD, который работает только под mac или windows и стал платным).
> В качестве альтернативы можете использовать Gimp, Adobe XD, Adobe Photoshop. > В качестве альтернативы можете использовать Lunacy, Sketch, Gimp.
## Требования к макету ## Требования к макету
1. Два frame: для desktop и для мобильного устройства (например, iPhone 14). 1. Вы можете сделать либо многостраничный сайт, либо одностраничный (его ещё называются landing-page).
2. На макете должны быть следующие блоки: 2. Для каждой страницы необходимо создать два frame: для desktop и для мобильного устройства (например, iPhone 14).
- Блок с ссылками. Например, шапка сайта. 3. На макете на любой странице должны быть следующие блоки:
Ссылки можно оформить в виде текста с подчёркиванием.
- Блок с компонентами.
На каждом компоненте можно использовать svg-иконку.
Компоненты необходимо расположить в несколько столбцов для desktop-версии.
- Блок с таблицей.
Для мобильной версии можно добавить горизонтальную прокрутку.
- Блок с формой.
Элементы формы для desktop-версии можно расположить в несколько столбцов.
Для мобильной - в один.
3. Обязательно черновик должен быть переименован в формат `Фамилия Имя, группа`.
## Сдача лабораторной работы - Блок с ссылками. Например, шапка сайта.
Ссылки можно оформить в виде текста с подчёркиванием.
Должна быть настроена интерактивность, чтобы при нажатии на ссылку пользователя переносило в нужный frame или его часть (для landing-page).
- Блок с карточками.
В каждой карточке можно использовать svg-иконку или какое-либо иное изображение, в т.ч. растровое.
Карточки необходимо расположить в несколько столбцов для desktop-версии.
В мобильной версии обычно карточки располагаются друг под другом.
Пример карточек: блок с анонсами новостей и событий.
- Блок с формой.
Элементы формы для desktop-версии можно расположить в несколько столбцов.
Для мобильной - в один.
Не забудьте кнопку отправки формы!
Пример формы: обратная связь, подписка на новости, форма входа в систему.
Для очной защиты достаточно показать работающий макет преподавателю. 4. Обязательно файл с Вашим макетом должен быть переименован в формат `Фамилия Имя, группа`.
В случае дистанционной сдачи л/р необходимо скинуть ссылку на макет (проверьте её в режиме инкогнито / приватного окна) в [эту форму](https://forms.yandex.ru/u/63eef4a8d046880f47ffe776/) и написать об этом в [чате telegram](https://t.me/+MGRd5PxIoV83NTgy).

View File

@ -46,13 +46,51 @@
## Создание документа HTML ## Создание документа HTML
На основании макета, выполненного в рамках лабораторной работы №1, необходимо добавить в HTML-документ элементы. На основании макета, выполненного в рамках [лабораторной работы №1](../lw02/README.md), необходимо добавить в HTML-документ элементы.
Главный документ должен иметь название `index.html`. Главный документ должен иметь название `index.html`.
Если макетом планируется создание нескольких страниц, то они должны называться аналогичным образом на английском языке. Если макетом планируется создание нескольких страниц, то они должны называться аналогичным образом на английском языке.
Например, `orders.html`, `feedback.html` или `sitemap.html`. Например, `orders.html`, `feedback.html` или `sitemap.html`.
Для landing-page все блоки страницы должны быть обёрнуты в отдельные div-контейнеры со своим идентификатором, например:
```html
...
<body>
<div id="nav">
<!-- Тут навигация. -->
</div>
<div id="welcome">
<!-- Тут приветственное сообщение от автора. -->
</div>
<div id="features">
<!-- Тут блок с карточками-фичами какой-нибудь системы. -->
</div>
<div id="order-form">
<!-- Тут форма для заказа. -->
</div>
</body>
...
```
При вёрстке Вашего макета не бойтесь объединять элементы в контейнеры и присваивать им классы как общие на несколько блоков, так и индивидуальные под каждый блок. При вёрстке Вашего макета не бойтесь объединять элементы в контейнеры и присваивать им классы как общие на несколько блоков, так и индивидуальные под каждый блок.
Например:
```html
<div class="card first">
<div class="card-header">
<h3 class="card-title">Заголовок новости-карточки 1</h3>
</div>
<div class="card-body">Текст новости-карточки.</div>
</div>
...
<div class="card last">
<div class="card-header">
<h3 class="card-title">Заголовок новости-карточки 2</h3>
</div>
<div class="card-body">Текст новости-карточки.</div>
</div>
```
Также можно сначала добавлять элементы без стилизации, а затем уже приниматься за "наведение красоты". Также можно сначала добавлять элементы без стилизации, а затем уже приниматься за "наведение красоты".
Или же сразу добавлять стили к только что созданным элементам. Или же сразу добавлять стили к только что созданным элементам.
@ -94,10 +132,10 @@ body {
margin-left: 1em; margin-left: 1em;
margin-right: 14pt; margin-right: 14pt;
margin-bottom: 15px; margin-bottom: 15px;
/*same as "margin: 60px 14pt 15px 1em;"*/ /* Можно заменить просто на "margin: 60px 14pt 15px 1em;" */
padding: 10px 50px; padding: 10px 50px;
/*same as "padding: 10px 50px 10px 50px;"*/ /* Можно заменить просто на "padding: 10px 50px 10px 50px;" */
font-size: 14px; font-size: 14px;
font-family: "Times New Roman", serif; font-family: "Times New Roman", serif;

View File

@ -41,7 +41,7 @@ JavaScript — слаботипизированный мультипарадиг
Синтаксис JS похож на любой си-подобный язык (C / C++ / C#), однако при работе с ним особенно часто применяется асинхронный подход к обработке данных. Синтаксис JS похож на любой си-подобный язык (C / C++ / C#), однако при работе с ним особенно часто применяется асинхронный подход к обработке данных.
Об этом стоит знать и помнить, если вы обмениваетесь данными с веб-сервером. Об этом стоит знать и помнить, если вы обмениваетесь данными с веб-сервером.
Из-за особенностей связи и реализации бекенда (кода на серверной стороне) наши запросы могут обрабатываться медленно, и на момент ожидания мы не должны блокировать работу пользователя с нашим веб-сайтом. Из-за особенностей связи и реализации backend (кода на серверной стороне) наши запросы могут обрабатываться медленно, и на момент ожидания мы не должны блокировать работу пользователя с нашим веб-сайтом.
Если в desktop-приложениях при долгих операциях можно сделать, чтобы приложение "зависло" в ожидании какого-либо запроса, то в веб-приложениях это не допустимо (да и благодаря JavaScript невозможно). Если в desktop-приложениях при долгих операциях можно сделать, чтобы приложение "зависло" в ожидании какого-либо запроса, то в веб-приложениях это не допустимо (да и благодаря JavaScript невозможно).
Единственные случаи, когда браузер может зависнуть - это от слишком больного DOM-дерева или неправильно написанного кода на JavaScript. Единственные случаи, когда браузер может зависнуть - это от слишком больного DOM-дерева или неправильно написанного кода на JavaScript.

View File

@ -75,8 +75,6 @@ _P.S. Современные приложения на технологиях Mi
Предлагаю установить среду разработки на PHP **XAMPP**: <https://www.apachefriends.org/ru/index.html>. Предлагаю установить среду разработки на PHP **XAMPP**: <https://www.apachefriends.org/ru/index.html>.
> Внимание! На текущий момент (март 2023) лучше устанавливать XAMPP 8 с PHP 8 внутри.
При установке не забудьте снять ненужные флажки: При установке не забудьте снять ненужные флажки:
![](xampp-1.png) ![](xampp-1.png)

View File

@ -3,16 +3,18 @@
## Цель работы ## Цель работы
Получить навыки в создании кросс-платформенного веб-приложения в среде ASP.NET Core при помощи открытых кросс-платформенных инструментов. Получить навыки в создании кросс-платформенного веб-приложения в среде ASP.NET Core при помощи открытых кросс-платформенных инструментов.
Освоить принцип проектирования API REST.
## Ход работы ## Ход работы
1. Установка Visual Studio Code. 1. Установка Visual Studio Code.
2. Установка .NET (Core) SDK. 2. Установка .NET (Core) SDK.
3. Создание простейшего веб-приложения. 3. Настройка Visual Studio Code для работы с C# (.NET).
4. Настройка Visual Studio Code для отладки приложения. 4. Создание ASP-NET-приложения через VS Code.
5. Изучение основных концепций ASP.NET Core. 5. Запуск и отладка C#-приложения в VS Code.
6. Изменение pipeline. 6. Изучение основных концепций ASP.NET Core.
7. Оформление кода и отчёта. 7. Изменение pipeline
8. Подключение Swagger Gen+UI для демонстрации
## Прочтите внимательно перед выполнением работы ## Прочтите внимательно перед выполнением работы
@ -39,10 +41,10 @@ Visual Studio Code (VS Code) -- кросс-платформенный инстр
dotnet --list-sdks 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) с официального сайта: <https://dotnet.microsoft.com/download>. Для этого необходимо установить .NET SDK с официального сайта: <https://dotnet.microsoft.com/download>.
> ASP.NET Core - это платформа для создания веб-приложений, использующих .NET. > ASP.NET Core - это платформа для создания веб-приложений, использующих .NET.
> C# - язык программирования, позволяющий работать с .NET. > C# - язык программирования, позволяющий работать с .NET.
@ -50,75 +52,60 @@ dotnet --list-sdks
После установки SDK под свою систему и возможной перезагрузки компьютера выполните повторно команду из начала раздела. После установки 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`. Откройте эту папку в Visual Studio Code.
Например, `cd d:\labworks\ip`. Для этого выберите пункт меню "Открыть папку" (Open Folder) со стартовой страницы или меню "Файл" (File).
Иногда в windows требуется первой командой указать букву диска, например, `d:`, а потом уже делать _change directory (cd)_.
После этого введите следующую команду: Далее для создания нового C#-приложения нажмите F1.
Должна открыться строка команд по середине VC Code сверху.
В появившейся строке введите `.net new`, а затем выберите пункт ".NET: New project..." и нажмите Enter.
``` ![](net-new-project.png)
dotnet new web -n hw-app
```
Что здесь происходит: После этого выберите тип проекта как "ASP.NET Core Empty".
* _dotnet_ - общая команда для работы с платформой .NET (dot - это "точка" по-английски); ![](net-project-type.png)
* _new_ - команда по созданию чего-то нового;
* _web_ - шаблон для создания простейшего веб-приложения. Есть и другие шаблоны, их можете поискать самостоятельно или с помощью команды `dotnet new`;
* _-n_ - начало аргумента _name_, то есть задание имени будущего веб-приложения;
* _hw-app_ - название будущего приложения. Можете использовать своё название.
В результате выполненных шагов в вашей папке создастся ещё одна папка, в которой будет примерно следующий набор файлов: Далее введите название проекта.
Например, `IntProgLw5`.
![](project-tree.png) На заключительном шаге выберите каталог по умолчанию.
Если у Вас также, то значит всё хорошо. В итоге на экране просмотра файлов в последнем блоке "Solution Explorer" должно быть видно название проекта.
## Настройка Visual Studio Code для отладки приложения ![](solution-explorer.png)
Теперь пришло время соединить предыдущие пункты. Всё готово к первому запуску и отладке приложения!
Для этого перейдите в консоли в папку с приложением. ## Запуск и отладка C#-приложения в VS Code
В примере выше это будет _d:\labworks\ip\hw-app_.
После этого наберите команду `code .`.
Это должно запустить Visual Studio Code с открытой папкой с проектом, т.е. в дереве файлов должны быть те же файлы, что и на снимке экрана выше.
Если этого не произошло, Вы можете самостоятельно открыть папку через меню _File_ -> _Open Folder_.
Если Вы зайдёте в файл _.csproj_, VS Code снизу справа предложит установить необходимые расширения для работы с такими файлами. Пока не вдаваясь в подробности некоторого сгенерированного кода, зайдите в _Program.cs_, перенесите часть строки с `=> "Hello world");` на новую и поставьте точку останова в это место.
Установите расширение _C#_.
![](vsc-extension-show.png)
![](vsc-extension-install.png)
Возможно придётся перезагрузить VS Code.
После этого возникнет подсказка о добавлении необходимых задач для найденного проекта на языке C#.
Можете смело их добавить.
![](vsc-add-assets.png)
В итоге должна создаться папка _.vscode_ с двумя файлами.
Теперь, пока не вдаваясь в подробности кучи сгенерированного кода, зайдите в _Startup.cs_ и поставьте точку останова после `endpoints.MapGet("/",...`.
![](breakpoint-set.png) ![](breakpoint-set.png)
При нажатии на F5 у Вас должен запуститься веб-сервер: в _Debug Console_ снизу будет выведено много информации. Для запуска приложения и включения режима отладки необходимо нажать `F5`.
Скорее всего у Вас одновременно с этим запустится веб-браузер с Вашим пока ещё пустым сайтом.
Если этого не произошло, можете поискать ссылку вида <http://localhost:5000> в выводе консоли отладки самостоятельно.
> _localhost_ - это домен локального ПК. VS Code может спросить, какой язык и какой проект необходимо отлаживать.
Выберите C# и стандартную конфигурацию вашего приложения.
![](vsc-debug-run-1.png)
![](vsc-debug-run-2.png)
В итоге должен открыться веб-браузер по ссылке <http://localhost:5062/> или похожей.
> _localhost_ - это домен (адрес) локального ПК.
> Никто другой Ваш сайт по такому адресу не увидит. > Никто другой Ваш сайт по такому адресу не увидит.
Заметьте, что выполнение программы остановилось в точке останова: Заметьте, что выполнение программы остановилось в точке останова:
@ -132,53 +119,61 @@ dotnet new web -n hw-app
Перед ознакомлением с основами ASP.NET Core, необходимо ознакомиться с основами построения веб-серверов. Перед ознакомлением с основами ASP.NET Core, необходимо ознакомиться с основами построения веб-серверов.
Как минимум надо вспомнить или узнать, что такое: протокол HTTP, запрос, ответ, тип запроса (GET, POST, PUT, ...) код ответа (200 OK, 404 NOT FOUND, 500, ...), составные части URL (схема, домен, путь, query-string, hash). Как минимум надо вспомнить или узнать, что такое: протокол HTTP, запрос, ответ, тип запроса (GET, POST, PUT, ...) код ответа (200 OK, 404 NOT FOUND, 500, ...), составные части URL (схема, домен, путь, query-string, hash).
После этого можно переходить к основам ASP.NET Core, которые хорошо изложены тут: <https://docs.microsoft.com/ru-ru/aspnet/core/introduction-to-aspnet-core?view=aspnetcore-7.0#recommended-learning-path>. После этого можно переходить к основам ASP.NET Core, которые хорошо изложены тут: <https://learn.microsoft.com/ru-ru/aspnet/core/introduction-to-aspnet-core#recommended-learning-path>.
Однако основные вещи изложу здесь, чтобы не заставлять вас сейчас читать столь сложный для понимания текст. Однако основные вещи изложу здесь, чтобы не заставлять вас сейчас читать столь сложный для понимания текст.
ASP.NET Core, как и другие современные платформы для построения веб-приложений, использует принцип _pipeline_ - запрос от клиента (браузера) попадает в начало "конвейера", где затем каждый обработчик (практически любая функция на _C#_) может его или изменить, или пропустить без изменений, или остановить конвейер в зависимости от самого запроса. ASP.NET Core, как и другие современные платформы для построения веб-приложений, использует принцип _pipeline_ - запрос от клиента (браузера) попадает в начало "конвейера", где затем каждый обработчик (практически любая функция на _C#_) может его или изменить, или пропустить без изменений, или остановить конвейер в зависимости от самого запроса.
После прохождения всех обработчиков формируется ответ, который и возвращается клиенту (браузеру). После прохождения всех обработчиков формируется ответ, который и возвращается клиенту (браузеру).
Визуально это можно изобразить так:
```
<запрос> <ответ>
↑↑ ↓↓
------------------------
| обработчик 1 |
------------------------
↑↑ ↓↓
------------------------
| обработчик 2 |
------------------------
↑↑ ↓↓
------------------------
| обработчик 3 |
------------------------
```
Примеры обработчиков: Примеры обработчиков:
* проверка, что запрос клиентом составлен правильно; - проверка, что запрос клиентом составлен правильно;
* проверка доступа клиента к запрашиваемому ресурсу; - проверка доступа клиента к запрашиваемому ресурсу;
* если по пути из запроса найден файл на веб-сервере, то можно его вернуть; - если по пути из запроса найден файл на веб-сервере, то можно его вернуть;
* а если файл не найден, может какая-то подпрограмма может забрать обработку на себя? - а если файл не найден, может какая-то подпрограмма может забрать обработку на себя?
* "Хмм, всё, что начинается с /api, отдавайте мне, остальное мне не надо"; - "Хмм, всё, что начинается с /api, отдавайте мне, остальное мне не надо";
* отрисовка красивых страниц об ошибках (например, 404, 403, 500 и т.д.), если прошлые обработчики сказали, что запрос был плохим; - отрисовка красивых страниц об ошибках (например, 404, 403, 500 и т.д.), если прошлые обработчики сказали, что запрос был плохим;
* обработчик-которые складывает с специальный файл информацию о запросах (логгер или служба/подсистема логирования). - обработчик-которые складывает с специальный файл информацию о запросах (логгер или служба/подсистема логирования).
Как видите, обработчиков бывает много, но этот конвейер где-то надо настроить. Как видите, обработчиков бывает много, но этот конвейер где-то надо настроить.
В ASP.NET Core для этого существует класс _Startup.cs_ и метод _Configure_. В ASP.NET Core для этого существуют класс _WebApplicationBuilder_ и _WebApplication_, использование которых и можно видеть в файле _Program.cs_ нашего проекта.
Как раз в нём настраивается порядок следования обработчиков.
В простейшем приложении порядок обработчиков такой: В нашем простейшем приложении порядок обработчиков примерно такой:
* если окружение, в котором запускается сайт, для разработки, то надо включить обработчик по отрисовке красивых страниц с подробностями ошибок; 1. _(неявно)_ Если запрос составлен с ошибками, выводить код `400 BAD REQUEST`.
* необходимо включить обработчик, который сможет следить за тем, какие конкретно ресурсы запрашиваются; 2. _(неявно)_ Если приложение выбросило исключение, вывод специальную страницу и код `500 INTERNAL SERVER ERROR`.
* включатся обработчик по сопоставлению путей из запросов другим обработчикам; 3. Если поступил GET-запрос на главную страницу (`/`), то выводится строка `Hello World!`.
* добавляется обработчик для _GET_-запросов по пути _/_: в ответ клиенту всегда пишется строка _"Hello World!"_.
Можете самостоятельно поискать по коду, как описанные выше строки отображаются в исходный код на _C#_.
Как видите, пока ничего сложного. Как видите, пока ничего сложного.
Далее необходимо сопоставить наше веб-приложение (по сути это набор обработчиков запросов) с конкретным веб-сервером. Далее необходимо сопоставить наше веб-приложение (по сути это набор обработчиков запросов) с конкретным веб-сервером.
Например, тем самым, что запускает ваше веб-приложение по адресу <http://localhost:5000>. Например, тем самым, что запускает ваше веб-приложение по адресу <http://localhost:хххх>.
Это делается в файле _Program.cs_ (знакомый файл?) в методе _Main_ (знакомый метод?). А это делается в строке `app.Run();`.
Здесь у нас настраивается хост: то есть та часть приложения, которая может предоставить доступ к вашему веб-приложения из внешнего мира.
Другими словами, здесь и настраивается веб-сервер.
ASP.NET Core использует лёгкий веб-сервер _Kestrel_, о котором Вы даже можете не знать.
В этом, и в простоте настройки, и заключается его лёгкость.
Таким образом, мы выяснили, что наше приложение - это набор обработчиков. > В рамках этого руководства не будем вдаваться в подробности того, что спрятано под этой строкой, а также под командой `WebApplication.CreateBuilder(args)` из начала файла.
Они настраиваются в _Startup.cs_ в специальном методе.
Веб-сервер для доступа к нашему веб-приложению настраивается в _Program.cs_.
Что находится в других файлах, можете изучить самостоятельно. Что находится в файлах помимо _Program.cs_, можете изучить самостоятельно.
Дам только наводку, что launchSettings необходимы для запуска веб-сервера, а appsettings - для настройки веб-приложения. Дам только наводку, что launchSettings необходим для запуска веб-сервера, а appsettings - для настройки веб-приложения.
## Изменение pipeline ## Изменение pipeline
@ -189,9 +184,48 @@ ASP.NET Core использует лёгкий веб-сервер _Kestrel_, о
Предлагается сделать ещё как минимум несколько обработчиков для _GET_-запросов и проверить в браузере, как они будут работать. Предлагается сделать ещё как минимум несколько обработчиков для _GET_-запросов и проверить в браузере, как они будут работать.
Например: Например:
* При запросе _/time_ (через браузер необходимо будет перейти по адресу <http://localhost:5000/time>) должно выводиться текущее время. - При GET-запросе _/time_ (через браузер необходимо будет перейти по адресу <http://localhost:5000/time>) должно выводиться текущее время строкой в формате "ДД.ММ.ГГГГ ЧЧ:ММ.СС", например, "12.04.1961 09:07:00".
* При запросе _/whoami_ должна выводиться информация о текущем браузере. - При запросе _/whoami_ должна выводиться информация о текущем браузере.
* При запросе _/error_ должен возвращаться такой код статуса (`StatusCode`), который придёт в query-строке в параметре _status_. Если не придёт, то отдавать код статуса _200 OK_. Тогда запрос в адресной строке браузера будет выглядеть примерно как <http://localhost:5000/error?status=403> и в этом случае выводить якобы ошибку о том, что нет доступа к ресурсу. В Панели разработчика на вкладке "Сеть" должен возвращаться код из query-параметра. - При запросе _/error_ должен возвращаться такой код статуса (`StatusCode`), который придёт из параметра обработчика `[FromQuery] int status`. Если не придёт, то отдавать код статуса _200 OK_. Тогда запрос в адресной строке браузера будет выглядеть примерно как <http://localhost:5000/error?status=403> и в этом случае выводить якобы ошибку о том, что нет доступа к ресурсу. В Панели разработчика на вкладке "Сеть" должен возвращаться код из query-параметра.
Для работы с запросом пользователя для получения информации о браузере или параметрах этого запроса следует изучить использование переменной `context`, которая передаётся в обработчик. Для работы с запросом пользователя для получения информации о браузере или параметрах этого запроса следует изучить использование переменной `context`, которая передаётся в обработчик.
Там есть свойство `.Request`, которое должно Вам помочь. Там есть свойство `.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)

Binary file not shown.

Before

Width:  |  Height:  |  Size: 169 KiB

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 162 KiB

After

Width:  |  Height:  |  Size: 16 KiB

BIN
lw05/net-new-project.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

BIN
lw05/net-project-type.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 10 KiB

BIN
lw05/solution-explorer.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

BIN
lw05/swagger-error.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 47 KiB

BIN
lw05/swagger-installed.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 92 KiB

BIN
lw05/swagger-test.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 55 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

BIN
lw05/vsc-debug-run-1.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.7 KiB

BIN
lw05/vsc-debug-run-2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 34 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB