Тривалість: 6 годин
Формат: Практичний воркшоп із наставницькими вправами та реальним проєктом
Цільова аудиторія: Початківці, майбутні розробники, дизайнери, підприємці, засновники стартапів та всі, хто зацікавлений у створенні вебзастосунків за допомогою ШІ.
Опис воркшопу
Дізнайтеся, як створити сучасний застосунок на React без написання коду з нуля! У цьому практичному воркшопі учасники дізнаються, як використовувати інструменти розробки на основі ШІ, щоб перетворити ідею на функціональний вебзастосунок.
Учасники навчаться генерувати інтерфейс користувача (UI), підключати зовнішні API, працювати з даними та інтегрувати можливості ШІ у вебсервіс. Використовуючи асистентів кодування на основі ШІ та сучасні платформи розробки, вони дослідять процес створення, тестування та підготовки застосунку на основі ШІ до розгортання.
Глибокий досвід програмування не потрібен. Воркшоп зосереджений на використанні промптів природною мовою, коду, згенерованого ШІ, та візуальних інструментів розробки для спрощення процесу створення застосунків.
Що ви дізнаєтесь
- Розробка з допомогою ШІ: Перетворіть ідею на застосунок за допомогою промптів природною мовою та ШІ-асистентів для кодування.
- Генерація інтерфейсу: Створюйте адаптивні інтерфейси, розкладки та переиспользовані компоненти React за допомогою ШІ.
- Основи React: Зрозумійте базову структуру застосунку React, компоненти, пропси та стан.
- Інтеграція API: Підключайте зовнішні API та відображайте динамічні дані у вашому застосунку.
- Інтеграція ШІ-сервісів: Додавайте функціональність на основі ШІ за допомогою ШІ API.
- Керування даними: Дізнайтеся, як зберігати, отримувати та керувати даними застосунку.
- Тестування та відладка: Виявляйте помилки, вдосконалюйте згенерований код та вирішуйте типові проблеми за допомогою ШІ.
- Розгортання: Дізнайтеся, як опублікувати вебзастосунок за допомогою сучасної хостинг-платформи.
Програма воркшопу
Частина 1. Від ідеї до UI — 1 година
- Визначте ідею проєкту та основну функціональність.
- Ознайомтеся з інструментами розробки на основі ШІ.
- Згенеруйте початковий інтерфейс та структуру застосунку.
Частина 2. Створення застосунку React — 1,5 години
- Створіть та налаштуйте компоненти React.
- Реалізуйте взаємодію користувача та стан застосунку.
- Покращте інтерфейс за допомогою коду, згенерованого ШІ.
Частина 3. Підключення API та ШІ — 1,5 години
- Підключіть зовнішнє API.
- Обробіть та відобразте дані.
- Інтегруйте функцію на основі ШІ у застосунок.
Частина 4. Тестування та відлагодження — 1 година
- Перевірте основні функції застосунку.
- Визначте та виправте помилки за допомогою ШІ-асистентів.
- Покращте зручність використання та обробіть типові граничні випадки.
Частина 5. Розгортання та презентація проєкту — 1 година
- Підготуйте застосунок для розгортання.
- Опублікуйте проєкт за допомогою відповідної хостинг-платформи.
- Презентуйте результати та обговоріть можливості подальшого розвитку.
Практичне завдання
Створіть та запустіть власний веб-сервіс на базі ШІ.
Протягом воркшопу учасники розроблять робочий застосунок, який поєднує зручний інтерфейс, інтеграцію API та функцію на базі ШІ. Приклади проєктів: генератор тексту на базі ШІ, інтелектуальний інструмент рекомендацій, освітній асистент або простий сервіс створення контенту на базі ШІ.
Очікувані результати
Наприкінці воркшопу учасники зможуть:
- Створити застосунок React за допомогою інструментів розробки з підтримкою ШІ.
- Створити та налаштувати функціональний інтерфейс користувача.
- Підключити API та працювати з динамічними даними.
- Інтегрувати функціональність ШІ у вебзастосунок.
- Тестувати, відлагоджувати та вдосконалювати застосунок за допомогою ШІ.
- Розуміти кроки, необхідні для розгортання робочого вебсервісу.
Учасники отримають функціональний прототип проєкту, практичний досвід роботи з інструментами розробки на базі ШІ та робочий процес, який вони зможуть повторно використати для створення власних застосунків.
Рекомендовані інструменти
- Асистенти кодування на ШІ: ChatGPT, Claude, GitHub Copilot, Cursor
- Середовища розробки: Replit, CodeSandbox, StackBlitz
- Фронтенд: React, Vite
- API та бекенд-сервіси: Supabase, Firebase, REST API
- Розгортання: Vercel, Netlify
Підхід воркшопу: Створюйте реальний проєкт, вчіться через експерименти та використовуйте ШІ, щоб перетворити ідеї на робочі застосунки.
Примітка: Воркшоп триває 6 годин. У початковому завданні йдеться про завершення ШІ-сервісу за 4 години; додатковий час передбачено для тестування, налагодження, розгортання та презентацій проєктів. Кінцевий результат залежатиме від складності проєкту та досвіду учасників.