Перевірка та завершення продукту

Демонстрація, публікація та критерії оцінювання

Варіанти хостингу та розгортання клієнтського застосунку, структура 2-хвилинної презентації продукту та офіційні критерії оцінювання фінального проєкту

Демонстрація, публікація та критерії оцінювання

🎯 Мета розділу

Опанувати базові способи публікації (Deployment) клієнтського веб-застосунку в мережі Інтернет.
Підготувати переконливу 2-хвилинну демонстрацію продукту за структурою «Проблема → Рішення → Живий показ».
Зрозуміти матрицю критеріїв оцінювання курсу та підготувати проєкт до успішного захисту.
Підбити підсумки спринту та окреслити траєкторію подальшого розвитку навичок AI-розробника.

🔑 Ключові терміни

Публікація / Розгортання (Deployment): процес розміщення файлів веб-застосунку на публічному веб-сервері або CDN для доступу через загальнодоступну URL-адресу.
Демонстрація продукту (Product Demo / Pitch): коротка структурована презентація, що фокусується на цінності для користувача та практичній працездатності системи.
Статичний хостинг (Static Web Hosting): хмарна інфраструктура (GitHub Pages, Vercel, Netlify), призначена для миттєвої роздачі файлів HTML, CSS та JS без потреби у власному сервері.
Критерії оцінювання (Assessment Rubric): формалізований перелік інженерних і продуктових вимог, за якими виставляється підсумкова оцінка за курс.

Публікація проєкту: як поділитися посиланням

Хоча публікація проєкту не є обов'язковою умовою для виставлення оцінки (оцінювання може проводитися безпосередньо у робочому середовищі AI IDE), вміння перетворити локальний код на працююче інтернет-посилання є важливою інженерною навичкою.

Сучасні AI-платформи та інструменти роблять публікацію справою одного кліку:

Вбудоване розгортання в AI IDE (Bolt.new, Replit):
- Більшість середовищ мають кнопку «Deploy» або «Publish» у верхньому правому куті.
- За лічені секунди система генерує унікальну публічну URL-адресу (наприклад, my-app.bolt.app), якою можна поділитися з викладачем, одногрупниками або відкрити з власного смартфона.
Статичний хостинг через GitHub Pages або Vercel:
- Якщо ваш код синхронізовано з репозиторієм на GitHub, ви можете безкоштовно увімкнути функцію GitHub Pages у налаштуваннях репозиторію (Settings → Pages → Branch: main).
- Альтернативно можна підключити обліковий запис до Vercel або Netlify, які автоматично збирають і публікують сайт при кожному новому коміті.

Обов'язково збережіть отримане публічне посилання на ваш працюючий застосунок у файлі CONTEXT.md та додайте його до навчального звіту.

Структура 2-хвилинного продуктового пітчу

На захисті проєкту студенту важливо продемонструвати не просто факт наявності коду, а своє продуктове та інженерне мислення. Викладач або екзаменатор оцінює вміння автора чітко донести цінність розробки.

Найкраща структура короткої презентації триває рівно 120 секунд і складається з чотирьох блоків:

Розгортання продукту та структура 2-хвилинного пітчу

Loading diagram...

Приклад зразкового виступу:

Проблема: «Студенти коледжу часто недооцінюють час, необхідний для підготовки до занять, і відкладають читання складних матеріалів на останню ніч. Мій продукт — QuickReader — допомагає за 10 секунд дізнатися реальну тривалість роботи з текстом».
Головний сценарій: «Я обираю обсяг у 20 сторінок, тип складності "Наукова стаття" і натискаю кнопку. Застосунок розраховує 60 хвилин і рекомендує зробити одну перерву на відпочинок».
Обробка помилок: «Якщо випадково натиснути кнопку без введення сторінок, застосунок не падає і не показує NaN, а ввічливо підсвічує поле червоним кольором».
Адаптивність: «Інтерфейс оптимізовано під смартфони: кнопки мають великий розмір, а горизонтальний скрол повністю відсутній».

Офіційна матриця оцінювання проєкту

Підсумкова оцінка за курс виставляється на підставі виконання практичних завдань та відповідності підсумкового застосунку критеріям якості:

Критерій оцінювання	Вага	Що саме перевіряється?
Працездатність головного сценарію	30%	Користувач вводить коректні дані, натискає кнопку та отримує правильний, зрозумілий результат без затримок і помилок.
Клієнтська валідація та помилки	20%	Захист від порожнього вводу, нуля та від'ємних чисел; наявність інформативного повідомлення про помилку замість системного крашу.
Архітектура станів UI	15%	Чітке розділення початкового стану (результат приховано), стану успіху та стану помилки; наявність кнопки скидання або повторної дії.
Адаптивність та ергономіка	15%	Коректне відображення як на моніторі комп'ютера, так і на екрані смартфона; відсутність виходу елементів за межі екрана (overflow).
Чистота кодової бази та безпека	10%	Відсутність сміття у коді, видалені `console.log`, відсутність витоку паролів, персональних даних чи секретних ключів.
Дотримання архітектурних меж (Non-Goals)	10%	Суто клієнтська автономна робота без сервера, бази даних та авторизації; відсутність важких сторонніх бібліотек.

Практичні завдання та запитання для самоконтролю

Edit this pageorReport an issue

Підготовка підсумкової версії коду

Очищення кодової бази від налагоджувального сміття, аудит безпеки даних, підготовка демонстраційних значень та фіксація фінального релізу

Що таке Tailwind CSS і навіщо він потрібен

Глибоке занурення у філософію utility-first CSS. Чому Tailwind вирішує реальні проблеми CSS у великих проєктах, як він працює під капотом і коли його варто, а коли не варто використовувати.