您将要构建的内容，请参阅 Bitfinity 测试网络和 的 。  git repo 现场演示 介绍 欢迎阅读这份综合指南，我们将使用 Next.js、Solidity 和 TypeScript 构建一个 Web3 去中心化慈善平台。学完本教程后，您将清楚地了解： 使用 Next.js 构建动态界面 使用 Solidity 制作以太坊智能合约 使用 TypeScript 合并静态类型检查 部署智能合约并与之交互 了解基于区块链的慈善平台的基础知识 作为参与本教程的奖励，您可以轻松赢得一本关于成为受欢迎的 开发人员的著名书籍。此优惠对前 免费，有关如何获胜的说明，请观看下面的短视频。  Solidity 300 人 先决条件 您需要安装以下工具才能与我一起构建：  Node.js 纱 git 重击 元掩码 Next.js 坚固性 Redux 工具包 顺风CSS 要为本教程设置 MetaMask，请观看下面的教学视频：   https://www.youtube.com/watch?v=qV1mbFOtkxo&embedable=true 完成设置后，您就有资格获得我们的书籍的免费副本。要领取您的书， 。 请填写表格以提交您的工作证明 观看以下 即可获得长达 3 个月的免费高级课程 教学视频 Dapp 导师学院，包括： 全栈 NFT 铸造课程 全栈 NFT 市场课程 全栈区块链课程 ETC。 立即开始您的 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 在 内，创建两个文件夹：  和  。 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 以下是逐个功能的细分：    ：此函数在部署合约时设置初始慈善税。它在合约部署期间仅执行一次。 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 实现，用于与我们的智能合约交互。这项服务使用户能够在我们的慈善平台上执行操作，包括创建和更新慈善机构、捐款等。 以下是逐个功能的细分：    ：此函数获取服务将与之交互的以太坊合约实例。它检查用户是否有连接的以太坊帐户并使用它与合约交互，否则，它使用随机创建的钱包。 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：显示所有慈善机构 pages/index.tsx getCharities()   https://gist.github.com/Daltonic/c7b5205c0a352e715ea6d369c4c5a739?embedable=true 请注意 Redux 如何在区块链数据显示在屏幕上之前存储它。   更新 以使用 挂钩来获取当前用户的慈善机构。 No 2：显示用户的慈善机构 pages/projects.tsx useEffect()   https://gist.github.com/Daltonic/55de269f6d41727ad2ca283adfea241e?embedable=true 请注意使用 挂钩来检索当前用户的慈善机构，以及如何使用 Redux 跨多个组件处理和显示来自区块链的数据。这将是跨页面和组件的重复模式。 useEffect()   更新 以使用 函数进行表单提交。 No 3：创建新的慈善机构 pages/donations/create.tsx createCharity()   https://gist.github.com/Daltonic/58f3f813b5ee8bad45815545734c7410?embedable=true   更新  ，以使用  、  和 函数按 ID 检索慈善机构和支持者。 No 4：显示单个慈善机构 pages/donations/[id].tsx getServerSideProps() getCharity() getSupporters()   https://gist.github.com/Daltonic/96c4908e8a5406ab4e85822bb16a4b6f?embedable=true 更新 以使用 函数按 Id 检索慈善机构并填充表单字段。 第 5 步：编辑现有慈善机构 pages/donations/edit/[id].tsx getCharity()   https://gist.github.com/Daltonic/045ec20e60ba4aaac4d9ae62620bff51?embedable=true 您是否看到了如何使用 函数通过 Id 检索慈善机构以及如何使用它来填充表单字段？ getCharity() 具有智能合约的组件 就像我们对上面的页面所做的那样，让我们更新以下组件以与智能合约交互： 更新 以使用 函数调用 函数。 否 1：处理慈善机构禁令 components/Ban.tsx handleBanning() banCharity()   https://gist.github.com/Daltonic/3890759a4c5a9d83b292c1e8cbb31d91?embedable=true 更新 文件以使用 和 函数执行慈善机构取消列出过程。 否 2：处理慈善机构删除 components/Delete.tsx handleDelete() deleteCharity()   https://gist.github.com/Daltonic/a9dd133448062c32990435e9a762d17d?embedable=true 更新 文件以使用 函数通过 函数将付款发送到智能合约。 否 3：向慈善机构捐款 components/Donor.tsx handleSubmit() 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 的实现，以在单击关闭按钮时关闭支持者模式。 支持组件   https://gist.github.com/Daltonic/59c6788386f9e0bc28b93094da25fa14?embedable=true 通过实施这些更新，所有组件和页面现在都已连接到智能合约，标志着项目的完成。 如果您的 服务器一直处于关闭状态，您可以通过运行 再次启动它。 Nextjs yarn dev 为了进一步学习，我们建议在我们的 上观看此版本的完整视频。 YouTube 频道 结论 在本教程中，我们使用 Next.js、Solidity 和 TypeScript 构建了一个去中心化慈善平台。我们搭建了开发环境，构建了 Redux 商店，并将智能合约部署到了区块链上。通过将智能合约与前端集成，我们创造了无缝的用户体验。 在整个教程中，您获得了构建 Web3 应用程序、制定智能合约和合并静态类型检查方面的宝贵技能。 现在，您已准备好创建自己的去中心化慈善平台。快乐编码并在 Web3 世界中释放您的创新！

2022 - HackerNoon Contributor of the Year - Blockchain

2022 - HackerNoon Contributor of the Year - Decentralized Internet

2022 - HackerNoon Contributor of the Year - Ethereum

2022 - HackerNoon Contributor of the Year - React

如何使用 Next.js、TypeScript 和 Solidity 构建去中心化慈善平台

About Author

註釋

標籤

这篇文章刊登在

Related Stories

HackerNoon Decoded: The Top 10 Countries Where HackerNoon Is the Most Active

Floki 的 Valhalla 成为印度环斯里兰卡赛事联合赞助商

成功云迁移的完整指南：策略和最佳实践

架构师指南：构建 AI/ML 数据湖参考架构

HackerNoon Decoded: The Top 10 Countries Where HackerNoon Is the Most Active

Floki 的 Valhalla 成为印度环斯里兰卡赛事联合赞助商

成功云迁移的完整指南：策略和最佳实践

架构师指南：构建 AI/ML 数据湖参考架构

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps