基础开发环境
本教程是技术大牛 luofei614 的DApp开发学习笔记,编成教程分享给开发者。

1、用remix部署第一个合约

remix是一个以太坊官方的在线合约编辑器。 地址: https://remix.ethereum.org/
以太坊编写智能合约的语言一般是用solidity。
我们动手自己实现一个水龙头的合约,调用合约的withdraw方法可以向自己账号充币
在contracts文件夹下新建Faucet.sol文件
代码如下:
// SPDX-License-Identifier: MIT
pragma solidity ^0.4.5;
contract Faucet{
function withdraw(uint withdraw_amont) public {
require(withdraw_amont<0.1 ether);
msg.sender.transfer(withdraw_amont);
}
function() public payable{}
}
图片
点击
按钮进入编译界面。
图片
1处是选择编译器版本, solidity语言有很多版本,而且更新很快,新版本会出现很多不向下兼容版本的情况(以太坊官方说自己的开发文化是敢于创新也体现在此),所以这里选择编译器版本很关键, 如果你是在网上找到代码来调试,一定看看代码中声明适合什么版本的,这里编译器选择到对应的版本。
2处点击即可开始编译
3处可以复制编译好的bytecode和ABI, bytecode就是在创建合约时需要像以太坊传递的参数data中的内容, ABI是向机器指令层面编码和解密传送数据的主要方式, ABI有点类似类的反射,通过ABI知道合约有哪些方法和传参。
点击
按钮进入部署合约界面
图片
1处选择编译环境, JavascriptVM 是Remix自带的虚拟机环境,用这个环境可以不用连接钱包就可以调试。 injected Web3 可以连接MetaMask钱包进行调试。 Web3 Provider是连接本地的Ganache测试环境。
点击Deploy按钮进行部署
2处是部署完成后返回的合约地址 ,点开合约地址可以调试合约的函数调用。 (PS:我们也可以在At Address处输入已知的合约地址,调试合约)
我们可以看见因为合约定义了withdraw函数, 所以点开合约地址后下面会有withdraw的调用的地方。
在withdraw旁边输入框输入数字,点击 withdraw按钮可以调试 withdraw函数。 此时调用withdraw会失败,因为这个合约上没有余额
增加余额的方式:
1,给合约地址充币
可以在remix编辑器控制台命令行输入:
web3.eth.sendTransaction({from:"账号地址",to:"合约地址",value:'1000000000000000000'});
上面命令为打1ETH到合约地址。
2,可以在部署合约时输入Value的值(PS:这需要合约的构造函数声明payable才可以接受支付,上面示例代码还没有支持, 后面的演示示例中演示怎么支持payable)

2、Ganache本地区块链测试网络安装

https://www.trufflesuite.com/ganache 在这里下载安装。
Ganache可视化界面用的非常方便。他是本地的以太坊区块链测试环境, 会自动建立十个账号,并每个账号有100ETH,供我们调试程序。 可以在本地测试链上部署合约。 注意每次Ganache重启后会恢复初始状态,合约需要重新部署, 反复的部署合约需要管理起来, 所以下面我们介绍truffle工具管理合约。

3、安装truffle

安装:
npm install -g truffle
初始化truffle项目:
truffle init
目录结构:
├── contracts //存放合约
│ └── Migrations.sol
├── migrations //存放迁移文件
│ └── 1_initial_migration.js
├── test //存放测试脚本
└── truffle-config.js //配置文件
编译合约:
truffle compile
部署合约:
truflle migrate
进入命令行:
truffle console
在有truffle配置文件的项目中运行这个命令

4、用truffle部署合约

contracts目录下建立合约, 我们还是拿水龙头合约来测试。 建立文件名为:Faucet.sol
代码:
// SPDX-License-Identifier: MIT
pragma solidity ^0.4.5;
contract Faucet{
constructor() public payable {}
function withdraw(uint withdraw_amont) public {
require(withdraw_amont<0.1 ether);
msg.sender.transfer(withdraw_amont);
}
function() public payable{}
truffle 支持的编译器的版本是 0.5.16 , 上面合约是0.4.5版本的, 需要编译器版本可以在 truffle-config.js 配置文件中配置项compilers->solc->version 进行配置,修改为0.4.26。
上面代码增加了contructor为payable属性,主要是让等会创建合约时就可以打以太坊。
在migration文件中建立迁移文件: 2_Faucet.js
const Faucet = artifacts.require("Faucet");
module.exports = function (deployer) {
deployer.deploy(Faucet);
};
1_initial_migration.js 是第一个初始化合约, 这个合约的作用是记录了迁移到哪步了,避免重复迁移。migration合约巧妙的把区块链环境当作了数据库。
编译:
truffle compile
编译生成的文件叫作artifacts是json格式文件, 会生成在build/contracts 文件夹下, 生成的json文件会包含编译的betycode,abi,以及在部署后网络合约地址也在生成的json中包含
部署:
truflle migrate
默认会部署到Ganache测试网络, Ganache默认会创建10个有私钥的账号, truflle能读取到Ganacache的私钥,默认会用第一个账户进行部署。
更改部署时的账户并向合约充值: 在2_Faucet.js文件代码修改如下:
const Faucet = artifacts.require("Faucet");
module.exports = function (deployer,network,accounts) {
deployer.deploy(Faucet,{from:accounts[1],value:web3.utils.toWei('1', 'ether')});
};
或者代码写为:
const Faucet = artifacts.require("Faucet");
module.exports = function (deployer,network,accounts) {
deployer.deploy(Faucet).then(function(instance){
//先部署,部署成功后充值
web3.eth.sendTransaction({from:accounts[1],to:instance.address,value:web3.utils.toWei('1', 'ether')});
});
};
重新部署:
truffle migrate --reset
用truflle console命令行控制台也给合约账户充值:
truffle console
>let accounts=await web3.eth.getAccounts()
>let instance=await Faucet.deployed()
>web3.eth.sendTransaction({from:accounts[1],to:instance.address,value:web3.utils.toWei('1', 'ether')})

5、用VUE开发水龙头合约界面

安装vue命令行
npm install -g @vue/cli
用vue命令行创建一个应用
vue create myapp
安装依赖
cd myapp
yarn add web3
yarn add @truffle/contract
复制上面合约编译生成的artifacts文件Faucet.json 到 Vue项目src/components/文件夹下。
编辑HelloWorld.vue文件,在默认的界面上增加一个点击按钮
<button @click="click">水龙头</button>
在VUM的javascript代码部分使用如下代码
<script>
import Web3 from "web3";
import contract from "@truffle/contract";
import FaucetJson from "./Faucet.json";
import { BigNumber } from '@ethersproject/bignumber';
export default {
data(){
return {
web3:false,
contract_instance:false,
accounts:[]
}
},
async created(){
//初始化web3
// Modern dapp browsers...
let web3Provider ;
if (window.ethereum) {
web3Provider = window.ethereum;
try {
// Request account access
await window.ethereum.enable();
} catch (error) {
// User denied account access...
console.error("User denied account access")
}
}
// Legacy dapp browsers...
else if (window.web3) {
web3Provider = window.web3.currentProvider;
}
// If no injected web3 instance is detected, fall back to Ganache
else {
web3Provider = new Web3.providers.HttpProvider('http://localhost:7545');
}
this.web3 = new Web3(web3Provider);
//初始化合约
const FaucetContract=contract(FaucetJson);
FaucetContract.setProvider(web3Provider);
this.contract_instance=await FaucetContract.deployed();
this.accounts=await this.web3.eth.getAccounts();
},
methods:{
click(){
//调用合约的withdraw函数 this.contract_instance.withdraw(this.web3.utils.toWei('1','ether'),{from:this.accounts[0]});
}
},
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
JS代码中一般调用的步骤是:初始化web3实例-> 初始化合约实例->调用合约
在调用withdraw,不用将值做BigNumber的转换, 因为truflle-contract 底层会做BigNumber转换
运行环境:
yarn serve
这时候在浏览器点击按钮可以试用水龙头功能。
注意,如果出现报错: Error: the tx doesn't have the correct nonce. account has nonce of: 14 tx has nonce of: 0 , 是钱包的问题,不是代码的问题。 关闭浏览器重启一下MetaMask钱包。

6、结合火币链开发

MetaMask添加自定义RPC,添加火币生态链测试地址:
chainid 256
区块浏览:https://scan-testnet.hecochain.com/home/index (PS: 火币生态的浏览器地址可以清晰看到合约的源码,这里是学习合约的一个好地方)
图片
到水龙头下去领币:
火币链是基于EOS的,出块速度更快,也兼用以太坊的EVM,部署合约的操作步骤和以太坊没有区别。
  • truffle配置火币链生态链
在truffle项目中安装依赖
yarn add @truffle/[email protected]
然后编辑配置文件truffle-config.js
去掉下面几行注释
const HDWalletProvider = require('@truffle/hdwallet-provider');
const fs = require('fs');
const mnemonic = fs.readFileSync(".secret").toString().trim();
在.secret 文件中添加账号的私钥, 私钥可以从metamask的账号详情导出。
在 networks下添加:
hecotest: {
provider: () => new HDWalletProvider(mnemonic, `https://http-testnet.hecochain.com`),
network_id: 256
},
hecomain: {
provider: () => new HDWalletProvider(mnemonic, "https://http-mainnet.hecochain.com"),
network_id: 128
}
部署合约时指定网络名称:
truffle migrate --network=hecotest
hdwallet-provider一定要安装1.0.18版本的,不然会有报错:invalid sender , 可能是新版本用法不一样, truffle配置文件中的实例代码是老版本用户。