以太坊区块链Truffle-webpack开发入门 (一) 环境配置

文章转到这里了,在这里更新后续文章

本教程使用以太坊的truffle框架在testrpc环境中模拟

系统:Mac OS (windows系统只作为参考)

1. 首先安装nodejs

 到官网下载安装即可  http://nodejs.cn/download/

安装之后在终端查看是否安装成功:

$ node -v

如顺利出现版本信息,就表示成功了(失败的可能性很小)

2.cpm使用淘宝镜像

安装nodejs中内置npm,但是国内使用不畅,需要使用淘宝镜像——cnpm

打开终端执行下方命令

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

*-g表示可以全局使用cnpm  详情查看:https://npm.taobao.org/

3.安装智能合约框架truffle

$ cnpm install -g truffle

4.安装模拟环境testrpc

$ cnpm install -g testrpc

5.至于IDE工具 建议使用Visual Studio

6.Clone项目代码

找个地方 从git上clone代码 地址:  

  项目名为:blockChain

$ git clone  https://github.com/trufflesuite/truffle-init-webpack  blockChain

clone完成之后 进入项目 通过cnpm安装一些必要的库

$ cd blockChain

$ cnpm install

7.开启模拟环境testrpc

在6的基础上继续命令操作:

$ testrpc

*开启模拟环境不一定要在6的基础上(blockChain目录)中执行,由于后面还有其他操作需要在此执行,所以就不要关闭终端或切换目录了

这个模拟环境开启之后 需要留意之后的打印信息:

成功的标志是出现:

Listening on localhost:8545

不一定是 8545 这个端口,对这个端口留意一下,后面可能会用上

8.编译(compile)和部署(deploy)合约

$ truffle compile

$ truffle deploy

编译和部署过程只要不出现Error就表示成功了

9.开启nodejs服务,用来服务前段页面的

$ npm run dev

*此处使用的是npm,也可以使用cnpm  此nodejs服务也可以不用,如果只开发合约部分,可以使用truffle的console调试,truffle的console后续会讲到

开启成功之后打印信息中会有内容

Project is running at http://localhost:8080/

在浏览器中访问 http://localhost:8080/

如果打开的页面跟下方图片差不多(我做了中文便于观察) 在“你当前拥有9726以太币”这个位置你的应该是: you have 10000 META


以太坊区块链Truffle-webpack开发入门 (一) 环境配置_第1张图片

如果1000没有显示出来,那你应该会碰到一个弹窗:


以太坊区块链Truffle-webpack开发入门 (一) 环境配置_第2张图片

如果有这个弹窗说明没有正确配置,解决弹窗:

打开项目,打开下图中的文件:

以太坊区块链Truffle-webpack开发入门 (一) 环境配置_第3张图片

打开之后内容如下:

以太坊区块链Truffle-webpack开发入门 (一) 环境配置_第4张图片

找到这行代码:

window.web3 = new Web3(new Web3.providers.HttpProvider

检查这里面的地址 :http://127.0.0.1:8545 和第7步打印的地址和端口是否相同

在第7步也提醒了诸位要注意这个端口 其实上面贴图代码里的端口是9545,这个截图是我改正之后的,在你的代码的这个位置把端口改为和第七步的端口一致就OK了

*localhost 就是127.0.0.1   localhost:8545和127.0.0.1:8545一样的效果

修改保存之后重复8,9步骤,再次打开网页输入第9步中打印的网络地址:localhost:8080

如果还出现弹窗,检查app.js改动后是否保存

成功的标志就是没有弹窗,页面信息中有 “you have 10000 META!”


文章转到这里了,在这里更新后续文章

你可能感兴趣的:(以太坊区块链Truffle-webpack开发入门 (一) 环境配置)