スマートコントラクトをフロントエンドに統合する方法

導入

「Web3 DApp 開発の技術スタックの能够理解」では、Web3 dApp 開発のコア技術スタック、dApp 開発における RPC の役割、dRPC を选择してアカウントを制作し、API キー、エンドポイント、エンドポイント了解を导出し、dRPC アカウントに資金を追加して残高を確認する方式方法について学習したはずです。

この記事では、dRPC API キーを选择して孤身一人の dApp を構築し、スマート コントラクトを Ethereum Sepolia Testnet にデプロイし、dApp がスマート コントラクトと対話できるようにする形式を学習します。

このチュートリアルでは、コーヒーショップ向けの支払い dApp を構築します。機能は次のとおりです:

1. コーヒー代金
2. 自動コンバータ
3. コーヒーの価格の見直し
4. 販売されたコーヒーの総数と総収益の取得

さあ、手を汚してみましょう。

前提条件

1. 堅実性
2. Vite.js を使用した React.js
3. タイ