Compare commits
No commits in common. "a7e62d1dc5ab2ac52ca4c1c13d4ed860453e8b92" and "8cfe3a48d0bdb2c6e9730cfbed6977d2daea4021" have entirely different histories.
a7e62d1dc5
...
8cfe3a48d0
18
README.md
18
README.md
@ -6,7 +6,7 @@
|
||||
|
||||
1. Лабораторные работы выполняются в аудитории или дистанционно.
|
||||
2. Посещать лабораторные занятия обязательно только для сдачи работ.
|
||||
3. Лабораторная работа считается завершённой, если в [таблице с прогрессом](https://files.ulstu.ru/s/WidAoc9F8BwinRc) есть об этом отметка.
|
||||
3. Лабораторная работа считается завершённой, если в [таблице с прогрессом](https://disk.yandex.ru/i/P3tpkqqVJWgmKg) есть об этом отметка.
|
||||
4. Для выполнения п.3 необходимо показать преподавателю выполненное задание во время лабораторного занятия.
|
||||
5. Во время защиты лабораторной работы преподаватель может спрашивать или просить что-то исправить по теме Вашей работы.
|
||||
6. Иных отчётов помимо Вашего кода или других артефактов, необходимых для выполнения задания, предоставлять не надо.
|
||||
@ -17,17 +17,17 @@
|
||||
Обязательные лабораторные работы:
|
||||
|
||||
* [Лабораторная работа №1 - Создание макета сайта (Figma)](/lw01/README.md)
|
||||
* [Лабораторная работа №2 - Вёрстка сайта (HTML, CSS)](/lw02/README.md)
|
||||
* [Лабораторная работа №3 - Динамика сайта (JavaScript)](/lw03/README.md)
|
||||
* [Лабораторная работа №4 - Разворачивание локального веб-сервера (PHP)](/lw04/README.md)
|
||||
* [Лабораторная работа №5 - Создание веб-приложения при помощи ASP.NET Core](/lw05/README.md)
|
||||
* [Лабораторная работа №2 - Вёрстка сайта (HTML, CSS)](/TODO/README.md)
|
||||
* [Лабораторная работа №3 - Динамика сайта (JavaScript)](/TODO/README.md)
|
||||
* [Лабораторная работа №4 - Разворачивание локального веб-сервера (PHP)](/TODO/README.md)
|
||||
* [Лабораторная работа №5 - Создание веб-приложения при помощи ASP.NET Core](/TODO/README.md)
|
||||
|
||||
Лабораторные работы на выбор:
|
||||
|
||||
* [Лабораторная работа №F1 - Одностраничное приложение (React)](/lwF1/README.md)
|
||||
* [Лабораторная работа №F2 - Получение данных через API (Fetch)](/lwF2/README.md)
|
||||
* [Лабораторная работа №B1 - Изучение шаблона проектирования MVC](/lwB1/README.md)
|
||||
* [Лабораторная работа №B2 - Разработка чат-бота для Telegram](/lwB2/README.md)
|
||||
* [Лабораторная работа №F1 - Одностраничное приложение (React)](/TODO/README.md)
|
||||
* [Лабораторная работа №F2 - Получение данных через API (Fetch)](/TODO/README.md)
|
||||
* [Лабораторная работа №B1 - Изучение шаблона проектирования MVC](/TODO/README.md)
|
||||
* [Лабораторная работа №B2 - Разработка чат-бота для Telegram](/TODO/README.md)
|
||||
|
||||
## Правила допуска до экзамена
|
||||
|
||||
|
||||
218
lw02/README.md
218
lw02/README.md
@ -1,218 +0,0 @@
|
||||
# Лабораторная работа №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.
|
||||
@ -1,97 +0,0 @@
|
||||
# Лабораторная работа №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_ пример кода можно увидеть на сайте этой библиотеки.
|
||||
Это нормальная практика для библиотек в вебе, когда прямо на сайте о них можно посмотреть пример их работы.
|
||||
170
lw04/README.md
170
lw04/README.md
@ -1,170 +0,0 @@
|
||||
# Лабораторная работа №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 внутри.
|
||||
|
||||
При установке не забудьте снять ненужные флажки:
|
||||
|
||||
|
||||
|
||||
> Если хотите получить графическую среду по управлению СУБД, выберите дополнительно "PhpMyAdmin".
|
||||
|
||||
После установки среды разработки Вы сможете открыть панель управления:
|
||||
|
||||
|
||||
|
||||
Запустите веб-сервер и СУБД и проверьте, что сайт-приветствие открывается.
|
||||
|
||||
## Создание базы данных для CMS
|
||||
|
||||
В мире веба не все сайты разрабатываются с нуля (как это делали вы в прошлых лабораторных работах).
|
||||
Если веб-сайт не очень сложный, например, состоящий из блога, пары изображений, пары страниц, и, может быть, страницы с заказом или оформлением доставки, то можно использовать готовые открытые разработки, настроенные под свои нужды.
|
||||
|
||||
Выделяют класс таких систем - **систем управления контентом** (Content Management System, CMS).
|
||||
Благодаря им Вам не придётся самостоятельно создавать таблицы в базе данных, программировать работу с формами, их отображением и т.д.
|
||||
|
||||
Самой популярной CMS является WordPress, и, вы не поверите, она написана на PHP!
|
||||
Устанавливать и конфигурировать WordPress относительно легко, поэтому займёмся этим в данной лабораторной работе.
|
||||
Полученные навыки позволяет установить любую другую CMS на Ваш выбор или выбор Вашего абстрактного заказчика.
|
||||
|
||||
Однако перед тем, как создать собственный сайт на WordPress, необходимо создать базу данных.
|
||||
|
||||
Перейдите в Shell из панели XAMPP.
|
||||
|
||||
Введите команду `mysqladmin.exe -u root password %ваш-пароль%`, чтобы задать пароль системному пользователю _root_:
|
||||
|
||||
|
||||
|
||||
Далее создадите БД при помощи команд `mysql -u root -p` и `CREATE DATABASE wordpress;`:
|
||||
|
||||
|
||||
|
||||
## Установка WordPress
|
||||
|
||||
Для установки WordPress скачайте архив с [официального сайта](https://ru.wordpress.org/) и распакуйте его в папку _C:\\xampp\\htdocs\\_:
|
||||
|
||||
|
||||
|
||||
Далее перейдите в браузере по адресу <http://localhost/wordpress/> и начните установку.
|
||||
|
||||
Введите в форму выбора БД данные, которые вы указали при её создании:
|
||||
|
||||
|
||||
|
||||
Далее продолжите установку.
|
||||
|
||||
После окончания установки и ввода данных Вашего будущего сайта у Вас должна открыться панель администрирования:
|
||||
|
||||
|
||||
|
||||
В меню можно нажать на название сайта и перейти на него (ссылка есть выше).
|
||||
Взгляните на Ваш уже практически полностью настроенный сайт!
|
||||
Круто, не так ли?
|
||||
|
||||
## Настройка и заполнение 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).
|
||||
BIN
lw04/shell-1.png
BIN
lw04/shell-1.png
Binary file not shown.
|
Before Width: | Height: | Size: 7.7 KiB |
BIN
lw04/shell-2.png
BIN
lw04/shell-2.png
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
BIN
lw04/wp-1.png
BIN
lw04/wp-1.png
Binary file not shown.
|
Before Width: | Height: | Size: 82 KiB |
BIN
lw04/wp-2.jpg
BIN
lw04/wp-2.jpg
Binary file not shown.
|
Before Width: | Height: | Size: 64 KiB |
BIN
lw04/wp-3.jpg
BIN
lw04/wp-3.jpg
Binary file not shown.
|
Before Width: | Height: | Size: 174 KiB |
BIN
lw04/xampp-1.png
BIN
lw04/xampp-1.png
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
BIN
lw04/xampp-2.png
BIN
lw04/xampp-2.png
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB |
197
lw05/README.md
197
lw05/README.md
@ -1,197 +0,0 @@
|
||||
# Лабораторная работа №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_ - название будущего приложения. Можете использовать своё название.
|
||||
|
||||
В результате выполненных шагов в вашей папке создастся ещё одна папка, в которой будет примерно следующий набор файлов:
|
||||
|
||||
|
||||
|
||||
Если у Вас также, то значит всё хорошо.
|
||||
|
||||
## Настройка Visual Studio Code для отладки приложения
|
||||
|
||||
Теперь пришло время соединить предыдущие пункты.
|
||||
|
||||
Для этого перейдите в консоли в папку с приложением.
|
||||
В примере выше это будет _d:\labworks\ip\hw-app_.
|
||||
После этого наберите команду `code .`.
|
||||
Это должно запустить Visual Studio Code с открытой папкой с проектом, т.е. в дереве файлов должны быть те же файлы, что и на снимке экрана выше.
|
||||
Если этого не произошло, Вы можете самостоятельно открыть папку через меню _File_ -> _Open Folder_.
|
||||
|
||||
Если Вы зайдёте в файл _.csproj_, VS Code снизу справа предложит установить необходимые расширения для работы с такими файлами.
|
||||
Установите расширение _C#_.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Возможно придётся перезагрузить VS Code.
|
||||
|
||||
После этого возникнет подсказка о добавлении необходимых задач для найденного проекта на языке C#.
|
||||
Можете смело их добавить.
|
||||
|
||||
|
||||
|
||||
В итоге должна создаться папка _.vscode_ с двумя файлами.
|
||||
|
||||
Теперь, пока не вдаваясь в подробности кучи сгенерированного кода, зайдите в _Startup.cs_ и поставьте точку останова после `endpoints.MapGet("/",...`.
|
||||
|
||||
|
||||
|
||||
При нажатии на F5 у Вас должен запуститься веб-сервер: в _Debug Console_ снизу будет выведено много информации.
|
||||
Скорее всего у Вас одновременно с этим запустится веб-браузер с Вашим пока ещё пустым сайтом.
|
||||
Если этого не произошло, можете поискать ссылку вида <http://localhost:5000> в выводе консоли отладки самостоятельно.
|
||||
|
||||
> _localhost_ - это домен локального ПК.
|
||||
> Никто другой Ваш сайт по такому адресу не увидит.
|
||||
|
||||
Заметьте, что выполнение программы остановилось в точке останова:
|
||||
|
||||
|
||||
|
||||
Если у вас всё работает похожим образом, значит всё настроено правильно.
|
||||
|
||||
## Изучение основных концепций 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`, которое должно Вам помочь.
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 169 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 162 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
@ -1,52 +0,0 @@
|
||||
# Лабораторная работа №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. Продемонстрировать работу приложения на лабораторном занятии и ответить на вопросы преподавателя.
|
||||
@ -1,86 +0,0 @@
|
||||
# Лабораторная работа №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;
|
||||
- зарегистрировать чат-бота;
|
||||
- подключить чат-бота к библиотеке и проверить, что обновления приходят;
|
||||
- попытаться хоть что-нибудь ответить самому себе через программу (хотя бы тем же самым сообщением);
|
||||
- дополнить обработку ответов уже тем, что описано выше в тексте лабораторной работы;
|
||||
- продемонстрировать работу.
|
||||
|
||||
## Демонстрация работы
|
||||
|
||||
Демонстрация работы предполагает запуск бота и проверку его ответов на сообщения преподавателя в режиме реального времени.
|
||||
215
lwF1/README.md
215
lwF1/README.md
@ -1,215 +0,0 @@
|
||||
# Лабораторная работа №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-приложение необходимо будет продемонстрировать вместе с его кодом.
|
||||
@ -1,66 +0,0 @@
|
||||
# Лабораторная работа №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".
|
||||
|
||||
Должно получиться что-то наподобие этого:
|
||||
|
||||
|
||||
|
||||
|
||||
## Защита лабораторной работы
|
||||
|
||||
Как и с л/р №F1, её работу необходимо продемонстрировать на лабораторном занятии.
|
||||
BIN
lwF2/example.png
BIN
lwF2/example.png
Binary file not shown.
|
Before Width: | Height: | Size: 71 KiB |
Loading…
Reference in New Issue
Block a user