通过本教程,将学会:
-
如何从零开始创建一个智能合约
-
通过本教程,将学会:
-
如何从零开始创建一个智能合约
-
如何在以太坊Ropsten测试网络上部署一个智能合约
-
如何使用Remix调试工具部署并调试Solidity智能合约
-
如何创建一个前端Dapp应用,并用webpack打包
-
如何将Dapp与已部署好的智能合约连接
-
如何在IPFS网络上部署Dapp应用
-
该Dapp完成后,在浏览器中运行,并结合Metamask钱包使用。
-
学习本教程,需要掌握以下技术和工具:
-
区块链:将在以太坊测试网络Ropsten上运行
-
存储:将在分布式存储IPFS网络上永远保存该应用
-
前端:使用React开发,webpack打包
-
智能合约语言:使用Solidity 0.4.11
-
智能合约调试与部署:使用在线Remix
-
前端智能合约连接:使用web3.js
-
智能合约开发框架:使用Truffle编译、测试并部署智能合约(辅助)
-
开发环境:Nodejs最新版
-
钱包:Metamask浏览器钱包
该Dapp完成后,在浏览器中运行,并结合Metamask钱包使用。
1-安装开发环境和需要的模块
确保系统内已经安装了Nodejs
创建一个新的目录:casino-ethereum,然后执行:
//安装truffle,并加入到devDependencies (-D) and globally (-g)$ npm install -D -g truffle //启动truffle,下载truffle框架$ truffle init//生成package.json-loader web3@0.20.0//安装http-server服务,以便通过localhost:3030端口访问,需要全局安装npm i -g http-server//安装babel-loader的预处理模块npm i -D babel-preset-stage-2npm i -D babel-preset-es2015
2- 配置webpack
在目录下,新建文件webpack.config.js,这是打包配置文件,输入以下代码:
const path = require('path')module.exports = {json-loader' }]
}
}
3- 创建目录
然后,创建如下目录:
-
目录:src/js文件
-
目录:src/css,并在该目录下创建index.css文件
-
目录:build,并在该目录下创建index.html文件
最终的目录结构为:
contracts/-- Migrations.solmigrations/
node_modules/
test/
src/-- css/index.css-- js
4- 初始化代码
将以下代码粘贴至:build/index.html文件中:
html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>以太坊开发 案例二:猜数游戏title>head><body> <div id="root">div> <script src="build.js">script>body>html>
以上代码中,设定了id为root的
,用于插入React生成的代码。
另外,webpack生成的编译文件,放在build.js中。
