中條 美冬

1646732400

ReactJSとMoralisを使用してクロスチェーンZapperdAppを構築する方法

MoralisAPIとサーバーレスリアルタイムトランザクションを使用してReactJSでクロスチェーンZapperdAppを構築する方法

この記事では、MoralisAPIとサーバーレスリアルタイムトランザクションを使用してReactJSでクロスチェーンZapperdAppを構築する方法について説明します°

間違いなくdAppについて多くのことを聞いたことがあるでしょうが、dAppをすばやく構築する方法がわからない場合があります。ITの世界の多くは、dAppを構成するものについて独自の定義を持っているようであり、深く掘り下げるほど、すべてが技術的になります。簡単に言うと、dAppは「分散型アプリケーション」の略で、Web3アプリです。これらのdAppは通常、市場に出すために多くの作業を必要とします。ただし、Moralisなどの堅牢なWeb3バックエンドインフラストラクチャプラットフォームを利用すると、dAppの開発時間を大幅に短縮できます。

このチュートリアルでは、MoralisのAPIとサーバーレスリアルタイムトランザクションを使用して、ReactJSでクロスチェーンZapperdAppを構築する方法について説明します。

これは、インターネットに接続している人なら誰でもウォレットに接続してポートフォリオを表示できるプラットフォームになります（NFT [s]、token [s]、ネイティブバランス、リアルタイムのサーバーレストランザクション履歴が含まれます）。

目次

  • dAppとは何ですか？
  • モラリスとは何ですか？
  • プロジェクトのセットアップとインストール
  • Moralisサーバーのセットアップ
  • クロスチェーンZapperdAppの構築
  • 結論

ライブデモとGitHubリポジトリへのリンクは次のとおりです👉ZapperdApp

前提条件

  • PCにNode.js / NPMがインストールされていることを確認してください。そうでない場合は、ここでクイックスタートガイドをご覧ください
  • React.jsの使用経験

dAppとは何ですか？

「dApps」という用語は、「分散型アプリケーション」を表します。これらは通常のアプリに匹敵し、同様の役割を果たしますが、ブロックチェーンなどのピアツーピアネットワーク上で実行されます。

つまり、分散型アプリケーション（dApps）は、ブロックチェーンと同様に、ピアツーピア（P2P）ネットワーク上で実行されます。dAppが仲介なしで機能を提供できるようにするスマートコントラクトは、dAppで一般的に使用されます。

モラリスとは何ですか？

Moralisは、Ethereum、Polygon、Binance Smart Chain（現在はBNB Smart Chain）などのブロックチェーンに接続する分散型ソフトウェアを構築するためのさまざまなツールとリソースをまとめたサービスです。

組み込みのクロスチェーン機能を含むMoralisの究極のWeb3開発プラットフォームにより、初心者および経験豊富な開発者は迅速かつ簡単に作業できます。さらに、Moralisは、フロントエンド開発に集中できるWeb3バックエンドインフラストラクチャを提供します。基本的に、dAppを動作させるために必要なすべての複雑な舞台裏のWeb3の処理を行います。 

Moralisは完全に制御され、無限にスケーラブルです。つまり、dAppは問題なく拡張できます。

プロジェクトのセットアップとインストール

プロジェクトのセットアップとインストールをすばやく開始するために、このプロジェクトをGitHubに複製し、「project-setup」ブランチにいることを確認します。次に、ターミナルで次のコマンドを使用してプロジェクトのクローンを作成した後、プロジェクトをローカルで起動します。

cdzapper-プロジェクト&&ヤーン&&ヤーンスタート

または

cd zapper-project && npm install && npm start

プロジェクトのクローンを作成してインストールすると、次のようなものになります。

次に、Moralisサーバーをセットアップします。

Moralisサーバーのセットアップ

次のセクションでZapperdAppを開発するために使用するので、Moralisサーバーのセットアップを開始しましょう。Moralis管理パネルでサーバーをセットアップします。まだアカウントをお持ちでない場合は、こちらから登録してください。サインアップは簡単で、完全に無料で始めることができます。

以下に示すように「新しいサーバーの作成」をクリックし、管理パネルでテストネットサーバーを選択します。

次に、以下に示すようにサーバーの詳細を入力します。

サーバーは数分で準備が整います。Moralis管理パネルで新しく作成したサーバーインスタンスからサーバーのURLとアプリケーションIDにアクセスする必要があります。  

以下に示すように、これらの詳細を使用して、アプリケーションからサーバーインスタンスに接続します。

次に、ZapperdAppを構築します。

クロスチェーンZapperdAppの構築

すべての設定が完了したので、実装を始めましょう。 

まず、「index.js」ファイルに移動し、以前に構築したサーバーインスタンスから取得したアプリケーションIDとサーバーURLを使用して、Moralisを使用するようにアプリケーションを構成します。

次のコマンドを使用して、プロジェクトのルートに「.env」ファイルを作成する必要があります。

touch .env

「.env」内に、以下の詳細を追加してください。

REACT_APP_MORALIS_APPLICATION_ID=our-application-id REACT_APP_MORALIS_SERVER_URL=our-server-url

道徳的初期化

「index.js」内で、ここのコードスニペットで更新します

上記のコードスニペットでは、すでにインストールされている「react-moralis」から「MoralisProvider」をインポートしました。「MoralisProvider」は初期化全体を処理し、コンポーネントがMoralis関数にアクセスできるようにします。

認証

「src / App.js」ファイル内で、ここのコードスニペットを使用して「react-moralis」SDKから「useMoralis」、「useMoralisWeb3ApiCall」、「useMoralisWeb3Api」をインポートします

ダッシュボードにリダイレクトする前に、ユーザーがログインしているかどうかを確認します。それ以外の場合は、 Moralisの組み込みメソッドを使用してウォレットをリンクできるページにリダイレクトします。

上記のスニペットでは、「useMoralis」APIの「isAuthenticated」メソッドを使用して、ユーザーがログインしているかどうかを検証しています。そうでない場合は、ウォレットを接続してログインできるボタンのあるビューを返します。

ブラウザに以下のスクリーンショットのようなものが表示されます。

リクエストに署名するとすぐにウェブページにリダイレクトされますが、何も起こりませんよね？心配しないでください。私たちはすべての世話をします。

NFTAPIの実装

次に、「useMoralisWeb3ApiCall」を使用して、現在ログインしているすべてのユーザーNFTのリストを取得し、ダッシュボードの[NFT]タブのテーブルに表示します。これで、「src /App.js」を次のコードスニペットで更新できます。

ログインしたユーザーNFTを取得するコードを実装したので、フックをインポートして次のコードスニペットを使用することで、アプリがマウントされるたびに「useEffect」フックを使用してリクエストを行うことができます。

上記のコードスニペットでは、Moralis APIを使用して、アプリケーションのマウント時にログインユーザーのNFTを取得しています。また、この例では5秒ごとに実行される「setInterval」メソッドを使用して最新の更新を取得する機能を追加しました。

ユーザーがWeb3APIに対して行うことができるリクエストの数を制限したい場合があります。これを実現するには、デフォルト設定を変更し、「Moralis.settings.setAPIRateLimit」を呼び出してクラウドコードで参照します。

モラリスのレート制限について詳しくは、こちらをご覧ください。

ここに示すように、コンポーネントを小道具としてホームコンポーネントに渡すことで取得したデータで、コンポーネントを更新します。

「components / Home /index.js」を更新します

「components / Home /Tab.js」を更新します

「components / Tables / NFSTable」内で、ここに示すように、返された関数（NFTTable）を更新して、最終的にデータを表示しましょう。

上記のコードスニペット： 

  • 小道具として「NFTTable」コンポーネントに渡された「nftData」を取得しました。
  • 「nftData」が空でないことを検証して確認しました。
  • 「NFTが見つかりません！」を返しました。ユーザーがNFTを持っていない場合の通知。それ以外の場合は、データが読み込まれるまで待機し、ユーザーに「読み込み中…」通知を表示します。
  • また、トークンアドレスとトークンIDをスライスして特定のサイズを返すことにより、トークンIDの長さをトリミングしました。

ブラウザダッシュボードに行きましょう。以下の[NFT]タブに表示されるものと同様の内容が表示されるはずです。

もちろん、ログインしたアカウントにはポリゴンチェーン上にいくつかのNFTがあります。そのため、上記のすべての情報を抽出することができました。

トークンとトランザクション履歴–APIの実装

トークンと履歴はNFTと同じ方法で実装されます。したがって、「src / App.js」に移動し、MoralisのAPIを使用してメソッドを実装しましょう。

「src / App.js」

次に、ここに示すように「components / Home /index.js」の更新に進みましょう

「components / Home /Tab.js」を更新します

次に、「components / Tables / TokenTable」と「components / Tables / HistoryTable」を更新し、最後に返された関数（「TokenTable」と「HistoryTable」）を次のように更新してデータを表示します。

「components / Tables / TokenTable」内で、次のコードを更新します

ここのコードスニペットで「components / Tables / HistoryTable」も更新しましょう

上記のトークンテーブルと履歴テーブルのそれぞれのコードスニペットでは、データを表示するためにNFTテーブルにあるものと同様のことを行いました。基本的に：

  • 個々のコンポーネントに小道具として渡された「tokenData」と「transactionData」を取得しました。
  • 渡されたデータが空でないことを検証し、確認しました。それ以外の場合は、「トークンが見つかりません！」を返します。または「トランザクションが見つかりません！」通知。それ以外の場合は、データが読み込まれるまで待機し、ユーザーに「読み込み中…」通知を表示します。
  • また、「block_hash」、「from_address」、および「to_adress」をスライスして特定のサイズを返すことにより、長さをトリミングしました。

ブラウザを開いて、このチュートリアルでこれまでに行ったことを確認してみましょう。ユーザートークンとトランザクション履歴を表示するには、以下に示すようなものが必要です。

現在ログインしているユーザーには、実行するトランザクションが1つだけあり、トークンはありません。そのため、上記の表があります。しかし、あなたの状況は間違いなく変わるでしょう。

ユーザーアドレスとネイティブバランスAPIの実装

このセクションでは、Moralis APIを使用してネイティブバランスAPIを実装してから、ユーザーのアドレスを取得してユーザーのダッシュボードに表示します。

「src / App.js」を次のコードスニペットで更新しましょう

次に、「components / Nav / LeftBar.js」を次のコードスニペットで更新して、取得したユーザーアドレスを小道具として動的に表示します。

ここで、「components / Home / index.js」ファイル内で、次のコードスニペットで更新して、ログインしているユーザーのネイティブ残高とユーザーのアドレスを表示します。

ブラウザを開いて、アプリケーションをテストしてみましょう。

観察したかもしれませんが、フェッチされたすべてのNFT、トークン、およびトランザクションは、APIリクエストを行うときに指定したものであるため、ポリゴンチェーンから取得されました。ただし、次のセクションで提供するクロスチェーン機能が必要です。

クロスチェーンの実装

接続性とスケーラビリティを実現する手段としてクロスチェーンの互換性が普及するにつれて、Moralisがすぐに提供するクロスチェーンの相互運用性が将来の道になることは明らかです。

「src / App.js」に移動し、次のスニペットを使用してクロスチェーン機能を実装しましょう。

上記のコードスニペットでは、次のようになります。

  • クロスチェーン機能のために、ドロップダウンで選択された値を含むvalueというタイトルの状態変数を作成しました。
  • オプションとして、値の状態変数を各MoralisAPIリクエストに送信しました。
  • 値の状態変数は、「leftBar」コンポーネントへの小道具としても提供されました。
  • 最後に、ドロップダウン値が変更されたときに、変更を管理および追跡するためのメソッドを作成します。

次に、ここに示すように「component / Nav / LeftBar」を更新します。

わーい！🥳アプリケーションをテストした後、以下のスクリーンショットのような完全に機能する分散型アプリケーションができあがります。

結論

このチュートリアルでは、究極のWeb3開発プラットフォームを使用して分散型アプリケーションを完全に構築し、ZapperdAppを構築するための最先端のWeb3APIであるMoralisを提供する方法を示します。Moralisを使用すると、さまざまなWeb3dAppを構築できます。今すぐMoralisにサインアップして、独自のWeb3プロジェクトの構築を開始してください。 

https://moralis.ioの元の記事のソース

What is GEEK

Buddha Community

中條 美冬

1646732400

ReactJSとMoralisを使用してクロスチェーンZapperdAppを構築する方法

MoralisAPIとサーバーレスリアルタイムトランザクションを使用してReactJSでクロスチェーンZapperdAppを構築する方法

この記事では、MoralisAPIとサーバーレスリアルタイムトランザクションを使用してReactJSでクロスチェーンZapperdAppを構築する方法について説明します°

間違いなくdAppについて多くのことを聞いたことがあるでしょうが、dAppをすばやく構築する方法がわからない場合があります。ITの世界の多くは、dAppを構成するものについて独自の定義を持っているようであり、深く掘り下げるほど、すべてが技術的になります。簡単に言うと、dAppは「分散型アプリケーション」の略で、Web3アプリです。これらのdAppは通常、市場に出すために多くの作業を必要とします。ただし、Moralisなどの堅牢なWeb3バックエンドインフラストラクチャプラットフォームを利用すると、dAppの開発時間を大幅に短縮できます。

このチュートリアルでは、MoralisのAPIとサーバーレスリアルタイムトランザクションを使用して、ReactJSでクロスチェーンZapperdAppを構築する方法について説明します。

これは、インターネットに接続している人なら誰でもウォレットに接続してポートフォリオを表示できるプラットフォームになります（NFT [s]、token [s]、ネイティブバランス、リアルタイムのサーバーレストランザクション履歴が含まれます）。

目次

  • dAppとは何ですか？
  • モラリスとは何ですか？
  • プロジェクトのセットアップとインストール
  • Moralisサーバーのセットアップ
  • クロスチェーンZapperdAppの構築
  • 結論

ライブデモとGitHubリポジトリへのリンクは次のとおりです👉ZapperdApp

前提条件

  • PCにNode.js / NPMがインストールされていることを確認してください。そうでない場合は、ここでクイックスタートガイドをご覧ください
  • React.jsの使用経験

dAppとは何ですか？

「dApps」という用語は、「分散型アプリケーション」を表します。これらは通常のアプリに匹敵し、同様の役割を果たしますが、ブロックチェーンなどのピアツーピアネットワーク上で実行されます。

つまり、分散型アプリケーション（dApps）は、ブロックチェーンと同様に、ピアツーピア（P2P）ネットワーク上で実行されます。dAppが仲介なしで機能を提供できるようにするスマートコントラクトは、dAppで一般的に使用されます。

モラリスとは何ですか？

Moralisは、Ethereum、Polygon、Binance Smart Chain（現在はBNB Smart Chain）などのブロックチェーンに接続する分散型ソフトウェアを構築するためのさまざまなツールとリソースをまとめたサービスです。

組み込みのクロスチェーン機能を含むMoralisの究極のWeb3開発プラットフォームにより、初心者および経験豊富な開発者は迅速かつ簡単に作業できます。さらに、Moralisは、フロントエンド開発に集中できるWeb3バックエンドインフラストラクチャを提供します。基本的に、dAppを動作させるために必要なすべての複雑な舞台裏のWeb3の処理を行います。 

Moralisは完全に制御され、無限にスケーラブルです。つまり、dAppは問題なく拡張できます。

プロジェクトのセットアップとインストール

プロジェクトのセットアップとインストールをすばやく開始するために、このプロジェクトをGitHubに複製し、「project-setup」ブランチにいることを確認します。次に、ターミナルで次のコマンドを使用してプロジェクトのクローンを作成した後、プロジェクトをローカルで起動します。

cdzapper-プロジェクト&&ヤーン&&ヤーンスタート

または

cd zapper-project && npm install && npm start

プロジェクトのクローンを作成してインストールすると、次のようなものになります。

次に、Moralisサーバーをセットアップします。

Moralisサーバーのセットアップ

次のセクションでZapperdAppを開発するために使用するので、Moralisサーバーのセットアップを開始しましょう。Moralis管理パネルでサーバーをセットアップします。まだアカウントをお持ちでない場合は、こちらから登録してください。サインアップは簡単で、完全に無料で始めることができます。

以下に示すように「新しいサーバーの作成」をクリックし、管理パネルでテストネットサーバーを選択します。

次に、以下に示すようにサーバーの詳細を入力します。

サーバーは数分で準備が整います。Moralis管理パネルで新しく作成したサーバーインスタンスからサーバーのURLとアプリケーションIDにアクセスする必要があります。  

以下に示すように、これらの詳細を使用して、アプリケーションからサーバーインスタンスに接続します。

次に、ZapperdAppを構築します。

クロスチェーンZapperdAppの構築

すべての設定が完了したので、実装を始めましょう。 

まず、「index.js」ファイルに移動し、以前に構築したサーバーインスタンスから取得したアプリケーションIDとサーバーURLを使用して、Moralisを使用するようにアプリケーションを構成します。

次のコマンドを使用して、プロジェクトのルートに「.env」ファイルを作成する必要があります。

touch .env

「.env」内に、以下の詳細を追加してください。

REACT_APP_MORALIS_APPLICATION_ID=our-application-id REACT_APP_MORALIS_SERVER_URL=our-server-url

道徳的初期化

「index.js」内で、ここのコードスニペットで更新します

上記のコードスニペットでは、すでにインストールされている「react-moralis」から「MoralisProvider」をインポートしました。「MoralisProvider」は初期化全体を処理し、コンポーネントがMoralis関数にアクセスできるようにします。

認証

「src / App.js」ファイル内で、ここのコードスニペットを使用して「react-moralis」SDKから「useMoralis」、「useMoralisWeb3ApiCall」、「useMoralisWeb3Api」をインポートします

ダッシュボードにリダイレクトする前に、ユーザーがログインしているかどうかを確認します。それ以外の場合は、 Moralisの組み込みメソッドを使用してウォレットをリンクできるページにリダイレクトします。

上記のスニペットでは、「useMoralis」APIの「isAuthenticated」メソッドを使用して、ユーザーがログインしているかどうかを検証しています。そうでない場合は、ウォレットを接続してログインできるボタンのあるビューを返します。

ブラウザに以下のスクリーンショットのようなものが表示されます。

リクエストに署名するとすぐにウェブページにリダイレクトされますが、何も起こりませんよね？心配しないでください。私たちはすべての世話をします。

NFTAPIの実装

次に、「useMoralisWeb3ApiCall」を使用して、現在ログインしているすべてのユーザーNFTのリストを取得し、ダッシュボードの[NFT]タブのテーブルに表示します。これで、「src /App.js」を次のコードスニペットで更新できます。

ログインしたユーザーNFTを取得するコードを実装したので、フックをインポートして次のコードスニペットを使用することで、アプリがマウントされるたびに「useEffect」フックを使用してリクエストを行うことができます。

上記のコードスニペットでは、Moralis APIを使用して、アプリケーションのマウント時にログインユーザーのNFTを取得しています。また、この例では5秒ごとに実行される「setInterval」メソッドを使用して最新の更新を取得する機能を追加しました。

ユーザーがWeb3APIに対して行うことができるリクエストの数を制限したい場合があります。これを実現するには、デフォルト設定を変更し、「Moralis.settings.setAPIRateLimit」を呼び出してクラウドコードで参照します。

モラリスのレート制限について詳しくは、こちらをご覧ください。

ここに示すように、コンポーネントを小道具としてホームコンポーネントに渡すことで取得したデータで、コンポーネントを更新します。

「components / Home /index.js」を更新します

「components / Home /Tab.js」を更新します

「components / Tables / NFSTable」内で、ここに示すように、返された関数（NFTTable）を更新して、最終的にデータを表示しましょう。

上記のコードスニペット： 

  • 小道具として「NFTTable」コンポーネントに渡された「nftData」を取得しました。
  • 「nftData」が空でないことを検証して確認しました。
  • 「NFTが見つかりません！」を返しました。ユーザーがNFTを持っていない場合の通知。それ以外の場合は、データが読み込まれるまで待機し、ユーザーに「読み込み中…」通知を表示します。
  • また、トークンアドレスとトークンIDをスライスして特定のサイズを返すことにより、トークンIDの長さをトリミングしました。

ブラウザダッシュボードに行きましょう。以下の[NFT]タブに表示されるものと同様の内容が表示されるはずです。

もちろん、ログインしたアカウントにはポリゴンチェーン上にいくつかのNFTがあります。そのため、上記のすべての情報を抽出することができました。

トークンとトランザクション履歴–APIの実装

トークンと履歴はNFTと同じ方法で実装されます。したがって、「src / App.js」に移動し、MoralisのAPIを使用してメソッドを実装しましょう。

「src / App.js」

次に、ここに示すように「components / Home /index.js」の更新に進みましょう

「components / Home /Tab.js」を更新します

次に、「components / Tables / TokenTable」と「components / Tables / HistoryTable」を更新し、最後に返された関数（「TokenTable」と「HistoryTable」）を次のように更新してデータを表示します。

「components / Tables / TokenTable」内で、次のコードを更新します

ここのコードスニペットで「components / Tables / HistoryTable」も更新しましょう

上記のトークンテーブルと履歴テーブルのそれぞれのコードスニペットでは、データを表示するためにNFTテーブルにあるものと同様のことを行いました。基本的に：

  • 個々のコンポーネントに小道具として渡された「tokenData」と「transactionData」を取得しました。
  • 渡されたデータが空でないことを検証し、確認しました。それ以外の場合は、「トークンが見つかりません！」を返します。または「トランザクションが見つかりません！」通知。それ以外の場合は、データが読み込まれるまで待機し、ユーザーに「読み込み中…」通知を表示します。
  • また、「block_hash」、「from_address」、および「to_adress」をスライスして特定のサイズを返すことにより、長さをトリミングしました。

ブラウザを開いて、このチュートリアルでこれまでに行ったことを確認してみましょう。ユーザートークンとトランザクション履歴を表示するには、以下に示すようなものが必要です。

現在ログインしているユーザーには、実行するトランザクションが1つだけあり、トークンはありません。そのため、上記の表があります。しかし、あなたの状況は間違いなく変わるでしょう。

ユーザーアドレスとネイティブバランスAPIの実装

このセクションでは、Moralis APIを使用してネイティブバランスAPIを実装してから、ユーザーのアドレスを取得してユーザーのダッシュボードに表示します。

「src / App.js」を次のコードスニペットで更新しましょう

次に、「components / Nav / LeftBar.js」を次のコードスニペットで更新して、取得したユーザーアドレスを小道具として動的に表示します。

ここで、「components / Home / index.js」ファイル内で、次のコードスニペットで更新して、ログインしているユーザーのネイティブ残高とユーザーのアドレスを表示します。

ブラウザを開いて、アプリケーションをテストしてみましょう。

観察したかもしれませんが、フェッチされたすべてのNFT、トークン、およびトランザクションは、APIリクエストを行うときに指定したものであるため、ポリゴンチェーンから取得されました。ただし、次のセクションで提供するクロスチェーン機能が必要です。

クロスチェーンの実装

接続性とスケーラビリティを実現する手段としてクロスチェーンの互換性が普及するにつれて、Moralisがすぐに提供するクロスチェーンの相互運用性が将来の道になることは明らかです。

「src / App.js」に移動し、次のスニペットを使用してクロスチェーン機能を実装しましょう。

上記のコードスニペットでは、次のようになります。

  • クロスチェーン機能のために、ドロップダウンで選択された値を含むvalueというタイトルの状態変数を作成しました。
  • オプションとして、値の状態変数を各MoralisAPIリクエストに送信しました。
  • 値の状態変数は、「leftBar」コンポーネントへの小道具としても提供されました。
  • 最後に、ドロップダウン値が変更されたときに、変更を管理および追跡するためのメソッドを作成します。

次に、ここに示すように「component / Nav / LeftBar」を更新します。

わーい！🥳アプリケーションをテストした後、以下のスクリーンショットのような完全に機能する分散型アプリケーションができあがります。

結論

このチュートリアルでは、究極のWeb3開発プラットフォームを使用して分散型アプリケーションを完全に構築し、ZapperdAppを構築するための最先端のWeb3APIであるMoralisを提供する方法を示します。Moralisを使用すると、さまざまなWeb3dAppを構築できます。今すぐMoralisにサインアップして、独自のWeb3プロジェクトの構築を開始してください。 

https://moralis.ioの元の記事のソース