024-2250-3777

guess电竞苹果-手机app客户端软件

产品展示

PRODUCT

联系我们 / Contact us

以太坊DApp开发的入门示例

发布时间:2019-05-22 15:46:39 来源:guess电竞苹果-手机app客户端软件点击:25

  ubuntu 16.04, 64位

  还需要安装以太坊相关的环境:

  nodejs

  truffle

  solidity

  testrpc

  可以参考我之前的一篇文章:

  http://blog.csdn.net/pony_maggie/article/details/79531534

  另外,本篇还会用到webpack,安装教程网上也有很多。这部分如果不熟悉的话请自行查阅学习下。需要注意的是本篇我用的webpack版本是3.x,本文写作时webpack4.x已经发布。4.x改动还是比较大,建议大家使用3.x的版本运行本文中的代码示例。

  首先在用户目录下新建conference目录,进入目录执行truffle init,该命令会建立如下的子目录和文件:

  contracts/: 智能合约存放的目录,默认情况下已经帮你创建 Migrations.sol合约。

  migrations/: 存放部署脚本

  test/: 存放测试脚本

  truffle.js: truffle的配置文件

  修改truffle.js文件,改成如下:

  这里是设置我们稍后要部署智能合约的位置, 否则会报网络错误。

  开启一个终端,输入testrpc运行测试节点。testrpc是一个完整的在内存中的区块链测试环境,启动 testrpc 经后,会默认创建10个帐号,Available Accounts是帐号列表,Private Keys是相对应的帐号密钥。

  进入contracts目录,这里是存放合约代码的地方。我们可以使用sublime等工具编写测试合必发365约代码。我这里只贴出部分代码,文章最后会给出完整源码的地址。

  合约内容很简单,是一个针对会议的智能合约,通过它参会者可以买票,组织者可以设置参会人数上限,以及退款策略。

  修改migrations下的1_initial_migration.js文件,改成如下:

  编译,

  注意看下有无报错。

  Truffle仅默认编译自上次编译后被修改过的文件,来减少不必要的编译。如果你想编译全部文件,可以使用--compile-all选项。

  然后会多出一个build目录,该目录下的文件都不要做任何的修改。

  部署,

  这个命令会执行所有migrations目录下的js文件。如果之前执行过truffle migrate命令,再次执行,只会部署新的js文件,如果没有新的js文件,不会起任何作用。如果使用--reset参数,则会重新的执行所有脚本的部署。

  测试下,在test目录新增一个conference.js测试文件,

  这里只贴出部分代码,四个测试case,运行truffle test查看测试结果。

  在conference目录下执行npm init,然后一路回车,会生成一个名为package.json的文件,编辑这个文件,在scripts部分增加两个命令,最终如下:

  package.json文件定义了这个项目所需要的各种模块,以及项目的配置信息(比如名称、版本、许可证等元数据)。npm 命令根据这个配置文件,自动下载所需的模块,也就是配置项目所需的运行和开发环境。

  然后在conference目录下新建app目录,并创建index.html文件,如下:

  然后在app目录下新建javascripts目录和styleheets目录,分别存放js脚本文件和css样式文件。真正和合约交互的就是脚本文件。

  脚本文件名为app.js,部分代码如下:

  这个代码我也不打算过多的解释,主要就是用JS加wweb3 API调用合约的函数而已。

  到这里为止,web部分基本已经准备好了,我们只需要用webpack打包部署即可。webpack打包还需要一个配置文件,名为webpack.config.js,这个文件是告诉webpack打包的规则,涉及webpack的用法,这里不做过多的解释。

  打包部署需要安装webpack和相关的组件,安装的方式有全局安装和局部安装两种。所谓的局部安装,是指组件都是安装在项目的目录下(conference/node_modules)。我这里采用的就是局部安装。根据我们项目的实际情况,需要安装以下组件,

  环境装好,可以打包了。

  没报错的话,进入build目录可以看到bundle.js和index.html两个文件,这两个就是最终打包好的网页文件。

  然后部署,

  这样相当于运行了一个小型的nodejs服务器,我们可以在浏览器输入http://localhost:8080/看看效果:

  必发888

  clipboard.png

  可以看到合约的发布地址和会议组织者地址(msg.sender)都已经成功的显示出来了,点击change按钮还可以改变quota的值。

  本文的代码我已经上传到github上。

  https://github.com/pony-maggie/conference

  参考

  https://ethfans.org/posts/101-noob-intro


必发365 必发888