MoralisというdApp構築プラットフォームを体験してみる

森 亮介

2022.05.13

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

MoralisというdApp構築プラットフォームを教えてもらったので、実際に触ってみようと思います。

Moralisは、開発者がスケーラブルで堅牢なDappを出荷するための時間とお金を節約する

とされていて、Web3のワークフローを提供してくれるサービスのようです。 (ユーザー認証,履歴およびリアルタイムのトランザクション監視,クロスチェーンWeb3API(NFT、トークン、ユーザー残高、トランザクション、取引などに関する詳細なデータを入手))

そして、あらゆるプラットフォーム向けのSDK（Web SDK、Game SDK, Backend SDK）も用意されており、web3を任意のプラットフォームに導入できます。

チュートリアルもたくさん用意されており、

初めてdApp構築を触るという人でも体験しやすいと思っています。

やってみる

この3分で簡単なdAppを構築する方法を行います。

アカウント作成、ログイン

サインアップよりアカウントを作成します。

アカウントが作成されると自動的にログインし、管理コンソールにリダイレクトされました。

Moralis Serverの作成

アカウント作成、ログイン後に上記のようにServerを作ってくれ　と促されるのでCreate a new serverをクリックします。

メインネット、テストネット、ローカルデブチェーン（例えばHardhatやGanache）用のdAppsを開発することができます。

今回はMainet Serverを選択します。

※ Mainet Serverとは？

Moralisで構築されたすべてのdAppの中核には、Moralis Serverがあります。Moralis SDKとともに、ユーザー認証とユーザートークン残高、NFT、トランザクション、イベントなどのブロックチェーンデータを持つdAppを迅速に作成することができるものです。

Moralisサーバーを使用すると、Moralis SDKを使用して、dappの開発を高速化できます。 Moralisサーバーを使用すると、1行のコードでMetamaskやその他のウォレットを使用したユーザー認証を実行できるようになりました。 次に、 トークン残高、 NFT残高、 履歴トランザクションなどのデータをユーザーに自動的に提供できます。

dAppを作成するためのパッケージのようなものと思っています。

サーバーインスタンスの名前、リージョン、ネットワーク、チェーンを決定します。

チェーンの選択は複数可能なので、マルチチェーンにしてシステムを構築することもできますね。

作成後、Serversのページに表示されるようになります。

Moralisと通信するための設定

Moralisサーバーと通信するために、dAppにMoralisのコードを含める必要があります。

ドキュメントに記載されているHTMLをコピーして使用します。

<html>
  <head>
    <!-- Moralis SDK code -->
    <script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
    <script src="https://unpkg.com/moralis/dist/moralis.js"></script>
  </head>
  <body>
    <h1>Gas Stats With Moralis</h1>

    <button id="btn-login">Moralis Login</button>
    <button id="btn-logout">Logout</button>

    <script>
      // connect to Moralis server

      const serverUrl = "https://xxxxx/server";
      const appId = "YOUR_APP_ID";
      Moralis.start({ serverUrl, appId });

    </script>
  </body>
</html>

作成したサーバーインスタンスのServer DetailsタブにあるServer URL,Application IDをコピーします。

この2つを先ほど用意したHTMLファイルに書かれているscriptタグの指定された場所に貼り付けます。

MetaMaskを使ったユーザーログインを実装

※ MetaMaskをインストールしていない場合は、インストールしてください

MetaMaskのインストール

Moralisを使用したMetamMaskのログインの実装は、以下のコードで可能になります

// connect to Moralis server const serverUrl = "https://xxxxx/server"; const appId = "YOUR_APP_ID"; Moralis.start({ serverUrl, appId });

  async function login() {
    let user = Moralis.User.current();
    if (!user) {
      user = await Moralis.authenticate();
    }
    console.log("logged in user:", user);
  }

  async function logOut() {
    await Moralis.User.logOut();
    console.log("logged out");
  }

  document.getElementById("btn-login").onclick = login;
  document.getElementById("btn-logout").onclick = logOut;

dAppをLocalhostで実行する

ローカルで実行する最も簡単な方法は、Visual Studio Codeのライブサーバ拡張機能を使うことです。 とドキュメントに記載されていましたので、この通りにやってみます。

Visual Studio Codeのライブサーバ拡張機能をインストールした後、

index.htmlを右クリックし、「ライブサーバで開く」を選択するだけです。

5500ポートを利用したアプリケーションサーバーが起動し、ローカル環境で実行できるようになりました。

Moralisのログインボタンをクリックすると、Moralis.authenticate()が呼び出され、MetaMaskの接続が促されます.

MetaMaskでのログインをすすめていき、最終的にはサンプルのアプリに戻ってきますが、ブラウザの開発者コンソールを開いてみると

上記のようにユーザーがログインされましたというログが表示されていました。

ユーザーの過去の取引を取得する

ログインしているユーザーの過去のトランザクションを取得するには、EthTransactionsテーブルに対するクエリを作成することで簡単に行うことができるようです。

実行しているアプリのHTMLにボタンを追加します。このボタンを押したときに過去のトランザクションを取得するようにします。

<button id="btn-get-stats">Refresh Stats</button>

過去のトランザクションを取得には、scriptタグに以下のコードを追加します。

function getStats() {
  const user = Moralis.User.current();
  if (user) {
    getUserTransactions(user);
  }
}

async function getUserTransactions(user) {
  // create query
  const query = new Moralis.Query("EthTransactions");
  query.equalTo("from_address", user.get("ethAddress"));

  // run query
  const results = await query.find();
  console.log("user transactions:", results);
}

// get stats on page load
getStats()

ログイン関数にもgetStats();を追加しておきましょう。

このセクションのコードは以下に記載されておりますので、ご参考ください。

https://docs.moralis.io/guides/build-a-simple-dapp-in-3-mins-historical-transactions-part3#code-so-far

コードを保存し、アクセスし直すと、

コンソールに過去のトランザクションの内容が表示されます。

リアルタイムでアラートを受け取る

過去のすべてのトランザクションを取得できるだけでなく新しいトランザクションが発生したときに通知を受け取ることができます

const subscription = await query.subscribe();

subscription.on("create", function (data) {
  console.log("new transaction: ", data);
});

このコードで、新しいトランザクションが発生したときにイベントが発火し、通知されるようにできます。

Cloud Functionsを作成

何らかのカスタム処理を行う場合、MoralisのCloud Functionsという機能を用います。 モラリスサーバー上にクラウド関数を作成し、その関数をdAppから呼び出す必要があります。

今回の例では、ユーザーの平均ガス料金を計算しています。

WebコンソールのMoralis Serverインスタンスに移動し、Cloud Functionsボタンをクリックし, 以下のコードを貼り付けます。

Moralis.Cloud.define("getAvgGas", async function (request) {
  const query = new Moralis.Query("EthTransactions");
  const pipeline = [
    {
      group: {
        // group by "from_address"
        objectId: "$from_address",
        // add computed property avgGas
        // get average and convert wei to gwei
        avgGas: { $avg: { $divide: ["$gas_price", 1000000000] } },
      },
    },
    { sort: { avgGas: -1 } }, // sort by avgGas high to low
    { limit: 10 }, // only return top 10 results
  ];

  // the master key is required for aggregate queries
  const results = await query.aggregate(pipeline, { useMasterKey: true });
  return results;
});

getAvgGasというCloud Functionsw作成しました。

Cloud Functionsは、Moralis.Cloud.run(name, args)で呼び出すことができます

async function getAverageGasPrices() {
  const results = await Moralis.Cloud.run("getAvgGas");
  console.log("average user gas prices:", results);
}

そして、先ほど作成しているgetStats()関数からgetAverageGasPrices()を呼び出すように修正します。

function getStats() {
  const user = Moralis.User.current();
  if (user) {
    getUserTransactions(user);
  }
  getAverageGasPrices();
}

変更後、Cloud Functionsの実行結果が表示されるようになります。

html上にリストを表示させるには、

に記載されている通りにやるとできます。

※ 今回は取引履歴がないアカウントだったため割愛

参考

今回のチュートリアル全てのコードはいかに記載されています

AWS