Модуль I · IT Skills (Cloud Services & Design) · наскрізний проєкт STARTUP LAUNCH · 120 хвилин
Минулого уроку ти отримав акаунт, чотири теки й адресу, за якою відкривається
твій index.html. Адреса працює. Але людина, яка про твій проєкт
нічого не чула, закриє вкладку за десять секунд: там немає жодного речення
про те, що це і для кого.
Порядок сьогодні такий: спершу видимий результат у браузері, потім реакція читача, далі документ із задумом і аж наприкінці — репозиторій, у якому видно, як робота робилася.
~/www/index.html — прототип. ~/www/brief.html — бриф
0.1. ~/notes/changelog.md — журнал змін, приватний. І репозиторій
startup-launch на GitHub із історією комітів.Одна команда — і зрозуміло, чи є що показувати
Підключися по SSH так само, як минулого разу, і виконай на сервері:
У єдиному рядку відповіді має стояти код 200: сервер знайшов файл
і віддав його. Будь-що інше означає, що для стороннього твоєї сторінки немає —
хоч би що показував тобі ls.
Логін підстав свій: із кутовими дужками команда не спрацює.
Чотири теки вже створені — сьогодні ти лише розкладаєш файли по місцях.
Публічна з них одна: www.
Код 200 доводить, що працює сервер, а не що працює продукт
Відкрий свою адресу очима людини, яка бачить її вперше. Заголовок, три порожні секції, більше нічого. Формально сторінка є. Фактично на ній немає відповіді на жодне з трьох питань: що це, для кого і що тут робити.
Тому наступні тринадцять уроків будуються навколо прототипу — найменшої версії продукту, на якій уже можна отримати реакцію чужої людини. Краса тут ні до чого: достатньо, щоб читач переказав задум своїми словами.
Прототип вимагає двох звужувальних рішень. Одна проблема — не три, які здаються схожими. Одна аудиторія — та, яку можеш назвати на ім’я і спитати сьогодні. «Для всіх» звучить масштабно, але таку гіпотезу неможливо перевірити: немає списку людей, у яких спитати.
Ти показав сторінку трьом однокласникам. Усі троє сказали «нормально», і жоден нічого не спитав. Що це найімовірніше означає?
Три блоки тексту й одна дія — більше сьогодні не потрібно
Секції hero, problem і solution у тебе
вже є з першого уроку. Сьогодні кожна відповідає на одне питання.
Робоча назва — одне-два слова, які не соромно вимовити вголос. Не «Мій сайт» і не «Document»: змінити її можна пізніше, лишити порожньою — ні.
href="brief.html" веде у твою теку. href="/brief.html"
веде в корінь домену, де твого файла немає. Помилка в один символ дає 404,
і побачиш ти її, тільки коли натиснеш посилання сам.Неопублікована сторінка не дає реакції, а публікація ламається на дрібницях
Текст без читача доводять нескінченно, а перевірити його можна лише
на людині, яка твоїх пояснень не чула. Друга причина технічна: публікація
зривається через ім’я файла з великої літери, забутий перенос із
upload чи кодування — це дешевше зловити зараз.
Збережи файл у UTF-8, поклади по SFTP у ~/upload/
(sftp://91.219.61.4, порт 22) і перенеси:
Ім’я має бути точно index.html, малими літерами. Права
-rw-r--r-- виходять самі: читати може будь-хто, зокрема вебсервер,
змінювати — тільки ти.
> дає UTF-16,
і сторінка перетворюється на нечитабельні символи; там потрібно
Out-File -Encoding utf8. У Git Bash, macOS і Linux звичайний
> уже дає UTF-8.Якщо в браузері досі вчорашній текст — Ctrl+F5: браузер тримає копію сторінки.
Ти розумієш свій текст завжди — це нічого не доводить
Дай посилання однокласникові, який не чув про твій проєкт. Нічого не пояснюй. Постав три питання й запиши відповіді дослівно.
Дослівно — принципово: переказуючи почуте своїми словами, ти виправляєш його до того, що хотів почути. Сперечатися теж не можна.
| Що ти почув | Що це означає | Що правити |
|---|---|---|
| «Не зрозумів, для кого» | аудиторія не названа в першому реченні | hero: вписати, кого маєш на увазі |
| Названо іншу проблему | проблема описана через відсутність продукту | problem: переписати через поведінку людини |
| «Не зрозумів, що робити» | на сторінці немає дії | solution: додати перший крок читача |
Правити сторінку за кожним почутим словом можна нескінченно. Потрібен документ, у якому задум записаний один раз — так, щоб через місяць на нього послатися в суперечці. Це бриф.
Два читачі назвали дві різні проблеми, які нібито розв’язує твій продукт. Ти впевнений, що помилилися обидва. Найкорисніша дія?
П’ять розділів, які вирішують, чи має сенс усе інше
Бриф не про технології й не про дизайн. Він відповідає на п’ять питань так, щоб відповіді можна було процитувати через місяць, коли команда почне тягнути продукт у різні боки.
Версія 0.1 — проблема, аудиторія, рішення, цінність, критерій успіху. Конкуренти й фінансова модель теж належать брифу, але потребують даних, яких сьогодні немає: ринок — урок 3, витрати — урок 4.
Порядок не випадковий: наступний розділ має сенс лише тоді, коли попередній заповнений чесно. Почнеш із рішення — вийде продукт, якому шукають аудиторію.
І головне: бриф пишуть до продукту. Написаний після, він переказує зроблене й завжди виявляється правильним — перевірити ним нічого не можна.
Перші два розділи, у яких помиляються найчастіше
Запитай себе: що людина робить зараз, коли їй це потрібно, як часто і чому результат поганий. Твого продукту у відповіді бути не повинно.
Порівняй. «Немає зручного сайту, де школярі могли б обмінюватися навичками» — опис того, чого бракує тобі. «Дев’ятикласник, який хоче навчитися монтажу, питає в чаті класу, отримує дві відповіді за тиждень і кидає» — опис того, що відбувається з людиною. З другого видно і аудиторію, і критерій успіху.
Аудиторія перевіряється так само: випиши три конкретні імені людей, яких можеш спитати сьогодні. Не виходить — вона описана надто широко.
У розділі «Проблема» написано: «Немає зручного сайту, де школярі могли б обмінюватися навичками». Що з цим формулюванням не так?
Три розділи, у яких загальні слова видно найкраще
Рішення — не перелік технологій: читач хоче знати, що зробить у продукті за перші п’ять хвилин. Цінність вимірюється відносно замінника, а замінник є завжди — чат класу, зошит або «нічого не робити». Критерій успіху — це число й дата: «30 обмінів за перший місяць» можна перевірити, «щоб людям сподобалось» не спрацює ніколи — і не провалиться теж.
| Розділ | Питання, на яке відповідає | Типова підміна |
|---|---|---|
| Проблема | Що людина робить зараз і чому це погано? | «немає такого сайту» |
| Аудиторія | Кого з них можеш назвати на ім’я і спитати сьогодні? | «для всіх» |
| Рішення | Що вона зробить у продукті за перші п’ять хвилин? | перелік технологій |
| Цінність | Чого не вміє те, чим користуються замість тебе? | «зручніше і сучасніше» |
| Критерій успіху | Яке число до якої дати означає, що гіпотеза справдилася? | «щоб людям сподобалось» |
Одна й та сама п’ятірка розділів живе у двох місцях із різними правилами
Типова поразка на захисті: команда дає журі посилання на робочий документ. Журі бачить закреслення, три варіанти назви й коментар «а це взагалі треба?».
| Ознака | Робочий документ | Сторінка brief.html |
|---|---|---|
| Хто відкриває | ти, рецензент, учитель | будь-хто, кому дали адресу |
| Що видно | чернетки, пропозиції, суперечка на полях | тільки узгоджений результат |
| Як часто змінюється | кілька разів за урок | коли зміни вже прийнято |
| Попередні стани | зберігає сервіс | немає: перезапис стирає попереднє |
Останній рядок — найважливіший. На сервері історії версій немає: коли ти
виконуєш mv поверх наявного файла, старі байти зникають. Тому
чернетка живе в хмарному документі, а на сервер їде знімок узгодженого стану.
Ти щодня перезаписуєш ~/www/brief.html новою
версією. Через тиждень розумієш, що варіант триденної давності був кращий.
Де його шукати?
Потрібен спосіб отримати відгук, не віддаючи оригінал
Ти відкрив документ однокласникові, щоб він сказав, що не так з розділом «Рішення». Він не сказав — він його переписав. Що змінилося, не видно, а свого варіанта в тексті більше немає. Це не злий намір, а наслідок виданого права.
Режимів роботи три, і різниця між ними одна: чи потрапляє твоя зміна в текст одразу.
Правило вибору: свій текст — редагування; чужий — пропонування; не знаю, як має бути, — коментар.
Питання не «наскільки я йому вірю», а «що ця людина має зробити»
Кожен файл має рівно одного власника. Решта отримують ролі-сходинки: кожна додає дії до попередньої й нічого не забирає.
Дві межі варто запам’ятати окремо. Історію версій бачить лише той, хто має право редагувати — фраза «подивись у версіях» до коментатора не застосовна. І редактор за замовчуванням може роздавати доступ далі: це вимикають окремою галочкою. Підняти людину на сходинку легко, опустити — пізно: зроблене зміною ролі не скасовується.
Учителька просить: «відкрий мені документ, я лишу зауваження, але сама нічого чіпати не буду». Яку роль видати?
Найчастіша дірка в шкільних проєктах виглядає нешкідливо
Способів роздати доступ два, і відрізняються вони тим, кого сервер перевіряє на вході.
Іменний доступ. Ти вписуєш пошту конкретної людини; сервер дивиться, під яким акаунтом вона зайшла, і звіряє зі списком. Немає в списку — документ не відкриється, хоч би звідки вона взяла адресу.
Доступ за посиланням. Списку немає взагалі. Це зручно доти, доки посилання є у двох людей. Далі рецензент пересилає його в чат класу, звідти хтось вставляє URL у відкритий допис — і ту сторінку обійде пошуковий робот. Перевірку особи там уже не ввімкнеш, а забрати переслане посилання неможливо.
~/www/brief.html це вимога:
тека публічна.Ти поставив документу «усі, хто має посилання — редактор», а через тиждень побачив у ньому правки від безіменного відвідувача. Чого вже неможливо зробити?
@згадка робить із зауваження доручення, а дві кнопки під пропозицією — рішення
Ти лишив коментар «тут щось не так». За тиждень він на тому самому місці:
адресата немає, дії немає. Набери @ і вибери людину — їй прийде
сповіщення; такий коментар можна ще й призначити завданням.
Доручення має три частини: виконавець, що саме перевірити
і строк. Порівняй: «хтось має перевірити цифри» — і
«@kovalenko перевір число 30 обмінів до п’ятниці».
| Спосіб сказати | Що з ним не так | Як краще |
|---|---|---|
| «Скинув правки в чат» | правка відірвана від місця в тексті | коментар на фрагменті |
| «Тут щось не так» | немає адресата й немає дії | @ім’я плюс що зробити |
| «Виправив, дивись» | незрозуміло, що змінилося | пропозиція: старий і новий текст поруч |
| Правка в чужому розділі напряму | автор дізнається випадково | режим пропонування |
Мовчазне відхилення — найшвидший спосіб втратити рецензента: людина
витратила час, а її правка зникла. Тому діє вимога: відхилив — напиши
в коментарі одне речення, чому. Прийняв — правка йде в продукт: документ
зі зміною і стара сторінка описують різні продукти, тому
index.html перезаливають ще раз.
Рецензент запропонував замінити «для всіх» на «для 9–11 класів». Ти не згоден: аудиторія ширша. Найкорисніша дія?
Історія версій відповідає «що змінилося». Журнал змін відповідає «навіщо»
Перша правка вже прийнята — є що записувати. Історія версій зберігає кожне натискання клавіші, але не пояснює жодного рішення. Формат, яким користується пів індустрії, називається Keep a Changelog, і кожне його правило розв’язує окрему проблему.
РРРР-ММ-ДД: читається однаково будь-де
й сортується сама.Журнал лежить у notes, а не у www: у записах стоять
логіни однокласників — прізвище, ініціал і клас. Тека notes має
права 700 і назовні не видна.
Тепер історія версій відповідає на питання, яке в тебе справді виникло
Відкрий історію версій і вибери стан до чужої правки. Відновлення робить стару версію поточною і нічого не стирає: історія лише подовжується, тому пробувати безпечно.
Для документів, таблиць і презентацій історія ведеться постійно. Для
звичайних файлів — PDF, зображень, .csv — стару версію можуть
остаточно стерти через 30 днів або коли з’явиться 100 новіших. Рятує позначка
«зберігати назавжди».
І ще раз межа з кроку 9: на сервері версій немає. Усе, що ти хочеш мати
змогу відкотити, має існувати десь, крім ~/www/.
Ти тримаєш чернетки логотипа у хмарному сховищі як
.png. Через півтора місяця хочеш повернутися до найпершого
варіанта — а в історії його немає. Що сталося?
Журі бачить результат. Репозиторій показує, як він з’явився
На Demo Day твоя сторінка виглядатиме однаково і після трьох тижнів роботи, і після однієї ночі з чужим шаблоном. Питання «це справді робив ти?» звучить щоразу, і готовим файлом на нього не відповісти.
Відповідає репозиторій — сховище проєкту з історією змін. Кожен збережений крок називають комітом, і в кожного є автор, дата й повідомлення. Плюс це друге місце, де проєкт існує: на сервері, як ти бачив, історії немає.
skillswap-dev, web-maker-77.github.com/signup: пошта, пароль, ім’я акаунта
за правилом вище, код із листа.startup-launch — малими літерами, через дефіс. Постав
Public, Add a README не став, Create repository.
Далі натисни SSH і скопіюй адресу виду
git@github.com:USERNAME/startup-launch.git — з адресою
HTTPS відправлення не пройде.USERNAME — ім’я твого акаунта. NUMBER — число
зі службової пошти: Settings → Emails. LOGIN у виводі — логін
на сервері. Виконаєш команду як є — коміти підуть від чужого імені.Однокласник назвав акаунт petrenko-o-11a,
а репозиторій — sait-petrenko-11a. Формально все працює.
У чому проблема?
GitHub має переконатися, що це твій акаунт, а git — знати, чиє ім’я ставити
Пароль тут не годиться: його довелося б набирати при кожному відправленні. Замість нього сервер пред’являє GitHub ключ — пару файлів, з яких один показувати можна, а другий нікому.
Overwrite (y/n)? означає, що ключ уже є: набери
n і йди далі.
Виведи відкриту частину ключа, скопіюй увесь рядок від
ssh-ed25519 до кінця й додай його на GitHub:
Settings → SSH and GPG keys → New SSH key.
Перевір зв’язок. На питання про невідомий хост набери yes.
У відповіді має стояти твоє ім’я акаунта. Стоїть чуже — ти працюєш під чужим ключем: зупинись і поклич учителя.
Дві команди нижче виконуються один раз і до першого коміту. Без них git складе адресу автора сам — з логіна та імені сервера, і в профілі GitHub твоєї роботи видно не буде.
Пошту бери в Settings → Emails, рядок під Keep my email addresses private. Справжню не став: GitHub блокує відправлення, яке її показує.
Відправляється те, що вже лежить на сервері, — тож спершу залий усе
git бере файли з теки, у якій ти стоїш, тож усе має бути на сервері до коміту.
Далі README.md — перше, що читають у репозиторії. Прізвища,
класу й номера школи там бути не може: цей файл читає весь інтернет.
Познач файли для коміту: крапка означає «усе, що тут лежить».
Відповідь nothing to commit означає, що ти не в теці
~/www.
Прив’яжи теку до репозиторію: замість USERNAME — ім’я свого
акаунта.
Помилився — перепиши адресу через
git remote set-url origin ….
GH007: Your push would publish a private email
address — у коміті справжня пошта: перезадай user.email,
потім git commit --amend --reset-author --no-edit і відправ
ще раз.
Онови сторінку репозиторію в браузері — там мають бути твої файли. Тепер
додай у ~/www/index.html перед </body>:
Потім повтори три команди: git add .,
git commit -m "…", git push. В історії з’явиться
другий запис — уже видно роботу, а не одну заливку.
~/notes/changelog.md лежить поза текою www, тож git
його не бачить, — і це навмисно: у ньому є логіни однокласників. Публічна
історія комітів каже що змінилося, приватний журнал — навіщо.Учень зробив усе за інструкцією, але коміти на GitHub
підписані автором petrenko.o.11a@srv.localdomain, і в профілі
його роботи не видно. Що він пропустив?
Вибір без вимог — це вибір за звичкою
Порівнювати провайдерів поки нема за чим. Тому фіксуємо не провайдера, а критерії — кожен виріс із ситуації цього уроку.
Запиши ці п’ять рядків у ~/notes/ зі своїми відповідями.
Порівняння сервісів і цін — окремий урок: тоді вимоги стануть числами.
Ці теми не викинуто — у них інше місце в курсі
| Тема | Коли з’явиться | Яка проблема має виникнути спершу |
|---|---|---|
| Порівняння хмарних сервісів і тарифів | урок вибору інфраструктури | вимог до сховища стало більше, ніж один прототип |
| Таблиця порівняння сервісів у CSV | урок економіки продукту | треба порахувати витрати, а не перелічити сервіси |
| Роздільники CSV, кодування таблиць | урок обробки даних | парсер відмовився читати твій файл |
| Офлайн-доступ і резервні копії | командна робота | мережі немає або треба відновити втрачене |
| Гілки, злиття й конфлікти в git | урок командної розробки | двоє правлять той самий файл одночасно |
| Розділ «Конкуренти» | урок дослідження ринку | чому оберуть тебе, а не наявний замінник |
П’ять рядків, які ти маєш назвати вголос, не заглядаючи в екран
github.com/<акаунт>/startup-launch.<title>,
<h1>, README і назві робочого документа.Не називається якийсь рядок — це незаповнене місце в брифі. Аудиторія на уроці 3 перетвориться на сегменти ринку, критерій успіху на уроці 4 — на точку беззбитковості: обидва уроки беруть вхідні дані звідси.
На контрольній точці тебе просять назвати аудиторію, і ти відповідаєш: «усі, кому цікаво». Що це означає для решти модуля?
Найчастіша дірка в шкільних проєктах виглядає нешкідливо: «Усі, хто має посилання»
Ролі ми розібрали. Тепер друге питання: кому саме сервер ці ролі видає.
Роздати доступ можна двома способами. Відрізняються вони не зручністю, а тим, кого сервер перевіряє на вході.
Іменний доступ — ти вписуєш пошту конкретної людини. Коли вона відкриває файл, сервер дивиться, під яким акаунтом вона зайшла, і звіряє зі своїм списком. Немає її в списку — документ не відкриється, хоч би звідки вона взяла адресу.
Доступ за посиланням — списку немає взагалі. Сервер нікого не питає, хто він такий: знаєш адресу — заходь. Це зручно рівно доти, доки посилання є у двох людей. Далі воно починає жити власним життям, а забрати його назад неможливо: переслане вже переслане.
Посилання не має обличчя. Його пересилають у чат, вставляють у презентацію, копіюють у домашку, публікують у групі класу.
Сам по собі такий файл у пошук не потрапляє. Але посилання може опинитися на звичайній сторінці — у відкритому дописі чи на сайті класу.
Ту сторінку обійде пошуковий робот. І тоді твій документ може зʼявитися в результатах пошуку. Перевірка особи там уже не спрацює: її просто вимкнули.
Налаштуй доступ до документа й подивись, що зможе кожна роль. Таблиця перераховується миттєво; колонка «будь-хто з посиланням» зʼявляється тільки тоді, коли ти сам увімкнеш цей режим.
Пʼять абзаців, які вирішують, чи має сенс усе інше
Бриф — це коротка згода про те, що ми робимо і для кого. Він не про технології, не про дизайн і не про те, «на чому писати». Він відповідає на пʼять питань так, щоб на них можна було послатися через місяць у суперечці.
Порядок питань не випадковий. Кожне наступне має сенс лише тоді, коли попереднє заповнене чесно.
Спершу проблема — що і кому болить прямо зараз, без тебе й без твого продукту. Потім аудиторія — кого саме з цих людей ти можеш назвати на імʼя і спитати вже сьогодні.
Лише після цього рішення — що людина зробить у твоєму продукті за перші пʼять хвилин. Далі цінність — чого не вміє те, чим вона користується замість тебе.
І наприкінці критерій успіху — число й дата, за якими ти сам зрозумієш, вийшло чи ні.
Якщо почати з кінця, з рішення, вийде продукт, якому потім шукають аудиторію. Так буває: ідея подобається всім, а людини, якій вона потрібна, не знаходиться.
Бриф написаний після продукту — це переказ того, що вже зроблено, і він завжди виявляється правильним. Бриф написаний до — це гіпотеза, яку можна не підтвердити, і саме тому він корисний: він дешевий. Переписати абзац коштує пʼять хвилин, переписати готовий сайт — кілька уроків.
market.csv.
«Критерій успіху» на уроці 4 стане точкою беззбитковості, а на уроці 11 — питанням
у формі зворотного звʼязку. Абстрактний бриф блокує пів модуля, і це видно вже
за два тижні.Заповни пʼять полів. Сторінка перевіряє їх на конкретність — ловить порожні,
надто короткі й ті, де замість відповіді стоїть загальне слово. Коли всі пʼять
зелені, зʼявляється готовий brief.html: копіюєш, зберігаєш у UTF-8 і
заливаєш по FTP.
Поки що порожньо. Пиши своїми словами — не «правильними».
Конкуренти-заготовкою.
У ньому теж треба не менше 200 символів. Це три реальні назви з посиланнями.
І одне речення про те, чим ти від кожного відрізняєшся. Це домашнє
завдання.Чотирнадцять кроків по черзі. Галочки зберігаються, тож сторінку можна закрити.
index.html
і brief.html зберігаєш у UTF-8, кладеш по SFTP
у ~/upload/ і переносиш у ~/www/. Журнал змін —
у ~/notes/, команди git — у теці ~/www.| Що бачиш | Найімовірніша причина | Що зробити |
|---|---|---|
| 404 за твоєю адресою | файл лишився в upload або зветься Index.html | ls -l ~/www, звірити ім’я |
| Нечитабельні символи замість кирилиці | файл збережено не в UTF-8 | перезберегти й залити знову |
| Сторінка стара, хоча файл новий | копія в браузері | Ctrl+F5, потім curl -sI |
| Посилання на бриф не працює в сусіда | href="/brief.html" зі скісною | прибрати скісну |
Permission denied (publickey) | ключ не додано на GitHub | повторити cat ~/.ssh/id_ed25519.pub |
Не підійшло — клич учителя.
П’ять питань. Обери варіант — і побачиш правильну відповідь із поясненням.
1. Ти залив нову версію index.html, а за адресою
досі вчорашній текст, і Ctrl+F5 не допоміг. Що перевірити першим?
2. Рецензент має роль коментатора і хоче замінити у твоєму тексті одне слово. Що він може зробити?
3. У розділі «Критерій успіху» написано: «щоб продуктом користувалося багато людей». Чому це не критерій?
4. Яке повідомлення коміта справді щось повідомляє?
5. Чому репозиторій у всьому класі зветься однаково —
startup-launch, а не за прізвищем автора?
Відповідай реченнями, а не одним словом
~/notes/answers-02.md. Файл має лежати саме
в notes: інакше він поїде в репозиторій разом із рештою.check11 2Система зробить справжній запит на твою адресу, розбере обидві сторінки, прочитає журнал і відкриє твій репозиторій. Спроби не обмежені.
Демонстраційний режим: результат згенеровано для показу.
На сервері ця кнопка запускає check11 2 від імені учня
і кладе результат у ~/.progress/11-2.json.
no_personal стосується всього публічного: теки www,
назви репозиторію, імені акаунта й README. no_media діє весь
модуль: у ~/www/ і ~/upload/ не має бути відео,
аудіо і нічого важчого за 2 МБ.Це те, що бачить учитель, виставляючи оцінку.
| Складник | Вага | Результат |
|---|
~/notes/answers-02.md і познач, що збіглося
з відповідями на уроці.index.html за наслідками цієї розмови
і зроби окремий коміт із повідомленням, яке пояснює зміну.~/notes/changelog.md.~/notes/ п’ять вимог до інфраструктури з кроку 19
зі своїми відповідями.Усе, що можна перевірити, має посилання.
ed25519, ssh -T git@github.com —
docs.github.com · Connecting to GitHub with SSHusers.noreply.github.com і помилка GH007 —
docs.github.com · Setting your commit email addressПриклади виводу команд і логінів типові для навчального сервера: у тебе імена, розміри, дати й хеші комітів будуть свої.