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，由?级语?变成机器语?

1. solidity ---> bytecode(机器语?，区块链系统读取)

2. solidity ---> ABI (application binary interface)(?便程序员调?)

• 图示

• bytecode

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

6080604052610410806100136000396000f300608060405260043610610057576000357c0100000000000000000000000000000000000000000000000000000000900463ffffffff168063368b87721461005c578063ce6d41de146100c5578063e21f37ce14610155575b600080fd5b34801561006857600080fd5b506100c3600480360381019080803590602001908201803590602001908080601f01602080910402602001604051908101604052809392919081815260200183838082843782019150505050505091929192905050506101e5565b005b3480156100d157600080fd5b506100da6101ff565b6040518080602001828103825283818151815260200191508051906020019080838360005b8381101561011a5780820151818401526020810190506100ff565b50505050905090810190601f1680156101475780820380516001836020036101000a031916815260200191505b509250505060405180910390f35b34801561016157600080fd5b5061016a6102a1565b6040518080602001828103825283818151815260200191508051906020019080838360005b838110156101aa57808201518184015260208101905061018f565b50505050905090810190601f1680156101d75780820380516001836020036101000a031916815260200191505b509250505060405180910390f35b80600090805190602001906101fb92919061033f565b5050565b606060008054600181600116156101000203166002900480601f0160208091040260200160405190810160405280929190818152602001828054600181600116156101000203166002900480156102975780601f1061026c57610100808354040283529160200191610297565b820191906000526020600020905b81548152906001019060200180831161027a57829003601f168201915b5050505050905090565b60008054600181600116156101000203166002900480601f0160208091040260200160405190810160405280929190818152602001828054600181600116156101000203166002900480156103375780601f1061030c57610100808354040283529160200191610337565b820191906000526020600020905b81548152906001019060200180831161031a57829003601f168201915b505050505081565b828054600181600116156101000203166002900490600052602060002090601f016020900481019282601f1061038057805160ff19168380011785556103ae565b828001600101855582156103ae579182015b828111156103ad578251825591602001919060010190610392565b5b5090506103bb91906103bf565b5090565b6103e191905b808211156103dd5760008160009055506001016103c5565b5090565b905600a165627a7a723058201486092ea8103d4816d5aa6177b30372d94ec850544312021159c20f3b7a505b0029

• abi

(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 部署到哪个以太坊环境

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

1. vm

2. account 虚拟账户5个，每个账户默认100eth。

3. 没挖矿，直接返回结果，便于开发测试

• ??环境

1. injected web3

2. 与metamask结合紧密

• ?户?定义以太坊环境

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

2.4 部署合约

• 交易详情

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

• 查看浏览器

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

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

0x27baf63ea560973e9f8f333a39239967f96c5703

2.5 调?合约程序

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

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

• send

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

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

其中：

1. 0x368b8772是这个函数的哈希

2. 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 确保电脑能够安装以下包

请按照如下步骤操作：

1. 进?到 projectname?录，?前应该已经在这个?录下：(cd projectname)

2. 安装web3，这是与以太坊合约交互的js版本库

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

sudo npm install web3 --save

3. 安装solc，这是solidity的编译器

sudo npm install solc@0.4.25 --save

4. 安装mocha，这是?个测试框架

sudo npm install mocha --save

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

sudo npm install ganache-cli --save -g

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

sudo npm install semantic-ui-react --save

sudo npm install semantic-ui-css --save

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

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

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

sudo npm install ipfs-api --save

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

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

6、truffle框架阶段环境

1. 6.1 安装truffle

sudo npm install truffle -g

2. 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

1. 重新执?步骤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

1. 执?启动命令：

npm run dev

1. 复制http://localhost:8080到浏览器查看启动??

END

2020年07月20日19:43:53

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

原文：https://www.cnblogs.com/oneapple/p/13347305.html