空のフォルダからテスト済みの画面へ、dAppを作る

最初のdAppのためのウォークスルー

フォルダの構成を確認しABIを読む

web3を学ぶ良い方法は、何も書かない前に小さなABIファイルを読むことです。エージェントにbalance-abi.jsonを開くよう依頼してください。read_fileはファイルを表示し、list_dirはフォルダ内の他のファイルを示し、grepは関数の正確な名前を確認します。エージェントはチャット内で、balanceOfがview関数であることを説明します。これはデータを読み取り、トランザクションを送信しないため、呼び出してもチェーン上には何も変更されません。まだ何も書き込まれていません。また、ページに必要なもの、つまりノードへの接続、デプロイされたコントラクトのアドレス、および確認するアカウントのリストも表示します。モデルが型を読み間違えたり、ファイルに存在しない関数名を付けたりする可能性があるため、各ステートメントをカード上のJSONと照合してください。次に進む前に修正を求めてください。

ページをローカルチェーンに接続する

使い捨てのテストアカウントの残高を読み取るページを依頼してください。write_fileはJSON-RPC経由でローカルチェーンへの呼び出しを含むapp.jsを作成し、edit_fileはindex.htmlにスクリプト行を追加します。dAppが複数のチェーンと通信する場合のみクロスチェーンツールが必要です。1つのローカルチェーン上の最初のプロジェクトには不要なので、それらは省略してください。「Ask first」モードでは、両方の変更が差分として待機します。それらを読み、承認してください。Shellがビルドコマンドを実行し、カードには実際の終了コードが表示されます。ページを開き、表示される数値がローカルチェーンが同じアカウントに対して報告する数値と比較してください。2つが異なる場合は、エージェントにページの修正を依頼してください。チェーンアドレスは1か所に保持し、後でネットワークを変更する際に単一行の編集だけで済むようにしてください。

トランザクションの状態を処理する

開発者としてweb2からweb3への移行は、主に既知の画面にウォレット、ネットワーク、トランザクションの状態を追加することを意味します。エージェントに、5つのステータス（未送信、ウォレット待機中、保留中、確認済み、失敗）を持つステータスラインを追加するよう依頼してください。edit_fileはスクリプトとスタイルシートを変更し、grepはまだ欠落しているステータスがどこにあるかを探します。ウォレットが署名しますが、コードは秘密鍵やシードフレーズには触れません。また、ウォレットがない場合、ネットワークが間違っている場合、署名が拒否された場合のメッセージも依頼してください。実際のユーザーはこれら sooner or later に遭遇するでしょう。使い捨てアカウントでテストネットワーク上でページを実行し、意図的に署名を拒否し、失敗したステータスが明確なメッセージとともに表示されることを確認してください。

テストし、プロジェクトを文書化する

エージェントに各状態のフロントエンドテストと、プロジェクトの実行方法を説明する短いREADMEの作成を依頼してください。write_fileは両方のファイルを作成し、Shellはテストコマンドを実行し、カードには実際の終了コードが報告されます。1ヶ月後にプロジェクトに戻ったdApp開発者は、まずそのREADMEを読むでしょう。そのため、READMEには実際に使用するコマンドのみが記載されており、ページが期待するネットワークが明記されていることを確認してください。ファイルが作成される前にステップのリストを確認したい場合は、まず「Plan only」モードを使用し、その後「Ask first」に切り替えて実行してください。各差分を読み、使い捨てアカウントでテストネットワーク上でテストを1回実行し、READMEをABIファイルの隣に保持して、両者が同期した状態を保ってください。