Відкрийте папку
Оберіть папку проєкту як робочу папку нового чату та виберіть Ask first, щоб кожна зміна, яка записує файл, чекала на ваше рішення. Помістіть ABI-файл у цю папку до початку роботи.
Робочі процеси
Створення dApp з порожньої папки до протестованого інтерфейсу
03
Почніть з порожньої папки проєкту
Щоб створити dApp, почніть із папки, яка містить лише ABI-файл вашого власного контракту. Відкрийте цю папку як робочу папку нового чату, оберіть Ask first і опишіть сторінку, яку хочете бачити: кнопку підключення гаманця, баланс та рядок статусу транзакції. Агент аналізує папку, пропонує зміни у вигляді diff та створює сторінку лише після вашого схвалення кожної зміни. Вирішіть до початку, де буде працювати проєкт. Локальний ланцюг на вашому ПК добре підходить для першої спроби, оскільки монети на ньому не мають вартості, а публічна тестова мережа стане наступним кроком, коли сторінка запрацює. Використовуйте тимчасові акаунти в обох випадках, ніколи не використовуйте акаунт із реальними коштами, і тримайте кожен приватний ключ та seed-фразу поза папкою, чатом та репозиторієм. Результатом стане невелика протестована сторінка та README, яким зможе скористатися інша особа.
Опишіть інтерфейс
Напишіть простими реченнями, які дані має відображати сторінка та які стани транзакцій вона повинна обробляти. Вкажіть назву функції контракту, яку вона викликає, та мережу, з якою вона взаємодіє, наприклад, ваш локальний ланцюг.
Переглядайте кожну diff-зміну
Прочитайте кожну запропоновану зміну файлу в чаті, а потім прийміть її або відхиліть коротким коментарем. Розгорніть картку, якщо вам потрібен повний diff, та відхиліть усе, що ви не можете пояснити одним реченням.
Запустіть та перевірте
Дозвольте Shell запустити вашу команду збірки та команду тестування, та прочитайте код виходу на кожній картці. Відкрийте сторінку проти локального ланцюга та порівняйте те, що вона показує, з тим, що ви очікуєте. Виправте те, що не працює, перш ніж додавати наступну функцію.
Невеликий ABI-файл для початку
Прочитайте балансOf з ABI та покажіть результат на сторінці.
- read_file
balance-abi.jsonзавантажено - write_file
app.jsзбережено - edit_file
index.html+4 рядки - Shell
your build commandexit 0
чекає на вашу згоду перед наступним крокомВідхилитиПрийняти
balance-abi.json
[
{
"type": "function",
"name": "balanceOf",
"stateMutability": "view",
"inputs": [{ "type": "address", "name": "account" }],
"outputs": [{ "type": "uint256" }]
}
]Цей фрагмент JSON описує одну функцію лише для читання, balanceOf, функцію читання балансу, яку використовують токени ERC-20. Вона приймає адресу під назвою account та повертає uint256. Фронтенд використовує ABI подібний до цього для виклику контракту, а файл не містить ключів чи секретів. Збережіть його як balance-abi.json у папці проєкту та замініть його повним ABI вашого власного контракту, коли сторінка запрацює, оскільки реальний контракт зазвичай має набагато більше функцій.
Провідні уроки для першого dApp
Проаналізуйте папку та прочитайте ABI
Гарний спосіб почати вивчення web3 — прочитати один невеликий ABI-файл, перш ніж щось писати. Запитайте агента відкрити balance-abi.json. read_file показує файл, list_dir показує, що ще є в папці, а grep підтверджує точну назву функції. Агент потім пояснює в чаті, що balanceOf — це view-функція: вона читає дані та не надсилає транзакцію, тому її виклик нічого не змінює в ланцюгу. Ще нічого не записано. Він також перелічує, що знадобиться сторінці, а саме підключення до ноди, адресу розгорнутого контракту та акаунт для пошуку. Перевірте кожне твердження проти JSON на картці, оскільки модель може неправильно прочитати тип або назвати функцію, якої немає в файлі, та запитайте виправлення, перш ніж продовжувати.
Підключіть сторінку до локального ланцюга
Запитайте сторінку, яка читає баланс тимчасового тестового акаунту. write_file створює app.js із викликом до вашого локального ланцюга через JSON-RPC, а edit_file додає рядок скрипта до index.html. Вам потрібні інструменти для кросчейн-взаємодії лише тоді, коли dApp спілкується з кількома ланцюгами; першому проєкту на одному локальному ланцюгу вони не потрібні, тому залиште їх поза увагою. В режимі Ask first обидві зміни чекають як diff-файли. Прочитайте їх та прийміть. Shell потім запустить вашу команду збірки, а картка покаже реальний код виходу. Відкрийте сторінку, порівняйте число, яке вона показує, з числом, яке ваш локальний ланцюг повідомляє для того ж акаунту, та попросіть агента виправити сторінку, якщо вони відрізняються. Тримайте адресу ланцюга в одному місці, щоб зміна мережі пізніше означала редагування лише одного рядка.
Обробляйте стани транзакцій
Перехід від web2 до web3 як розробник переважно означає додавання гаманця, мережі та стану транзакції до екранів, які ви вже вмієте будувати. Запитайте агента додати рядок статусу з 5 станами: не надіслано, очікування гаманця, pending (в обробці), підтверджено та помилка. edit_file змінює скрипт та таблицю стилів, а grep знаходить будь-яке місце, де стан ще відсутній. Гаманець підписує; ваш код ніколи не торкається приватного ключа чи seed-фрази. Також запитайте повідомлення для відсутнього гаманця, неправильної мережі та відхиленої підпису, оскільки реальний користувач зіткнеться з ними рано чи пізно. Запустіть сторінку на тестовій мережі з тимчасовим акаунтом, навмисно відхиліть підпис та перевірте, чи з’являється стан помилки з чітким повідомленням.
Протестуйте, а потім задокументуйте проєкт
Запитайте агента написати тест фронтенду для кожного стану та короткий README, який пояснює, як запустити проєкт. write_file створює обидва файли, Shell запускає вашу команду тестування, а картка повідомляє реальний код виходу. Розробник dApp, який повернеться до проєкту через місяць, спочатку прочитає цей README, тому переконайтеся, що він називає лише команди, які ви дійсно використовуєте, та вказує, яку мережу очікує сторінка. Спочатку використовуйте режим Plan only, якщо хочете побачити список кроків до створення будь-якого файлу, а потім переключіться на Ask first, щоб виконати його. Прочитайте кожну diff-зміну, запустіть тести самостійно один раз на тестовій мережі з тимчасовими акаунтами та тримайте README поруч із ABI-файлом, щоб обидва залишалися в синхронізації.
