Откройте папку
Выберите папку проекта как рабочую для нового чата и выберите Ask first, чтобы каждое изменение, записывающее файл, ждало вашего решения. Поместите ABI-файл в эту папку перед началом работы.
Рабочие процессы
Создаем dApp: от пустой папки до готового интерфейса
03
Начните с пустой папки проекта
Чтобы создать dApp, начните с папки, в которой лежит только ABI-файл вашего контракта. Откройте эту папку как рабочую для нового чата, выберите Ask first и опишите страницу, которую хотите получить: кнопку подключения кошелька, отображение баланса и строку статуса транзакции. Агент просканирует папку, предложит изменения в виде диффов и создаст страницу только после вашего подтверждения каждого изменения. Решите заранее, где будет работать проект. Локальная сеть на вашем ПК отлично подходит для первого эксперимента, так как монеты в ней ничего не стоят, а публичная тестовая сеть станет следующим шагом, когда страница заработает. Используйте одноразовые аккаунты в обоих случаях, никогда не используйте аккаунт с реальными средствами и храните все приватные ключи и сид-фразы вне папки, чата и репозитория. В результате вы получите небольшую протестированную страницу и README, по которому другой человек сможет повторить процесс.
Опишите экран
Напишите простыми предложениями, какие данные должна показывать страница и какие состояния транзакций она должна обрабатывать. Укажите имя функции контракта, которую она вызывает, и сеть, с которой она взаимодействует, например, вашу локальную сеть.
Проверьте каждый дифф
Прочитайте каждое предложенное изменение файла в чате, затем примите его или отклоните с кратким комментарием. Раскройте карточку, если хотите увидеть полный дифф, и отклоните всё, что вы не можете объяснить в одном предложении.
Запустите и проверьте
Позвольте Shell выполнить вашу команду сборки и команду тестирования, и прочитайте код выхода на каждой карточке. Откройте страницу против локальной сети и сравните то, что она показывает, с тем, что вы ожидаете. Исправьте то, что не работает, прежде чем добавлять следующую функцию.
Небольшой ABI-файл для начала работы
Прочитайте balanceOf из ABI и покажите результат на странице.
- read_file
balance-abi.jsonloaded - write_file
app.jssaved - edit_file
index.html+4 lines - 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 оба изменения ждут в виде диффов. Прочитайте их и примите их. Затем Shell запустит вашу команду сборки, и карточка покажет реальный код выхода. Откройте страницу, сравните число, которое она показывает, с числом, которое ваша локальная сеть сообщает для того же аккаунта, и попросите агента исправить страницу, если они различаются. Храните адрес сети в одном месте, чтобы при смене сети позже нужно было редактировать только одну строку.
Обработка состояний транзакций
Переход от web2 к web3 для разработчика в основном означает добавление кошелька, сети и состояния транзакции на экраны, которые вы уже умеете строить. Попросите агента добавить строку статуса с 5 состояниями: не отправлено, ожидание кошелька, в обработке, подтверждено и ошибка. edit_file изменит скрипт и таблицу стилей, а grep найдет любое место, где состояние все еще отсутствует. Кошелек подписывает; ваш код никогда не касается приватного ключа или сид-фразы. Также запросите сообщения для отсутствующего кошелька, неправильной сети и отклоненной подписи, так как настоящий пользователь рано или поздно с ними столкнется. Запустите страницу в тестовой сети с одноразовым аккаунтом, намеренно отклоните подпись и проверьте, что состояние ошибки появляется с четким сообщением.
Тестирование, затем документирование проекта
Попросите агента написать фронтенд-тест для каждого состояния и краткий README, объясняющий, как запустить проект. write_file создаст оба файла, Shell запустит вашу команду тестирования, и карточка сообщит реальный код выхода. Разработчик dApp, который вернется к проекту через месяц, сначала прочитает этот README, поэтому убедитесь, что в нем указаны только те команды, которые вы действительно используете, и указано, какую сеть ожидает страница. Сначала используйте режим Plan only, если хотите увидеть список шагов до создания любого файла, затем переключитесь на Ask first, чтобы выполнить их. Прочитайте каждый дифф, запустите тесты самостоятельно один раз в тестовой сети с одноразовыми аккаунтами и держите README рядом с файлом ABI, чтобы они оставались синхронизированными.
