通过本教程，将学会：
如何从零开始创建一个智能合约
通过本教程，将学会：
如何从零开始创建一个智能合约
如何在以太坊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包
$ npm init -y
//安装需要的模块，包括：webpack，react，babel，css以、json以及以太坊前端工具web3，这些也是开发以太坊前端应用的基本工具。注意：不要安装1.0.0的beta版
$ npm install -D webpack react react-dom babel-core babel-loader babel-preset-react babel-preset-env css-loader style-loader json-loader [email protected]
//安装http-server服务，以便通过localhost:3030端口访问，需要全局安装
npm i -g http-server
//安装babel-loader的预处理模块
npm i -D babel-preset-stage-2
npm i -D babel-preset-es2015
2- 配置webpack
在目录下，新建文件webpack.config.js，这是打包配置文件，输入以下代码：
constpath =require('path')
module.exports = {
mode:'development',//3.0版本后必须增加，生产环境是换成 production；之前webpack版本，不要使用mode
entry: path.join(__dirname,'src/js','index.js'),// 所有前端代码在 src/js/index.js 中
output: {
path: path.join(__dirname,'dist'),
filename:'build.js'// 最终程序文件在 dist/build.js
},
module: {
rules: [{// webpack 3.0版本后，使用rules；之前版本用 loaders
test:/\.css$/,// 在 react 中加载 css
use: ['style-loader','css-loader'],// 加载 css 时使用的工具
include:/src/
}, {
test:/\.jsx?$/,// 加载 jsx 文件，jsx 是javascript的一种糖果文件
loader:'babel-loader',// 加载器
exclude:/node_modules/,
query: {
presets: ['es2015','react','stage-2']
}
}, {
test:/\.json$/,// json 文件加载
exclude:/node_modules/,
loader:'json-loader'
}]
}
}
3- 创建目录
然后，创建如下目录：
目录：src/js，并在该目录下创建index.js文件
目录：src/css，并在该目录下创建index.css文件
目录：build，并在该目录下创建index.html文件
最终的目录结构为：
contracts/
-- Migrations.sol
migrations/
node_modules/
test/
src/
-- css/index.css
-- js/index.js
build/
-- index.html
package.json
truffle-config.js
truffle.js
webpack.config.js
4- 初始化代码
将以下代码粘贴至：build/index.html文件中：
以太坊开发 案例二：猜数游戏
以上代码中，设定了id为root的
另外，webpack生成的编译文件，放在build.js中。