# Кейс 5 — ШІ як помічник у реалізації складних проєктів

> **Теза:** ШІ дозволяє ставити студентам завдання, які раніше були б нереалістичними для їхнього рівня — і отримувати результати, що вражають.

---

## Зміна підходу до проєктних завдань

Традиційно складність завдання обмежена тим, **скільки студент вже знає**.  
З ШІ обмеження змінюється: тепер важливо **наскільки студент вміє формулювати задачу** і **аналізувати результат**.

```
Раніше:  рівень знань студента  →  складність проєкту
Тепер:   амбіція студента + ШІ  →  складність проєкту
```

Це не означає, що знання не потрібні. Навпаки — щоб **перевірити** і **адаптувати** код від ШІ, студент мусить розуміти що відбувається. ШІ прискорює реалізацію, але не замінює розуміння.

---

## Напрямки складних проєктів

### 🎮 Робота з 3D-моделями та WebGL

Студенти можуть реалізовувати інтерактивні 3D-застосунки прямо у браузері — без встановлення спеціального ПЗ.

**Можливі проєкти:**
- Інтерактивний 3D-конструктор (ПК, автомобіль, будівля)
- Віртуальна екскурсія по об'єкту (музей, коледж, лабораторія)
- Тривимірна візуалізація даних або алгоритмів
- 3D-каталог товарів з обертанням моделей

**Стек:** Three.js / React Three Fiber, завантаження `.glb`/`.gltf` моделей з Sketchfab або власне створення в Blender

---

### 🌍 Робота з геолокацією та картами

Геолокація відкриває цілий клас практичних застосунків, актуальних і зрозумілих студентам.

**Можливі проєкти:**
- Карта закладів міста з фільтрацією (кафе, аптеки, зупинки)
- Застосунок для туристичних маршрутів по місцевих пам'ятках
- Трекер пробіжок або велопоїздок з візуалізацією маршруту
- Геопошук — "знайди найближчий ..."
- Інтерактивна карта подій або оголошень у місті

**Стек:** Leaflet.js, Mapbox GL, OpenStreetMap API, Geolocation API

---

### 🎓 Навчальні платформи та інструменти

Студенти створюють інструменти для навчального процесу — корисні одразу і для себе, і для інших груп.

**Можливі проєкти:**
- Віртуальна класна кімната (відеоконференція, дошка, чат)
- Платформа для здачі та перевірки лабораторних робіт
- Система відстеження прогресу студента з аналітикою
- Автоматичний генератор тестів по темі (з ШІ всередині)
- GitHub-дашборд групи — хто що здав, статуси репозиторіїв

**Стек:** React/Next.js, Node.js, WebSocket (Socket.io), GitHub API

---

### 🎵 Робота з мультимедійним контентом

Браузер сьогодні — потужна мультимедійна платформа. Студенти часто не підозрюють, що можна зробити без жодного стороннього сервісу.

**Можливі проєкти:**
- Аудіовізуалізатор — анімація під мікрофон або файл
- Застосунок для обробки зображень (фільтри, кадрування) прямо у браузері
- Відеоредактор з накладанням субтитрів та ефектів
- Музичний секвенсор або простий синтезатор
- Генератор мемів або постерів з завантаженням результату

**Стек:** Web Audio API, Canvas API, MediaRecorder API, FFmpeg.wasm

---

### 🤖 ШІ всередині студентського проєкту

Студенти можуть інтегрувати ШІ як функціональний компонент свого застосунку — не просто "використати ChatGPT", а вбудувати AI в логіку проєкту.

**Можливі проєкти:**
- Розумний чат-помічник для сайту коледжу (FAQ-бот)
- Автоматична перевірка домашніх завдань з поясненням помилок
- Генератор навчальних планів або розкладу занять
- Застосунок для розмовної практики іноземної мови з AI-співрозмовником
- Система аналізу тональності відгуків (студентів, клієнтів)

**Стек:** Anthropic API / OpenAI API, Claude claude-sonnet-4-20260514, стрімінг відповідей

---

### 📊 Робота з реальними даними та API

Підключення до відкритих API перетворює навчальний проєкт на щось справжнє.

**Можливі проєкти:**
- Погодний застосунок з прогнозом та красивою анімацією
- Дашборд валют і криптовалют з графіками в реальному часі
- Агрегатор новин з категоріями та пошуком
- Застосунок для перегляду GitHub-активності (свого або чужого)
- Монітор доступності сайтів з push-сповіщеннями

**Стек:** REST API, WebSocket, Chart.js / Recharts, PWA (Push API)

---

### 🧩 Ігри та інтерактивні симуляції

Ігровий формат — потужна мотивація. Навіть простий проєкт виглядає вражаючо.

**Можливі проєкти:**
- Браузерна гра з фізичним движком (платформер, головоломка)
- Симулятор алгоритму (сортування, пошук у графі) з анімацією
- Навчальна гра для вивчення HTML/CSS (drag-and-drop задачі)
- Мультиплеєрна гра через WebSocket (хрестики-нулики, крейдяна дошка)
- AR-застосунок через камеру браузера

**Стек:** Phaser.js, Matter.js, WebSocket, WebRTC, WebXR API

---

## Роль ШІ в реалізації таких проєктів

ШІ в цих проєктах виконує конкретні функції — не думає за студента, а знімає технічні бар'єри:

| Що робить студент | Що робить ШІ |
|-------------------|--------------|
| Формулює ідею і вимоги | Генерує базову архітектуру проєкту |
| Вибирає стек і підхід | Пояснює незнайомі API і бібліотеки |
| Аналізує та тестує код | Знаходить і пояснює помилки |
| Приймає дизайн-рішення | Пропонує варіанти реалізації |
| Презентує і захищає проєкт | Допомагає підготувати документацію |

---

## Головна думка

> Проєкт, на реалізацію якого без ШІ пішло б **семестр** — студент з ШІ може зробити **за кілька тижнів**.  
> При цьому він вчиться більше, бо стикається зі складнішими задачами і реальними рішеннями.

---

*— Власне, у мене є студенти, які вже реалізували подібні проєкти.*  
*Пропоную передати їм слово. 🎤*

---

*Тернопільський фаховий коледж ТНТУ ім. Івана Пулюя*  
*Методичне об'єднання викладачів комп'ютерних дисциплін, 2026*