1,311 測定値

Next.js、TypeScript、Solidity を使用して分散型慈善プラットフォームを構築する方法

に Darlington Gospel 8m2024/01/16

長すぎる; 読むには

この包括的なガイドへようこそ。Next.js、Solidity、TypeScript を使用して Web3 分散型慈善プラットフォームを構築します。このチュートリアルを終えると、次のことを明確に理解できるようになります。

featured image - Next.js、TypeScript、Solidity を使用して分散型慈善プラットフォームを構築する方法

これから構築するものについては、Bitfinity テストネットワークとgit リポジトリのライブデモをご覧ください。

導入

Next.js を使用した動的インターフェイスの構築
Solidity を使用して Ethereum スマートコントラクトを作成する
TypeScript を使用した静的型チェックの組み込み
スマートコントラクトの展開と操作
ブロックチェーンベースの慈善プラットフォームの基礎を理解する

このチュートリアルに参加すると、特典として、需要の高いSolidity開発者になるための権威ある書籍を簡単に獲得できます。このオファーは先着300 名に無料で提供されます。当選方法については、以下の短いビデオをご覧ください。

前提条件

私と一緒に構築するには、次のツールをインストールする必要があります。

Node.js
糸
Git Bash
メタマスク
Next.js
堅牢性
Redux ツールキット
追い風CSS

このチュートリアルで MetaMask を設定するには、以下の説明ビデオをご覧ください。

セットアップが完了すると、書籍を無料で受け取ることができます。書籍を請求するには、フォームに記入して作業証明を送信してください。

次の説明ビデオを視聴すると、最大 3 か月間無料のプレミアムコースを利用できます。

Dapp メンターアカデミーには次のものが含まれます。

今すぐ Bitfinity の旅を始めましょう。初めての慈善寄付追跡 dApp を構築するときに、高速、シンプル、手間のかからない開発プロセスを体験してください。スマートコントラクトを Bitfinity ネットワークに展開し、プラスの影響を与えます。

そうは言っても、チュートリアルに進んでプロジェクトをセットアップしましょう。

設定

まず、準備されたフロントエンドリポジトリのクローンを作成し、環境変数を設定します。次のコマンドを実行します。

 git clone https://github.com/Daltonic/dappFundsX cd dappFundsX yarn install git checkout no_redux_no_blockchain

次に、プロジェクトのルートに.envファイルを作成し、次のキーを含めます。

 NEXT_PUBLIC_RPC_URL=http://127.0.0.1:8545 NEXT_PUBLIC_ALCHEMY_ID=<YOUR_ALCHEMY_PROJECT_ID> NEXT_PUBLIC_PROJECT_ID=<WALLET_CONNECT_PROJECT_ID> NEXTAUTH_URL=http://localhost:3000 NEXTAUTH_SECRET=somereallysecretsecret

<YOUR_ALCHEMY_PROJECT_ID>と<WALLET_CONNECT_PROJECT_ID>をそれぞれのプロジェクト ID に置き換えます。

YOUR_ALCHEMY_PROJECT_ID :ここでキーを取得WALLET_CONNECT_PROJECT_ID :ここでキーを取得

最後に、 yarn devを実行してプロジェクトを開始します。

このプロジェクトのフロントエンドは堅牢で、スマートコントラクトを統合する準備ができていますが、共有データスペースを有効にするためにアプリケーションを Reduxify する必要があります。

Redux ストアの構築

上の画像は Redux ストアの構造を表しています。過度に複雑なプロジェクトを作成していないため、単純なものになります。

アプリケーションのグローバル状態を管理するために Redux をセットアップします。次の手順を実行します：

プロジェクトのルートにstoreフォルダーを作成します。
store内に、 actionsとstatesの 2 つのフォルダーを作成します。
states内に、 globalStates.tsファイルを作成します。

actions内に、 globalActions.tsファイルを作成します。

storeフォルダー内にglobalSlices.tsファイルを作成します。

storeフォルダー内にindex.tsファイルを作成します。

Redux プロバイダーを使用して、 pages/_app.tsファイルを更新します。

私たちのアプリケーションは Redux ツールキットでラップされているので、バックエンドをフロントエンドと統合するときに Redux を再検討します。

スマートコントラクトの開発

次に、プラットフォームのスマートコントラクトを開発します。

プロジェクトのルートにcontractsフォルダーを作成します。
contracts内にDappFund.solファイルを作成し、以下のコントラクトコードを追加します。

DappFund契約により、慈善団体への作成、更新、寄付だけでなく、慈善税の変更や慈善団体の禁止などの管理機能も容易になります。

機能ごとの内訳は次のとおりです。

constructor() : この関数は、契約がデプロイされるときに初期慈善税を設定します。これは、コントラクトの展開中に 1 回だけ実行されます。
createCharity() : この関数を使用すると、ユーザーは新しい慈善団体を作成できます。名前、説明、画像、プロフィール、慈善活動の金額など、いくつかのパラメータが必要です。これらのパラメーターが有効であることを確認し、新しいCharityStructを作成してcharitiesマッピングに追加します。
updateCharity() : この関数を使用すると、慈善団体の所有者はその詳細を更新できます。慈善団体の詳細を更新する前に、慈善団体が存在すること、および送信者が慈善団体の所有者であることを確認します。
deleteCharity() : この関数を使用すると、慈善団体の所有者は慈善団体を削除済みとしてマークできます。慈善団体が存在すること、および送信者が慈善団体の所有者であることを確認してから、削除済みとしてマークします。
toggleBan() : この関数を使用すると、契約所有者は慈善団体を禁止または禁止解除できます。禁止ステータスを切り替える前に、慈善団体が存在するかどうかを確認します。
donate() : この関数を使用すると、ユーザーは慈善団体に寄付できます。慈善団体が存在すること、禁止されていないこと、そして募金目標にまだ達していないことを確認します。次に、合計寄付数を増分し、新しいSupportStruct作成して、 supportersOfマッピングに追加します。また、慈善団体の募金金額と寄付数も更新されます。
changeTax() : この関数を使用すると、契約所有者は慈善税を変更できます。税金を更新する前に、新しい税率が有効であるかどうかをチェックします。
getCharity() : この関数を使用すると、誰でも慈善団体の詳細を取得できます。指定された ID に関連付けられたCharityStructを返します。
getCharities() : この関数を使用すると、誰でもすべてのアクティブな慈善団体の詳細を取得できます。 CharityStructオブジェクトの配列を返します。
getMyCharities() : この関数を使用すると、ユーザーはすべてのアクティブな慈善団体の詳細を取得できます。 CharityStructオブジェクトの配列を返します。
getSupports() : この関数を使用すると、誰でも特定の慈善団体のすべてのサポーターの詳細を取得できます。 SupportStructオブジェクトの配列を返します。
payTo() : この内部関数は資金の送金に使用されます。指定されたアドレスに指定された量のイーサを送信します。
currentTime() : この内部関数は、Unix エポックからの現在時刻を秒単位で返します。寄付や慈善事業の活動にタイムスタンプを付けるために使用されます。

契約のデプロイメントとシード

次に、スマートコントラクトをデプロイし、ダミーデータを入力しましょう。

プロジェクトのルートにscriptsフォルダーを作成します。
scripts内に、 deploy.jsファイルとseed.jsファイルを作成し、次のコードを追加します。

デプロイスクリプト

シードスクリプト

次のコマンドを実行してコントラクトをデプロイし、データをシードします。

 yarn hardhat node # Run in terminal 1 yarn hardhat run scripts/deploy.js # Run in terminal 2 yarn hardhat run scripts/seed.js # Run in terminal 2

これが正しく行われた場合は、次のような出力が表示されるはずです。

この時点で、スマートコントラクトのフロントエンドへの統合を開始できます。

フロントエンドの統合

まず、プロジェクトのルートにservicesフォルダーを作成し、その中にblockchain.tsxファイルを作成します。このファイルには、スマートコントラクトと対話するための関数が含まれます。

提供されたコードは、スマートコントラクトと対話するためのブロックチェーンサービスの TypeScript 実装です。このサービスにより、ユーザーは慈善団体の作成や更新、寄付などを含むアクションを当社の慈善プラットフォーム上で実行できるようになります。

機能ごとの内訳は次のとおりです。

getEthereumContracts() : この関数は、サービスが対話する Ethereum コントラクトインスタンスを取得します。ユーザーが接続された Ethereum アカウントを持っているかどうかを確認し、それを使用してコントラクトを操作します。そうでない場合は、ランダムに作成されたウォレットが使用されます。
getAdmin() : この関数はコントラクトの所有者を返します。
getCharities() 、 getMyCharities() 、 getCharity() : これらの関数は、すべての慈善団体、現在のユーザーによって作成された慈善団体、および ID に基づいて特定の慈善団体をそれぞれ取得します。
getSupporters() : この関数は、ID によって特定の慈善団体のサポーターを取得します。
createCharity() 、 updateCharity() : これらの関数を使用すると、ユーザーはそれぞれ新しい慈善団体を作成したり、既存の慈善団体を更新したりできます。
makeDonation() : この関数を使用すると、ユーザーは特定の慈善団体に寄付を行うことができます。
deleteCharity() : この関数を使用すると、慈善団体の所有者は慈善団体を削除できます。
banCharity() : この関数を使用すると、契約所有者は慈善活動を禁止できます。
structuredCharities() 、 structuredSupporters() : これらは、コントラクトから返されたデータをより使いやすい形式に構造化するヘルパー関数です。

次のコードを使用して、 services内のprovider.tsxファイルを更新して、 bitfinityネットワークを含めます。

スマートコントラクトと対話するページ

次に、ブロックチェーンサービスの関数をフロントエンドのそれぞれのインターフェイスにリンクします。

いいえ 1: すべての Charities を表示するpages/index.tsxを更新して、 getCharities()関数からデータを取得します。

ブロックチェーンデータを画面に表示する前に、Redux を使用して保存する方法に注目してください。

いいえ 2: ユーザーの慈善団体を表示するuseEffect()フックを使用して現在のユーザーの慈善団体を取得するように、 pages/projects.tsxを更新します。

現在のユーザーの慈善団体を取得するためのuseEffect()フックの使用と、複数のコンポーネントにわたってブロックチェーンからのデータを処理および表示するために Redux がどのように使用されているかに注意してください。これは、ページおよびコンポーネント全体で繰り返されるパターンになります。

いいえ 3: 新しい慈善活動を作成するフォーム送信にcreateCharity()関数を使用するように、 pages/donations/create.tsxを更新します。

いいえ 4: getServerSideProps() 、 getCharity()およびgetSupporters()関数を使用して ID で慈善団体とサポーターを取得する単一の Charity Update pages/donations/[id].tsxを表示します。

いいえ 5: 既存の慈善団体の編集getCharity()関数を使用して ID で慈善団体を取得し、フォームフィールドに値を入力できるようにpages/donations/edit/[id].tsxを更新します。

getCharity()関数を使用して ID によって慈善活動を取得する方法と、フォームフィールドに値を入力するためにどのように使用されるかを見ましたか?

スマートコントラクトを備えたコンポーネント

上記のページで行ったように、スマートコントラクトと対話するために次のコンポーネントを更新しましょう。

いいえ 1: 慈善活動禁止の処理handleBanning()関数を使用してbanCharity()関数を呼び出すように、 components/Ban.tsxを更新します。

いいえ 2: 慈善団体の削除の処理handleDelete()関数とdeleteCharity()関数を使用して慈善団体のリストから除外する手順を実行できるようにcomponents/Delete.tsxファイルを更新します。

いいえ 3: 慈善団体への寄付を行うhandleSubmit()関数を使用するようにcomponents/Donor.tsxファイルを更新し、 makeDonation()関数を使用してスマートコントラクトに支払いを送信します。

その他のコンポーネント

Redux が統合されているため、更新する必要がある残りのコンポーネントも以下に示します。

NavBtn コンポーネントユーザーが慈善活動情報を移動、削除、編集できるようにするコンポーネントを確認して更新します。 Redux を利用して、クリック時に削除モーダルをトリガーします。

支払いコンポーネントRedux の実装を確認して更新し、それぞれのボタンをクリックすると寄付、サポーター、禁止モーダルをトリガーします。

Supports コンポーネントRedux の実装を確認して更新し、閉じるボタンをクリックしたときにサポーターモーダルを閉じるようにします。

これらの更新を実装することで、すべてのコンポーネントとページがスマートコントラクトに接続され、プロジェクトが完了しました。

この間Nextjsサーバーがダウンしていた場合は、 yarn devを実行することで再び起動できます。

さらに詳しく学ぶには、 YouTube チャンネルでこのビルドの完全なビデオを視聴することをお勧めします。

結論

このチュートリアルでは、Next.js、Solidity、TypeScript を使用して分散型慈善プラットフォームを構築しました。開発環境をセットアップし、Redux ストアを構築し、スマートコントラクトをブロックチェーンにデプロイしました。スマートコントラクトをフロントエンドと統合することで、シームレスなユーザーエクスペリエンスを実現しました。

このチュートリアルを通じて、Web3 アプリケーションの構築、スマートコントラクトの作成、静的型チェックの組み込みに関する貴重なスキルを習得しました。

これで、独自の分散型慈善プラットフォームを作成する準備が整いました。楽しくコーディングして、Web3 の世界でイノベーションを解き放ちましょう!