Scaffold-Eth 之旅~
我们先来尝试本地 1.0 版本。
1.0 版本我们不需要做什么,只需要把仓库 clone 下来运行即可。
先 fork。
再 clone。
# clone Repo
git clone [fork 之后你的仓库]
# example: git clone https://github.com/WeLightProject/set-purpose.git
cd set-purpose
# 切换分支
git checkout feat/v0x01
# 初始化子模块
git submodule update --init packages/hardhat/contracts
yarn
yarn chain
yarn deploy
yarn start
访问:
就能看到你的程序了!
pragma solidity >=0.8.0 <0.9.0; // 合约版本号
//SPDX-License-Identifier: MIT
import "hardhat/console.sol";
// 引入 console.sol 的作用在这里:https://hardhat.org/tutorial/debugging-with-hardhat-network.html,简单来说就是能在合约中 console.log 进行调试了
//import "@openzeppelin/contracts/access/Ownable.sol"; //https://github.com/OpenZeppelin/openzeppelin-contracts/blob/master/contracts/access/Ownable.sol
contract PurposeHandler { // 合约名称
//event SetPurpose(address sender, string purpose);
string public purpose = "Building Unstoppable Apps!!!"; // 设定一个变量 purpose,这个变量是直接存储在区块链中的,这也是和传统的编程语言不同的特性之一 —— 赋值即存储。
constructor() {
// what should we do on deploy?
}
function setPurpose(string memory newPurpose) public {
// 一个传参为 newPurpose 的函数
// memory/storage 这两种修饰符的使用看这里:
// https://www.v3h4t.com/2017/12/21/solidity_reftype_datalocation
purpose = newPurpose; // 把 purpose 更新为传入的参数
console.log(msg.sender,"set purpose to",purpose);
//emit SetPurpose(msg.sender, purpose);
}
}
是的,因为 web3.0 应用是纯前端应用,所以我们可以无需自己去购买一台服务器,而是可以直接将它部署在github 上。
Aha!这是我们首次要修改源码的地方,在packages/react-app/src/App.jsx
中,定位到如下代码:
const targetNetwork = NETWORKS.localhost; // <------- select your target frontend network (localhost, rinkeby, xdai, mainnet)
将localhost
修改为我们想要部署的测试网,如ropsten
。
const targetNetwork = NETWORKS.ropsten;
然后我们刷新页面,会发现已经弹出提示让我们连接测试网了。
用 metamask 链接测试网络,这个时候我们就要来点测试币以在测试网上调用合约:
Ropsten 水龙头:
这个决定了我们通过 Hardhat 和区块链交互时连接的是哪个网络。
在packages/hardhat/hardhat.config.js
中,定位到:
const defaultNetwork = "localhost";
将localhost
修改为ropsten
。
const defaultNetwork = "ropsten";
因为我们切换了网络,所以我们得重新部署一下合约。
我们先来用 hardhat 生成个新地址:
yarn run generate
小 Tips ①:
在 package.json 中可以看到指令大全!
小 Tips ②:
git 基础命令:
git add . # 添加所有修改 git commit -m "[msg]" # 提交修改 git push
Yeps,很好,我们生成了一个新的以太坊地址0x1c95a91e74872ead0a4c726712cfdfab3292f284
,我们将使用这个地址来部署合约。
我们首先给这个地址打点儿测试币:
再次执行yarn deploy
:
Oh,这次我们的合约部署在Ropsten测试网络上而不是本地测试网络上了!
我们可以通过 Etherscan 找到它:
首先我们切出一个专门托管静态网站的分支:
git checkout -b gh-pages
最好把这个分支放在另一个文件夹下,以免对gh-pages
分支的改动影响到一些本地的文件,推荐做法是切到另外一个文件夹里:
git checkout feat/v0x01
git worktree add ../set_purpose_gh_pages gh-pages
执行如下命令,我们就会生成可以直接托管到 Github-pages 上的静态网站:
yarn build
网站生成在packages/react-app/build
路径下,我们把这个文件夹内容复制到根目录下的docs文件夹下:
mkdir docs
cp -r packages/react-app/build/* ../set_purpose_gh_pages/docs
删除其余的文件夹:
rm -rf packages package.json yarn.lock node_modules
检查无误,我们把这个分支推上去:
g add .
g commit -m "feat/init gh-pages"
git push --set-upstream origin gh-pages
然后,在 Repo 的 Settings
>Pages
中设置下 Branches 和 Folder,就可以啦!
点击 绿色框框中的链接,我们就能访问我们第一个部署的 web3 dApp了!
有的时候,我们的Github Repo 会依赖于其它的 Repo,这个时候就需要使用Git Submodule 子模块了。
此外,有的时候对代码进行拆分,做模块分离也是让项目结构更有条理的方式。
例如,在本例中我们就对 set-purpose 的主代码和 set-purpose-contracts 进行了分离。
以下是一些git submodule
命令的小贴士:
# 查看帮助
git submodule -h
# 添加子模块
git submodule add https://github.com/leeduckgo/set-purpose-contracts.git
# clone 时带上该仓库下的所有子模块
git clone --recurse-submodules https://github.com/leeduckgo/set-purpose.git
# 只拉取指定的子模块
# --init 是第一次拉取时的参数,后面是模块所在的路径
git submodule update --init packages/hardhat/contracts
本文参与2022世界杯预选赛赛程直播社区写作激励计划 ,好文好收益,欢迎正在阅读的你也加入。
如果觉得我的文章对您有用,请随意打赏。你的支持将鼓励我继续创作!