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

zoukankan html css js c++ java

78、以太坊开发DAPP先前准备——2020年07月20日19:44:16
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
```
1. 安装solc，这是solidity的编译器
```
sudo npm install solc@0.4.25 --save
```
1. 安装mocha，这是⼀个测试框架
```
sudo npm install mocha --save
```
1. 安装ganache-cli，这是⼀个虚拟的测试环境
```
sudo npm install ganache-cli --save -g
```
1. 安装semantic-ui-react和semantic-ui-css，这两个是react库，可以快速搭建界⾯
```
sudo npm install semantic-ui-react --save

sudo npm install semantic-ui-css --save
```
1. 安装truffle-hdwallet-provider，⽤这个包来部署到Ropsten或者主⽹上，注意，安装0.0.3版本
```
sudo npm install truffle-hdwallet-provider@0.0.3 --save
```
1. 安装ipfs-api，这是ipfs的库，⽤来做存储的，我们在后期要使⽤
```
sudo npm install ipfs-api --save
```
5.3 将projectname⽂件夹复制三份==

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

6、truffle框架阶段环境
1. ###6.1 安装truffle
```
sudo npm install truffle -g
```
1. ###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
查看全文

相关阅读:
react-native window下创建Hello（解决创建一路的坑）
vue2.0 监听滚动锚点定位
 vue-awesome-swiper 轮播图使用
 vue和react区别
 vuex 管理状态
 vue 解决axios 跨域问题
 判断一个对象是否为空？ js
微信小程序中的自定义组件(components)
深入理解ES6箭头函数中的this
vue中组件的data为什么是一个函数

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

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

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

1、以太坊gas

2、Remix介绍

2.1 编写合约

2.2 编译合约

2.3 部署到哪个以太坊环境

2.4 部署合约

2.5 调⽤合约程序

2.6 调试合约

3、开发DAPP必装

3.1 确保安装了metamask

3.2 确保安装了geth

3.3 确保安装了node

3.4 remixd(可选)

3.5 EthereumWallet钱包（可选）

4、nodejs环境设置

4.1 安装node插件

4.2 安装模块

5、nodejs包安装

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

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

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

6、truffle框架阶段环境

6.3 创建内置⼯程项⽬

END