使用 Polygon dApp Store Kit 创建 Web3 应用商店

在本指南中，我们将介绍如何使用 Polygon 的 dApp 商店工具包 创建一个去中心化应用商店。我们将介绍以下主题：

• 什么是 Polygon dApp 商店工具包？

• 为什么创建 dApp 商店工具包？

• 如何创建一个基于 dApp 商店工具包构建的 Web 应用程序。

在本指南结束时，我们将创建一个具有我们自己规则且完全可定制的去中心化应用商店 (演示屏幕截图如下)。开始吧！

什么是 dApp 商店工具包？

dApp 商店工具包是由 Polygon 构建的开源开发堆栈，它在底层使用了 Meroku；一个去中心化应用商店协议，充当开发者在其之上创建去中心化应用商店的注册表。

该注册表开箱即用，包含 900 多个去中心化应用程序，这意味着构建者无需为其商店寻找和评估应用程序，而是可以过滤和管理注册表中的应用程序。

为什么选择 dApp 商店工具包？

web3 中的开发者面临一个共同的挑战：很难让你的 dApp 被潜在用户/客户发现和分发。

这部分是由于当今主要分发渠道对基于区块链的应用程序和技术施加了限制。包括：

• Steam：Valve 已经禁止销售基于区块链的游戏。

• Apple：购买必须通过应用内购买系统进行。

尽管最近在这个领域取得了进展，包括 Google Play 商店在上个月（2023 年 7 月）宣布支持 NFT，但分发仍然是 web3 世界的一个痛点。

Polygon 没有发布中心化应用商店，而是创建了 dApp 商店工具包作为一个协议，允许任何人自由创建自己的定制化去中心化应用商店，这些商店服务于不同的目的并具有不同的激励措施。

创建一个去中心化应用商店

为了创建我们的去中心化应用商店，我们将使用 Next.js；一个用于创建全栈 Web 应用程序的 React 框架，以及 @merokudao/storekit-sdk 包来使用 Polygon dApp 商店工具包。

为了简洁明了，我将删减本指南中的样式和冗余内容，但如果你愿意，可以在下面链接的 GitHub 上查看该项目的完整源代码。

https://github.com/jarrodwatts/dapp-store-kit-demo

创建项目

首先，使用 create-next-app CLI 创建一个新的 Next.js 项目：

npx create-next-app@latest

以下是我选择的选项，但是你可以根据自己的喜好进行自定义：

√ What is your project named? ... dapp-store
√ Would you like to use TypeScript? ... No / Yes
√ Would you like to use ESLint? ... No / Yes
√ Would you like to use Tailwind CSS? ... No / Yes
√ Would you like to use `src/` directory? ... No / Yes
√ Would you like to use App Router? (recommended) ... No / Yes
√ Would you like to customize the default import alias? ... No / Yes

接下来，将目录更改为新创建的项目，并安装 dApp 商店工具包 npm 包：

## 首先，更改目录：
cd dapp-store

## 安装 dApp 商店工具包
npm i @merokudao/storekit-sdk

在你的文本编辑器中打开该项目，运行 npm run dev 并访问 http://localhost:3000/ 以预览你的应用程序。

获取精选 dApp

在我们的主页上，我们将从协议中获取精选的去中心化应用程序，并将它们显示在主页上。为此，我们将：

1. 从 @merokudao/storekit-sdk 包中实例化 DAppRegistryApi。

2. 调用 DAppRegistryApi 上的 getDAppV1 方法以返回 dApp 数组。

3. 迭代返回的数组以在 UI 上显示每个 dApp。

以下是实现此目的的代码：

import { useEffect, useState } from "react";
import { DAppRegistryApi, Dapp } from "@merokudao/storekit-sdk";

export default function Home() {
  // State to store the list of dApps
  // 用于存储 dApps 列表的状态
  const [dapps, setDapps] = useState<Dapp[]>();

  // useEffect to fetch the list of dApps and store them in the state
  // useEffect 用于获取 dApps 列表并将其存储在状态中
  useEffect(() => {
    (async () => {
      // Base URL for the mainnet API
      // 主网 API 的基本 URL
      const baseURL = "https://api-a.meroku.store";

      // Instantiate the dApp Registry API
      // 实例化 dApp 注册表 API
      const dAppRegistryAPI = new DAppRegistryApi({
        basePath: baseURL,
      });

      // Get the dApps list, and store it in the state
      // 获取 dApps 列表，并将其存储在状态中
      const dAppsRequest = await dAppRegistryAPI.getDAppV1();
      const dApps = dAppsRequest.data.response;
      setDapps(dApps);
    })();
  }, []);

  // Display each dApp we stored in state
  // 显示我们存储在状态中的每个 dApp
  return (
    <div>
      {dapps?.map((dapp) => (
        <div key={dapp.dappId}>
          <img src={dapp.images?.logo?.toString() || ""} alt={dapp.name} />
          <p>{dapp.name}</p>
        </div>
      ))}
    </div>
  );
}

添加一些样式和一些装饰后，这是到目前为止的应用程序：

从该方法返回的每个 dApp 都包含诸如 name、categories、description、images、appUrl、chains 等属性。使用这些属性中的每一个，你可以为你的应用商店创建完全可定制的界面，例如我下面的界面。

(你可以从 GitHub 存储库中复制此屏幕截图的源代码_)。

getDAppV1 方法还带有大量参数，允许你自定义要在应用程序中提供的 dApp：

getDAppV1(
   page?: number,
   limit?: number,
   search?: string,
   isListed?: boolean,
   chainId?: number,
   language?: string,
   availableOnPlatform?: Array<string>,
   matureForAudience?: boolean,
   minAge?: number,
   listedOnOrAfter?: string,
   listedOnOrBefore?: string,
   allowedInCountries?: Array<string>,
   blockedInCountries?: Array<string>,
   categories?: Array<Array<string>>,
   orderBy?: string,
   subCategory?: Array<Array<string>>,
   options?: AxiosRequestConfig
): Promise<AxiosResponse<InlineResponse200>>;

例如，如果我们想限制我们获取的 dApp，仅显示在 Polygon 链上构建的游戏，我们可以将 games 过滤器添加到 categories 参数，并将 137 作为链 ID，如下所示：

// Get the dApps list, and store it in the state
// 获取 dApps 列表，并将其存储在状态中
const dAppsRequest = await dAppRegistryAPI.getDAppV1(
  1, // page
  10, // page size
  undefined, // search term
  true, // is dapp listed
  137, // Polygon chain ID
  undefined, // language
  undefined, // availableOnPlatform
  undefined, // matureForAudience
  undefined, // minAge
  undefined, // listedOnOrAfter
  undefined, // listedOnOrBefore
  undefined, // allowedInCountries
  undefined, // blockedInCountries
  [["games"]] // categories
);

这改变了从注册表中返回的 dApp，允许我们完全自定义我们的应用商店体验，例如，我们现在有一个 Polygon 游戏商店：

让我们将每个 dApp 转换为指向 /dapps/[id] 动态路由的 Link，以便当用户单击每个 dApp 时，它会将他们带到该 dApp 的页面：

{dapps?.map((dapp) => (
  <Link href={`/dapps/${dapp.dappId}`} key={dapp.dappId}>
    ...
  </Link>
))}

创建单独的 dApp 页面

通过在 /pages/dapps/[dappId].tsx 创建一个新文件来使用 Next.js 创建一个新的动态路由，该文件会更详细地呈现每个 dApp。

使用先前类似的模式，我们可以调用 DAppRegistryApi 类上的 apiV1DappSearchDappIdGet 方法，以使用其 ID 获取特定的 dApp，并在 UI 上呈现它。以下是一个基本示例：

import { DAppRegistryApi, Dapp } from "@merokudao/storekit-sdk";
import { useRouter } from "next/router";
import React, { useEffect, useState } from "react";

export default function DappPage() {
  // Get the dApp ID from the URL using Next router.
  // 使用 Next router 从 URL 获取 dApp ID。
  const router = useRouter();
  const { dappId } = router.query;

  const [dapp, setDapp] = useState<Dapp>();

  // useEffect to fetch the list of dApps and store them in the state
  // useEffect 用于获取 dApps 列表并将其存储在状态中
  useEffect(() => {
    (async () => {
      if (!dappId) return;

      // Base URL for the mainnet API
      // 主网 API 的基本 URL
      const baseURL = "https://api-a.meroku.store";

      // Instantiate the dApp Registry API
      // 实例化 dApp 注册表 API
      const dAppRegistryAPI = new DAppRegistryApi({
        basePath: baseURL,
      });

      // Get dApp info by ID
      // 通过 ID 获取 dApp 信息
      const response = await dAppRegistryAPI.apiV1DappSearchDappIdGet(
        dappId as string
      );

      // Get the dApp out of the response
      // 从响应中获取 dApp
      const result = response?.data?.data?.[0];

      // Store the dApp in the state
      // 将 dApp 存储在状态中
      setDapp(result);
    })();
  }, [dappId]);

  // Render dApp information
  // 呈现 dApp 信息
  return (
    <main className="container flex flex-col align-middle w-full min-h-screen py-2 pt-20">
      <h1>{dapp?.name}</h1>
      <p>{dapp?.description}</p>
    </main>
  );
}

利用可用的元数据并添加一些样式，我们可以为每个单独的 dApp 创建一个优雅的页面，如下所示 (源代码)：

就这样！我们创建了一个发现页面和一个详细页面，用户可以在其中找到更多信息和每个我们在主页上策划的应用的 URL。

总结

在本指南中，我们介绍了理解和开始使用 Polygon 的 dApp 商店工具包的基础知识。在下面，你将找到更多资源来帮助你更深入地创建自己的项目：

• dApp 商店工具包 API 文档

• 本指南中的源代码

• Polygon 开发者 Discord

• 原文链接： blog.jarrodwatts.com/cre...
• 登链社区 AI 助手，为大家转译优秀英文文章，如有翻译不通的地方，还请包涵～