Open de map
Kies de projectmap als de werkmap van een nieuwe chat en selecteer Ask first, zodat elke wijziging die een bestand schrijft wacht op jouw beslissing. Zet het ABI-bestand in die map voordat je begint.
Workflows
Maak een dApp van een lege map tot een getest scherm
03
Begin met een lege projectmap
Om een dapp te maken, begin je met een map die alleen het ABI-bestand van je eigen contract bevat. Open die map als de werkmap van een nieuwe chat, kies Ask first en beschrijf de pagina die je wilt: een knop om een wallet te verbinden, een saldiweergave en een regel voor de transactiestatus. De agent scant de map, stelt bestanden voor als diffs en maakt de pagina pas aan nadat je elke wijziging accepteert. Beslis vooraf waar het project moet draaien. Een lokale chain op je eigen pc is goed voor een eerste poging, omdat de coins daar geen waarde hebben, en een publiek testnet is de volgende stap zodra de pagina werkt. Gebruik wegwerpacounts op beide netwerken, nooit een account met echte middelen, en houd elke private key en seed phrase buiten de map, de chat en de repository. Het resultaat is een kleine, geteste pagina en een README die een ander kan volgen.
Beschrijf het scherm
Schrijf welke gegevens de pagina moet tonen en welke transactiestatussen het moet afhandelen, in gewone zinnen. Noem de contractfunctie die het aanroept en het netwerk waarmee het communiceert, bijvoorbeeld je lokale chain.
Beoordeel elke diff
Lees elke voorgestelde bestandwijziging in de chat, accepteer of wijs deze dan af met een korte noot. Vouw een kaart uit als je de volledige diff wilt zien, en wijs alles af wat je niet in één zin kunt uitleggen.
Uitvoeren en controleren
Laat Shell je build-commando en je testcommando uitvoeren en lees de exitcode op elke kaart. Open de pagina tegen de lokale chain en vergelijk wat het toont met wat je verwacht. Los fouten op voordat je de volgende functie toevoegt.
Een klein ABI-bestand om mee te beginnen
Lees balanceOf uit het ABI en toon het resultaat op de pagina.
- read_file
balance-abi.jsongeladen - write_file
app.jsopgeslagen - edit_file
index.html+4 regels - Shell
your build commandexit 0
wacht op jouw goedkeuring voordat de volgende stap wordt uitgevoerdAfwijzenAccepteren
balance-abi.json
[
{
"type": "function",
"name": "balanceOf",
"stateMutability": "view",
"inputs": [{ "type": "address", "name": "account" }],
"outputs": [{ "type": "uint256" }]
}
]Dit JSON-fragment beschrijft één alleen-lezen functie, balanceOf, de saldi-leesfunctie die ERC-20 tokens gebruiken. Het neemt een adres genaamd account aan en retourneert een uint256. Een front-end gebruikt een ABI als deze om het contract aan te roepen, en het bestand bevat geen sleutel of geheim. Sla het op als balance-abi.json in de projectmap en vervang het door de volledige ABI van je eigen contract zodra de pagina werkt, omdat een echt contract meestal veel meer functies heeft.
Uitleg voor een eerste dApp
Scan de map en lees het ABI
Een goede manier om web3 te leren is om eerst één klein ABI-bestand te lezen voordat je iets schrijft. Vraag de agent om balance-abi.json te openen. read_file toont het bestand, list_dir toont wat er nog meer in de map staat en grep bevestigt de exacte naam van de functie. De agent legt vervolgens in de chat uit dat balanceOf een view-functie is: het leest gegevens en stuurt geen transactie, dus het aanroepen ervan verandert niets op de chain. Er wordt nog niets geschreven. Het somt ook op wat de pagina nodig heeft, namelijk een verbinding met een node, het adres van het gedeployede contract en een account om naar op te zoeken. Controleer elke stelling tegen de JSON op de kaart, omdat een model een type kan verkeerd lezen of een functie kan noemen die niet in het bestand staat, en vraag om correctie voordat je verder gaat.
Verbind de pagina met een lokale chain
Vraag om een pagina die het saldo van een wegwerptestaccount leest. write_file maakt app.js met een aanroep naar je lokale chain via JSON-RPC, en edit_file voegt een scriptregel toe aan index.html. Je hebt cross chain-tools voor een dapp alleen nodig wanneer het met meerdere chains communiceert; een eerste project op één lokale chain heeft er geen nodig, dus laat ze weg. In Ask first-wachtmodus wachten beide wijzigingen als diffs. Lees ze en accepteer ze. Shell voert vervolgens je build-commando uit, en de kaart toont de echte exitcode. Open de pagina, vergelijk het nummer dat het toont met het nummer dat je lokale chain rapporteert voor hetzelfde account, en vraag de agent de pagina te corrigeren als ze verschillen. Houd het chain-adres op één plek, zodat het wijzigen van het netwerk later betekent dat je slechts één regel bewerkt.
Afhandelen van transactiestatussen
Van web2 naar web3 gaan als ontwikkelaar betekent vooral een wallet, een netwerk en een transactiestatus toevoegen aan schermen die je al kent. Vraag de agent om een statusregel toe te voegen met 5 statussen: niet verzonden, wachten op de wallet, pending, bevestigd en mislukt. edit_file wijzigt het script en de style sheet, en grep vindt elke plek waar een status nog ontbreekt. De wallet tekent; je code raakt nooit een private key of een seed phrase. Vraag ook om berichten voor een ontbrekende wallet, het verkeerde netwerk en een afgewezen handtekening, omdat een echte gebruiker ze vroeg of laat tegenkomt. Voer de pagina uit op een testnet met een wegwerpacount, wijs een handtekening opzettelijk af en controleer of de mislukte status verschijnt met een duidelijke boodschap.
Testen, dan het project documenteren
Vraag de agent om een front-end test te schrijven voor elke status en een korte README die uitlegt hoe je het project moet uitvoeren. write_file maakt beide bestanden, Shell voert je testcommando uit en de kaart rapporteert de echte exitcode. Een dapp-ontwikkelaar die een maand later naar het project terugkeert, leest eerst die README, dus controleer of het alleen commando's noemt die je daadwerkelijk gebruikt en of het aangeeft welk netwerk de pagina verwacht. Gebruik eerst Plan only-modus als je de lijst met stappen wilt zien voordat er een bestand wordt aangemaakt, schakel dan over naar Ask first om het uit te voeren. Lees elke diff, voer de tests een keer zelf uit op een testnet met wegwerpacounts, en houd de README naast het ABI-bestand zodat beide gesynchroniseerd blijven.
