diff --git a/README.md b/README.md index 255cdf0..989a2e8 100644 --- a/README.md +++ b/README.md @@ -17,9 +17,9 @@ Обязательные лабораторные работы: * [Лабораторная работа №1 - Создание макета сайта (Figma)](/lw01/README.md) -* [Лабораторная работа №2 - Вёрстка сайта (HTML, CSS)](/TODO/README.md) -* [Лабораторная работа №3 - Динамика сайта (JavaScript)](/TODO/README.md) -* [Лабораторная работа №4 - Разворачивание локального веб-сервера (PHP)](/TODO/README.md) +* [Лабораторная работа №2 - Вёрстка сайта (HTML, CSS)](/lw02/README.md) +* [Лабораторная работа №3 - Динамика сайта (JavaScript)](/lw03/README.md) +* [Лабораторная работа №4 - Разворачивание локального веб-сервера (PHP)](/lw04/README.md) * [Лабораторная работа №5 - Создание веб-приложения при помощи ASP.NET Core](/TODO/README.md) Лабораторные работы на выбор: @@ -27,7 +27,7 @@ * [Лабораторная работа №F1 - Одностраничное приложение (React)](/TODO/README.md) * [Лабораторная работа №F2 - Получение данных через API (Fetch)](/TODO/README.md) * [Лабораторная работа №B1 - Изучение шаблона проектирования MVC](/TODO/README.md) -* [Лабораторная работа №B2 - Разработка чат-бота для Telegram](/TODO/README.md) +* [Лабораторная работа №B2 - Разработка чат-бота для Telegram](/lwB2/README.md) ## Правила допуска до экзамена diff --git a/lw02/README.md b/lw02/README.md new file mode 100644 index 0000000..be57c8e --- /dev/null +++ b/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, песочницу для проверки вёрстки и не только - . + +См. следующий материал: + +- HTML5 и CSS3 на примерах - https://webref.ru/layout/html5-css3 +- Справочник по HTML - http://htmlbook.ru/html + +## Создание документа HTML + +На основании макета, выполненного в рамках лабораторной работы №1, необходимо добавить в HTML-документ элементы. + +Главный документ должен иметь название `index.html`. +Если макетом планируется создание нескольких страниц, то они должны называться аналогичным образом на английском языке. +Например, `orders.html`, `feedback.html` или `sitemap.html`. + +При вёрстке Вашего макета не бойтесь объединять элементы в контейнеры и присваивать им классы как общие на несколько блоков, так и индивидуальные под каждый блок. + +Также можно сначала добавлять элементы без стилизации, а затем уже приниматься за "наведение красоты". +Или же сразу добавлять стили к только что созданным элементам. + +Пример сайта из материалов, сделанных на практике: . +Если посмотрите код страницы, то не увидите ничего сложного. + +## Вставка картинок из макета + +В макете есть возможность выгружать группу элементов как изображение. +Для этого в панели свойств есть меню "Export", где можно выбрать параметры выгрузки. + +Стоит обратить внимание на следующие особенности: + +- Если вы экспортируете иконку, где много векторной графики, т.е. графических примитивов (линий, фигур, заливки и проч.), то следует выбирать формат SVG. +- Если вы экспортируете изображение, где есть растр, т.е сетка пикселей, то следует выбирать формат JPG. + +Также удобно называть слой с экспортируемым изображением на английском языке, т.к. название выгружаемого изображения будет с ним совпадать. + +Например, при экспорте слоя "site-logo" в формат SVG создастся файл `site-logo.svg`, который можно будет подключить к HTML-документу при помощи элемента `Логотип`. + +## Подключение каскадных таблиц стилей CSS и пример + +Подключение таблицы стилей в head-элементе страницы: + +```html + +``` + +Пример таблицы стилей 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: . + +Самоучитель по CSS можно найти по ссылке . +Справочник по правилам CSS там же: . + +## Flexbox + +Flexbox – новая система позиционирования элементов в CSS. +С её помощью можно гибко настроить как положение элемента в контейнере, так и его поведение в зависимости от различных параметров, например, объёма содержимого. + +Подробнее можно ознакомиться по этой ссылке: . + +Нам Flexbox поможет настроить положение отдельных элементов в контейнере для настольной и мобильной вёрстки. + +В лабораторной работе предполагается, что те места, где в макете содержимое расположено в несколько колонок, они будут стилизованы через Flexbox. + +## Адаптивная вёрстка + +Адаптивность в стилизации — свойство адаптироваться под различные устройства. + +Логично предположить, что если одна и та же страница выглядит одинаково для различных устройств (смартфон, часы, компьютер, планшет, 4К-телевизор), то, скорее всего, она везде будет смотреться ужасно. + +Сейчас дизайнерам необходимо формировать несколько макетов для различных устройств, а верстальщикам - несколько вариантов вёрстки. +Однако такой подход довольно трудозатратен, поэтому можно сделать одну вёрстку, но так, чтобы только при помощи стилей её можно было "подправить" под вид на конкретном устройстве. + +Это можно сделать при помощи `@media`-запросов. +С помощью них можно указать, при каких условиях соблюдаются те или иные правила стилизации. + +Например, изменение главной линии, относительно которой встраивается меню сайта, для мобильных устройств можно переопределить следующим запросом: + +```css +@media (max-width: 1020px) { + nav { + flex-direction: column; + } +} +``` + +При помощи `display: none` можно полностью скрывать элементы при определённых условиях. +Например, так можно скрывать меню для печати страницы или изображения для мобильных версий страниц. + +Все переопределённые элементы из примера, который разбирался на практике, можно найти тут: . + +В лабораторной работе предлагается аналогичным образом дополнить некоторые правила для мобильного вида сайта, чтобы он был похож на соответствующий frame из макета. + +## Дополнительные темы для самостоятельного изучения + +Если вам интересна интернет-вёрстка, можете изучить самостоятельно следующие темы: + +- Анимация в CSS3. +- Переменные в CSS3. +- Препроцессоры CSS: LESS, SASS/SCSS. diff --git a/lw03/README.md b/lw03/README.md new file mode 100644 index 0000000..3c2c68f --- /dev/null +++ b/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: . +Особенно обратите внимание на первые 6 страниц. + +Проверьте, что на ваших формах есть необходимые элементы: элемент form, поля ввода, кнопка в виде button или ``. +Также убедитесь, что у полей ввода есть аттрибуты name, которые уникальны для каждого поля в рамках одной формы. + +## Необходимость JavaScript и отладка приложений JS + +Сейчас страницы написанного вами сайта статичны - в них нет интерактивных элементов. +Однако если вы зайдёте на популярные сайты, то можете увидеть, что они динамичны - на кнопки можно нажать, при клике на некоторые элементы появляются другие и т.п. +Для этого используется язык программирования JavaScript, код которого (его называют _скриптами_ или _сценариями_) выполняется в браузере каждого пользователя вашего сайта. + +JavaScript — слаботипизированный мультипарадигменный язык программирования. +Это означает, что в нём есть работа с типами данных, но от разработчика не требуется строгое соответствие типам (например, можно складывать числа со строками и ничего плохо не случится, как, к слову, и хорошего). + +Синтаксис JS похож на любой си-подобный язык (C / C++ / C#), однако при работе с ним особенно часто применяется асинхронный подход к обработке данных. +Об этом стоит знать и помнить, если вы обмениваетесь данными с веб-сервером. +Из-за особенностей связи и реализации бекенда (кода на серверной стороне) наши запросы могут обрабатываться медленно, и на момент ожидания мы не должны блокировать работу пользователя с нашим веб-сайтом. +Если в desktop-приложениях при долгих операциях можно сделать, чтобы приложение "зависло" в ожидании какого-либо запроса, то в веб-приложениях это не допустимо (да и благодаря JavaScript невозможно). +Единственные случаи, когда браузер может зависнуть - это от слишком больного DOM-дерева или неправильно написанного кода на JavaScript. + +Ознакомьтесь с основами этого интересного языка программирования в Учебнике JavaScript (главы Введение и Основы JavaScript): . +Там же есть описание про средства отладки JS-кода при помощи консоли разработчика. + +Также про особенности слабой типизации в JavaScript и Ruby (есть и такой язык программирования) есть шуточный доклад: . +Отметьте, как аудитория реагирует, когда докладчик в первый раз говорит "javascript" :) + +В качестве освоения консоли разработчика можете повторить примеры на JavaScript из доклада выше и убедиться в том, что JavaScript - интересный язык программирования. + +## Подключение JavaScript-библиотек + +Ранее Вы подключали каскадные таблицы стилей к Вашему веб-сайту через ``. + +Сценарии JavaScript подключаются немного иначе, через элемент ``. +Заметьте, что у этого элемента обязательно следует указывать закрывающий тег. +Иначе работать не будет. + +Кстати, не все библиотеки нужно скачивать к себе рядом с сайтом. +Можно воспользоваться CDN — сетями распространения контента. + +Подключите таким образом в элемент `head` библиотеку SweetAlert: . +На момент написания задания это можно сделать при помощи элемента ``. + +Посмотрите, какие красивые можно сделать сообщения о чём-либо на Вашем сайте! + +## Написание собственного скрипта. Добавление обработки формы + +До этого Вы ознакомились с основами 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` и методов работы с ним можете ознакомиться со следующим материалом: . +Также там есть код по получению формы, добавлению обработчика и т.д. + +Про использование _SweetAlert_ пример кода можно увидеть на сайте этой библиотеки. +Это нормальная практика для библиотек в вебе, когда прямо на сайте о них можно посмотреть пример их работы. diff --git a/lw04/README.md b/lw04/README.md new file mode 100644 index 0000000..d9b4226 --- /dev/null +++ b/lw04/README.md @@ -0,0 +1,171 @@ +# Лабораторная работа №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**: . + +> Внимание! На текущий момент (март 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) + +Далее перейдите в браузере по адресу и начните установку. + +Введите в форму выбора БД данные, которые вы указали при её создании: + +![](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). + diff --git a/lw04/shell-1.png b/lw04/shell-1.png new file mode 100644 index 0000000..96a7096 Binary files /dev/null and b/lw04/shell-1.png differ diff --git a/lw04/shell-2.png b/lw04/shell-2.png new file mode 100644 index 0000000..3259fa1 Binary files /dev/null and b/lw04/shell-2.png differ diff --git a/lw04/wp-1.png b/lw04/wp-1.png new file mode 100644 index 0000000..fd29f9e Binary files /dev/null and b/lw04/wp-1.png differ diff --git a/lw04/wp-2.jpg b/lw04/wp-2.jpg new file mode 100644 index 0000000..cda498a Binary files /dev/null and b/lw04/wp-2.jpg differ diff --git a/lw04/wp-3.jpg b/lw04/wp-3.jpg new file mode 100644 index 0000000..884a22a Binary files /dev/null and b/lw04/wp-3.jpg differ diff --git a/lw04/xampp-1.png b/lw04/xampp-1.png new file mode 100644 index 0000000..e2950f4 Binary files /dev/null and b/lw04/xampp-1.png differ diff --git a/lw04/xampp-2.png b/lw04/xampp-2.png new file mode 100644 index 0000000..beb492a Binary files /dev/null and b/lw04/xampp-2.png differ diff --git a/lwB2/README.md b/lwB2/README.md new file mode 100644 index 0000000..84c6f6a --- /dev/null +++ b/lwB2/README.md @@ -0,0 +1,86 @@ +# Лабораторная работа №B2 - Разработка чат-бота для Telegram + +## Цель работы + +Понять концепцию построения чат-ботов на примере Telegram. + +## Ход работы + +**Чат-бот** - программа, с которой можно общаться, будто вы общаетесь с живым (но может быть и не самым умным) собеседником. + +Чат-боты служат для различных целей: в качестве напоминателей (всяческие календари), подсказчиков ("не забудь заплатить за электричество!1"), информационных служб (например, "пробить авто по номеру" или "показать погоду в Ульяновске") и много чего ещё. + +Обычно чат-бот не умеет сам писать сообщения людям, только реагировать на сообщения от людей. +Однако иногда допускается писать самостоятельно, если диалог с пользователем уже был когда-то инициирован. + +Существует множество архитектур по созданию чат-ботов для разных платформ. +Мы же рассмотрим Telegram. + +Для создания нового бота необходимо... написать боту `@BotFather`! +Он на английском языке предложит определить имя нового бота, его логин и выдаст в итоге ключ доступа к API (_token_). +Там же будет написано, что этот ключ ни в коем случае нельзя передать кому-либо, поэтому при оформлении отчёта по этой работе, пожалуйста, **удаляйте _token_ из исходного кода и из скриншотов**. + +Список доступных методов для ботов Telegram перечислен здесь: . +Где-то там есть и описание того, как эти методы вызывать. +Нам пока это не особо интересно, однако знать следующие вещи стоит: + +- бот получает обновления при помощи команды `getUpdates`. + Эта команда позволяет возвращать те обновления, к которым имеет доступ чат-бот. + Например, кто-то написал или отредактировал личное сообщение. + Команда позволяет получать до 100 обновлений за один вызов. +- при вызове команды обычно требуется объект какого-то формата на вход. + Также обычно команда возвращает ответ в определённом формате. + Параметры можно сериализовать в JSON-строку. +- если кто-то пишет чат-боту сообщения, информация об этом состоит из следующих полей: . + Как можете заметить, возвращается много информации, но там есть как минимум: ИД сообщения, текст сообщения, чат, из которого было получено сообщение, дата, прикреплённые аудио, фото и т.д. +- если мы хотим отправить сообщение, следует вызвать метод `sendMessage`: . + Там обязательно требуется указать ИД чата и текст нашего сообщения. + Однако можно указать и другие поля, например, ИД сообщения, на который мы хотим ответить и список доп. кнопок для быстрых действий. + +Также первое сообщение боту от пользователя обычно `/start`, это также стоит помнить. + +Предположим, мы хотим написать диагностического бота, который будет реагировать на сообщения людей следующим образом: + +- на сообщение `/start` писать, что этот бот написан в качестве учебного материала и может выполнять следующие команды: ... +- на сообщение `/who` выводит ИД чата, ИД сообщения, ИД отправителя, имя отправителя и дату отправки сообщения. +- на сообщение `/rand %i %j` выводит случайное число между `%i` и `%j`. + Или сообщение об ошибке, если `%j` меньше, чем `%i`. +- при отправке голосового сообщения должен отвечать, что он "бумер" и не понимает голосовые сообщения. +- при отправке картинки должен всегда осыпать пользователя комплиментами по поводу красоты того, что он прислал. + +Забавно? +Ещё бы. +Осталось реализовать. + +Ход выполнения видится следующим: + +1. Регистрация бота. +2. Обработка получения обновлений. +3. По каждому обновлению: если оно сообщение, то разбираем содержимое сообщения. +4. После разбора содержимого формируем ответ. +5. Отправляем ответ на сообщение. + +Вроде бы всё просто, однако одновременно с этим ничего и не понятно. + +Здесь нам придёт на помощь сообщество ИТ-специалистов, потому что многие стандартные решения уже были реализованы до нас (или нами). + +Например, далеко не полный список библиотек для построения ботов для Telegram: + +- для C# - ; +- для Python - ; +- для Java - ; +- для Go - . + +Ваши задачи на эту лабораторную работу: + +- определиться с любимым языком программирования; +- найти популярную реализацию библиотеки для создания чат-бота в Telegram; +- зарегистрировать чат-бота; +- подключить чат-бота к библиотеке и проверить, что обновления приходят; +- попытаться хоть что-нибудь ответить самому себе через программу (хотя бы тем же самым сообщением); +- дополнить обработку ответов уже тем, что описано выше в тексте лабораторной работы; +- продемонстрировать работу. + +## Демонстрация работы + +Демонстрация работы предполагает запуск бота и проверку его ответов на сообщения преподавателя в режиме реального времени.