Aptos上でエンドツーエンドDappを構築

新しいフレームワークやプログラミング言語を学ぶ一般的な方法は、シンプルなtodoリストを構築することです。このチュートリアルでは、スマートコントラクト側からフロントエンド側まで、最終的にその2つと相互作用するウォレットの使用まで、エンドツーエンドのtodoリストdappを構築する方法を学びます。

完成したコードはsource-codeで確認できます。

以下で説明する前提条件を満たし、セットアップを完了した後、このチュートリアルを以下の順序で進めます：

1. スマートコントラクトを作成
2. フロントエンドをセットアップ
3. チェーンからデータを取得
4. チェーンにデータを送信
5. タスクの処理

以下が必要です：

• node と npm

いくつかのReactの決定について説明しますが、Reactがどのように機能するかについて深く掘り下げることはしません。そのため、Reactについて一定の経験があることを前提とします。

このセクションでは、プロジェクトファイル（React ベースのクライアントサイドコードとMoveコード（スマートコントラクト）の両方）を保持するためにmy-first-dappディレクトリを作成します。

そのために、create-aptos-dappを使用してプロジェクトを作成します。

1. ターミナルを開き、プロジェクト用の希望するディレクトリ（例：Desktopディレクトリ）に移動します。
2. npx create-aptos-dapp@latestを実行してプロジェクトを作成します。

npx create-aptos-dapp@latest

3. 指示に従ってプロジェクトを作成します。

• プロジェクトの名前を選択します（例：my-first-dapp）。
• Full-stack projectオプションを選択します。
• Boilerplate Templateオプションを選択します。
• 簡素化のため、Surfを使用しないことを選択します。
• Vite appフレームワークオプションを選択します。
• Devnetネットワークオプションを選択します。

ツールはプロジェクトと同じ名前のディレクトリにプロジェクトを作成し、必要な依存関係をインストールします。

Next Stepsの指示に従ってください。

それではスマートコントラクトを作成しましょう。