diff --git a/README.md b/README.md index 989a2e8..0047971 100644 --- a/README.md +++ b/README.md @@ -20,7 +20,7 @@ * [Лабораторная работа №2 - Вёрстка сайта (HTML, CSS)](/lw02/README.md) * [Лабораторная работа №3 - Динамика сайта (JavaScript)](/lw03/README.md) * [Лабораторная работа №4 - Разворачивание локального веб-сервера (PHP)](/lw04/README.md) -* [Лабораторная работа №5 - Создание веб-приложения при помощи ASP.NET Core](/TODO/README.md) +* [Лабораторная работа №5 - Создание веб-приложения при помощи ASP.NET Core](/lw05/README.md) Лабораторные работы на выбор: diff --git a/lw04/README.md b/lw04/README.md index d9b4226..8e283ee 100644 --- a/lw04/README.md +++ b/lw04/README.md @@ -168,4 +168,3 @@ _P.S. Современные приложения на технологиях Mi - Что дешевле сопровождать - сайт на CMS или собственноручно написанный движок? - Насколько сложно сделать свою CMS? (Кстати, ваш ассистент в школе таким баловался ещё на PHP 4 или 5. Как хорошо, что этот код не сохранился...) - Как думаете, старый сайт политеха сделан на CMS? Отвечу сразу - [да, на разработанной в политехе же в 2005 году](http://www.sisadminov.net/main/view/article/16). - diff --git a/lw05/README.md b/lw05/README.md new file mode 100644 index 0000000..51348f6 --- /dev/null +++ b/lw05/README.md @@ -0,0 +1,197 @@ +# Лабораторная работа №5 - Создание веб-приложения при помощи ASP.NET Core + +## Цель работы + +Получить навыки в создании кросс-платформенного веб-приложения в среде ASP.NET Core при помощи открытых кросс-платформенных инструментов. + +## Ход работы + +1. Установка Visual Studio Code. +2. Установка .NET (Core) SDK. +3. Создание простейшего веб-приложения. +4. Настройка Visual Studio Code для отладки приложения. +5. Изучение основных концепций ASP.NET Core. +6. Изменение pipeline. +7. Оформление кода и отчёта. + +## Прочтите внимательно перед выполнением работы + +Для сдачи лабораторной работы необходимо показать работающее приложение, которое способно принимать запросы из браузера. + +## Установка Visual Studio Code + +Visual Studio Code (VS Code) -- кросс-платформенный инструмент для разработки и не только. +Очень грубо, VS Code можно считать очень прокаченным блокнотом с кучей плагинов. +Плагины при этом могут быть различные: добавление иконок в дерево папок и файлов, добавление поддержки форматирования, отладки и запуска исходного кода, средства доступа к удалённым серверам, возможность работать с контейнерами и т.д. + +Скачать и установить Visual Studio Code можно с официального сайта: . +При установке можете отказаться от добавления VS Code в контекстное меню и т.д. +Единственное, что можете оставить - это добавление в PATH, если это, конечно, будет спрашиваться при установке. +Почитать подробнее про PATH можно тут: . + +## Установка .NET (Core) SDK + +Перед выполнением этого шага необходимо убедиться: вдруг на Вашем ПК уже установлено необходимое программное обеспечение. + +Для этого в консоли или командной строке (для Windows сейчас рекомендуется использовать PowerShell) следует набрать следующую команду: + +``` +dotnet --list-sdks +``` + +Если вывод будет содержать строку наподобие `7.0.202 [C:\Program Files\dotnet\sdk]` и номер версии будет из актуальных (на апрель 2023 это 6.0, 7.0), то всё хорошо. +В противном случае необходимо произвести установку. + +Для этого необходимо установить .NET SDK (5.0 или 6.0) с официального сайта: . + +> ASP.NET Core - это платформа для создания веб-приложений, использующих .NET. +> C# - язык программирования, позволяющий работать с .NET. + +После установки SDK под свою систему и возможной перезагрузки компьютера выполните повторно команду из начала раздела. +Теперь она должна выводить данные корректно. + +## Создание простейшего веб-приложения + +Создавать простейшее веб-приложение на ASP.NET Core будем из консоли (командной строки). +Во-первых, это даёт вам возможность поработать с командной строкой. +Во-вторых, этот метод взаимодействия с утилитами / платформами / серверами является распространённым в профессиональной разработке и администрировании. +В-третьих, где ещё, если не в нашем курсе? :) + +Создайте пустую папку где-нибудь на Вашем компьютере. +Постарайтесь не использовать в пути до этой папки пробелы и отличные от английских букв и цифр символы. + +Перейдите в папку при помощи команды `cd`. +Например, `cd d:\labworks\ip`. +Иногда в windows требуется первой командой указать букву диска, например, `d:`, а потом уже делать _change directory (cd)_. + +После этого введите следующую команду: + +``` +dotnet new web -n hw-app +``` + +Что здесь происходит: + +* _dotnet_ - общая команда для работы с платформой .NET (dot - это "точка" по-английски); +* _new_ - команда по созданию чего-то нового; +* _web_ - шаблон для создания простейшего веб-приложения. Есть и другие шаблоны, их можете поискать самостоятельно или с помощью команды `dotnet new`; +* _-n_ - начало аргумента _name_, то есть задание имени будущего веб-приложения; +* _hw-app_ - название будущего приложения. Можете использовать своё название. + +В результате выполненных шагов в вашей папке создастся ещё одна папка, в которой будет примерно следующий набор файлов: + +![](project-tree.png) + +Если у Вас также, то значит всё хорошо. + +## Настройка Visual Studio Code для отладки приложения + +Теперь пришло время соединить предыдущие пункты. + +Для этого перейдите в консоли в папку с приложением. +В примере выше это будет _d:\labworks\ip\hw-app_. +После этого наберите команду `code .`. +Это должно запустить Visual Studio Code с открытой папкой с проектом, т.е. в дереве файлов должны быть те же файлы, что и на снимке экрана выше. +Если этого не произошло, Вы можете самостоятельно открыть папку через меню _File_ -> _Open Folder_. + +Если Вы зайдёте в файл _.csproj_, VS Code снизу справа предложит установить необходимые расширения для работы с такими файлами. +Установите расширение _C#_. + +![](vsc-extension-show.png) + +![](vsc-extension-install.png) + +Возможно придётся перезагрузить VS Code. + +После этого возникнет подсказка о добавлении необходимых задач для найденного проекта на языке C#. +Можете смело их добавить. + +![](vsc-add-assets.png) + +В итоге должна создаться папка _.vscode_ с двумя файлами. + +Теперь, пока не вдаваясь в подробности кучи сгенерированного кода, зайдите в _Startup.cs_ и поставьте точку останова после `endpoints.MapGet("/",...`. + +![](breakpoint-set.png) + +При нажатии на F5 у Вас должен запуститься веб-сервер: в _Debug Console_ снизу будет выведено много информации. +Скорее всего у Вас одновременно с этим запустится веб-браузер с Вашим пока ещё пустым сайтом. +Если этого не произошло, можете поискать ссылку вида в выводе консоли отладки самостоятельно. + +> _localhost_ - это домен локального ПК. +> Никто другой Ваш сайт по такому адресу не увидит. + +Заметьте, что выполнение программы остановилось в точке останова: + +![](breakpoint-catched.png) + +Если у вас всё работает похожим образом, значит всё настроено правильно. + +## Изучение основных концепций ASP.NET Core + +Перед ознакомлением с основами ASP.NET Core, необходимо ознакомиться с основами построения веб-серверов. +Как минимум надо вспомнить или узнать, что такое: протокол HTTP, запрос, ответ, тип запроса (GET, POST, PUT, ...) код ответа (200 OK, 404 NOT FOUND, 500, ...), составные части URL (схема, домен, путь, query-string, hash). + +После этого можно переходить к основам ASP.NET Core, которые хорошо изложены тут: . + +Однако основные вещи изложу здесь, чтобы не заставлять вас сейчас читать столь сложный для понимания текст. + +ASP.NET Core, как и другие современные платформы для построения веб-приложений, использует принцип _pipeline_ - запрос от клиента (браузера) попадает в начало "конвейера", где затем каждый обработчик (практически любая функция на _C#_) может его или изменить, или пропустить без изменений, или остановить конвейер в зависимости от самого запроса. +После прохождения всех обработчиков формируется ответ, который и возвращается клиенту (браузеру). + +Примеры обработчиков: + +* проверка, что запрос клиентом составлен правильно; +* проверка доступа клиента к запрашиваемому ресурсу; +* если по пути из запроса найден файл на веб-сервере, то можно его вернуть; +* а если файл не найден, может какая-то подпрограмма может забрать обработку на себя? +* "Хмм, всё, что начинается с /api, отдавайте мне, остальное мне не надо"; +* отрисовка красивых страниц об ошибках (например, 404, 403, 500 и т.д.), если прошлые обработчики сказали, что запрос был плохим; +* обработчик-которые складывает с специальный файл информацию о запросах (логгер или служба/подсистема логирования). + +Как видите, обработчиков бывает много, но этот конвейер где-то надо настроить. +В ASP.NET Core для этого существует класс _Startup.cs_ и метод _Configure_. +Как раз в нём настраивается порядок следования обработчиков. + +В простейшем приложении порядок обработчиков такой: + +* если окружение, в котором запускается сайт, для разработки, то надо включить обработчик по отрисовке красивых страниц с подробностями ошибок; +* необходимо включить обработчик, который сможет следить за тем, какие конкретно ресурсы запрашиваются; +* включатся обработчик по сопоставлению путей из запросов другим обработчикам; +* добавляется обработчик для _GET_-запросов по пути _/_: в ответ клиенту всегда пишется строка _"Hello World!"_. + +Можете самостоятельно поискать по коду, как описанные выше строки отображаются в исходный код на _C#_. + +Как видите, пока ничего сложного. + +Далее необходимо сопоставить наше веб-приложение (по сути это набор обработчиков запросов) с конкретным веб-сервером. +Например, тем самым, что запускает ваше веб-приложение по адресу . + +Это делается в файле _Program.cs_ (знакомый файл?) в методе _Main_ (знакомый метод?). +Здесь у нас настраивается хост: то есть та часть приложения, которая может предоставить доступ к вашему веб-приложения из внешнего мира. +Другими словами, здесь и настраивается веб-сервер. +ASP.NET Core использует лёгкий веб-сервер _Kestrel_, о котором Вы даже можете не знать. +В этом, и в простоте настройки, и заключается его лёгкость. + +Таким образом, мы выяснили, что наше приложение - это набор обработчиков. +Они настраиваются в _Startup.cs_ в специальном методе. +Веб-сервер для доступа к нашему веб-приложению настраивается в _Program.cs_. + +Что находится в других файлах, можете изучить самостоятельно. +Дам только наводку, что launchSettings необходимы для запуска веб-сервера, а appsettings - для настройки веб-приложения. + +## Изменение pipeline + +После того, как вы научились запускать простейшее веб-приложение для отладки и изучили базовые понятия конвейерной обработки в ASP.NET Core, самое время этот конвейер немного поменять. + +Перед вами есть пример обработчика для _GET_-запросов по пути _/_. + +Предлагается сделать ещё как минимум несколько обработчиков для _GET_-запросов и проверить в браузере, как они будут работать. +Например: + +* При запросе _/time_ (через браузер необходимо будет перейти по адресу ) должно выводиться текущее время. +* При запросе _/whoami_ должна выводиться информация о текущем браузере. +* При запросе _/error_ должен возвращаться такой код статуса (`StatusCode`), который придёт в query-строке в параметре _status_. Если не придёт, то отдавать код статуса _200 OK_. Тогда запрос в адресной строке браузера будет выглядеть примерно как и в этом случае выводить якобы ошибку о том, что нет доступа к ресурсу. В Панели разработчика на вкладке "Сеть" должен возвращаться код из query-параметра. + +Для работы с запросом пользователя для получения информации о браузере или параметрах этого запроса следует изучить использование переменной `context`, которая передаётся в обработчик. +Там есть свойство `.Request`, которое должно Вам помочь. diff --git a/lw05/breakpoint-catched.png b/lw05/breakpoint-catched.png new file mode 100644 index 0000000..74254c4 Binary files /dev/null and b/lw05/breakpoint-catched.png differ diff --git a/lw05/breakpoint-set.png b/lw05/breakpoint-set.png new file mode 100644 index 0000000..8a91226 Binary files /dev/null and b/lw05/breakpoint-set.png differ diff --git a/lw05/project-tree.png b/lw05/project-tree.png new file mode 100644 index 0000000..cc030b3 Binary files /dev/null and b/lw05/project-tree.png differ diff --git a/lw05/vsc-add-assets.png b/lw05/vsc-add-assets.png new file mode 100644 index 0000000..6033529 Binary files /dev/null and b/lw05/vsc-add-assets.png differ diff --git a/lw05/vsc-extension-install.png b/lw05/vsc-extension-install.png new file mode 100644 index 0000000..dc8b308 Binary files /dev/null and b/lw05/vsc-extension-install.png differ diff --git a/lw05/vsc-extension-show.png b/lw05/vsc-extension-show.png new file mode 100644 index 0000000..d1ed043 Binary files /dev/null and b/lw05/vsc-extension-show.png differ