78、以太坊开发DAPP先前准备——2020年07月20日19:44:16

1、以太坊gas

2、Remix介绍

它是官⽅出的⼀个在线版的编译器（也有本地版），我们通过⼀个完整的合约编写测试流程来介绍这个编译器，⽀持功能：

2.1 编写合约

pragma solidity ^0.4.24;

contract Inbox{

string public message;

function Inbox()payable {

}

function setMessage(string newMessage) public{

message = newMessage;

}

function getMessage() public constant returns(string){

return message;

}

}

2.2 编译合约

remix编辑器中⾃动集成了solidity的编译器，所以可以⾃动编译我们的合约代码

原理

使⽤remix，由⾼级语⾔变成机器语⾔

solidity ---> bytecode(机器语⾔，区块链系统读取)
solidity ---> ABI (application binary interface)(⽅便程序员调⽤)

图示

bytecode

类似于如下格式，先不⽤管

6080604052610410806100136000396000f300608060405260043610610057576000357c0100000000000000000000000000000000000000000000000000000000900463ffffffff168063368b87721461005c578063ce6d41de146100c5578063e21f37ce14610155575b600080fd5b34801561006857600080fd5b506100c3600480360381019080803590602001908201803590602001908080601f01602080910402602001604051908101604052809392919081815260200183838082843782019150505050505091929192905050506101e5565b005b3480156100d157600080fd5b506100da6101ff565b6040518080602001828103825283818151815260200191508051906020019080838360005b8381101561011a5780820151818401526020810190506100ff565b50505050905090810190601f1680156101475780820380516001836020036101000a031916815260200191505b509250505060405180910390f35b34801561016157600080fd5b5061016a6102a1565b6040518080602001828103825283818151815260200191508051906020019080838360005b838110156101aa57808201518184015260208101905061018f565b50505050905090810190601f1680156101d75780820380516001836020036101000a031916815260200191505b509250505060405180910390f35b80600090805190602001906101fb92919061033f565b5050565b606060008054600181600116156101000203166002900480601f0160208091040260200160405190810160405280929190818152602001828054600181600116156101000203166002900480156102975780601f1061026c57610100808354040283529160200191610297565b820191906000526020600020905b81548152906001019060200180831161027a57829003601f168201915b5050505050905090565b60008054600181600116156101000203166002900480601f0160208091040260200160405190810160405280929190818152602001828054600181600116156101000203166002900480156103375780601f1061030c57610100808354040283529160200191610337565b820191906000526020600020905b81548152906001019060200180831161031a57829003601f168201915b505050505081565b828054600181600116156101000203166002900490600052602060002090601f016020900481019282601f1061038057805160ff19168380011785556103ae565b828001600101855582156103ae579182015b828111156103ad578251825591602001919060010190610392565b5b5090506103bb91906103bf565b5090565b6103e191905b808211156103dd5760008160009055506001016103c5565b5090565b905600a165627a7a723058201486092ea8103d4816d5aa6177b30372d94ec850544312021159c20f3b7a505b0029

(application binary interface，应⽤⼆进制接⼝)

json格式的描述⽂件，不⽤管

[

{

"constant": false,

"inputs": [

{

"name": "newMessage",

"type": "string"

}
],

"name": "setMessage",

"outputs": [],

"payable": false,

"stateMutability": "nonpayable",

"type": "function"

},

{

"constant": true,

"inputs": [],

"name": "getMessage",

"outputs": [

{

"name": "",

"type": "string"

}

],

"payable": false,

"stateMutability": "view",

"type": "function"

},

{

"constant": true,

"inputs": [],

"name": "message",

"outputs": [

{

"name": "",

"type": "string"

}

],

"payable": false,

"stateMutability": "view",

"type": "function"

},

{

"inputs": [],

"payable": true,

"stateMutability": "payable",

"type": "constructor"

}

]

2.3 部署到哪个以太坊环境

虚拟环境（今天只看这个）

vm
account 虚拟账户5个，每个账户默认100eth。
没挖矿，直接返回结果，便于开发测试

⽹⻚环境

injected web3
与metamask结合紧密

⽤户⾃定义以太坊环境

web3 provider
链接⾃⼰本地启动的区块链环境（truffle，ganache，geth搭建的私有链等）

2.4 部署合约

交易详情

部署合约也是⼀笔交易，只不过不⽤填写

查看浏览器

部署合约成功返回很多数据，其中包括合约地址

这个地址与普通的地址完全相同，是可以向这个地址转账的，合约程序⾥⾯可以⾃定代码如何处理这笔钱

0x27baf63ea560973e9f8f333a39239967f96c5703

2.5 调⽤合约程序

xx.js---> ABI ---> bytecode

我们使⽤⼿动调⽤，调⽤合约的操作分为两种类型：

send

所有改变区块链数据状态的叫做是send操作，相当于发起⼀笔交易，特点是花钱，⼤约10s~30s(矿⼯确认)返回结果。

浏览器帮我们做了可视化展示，在交易中实际传递消息为，点击查看收⼊为可进⾏切换，图示如下：

其中：

0x368b8772是这个函数的哈希
a6886xxxx64是HelloWorld的16进制形式

call

所有读取区块链合约数据的操作成为call操作，它的特点是迅速返回，⽆需花钱

当然，也可以使⽤send来进⾏读取操作，但是那样估计是喝假酒了。

2.6 调试合约

仅vm模式下可⽤

在输出界⾯直接点击 debug 或输⼊交易id点击三⻆号运⾏

合约太简单，没法调试（后⾯再补充）

3、开发DAPP必装

3.1 确保安装了metamask

3.2 确保安装了geth

go语⾔实现的以太坊客户端，是⽬前最流⾏的以太坊客户端，我们后⾯会⽤它创建私有链下载链接：https://ethfans.org/wikis/Ethereum-Geth-Mirror 执⾏如下命令，确保geth安装成功。

3.3 确保安装了node

安装node之后会⾃动安装npm命令，使⽤npm可以⾮常快捷的安装各种⼯具包 node下载链接：https://nodejs.org/zh-cn/，请下载⻓期⽀持版的node，如下图

安装之后，执⾏如下命令，确保安装成功

node --version

v10.11.0

3.4 remixd(可选)

请执⾏如下命令，安装⼀个可以挂载本地⽬录到remix编辑器的服务。

这个命令最新版本不好安装，是可选项，我们只在学solidity的时候会使⽤，后⾯完全⽤不到。

3.5 EthereumWallet钱包（可选）

注意，别装Mist，装Ethereum Wallet，两个功能⼀致，Mist经常链接不上

这是官⽅出的以太坊钱包，可以⽤来体验以太坊操作，但是我们开发中不使⽤，会做简单介绍

下载后请连接ropsten⽹络，不要链接到主⽹，否则账本占⽤空间极⼤

国内下载链接：https://ethfans.org/wikis/Ethereum-Wallet-Mirror

4、nodejs环境设置

4.1 安装node插件

在goland中安装node模块，进⼊设置⽬录，按照图示安装

4.2 安装模块

第⼀步：设置为ES6

第⼆步：下载NodeCore模块

第三步：配置Nodejs CoreModules模块，点击OK

注意下图⽂字，如果左边的Node.js and NPM不存在，那说明本章第⼀步node插件没有安装成功，请重新安装。

第四步：重启goland，然后创建⼀个⼯程，添加⽂件test.js

输⼊测试代码：let a= require('fs'), 如果能够智能提示require，则表明NodeCore模块⽣效。配置完成。

5、nodejs包安装

5.1 确保安装了create-react-app命令

这个命令能够下载react空项⽬，我们基于这个项⽬进⾏编写dapp

安装命令如下：

sudo npm install create-react-app -g

然后创建⼀个空的react项⽬：

create-react-app project

请先不要对MyProjectName内容做任何修改下载成功提示如下：

补图

进⼊到projectname中，执⾏如下命令：

npm run start

如果能够正常启动，则安装成功。

5.2 确保电脑能够安装以下包

请按照如下步骤操作：

进⼊到 projectname⽬录，⽬前应该已经在这个⽬录下：(cd projectname)
安装web3，这是与以太坊合约交互的js版本库

如果⼀直安装不成功，请换⼀个⽬录下载试试（详⻅：如何安装web3⽂件）

sudo npm install web3 --save

安装solc，这是solidity的编译器

sudo npm install solc@0.4.25 --save

安装mocha，这是⼀个测试框架

sudo npm install mocha --save

安装ganache-cli，这是⼀个虚拟的测试环境

sudo npm install ganache-cli --save -g

安装semantic-ui-react和semantic-ui-css，这两个是react库，可以快速搭建界⾯

sudo npm install semantic-ui-react --save

sudo npm install semantic-ui-css --save

安装truffle-hdwallet-provider，⽤这个包来部署到Ropsten或者主⽹上，注意，安装0.0.3版本

sudo npm install truffle-hdwallet-provider@0.0.3 --save

安装ipfs-api，这是ipfs的库，⽤来做存储的，我们在后期要使⽤

sudo npm install ipfs-api --save

5.3 将projectname⽂件夹复制三份==

这个projectname⽬录已经安装了所有需要使⽤的包，这个原始的项⽬永远不要修改，复制⼏份出来，每次写新项⽬时直接使⽤副本操作。切记，否则，每次⼜要重新下载

6、truffle框架阶段环境

###6.1 安装truffle

sudo npm install truffle -g

###6.2 truffle创建空⼯程

mkdir truffleInitFolder

cd truffleInitFolder

truffle init

退出到上⼀层cd ..，这个⼯程和下⾯的⼯程是独⽴的，不要嵌套了。

6.3 创建内置⼯程项⽬

truffle集成react项⽬

mkdir truffleReact

cd truffleReact

truffle unbox react

安装成功之后，会有如下提示信息：

itcast@itcast:~/eth/truffleReact$ truffle unbox react
Downloading...
Unpacking...
Setting up...
Unbox successful. Sweet!

Commands:

Compile:truffle compile

Migrate:truffle migrate

Test contracts:truffle test

Test dapp:cd client && npm test

Run dev server:cd client && npm run start

Build for production: cd client && npm run build

整个空⼯程⼤约100M左右注意：如果下载失败，删掉truffleReact⽂件夹下所有东⻄，重新执⾏ truffle unbox react

退出到上⼀层cd ..，这个⼯程和下⾯的⼯程是独⽴的，不要嵌套了。⽬录结构如下：

itcast@itcast:~/eth/truffleReact$ ls

client contracts LICENSE migrations test truffle-config.js truffle.js

itcast@itcast:~/eth/truffleReact$

进⼊到client⽬录（cd client）

执⾏如下命令，讲web3，solc，mocha，等全部重新安装⼀遍。

sudo npm install web3 --save

sudo npm install solc@solc --save

sudo npm install mocha --save

sudo npm install ipfs-api --save

启动验证： 1. ⾸先，进⼊到truffleReact⽬录下，执⾏如下命令：

truffle compile

编译成功后会在当前⽬录下⽣成build⽬录。 1. 进⼊client⽬录，执⾏命令

npm run start

如果如下错误：

./node_modules/truffle-contract/lib/reformat.js

Module not found: Can't resolve 'bignumber.js' in '/home/itcast/eth/truffleReact/client/node_modules/truffle-co

ntract/lib'

请执⾏如下命令解决：

sudo npm i bignumber.js

重新执⾏步骤2即可，显示如下效果，则表明成功（这是因为没有启动区块链环境）

Loading Web3, accounts, and contract...

truffle集成webpack项⽬

mkdir truffleWebpack

cd truffleWebpack

truffle unbox webpack

⼤约：200M左右注意：如果下载失败，删掉truffleWebpack⽂件夹下所有东⻄，重新执⾏⽬录结构如下：

truffle unbox truffleWebpack

itcast@itcast:~/eth/truffleWebpack$

app contracts node_modules truffle.js box-img-lg.png LICENSE package.json webpack.config.js

box-img-sm.png migrations test

itcast@itcast:~/eth/truffleWebpack$

安装相关包：

sudo npm install web3 --save

sudo npm install solc --save

sudo npm install mocha --save

sudo npm install ipfs-api --save

启动验证： 1. 在truffleWebpack⽬录下执⾏命令：

truffle compile

执⾏启动命令：

npm run dev

复制http://localhost:8080到浏览器查看启动⻚⾯

END

2020年07月20日19:43:53