导航：首页 > 互联网科技 >

SimpleChain 开发Dapp实例分析

发表于：2025-02-24 作者：千家信息网编辑

千家信息网最后更新 2025年02月24日，本篇文章给大家分享的是有关SimpleChain 开发Dapp实例分析，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。SimpleChia

千家信息网最后更新 2025年02月24日SimpleChain 开发Dapp实例分析

本篇文章给大家分享的是有关SimpleChain 开发Dapp实例分析，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

SimpleChian技术社区最近准备举办开发挑战赛，很多社区老铁都跃跃欲试想基于SimpleChain开发Dapp应用。鉴于此种情况，本期我们就来聊一下如何基于SimpleChain开发Dapp。下面是开发Dapp开发的详细过程，流程梳理如下：

环境准备

除了Mac电脑，还需要安装SimpleChain开发的相关环境。环境如下:

nodejs truffle solidity testrpc

另外，教程中还会用到webpack，安装教程网上也有很多。这部分如果不熟悉的话请自行查阅学习下。

编写智能合约

前面我们已经安装了truffle ,我们只需要在电脑的项目目录下新建conference目录，进入目录执行truffle init，就可以使用truffle这个Dapp前端框架来初始化自己的项目。执行完后建立如下的子目录和文件:

contracts/: 智能合约存放的目录，默认情况下已经帮你创建 Migrations.sol合约。 migrations/: 存放部署脚本 test/: 存放测试脚本 truffle.js: truffle的配置文件

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

module.exports = {  networks: {        development: {            host: "localhost",            port: 8545,            network_id: "*" // 匹配任何network id         }    }};

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

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

进入contracts目录，此目录是存放合约代码的地方。我们可以使用编程工具（Viscode）编写测试合约代码。我这里贴出的是投票的智能合约

pragma solidity ^0.4.2;contract Migrations {  address public owner;  uint public last_completed_migration;  modifier restricted() {    if (msg.sender == owner) _;  }  function Migrations() {    owner = msg.sender;  }  function setCompleted(uint completed) restricted {    last_completed_migration = completed;  }  function upgrade(address new_address) restricted {    Migrations upgraded = Migrations(new_address);    upgraded.setCompleted(last_completed_migration);  }}

合约内容很简单,是一个针对链上投票的策略。用户可以链上投票，保证投票的真实性和客观性。

编译部署智能合约

修改migrations下的1_initial_migration.js文件，改成如下：

//var Migrations = artifacts.require("./Migrations.sol");var Conference = artifacts.require("./Voting.sol");module.exports = function(deployer) {  //deployer.deploy(Migrations);  deployer.deploy(Conference);};

编译：

$ sudo truffle compile --compile-all

注意看下有无报错：

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

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

部署:

$ sudo truffle migrate --reset

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

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

var Conference = artifacts.require("./Voting.sol");contract('Conference', function(accounts) {  console.log("start testing");    //console.log(accounts);    var owner_account = accounts[0];  var sender_account = accounts[1];  it("Initial conference settings should match", function(done) {        Conference.new({from: owner_account}).then(        function(conference) {            conference.quota.call().then(                function(quota) {                     assert.equal(quota, 100, "Quota doesn't match!");             }).then(                function() {                     return conference.numRegistrants.call();             }).then(                function(num) {                     assert.equal(num, 0, "Registrants doesn't match!");                    return conference.organizer.call();            }).then(                function(organizer) {                     assert.equal(organizer, owner_account, "Owner doesn't match!");                    done();            }).catch(done);    }).catch(done);  });

这是一个测试用例，运行truffle test查看测试结果。

$ truffle testUsing network 'development'.start testing  Contract: Conference    ✓ Initial conference settings should match (191ms)    ✓ Should update quota (174ms)    ✓ Should let you buy a ticket (717ms)    ✓ Should issue a refund by owner only (714ms)  4 passing (2s)

编写web应用

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

{ "name": "conference", "version": "1.0.0", "description": "", "main": "truffle-config.js", "directories": { "test": "test" }, "scripts": { "test": "echo "Error: no test specified" && exit 1", "start": "webpack", "server": "webpack-dev-server --open" }, "author": "", "license": "ISC" }

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

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

  SimpleChain 投票工具        SimpleChain 投票工具
      Contract deployed at: 
  
      Organizer:   
      Quota:               
      Registrants: 0

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

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

import "../stylesheets/app.css";import {  default as Web3 } from 'web3';import {  default as contract } from 'truffle-contract';import conference_artifacts from '../../build/contracts/Conference.json'var accounts, sim;var Conference = contract(conference_artifacts);window.addEventListener('load', function() {    //alert("aaaaa");    // Checking if Web3 has been injected by the browser (Mist/MetaMask)    if (typeof web3 !== 'undefined') {        console.warn("Using web3 detected from external source. If you find that your accounts don't appear or you have 0 MetaCoin, ensure you've configured that source properly. If using MetaMask, see the following link. Feel free to delete this warning. :) http://truffleframework.com/tutorials/truffle-and-metamask")        // Use Mist/MetaMask's provider        window.web3 = new Web3(web3.currentProvider);    } else {        console.warn("No web3 detected. Falling back to http://localhost:8545. You should remove this fallback when you deploy live, as it's inherently insecure. Consider switching to Metamask for development. More info here: http://truffleframework.com/tutorials/truffle-and-metamask");        // fallback - use your fallback strategy (local node / hosted node + in-dapp id mgmt / fail)        window.web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8545"));    }    Conference.setProvider(web3.currentProvider);    App.start();    $("#changeQuota").click(function() {        var newquota = $("#confQuota").val();        App.changeQuota(newquota);    });    // Wire up the UI elements});

这里主要就是用JS加wweb3 API调用合约的函数。到这里为止，web部分基本已经准备好了，我们只需要用webpack打包部署即可。webpack打包还需要一个配置文件，名为webpack.config.js，这个文件是告诉webpack打包的规则，涉及webpack的用法，可以自己查找。

打包部署web应用

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

npm install --save-dev webpack@3.0.0npm install babel-loader --save-devnpm install babel-core --save-devnpm install html-loader --save-devnpm install --save-dev webpack-dev-server@2.11.0npm install html-webpack-plugin --save-devnpm install truffle-contract --save-devnpm install --save-dev style-loader css-loader环境装好，可以打包了。$ sudo npm run start> conference@1.0.0 start /home/pony/ethereum/conference> webpackHash: ec8b764f75c05b477d9dVersion: webpack 3.0.0Time: 2686ms       Asset       Size  Chunks                    Chunk Names   bundle.js    3.36 MB       0  [emitted]  [big]  main./index.html  740 bytes          [emitted]           [10] (webpack)/buildin/global.js 509 bytes {0} [built]  [16] (webpack)/buildin/module.js 517 bytes {0} [built]  [47] ./app/javascripts/app.js 3.85 kB {0} [built]  [48] ./app/stylesheets/app.css 1.08 kB {0} [built]  [49] ./node_modules/css-loader!./app/stylesheets/app.css 413 bytes {0} [built] [175] ./build/contracts/Conference.json 71.1 kB {0} [built]    + 170 hidden modulesChild html-webpack-plugin for "index.html":       [0] ./node_modules/html-webpack-plugin/lib/loader.js!./app/index.html 706 bytes {0} [built]

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

$ sudo npm run server> conference@1.0.0 server /home/pony/ethereum/conference> webpack-dev-server --openProject is running at http://localhost:8080/webpack output is served from /Content not from webpack is served from ./build404s will fallback to /index.htmlHash: ecae3662137376f80de0Version: webpack 3.0.0

这样相当于运行了一个小型的nodejs服务器，我们可以在浏览器输入 http://localhost:8080/ 在页面上看到效果。clipboard.png 可以看到合约的发布地址和会议组织者地址(msg.sender)都已经成功的显示出来了，点击change按钮还可以改变quota的值。

以上就是SimpleChain 开发Dapp实例分析，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注行业资讯频道。

很赞哦！