Вайб-кодинг: створіть власний невеликий застосунок

Під час вайб-кодингу (англ. vibe coding) ви звичайними словами описуєте, що хочете створити. Асистент пише код, показує результат і змінює його відповідно до ваших відгуків. Уміти програмувати не потрібно. Так можна створити, наприклад, тренувальну вікторину, невелику гру або корисний інструмент для свого класу.

Вам потрібен лише настільний застосунок. Node.js і git установлювати не потрібно: вони вже вбудовані в застосунок.

1. Виберіть робочу папку

Створіть на комп’ютері порожню папку, наприклад Вікторина-з-математики, і виберіть її як робочу папку чату. Як це зробити, читайте в розділі Локальний доступ до файлів. Асистент працює лише в цій папці.

2. Опишіть, що ви хочете

Розкажіть якомога конкретніше, що ви хочете створити. Наприклад:

Створи вікторину з математики для 4 класу як одну HTML-сторінку. Десять запитань на таблицю множення до 10, великі кнопки, рахунок наприкінці й кнопка, щоб почати заново.

Таку просту сторінку асистент показує за допомогою вбудованого вебсервера застосунку. Результат з’являється у вбудованому браузері: кнопка Браузер (значок глобуса) праворуч на верхній панелі. Докладніше читайте в розділі Локальні сервери та вбудований браузер.

Щось не подобається? Просто скажіть, що потрібно змінити:

Зроби кнопки зеленими, а в разі неправильної відповіді показуй правильну.

Власні фото та перегляд сторінки асистентом

Додайте фото до повідомлення й попросіть:

Додай це фото на вебсторінку.

Асистент збереже фото в папці проєкту, наприклад у img/, і розмістить його на сторінці. Так можна зробити й із зображенням, яке асистент щойно створив для вас.

Щось не так зі сторінкою у вбудованому браузері? Попросіть:

Подивись, що не так на сторінці.

Асистент перегляне текст, знімок екрана й повідомлення про помилки сторінки. Див. Перегляд сторінки асистентом.

Коли асистент сам відкриває сторінку у вбудованому браузері, він чекає, доки вона завантажиться, і бачить її повідомлення про помилки, наприклад помилку скрипту або файл, що не завантажується. Він виправляє їх, перш ніж сказати, що все працює. Потім він випробовує сторінку як користувач: натискає кнопки, заповнює поля, натискає клавіші й виправляє помилки, що при цьому виникають. Чи все працює так, як ви задумали, перевіряєте ви самі.

3. Більші застосунки

Якщо вам потрібне щось більше, наприклад застосунок із кількома екранами, асистент може створити проєкт, скажімо, на Vite і React:

Створи в цій папці застосунок React з Vite для вікторини на знання слів. Установи все, запусти застосунок і покажи результат.

Створення такого проєкту (наприклад, за допомогою npm create vite@latest) ви схвалюєте на картці команди. Потім асистент установлює пакети. Це ви теж схвалюєте або вмикаєте Дозволити встановлення пакетів без запиту. Див. Встановлення пакетів. Не хочете картку для кожної команди? Оберіть Довіряти цьому проєкту на першій картці.

4. Зберігайте версії

Версія — це знімок вашого проєкту. Якщо якась зміна не сподобалася, можна повернутися до попередньої версії. У слушний момент попросіть асистента:

Збережи версію.

Першого разу асистент створює для папки історію версій. Файли, схожі на секрети, як-от паролі чи ключі (зокрема ключі Google API), ніколи не потрапляють у версію. Асистент повідомляє, якщо щось пропускає.

5. Розмістіть проєкт на GitHub

На GitHub ваш проєкт зберігається онлайн. Так у вас є резервна копія, і ви можете продовжити роботу над ним на іншому комп’ютері.

Підключення GitHub

Кожен підключає власний обліковий запис GitHub. Ще немає облікового запису? Спершу створіть безкоштовний на github.com/signup.

1. Перейдіть до Налаштування і в розділі Стан робочого столу знайдіть панель GitHub.
2. Натисніть Підключити GitHub. Застосунок покаже код і відкриє github.com/login/device у браузері.
3. Введіть код на GitHub (його можна скопіювати кнопкою Копіювати код) і надайте дозвіл. Якщо сторінка не відкрилася, натисніть Відкрити GitHub.
4. Тепер панель показує Підключено як @ваше-імʼя.

Що запитує GitHub. GitHub показує застосунок AI-School Desktop від HandiHow-B-V і просить доступ до ваших репозиторіїв (repo): читання й запис, зокрема в приватних репозиторіях. Цей доступ потрібен, щоб створювати й оновлювати проєкт. Надавайте дозвіл, лише якщо сторінка відкрита на github.com.

Код сплив? Код дійсний приблизно 15 хвилин. Якщо він сплив, знову натисніть Підключити GitHub.

Репозиторії організації, наприклад GitHub-організації вашої школи:

• Якщо організація обмежує сторонні застосунки, натисніть Request (запросити доступ) поруч з організацією на екрані дозволу. Це можна зробити й пізніше на github.com/settings/applications > AI-School Desktop.
• Власник організації схвалює запит у Settings > Third-party access > OAuth application policy організації.
• Без цього схвалення ваші власні репозиторії працюють, а репозиторії організації — ні.

Інший обліковий запис? Натисніть Відключити і вийдіть із github.com у браузері (або скористайтеся приватним вікном), перш ніж підключатися знову. Інакше GitHub використає обліковий запис, у який ви вже ввійшли.

замітка

Старіші версії застосунку показують «Вхід через GitHub ще недоступний у цій версії застосунку.» У такому разі оновіть застосунок.

Публікація та оновлення

Потім попросіть, наприклад:

Розмісти цей проєкт на GitHub.

Асистент покаже картку з мітками Вбудовано в застосунок і Мережа увімк., а також із точною адресою. Натисніть Виконати, щоб продовжити, або Відхилити, щоб зупинитися. Новий репозиторій буде приватним, якщо ви не попросите створити публічний. Якщо адреса не github.com або репозиторій стає публічним, картка попереджає про це. Під час публікації ви бачите, які файли буде надіслано.

Згодом можна писати, наприклад:

• «Опублікуй нову версію онлайн.» Асистент надсилає ваші нові версії на GitHub.
• «Отримай найновішу версію.» Асистент завантажує зміни з GitHub.
• «Завантаж проєкт https://github.com/naam/project у цю папку.» Асистент завантажує наявний проєкт.

Публічний проєкт можна завантажити й без підключення. Для публікації онлайн і створення нового репозиторію підключення потрібне.

6. Поради з безпеки

• Нові репозиторії приватні. Робіть репозиторій публічним, лише якщо код можуть бачити всі.
• Ніколи не додавайте в застосунок паролі, ключі чи інші секрети.
• Використовуєте ключ Google API (починається з AIza, як-от вебключ застосунку Firebase)? Збережіть його у файлі, який асистент не додає до версій, наприклад .env. Якщо ключ залишається в коді, цей файл не публікується онлайн.
• Перш ніж натиснути Виконати, завжди перевіряйте адресу на картці.
• Підключення зберігається в зашифрованому вигляді у вашому обліковому записі користувача на цьому комп’ютері. Асистент ніколи не бачить вашого ключа GitHub. Якщо ви працюєте на спільному комп’ютері, після завершення роботи натисніть Відключити.
• Відключити видаляє підключення лише з цього комп’ютера. Щоб повністю відкликати доступ, зробіть це на GitHub у розділі Settings > Applications.