Мета уроку: показати, як працюють сервери й ШІ-агенти, і за годину на очах у глядачів зробити сайт, який відкривається на будь-якому телефоні.
Адреса сайту, який з’явиться на уроці
http://91.219.61.4/u/demo.k1/
Відкривай її на телефоні, коли викладач скаже, — приблизно на 40-й хвилині. Якщо відкриєш раніше, побачиш стару сторінку. Квадрат праворуч — це QR-код: малюнок, у якому записано ту саму адресу. Наведи на нього камеру телефона, і телефон запропонує відкрити сайт.
Цей урок — показовий. Ти дивишся трансляцію: нічого встановлювати не треба, акаунт теж не потрібен. Знадобиться тільки телефон з інтернетом — у другій половині уроку ти відкриєш на ньому сайт, який викладач зробить на твоїх очах.
Спочатку коротко розберемо, як змінювалися комп’ютери і чим сервер відрізняється від домашнього ноутбука. Потім — що таке термінал і мовна модель. Після цього викладач попросить ШІ-агента зробити сайт і викласти його в інтернет, а ти перевіриш результат зі свого телефона. Наприкінці — як усе це з’єднано між собою і що буде на курсі.
| Хвилини | Частина | Що відбувається |
|---|---|---|
| 0–3 | Вступ | Хто веде урок і що вийде наприкінці |
| 3–12 | Розділ 1 | Від великих машин до смартфонів; що таке сервер і VPS |
| 12–19 | Розділ 2 | Консоль, термінал, командний рядок, shell; GUI, TUI, CLI |
| 19–28 | Розділ 3 | Мовна модель, чат і агент; обмеження й безпека |
| 28–45 | Розділ 4 | Практика: агент робить сайт і викладає його на сервер |
| 45–50 | Розділ 5 | Схема: шлях файлу від ноутбука до твого телефона |
| 50–60 | Розділ 6 | Що буде на курсі, питання, як записатися |
Блоки з фіолетовим тлом — для тебе, глядачам їх читати не обов’язково. Якщо показуєш цю сторінку на трансляції, натисни вгорі «Сховати нотатки викладача»: блоки зникнуть, а вибір запам’ятається в цьому браузері. Розділи «Підготовка до уроку» і «Якщо на уроці щось не спрацювало» теж ховаються цією кнопкою.
Таймінг у таблиці вище — з запасом на питання в чаті. Якщо відстаєш більш ніж на п’ять хвилин, скорочуй розділ 1: досить показати роки з таблиці й одразу перейти до серверів. Практику (розділ 4) не скорочуй — заради неї люди й прийшли.
«Привіт! Мене звати [ім’я]. За цю годину ми разом зробимо сайт і викладемо його в інтернет — наприкінці ти відкриєш його на своєму телефоні. Його зробить ШІ-агент, програма, яка вміє сама виконувати команди на комп’ютері. А я покажу, що він робить на кожному кроці і як перевірити, що він нічого не наплутав.
Тримай телефон поруч, він знадобиться приблизно на сороковій хвилині. Питання пиши в чат одразу, як вони з’являться: частину я розберу по ходу, решту — наприкінці».
Цей розділ — для викладача. Його мета: щоб на уроці жоден крок не залежав від випадковості. Усе, що може попросити пароль, підтвердження чи вхід в акаунт, робиться заздалегідь.
У PowerShell виконай:
curl.exe -I http://91.219.61.4/u/demo.k1/Перший рядок відповіді має бути HTTP/1.1 200 OK. Пиши саме
curl.exe, а не curl: у Windows PowerShell 5.1 слово
curl — інша назва команди Invoke-WebRequest, і ключ
-I вона не розуміє. Якщо прийшло 404 — акаунта
demo.k1 або його рядків у nginx немає, створи його так само, як акаунти учнів
(setup-student.sh).
Claude Code виконує команди сам і не може ввести за тебе пароль: команда
scp, яка чекає на пароль, просто зависне. Тому для demo.k1
потрібен SSH-ключ — пара файлів: закритий ключ лишається на твоєму
комп’ютері, відкритий кладеться на сервер, і сервер пускає без пароля того, у кого є пара
до відкритого ключа.
ssh-keygen -t ed25519 -f $env:USERPROFILE\.ssh\demo_k1На питання про passphrase (пароль до самого ключа) двічі натисни Enter, лишивши його порожнім: інакше агент знову зупиниться на запиті пароля. Цей ключ відкриває лише демо-акаунт, тому так можна.
Тепер скажи ssh, що для demo.k1 на цьому сервері треба брати
саме цей ключ. Відкрий файл налаштувань (якщо його немає, «Блокнот» запропонує створити —
погоджуйся):
notepad $env:USERPROFILE\.ssh\configДопиши в кінець файлу:
Match host 91.219.61.4 user demo.k1
IdentityFile ~/.ssh/demo_k1
IdentitiesOnly yesБлок Match діє лише тоді, коли ти заходиш на цю адресу саме під
demo.k1, тому інші твої входи на сервер він не змінює.
IdentitiesOnly yes потрібен, щоб ssh не перебирав спершу всі
інші ключі: сервер дозволяє лише три спроби входу за одне з’єднання.
Далі передай відкритий ключ на сервер і допиши його у список дозволених ключів. Кожна
з двох команд один раз попросить пароль demo.k1:
scp $env:USERPROFILE\.ssh\demo_k1.pub demo.k1@91.219.61.4:demo_k1.pub
ssh demo.k1@91.219.61.4 "mkdir -p ~/.ssh && chmod 700 ~/.ssh && cat demo_k1.pub >> ~/.ssh/authorized_keys && chmod 600 ~/.ssh/authorized_keys && rm demo_k1.pub"Під час першого з’єднання ssh спитає Are you sure you want to
continue connecting (yes/no/[fingerprint])? — сервер показує свій відбиток, за
яким його потім упізнаватимуть. Напиши yes. На уроці це питання вже не
з’явиться.
Перевір, що пароль більше не потрібен — команда має одразу показати вміст теки
www:
ssh demo.k1@91.219.61.4 "ls -l www"Виконай установку й перший запуск з розділу 4 (кроки 1–2) у себе: так ти побачиш кожне вікно, яке з’явиться на уроці, і увійдеш в акаунт. Потрібна підписка Claude Pro, Max, Team чи Enterprise або акаунт Console з оплатою за API; безкоштовний план claude.ai Claude Code не включає. Сервіс доступний в Україні, крім Криму, Донецької, Херсонської, Луганської й Запорізької областей (список — anthropic.com/supported-countries).
Пройди весь розділ 4 у теці %USERPROFILE%\vizytka-zapas тими самими
запитами. Готовий index.html із цієї теки — запасний сайт: якщо на уроці
агент не відповість, покажеш його. Під час репетиції ввімкни запис екрана (у Windows 11 —
«Ножиці», режим відео, або Xbox Game Bar, Win+Alt+R):
відео знадобиться, якщо на уроці пропаде інтернет.
Заміряй час: скільки агент думає над сайтом і скільки триває завантаження. Якщо генерація займає довше за 5 хвилин, спрости запит.
Щоб глядачі, які відкриють адресу раніше, не побачили сайт із репетиції, поклади на
сервер сторінку-заглушку. Створи в «Блокноті» файл zaglushka.html з одним
рядком і збережи в кодуванні UTF-8 (у Windows 11 «Блокнот» так і зберігає):
<!doctype html><meta charset="utf-8"><title>Скоро</title><h1>Сайт з’явиться тут за кілька хвилин</h1>scp zaglushka.html demo.k1@91.219.61.4:www/index.html.ssh. Не відкривай
config і ключі під час трансляції.%USERPROFILE%\vizytka не існує або порожня: агент на уроці має
починати з нуля.curl.exe -I http://91.219.61.4/u/demo.k1/
дає 200.Перші електронні комп’ютери 1940–1950-х років займали цілу кімнату. ENIAC, добудований 1945 року в США, важив близько 27 тонн. Такий комп’ютер був один на весь інститут чи компанію, і працювати з ним могли лише спеціально навчені люди.
У 1960–1970-х з’явилися машини, якими користувалися десятки людей одночасно. Кожна людина сиділа за терміналом — пристроєм з клавіатурою й екраном (а спочатку й з принтером замість екрана), який сам нічого не обчислює. Термінал лише передає набраний текст на головний комп’ютер і показує, що той відповів. Комп’ютер стоїть в окремому залі, а термінали — в кабінетах, з’єднані з ним кабелем. Відомий приклад — термінал VT100 фірми DEC, 1978 рік.
Наприкінці 1970-х процесори стали маленькими й дешевими, і комп’ютер помістився на стіл. Процесор — мікросхема, яка виконує команди програм. Apple II (1977) та IBM PC (1981) вже все обчислювали самі, без головної машини: за ними працювала одна людина. У 1984 році Macintosh, а в 1985-му Windows принесли вікна, значки й мишу — до цього команди набирали на клавіатурі.
У 1991 році в європейському центрі ядерних досліджень CERN запрацював перший вебсайт. Його віддавав звичайний настільний комп’ютер NeXT, на який наклеїли попередження англійською: «Ця машина — сервер. НЕ ВИМИКАТИ!!». Якби хтось вимкнув цей комп’ютер, сайт зник би для всіх.
У 2007 році вийшов iPhone, у 2008-му — перший телефон на Android. Смартфон — це комп’ютер з процесором, пам’яттю й операційною системою, який постійно під’єднаний до інтернету. Більшість застосунків на ньому самі майже нічого не зберігають: стрічка, повідомлення, відео й карти приходять із серверів.
| Рік | Що з’явилося | Що змінилося |
|---|---|---|
| 1945 | ENIAC | Електронний комп’ютер на цілу кімнату |
| 1978 | Термінал VT100 | Багато людей працюють з одним комп’ютером через термінали |
| 1981 | IBM PC | Комп’ютер на столі, одна людина — один комп’ютер |
| 1984–1985 | Macintosh, Windows | Вікна, значки й миша замість набирання команд |
| 1991 | Перший вебсайт | Сторінки, які відкриваються з будь-якого комп’ютера в мережі |
| 2007–2008 | iPhone, Android | Комп’ютер у кишені, постійно в інтернеті |
У ноутбуці є процесор, оперативна пам’ять (у ній лежать програми й дані, з якими процесор працює зараз; після вимкнення вона очищується) і диск, на якому файли зберігаються постійно. Усім цим керує операційна система — головна програма комп’ютера, яка запускає інші програми й дає їм доступ до диска, мережі й екрана: Windows, macOS, Android.
Ти сидиш перед екраном, працюєш і на ніч вимикаєш ноутбук. В інтернет він виходить через домашній роутер, тож іззовні до нього підключитися не можна: незнайомий комп’ютер в інтернеті просто не знає, як до нього звернутися.
Сервер — комп’ютер, який постійно працює й відповідає на запити інших комп’ютерів через мережу. Усередині в нього ті самі процесор, пам’ять і диск, але працює він інакше:
91.219.61.4. За цією адресою сервер
можна знайти з будь-якої точки світу.На більшості серверів стоїть операційна система Linux. Вона безкоштовна, працює без графічного інтерфейсу й нею зручно керувати командами.
Один фізичний сервер у дата-центрі зазвичай потужніший, ніж потрібно одному сайту. Тому спеціальна програма ділить його на кілька віртуальних машин: кожна отримує свою частку процесора, пам’яті й диска, свою операційну систему й свою IP-адресу. Для того, хто з нею працює, вона виглядає як окремий комп’ютер.
VPS (virtual private server, віртуальний приватний сервер) — така
віртуальна машина, яку здають в оренду помісячно. Навчальний сервер курсу з адресою
91.219.61.4 — саме VPS. На ньому в кожного учня свій акаунт, і сьогоднішній
сайт теж ляже туди, в акаунт demo.k1.
«Сайт, який ти відкриваєш, завжди лежить на якомусь комп’ютері. Якщо цей комп’ютер вимкнуть, сайт зникне — тому перший вебсервер у CERN був підписаний “не вимикати”. Сьогодні такі комп’ютери стоять у дата-центрах і працюють без людей поруч. А керують ними так само, як у 1970-х: набирають команди в терміналі, тільки через інтернет».
Спитай у чаті: «Хто бачив ENIAC на фото? А хто знає, скільки серверів у великих компаніях?» — так глядачі почнуть писати в чат. Не затримуйся на датах.
Ці чотири слова часто вживають як синоніми, але кожне означає своє.
PS C:\Users\Mykola> у
PowerShell. Літери PS означають PowerShell, далі — тека, у якій ти зараз
працюєш.Так виглядає одна команда в PowerShell і її результат. Команда Get-Date
друкує поточні дату й час:
PS C:\Users\Mykola> Get-Date
11 жовтня 2026 р. 18:02:15| Скорочення | Що це | Приклади, які ти бачив |
|---|---|---|
| GUI | Graphical user interface, графічний інтерфейс: вікна, кнопки, значки, керування мишею або пальцем | Провідник Windows, браузер, Telegram, лаунчер гри |
| TUI | Text user interface, текстовий інтерфейс: меню й рамки з літер на весь екран термінала, керування стрілками й клавішами | Налаштування BIOS на багатьох комп’ютерах, редактор nano, програма
htop, яка показує запущені на сервері програми |
| CLI | Command-line interface, інтерфейс командного рядка: набираєш команду, отримуєш текстову відповідь | Команди в чаті Minecraft (/time set day), консоль розробника в
Counter-Strike 2, ping google.com у терміналі |
Сервери обслуговують переважно через CLI, і на це є причина. Команду можна записати текстом, повторити, надіслати на інший комп’ютер, зберегти у файл і запустити ще раз через рік. З кнопками в GUI так не вийде: щоб повторити дію, треба знову клацати. І ще одне: текстову команду може набрати не лише людина, а й програма. Саме так працює ШІ-агент, якого ти побачиш у розділі 4.
Ти відкрив на сервері файл у редакторі nano: на весь екран
термінала текст файлу, а внизу рядок підказок ^X Exit,
^O Write Out. Мишею нічого не натиснеш, керуєш клавішами. Який це інтерфейс?
Відкрий PowerShell і набери наживо Get-Date, потім
ping google.com. Скажи: «Ось командний рядок. Я набираю текст — комп’ютер
виконує. Хто грав у Minecraft і вводив /time set day, той уже працював з CLI».
Акцент: «Текстову команду може набрати й програма. Через пів години ти побачиш, як ШІ набирає команди замість мене — а я читаю кожну перед тим, як дозволити».
LLM (large language model, велика мовна модель) — програма, яка за початком тексту обчислює, яким найімовірніше буде його продовження. Текст вона обробляє токенами — шматками тексту завдовжки зі слово, частину слова або розділовий знак. Відповідь модель будує по одному токену: дописала токен, додала його до тексту й обчислює наступний.
Щоб передбачення були влучними, модель навчають на величезному обсязі текстів: книжках, статтях, сайтах, програмному коді. Під час навчання програма мільярди разів підправляє числа всередині моделі — їх називають параметрами, — щоб її продовження частіше збігалися з реальними текстами. Потім модель додатково вчать відповідати на запитання й виконувати прохання людини. Приклади мовних моделей — Claude, GPT, Gemini.
Наслідок, який варто запам’ятати: модель видає текст, схожий на правильну відповідь. Найчастіше він справді правильний, але не завжди.
У чаті ти пишеш повідомлення, модель відповідає текстом. Вона нічого не робить на твоєму комп’ютері: якщо відповідь — код, ти сам копіюєш його у файл, сам запускаєш і сам розповідаєш моделі, що вийшло.
ШІ-агент — та сама мовна модель плюс програма, яка дає їй інструменти: прочитати файл, записати файл, виконати команду в терміналі. Працює це по колу:
Claude Code, якого ти побачиш у розділі 4, — агент компанії Anthropic, який працює в терміналі. За замовчуванням без дозволу він лише читає файли; перед тим як змінити файл або виконати команду, він показує, що саме збирається зробити, і питає, чи можна.
Умови користування сервісами Claude для приватних осіб (Consumer Terms of Service, anthropic.com/legal/consumer-terms) дозволяють ними користуватися лише з 18 років. Тому Claude Code на уроках працює в руках викладача. Учні курсу на сервері працюють самі: заходять у свій акаунт, набирають команди, пишуть код і самі розбираються, чому він не працює.
Агент пише: «Сайт готовий і викладений на сервер». Що з цього випливає?
«Мовна модель не “знає” і не “думає” так, як людина. Вона рахує, який текст має йти далі. Тому вона вміє писати код — коду в інтернеті дуже багато, — і тому ж вона іноді впевнено пише нісенітницю».
Про вік скажи прямо, батьки це оцінять: «Claude за умовами сервісу — з 18 років. На курсі ШІ-агентом користуюся я, викладач: показую, що він уміє, і разом з учнями перевіряю, що він зробив. Учні працюють на сервері самі — набирають команди й пишуть код власними руками. Інакше вони не навчаться перевіряти ні себе, ні ШІ».
Далі все відбувається на комп’ютері викладача: Windows 11, PowerShell. Ти дивишся і стежиш за командами — кожну з них розберемо.
Відкриваємо PowerShell (меню «Пуск», набрати PowerShell) і вставляємо
команду з офіційної документації
(code.claude.com/docs/en/setup):
irm https://claude.ai/install.ps1 | iexirm (Invoke-RestMethod) завантажує з сайту Anthropic скрипт установки,
знак | передає завантажене наступній команді, а iex
(Invoke-Expression) його виконує. Права адміністратора не потрібні. Поки йде
завантаження, команда нічого не показує — це нормально.
Коли установка закінчиться, відкриваємо нове вікно PowerShell і перевіряємо:
claude --versionУ відповідь має прийти номер версії. Якщо PowerShell пише, що команду
claude не знайдено, — вікно відкрите ще до установки, відкрий нове.
На інших системах команди такі (там само в документації):
| Система | Команда установки |
|---|---|
| Windows, PowerShell | irm https://claude.ai/install.ps1 | iex |
| Windows, WinGet | winget install Anthropic.ClaudeCode |
| macOS, Linux | curl -fsSL https://claude.ai/install.sh | bash |
| macOS, Homebrew | brew install --cask claude-code |
Вимоги за документацією: Windows 10 версії 1809 і новіші, macOS 13 і новіші, Ubuntu 20.04+ або Debian 10+; від 4 ГБ оперативної пам’яті; підключення до інтернету. Окремо потрібна платна підписка Claude (Pro, Max, Team чи Enterprise) або акаунт Anthropic Console з оплатою за API-ключем — безкоштовний план Claude Code не включає. API-ключ — секретний рядок, за яким сервіс упізнає, з чийого рахунку списувати оплату. Його, як і пароль, нікому не показують.
mkdir $HOME\vizytka
cd $HOME\vizytka
claudemkdir створює теку vizytka у домашній теці користувача
($HOME — це C:\Users\<ім’я>), cd переходить
у неї, claude запускає агента. Агент бачить лише цю теку — у ній немає нічого
зайвого. Під час першого запуску Claude Code відкриває браузер для входу в акаунт; на
уроці вхід уже виконано заздалегідь.
Пишемо завдання звичайною мовою. Чим точніше описано результат, тим менше агент вигадує сам:
Зроби в цій теці сайт-візитку курсу програмування «Школа Миколи» — один файл index.html.
Вимоги:
- українська мова;
- стилі всередині файлу, без зовнішніх бібліотек, шрифтів і картинок;
- сторінка добре виглядає на телефоні;
- угорі великий заголовок і одне речення про курс;
- нижче три картки: «Сервер», «Python і FastAPI», «База даних SQLite», у кожній по два речення;
- унизу рядок «Сторінку зробив ШІ-агент на відкритому уроці» і дата та час, коли сторінку відкрили (через JavaScript);
- жодних прізвищ, телефонів і адрес.Агент напише, що збирається зробити, і попросить дозволу створити файл
index.html. Тут ми дозволяємо: створення файлу в порожній теці проєкту
нічого не зламає. HTML — мова розмітки, якою описують вміст сторінки:
заголовки, абзаци, картки. JavaScript — мова програм, які виконує сам
браузер; тут він підставить дату й час.
Відкриваємо другу вкладку термінала або виходимо з агента й набираємо:
start index.htmlstart відкриває файл програмою, яка для нього призначена в Windows, —
для .html це браузер. В адресному рядку видно щось на кшталт
file:///C:/Users/Mykola/vizytka/index.html: браузер читає файл прямо з
диска. Зараз сайт бачить лише цей комп’ютер. Якщо надіслати таку адресу тобі, у тебе
нічого не відкриється — на твоєму телефоні цього файлу немає.
Тут же перевіряємо результат очима: чи все українською, чи немає зайвого, чи нормально виглядає вузьке вікно. Не подобається колір — кажемо агентові одним реченням, він виправить.
Завантаж index.html на навчальний сервер командою scp: логін demo.k1, адреса 91.219.61.4,
файл має лягти в теку www у домашній теці під тим самим ім’ям.
Потім перевір командою curl.exe -I, що адреса http://91.219.61.4/u/demo.k1/ відповідає кодом 200.Агент покаже команду й попросить дозволу її виконати. Читаємо її разом, перш ніж дозволити:
scp index.html demo.k1@91.219.61.4:www/index.htmlscp (secure copy) — програма, яка копіює файли на інший комп’ютер
через SSH. SSH — спосіб захищено під’єднатися до віддаленого
комп’ютера: усе, що передається, зашифроване. У Windows 11 scp і
ssh уже вбудовані, нічого ставити не треба.index.html — що копіюємо: файл у поточній теці.demo.k1@ — під яким логіном заходимо на сервер.91.219.61.4 — IP-адреса сервера.: — після двокрапки йде шлях на сервері.www/index.html — куди покласти. Шлях без / на початку
рахується від домашньої теки акаунта, тобто файл ляже в
/home/demo.k1/www/index.html і замінить той, що там був.Пароль команда не питає: на сервері заздалегідь записано ключ викладача. Агент не знає жодного пароля — і не повинен.
Потім агент перевіряє, що сервер віддає сторінку:
curl.exe -I http://91.219.61.4/u/demo.k1/HTTP/1.1 200 OK
Server: nginx
Content-Type: text/html
…curl — програма, яка надсилає запит на адресу й показує відповідь
сервера, ключ -I просить лише заголовки, без самої сторінки. Головне — перший
рядок: 200 OK означає, що сторінка на місці й сервер її віддає. Реальна
відповідь містить ще кілька рядків (дату, розмір файлу); номер версії nginx у рядку
Server може бути дописаний.
Агент може скласти команду трохи інакше, наприклад написати повний шлях. Це
нормально, якщо результат той самий: файл у www і відповідь 200.
На macOS і Linux команда scp така сама; там часто користуються ще й
rsync, але у Windows його немає без додаткових програм.
Набери в браузері телефона http://91.219.61.4/u/demo.k1/ або наведи
камеру на QR-код угорі сторінки. Унизу сайту — дата й час, коли саме ти його відкрив: так
видно, що це жива сторінка з сервера, а не картинка.
Якщо браузер пише про помилку, допиши на початку http:// вручну: деякі
браузери самі пробують захищене з’єднання https://, а на цій адресі його
немає. Слово «Небезпечно» поруч з адресою означає саме це — що з’єднання не зашифроване.
Для сторінки без паролів і особистих даних це не страшно; як підключити HTTPS, ви
розберете на занятті 10.
Беремо з чату одне побажання глядачів — інший колір, ще одна картка, кнопка — і просимо агента змінити сайт і завантажити його знову. Глядачі оновлюють сторінку на телефоні й бачать зміну. Від запиту до оновленої сторінки — одна-дві хвилини.
Орієнтовно: установка — 3 хв, запуск — 2 хв, генерація сайту — 5 хв, перегляд локально — 2 хв, завантаження й перевірка — 3 хв, телефони — 2 хв.
200 OK: «Агент каже, що все працює. Перевіряємо не словами —
відкрийте адресу на телефонах і напишіть у чат, яку дату й час бачите внизу».Сайт з’явився в тебе на телефоні, хоча телефон нічого не знає про комп’ютер викладача. Ось хто й у якому порядку брав у цьому участь.
scp
під’єднується через інтернет до сервера 91.219.61.4 на
порт 22. Порт — номер, за яким сервер розрізняє, якій програмі
передати з’єднання. На порту 22 чекає sshd — програма, яка приймає
під’єднання SSH. Вона перевіряє ключ акаунта demo.k1 і записує файл у
/home/demo.k1/www/index.html.http:// — домовленості, за якими говорити з сервером (вони
називаються HTTP); 91.219.61.4 — до якого комп’ютера звертатися; порт не
вказано, тому для HTTP береться 80; /u/demo.k1/ — яку сторінку просити.
Запит іде через мережі провайдерів до сервера./u/demo.k1/, брати з теки
/home/demo.k1/www/. Адреса закінчується на /, тому nginx
віддає файл index.html. Він надсилає код 200 і текст файлу,
браузер малює сторінку і виконує JavaScript, який вписує дату й час.Ось це правило в налаштуваннях nginx на навчальному сервері — такий блок додається для кожного учня:
location /u/demo.k1/ {
alias /home/demo.k1/www/;
index index.html;
try_files $uri $uri/ =404;
}Останній рядок означає: якщо такого файлу чи теки немає, відповісти кодом
404 — «нічого не знайдено».
Зазвичай замість цифр в адресі пишуть доменне ім’я, наприклад google.com, і
окрема служба DNS перетворює його на IP-адресу, перш ніж браузер піде на
сервер. У нашій адресі одразу стоять цифри, тому цей крок пропускається.
Головне: після кроку 1 комп’ютер викладача більше не потрібен. Сайт віддає сервер у дата-центрі, і він відкриватиметься, навіть коли ноутбук вимкнений.
Після уроку викладач закрив ноутбук і пішов додому. Ти відкриваєш
http://91.219.61.4/u/demo.k1/ увечері. Що буде?
Веди по схемі пальцем або курсором: «Один — я віддав файл. Два — твій телефон спитав сторінку. Три — сервер відповів. Ноутбук бере участь тільки в першому кроці». Потім питання з квізу — голосуванням у чаті: «Пишіть 1, 2 або 3».
Якщо питають, навіщо nginx, коли є файл: «Файл сам себе не відправить. Потрібна програма, яка цілодобово чекає на запити й відповідає на них. На курсі учні напишуть таку програму самі — на Python».
Сьогодні сайт зробив агент, а на курсі кожен учень за три місяці сам зробить власний вебсервіс і доведе його до випуску. Вебсервіс — програма на сервері, з якою люди працюють через браузер: додають записи, бачать списки, входять за паролем. Тема сервісу — на вибір учня: щоденник тренувань, список домашніх завдань, каталог колекції.
Занять 13: чотири у першому місяці, чотири в другому і п’ять у третьому. Кожне — 90 хвилин. Після кожного заняття програма на сервері сама перевіряє, що зроблено, і показує учневі відмітки в його кабінеті.
| № | Тема | Що вийде після заняття |
|---|---|---|
| Місяць 1 | ||
| 01 | Сторінка про себе на навчальному сервері | Зайти на сервер і зробити зі стартової заготовки власну сторінку, яку видно з будь-якого пристрою |
| 02 | Бот, який не вимикається | Створити Telegram-бота, підключити його до своєї служби на сервері й переконатися, що він відповідає цілодобово |
| 03 | Git: код бота під контролем версій | Зберігати історію змін коду бота, відкочувати поломки й тримати токен поза репозиторієм |
| 04 | База користувачів бота | Замість текстового файла — таблиця в SQLite: хто писав боту, коли і скільки разів; список — командою бота |
| Місяць 2 | ||
| 05 | Адмінка бота | Керувати контактами бота командами й кнопками в Telegram, а підсумки бачити на статичній сторінці |
| 06 | Бот питає ШІ: запит до API за потреби | Розібрати HTTP-запит до API до кожного рядка (бот — клієнт, який питає за потреби, а не сервер) і навчити бота відповідати за допомогою безкоштовного ШІ |
| 07 | Хто має доступ до бота | Дати небезпечні команди лише власнику за номером чату (ADMIN_IDS), чужим ввічливо відмовляти, закрити права файлів у Linux і не віддати токен у Git |
| 08 | Перевіряємо бота на міцність | Знайти слабкі місця свого бота (а в чужого — лише з дозволу власника), закрити їх, вести журнал кожного оновлення, зробити бекап і відновитися з нього |
| Місяць 3 | ||
| 09 | Бот пише першим і керує сервером | Бот сам надсилає повідомлення за розкладом, а за командою власника створює й запускає скрипти на сервері — безпечно |
| 10 | Меню, замовлення й відгуки | Бот отримує гарне меню з кнопками, приймає замовлення покроковою формою, сам просить відгук і радиться зі ШІ щодо клієнтів — а надсилає лише з дозволу власника |
| 11 | Бот-сторож: спам і збої | Бот сам захищається від спаму (охоронець guard.py), а окрема програма-сторож watch.py стежить за сайтом і ботом і пише власнику, коли щось падає й відновлюється |
| 12 | Тести й безпечне оновлення | Автотести ловлять поломку за секунду, deploy.sh не викочує червоний код і сам відкочується, а GitHub ставить зелену галочку |
| 13 | Реліз і день показу | Довести бота до стану, який не соромно показати: README, реліз v1.0, фінальний аудит audit.py, безпека — і розповісти про нього гостям |
Ні. Перше заняття починається з входу на сервер і HTML-сторінки про себе. Потрібно впевнено користуватися комп’ютером і клавіатурою.
Комп’ютер або ноутбук з Windows, macOS чи Linux і стабільний інтернет. Телефона замало: команди й код набирають на клавіатурі в терміналі.
ШІ-сервіси з віковими обмеженнями — зокрема Claude, який дозволений з 18 років, — на уроках використовує викладач. Учні працюють на сервері самі: набирають команди, пишуть і виправляють код. Так вони вчаться розуміти, що роблять, і перевіряти результат.
У кожного учня свій акаунт і свій пароль. Файли одного учня інші не бачать — відкрита лише тека з його сайтом. Сайт учня публічний, тому на ньому не пишуть прізвище, номер школи, адресу й телефон; про це йдеться вже на першому занятті.
Працюючий вебсервіс на сервері з власною адресою, історія всіх змін коду в Git і виступ на демо-дні — на останньому занятті кожен показує свій сервіс гостям.
Про курс — 4 хвилини: пройдися по таблиці місяцями, а не по кожному заняттю. «Перший місяць — сторінка, сервер на Python, Git і база даних. Другий — форма, зручний інтерфейс, вхід за паролем і пошук вразливостей у чужому сервісі. Третій — тести, HTTPS, відновлення після поломок і випуск версії 1.0 з показом гостям».
Питання, яких варто чекати від батьків, і що відповідати:
Наприкінці ще раз покажи адресу сайту й блок «Як записатися», не закривай його до кінця трансляції.
Для викладача. Головне правило: не намагатися полагодити на трансляції довше двох хвилин. Сказати чесно, що сталося, і перейти на запасний варіант.
| Що сталося | Що робити | Що сказати |
|---|---|---|
| Установка Claude Code видає помилку або висить | Claude Code встановлено на репетиції. Відкрий нове вікно PowerShell,
claude --version — і далі за планом. |
«Установка залежить від мережі, на репетиції в мене все встановилося, тож продовжуємо з готовим». |
| Claude Code не відповідає, вичерпано ліміт, не вдається увійти | Покажи запасний сайт: cd $HOME\vizytka-zapas,
start index.html. Далі сам виконай команду
scp index.html demo.k1@91.219.61.4:www/index.html і
curl.exe -I з кроку 5 — ті самі, які виконав би агент. |
«Агент зараз недоступний — так теж буває, це сервіс в інтернеті. Ось сайт, який він зробив на репетиції за тим самим запитом. А завантажу я його тією самою командою, яку запустив би агент». |
| Агент зробив не те: англійською, без карток, дивний вигляд | Одним реченням попроси виправити. Якщо після двох спроб не вийшло — запасний сайт. | «Ось навіщо результат перевіряють. Агент виконав не все — кажемо йому, що саме не так». |
scp чекає на пароль або висить |
ssh не знайшов ключ. Ctrl+C,
виконай scp сам і введи пароль demo.k1 (символи пароля на
екрані не показуються). Після уроку перевір крок 2 підготовки. |
«Агент не знає пароля, і це правильно. Введу сам». |
curl.exe -I показує 403 |
Сервер не має права читати файл:
ssh demo.k1@91.219.61.4 "chmod 755 www; chmod 644 www/index.html" |
«403 — файл на місці, але сервер не має дозволу його читати. Виправляється однією командою, це буде на першому занятті». |
curl.exe -I показує 404 |
Файл ліг не туди або з іншою назвою:
ssh demo.k1@91.219.61.4 "ls -l www". Має бути саме
index.html малими літерами. |
«404 — за адресою нічого немає. Дивимося, куди агент поклав файл». |
| У тебе сайт відкривається, а в частини глядачів — ні | Попроси набрати адресу повністю, з http://. Стара сторінка —
оновити (на телефоні — потягнути сторінку вниз). Не допомагає — перемкнутися з Wi-Fi
на мобільний інтернет. |
«Браузер міг сам підставити https. Допиши http:// на початку». |
| Пропав інтернет у викладача | Роздай інтернет з телефона. Не виходить за дві хвилини — увімкни відео з репетиції. | «Сервер працює, а я на хвилину без зв’язку. Ось запис того самого з репетиції». |
Сервер не відповідає (curl довго чекає й завершується помилкою) |
Покажи запасний сайт локально й відео з репетиції. Завантаж сайт після уроку й надішли адресу в чат. | «Сервер зараз недоступний. Скину адресу в чат, щойно він знову запрацює, — перевірите самі». |