您将要构建的内容,请参阅 Bitfinity 测试网络和git repo的现场演示。
欢迎阅读这份综合指南,我们将使用 Next.js、Solidity 和 TypeScript 构建一个 Web3 去中心化慈善平台。学完本教程后,您将清楚地了解:
作为参与本教程的奖励,您可以轻松赢得一本关于成为受欢迎的Solidity开发人员的著名书籍。此优惠对前300 人免费,有关如何获胜的说明,请观看下面的短视频。
您需要安装以下工具才能与我一起构建:
要为本教程设置 MetaMask,请观看下面的教学视频:
完成设置后,您就有资格获得我们的书籍的免费副本。要领取您的书,请填写表格以提交您的工作证明。
观看以下教学视频即可获得长达 3 个月的免费高级课程
Dapp 导师学院,包括:
立即开始您的 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
将<YOUR_ALCHEMY_PROJECT_ID>
和<WALLET_CONNECT_PROJECT_ID>
替换为您各自的项目 ID。
YOUR_ALCHEMY_PROJECT_ID
:在此处获取密钥WALLET_CONNECT_PROJECT_ID
:在此处获取密钥
最后,运行yarn dev
来启动项目。
我们这个项目的前端很可靠,可以进行一些智能合约集成,但我们需要 Reduxify 我们的应用程序来启用共享数据空间。
上图代表了我们的 Redux 存储的结构,它会很简单,因为我们没有创建一些过于复杂的项目。
我们将设置 Redux 来管理应用程序的全局状态。按着这些次序:
store
文件夹。store
内,创建两个文件夹: actions
和states
。states
内,创建一个globalStates.ts
文件。
actions
内,创建一个globalActions.ts
文件。
store
文件夹内创建一个globalSlices.ts
文件。
store
文件夹内创建一个index.ts
文件。
pages/_app.ts
文件。
我们的应用程序已经使用 Redux 工具包进行了包装,在集成后端和前端时我们将重新访问 Redux。
接下来,我们将为我们的平台开发智能合约:
contracts
文件夹。contracts
内,创建一个DappFund.sol
文件并添加下面的合约代码。
DappFund
合约将促进慈善机构的创建、更新和捐赠,以及更改慈善税和禁止慈善机构等管理功能。
以下是逐个功能的细分:
constructor()
:此函数在部署合约时设置初始慈善税。它在合约部署期间仅执行一次。createCharity()
:此函数允许用户创建一个新的慈善机构。它需要几个参数,例如慈善机构的名称、描述、图像、简介和金额。它检查这些参数是否有效,然后创建一个新的CharityStruct
并将其添加到charities
映射中。updateCharity()
:此函数允许慈善机构的所有者更新其详细信息。在更新慈善机构的详细信息之前,它会检查该慈善机构是否存在以及发送者是否是该慈善机构的所有者。deleteCharity()
:此函数允许慈善机构的所有者将其标记为已删除。在将其标记为已删除之前,它会检查该慈善机构是否存在以及发送者是否是该慈善机构的所有者。toggleBan()
:此函数允许合约所有者禁止或取消禁止慈善机构。它会在切换其被禁止状态之前检查该慈善机构是否存在。donate()
:此函数允许用户向慈善机构捐款。它检查该慈善机构是否存在、未被禁止并且尚未达到其筹款目标。然后,它增加总捐赠计数,创建一个新的SupportStruct
,并将其添加到supportersOf
映射中。它还更新了慈善机构的筹集金额和捐款数量。changeTax()
:此函数允许合约所有者更改慈善税。它会在更新税费之前检查新的税率是否有效。getCharity()
:此函数允许任何人获取慈善机构的详细信息。它返回与给定 ID 关联的CharityStruct
。getCharities()
:此函数允许任何人获取所有活跃慈善机构的详细信息。它返回CharityStruct
对象的数组。getMyCharities()
:此函数允许用户获取所有活跃慈善机构的详细信息。它返回CharityStruct
对象的数组。getSupports()
:此函数允许任何人获取特定慈善机构的所有支持者的详细信息。它返回SupportStruct
对象的数组。payTo()
:此内部函数用于转移资金。它将指定数量的以太币发送到给定的地址。currentTime()
:此内部函数返回自 Unix 纪元以来的当前时间(以秒为单位)。它用于为捐赠和慈善创作添加时间戳。现在,让我们部署智能合约并用一些虚拟数据填充它:
scripts
文件夹。scripts
中,创建一个deploy.js
和一个seed.js
文件并添加以下代码。
部署脚本
种子脚本
运行以下命令来部署合约并为其添加数据:
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
如果您的操作正确,您应该会看到类似如下的输出:
此时我们可以开始将智能合约集成到前端。
首先,在项目根目录创建一个services
文件夹,并在其中创建一个blockchain.tsx
文件。该文件将包含与我们的智能合约交互的函数。
提供的代码是我们的区块链服务的 TypeScript 实现,用于与我们的智能合约交互。这项服务使用户能够在我们的慈善平台上执行操作,包括创建和更新慈善机构、捐款等。
以下是逐个功能的细分:
getEthereumContracts()
:此函数获取服务将与之交互的以太坊合约实例。它检查用户是否有连接的以太坊帐户并使用它与合约交互,否则,它使用随机创建的钱包。getAdmin()
:该函数返回合约的所有者。getCharities()
、 getMyCharities()
、 getCharity()
:这些函数分别获取所有慈善机构、当前用户创建的慈善机构以及通过其 ID 指定的特定慈善机构。getSupporters()
:此函数通过 ID 获取特定慈善机构的支持者。createCharity()
、 updateCharity()
:这些函数分别允许用户创建新的慈善机构或更新现有的慈善机构。makeDonation()
:此函数允许用户向特定慈善机构捐款。deleteCharity()
:此函数允许慈善机构的所有者删除它。banCharity()
:此函数允许合约所有者禁止慈善机构。structuredCharities()
、 structuredSupporters()
:这些是辅助函数,可将合约返回的数据构造为更可用的格式。
使用以下代码更新services
内的provider.tsx
文件以包含bitfinity
网络。
接下来,我们将区块链服务中的功能链接到前端中各自的接口:
否 1:显示所有慈善机构更新pages/index.tsx
以从getCharities()
函数获取数据。
请注意 Redux 如何在区块链数据显示在屏幕上之前存储它。
No 2:显示用户的慈善机构更新pages/projects.tsx
以使用useEffect()
挂钩来获取当前用户的慈善机构。
请注意使用useEffect()
挂钩来检索当前用户的慈善机构,以及如何使用 Redux 跨多个组件处理和显示来自区块链的数据。这将是跨页面和组件的重复模式。
No 3:创建新的慈善机构更新pages/donations/create.tsx
以使用createCharity()
函数进行表单提交。
No 4:显示单个慈善机构更新pages/donations/[id].tsx
,以使用getServerSideProps()
、 getCharity()
和getSupporters()
函数按 ID 检索慈善机构和支持者。
第 5 步:编辑现有慈善机构更新pages/donations/edit/[id].tsx
以使用getCharity()
函数按 Id 检索慈善机构并填充表单字段。
您是否看到了如何使用getCharity()
函数通过 Id 检索慈善机构以及如何使用它来填充表单字段?
就像我们对上面的页面所做的那样,让我们更新以下组件以与智能合约交互:
否 1:处理慈善机构禁令更新components/Ban.tsx
以使用handleBanning()
函数调用banCharity()
函数。
否 2:处理慈善机构删除更新components/Delete.tsx
文件以使用handleDelete()
和deleteCharity()
函数执行慈善机构取消列出过程。
否 3:向慈善机构捐款更新components/Donor.tsx
文件以使用handleSubmit()
函数通过makeDonation()
函数将付款发送到智能合约。
以下是您还应该更新的其余组件,因为其中集成了 Redux。
NavBtn 组件查看并更新使用户能够导航、删除和编辑慈善机构信息的组件。使用 Redux 在单击时触发删除模式。
支付组件审查并更新 Redux 的实现,以在单击各自的按钮时触发捐赠、支持者和禁止模式。
支持组件审查并更新 Redux 的实现,以在单击关闭按钮时关闭支持者模式。
通过实施这些更新,所有组件和页面现在都已连接到智能合约,标志着项目的完成。
如果您的Nextjs服务器一直处于关闭状态,您可以通过运行yarn dev
再次启动它。
为了进一步学习,我们建议在我们的YouTube 频道上观看此版本的完整视频。
在本教程中,我们使用 Next.js、Solidity 和 TypeScript 构建了一个去中心化慈善平台。我们搭建了开发环境,构建了 Redux 商店,并将智能合约部署到了区块链上。通过将智能合约与前端集成,我们创造了无缝的用户体验。
在整个教程中,您获得了构建 Web3 应用程序、制定智能合约和合并静态类型检查方面的宝贵技能。
现在,您已准备好创建自己的去中心化慈善平台。快乐编码并在 Web3 世界中释放您的创新!