これから構築するものについては、Bitfinity テスト ネットワークと の ご覧ください。 git リポジトリ ライブ デモを 導入 この包括的なガイドへようこそ。Next.js、Solidity、TypeScript を使用して Web3 分散型慈善プラットフォームを構築します。このチュートリアルを終えると、次のことを明確に理解できるようになります。 Next.js を使用した動的インターフェイスの構築 Solidity を使用して Ethereum スマート コントラクトを作成する TypeScript を使用した静的型チェックの組み込み スマート コントラクトの展開と操作 ブロックチェーンベースの慈善プラットフォームの基礎を理解する このチュートリアルに参加すると、特典として、需要の高い 開発者になるための権威ある書籍を簡単に獲得できます。このオファーは先着 に無料で提供されます。当選方法については、以下の短いビデオをご覧ください。 Solidity 300 名 前提条件 私と一緒に構築するには、次のツールをインストールする必要があります。 Node.js 糸 Git Bash メタマスク Next.js 堅牢性 Redux ツールキット 追い風CSS このチュートリアルで MetaMask を設定するには、以下の説明ビデオをご覧ください。 https://www.youtube.com/watch?v=qV1mbFOtkxo&embedable=true セットアップが完了すると、書籍を無料で受け取ることができます。書籍を請求するには、 。 フォームに記入して作業証明を送信してください 次の を視聴すると、最大 3 か月間無料のプレミアム コースを利用できます。 説明ビデオ Dapp メンター アカデミーには次のものが含まれます。 フルスタックNFTミントコース フルスタックNFTマーケットプレイスコース フルスタックブロックチェーンコース 等 今すぐ 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 と をそれぞれのプロジェクト ID に置き換えます。 <YOUR_ALCHEMY_PROJECT_ID> <WALLET_CONNECT_PROJECT_ID> : : YOUR_ALCHEMY_PROJECT_ID ここでキーを取得 WALLET_CONNECT_PROJECT_ID ここでキーを取得 最後に、 を実行してプロジェクトを開始します。 yarn dev このプロジェクトのフロントエンドは堅牢で、スマート コントラクトを統合する準備ができていますが、共有データ スペースを有効にするためにアプリケーションを Reduxify する必要があります。 Redux ストアの構築 上の画像は Redux ストアの構造を表しています。過度に複雑なプロジェクトを作成していないため、単純なものになります。 アプリケーションのグローバル状態を管理するために Redux をセットアップします。次の手順を実行します： プロジェクトのルートに フォルダーを作成します。 store 内に、 と の 2 つのフォルダーを作成します。 store actions states 内に、 ファイルを作成します。 states globalStates.ts https://gist.github.com/Daltonic/157a49fef39e3a1ac8b9a8883c6213f8?embedable=true 内に、 ファイルを作成します。 actions globalActions.ts https://gist.github.com/Daltonic/c2217eff616b28a2261888ba77c236e7?embedable=true フォルダー内に ファイルを作成します。 store globalSlices.ts https://gist.github.com/Daltonic/69a29357cf1b9484425776a6ad4b26dd?embedable=true フォルダー内に ファイルを作成します。 store index.ts https://gist.github.com/Daltonic/7b3a9db8902d8ce831384ad42ca7231b?embedable=true Redux プロバイダーを使用して、 ファイルを更新します。 pages/_app.ts https://gist.github.com/Daltonic/ef67f453bc38c4038edc627644d25e2a?embedable=true 私たちのアプリケーションは Redux ツールキットでラップされているので、バックエンドをフロントエンドと統合するときに Redux を再検討します。 スマートコントラクトの開発 次に、プラットフォームのスマート コントラクトを開発します。 プロジェクトのルートに フォルダーを作成します。 contracts 内に ファイルを作成し、以下のコントラクト コードを追加します。 contracts DappFund.sol https://gist.github.com/Daltonic/4e3f367d2b3a2227c951e74f4d58cbe8?embedable=true 契約により、慈善団体への作成、更新、寄付だけでなく、慈善税の変更や慈善団体の禁止などの管理機能も容易になります。 DappFund 機能ごとの内訳は次のとおりです。 : この関数は、契約がデプロイされるときに初期慈善税を設定します。これは、コントラクトの展開中に 1 回だけ実行されます。 constructor() : この関数を使用すると、ユーザーは新しい慈善団体を作成できます。名前、説明、画像、プロフィール、慈善活動の金額など、いくつかのパラメータが必要です。これらのパラメーターが有効であることを確認し、新しい を作成して マッピングに追加します。 createCharity() CharityStruct charities : この関数を使用すると、慈善団体の所有者はその詳細を更新できます。慈善団体の詳細を更新する前に、慈善団体が存在すること、および送信者が慈善団体の所有者であることを確認します。 updateCharity() : この関数を使用すると、慈善団体の所有者は慈善団体を削除済みとしてマークできます。慈善団体が存在すること、および送信者が慈善団体の所有者であることを確認してから、削除済みとしてマークします。 deleteCharity() : この関数を使用すると、契約所有者は慈善団体を禁止または禁止解除できます。禁止ステータスを切り替える前に、慈善団体が存在するかどうかを確認します。 toggleBan() : この関数を使用すると、ユーザーは慈善団体に寄付できます。慈善団体が存在すること、禁止されていないこと、そして募金目標にまだ達していないことを確認します。次に、合計寄付数を増分し、新しい 作成して、 マッピングに追加します。また、慈善団体の募金金額と寄付数も更新されます。 donate() SupportStruct supportersOf : この関数を使用すると、契約所有者は慈善税を変更できます。税金を更新する前に、新しい税率が有効であるかどうかをチェックします。 changeTax() : この関数を使用すると、誰でも慈善団体の詳細を取得できます。指定された ID に関連付けられた を返します。 getCharity() CharityStruct : この関数を使用すると、誰でもすべてのアクティブな慈善団体の詳細を取得できます。 オブジェクトの配列を返します。 getCharities() CharityStruct : この関数を使用すると、ユーザーはすべてのアクティブな慈善団体の詳細を取得できます。 オブジェクトの配列を返します。 getMyCharities() CharityStruct : この関数を使用すると、誰でも特定の慈善団体のすべてのサポーターの詳細を取得できます。 オブジェクトの配列を返します。 getSupports() SupportStruct : この内部関数は資金の送金に使用されます。指定されたアドレスに指定された量のイーサを送信します。 payTo() : この内部関数は、Unix エポックからの現在時刻を秒単位で返します。寄付や慈善事業の活動にタイムスタンプを付けるために使用されます。 currentTime() 契約のデプロイメントとシード 次に、スマート コントラクトをデプロイし、ダミー データを入力しましょう。 プロジェクトのルートに フォルダーを作成します。 scripts 内に、 ファイルと ファイルを作成し、次のコードを追加します。 scripts deploy.js seed.js デプロイスクリプト https://gist.github.com/Daltonic/e4038d184c36bf69ac9b6b75da321ca1?embedable=true シードスクリプト https://gist.github.com/Daltonic/65ca0f2dfdf0ec91bfcf78f49654b36e?embedable=true 次のコマンドを実行してコントラクトをデプロイし、データをシードします。 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 これが正しく行われた場合は、次のような出力が表示されるはずです。 この時点で、スマート コントラクトのフロントエンドへの統合を開始できます。 https://www.youtube.com/watch?v=mVxRzkvX_w0&embedable=true フロントエンドの統合 まず、プロジェクトのルートに フォルダーを作成し、その中に ファイルを作成します。このファイルには、スマート コントラクトと対話するための関数が含まれます。 services blockchain.tsx https://gist.github.com/Daltonic/449b493fe7492386f6221329f3ee918b?embedable=true 提供されたコードは、スマート コントラクトと対話するためのブロックチェーン サービスの TypeScript 実装です。このサービスにより、ユーザーは慈善団体の作成や更新、寄付などを含むアクションを当社の慈善プラットフォーム上で実行できるようになります。 機能ごとの内訳は次のとおりです。 : この関数は、サービスが対話する Ethereum コントラクト インスタンスを取得します。ユーザーが接続された Ethereum アカウントを持っているかどうかを確認し、それを使用してコントラクトを操作します。そうでない場合は、ランダムに作成されたウォレットが使用されます。 getEthereumContracts() : この関数はコントラクトの所有者を返します。 getAdmin() 、 、 : これらの関数は、すべての慈善団体、現在のユーザーによって作成された慈善団体、および ID に基づいて特定の慈善団体をそれぞれ取得します。 getCharities() getMyCharities() getCharity() : この関数は、ID によって特定の慈善団体のサポーターを取得します。 getSupporters() 、 : これらの関数を使用すると、ユーザーはそれぞれ新しい慈善団体を作成したり、既存の慈善団体を更新したりできます。 createCharity() updateCharity() : この関数を使用すると、ユーザーは特定の慈善団体に寄付を行うことができます。 makeDonation() : この関数を使用すると、慈善団体の所有者は慈善団体を削除できます。 deleteCharity() : この関数を使用すると、契約所有者は慈善活動を禁止できます。 banCharity() 、 : これらは、コントラクトから返されたデータをより使いやすい形式に構造化するヘルパー関数です。 structuredCharities() structuredSupporters() 次のコードを使用して、 内の ファイルを更新して、 ネットワークを含めます。 services provider.tsx bitfinity https://gist.github.com/Daltonic/88476a8b642f0d1f879644ce7521e735?embedable=true スマート コントラクトと対話するページ 次に、ブロックチェーン サービスの関数をフロントエンドのそれぞれのインターフェイスにリンクします。 を更新して、 関数からデータを取得します。 いいえ 1: すべての Charities を表示する pages/index.tsx getCharities() https://gist.github.com/Daltonic/c7b5205c0a352e715ea6d369c4c5a739?embedable=true ブロックチェーン データを画面に表示する前に、Redux を使用して保存する方法に注目してください。 フックを使用して現在のユーザーの慈善団体を取得するように、 を更新します。 いいえ 2: ユーザーの慈善団体を表示する useEffect() pages/projects.tsx https://gist.github.com/Daltonic/55de269f6d41727ad2ca283adfea241e?embedable=true 現在のユーザーの慈善団体を取得するための フックの使用と、複数のコンポーネントにわたってブロックチェーンからのデータを処理および表示するために Redux がどのように使用されているかに注意してください。これは、ページおよびコンポーネント全体で繰り返されるパターンになります。 useEffect() フォーム送信に 関数を使用するように、 を更新します。 いいえ 3: 新しい慈善活動を作成する createCharity() pages/donations/create.tsx https://gist.github.com/Daltonic/58f3f813b5ee8bad45815545734c7410?embedable=true 、 および 関数を使用して ID で慈善団体とサポーターを取得する単一の Charity Update を表示します。 いいえ 4: getServerSideProps() getCharity() getSupporters() pages/donations/[id].tsx https://gist.github.com/Daltonic/96c4908e8a5406ab4e85822bb16a4b6f?embedable=true 関数を使用して ID で慈善団体を取得し、フォーム フィールドに値を入力できるように を更新します。 いいえ 5: 既存の慈善団体の編集 getCharity() pages/donations/edit/[id].tsx https://gist.github.com/Daltonic/045ec20e60ba4aaac4d9ae62620bff51?embedable=true 関数を使用して ID によって慈善活動を取得する方法と、フォーム フィールドに値を入力するためにどのように使用されるかを見ましたか? getCharity() スマートコントラクトを備えたコンポーネント 上記のページで行ったように、スマート コントラクトと対話するために次のコンポーネントを更新しましょう。 関数を使用して 関数を呼び出すように、 を更新します。 いいえ 1: 慈善活動禁止の処理 handleBanning() banCharity() components/Ban.tsx https://gist.github.com/Daltonic/3890759a4c5a9d83b292c1e8cbb31d91?embedable=true 関数と 関数を使用して慈善団体のリストから除外する手順を実行できるように ファイルを更新します。 いいえ 2: 慈善団体の削除の処理 handleDelete() deleteCharity() components/Delete.tsx https://gist.github.com/Daltonic/a9dd133448062c32990435e9a762d17d?embedable=true 関数を使用するように ファイルを更新し、 関数を使用してスマート コントラクトに支払いを送信します。 いいえ 3: 慈善団体への寄付を行う handleSubmit() components/Donor.tsx makeDonation() https://gist.github.com/Daltonic/9e82883fd17884330d2a82d5cf641eae?embedable=true その他のコンポーネント Redux が統合されているため、更新する必要がある残りのコンポーネントも以下に示します。 ユーザーが慈善活動情報を移動、削除、編集できるようにするコンポーネントを確認して更新します。 Redux を利用して、クリック時に削除モーダルをトリガーします。 NavBtn コンポーネント https://gist.github.com/Daltonic/38280dec93f6046187f4e438dbbb9007?embedable=true Redux の実装を確認して更新し、それぞれのボタンをクリックすると寄付、サポーター、禁止モーダルをトリガーします。 支払いコンポーネント https://gist.github.com/Daltonic/37f2724bec3380f9ff6dbf7771278541?embedable=true Redux の実装を確認して更新し、閉じるボタンをクリックしたときにサポーター モーダルを閉じるようにします。 Supports コンポーネント https://gist.github.com/Daltonic/59c6788386f9e0bc28b93094da25fa14?embedable=true これらの更新を実装することで、すべてのコンポーネントとページがスマート コントラクトに接続され、プロジェクトが完了しました。 この間 サーバーがダウンしていた場合は、 を実行することで再び起動できます。 Nextjs yarn dev さらに詳しく学ぶには、 でこのビルドの完全なビデオを視聴することをお勧めします。 YouTube チャンネル 結論 このチュートリアルでは、Next.js、Solidity、TypeScript を使用して分散型慈善プラットフォームを構築しました。開発環境をセットアップし、Redux ストアを構築し、スマート コントラクトをブロックチェーンにデプロイしました。スマート コントラクトをフロントエンドと統合することで、シームレスなユーザー エクスペリエンスを実現しました。 このチュートリアルを通じて、Web3 アプリケーションの構築、スマート コントラクトの作成、静的型チェックの組み込みに関する貴重なスキルを習得しました。 これで、独自の分散型慈善プラットフォームを作成する準備が整いました。楽しくコーディングして、Web3 の世界でイノベーションを解き放ちましょう!
