掀起区块链开发狂潮！Scaffold-eth带你一键打造震撼DApp

---

前言

前面的文章传送🚪：hardhat入门 与 hardhat进阶

在之前的文章中，我们已经探讨了使用Hardhat框架来开发以太坊智能合约的方法。本文将介绍另一个强大的工具——Scaffold-eth，它更加注重全栈式的开发体验，提供了一个集成了Hardhat、React和其他工具的开发环境。帮助我们更轻松地构建完整的以太坊去中心化应用（DApp）

一、Scaffold-eth是什么？

官网点击此处
doc文档指南点击此处
Scaffold-eth是一个基于以太坊的开发框架，旨在简化以太坊智能合约和前端应用程序的开发过程。它提供了一个集成了Hardhat、React和其他工具的开发环境，帮助开发者更轻松地构建以太坊去中心化应用（DApp）。

具体来说，Scaffold-eth的特点包括：

• 全栈式开发环境：Scaffold-eth提供了一个完整的开发环境，包括智能合约的编写、部署和交互，以及前端应用程序的开发和测试。

• 集成了Hardhat和React：Hardhat是一个强大的以太坊智能合约开发框架，而React是一个流行的前端框架。Scaffold-eth将它们集成在一起，使得智能合约和前端应用程序之间的交互变得更加简单。

• 自动化工具：Scaffold-eth提供了许多自动化工具，如自动部署合约、自动连接以太坊网络等，帮助开发者提高开发效率。

• 示例项目和模板：Scaffold-eth提供了许多示例项目和模板，包括简单的交易应用、去中心化交易所（DEX）等，帮助开发者快速上手并快速构建原型。

总的来说，Scaffold-eth是一个强大而灵活的工具，适用于初学者和资深开发者，帮助他们更轻松地构建以太坊DApp，并加速区块链应用的开发过程。

二、安装和配置

1.准备工作

在开始之前，您需要确保电脑已安装以下工具：
Node (>= v18.17) 节点 （>= v18.17）
Yarn (v1）or Yarn （v2+）PS：这里推荐安装v2+版本
Git

安装完成后可以输入下面命令查看是否安装成功

node --version
yarn --version
git --version

2.安装

在github上下载scaffold-eth，并且下载所需依赖

git clone https://github.com/scaffold-eth/scaffold-eth-2.git
cd scaffold-eth-2
yarn install

3.配置开发环境

初始化本地区块链
在新开的一个终端里输入yarn chain，这条链与我前面讲的hardhat入门里的链是一样的，都可以连到MetaMask钱包

部署智能合约
刚才的终端不要关闭，再开第二个终端输入yarn deploy

启动NextJS
前面的两个都不要关掉，再开第三个终端输入yarn start

启动项目
打开浏览器输入http://localhost:3000/就可以进到项目主页面

三、进阶使用

1.放入自己的合约

上面我们安装完成后就可以把自己的一个合约放到里面去，我们在项目的packages/hardhat/contracts/目录下放入EthVoting.sol文件，再到packages/hardhat/deploy/目录下创建一个01_deploy_ethvoting.ts文件，把前面00的文件复制改一下即可，如下图所示：

EthVoting.sol

//SPDX-License-Identifier: UNLICENSED
pragma solidity ^0.8.0;

contract EthVoting {

    //附议人信息
    struct Voter {
        uint voteTimeStamp; //投票时的区块时间
        bool initialized;   //判断是否投过票的标志
    }

    //提案内容
    struct  Proposal {
        string pName;        //提案标题
        string pCtx;         //提案内容
        address chairperson; //提案主持人
        uint voteCount;      //附议人数
        bool initialized;    //判断提案是否存在的标志
        uint limitTime;      //附议限制时间
        mapping(address => Voter) voters; //附议列表
    }




    //所有提案列表
    mapping(uint => Proposal) public proposals;

    //附议事件
    event VoteEvt(string indexed eventType, address _voter, uint timestamp);

    //提案事件
    event ProposeEvt(string indexed eventType, uint _proposalId, uint _limitTime);

    //创建新提案
    function createProposal(uint _pid,string  memory _pName, string memory  _pCtx, uint _limitTime) public returns (uint){

        uint pId = _pid;
        Proposal storage _proposal = proposals[pId];
        _proposal.pName = _pName;
        _proposal.pCtx = _pCtx;
        _proposal.chairperson = msg.sender;
        _proposal.initialized = true;
        _proposal.limitTime= _limitTime;
        _proposal.voteCount = 0;

        emit ProposeEvt("propose", pId, _limitTime);

        return pId;


    }

    //进行附议
    function doVoting(uint pId) public {
        //提案是否存在
        if (proposals[pId].initialized == false)
            revert("proposal not exist");

        uint currentTime = block.timestamp;

        //是否已超过提案时限
        if (proposals[pId].limitTime < currentTime)
            revert("exceed voting time");

        //是否已经投过票
        if (proposals[pId].voters[msg.sender].initialized == true)
            revert("already vote");

        //新投票信息
        Voter memory voter = Voter({
            voteTimeStamp: block.timestamp,
            initialized: true
        });

        //记录投票信息
        proposals[pId].voters[msg.sender] = voter;
        proposals[pId].voteCount+=1;

        emit VoteEvt("vote", msg.sender, block.timestamp);
    }

    //查询是否附议
    function queryVoting(uint pId, address voterAddr) public view returns (uint){
        //提案是否存在
        if (proposals[pId].initialized == false)
            revert("proposal not exist");

        //返回投票时间
        return proposals[pId].voters[voterAddr].voteTimeStamp;
    }

    //获取区块链时间
    function getBlockTime() public view returns (uint t) {
        t = block.timestamp;
    }

    //查询提案标题
    function getProposalName(uint pId) public view returns (string memory s) {
        s = proposals[pId].pName;
    }

    //查询提案内容
    function getProposalCtx(uint pId) public view returns (string memory s) {
        s = proposals[pId].pCtx;
    }

    //查询提案内容
    function getProposalVCnt(uint pId) public view returns (uint v) {
        v = proposals[pId].voteCount;
    }

    //查询提案期限
    function getProposalLimit(uint pId) public view returns (uint t) {
        t = proposals[pId].limitTime;
    }
}

2.部署运行

保证区块本地链与NextJS两个端口的启动，然后再次打开一个端口输入yarn deploy，再次打开http://localhost:3000/debug界面，可以发现多了一个合约，并且自动对应到了合约里的读（read）和写（write）的方法

---

总结

通过使用Scaffold-eth，你可以快速搭建一个完整的以太坊开发环境，并进行智能合约的开发、部署和交互。它让你不用为前端调用而烦恼，会自动生成读和写的方法，让开发者更加专注与智能合约逻辑的编写，提供了一套完整的工具和模板，帮助你更轻松地构建以太坊应用程序。祝你在使用Scaffold-eth时取得成功！
希望本文能够帮助读者更好地了解Scaffold-eth，如果有任何疑问或者建议，欢迎留言讨论🌹