Add lwB1

README.md

@@ -6,7 +6,7 @@
 
 1. Лабораторные работы выполняются в аудитории или дистанционно.
 2. Посещать лабораторные занятия обязательно только для сдачи работ.
-3. Лабораторная работа считается завершённой, если в [таблице с прогрессом](https://disk.yandex.ru/i/P3tpkqqVJWgmKg) есть об этом отметка.
+3. Лабораторная работа считается завершённой, если в [таблице с прогрессом](https://files.ulstu.ru/s/WidAoc9F8BwinRc) есть об этом отметка.
 4. Для выполнения п.3 необходимо показать преподавателю выполненное задание во время лабораторного занятия.
 5. Во время защиты лабораторной работы преподаватель может спрашивать или просить что-то исправить по теме Вашей работы.
 6. Иных отчётов помимо Вашего кода или других артефактов, необходимых для выполнения задания, предоставлять не надо.
@@ -17,17 +17,17 @@
 Обязательные лабораторные работы:
 
 * [Лабораторная работа №1 - Создание макета сайта (Figma)](/lw01/README.md)
-* [Лабораторная работа №2 - Вёрстка сайта (HTML, CSS)](/TODO/README.md)
-* [Лабораторная работа №3 - Динамика сайта (JavaScript)](/TODO/README.md)
-* [Лабораторная работа №4 - Разворачивание локального веб-сервера (PHP)](/TODO/README.md)
-* [Лабораторная работа №5 - Создание веб-приложения при помощи ASP.NET Core](/TODO/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)](/TODO/README.md)
-* [Лабораторная работа №F2 - Получение данных через API (Fetch)](/TODO/README.md)
-* [Лабораторная работа №B1 - Изучение шаблона проектирования MVC](/TODO/README.md)
-* [Лабораторная работа №B2 - Разработка чат-бота для Telegram](/TODO/README.md)
+* [Лабораторная работа №F1 - Одностраничное приложение (React)](/lwF1/README.md)
+* [Лабораторная работа №F2 - Получение данных через API (Fetch)](/lwF2/README.md)
+* [Лабораторная работа №B1 - Изучение шаблона проектирования MVC](/lwB1/README.md)
+* [Лабораторная работа №B2 - Разработка чат-бота для Telegram](/lwB2/README.md)
 
 ## Правила допуска до экзамена
 

lw02/README.md

@@ -0,0 +1,218 @@
+# Лабораторная работа №2 - Вёрстка сайта (HTML, CSS)
+
+## Цели работы
+
+- Освоение основ интернет-вёрстки.
+- Освоение каскадных таблиц стилей в вебе (CSS3+).
+- Изучение основных селекторов и свойств CSS.
+
+## Ход выполнения работы
+
+1. Изучение основополагающих принципов интернет-вёрстки: HTML-документ, элементы, теги, поток документа, таблицы, списки, ссылки, изображения.
+2. Изучение основных элементов веб-страницы: заголовок и тело документа, контейнер, абзац, заголовок текста, таблица, ссылка, изображение.
+3. Создание html-документа на основании фреймов из макета.
+4. Подключение к html-документу таблицы стилей.
+5. Изучение flexbox и использование для позиционирования элементов.
+6. Стилизация элементов страницы.
+7. Создание стилей для мобильного представления.
+
+## Изучение принципов интернет вёрстки
+
+На этом этапе выполнения лабораторной работы необходимо усвоить, что такое интернет-вёрстка (похожа ли она на вёрстку газет, например), в чём отличие и схожесть HTML и обычного текстового документа, из чего состоит веб-страница внутри и по каким принципам обычно свёрстаны веб-сайты.
+
+См. следующий материал:
+
+- Введение в HTML - http://htmlbook.ru/samhtml/vvedenie-v-html
+- Про теги - http://htmlbook.ru/samhtml/tegi
+- Про историю проблем с вёрсткой - http://htmlbook.ru/samlayout
+- Про табличную вёрстку (сейчас считается устаревшим) - http://htmlbook.ru/samlayout/verstka-s-pomoshchyu-tablits/osobennosti-tablits
+- Про блочную вёрстку - http://htmlbook.ru/samlayout/blochnaya-verstka (и все страницы этого раздела)
+
+Также в источниках упоминается CSS или "каскадные таблицы стилей".
+Они нам также пригодятся.
+
+## Изучение основных элементов веб-страницы
+
+Когда вы разберётесь в том, что такое вёртка веб-страниц, необходимо ознакомиться с тем, из каких элементов может состоять документ HTML (или наша веб-страница).
+
+Элементов много, но всё сводится к нескольким блочным (то есть блокам - заголовок, абзац, таблица, контейнер без явного смысла и др.) и строчным (изображение, всевозможные выделения текста, блок текста без явного смысла и др.) элементам.
+
+Для "пробы пера" можете использовать CodePen, песочницу для проверки вёрстки и не только - <https://codepen.io/pen/>.
+
+См. следующий материал:
+
+- HTML5 и CSS3 на примерах - https://webref.ru/layout/html5-css3
+- Справочник по HTML - http://htmlbook.ru/html
+
+## Создание документа HTML
+
+На основании макета, выполненного в рамках лабораторной работы №1, необходимо добавить в HTML-документ элементы.
+
+Главный документ должен иметь название `index.html`.
+Если макетом планируется создание нескольких страниц, то они должны называться аналогичным образом на английском языке.
+Например, `orders.html`, `feedback.html` или `sitemap.html`.
+
+При вёрстке Вашего макета не бойтесь объединять элементы в контейнеры и присваивать им классы как общие на несколько блоков, так и индивидуальные под каждый блок.
+
+Также можно сначала добавлять элементы без стилизации, а затем уже приниматься за "наведение красоты".
+Или же сразу добавлять стили к только что созданным элементам.
+
+Пример сайта из материалов, сделанных на практике: <https://vladdy-moses.github.io/docker-designer>.
+Если посмотрите код страницы, то не увидите ничего сложного.
+
+## Вставка картинок из макета
+
+В макете есть возможность выгружать группу элементов как изображение.
+Для этого в панели свойств есть меню "Export", где можно выбрать параметры выгрузки.
+
+Стоит обратить внимание на следующие особенности:
+
+- Если вы экспортируете иконку, где много векторной графики, т.е. графических примитивов (линий, фигур, заливки и проч.), то следует выбирать формат SVG.
+- Если вы экспортируете изображение, где есть растр, т.е сетка пикселей, то следует выбирать формат JPG.
+
+Также удобно называть слой с экспортируемым изображением на английском языке, т.к. название выгружаемого изображения будет с ним совпадать.
+
+Например, при экспорте слоя "site-logo" в формат SVG создастся файл `site-logo.svg`, который можно будет подключить к HTML-документу при помощи элемента `<img src="site-logo.svg" alt="Логотип" />`.
+
+## Подключение каскадных таблиц стилей CSS и пример
+
+Подключение таблицы стилей в head-элементе страницы:
+
+```html
+<link rel="stylesheet" href="style.css" />
+```
+
+Пример таблицы стилей 1:
+
+```css
+body {
+  background-color: #eee;
+  background-image: url(bg-1.png);
+  color: #666;
+
+  margin-top: 60px;
+  margin-left: 1em;
+  margin-right: 14pt;
+  margin-bottom: 15px;
+  /*same as "margin: 60px 14pt 15px 1em;"*/
+
+  padding: 10px 50px;
+  /*same as "padding: 10px 50px 10px 50px;"*/
+
+  font-size: 14px;
+  font-family: "Times New Roman", serif;
+  font-weight: bold;
+
+  text-transform: uppercase;
+  text-align: center;
+}
+
+.card {
+  border-width: 10px;
+  border-color: red;
+  border-radius: 10px;
+}
+
+.card.test-3 {
+  position: absolute;
+  top: 0;
+  left: 55px;
+  right: -50px;
+  bottom: 20px;
+  z-index: 9;
+}
+
+.card.test-4 {
+  position: fixed;
+  right: 20px;
+  bottom: 20px;
+}
+
+.test {
+  background-color: red;
+}
+
+td.test-2 {
+  background-color: coral;
+}
+
+.test.test-2 {
+  background-color: brown;
+}
+
+thead .test,
+thead > tr.test > th {
+  background-color: blue;
+}
+
+#main-container {
+  background-color: aqua;
+}
+
+.test-5 {
+  color: white;
+}
+
+.test-5 strong {
+  color: red;
+  display: block;
+}
+
+.test-6 {
+  color: white;
+  display: inline-block;
+}
+```
+
+Пример таблицы стилей 2: <https://vladdy-moses.github.io/docker-designer/style.css>.
+
+Самоучитель по CSS можно найти по ссылке <http://htmlbook.ru/samcss>.
+Справочник по правилам CSS там же: <http://htmlbook.ru/css>.
+
+## Flexbox
+
+Flexbox – новая система позиционирования элементов в CSS.
+С её помощью можно гибко настроить как положение элемента в контейнере, так и его поведение в зависимости от различных параметров, например, объёма содержимого.
+
+Подробнее можно ознакомиться по этой ссылке: <https://tproger.ru/translations/how-css-flexbox-works/>.
+
+Нам Flexbox поможет настроить положение отдельных элементов в контейнере для настольной и мобильной вёрстки.
+
+В лабораторной работе предполагается, что те места, где в макете содержимое расположено в несколько колонок, они будут стилизованы через Flexbox.
+
+## Адаптивная вёрстка
+
+Адаптивность в стилизации — свойство адаптироваться под различные устройства.
+
+Логично предположить, что если одна и та же страница выглядит одинаково для различных устройств (смартфон, часы, компьютер, планшет, 4К-телевизор), то, скорее всего, она везде будет смотреться ужасно.
+
+Сейчас дизайнерам необходимо формировать несколько макетов для различных устройств, а верстальщикам - несколько вариантов вёрстки.
+Однако такой подход довольно трудозатратен, поэтому можно сделать одну вёрстку, но так, чтобы только при помощи стилей её можно было "подправить" под вид на конкретном устройстве.
+
+Это можно сделать при помощи `@media`-запросов.
+С помощью них можно указать, при каких условиях соблюдаются те или иные правила стилизации.
+
+Например, изменение главной линии, относительно которой встраивается меню сайта, для мобильных устройств можно переопределить следующим запросом:
+
+```css
+@media (max-width: 1020px) {
+  nav {
+    flex-direction: column;
+  }
+}
+```
+
+При помощи `display: none` можно полностью скрывать элементы при определённых условиях.
+Например, так можно скрывать меню для печати страницы или изображения для мобильных версий страниц.
+
+Все переопределённые элементы из примера, который разбирался на практике, можно найти тут: <https://vladdy-moses.github.io/docker-designer/style-mobile.css>.
+
+В лабораторной работе предлагается аналогичным образом дополнить некоторые правила для мобильного вида сайта, чтобы он был похож на соответствующий frame из макета.
+
+## Дополнительные темы для самостоятельного изучения
+
+Если вам интересна интернет-вёрстка, можете изучить самостоятельно следующие темы:
+
+- Анимация в CSS3.
+- Переменные в CSS3.
+- Препроцессоры CSS: LESS, SASS/SCSS.

lw03/README.md

@@ -0,0 +1,97 @@
+# Лабораторная работа №3 - Динамика сайта (JavaScript)
+
+## Цель работы
+
+Получение основных навыков программирования динамических веб-приложений при помощи языка JavaScript, подключения сторонних библиотек и средств веб-аналитики.
+
+## Ход работы
+
+1. Вспомнить основные понятия в DOM-дереве.
+2. Изучить работу с формами в HTML.
+3. Изучить необходимость JavaScript.
+4. Изучить отладку JS в веб-браузере Google Chrome или Mozilla Firefox.
+5. Подключить JS-библиотеки к HTML-странице.
+6. Написать собственный сценарий (скрипт). Добавить обработку формы.
+
+## Основные понятия в DOM-дереве
+
+Необходимо вспомнить про следующие понятия:
+
+- элементы, вложенность элементов;
+- аттрибуты, имя, идентификатор;
+- формы, поля ввода, кнопки;
+- события, передача событий.
+
+## Формы в HTML
+
+Изучите работы с формами на ресурсе HTMLBOOK: <http://htmlbook.ru/samhtml5/formy>.
+Особенно обратите внимание на первые 6 страниц.
+
+Проверьте, что на ваших формах есть необходимые элементы: элемент form, поля ввода, кнопка в виде button или `<input type="submit" ... />`.
+Также убедитесь, что у полей ввода есть аттрибуты name, которые уникальны для каждого поля в рамках одной формы.
+
+## Необходимость JavaScript и отладка приложений JS
+
+Сейчас страницы написанного вами сайта статичны - в них нет интерактивных элементов.
+Однако если вы зайдёте на популярные сайты, то можете увидеть, что они динамичны - на кнопки можно нажать, при клике на некоторые элементы появляются другие и т.п.
+Для этого используется язык программирования JavaScript, код которого (его называют _скриптами_ или _сценариями_) выполняется в браузере каждого пользователя вашего сайта.
+
+JavaScript — слаботипизированный мультипарадигменный язык программирования.
+Это означает, что в нём есть работа с типами данных, но от разработчика не требуется строгое соответствие типам (например, можно складывать числа со строками и ничего плохо не случится, как, к слову, и хорошего).
+
+Синтаксис JS похож на любой си-подобный язык (C / C++ / C#), однако при работе с ним особенно часто применяется асинхронный подход к обработке данных.
+Об этом стоит знать и помнить, если вы обмениваетесь данными с веб-сервером.
+Из-за особенностей связи и реализации бекенда (кода на серверной стороне) наши запросы могут обрабатываться медленно, и на момент ожидания мы не должны блокировать работу пользователя с нашим веб-сайтом.
+Если в desktop-приложениях при долгих операциях можно сделать, чтобы приложение "зависло" в ожидании какого-либо запроса, то в веб-приложениях это не допустимо (да и благодаря JavaScript невозможно).
+Единственные случаи, когда браузер может зависнуть - это от слишком больного DOM-дерева или неправильно написанного кода на JavaScript.
+
+Ознакомьтесь с основами этого интересного языка программирования в Учебнике JavaScript (главы Введение и Основы JavaScript): <https://learn.javascript.ru/>.
+Там же есть описание про средства отладки JS-кода при помощи консоли разработчика.
+
+Также про особенности слабой типизации в JavaScript и Ruby (есть и такой язык программирования) есть шуточный доклад: <https://www.destroyallsoftware.com/talks/wat>.
+Отметьте, как аудитория реагирует, когда докладчик в первый раз говорит "javascript" :)
+
+В качестве освоения консоли разработчика можете повторить примеры на JavaScript из доклада выше и убедиться в том, что JavaScript - интересный язык программирования.
+
+## Подключение JavaScript-библиотек
+
+Ранее Вы подключали каскадные таблицы стилей к Вашему веб-сайту через `<link type="stylesheet" .../>`.
+
+Сценарии JavaScript подключаются немного иначе, через элемент `<script src="site.js"></script>`.
+Заметьте, что у этого элемента обязательно следует указывать закрывающий тег.
+Иначе работать не будет.
+
+Кстати, не все библиотеки нужно скачивать к себе рядом с сайтом.
+Можно воспользоваться CDN — сетями распространения контента.
+
+Подключите таким образом в элемент `head` библиотеку SweetAlert: <https://sweetalert.js.org/>.
+На момент написания задания это можно сделать при помощи элемента `<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>`.
+
+Посмотрите, какие красивые можно сделать сообщения о чём-либо на Вашем сайте!
+
+## Написание собственного скрипта. Добавление обработки формы
+
+До этого Вы ознакомились с основами JavaScript.
+Также Вы попробовали поработать в консоли разработчика и написали там несколько команд (странно, что в этом языке нет `void Main() { }`, не так ли?).
+А ещё Вы подключили сторонние библиотеки (как минимум SweetAlert).
+
+Теперь Ваша задача следующая:
+
+- создать файл `site.js` рядом с index.html либо в отдельной папке _js_;
+- подключить файл на страницу сайта с формой по аналогии с другими библиотеками (только из атрибутов в `script` должен быть только `src`);
+- для примера написать в файле `alert('test');` и проверить, что теперь при входе на страницу с формой должно появляться сообщение;
+- убрать `alert`;
+- добавить поиск формы через `document.forms`;
+- добавить обработчик на `submit` через `.addEventListener`;
+- добавить `.preventDefault`, чтобы при сабмите (отправке) формы не перезагружалась страница сайта (такое поведение по умолчанию во всех браузерах);
+- добавить получение данных через `FormData`;
+- добавить отображение данных из формы ввода в консоль разработчика при помощи `console.log`;
+- добавить отображение сообщения о том, что данные записаны/заказ оформлен/регистрация прошла (смотря что у Вас) через sweet alert.
+- добавить sweet alert с ошибкой, если какие-либо данные на форме были введены некорректно.
+  Например, пароль короткий или количество товара отрицательное.
+
+Для понимания `FormData` и методов работы с ним можете ознакомиться со следующим материалом: <https://www.valentinog.com/blog/formdata/>.
+Также там есть код по получению формы, добавлению обработчика и т.д.
+
+Про использование _SweetAlert_ пример кода можно увидеть на сайте этой библиотеки.
+Это нормальная практика для библиотек в вебе, когда прямо на сайте о них можно посмотреть пример их работы.

lw04/README.md

@@ -0,0 +1,170 @@
+# Лабораторная работа №4 - Разворачивание локального веб-сервера (PHP)
+
+## Цель работы
+
+Изучение основных компонентов веб-сервера, локальная установка системы управления контентом (CMS).
+
+## Ход работы
+
+1. Прочитать задание лабораторной работы до конца.
+2. Скачать и установить веб-сервер и систему управления базами данных (СУБД).
+3. Создать БД для системы управления контентом (CMS).
+4. Произвести установку CMS.
+5. Настроить CMS: подобрать тему, блоки, меню и категории записей.
+6. Заполнить CMS тестовыми записями.
+7. Оформить отчёт о выполнении лабораторной работы.
+
+## Об оформлении отчёта
+
+В рамках выполнения лабораторной работы необходимо создавать скриншоты, демонстрирующие Ваши действия.
+Таким образом крайне рекомендуется перед началом выполнения работы создать документ в любом текстовом процессоре (Microsoft Word или Google Docs) и делать в нём скриншоты.
+Не стоит делать скриншот каждого клика мышкой или каждой экранной формы, но должно быть понимание, что эту работу делали Вы.
+
+_P.S. Есть множество средств сравнения изображений. Можете попытаться обмануть систему, но проще просто сделать работу :)_
+
+## Установка веб-сервера и СУБД
+
+До этого Вы писали собственный сайт, который открывается в обычном браузере из памяти Вашего компьютера.
+Возможно, некоторые из Вас также разместили сайт на статический хостинг Github Pages.
+
+Теперь пришло время научиться устанавливать собственный веб-сервер и размещать сайт на нём.
+
+**Веб-сервер** - программное обеспечение, которое служит для отображения пользователям данных в вебе.
+Прежде всего идёт речь про HTML-разметку (не обязательно на сервере хранятся файлы *.html), CSS-стили, JS-скрипты, изображения, видео-материалы и т.д.
+Основная задача веб-сервера - реализация протоколов HTTP различных версий, которые отлично воспринимаются специальными клиентскими программами - **браузерами**.
+
+Существует множество веб-серверов.
+Самые популярные из них - Apache HTTP Server, Nginx, IIS.
+
+**Apache HTTP Server** - веб-сервер с открытым исходным кодом.
+Широко расширяем, легко запускается как на UNIX-подобных системах, так и на Windows.
+Славится не очень хорошими настройками по умолчанию.
+
+**Nginx** - отечественный веб-сервер также с открытым исходным кодом.
+Очень простой и гибкий.
+Обычно служит в качестве различных прокси-серверов.
+Например, пользователи со всего Интернета могут обращаться к веб-серверу nginx, а он внутри будет перенаправлять (проксировать) запросы к другому веб-серверу (например, тому же Apache).
+Такая связка используется очень много где и помогает распределить нагрузку и увеличить отказоустойчивость системы.
+
+**IIS** - веб-сервер от Microsoft для запуска ~~начинающих устаревать~~ веб-приложений на технологиях этой корпорации.
+Запускается только в Windows и жёстко связан с этой ОС (например, использует драйвер HTTP.sys).
+У IIS закрытая реализация, однако относительно удобное администрирование.
+Также IIS считается довольно быстрым веб-сервером как раз из-за жёсткой связи с Windows.
+
+_P.S. Современные приложения на технологиях Microsoft могут запускаться не только на IIS и Windows, и это прекрасно!_
+
+Веб-сервер по умолчанию может прослушивать специальный TCP-порт (80) и отдавать запрошенные файлы из конкретной папки на диске.
+Например, можно настроить, чтобы при запросе http://127.0.0.1:80/ открывался бы файл _C:\\htdocs\\index.html_, а при http://127.0.0.1:80/test.png файл _C:\\htdocs\\test.png_.
+Это самый простой способ работы сервера - отдавать статические файлы (по аналогии со статическим хостингом Github Pages).
+
+Более сложный режим работы веб-сервера - добавление логики по обработке пользовательских запросов.
+Это и есть т.н. backend или серверная часть веб-приложения.
+Веб-приложение должно быть разработано на каком-либо языке программирования и взаимодействовать с веб-сервером.
+Пример такого взаимодействия - протокол _FastCGI_.
+
+Самый популярный язык программирования в вебе - **PHP**.
+Вышло уже много версий этого языка, и до сих пор он не потерял свою популярность благодаря широкому сообществу, низкому порогу входа и простоте установки на веб-сервер.
+Вы могли слышать много баек про PHP-программистов, однако этот язык всё равно является самым популярным в вебе.
+
+Также неотъемлемой частью бекенда является система управления базами данных, где могут храниться данные о пользователях.
+Почти у каждого в макете сайта были формы входа, регистрации, оформления заказа.
+А где эти данные должны храниться?
+Как раз в базе данных.
+
+Можно самостоятельно установить СУБД, веб-сервер, подключить к последнему язык программирования, однако существуют специальные сборки таких средств для локальной разработки и отладки.
+
+Предлагаю установить среду разработки на PHP **XAMPP**: <https://www.apachefriends.org/ru/index.html>.
+
+> Внимание! На текущий момент (март 2023) лучше устанавливать XAMPP 8 с PHP 8 внутри.
+
+При установке не забудьте снять ненужные флажки:
+
+![](xampp-1.png)
+
+> Если хотите получить графическую среду по управлению СУБД, выберите дополнительно "PhpMyAdmin".
+
+После установки среды разработки Вы сможете открыть панель управления:
+
+![](xampp-2.png)
+
+Запустите веб-сервер и СУБД и проверьте, что сайт-приветствие открывается.
+
+## Создание базы данных для CMS
+
+В мире веба не все сайты разрабатываются с нуля (как это делали вы в прошлых лабораторных работах).
+Если веб-сайт не очень сложный, например, состоящий из блога, пары изображений, пары страниц, и, может быть, страницы с заказом или оформлением доставки, то можно использовать готовые открытые разработки, настроенные под свои нужды.
+
+Выделяют класс таких систем - **систем управления контентом** (Content Management System, CMS).
+Благодаря им Вам не придётся самостоятельно создавать таблицы в базе данных, программировать работу с формами, их отображением и т.д.
+
+Самой популярной CMS является WordPress, и, вы не поверите, она написана на PHP!
+Устанавливать и конфигурировать WordPress относительно легко, поэтому займёмся этим в данной лабораторной работе.
+Полученные навыки позволяет установить любую другую CMS на Ваш выбор или выбор Вашего абстрактного заказчика.
+
+Однако перед тем, как создать собственный сайт на WordPress, необходимо создать базу данных.
+
+Перейдите в Shell из панели XAMPP.
+
+Введите команду `mysqladmin.exe -u root password %ваш-пароль%`, чтобы задать пароль системному пользователю _root_:
+
+![](shell-1.png)
+
+Далее создадите БД при помощи команд `mysql  -u root -p` и `CREATE DATABASE wordpress;`:
+
+![](shell-2.png)
+
+## Установка WordPress
+
+Для установки WordPress скачайте архив с [официального сайта](https://ru.wordpress.org/) и распакуйте его в папку _C:\\xampp\\htdocs\\_:
+
+![](wp-1.png)
+
+Далее перейдите в браузере по адресу <http://localhost/wordpress/> и начните установку.
+
+Введите в форму выбора БД данные, которые вы указали при её создании:
+
+![](wp-2.jpg)
+
+Далее продолжите установку.
+
+После окончания установки и ввода данных Вашего будущего сайта у Вас должна открыться панель администрирования:
+
+![](wp-3.jpg)
+
+В меню можно нажать на название сайта и перейти на него (ссылка есть выше).
+Взгляните на Ваш уже практически полностью настроенный сайт!
+Круто, не так ли?
+
+## Настройка и заполнение CMS
+
+Изучите возможности WordPress.
+
+Существует возможность скачивать и устанавливать темы.
+Практически любую тему можно настроить под себя: выбрать цвета, шрифты, форму блоков с данными, контент шапки, подвала и т.д.
+
+Также можно определить записи и их категории.
+Вообще запись - основная сущность WordPress.
+Синоним - новость.
+Также в WordPress есть понятие "Страница".
+Пример страниц - контакты, "обо мне", "схема проезда" и т.д.
+
+Можно настроить меню, чтобы нужные новостные категории или страницы отображались в нём в определённом порядке.
+
+Можно устанавливать плагины.
+Существуют как бесплатные дополнения, так и платные.
+Один из самых популярных - _Contact Form 7_, позволяющий создавать формы обратной связи.
+
+Для выполнения данного пункта выберите тему, настройте меню, шапку, подвал сайта, а также главную страницу согласно своей тематике.
+Попробуйте добавить несколько записей и страниц.
+Заметьте, что это намного проще, чем делать сайт с нуля.
+
+## Вопросы для рассуждения
+
+- Если CMS нетрудно настраивать и довольно легко сопровождать, почему нас учат основам вёрстки, таблиц стилей, браузерных скриптов?
+- Можно ли на CMS разработать социальную сеть?
+- Насколько быстрее будет работать сайт на CMS в отличие от написанного с нуля?
+- Как понять, когда следует использовать CMS, а когда начинать разработку "с чистого листа"?
+- Насколько безопасно использовать CMS? А собственный код? А если он ещё и написан не самым лучшим образом?
+- Что дешевле сопровождать - сайт на CMS или собственноручно написанный движок?
+- Насколько сложно сделать свою CMS? (Кстати, ваш ассистент в школе таким баловался ещё на PHP 4 или 5. Как хорошо, что этот код не сохранился...)
+- Как думаете, старый сайт политеха сделан на CMS? Отвечу сразу - [да, на разработанной в политехе же в 2005 году](http://www.sisadminov.net/main/view/article/16).

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 можно с официального сайта: <https://code.visualstudio.com/>.
+При установке можете отказаться от добавления VS Code в контекстное меню и т.д.
+Единственное, что можете оставить - это добавление в PATH, если это, конечно, будет спрашиваться при установке.
+Почитать подробнее про PATH можно тут: <https://ru.wikipedia.org/wiki/PATH_(%D0%BF%D0%B5%D1%80%D0%B5%D0%BC%D0%B5%D0%BD%D0%BD%D0%B0%D1%8F)>.
+
+## Установка .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) с официального сайта: <https://dotnet.microsoft.com/download>.
+
+> 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_ снизу будет выведено много информации.
+Скорее всего у Вас одновременно с этим запустится веб-браузер с Вашим пока ещё пустым сайтом.
+Если этого не произошло, можете поискать ссылку вида <http://localhost:5000> в выводе консоли отладки самостоятельно.
+
+> _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, которые хорошо изложены тут: <https://docs.microsoft.com/ru-ru/aspnet/core/introduction-to-aspnet-core?view=aspnetcore-7.0#recommended-learning-path>.
+
+Однако основные вещи изложу здесь, чтобы не заставлять вас сейчас читать столь сложный для понимания текст.
+
+ASP.NET Core, как и другие современные платформы для построения веб-приложений, использует принцип _pipeline_ - запрос от клиента (браузера) попадает в начало "конвейера", где затем каждый обработчик (практически любая функция на _C#_) может его или изменить, или пропустить без изменений, или остановить конвейер в зависимости от самого запроса.
+После прохождения всех обработчиков формируется ответ, который и возвращается клиенту (браузеру).
+
+Примеры обработчиков:
+
+* проверка, что запрос клиентом составлен правильно;
+* проверка доступа клиента к запрашиваемому ресурсу;
+* если по пути из запроса найден файл на веб-сервере, то можно его вернуть;
+* а если файл не найден, может какая-то подпрограмма может забрать обработку на себя?
+* "Хмм, всё, что начинается с /api, отдавайте мне, остальное мне не надо";
+* отрисовка красивых страниц об ошибках (например, 404, 403, 500 и т.д.), если прошлые обработчики сказали, что запрос был плохим;
+* обработчик-которые складывает с специальный файл информацию о запросах (логгер или служба/подсистема логирования).
+
+Как видите, обработчиков бывает много, но этот конвейер где-то надо настроить.
+В ASP.NET Core для этого существует класс _Startup.cs_ и метод _Configure_.
+Как раз в нём настраивается порядок следования обработчиков.
+
+В простейшем приложении порядок обработчиков такой:
+
+* если окружение, в котором запускается сайт, для разработки, то надо включить обработчик по отрисовке красивых страниц с подробностями ошибок;
+* необходимо включить обработчик, который сможет следить за тем, какие конкретно ресурсы запрашиваются;
+* включатся обработчик по сопоставлению путей из запросов другим обработчикам;
+* добавляется обработчик для _GET_-запросов по пути _/_: в ответ клиенту всегда пишется строка _"Hello World!"_.
+
+Можете самостоятельно поискать по коду, как описанные выше строки отображаются в исходный код на _C#_.
+
+Как видите, пока ничего сложного.
+
+Далее необходимо сопоставить наше веб-приложение (по сути это набор обработчиков запросов) с конкретным веб-сервером.
+Например, тем самым, что запускает ваше веб-приложение по адресу <http://localhost:5000>.
+
+Это делается в файле _Program.cs_ (знакомый файл?) в методе _Main_ (знакомый метод?).
+Здесь у нас настраивается хост: то есть та часть приложения, которая может предоставить доступ к вашему веб-приложения из внешнего мира.
+Другими словами, здесь и настраивается веб-сервер.
+ASP.NET Core использует лёгкий веб-сервер _Kestrel_, о котором Вы даже можете не знать.
+В этом, и в простоте настройки, и заключается его лёгкость.
+
+Таким образом, мы выяснили, что наше приложение - это набор обработчиков.
+Они настраиваются в _Startup.cs_ в специальном методе.
+Веб-сервер для доступа к нашему веб-приложению настраивается в _Program.cs_.
+
+Что находится в других файлах, можете изучить самостоятельно.
+Дам только наводку, что launchSettings необходимы для запуска веб-сервера, а appsettings - для настройки веб-приложения.
+
+## Изменение pipeline
+
+После того, как вы научились запускать простейшее веб-приложение для отладки и изучили базовые понятия конвейерной обработки в ASP.NET Core, самое время этот конвейер немного поменять.
+
+Перед вами есть пример обработчика для _GET_-запросов по пути _/_.
+
+Предлагается сделать ещё как минимум несколько обработчиков для _GET_-запросов и проверить в браузере, как они будут работать.
+Например:
+
+* При запросе _/time_ (через браузер необходимо будет перейти по адресу <http://localhost:5000/time>) должно выводиться текущее время.
+* При запросе _/whoami_ должна выводиться информация о текущем браузере.
+* При запросе _/error_ должен возвращаться такой код статуса (`StatusCode`), который придёт в query-строке в параметре _status_. Если не придёт, то отдавать код статуса _200 OK_. Тогда запрос в адресной строке браузера будет выглядеть примерно как <http://localhost:5000/error?status=403> и в этом случае выводить якобы ошибку о том, что нет доступа к ресурсу. В Панели разработчика на вкладке "Сеть" должен возвращаться код из query-параметра. 
+
+Для работы с запросом пользователя для получения информации о браузере или параметрах этого запроса следует изучить использование переменной `context`, которая передаётся в обработчик.
+Там есть свойство `.Request`, которое должно Вам помочь.

lwB1/README.md

@@ -0,0 +1,52 @@
+# Лабораторная работа №B1 - Изучение шаблона проектирования MVC
+
+## Цель работы
+
+Понимание шаблона проектирования MVC и его применения при проектировании интернет-приложений.
+
+## Ход выполнения работы
+
+Необходимо вспомнить, что говорилось на лекции про данный шаблон проектирования.
+
+Также крайне рекомендуется осознать материал отсюда:
+
+- <https://metanit.com/sharp/aspnet6/>;
+- <https://docs.microsoft.com/ru-ru/aspnet/core/mvc/overview?view=aspnetcore-7.0>.
+
+Что следует понять из представленных выше и, возможно, каких других статей:
+
+1. Какие есть компоненты в шаблоне MVC и как они зависят друг от друга.
+2. Как реализуется шаблон в ASP.NET Core.
+3. Как создавать контроллеры и представления для них.
+4. Где находится общий шаблон всех представлений и как его подключить.
+5. Как передаются параметры на действия контроллера.
+6. Что такое `wwwroot` и как использовать файлы из этой директории в веб-приложении.
+
+Что необходимо сделать для выполнения лабораторной работы:
+
+1. Создать приложение ASP.NET Core (Model-View-Controller).
+   Можно создать как через `dotnet new mvc -o test-mvc-proj`, так и через интерфейс Visual Studio.
+2. Скопировать скрипты, изображения и таблицы стилей в `wwwroot`.
+   Контент, который уже есть в этой папке, можно удалить.
+3. Заменить мастер-шаблон сайта на ваш шаблон из лабораторных работ по блоку front-end.
+   Как вы могли заметить, в замечаниях преподаватель всегда старался указать, что все страницы вашего веб-сайта должны выглядеть похожим образом.
+   Такой подход помогает потом "натянуть" вёрстку на веб-приложение как раз благодаря единому мастер-шаблону.
+   Если же у Вас несколько разных видов дизайна сайта (например, отдельно для главной страницы и для других), можно сделать несколько мастер-шаблонов.
+4. Создать контроллеры и действия в них по смыслу тех страниц, что вы сверстали.
+   Например, страницы входа и регистрации можно преобразовать в действия `Signin` и `Signup` в контроллере `Account` (класс будет называться `AccountController`).
+   Страницы по заказу можно поместить в контроллер `Order`.
+   Главная страница - это по умолчанию действие `Index` в контроллере `Home`.
+   Страницы "О сайте", "Контакты" и аналогичные также рекомендуется размещать в контроллере `Home`.
+5. Создать представления, связанные с действиями контроллеров.
+   Получить доступ к отображению представлений определённых действий можно следующим образом: `{адрес-сайта}/{контроллер}/{действие}`.
+   Действие `Index` и контроллер `Home` можно опускать из адреса.
+   Например, адрес сайта - <http://localhost:5000/> или <https://localhost:5001/>.
+   В этом случае главную страницу можно открыть по адресам <http://localhost:5000/>, <http://localhost:5000/Home/> или <http://localhost:5000/Home/Index>.
+   Страница регистрации тогда будет доступна по адресу <http://localhost:5000/Account/Signup> и никак иначе.
+6. Заполнить представления разметкой из статических файлов.
+   Как можете догадаться, вставлять надо не полную разметку файла, а только отличающуюся у страниц часть для `RenderBody`.
+7. Изменить ссылки (в меню, на страницах сайта) на новые.
+   Можно использовать новую возможность ASP.NET Core - TagHelpers.
+   [Пример использования TagHelper для ссылок тут](https://docs.microsoft.com/ru-ru/aspnet/core/mvc/views/tag-helpers/built-in/anchor-tag-helper?view=aspnetcore-7.0#asp-controller).
+8. Ещё раз проверить, что сайт запускается.
+9. Продемонстрировать работу приложения на лабораторном занятии и ответить на вопросы преподавателя.

lwB2/README.md

@@ -0,0 +1,86 @@
+# Лабораторная работа №B2 - Разработка чат-бота для Telegram
+
+## Цель работы
+
+Понять концепцию построения чат-ботов на примере Telegram.
+
+## Ход работы
+
+**Чат-бот** - программа, с которой можно общаться, будто вы общаетесь с живым (но может быть и не самым умным) собеседником.
+
+Чат-боты служат для различных целей: в качестве напоминателей (всяческие календари), подсказчиков ("не забудь заплатить за электричество!1"), информационных служб (например, "пробить авто по номеру" или "показать погоду в Ульяновске") и много чего ещё.
+
+Обычно чат-бот не умеет сам писать сообщения людям, только реагировать на сообщения от людей.
+Однако иногда допускается писать самостоятельно, если диалог с пользователем уже был когда-то инициирован.
+
+Существует множество архитектур по созданию чат-ботов для разных платформ.
+Мы же рассмотрим Telegram.
+
+Для создания нового бота необходимо... написать боту `@BotFather`!
+Он на английском языке предложит определить имя нового бота, его логин и выдаст в итоге ключ доступа к API (_token_).
+Там же будет написано, что этот ключ ни в коем случае нельзя передать кому-либо, поэтому при оформлении отчёта по этой работе, пожалуйста, **удаляйте _token_ из исходного кода и из скриншотов**.
+
+Список доступных методов для ботов Telegram перечислен здесь: <https://core.telegram.org/bots/api#available-methods>.
+Где-то там есть и описание того, как эти методы вызывать.
+Нам пока это не особо интересно, однако знать следующие вещи стоит:
+
+- бот получает обновления при помощи команды `getUpdates`.
+  Эта команда позволяет возвращать те обновления, к которым имеет доступ чат-бот.
+  Например, кто-то написал или отредактировал личное сообщение.
+  Команда позволяет получать до 100 обновлений за один вызов.
+- при вызове команды обычно требуется объект какого-то формата на вход.
+  Также обычно команда возвращает ответ в определённом формате.
+  Параметры можно сериализовать в JSON-строку.
+- если кто-то пишет чат-боту сообщения, информация об этом состоит из следующих полей: <https://core.telegram.org/bots/api#message>.
+  Как можете заметить, возвращается много информации, но там есть как минимум: ИД сообщения, текст сообщения, чат, из которого было получено сообщение, дата, прикреплённые аудио, фото и т.д.
+- если мы хотим отправить сообщение, следует вызвать метод `sendMessage`: <https://core.telegram.org/bots/api#sendmessage>.
+  Там обязательно требуется указать ИД чата и текст нашего сообщения.
+  Однако можно указать и другие поля, например, ИД сообщения, на который мы хотим ответить и список доп. кнопок для быстрых действий.
+
+Также первое сообщение боту от пользователя обычно `/start`, это также стоит помнить.
+
+Предположим, мы хотим написать диагностического бота, который будет реагировать на сообщения людей следующим образом:
+
+- на сообщение `/start` писать, что этот бот написан в качестве учебного материала и может выполнять следующие команды: ...
+- на сообщение `/who` выводит ИД чата, ИД сообщения, ИД отправителя, имя отправителя и дату отправки сообщения.
+- на сообщение `/rand %i %j` выводит случайное число между `%i` и `%j`.
+  Или сообщение об ошибке, если `%j` меньше, чем `%i`.
+- при отправке голосового сообщения должен отвечать, что он "бумер" и не понимает голосовые сообщения.
+- при отправке картинки должен всегда осыпать пользователя комплиментами по поводу красоты того, что он прислал.
+
+Забавно?
+Ещё бы.
+Осталось реализовать.
+
+Ход выполнения видится следующим:
+
+1. Регистрация бота.
+2. Обработка получения обновлений.
+3. По каждому обновлению: если оно сообщение, то разбираем содержимое сообщения.
+4. После разбора содержимого формируем ответ.
+5. Отправляем ответ на сообщение.
+
+Вроде бы всё просто, однако одновременно с этим ничего и не понятно.
+
+Здесь нам придёт на помощь сообщество ИТ-специалистов, потому что многие стандартные решения уже были реализованы до нас (или нами).
+
+Например, далеко не полный список библиотек для построения ботов для Telegram:
+
+- для C# - <https://github.com/TelegramBots/Telegram.Bot>;
+- для Python - <https://github.com/python-telegram-bot/python-telegram-bot/wiki/Extensions-%E2%80%93-Your-first-Bot>;
+- для Java - <https://github.com/pengrad/java-telegram-bot-api>;
+- для Go - <https://github.com/go-telegram-bot-api/telegram-bot-api>.
+
+Ваши задачи на эту лабораторную работу:
+
+- определиться с любимым языком программирования;
+- найти популярную реализацию библиотеки для создания чат-бота в Telegram;
+- зарегистрировать чат-бота;
+- подключить чат-бота к библиотеке и проверить, что обновления приходят;
+- попытаться хоть что-нибудь ответить самому себе через программу (хотя бы тем же самым сообщением);
+- дополнить обработку ответов уже тем, что описано выше в тексте лабораторной работы;
+- продемонстрировать работу.
+
+## Демонстрация работы
+
+Демонстрация работы предполагает запуск бота и проверку его ответов на сообщения преподавателя в режиме реального времени.

lwF1/README.md

@@ -0,0 +1,215 @@
+# Лабораторная работа №F1 - Одностраничное приложение (React)
+
+## Цель работы
+
+Освоение среды локальной фронтенд-разработки на базе NodeJS.
+Освоение языка программирования TypeScript.
+Освоение библиотеки React.
+
+## Ход работы
+
+1. Развернуть локальную среду разработки для создания React-приложений.
+2. Создать шаблон React-приложения с использованием языка TypeScript.
+3. Изменить шаблон, добавив несколько компонентов с пропсами различного типа.
+
+## Настройка среды разработки
+
+Необходимо установить следующий софт:
+
+1. NodeJS: <https://nodejs.org/en/download/>.
+2. Visual Studio Code: <https://code.visualstudio.com/download>.
+3. Google Chrome с расширением React Developer Tools: <https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=ru>.
+
+Всё представленное ПО является бесплатным и свободным для некоммерческого использования.
+
+Чтобы проверить установку NodeJS, выполните в терминале следующие команды.
+Вывод должен быть похож на представленный ниже.
+
+```bash
+$ node --version
+v16.13.2
+$ npx --version
+8.1.2
+```
+
+> Если при выполнении команды отображается номер версии - всё хорошо.
+> Если нет, то, возможно, необходимо перезагрузить ПК и попробовать ещё раз.
+
+## Создание первого React-приложения
+
+Для создания первого React-приложения выполните следующую команду: `npx create-react-app lwF1 --template=typescript`.
+Она запускает создание простейшего React-приложения с использованием TypeScript в папке lwF1.
+Собственно, приложение также будет называться lwF1. 
+
+В конце должно возникнуть сообщение `Happy hacking!`.
+
+Для выполнения данного желания необходимо перейти в созданный каталог (`cd lwF1`) и запустить VS Code в этой папке (`code .`).
+
+Если более подробно рассматривать CRA-шаблон, то можно выделить следующие файлы и каталоги:
+
+- `node_modules` - огромный каталог, где содержатся исходные тексты подключаемых библиотек.
+- `public` - изображения, манифесты и прочие статические файлы, которые необходимо для отображения нашего веб-приложения. Также содержит основной документ, куда будет внедряться наше React-приложение: `index.html`.
+- `src` - таблицы стилей и компоненты, связанные с нашим React-приложением.
+- `package-lock.json` - связь библиотек из `node_modules` с нашим приложением.
+- `package.json` - конфигурация приложения.
+- `tsconfig.json` - конфигурация компилятора TypeScript.
+
+Для запуска приложения необходимо в терминале (возможно запустить его прямо внутри VS Code) команду `npm run start`.
+Должен открыться браузер с анимированным логотипом реакта.
+
+Не завершая приложения, измените какой-нибудь текст в файле `src/App.tsx`, сохраните файл и убедитесь, что в браузере сайт автоматически изменился.
+
+## Изучение TypeScript
+
+TypeScript -- это диалект ECMAScript, в котором добавлена строгая (насколько это возможно) типизация.
+Другими словами, это "JavaScript с типами".
+
+Чтобы понять, что это такое, можете посетить официальный сайт технологии: <https://www.typescriptlang.org/docs/handbook/intro.html>.
+Можно почитать эту страницу и другие до _Type Manipulation_.
+
+Также рассмотрите файл `src/App.tsx`.
+Благодаря TypeScript среда Visual Studio Code позволяет подсказывать атрибуты у элементов.
+Кстати, заметьте, что в tsx-файле (аналог js-файла) прямо внутри JS-кода расположена разметка HTML.
+Странно, не так ли?
+
+## Изучение React
+
+Для понимания того, что такое React, рекомендуется ознакомиться с официальной документацией: <https://ru.reactjs.org/docs/getting-started.html> и <https://ru.reactjs.org/tutorial/tutorial.html>.
+Знакомство с React очень подробное и понятное.
+Вам стоит понять, чем разработка на React отличается от той разработки приложений, что была у вас до этого.
+
+## Создание своих компонентов
+
+Когда вы разобрались, что такое компоненты, давайте добавим собственный.
+Предположим, мы хотим добавить компонент, который будет показывать кнопку со счётчиком нажатия.
+Для этого в папке `src` можно добавить файл `Counter.tsx` и написать туда следующий код:
+
+```tsx
+import React from 'react'; // Подключение react.
+
+var Counter = () => {
+    return (
+        <div>Тут будет счётчик.</div>
+    );
+};
+export default Counter;
+```
+
+На текущий момент весь компонент - это один статический `<div>`-элемент с текстом "Тут будет счётчик" без какой-либо внутренней логики.
+Чтобы добавить только что созданный компонент в приложение, в `App.tsx` в начале добавьте ссылку на компонент (`import Counter from './Counter';`) и добавьте в разметку рендер компонента (`<Counter />`).
+
+Теперь поговорим про состояние нашего компонента.
+Так как у нас компонент-счётчик, то значение счётчика и есть наше "состояние".
+
+С состоянием можно работать через хук `useState`.
+Чтобы объявить состояние-число, необходимо в начале функции в нашем компоненте (до `return (`) объявить переменную счётчик и функцию по обновлению состояния.
+Также сразу заиспользуем переменную с состоянием в разметке нашего компонента:
+
+```tsx
+import React from 'react';
+import { useState } from 'react'; // Подключаем ссылку на useState.
+
+var Counter = () => {
+    var [ count, setCount ] = useState(0); // И используем. Значение по умолчанию - 0.
+    return (
+        <div>Значение счётчика: {count}.</div>
+    );
+};
+export default Counter;
+```
+
+Пока у нас нет логики по изменению состояния, поэтому всегда будет отображаться то число, которое указано в `useState`.
+
+Добавим же её!
+
+Сперва добавим кнопку в фукнцию рендера.
+Сразу установим событие по клику на кнопку:
+
+```tsx
+return (
+    <div>
+        <div>Значение счётчика: {count}.</div>
+        <button onClick={handleIncrease}>Прибавить 1</button>
+    </div>
+);
+```
+
+Этот код изначально работать не будет, так как не объявлена функция-обработчик `handleIncrease`.
+Добавим её (до `return (`):
+
+```tsx
+var handleIncrease = () => {
+    setCount(count + 1);
+};
+```
+
+Код должен заработать!
+
+Как видите, компонент в реакте - это функция, которая обычно выполняет какую-либо логику и возвращает разметку (тот самый HTML внутри JS).
+Сам движок React следит за состояниями компонентов и отрисовку их разметки: элементов.
+Программирование клиентских приложений превращается от манипуляции с DOM-деревом в манипуляцию с состояниями и пропсами компонентов.
+А что же такое пропсы?
+
+## Пропсы
+
+Давайте изменим пример.
+Пускай мы можем передать в компонент `Counter` начальное значение счётчика и шаг его изменения.
+
+Изменим код в `App.tsx`: `<Counter start={10} step={5} />`.
+Приложение пока не будет запускаться, потому что мы объявили значения атрибутов, которые не описали.
+
+Опишем же их!
+В `Counter.tsx` добавим перед объявлением блоков интерфейс и заиспользуем его в описании компонента:
+
+```tsx
+interface CounterProps {
+    start: number;
+    step: number;
+}
+
+var Counter = (props: CounterProps) => {
+```
+
+Теперь код работает, однако значения наших параметров игнорируются, потому что мы их не используем.
+
+Добавьте использование параметров самостоятельно.
+
+Теперь создадим отдельный компонент под кнопку.
+Это нужно, например, если на сайте все кнопки должны иметь одинаковое поведение и одинаковый внешний вид.
+
+Допустим, заглушка для кнопки будет такая:
+
+```tsx
+import React from 'react';
+
+interface ButtonProps {
+    text: string;
+    onClick: () => any; // TODO: Что это за пропс?
+}
+
+var Button = (props: ButtonProps) => {
+    return (
+        <button onClick={/* ??? */}>{props.text}</button>
+    );
+};
+export default Button;
+```
+
+Вам необходимо самостоятельно понять, что за `onClick` и что необходимо прописать в разметке, чтобы оно заработало.
+Также следует заиспользовать компонент в `Counter.tsx` вместо `<button>...</button>`.
+
+## Демонстрация работы
+
+Демонстрация работы производится на лабораторном занятии.
+
+Если у Вас есть навык по работе с git, рекомендуется выложить код в публичный репозиторий и тем самым продемонстрировать навык использования этой технологии.
+В этом случае добавьте, пожалуйста, файл `.gitignore`, контент которого можно взять [отсюда](https://github.com/github/gitignore/blob/master/Node.gitignore).
+
+Если же у Вас нет навыка работы с git, то можете сформировать архив с кодом лабораторной работы или напрямую загрузить исходные тексты в облачное хранилище, чтобы потом перенести их на лабораторные компьютеры.
+Однако помните при этом, что **необходимо удалить папку `node_modules`**.
+В ней содержатся исходные тексты всех подключённых библиотек (и библиотек, подключённым к библиотекам, и .... и так далее, в общем), которые на проверку отправлять не нужно.
+
+## Сдача лабораторной работы
+
+На лабораторных ПК должен быть установлен NodeJS и VS Code.
+Поэтому React-приложение необходимо будет продемонстрировать вместе с его кодом.

lwF2/README.md

@@ -0,0 +1,66 @@
+# Лабораторная работа №F2 - Получение данных через API (Fetch)
+
+## Цель работы
+
+Освоить получение данных через fetch API и отображение данных на клиенте.
+
+## Ход выполнения работы
+
+1. Найти документацию по интеграции с API Github.
+2. Изучить fetch API и Promise в Javascript.
+3. Создать приложение React с шаблоном TypeScript.
+4. Описать интерфейс репозитория Github и состояние компонента со списком репозиториев.
+5. Реализовать метод получения данных о репозиториях пользователя и сохранение их в состоянии.
+6. Релизовать отображение списка репозиториев.
+
+## Документация API Github
+
+Описание ресурсоа API Github можно найти здесь: <https://docs.github.com/en/rest>.
+
+Пример данных со списком репозиториев пользователя _vladdy-moses_: <https://api.github.com/users/vladdy-moses/repos>.
+
+В качестве примера можно использовать любого пользователя, количество публичных репозиториев у которого больше трёх. 
+
+## Метод получения данных
+
+В качестве базы будет использоваться приложение из л/р №F1.
+
+Пусть в `App.tsx` будут выводиться карточки со списком репозиториев.
+
+Для того, чтобы это сделать, надо:
+
+1. Объявить интерфейс с информацией о репозитории: названии, описании, ссылке на github.
+2. Создать асинхронный метод по получению данных от API при помощи fetch API.
+3. Добавить вывод от API в `console.log` и вызвать метод, чтобы убедиться, что он работает.
+
+Получение данных надо реализовать при помощи Fetch API.
+Информацию можно получить здесь: <https://developer.mozilla.org/ru/docs/Web/API/Fetch_API>.
+
+Пример функции:
+
+```tsx
+let getData = () => {
+    fetch(`https://api.github.com/users/vladdy-moses/repos`)
+    .then(res => res.json())
+    .then((res: GithubRepo[]) => {
+        console.log(res);
+    })
+};
+```
+
+## Добавление состояния и вывод данных на экран
+
+Проведите самостоятельно.
+
+В качестве состояния можете использовать массив элементов с интерфейсом `GithubRepo`.
+В работе №F1 состоянием счётчика было "текущее количество".
+В этой же работе состоянием компонента "приложение" будет "массив репозиториев, полученный через API".
+
+Должно получиться что-то наподобие этого:
+
+![](example.png)
+
+
+## Защита лабораторной работы
+
+Как и с л/р №F1, её работу необходимо продемонстрировать на лабораторном занятии.