发布于 2026-01-06 15 阅读
0

我构建了我的第一个 dApp!Web3 入门图片门户 DEV 的全球展示挑战赛,由 Mux 呈现:展示你的项目!

我开发了我的第一个去中心化应用(dApp)!

Web3入门

图片门户

由 Mux 主办的 DEV 全球展示挑战赛:展示你的项目!

上周末,我完成了由buildspace 的优秀团队提供的web3项目。

该项目旨在构建一个去中心化应用(dApp),允许用户发送消息并将其存储在区块链上。底层使用了Solidity编写智能合约,前端则使用了 TypeScript、NEXT.jsTheme UI、传统的语义化标记语言以及少量 ARIA 元素。特别感谢 Element <details />!此外,还用到了一些其他 Web3 工具,例如Hardhat

Buildspace 项目都有非常清晰明了的说明。不过我还是稍微偏离了常规做法。我最近创建了一个 web3 入门项目,并决定以此为基础,开始我的首次 dapp 开发之旅。

GitHub 标志 nickytonline / web3-starter

一个带有明确定义的 web3 启动器,用于构建 dApp

Web3入门

该项目的目标是为您提供一个带有明确设计思路的模板,以便您启动一个 web3 项目。

贡献

如果您有兴趣为本项目做贡献,请先阅读我们的贡献指南。您可以查看我们现有的问题,或者如果您遇到问题,请创建一个新问题。对于功能请求,请先发起讨论

入门指南(本地开发)

  1. 安装依赖项

    npm install
    # or
    yarn
    Enter fullscreen mode Exit fullscreen mode
  2. 启动项目

    npm run dev
    # or
    yarn dev
    Enter fullscreen mode Exit fullscreen mode

请在浏览器中打开http://localhost:3000查看结果。

入门指南(Gitpod)

该项目可以在 Gitpod 中运行。请访问https://gitpod.io/#https://github.com/nickytonline/hello-edge-and-node。如果您希望以外部贡献者的身份将其加载到 Gitpod 中,则需要先 fork 该项目,然后在 Gitpod 中打开该 fork,例如https://gitpod.io/#https://github.com/some_user_that_forked_the_repository/hello-edge-and-node

  1. Gitpod 需要一两分钟才能加载完成。
  2. 如果这是第一次……

我还决定对这个项目进行一些修改,使其更符合我的需求。例如,我在智能合约中添加了一个用于存储URL的消息字段。由于时间紧迫,我直接使用了我喜欢的一个有趣网站http.cat上的图片。

pics.iamdeveloper.com 上的一条公开消息,消息中包含一张猫的图片。

代码还有些粗糙,毕竟只是个周末项目,但我对最终成果还是挺满意的。之后我又做了一些调整,不过还有很多重构工作要做​​。😅

如果你熟悉 TypeScript,这里有一些声明合并的例子,比如这个例子,可以在 JSX 中获取<marquee />元素。

该去中心化应用已上线,在Rinkeby 网络上运行合约。欢迎查看该去中心化应用的源代码。

GitHub 标志 nickytonline /图片门户

一个基于 Buildspace Wave Portal 项目的基本 dApp,用于在区块链上发送消息。

图片门户

这是一个学习 web3 的项目,遵循 Buildspace 的教程进行开发。初始代码基于我的入门项目https://github.com/nickytonline/web3-starter,我觉得在 2021 年 Hacktoberfest 期间做这个项目会很有趣,而且可能对其他人也有帮助。

虽然还有很多需要改进的地方,因为这只是为了好玩而做的,但我对自己的成果还是相当满意的。

最新版本已部署在https://pics.iamdeveloper.com

贡献

如果您有兴趣为本项目做贡献,请先阅读我们的贡献指南。您可以查看我们现有的问题,或者如果您遇到问题,请创建一个新问题。对于功能请求,请先发起讨论

入门指南(本地开发)

  1. 安装依赖项

    npm install
    # or
    yarn
    Enter fullscreen mode Exit fullscreen mode
  2. 启动项目

    npm run dev
    # or
    yarn dev
    Enter fullscreen mode Exit fullscreen mode

请在浏览器中打开http://localhost:3000查看结果。

入门指南(Gitpod)

该项目可以……

趁您还在,不妨去pics.iamdeveloper.com看看实时 dapp !

图片门户网站

文章来源:https://dev.to/nickytonline/i-built-my-first-dapp-3pbm