Abre la carpeta
Elige la carpeta del proyecto como la carpeta de trabajo de un nuevo chat y selecciona Ask first, para que cada cambio que escriba un archivo espere tu decisión. Coloca el archivo ABI en esa carpeta antes de comenzar.
Flujos de trabajo
Crea un dApp desde una carpeta vacía hasta una pantalla probada
03
Comienza desde una carpeta de proyecto vacía
Para crear un dapp, comienza con una carpeta que contenga únicamente el archivo ABI de tu propio contrato. Abre esa carpeta como la carpeta de trabajo de un nuevo chat, elige Ask first y describe la página que deseas: un botón para conectar la billetera, un saldo y una línea de estado de transacción. El agente mapea la carpeta, propone los archivos como diffs y crea la página solo después de que aceptes cada cambio. Decide antes de comenzar dónde se ejecutará el proyecto. Una cadena local en tu propia PC es adecuada para un primer intento, porque las monedas en ella no tienen valor, y una red de pruebas pública es el siguiente paso una vez que la página funcione. Usa cuentas desechables en cualquiera de los casos, nunca una cuenta que contenga fondos reales, y mantén cada clave privada y frase semilla fuera de la carpeta, el chat y el repositorio. El resultado es una página pequeña, probada y un README que otra persona podría seguir.
Describe la pantalla
Escribe qué datos muestra la página y qué estados de transacción debe manejar, en oraciones simples. Nombra la función del contrato que llama y la red a la que se conecta, por ejemplo, tu cadena local.
Revisa cada diff
Lee cada cambio de archivo propuesto en el chat, luego acéptalo o recházalo con una nota breve. Expande una tarjeta cuando quieras ver el diff completo y rechaza cualquier cosa que no puedas explicar en una oración.
Ejecuta y verifica
Deja que Shell ejecute tu comando de compilación y tu comando de prueba, y lee el código de salida en cada tarjeta. Abre la página contra la cadena local y compara lo que muestra con lo que esperas. Corrige lo que falle antes de agregar la siguiente función.
Un pequeño archivo ABI para comenzar
Lee balanceOf del ABI y muestra el resultado en la página.
- read_file
balance-abi.jsoncargado - write_file
app.jsguardado - edit_file
index.html+4 líneas - Shell
your build commandexit 0
esperando tu aprobación antes del siguiente pasoRechazarAceptar
balance-abi.json
[
{
"type": "function",
"name": "balanceOf",
"stateMutability": "view",
"inputs": [{ "type": "address", "name": "account" }],
"outputs": [{ "type": "uint256" }]
}
]Este fragmento JSON describe una función solo de lectura, balanceOf, la función de lectura de saldo que utilizan los tokens ERC-20. Toma una dirección llamada account y devuelve un uint256. Un front-end utiliza un ABI como este para llamar al contrato, y el archivo no contiene claves ni secretos. Guárdalo como balance-abi.json en la carpeta del proyecto y reemplázalo con el ABI completo de tu propio contrato una vez que la página funcione, ya que un contrato real suele tener muchas más funciones.
Guías paso a paso para un primer dApp
Mapea la carpeta y lee el ABI
Una buena forma de comenzar a aprender web3 es leer un pequeño archivo ABI antes de escribir cualquier cosa. Pide al agente que abra balance-abi.json. read_file muestra el archivo, list_dir muestra qué más hay en la carpeta y grep confirma el nombre exacto de la función. El agente luego explica en el chat que balanceOf es una función view: lee datos y no envía transacción, por lo que llamarla no cambia nada en la cadena. Nada se escribe aún. También enumera lo que la página necesitará, a saber, una conexión a un nodo, la dirección del contrato implementado y una cuenta para buscar. Verifica cada afirmación contra el JSON en la tarjeta, porque un modelo puede malinterpretar un tipo o nombrar una función que el archivo no contiene, y pide una corrección antes de continuar.
Conecta la página a una cadena local
Pide una página que lea el saldo de una cuenta de prueba desechable. write_file crea app.js con una llamada a tu cadena local mediante JSON-RPC, y edit_file añade una línea de script a index.html. Solo necesitas herramientas de cadena cruzada para un dapp cuando se comunica con varias cadenas; un primer proyecto en una sola cadena local no las necesita, así que déjalas fuera. En modo Ask first, ambos cambios esperan como diffs. Léelos y acéptalos. Shell luego ejecuta tu comando de compilación, y la tarjeta muestra el código de salida real. Abre la página, compara el número que muestra con el número que tu cadena local reporta para la misma cuenta, y pide al agente que corrija la página si difieren. Mantén la dirección de la cadena en un solo lugar, para que cambiar la red más tarde signifique editar una sola línea.
Maneja los estados de transacción
La transición de web2 a web3 como desarrollador significa principalmente agregar una billetera, una red y un estado de transacción a las pantallas que ya sabes construir. Pide al agente que agregue una línea de estado con 5 estados: no enviado, esperando la billetera, pendiente, confirmado y fallido. edit_file cambia el script y la hoja de estilo, y grep encuentra cualquier lugar donde falte un estado. La billetera firma; tu código nunca toca una clave privada ni una frase semilla. También pide mensajes para una billetera faltante, la red incorrecta y una firma rechazada, porque un usuario real los encontrará tarde o temprano. Ejecuta la página en una red de pruebas con una cuenta desechable, rechaza una firma a propósito y verifica que aparezca el estado fallido con un mensaje claro.
Prueba, luego documenta el proyecto
Pide al agente que escriba una prueba de front-end para cada estado y un README corto que explique cómo ejecutar el proyecto. write_file crea ambos archivos, Shell ejecuta tu comando de prueba y la tarjeta reporta el código de salida real. Un desarrollador de dapps que regrese al proyecto un mes después leerá ese README primero, así que verifica que solo nombre comandos que realmente uses y que indique qué red espera la página. Usa Plan only primero si quieres ver la lista de pasos antes de que se cree cualquier archivo, luego cambia a Ask first para llevarlo a cabo. Lee cada diff, ejecuta las pruebas tú mismo una vez en una red de pruebas con cuentas desechables, y mantén el README junto al archivo ABI para que ambos permanezcan sincronizados.
