Мета заняття: дати кожному доступ до свого акаунта на сервері й покласти туди першу власну сторінку — розповідь про себе, яку видно з будь-якого телефона.
Замість <логін> підставляєш свій
логін — його видав викладач, він має вигляд bohdan.g9: ім’я, крапка, номер
групи. Кутові дужки не пишуться. Наприклад, сайт учня з логіном bohdan.g9
відкривається за адресою http://91.219.61.4/u/bohdan.g9/, а кабінет із
результатами перевірок — за http://91.219.61.4/k/bohdan.g9/. Третій рядок —
це команда, якою заходять на сам сервер; що вона робить, розказано в теорії, розділ 4.
Ти вперше зайдеш на сервер по SSH — це спосіб набирати команди для віддаленого комп’ютера у себе на екрані, докладно про нього в теорії, розділ 4. Там ти зміниш виданий пароль на власний і роздивишся теки, які вже створені для тебе.
Головна робота сьогодні — сайт-самопрезентація: одна сторінка, на якій
ти розповідаєш про себе. Ім’я, кілька абзаців про те, чим цікавишся, що вже вмієш і чого
хочеш навчитися на курсі, список улюблених ігор або книжок. Цю сторінку ти покладеш у теку
~/www на сервері, і вона стане доступною за твоєю адресою в інтернеті. Покласти
файл на сервер можна двома способами — по FTP зі свого комп’ютера або прямо на сервері в
редакторі nano. У практиці розібрані обидва.
Сторінка публічна: її бачить будь-хто, хто знає адресу. Тому прізвище, номер школи й класу, домашню адресу та номер телефона на неї не пишуть. Ім’я — пишуть.
Наприкінці заняття твоя сторінка відкривається з будь-якого телефона в інтернеті. У кабінеті проти заняття 01 стоять шість критеріїв — так називають окремі вимоги до роботи, кожну з яких перевіряють окремо. П’ять із них програма перевіряє на самій сторінці: вона запускається кожні 10 хвилин, тому відмітки з’являються протягом десяти хвилин після того, як ти зберіг файл. Шостий зараховується після першого входу на сервер.
Скрипт — програма, яку ти написав для себе. Ти знаєш, як її запустити, у якій теці вона лежить, які дані їй потрібні й що робити, коли вона видає помилку. Якщо ти щось забув — можеш просто відкрити код і подивитися.
Продукт — програма, якою користується інша людина. Вона не бачить коду, не знає назв твоїх файлів і не буде читати помилку з червоним текстом на пів екрана. У продукту з’являється користувач — конкретна людина, яка відкриває твій сервіс, щоб вирішити свою задачу.
Приклад. Ти написав на Python програму bal.py: вона читає файл з оцінками й
друкує середній бал. Це скрипт: щоб ним скористатися, треба мати Python, мати цей файл і
знати, у якому форматі туди писати оцінки. Твій однокласник цього не має і мати не буде.
Продуктом та сама ідея стає тоді, коли однокласник відкриває з телефона адресу, вписує свої
оцінки в поля на сторінці й бачить середній бал.
Тому робота над продуктом починається з питання «хто ним користуватиметься». Вибір мови й бібліотек іде після цього.
Артем зробив програму, яка рахує, скільки днів лишилося до кожної контрольної.
Він запускає її в терміналі командою python dni.py, дати вписані просто в код.
Сестра просить: «Дай мені теж». Що заважає назвати цю програму продуктом?
Коли ти відкриваєш будь-яку сторінку, працюють дві програми.
Клієнт — програма, яка просить дані. У нашому випадку це браузер на телефоні або ноутбуці. Сервер — комп’ютер, який на це прохання відповідає, і програма на ньому, яка формує відповідь. Клієнт надсилає запит («дай мені сторінку за адресою /u/bohdan.g9/»), сервер надсилає відповідь (текст сторінки).
Розмова клієнта із сервером іде за набором правил, який називається HTTP
(hypertext transfer protocol, протокол передавання гіпертексту). Правила описують, як
записати запит і як записати відповідь, щоб будь-який браузер зрозумів будь-який сервер. Саме
тому веб-адреси починаються з http://: це вказівка браузеру, за якими правилами
звертатися.
Разом із відповіддю сервер завжди надсилає код відповіді — тризначне число, яке коротко каже, чим усе скінчилося. Чотири коди знадобляться тобі вже сьогодні:
200 — запит виконано успішно, сторінка або дані передані;403 — файл за такою адресою є, але сервер не має права його прочитати
й тому не віддає;404 — за такою адресою нічого немає;500 — програма на сервері зупинилася з помилкою. Сьогодні твоєї програми
на сервері ще немає, тому цей код ти вперше побачиш на занятті 02.Браузер зазвичай коди не показує, він просто малює сторінку. Але автоматична перевірка
дивиться саме на число: критерій «сайт відкривається» означає «сервер відповів
200».
Приклад. Ти зробив у себе на ноутбуці файл index.html у теці «Завантаження»
і відкрив його подвійним кліком. В адресному рядку видно щось на кшталт
file:///C:/Users/Bohdan/Downloads/index.html. Сторінка є, вона працює. Кинути це
посилання другові немає сенсу: у нього немає ні цієї теки, ні цього файлу. Слова «працює у
мене» описують саме таку ситуацію. Щоб сторінку побачили інші, файл має лежати на комп’ютері,
який доступний з інтернету, і віддавати його має програма-сервер.
Катерина надіслала подрузі посилання на свою сторінку. У Катерини вона
відкривається, у подруги — ні. В адресному рядку в Катерини написано
file:///C:/Users/Kate/site/index.html. Що відбувається?
VPS (virtual private server, віртуальний приватний сервер) — комп’ютер, який ти орендуєш у компанії з дата-центром. Фізично це велика машина в приміщенні з резервним живленням та інтернетом, поділена на кілька окремих комп’ютерів; ти отримуєш один із них у повне користування. Він увімкнений цілодобово: коли ти закриваєш ноутбук і йдеш спати, твій сервіс далі відповідає на запити.
Наш сервер має адресу 91.219.61.4. Це IP-адреса — номер
комп’ютера в інтернеті, за яким його знаходять інші комп’ютери. У нього 2 гігабайти
оперативної пам’яті та два процесорні ядра. Операційна система Linux на цьому комп’ютері
одна, і всі учні працюють у ній одночасно. Щоб робота одного не заважала іншому, кожен учень
має там окремий акаунт зі своєю домашньою текою.
Домашня тека — тека, у якій ти опиняєшся одразу після входу, і яка
належить тільки тобі. Шлях до неї — /home/<логін>. Коротко її позначають
знаком ~: запис ~/www означає «тека www в моїй
домашній теці». Заглянути в чужу домашню теку ти не можеш, і твої файли не відкриє ніхто,
крім тебе й викладача. Виняток — тека ~/www: усе, що ти в неї покладеш, сервер
віддає в інтернет будь-кому, хто знає твою адресу. Тому в ~/www не кладуть
нічого особистого.
Усередині вже створено те, з чим ти працюватимеш увесь курс:
| Тека або файл | Що там |
|---|---|
| ~/app/ | код сервісу: main.py, db.py, project.yaml, deploy.sh, README.md |
| ~/www/ | сторінка сайту: index.html |
| ~/data/ | база даних — з’явиться на занятті 04 |
| ~/logs/ | журнали роботи твоєї програми |
| ~/backups/ | резервні копії |
| ~/repo.git/ | сюди складатимуться версії твого коду: збережені стани всіх файлів проєкту на різні моменти, щоб можна було повернутися до попереднього. Руками туди не заходимо, це заняття 03 |
У кожного учня своя адреса на цьому спільному сервері: /u/<логін>/.
Доменне ім’я (коротко — домен) — це словесна адреса сайту, яку набирають
замість цифр IP-адреси, наприклад shkola.com. Коли в школи з’явиться власний
домен, кожен отримає сабдомен: власне ім’я, дописане перед спільним доменом,
на кшталт bohdan.shkola.com. Поки домену немає, ту саму роль виконує шлях після
/u/, і для сьогоднішнього заняття різниці немає.
Богдан о 23:00 закрив ноутбук і поїхав до бабусі на два дні. Об 11 ранку
наступного дня однокласник відкрив його адресу http://91.219.61.4/u/bohdan.g9/
і побачив сторінку. Як так вийшло?
SSH (secure shell) — протокол, тобто узгоджений спосіб спілкування двох програм. Він дає тобі командний рядок віддаленого комп’ютера. Ти набираєш команду у себе, вона виконується на сервері, а результат друкується в тебе на екрані. Усе, що передається, зашифроване: якщо хтось перехопить ці дані десь у мережі, він побачить набір нечитабельних символів і твого пароля з нього не дістане.
На сервері одночасно працює кілька програм, які приймають запити ззовні. Щоб запит
потрапив саме до потрібної, кожна з них займає окремий порт — номер від 1 до
65535, який дописують до адреси сервера. SSH займає порт 22, тому в команді його не пишуть:
це значення відоме за замовчуванням. Веб-сервер, який віддає твою сторінку, займає порт 80 —
його теж не пишуть, коли адреса починається з http://.
Термінал — вікно, у якому ти набираєш команди й читаєш відповіді. На Windows це «Термінал» або PowerShell, на macOS — «Термінал». Картинок і кнопок там немає, тільки текст.
Три команди, без яких сьогодні не обійтися:
pwd/home/bohdan.g9 означає «я у своїй домашній теці».lsls -l — те саме списком, з розміром і датою
зміни кожного файлу.cdcd www — зайти в теку www,
cd .. — піднятися на рівень вище, cd ~ — повернутися додому.Приклад. Ти хочеш перевірити, чи справді у твоїй теці www лежить
index.html. У провіднику ти б клацнув по теці й подивився. У терміналі ти
набираєш ls ~/www і читаєш відповідь.
Ілля підключився по SSH, набрав ls і побачив у списку теку
www. Потім він відкрив провідник у себе на ноутбуці, пошукав теку
www і не знайшов її. Чому?
HTML (hypertext markup language, мова розмітки гіпертексту) — спосіб позначити в тексті, де заголовок, де абзац, а де список. Браузер читає ці позначки й показує текст так, як вони наказують: заголовок — великим шрифтом, абзац — з відступом, пункти списку — один під одним.
Тег — позначка в кутових дужках, наприклад <p>.
Більшість тегів працюють парою: <p> відкриває абзац, а
</p> із похилою рискою закриває його; між ними стоїть текст. Пару тегів
разом із текстом усередині називають елементом. Самих тегів на екрані не
видно — видно тільки те, що між ними.
<h1>Богдан</h1>
<p>Мені 14 років, і я вчуся писати програми.</p>Перший рядок — головний заголовок сторінки, другий — абзац тексту.
Теги, яких вистачить для сьогоднішньої сторінки:
| Тег | Що робить |
|---|---|
| <h1>…</h1> | головний заголовок сторінки. Він на сторінці один, і в ньому пишуть те, про що вся сторінка |
| <h2>…</h2> | заголовок розділу всередині сторінки. Таких може бути кілька |
| <p>…</p> | абзац тексту |
| <ul> і <li> | список. <ul> відкриває весь список, а кожен пункт усередині обгортають у <li>…</li> |
| <a href="…">…</a> | посилання. Текст між тегами читає людина, а адреса всередині href каже, куди воно веде |
| <strong>…</strong> | виділення важливого, браузер показує його жирним |
Атрибут — додаткова вказівка всередині відкривного тега: ім’я, знак
рівності й значення в лапках. У рядку
<a href="https://uk.wikipedia.org">Вікіпедія</a> атрибут
href задає адресу переходу, а слово «Вікіпедія» — те, що видно на сторінці.
Крім видимого тексту, у файлі є кілька службових рядків. Вони майже однакові на всіх сторінках, і сьогодні їх досить переписати зі зразка:
<!doctype html> — перший рядок файлу, каже браузеру, що далі HTML;<html lang="uk"> — відкриває всю сторінку, lang="uk"
повідомляє, що текст українською;<head> — відомості про сторінку, яких на екрані не видно;<meta charset="utf-8"> — кодування, тобто правило,
за яким літери записані у файлі числами. UTF-8 знає українські літери; без цього рядка
замість тексту часто виходить набір знаків питання й ромбиків;<title>…</title> — назва сторінки: її видно на вкладці
браузера, у самому тексті сторінки вона не з’являється;<body> — усередину нього кладуть увесь вміст, який видно у вікні.Зараз за твоєю адресою лежить заготовка — сторінка із заголовком «Скоро тут буде сервіс». Її поклали туди заздалегідь, щоб адреса вже щось віддавала. Сьогодні ти заміниш її своєю сторінкою.
Оля набрала у файлі три абзаци про себе, розділила їх порожніми рядками, тегів не ставила зовсім. Сторінка відкривається, але весь текст іде суцільним рядком, без поділу на абзаци. Чому?
Деплой — перенесення нової версії файлів на сервер, після якого їх бачать
люди. Поки файл лежить у тебе на ноутбуці, для інших його не існує. Сьогодні деплой
найпростіший: index.html має опинитися в теці ~/www на сервері. На
занятті 09 це робитиме скрипт однією командою, поки що робимо руками. Способів два, обидва
вже налаштовані, і результат у них однаковий.
FTP (file transfer protocol, протокол передавання файлів) — правила, за якими одна програма передає файли іншій. Програму-клієнт ставлять собі на комп’ютер: вона показує у двох панелях твої файли у себе й твої файли на сервері, і файл переноситься мишею. Ми користуємося FileZilla: вона безкоштовна й працює на Windows, macOS і Linux.
Дані з’єднання: хост 91.219.61.4, порт 21, логін і пароль ті самі, що для
SSH. Порт 21 займає програма FTP на сервері — про порти йшлося в розділі 4. У полі шифрування
вибирають «Явний FTP через TLS». TLS — те саме шифрування, яким користується
SSH: воно закриває від сторонніх і пароль, і вміст файлів.
При першому підключенні FileZilla покаже сертифікат — файл, у якому сервер повідомляє, хто він такий. Зазвичай сертифікати видають сторонні організації, яких програми знають наперед і яким довіряють. Наш сертифікат самопідписаний: його видав сам сервер, тому перевірити його FileZilla не може і виводить попередження. Для нашого сервера це очікувано: постав галочку «Завжди довіряти цьому сертифікату» й тисни «OK».
nano — текстовий редактор, який працює прямо в терміналі: набираєш текст,
стрілки переміщують курсор, миша не потрібна. Ти вже підключений по SSH, набираєш
nano ~/www/index.html і редагуєш той самий файл, який віддає сервер. Передавати
нічого не треба: зберіг — і зміни вже на місці.
FTP зручніший, коли текст довгий і ти пишеш його з нуля. Набирати можна у звичному редакторі, вставляти шматки з буфера обміну, а якщо з’єднання обірветься, набране нікуди не подінеться: воно лежить у тебе на комп’ютері. Копія на комп’ютері лишається й після передавання, тому файл є у двох місцях. Про що доводиться пам’ятати: правка у своїй копії нічого не змінює на сервері, поки ти не передав файл ще раз.
Редактор nano зручніший для дрібної правки, коли ти вже в терміналі:
виправити слово, дописати рядок, прибрати зайвий тег. Розбіжності між копіями тут не буває,
бо копія одна. Незручності теж є: довгий текст у терміналі набирати повільно, вставка з
буфера обміну в різних програмах працює по-різному, і копії файлу в тебе на комп’ютері не
лишається.
Максим набрав сторінку у себе на комп’ютері й поклав її на сервер по FTP. Потім він виправив у своєму файлі дві помилки, зберіг його, відкрив свою адресу й натиснув Ctrl+F5. Помилки на сторінці лишилися. Що сталося?
Продукт, який ти робитимеш увесь курс, ти обираєш після цього заняття — це домашнє завдання. Щоб було зрозуміло, що саме там писати, розберемо, з чого складається бриф.
Бриф — опис сервісу на один екран: для кого він, яку задачу вирішує і що саме вміє. Пишеться до коду, читається за хвилину, і потім до нього повертаються щоразу, коли треба вирішити, чи додавати нову функцію.
Бриф ти напишеш удома, у файлі ~/app/BRIEF.md. У ньому чотири розділи:
Приклад брифу. Користувач — сестра Оля, 11 років. Проблема: вона забуває, коли здавати роботи з художньої школи, записує в різні зошити й губить їх. Функції: додати роботу з датою здачі, побачити список у порядку наближення дати, відмітити виконане. Не робимо: нагадувань на пошту, спільних списків із подругами, застосунку для телефона.
Файл має розширення .md — це Markdown, звичайний текст із
кількома знаками розмітки. Знак решітки й пробіл на початку рядка означають заголовок, а
кількість решіток задає рівень: # Бриф — заголовок усього файлу,
## Користувач — заголовок розділу всередині нього. Заголовки чотирьох розділів
пиши точно так, як у зразку домашнього завдання: два знаки решітки, пробіл, назва розділу.
Сергій написав у розділі «Користувач»: «усі, кому цікаві настільні ігри». На занятті 05 він не може вирішити, чи потрібна реєстрація через пошту. Як розділ «Користувач» мав би йому допомогти?
Коли програму пише одна людина, їй вистачає теки з файлами на своєму комп’ютері. Коли над однією програмою працюють п’ятеро, з’являються питання, яких раніше не було: у кого зараз найновіша версія файлу, що вже зроблено, а що ні, де записано, чому місяць тому вирішили робити саме так. Розробник — людина, для якої писання коду є роботою; далі під командою мається на увазі кілька розробників, які роблять один продукт. У компаніях на ці три питання відповідають три різні сервіси. Розберемо кожен і одразу подивимося, чим він замінений на нашому курсі.
Уяви ситуацію. Ви втрьох робите сайт на шкільний конкурс. Файл index.html ходить по чату: спершу index.html, потім index2.html, потім index_ostatochnyi.html. У вівторок Аня дописала в нього форму. У середу Тарас надіслав свою версію того самого файлу, і форми Ані там немає: Тарас правив копію, яку завантажив у понеділок. Роботу за вівторок треба згадувати й набирати заново. Ще через тиждень таких файлів у чаті двадцять, і ніхто не скаже, який із них робочий.
Git — програма, яка зберігає версії файлів проєкту. Ти працюєш як завжди, а коли доробив якийсь шматок, виконуєш команду, і git запам’ятовує стан усіх файлів на цей момент. Такий збережений стан називають комітом (commit). Місце, де git зберігає всі коміти проєкту, називають репозиторієм: це тека, у якій, крім самих файлів, лежить уся їхня історія. З історії видно, хто, коли і які саме рядки змінив, і будь-яку попередню версію можна повернути.
GitHub — сайт, який зберігає репозиторії в інтернеті. Кожен із команди надсилає туди свої коміти й забирає чужі, тому питання «у кого остаточна версія» зникає: остання версія завжди на сайті. Крім зберігання, GitHub дає обговорення змін — людина бачить рядок у рядок, що змінив колега, і пише зауваження прямо біля потрібного рядка — та список задач. Користуються ним майже всі компанії, що пишуть код, а ще там відкрито лежить код багатьох відомих програм: Python, VS Code, Linux. Будь-хто може зайти й прочитати їх.
Приклад, який стосується тебе вже зараз. Ти сам пишеш гру на Python. У неділю вона працює. У понеділок ти вирішуєш переробити підрахунок очок, правиш пів файлу, і після цього гра перестає запускатися взагалі. Без git лишається згадувати, що там було до правок. З git ти дивишся, які рядки змінилися за понеділок, і повертаєш файл до недільного стану однією командою. Той самий проєкт удвох із однокласником: кожен працює у себе, коміти обох потрапляють в один репозиторій, і жодна правка не зникає.
На курсі ми користуємося git, але без GitHub. Причина в реєстрації: обліковий запис — це запис про тебе в сервісі, з логіном, паролем і всім, що ти в ньому зробив, — на GitHub вимагає підтвердити вік, а для тринадцятирічного ще й згоди батьків. За 90 хвилин заняття це не робиться. Тому репозиторій кожного лежить на нашому сервері: тека ~/repo.git, яку ти вже бачив у списку своїх тек. Роль GitHub тут виконує сам сервер — ти надсилаєш коміти зі свого ноутбука туди так само, як надсилав би на GitHub. Команди git при цьому ті самі до літери, і все, що ти вивчиш на занятті 03, працюватиме з GitHub без жодних змін: зміниться тільки адреса, куди надсилати.
Ситуація. Ти вигадав проєкт: ідею записав у нотатки телефона, план накидав у зошит, потрібне посилання кинув сам собі в телеграм, а те, як ти обійшов помилку з датами, не записав узагалі. Через три тижні ти повертаєшся до проєкту й половини цього не знаходиш. У команді те саме, помножене на кількість людей: домовилися на зустрічі, а за місяць кожен пам’ятає домовленість по-своєму.
Notion — сервіс для нотаток і документів, який працює у браузері. Сторінка складається з абзаців, списків, таблиць і картинок; сторінки вкладаються одна в одну, тому все, що стосується одного проєкту, лежить за одним посиланням. Кожну сторінку можна відкрити для інших: вони бачать зміни одразу після того, як ти дописав, і можуть дописувати самі. Користуються ним не тільки програмісти — так само ведуть свої документи редакції, невеликі компанії, студентські команди. У командах розробників там зазвичай лежить опис продукту, інструкції на кшталт «як запустити цей проєкт у себе на комп’ютері», підсумки зустрічей і пояснення, чому щось зробили саме так.
Приклад для школяра. Ти готуєш роботу на конкурс і робиш одну сторінку: угорі двома реченнями про що робота, нижче список джерел із посиланнями, ще нижче перелік того, що зроблено й що лишилося. Однокласники, які роблять роботу з тобою, відкривають це посилання й бачать стан справ, не питаючи тебе. Питання «а де в нас те посилання на статтю» більше не виникає.
На курсі опис проєкту теж потрібен, і його роль виконують два файли в теці ~/app. Перший — BRIEF.md, який ти напишеш удома після цього заняття: для кого сервіс, яка проблема, три функції, чого не робимо. Другий — README.md. README.md — файл з описом проєкту, який відкривають першим: що це за програма, як її запустити, які файли за що відповідають. Назву пишуть великими літерами, щоб він стояв на початку списку файлів і його одразу було видно. Обидва файли у форматі Markdown, тобто звичайний текст із кількома знаками розмітки. У такого способу є перевага, якої окремий сервіс нотаток не дає: файли лежать поруч із кодом, і git зберігає їхні версії разом із версіями коду. Відкривши коміт піврічної давності, ти побачиш і код того часу, і опис того часу.
Ситуація. Ви вчотирьох готуєте виступ на шкільне свято. Домовилися в чаті: Марта робить презентацію, Олег — музику, Ігор — реквізит. За тиждень з’ясовується, що музики немає. Олег вирішив, що музику взяв на себе Ігор, бо після тієї домовленості в чаті було ще три повідомлення. Ніхто нікого не обманював: список справ існував тільки в переписці, і в кожного в голові він склався свій.
Linear — сервіс обліку задач. Задача тут — окремий запис із назвою (наприклад, «додати кнопку відмітки виконаного»), описом, виконавцем, терміном і статусом: нова, у роботі, на перевірці, готова. Усі задачі команди видно одним списком, і кожен бачить, хто чим зайнятий зараз. Коли задачу зроблено, статус міняють, і вона зникає зі списку поточних. Користуються цим команди в компаніях — і розробники, і люди, які вирішують, що робити далі. Схожі сервіси: Jira, Trello, GitHub Issues. Linear серед них вважають найшвидшим і найпростішим, тому його часто беруть невеликі команди. Одній людині користі від нього мало: сенс саме в тому, щоб бачити роботу інших.
Приклад. Група готує проєкт три тижні. Ви виписуєте всі справи окремими рядками, проти кожної ставите ім’я й дату, статус міняєте, коли справу зроблено. Для цього досить навіть таблиці Google — головне, щоб список був один, лежав за одним посиланням і був відкритий для всіх. На третій день перевіряєте: якщо проти справи немає імені, її не робить ніхто.
На курсі роль обліку задач виконує твій кабінет. У ньому список критеріїв усіх занять і статус кожного: зараховано чи ще ні. Одна відмінність від Linear важлива. Статус там ніхто не ставить руками: програма перевірки запускається кожні 10 хвилин, сама заходить на сервер, дивиться твої файли й сторінку і сама змінює статус. Поля «хто це робить» у кабінеті теж немає, бо виконавець у всіх твоїх задачах один.
Усі три сервіси описують як «для команди», тому їх легко переплутати. Найпростіше розділяти їх за питанням, на яке кожен відповідає.
| Сервіс | Що зберігає | На яке питання відповідає | Чим замінений на курсі |
|---|---|---|---|
| GitHub | код і всі його версії | яка версія коду зараз правильна, хто і які рядки змінив | репозиторій ~/repo.git на нашому сервері; сам git той самий, заняття 03 |
| Notion | тексти: опис продукту, інструкції, ухвалені рішення | що це за сервіс, як ним користуватися і чому вирішили саме так | файли BRIEF.md і README.md у теці ~/app |
| Linear | задачі та їхні статуси | що ще не зроблено і хто цим зайнятий | кабінет учня зі списком критеріїв і автоматичною перевіркою |
Коротко: у GitHub лежить код, у Notion — текст про код, у Linear — перелік того, що з кодом ще треба зробити.
Троє однокласників пишуть сервіс. У них уже є список задач з іменами й
термінами і спільний документ з описом продукту. Але двічі за тиждень траплялося одне й те
саме: Аня дописала функцію у файл main.py, а через годину Тарас надіслав у чат
свою версію того самого файлу, і рядки Ані зникли. Що вирішує саме цю проблему?
ШІ (штучний інтелект) — тут це програма на кшталт ChatGPT, Claude чи Gemini, яка відповідає текстом на текстове запитання. Питати її можна і треба: попросити згенерувати розмітку сторінки, підказати, як зробити список, пояснити незрозумілий тег, знайти помилку в рядку. Це нормальна робота, і на курсі за неї ніхто не сварить.
Правило одне. На кожному занятті викладач відкриває твою роботу, показує один рядок і просить пояснити своїми словами, що він робить. Не пояснив — цей рядок ми видаляємо зі сторінки. Тому дивись на код, який тобі видали: якщо там є щось незрозуміле, або розберися з цим, або не бери.
Запити, після яких ти розумієш свою сторінку:
<ul> і чим він відрізняється від
<ol>. Я вчуся перший тиждень, відповідай коротко.»Запит, після якого пояснити не вийде: «Зроби мені красиву сторінку-самопрезентацію про
підлітка 14 років, з анімаціями». У відповідь прийде 200 рядків із розділами
<style> і <script>, яких ти не замовляв і не читав, а
питання на занятті буде про будь-який із них.
Якщо відповідь виявилася більшою за твоє розуміння, це виправляється наступним запитом: «поясни цей код рядок за рядком» або «зроби те саме, але коротше й без CSS». І остання річ: ШІ помиляється й іноді вигадує теги, яких не існує. Усе, що він видав, перевіряй у браузері: відкрий файл і подивись, чи справді вийшло те, що обіцяно.
Далі скрізь замість bohdan.g9 підставляй свій логін.
Відкрий термінал (на Windows — «Термінал» або PowerShell) і набери:
ssh bohdan.g9@91.219.61.4Першого разу програма покаже довгий рядок із літер і цифр і спитає, чи продовжувати.
Цей рядок називають відбитком ключа сервера. У кожного сервера є власний
ключ — довге секретне число, яким він підтверджує, що він саме той комп’ютер. Відбиток —
коротка позначка цього ключа. Твоя програма запам’ятає її й наступного разу мовчки звірить:
якщо відбиток зміниться, вона попередить, що за тією самою адресою відповідає вже інший
комп’ютер. Набери yes і натисни Enter. Далі введи виданий пароль: на екрані
під час набору нічого не з’явиться.
Якщо все правильно, рядок зміниться на щось на кшталт
bohdan.g9@vps:~$. Це означає: ти на сервері, у своїй домашній теці. Слово після
знака @ — назва самого сервера, у тебе вона може бути іншою.
passwdКоманда спитає поточний пароль (той, що видали), потім двічі новий. Він теж не показується. Придумай пароль не коротший за 10 символів, з цифрами й великими літерами; не бери той, яким користуєшся десь іще. Запиши його там, де точно не загубиш.
Після цього виданий на аркуші пароль більше не діє. Нікому свій пароль не передавай: усе, що зроблять під твоїм логіном, буде записано як твої дії.
pwd
ls -lПерша команда надрукує /home/bohdan.g9. Друга покаже теки
app, www, data, logs,
backups і repo.git. Сьогодні ти працюєш з одним файлом —
~/www/index.html. Подивись, що в ньому зараз:
cat ~/www/index.htmlКоманда cat друкує вміст файлу на екран. Ти побачиш кілька рядків розмітки
і слова «Скоро тут буде сервіс»: це заготовка, яку треба замінити.
Спершу текст, потім розмітка. Набери його там, де зручно: у нотатнику на комп’ютері або на аркуші. Потрібно щонайменше 400 символів видимого тексту — це приблизно 60 слів, тобто три невеликі абзаци. Рахуються тільки літери тексту, теги в цей рахунок не входять.
Що має бути на сторінці:
За бажанням: посилання на щось своє, що не шкода показати чужим людям, і проста стилізація — про неї на занятті 08, але хто вже вміє, може зробити сьогодні.
~/www віддається в інтернет усім, хто знає адресу. Тому на сторінці не
пишуть прізвища, номера школи й класу, домашньої адреси, номера телефона й розкладу свого
дня. Ім’я писати можна й треба. Якщо сумніваєшся щодо якогось речення — не пиши його.
Створи на своєму комп’ютері файл із назвою index.html. Підійде «Блокнот» на
Windows, TextEdit на macOS або VS Code, якщо він у тебе стоїть. Дві речі, які легко зіпсувати
саме тут:
index.html. «Блокнот» при збереженні дописує до
назви .txt, і виходить index.html.txt — сервер такий файл не
покаже. Щоб цього не сталося, у вікні збереження вибери «Тип файлу: усі файли» і напиши
назву повністю;UTF-8. У вікні збереження є поле «Кодування»: постав там
UTF-8, інакше українські літери на сторінці перетворяться на випадкові
знаки.Набери у файлі свою сторінку. Ось зразок, у якому текст треба замінити своїм:
<!doctype html>
<html lang="uk">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Богдан</title>
</head>
<body>
<h1>Богдан</h1>
<p>Мені 14 років. Найбільше мені цікаво, як ігри влаштовані зсередини:
чому персонаж рухається саме так і звідки береться рахунок на екрані.</p>
<h2>Що я вже вмію</h2>
<p>Пишу невеликі програми на Python: калькулятор, гру «вгадай число»
і програму, яка рахує середній бал за оцінками з файлу.</p>
<h2>Чого хочу навчитися</h2>
<p>Зробити сервіс, який працює в інтернеті цілодобово, щоб ним міг
користуватися хтось, крім мене.</p>
<h2>Улюблені ігри</h2>
<ul>
<li>Minecraft</li>
<li>Portal 2</li>
<li>Stardew Valley</li>
</ul>
</body>
</html>Якщо хочеш додати посилання, рядок виглядає так:
<p>Мої моди: <a href="https://example.com">сторінка</a></p>
Збережи файл і відкрий його подвійним кліком. Браузер покаже сторінку, а в адресному
рядку буде file:///… — це чернетка у тебе на комп’ютері, з інтернету її поки
не видно (теорія, розділ 2). Виправ, що не сподобалося, і збережи ще раз.
Тепер FileZilla. Відкрий «Файл» → «Менеджер сайтів» → «Новий сайт» і заповни поля:
FTP;91.219.61.4;21;bohdan.g9;passwd.Тисни «З’єднатися». FileZilla покаже вікно із сертифікатом: постав галочку «Завжди довіряти цьому сертифікату» й тисни «OK». Після цього вікно поділене на дві панелі — ліворуч файли твого комп’ютера, праворуч файли на сервері.
Праворуч подвійним кліком зайди в теку www. Ліворуч знайди свій
index.html. Перетягни його зліва направо. Якщо перетягувати незручно, клацни по
файлу правою кнопкою й вибери «Вивантажити».
FileZilla спитає, що робити з файлом, який на сервері вже є: вибери «Перезаписати» і
«OK». Унизу, у списку передавань, має з’явитися рядок про успішне передавання, а праворуч —
твій index.html зі свіжим часом зміни. Відкрий свою адресу в браузері: там уже
твоя сторінка.
Цей спосіб не потребує ні FileZilla, ні файлу в себе на комп’ютері. У вікні, де ти підключений по SSH, набери:
nano ~/www/index.htmlВідкриється редактор із вмістом файлу. Якщо ти вже зробив сторінку способом А, тут твій текст: виправ у ньому щось невелике — додай пункт до списку або заміни слово. Якщо способом А ти не користувався, спершу прибери заготовку. Ctrl+K вирізає той рядок, на якому стоїть курсор: підніми курсор стрілкою вгору до першого рядка й тисни Ctrl+K доти, доки екран не спорожніє. Вирізане лишається в пам’яті редактора, і Ctrl+U вставляє його назад — цю пару клавіш випадково не натискай. Далі набери свою сторінку за зразком з кроку 5.
Зберегти й вийти: Ctrl+O, потім Enter (записати файл), далі Ctrl+X (вийти). Перевір, що записалося:
cat ~/www/index.htmlУ надрукованому тексті мають бути твоє ім’я в <h1> і твої абзаци. Слів
«Скоро тут буде сервіс» лишитися не повинно.
Сьогодні спробуй обидва способи: сторінку зроби тим, який тобі зручніший, а другим внеси одну невелику правку. Так різниця між ними буде видна на твоєму власному файлі, і далі ти обиратимеш сам.
Наступну команду набирай у тому самому вікні, де ти вже підключений по SSH, тобто на
сервері. У себе на Windows її виконувати не треба: там curl — це зовсім інша
програма, з іншими ключами, і -I вона не зрозуміє.
curl -I http://91.219.61.4/u/bohdan.g9/curl — програма, яка надсилає запит із командного рядка й друкує відповідь.
Ключ -I означає «покажи тільки службові рядки, без тексту сторінки». Перший
рядок відповіді має бути таким:
HTTP/1.1 200 OKHTTP/1.1 — версія тих правил із теорії, за якими сервер відповів, а
200 — код відповіді. Якщо бачиш 403 або 404 — дивись
розділ «Якщо щось не працює».
Робота в терміналі на сьогодні закінчена. Вийди з сервера:
exitКоманда закриває сеанс SSH і повертає тебе в командний рядок твого комп’ютера. Сервер від цього не зупиняється: він працює далі, і твоя сторінка залишається доступною.
Тепер відкрий свою адресу в браузері телефона, вимкнувши Wi-Fi і лишивши мобільний інтернет. Так видно, що сторінка доступна з інтернету, а не тільки зі шкільної мережі. Заодно перевір три речі: твоє ім’я видно, українські літери показані правильно, текст поділений на абзаци.
Відкрий http://91.219.61.4/k/bohdan.g9/. Там список критеріїв усіх занять і
відмітки, що вже зараховано; за заняття 01 їх шість. Програма перевірки запускається кожні
10 хвилин, тому результат з’являється не тієї ж секунди: якщо ти щойно все зробив, оновлюй
сторінку кабінету протягом наступних десяти хвилин.
Шість критеріїв заняття 01. Перші п’ять програма перевіряє на самій сторінці, шостий — за журналом входів на сервер.
| Код | Критерій | Що це означає | Не зараховано — що робити |
|---|---|---|---|
| L01.1 | сторінка змінена | Програма забирає сторінку за адресою http://91.219.61.4/u/<логін>/
і перевіряє, що тексту заготовки «Скоро тут буде сервіс» на ній більше немає. |
Виконай ls -l ~/www: там має бути index.html зі свіжою
датою зміни. Якщо файл на місці, а слова заготовки лишилися, відкрий його ще раз і
прибери ці рядки. |
| L01.2 | на сторінці є ім’я учня | Програма бере твоє ім’я з облікового запису і шукає його в тексті сторінки. Прізвище не потрібне. | Напиши ім’я так, як воно записано в списку групи: «Богдан», а не «Богданчик» і не
bohdan. Воно має стояти у видимому тексті — у <h1> або
в абзаці. Імені в <title> замало: у тексті сторінки його не видно. |
| L01.3 | текст про себе, щонайменше 400 символів | Програма прибирає з файлу всі теги й міряє довжину того, що лишилося: це видимий текст. Має вийти 400 символів або більше, приблизно 60 слів. | Допиши ще один абзац. У рахунок не входять теги, адреси посилань і все, що стоїть у
<head>, зокрема <title>. |
| L01.4 | є структура сторінки | Програма шукає заголовок першого рівня <h1> і рахує теги
<p> та <li> разом: їх має бути щонайменше три. |
Перевір, що заголовок зроблено тегом <h1>, а не набраний великими
літерами всередині абзацу. Кожен абзац обгорни в <p> і
</p>, кожен пункт списку — у <li> і
</li>. |
| L01.5 | сторінка відкривається за публічною адресою | Програма надсилає запит на http://91.219.61.4/u/<логін>/ і чекає
код відповіді 200. |
Підключись по SSH і виконай curl -I http://91.219.61.4/u/<логін>/.
Код 404 — файлу за цією адресою немає: перевір назву, вона має бути
index.html малими літерами й лежати в ~/www. Код
403 — сервер не має права читати файл, дивись розділ «Якщо щось не
працює». |
| L01.6 | вхід на сервер виконано | Сервер записує кожен вхід під твоїм логіном. Критерій зараховується після першого успішного входу — байдуже, з термінала по SSH чи з FileZilla по FTP. | Якщо зайти не вдалося, не перебирай паролі навмання: після кількох невдалих спроб сервер тимчасово перестає відповідати саме тобі. Підійди до викладача й скажи, яку саме команду набрав і який текст побачив у відповідь. |
Обери, який сервіс ти робитимеш на курсі, і опиши його у файлі
~/app/BRIEF.md. Що таке бриф і навіщо він потрібен, розказано в теорії,
розділ 7. Розділів чотири, заголовки пиши з двома знаками решітки:
# Бриф
## Користувач
Моя сестра Оля, 11 років, ходить до художньої школи.
## Проблема
Дати здачі робіт записує в різні зошити й половину губить.
Через це двічі за чверть здавала роботу із запізненням.
## Функції
1. Додати роботу з назвою і датою здачі.
2. Побачити список робіт у порядку наближення дати.
3. Відмітити роботу як здану.
## Не робимо
- Нагадувань на пошту й у телеграм.
- Спільних списків із подругами.
- Окремого застосунку для телефона.Це зразок. Пиши про свій сервіс і свою людину, а не переписуй Олю.
Створити файл можна тими самими двома способами: nano ~/app/BRIEF.md прямо
на сервері або зробити файл у себе на комп’ютері й покласти його по FTP у теку
app. Зверни увагу на теку: BRIEF.md лежить в app.
Це опис для тебе й викладача, тому в www він не потрапляє і в інтернет не
віддається.
Автоматика цей файл не перевіряє, критерію в кабінеті для нього немає. Його читає викладач на початку заняття 02: там ви розберете, що з описаного піде в роботу першим.
Друга частина, за бажанням, якщо лишиться час. Знайди три чужі сервіси, які вирішують ту
саму задачу, що й твій, і про кожен напиши абзац: що в ньому зроблено так, що варто
повторити в себе, і що ти зробиш інакше. Загальні слова «зручний інтерфейс» не рахуються —
пиши, скільки кроків до додавання запису, що видно на першому екрані, як показано порожній
список. Цей текст поклади у файл ~/app/ANALOGI.md.
sshЗапит не доходить до сервера. Спершу звір адресу посимвольно:
ssh bohdan.g9@91.219.61.4 — крапка в логіні на місці, символ @
один. Якщо адреса правильна, найімовірніше мережа, з якої ти підключаєшся, закриває вихід на
порт 22, а саме його займає SSH. Так буває в шкільних і публічних Wi-Fi. Спробуй з мобільного інтернету, роздавши його з
телефона. Якщо і так не виходить, скажи викладачеві.
Сервер тебе бачить, але пароль не підійшов. Перевір розкладку клавіатури: символи
пароля на екрані не показуються, тому українські літери замість латинських помітити
неможливо. Вимкни CapsLock. Звір
логін — він має вигляд ім’я.група, наприклад bohdan.g9, без
пробілів. Якщо ти вже змінював пароль командою passwd, старий, виданий на
аркуші, більше не діє.
Три варіанти. Перший: файл записано не туди. Перевір ls -l ~/www — там має
бути index.html зі свіжою датою зміни. Файл у ~/app або в домашній
теці сайт не показує. Другий: ти правив свою копію на комп’ютері й не передав її на сервер —
перетягни файл у FileZilla ще раз і підтверди перезапис. Третій: браузер показує сторінку,
збережену раніше в пам’яті. Натисни Ctrl+F5 (на телефоні — оновити сторінку
потягуванням униз) або відкрий адресу в режимі анонімного перегляду.
Код 404 означає, що файлу за цією адресою немає: найчастіше він названий
Index.html з великої літери або index.htm без останньої літери —
у Linux регістр літер у назві важливий. Код 403 означає, що файл є, але сервер
не має права його прочитати; таке буває після завантаження по FTP. Виправляють двома
командами:
chmod 755 ~/www
chmod 644 ~/www/index.htmlПісля FTP права псуються і в теки, і в самого файлу, тому виконуй обидві команди. Перша
дозволяє всім заходити в теку ~/www і читати її вміст, друга — читати сам файл.
Змінювати теку й файл при цьому можеш тільки ти.
Так і має бути. Сертифікат нашого сервера самопідписаний, тому FileZilla не може його перевірити (теорія, розділ 6). Постав галочку «Завжди довіряти цьому сертифікату» й тисни «OK» — надалі це вікно з’являтися не буде.
Вхід пройшов, а список теки не приходить. Найчастіше заважає мережа: у шкільних і
публічних Wi-Fi часто закриті порти, якими FTP передає самі дані. Спробуй мобільний інтернет,
роздавши його з телефона. Якщо і так не виходить, працюй способом Б: підключись по SSH і
зроби сторінку в nano. Результат буде такий самий.
Дві причини, перевіряй по черзі. Перша: у файлі немає рядка
<meta charset="utf-8"> усередині <head> — допиши його.
Друга: файл збережено в іншому кодуванні. Відкрий його у своєму редакторі, вибери «Зберегти
як», постав кодування UTF-8 і передай на сервер ще раз. Файли, набрані на
сервері в nano, зберігаються в UTF-8 самі.
Розширення .txt дописав «Блокнот» при збереженні. Сервер віддає тільки
index.html, тому такого файлу він не покаже. Перейменуй його: у FileZilla клацни
по ньому правою кнопкою й вибери «Перейменувати», або виконай на сервері
mv ~/www/index.html.txt ~/www/index.htmlКоманда mv переміщує файл, вона ж і перейменовує: перший шлях — що взяти,
другий — чим воно має стати.
Спочатку про час: перевірка запускається кожні 10 хвилин. Якщо після збереження файлу
минуло менше, зачекай і онови сторінку кабінету. Якщо десять хвилин минули, прочитай у
таблиці вище, що саме перевіряє цей критерій, і звір із тим, що на сторінці. Найчастіші
причини такі: файл лежить не в ~/www; на сторінці лишився текст заготовки; ім’я
написане не так, як у списку групи, або стоїть тільки в <title>, де його
не видно; видимого тексту менше за 400 символів; абзаци набрані без тегів
<p>, і програма нарахувала менше трьох.