找回密码
 立即注册

QQ登录

只需一步,快速开始

门户 百科 查看内容
  • QQ空间
  • 回复
  • 收藏

如何从零开始搭建一个Truffle框架的DAPP应用

admin 2018-11-13


1

摘要


介绍了如何获取宠物商店的TRUFLLE框架代码,并完成部署的过程。


但是这个是已经成熟的代码框架,一般用户要开发自己的项目。那如何借用宠物商店成熟框架完成自有DAPP的搭建呢?我们以tiny熊老师的一个姓名/年龄智能合约用例来呈现方法。


2

需求描述


我们要实现一个用户姓名和年纪的输入和呈现页面,能更新智能合约上的用户名和年龄。重新输入用户名和年纪,点击按钮可更新智能合约的这2个变量信息。


3

操作步骤


3.1 创建目录,下载框架


首先创建好目录,下载宠物商店的代码框架。


duncanwang@ubuntu:~/work$ mkdir name-age

duncanwang@ubuntu:~/work$ cd name-age

duncanwang@ubuntu:~/work/name-age$ truffle unbox pet-shop

Downloading...

Unpacking...

Setting up...

Unbox successful. Sweet!


Commands:


  Compile:        truffle compile

  Migrate:        truffle migrate

  Test contracts: truffle test

  Run dev server: npm run

 devduncanwang@ubuntu:~/work/name-age$


3.2 创建智能合约代码


新建一个InfoContract.sol智能合约文件,并把它更新到./contracts目录下。


pragma solidity ^0.4.24;


contract InfoContract {

    string name;

    uint age;


    event Instructor(string name, uint age);


    function setInfo(string _name, uint _age) public {

        name = _name;

        age = _age;

        emit Instructor(name, age);

    } 


   function getInfo() public view returns(string, uint) {

        return (name, age);

    }

}


3.3 增加合约相关的部署和测试代码


1) 增加合约部署测试


文件2_info_contract.js到./migrations目录,代码如下,表示contract InfoContract合约部署。


var MyContract = artifacts.require("./InfoContract.sol");


module.exports = function(deployer) {

  // deployment steps

  deployer.deploy(MyContract);

};


2) 增加测试文件


pragma solidity ^0.4.24;


import "truffle/Assert.sol";

import "truffle/DeployedAddresses.sol";

import "../contracts/InfoContract.sol";


contract TestInfoContract {

   InfoContract info = InfoContract(DeployedAddresses.InfoContract());

   string name;

   uint age;


   function testInfo() {

     info.setInfo("ABC", 10);


     (name, age) = info.getInfo();


     Assert.equal(name, "ABC", "设置名字出错");

     Assert.equal(age, 10, "设置年龄出错");

   }

}


3)修改配置文件


因为默认ganache-cli的端口为8545,所以需要修改truffle.js的端口号由7545 变为8545。


module.exports = {

  // See

  // for more about customizing your Truffle configuration!

  networks: {

    development: {

      host: "127.0.0.1",

      port: 8545,

      network_id: "*" // Match any network id

    }

  }

};


否则测试时会有找不到客户端提示。


duncanwang@ubuntu:~/work/name-age$ truffle test

Could not connect to your ETHereum client. Please check that your Ethereum client:

    - is running

    - is accepting RPC connections (i.e., "--rpc" option is used in geth)

    - is accessible over the network

    - is properly configured in your Truffle configuration file (truffle.js)


3.4 验收测试智能合约


1)参考宠物商店的文章代码在一个窗口启动一个ganache-cli 钱包


duncanwang@ubuntu:~/work/name-age$ cd ..
duncanwang@ubuntu:~/work$ ganache-cli >>trace.log


2)编译智能合约


然后启动另外一个窗口命令行,输入一下命令。


duncanwang@ubuntu:~/work/name-age$ truffle compile

Compiling ./contracts/InfoContract.sol...

Compiling ./contracts/Migrations.sol...

Writing artifacts to ./build/contracts


3)智能合约验收命令。


测试成功的提示说明:


duncanwang@ubuntu:~/work/name-age$ truffle test

Using network 'development'.


Compiling ./contracts/InfoContract.sol...

Compiling ./test/TestInfoContract.sol...

Compiling truffle/Assert.sol...

Compiling truffle/DeployedAddresses.sol...


Compilation warnings encountered:


/home/duncanwang/work/name-age/test/TestInfoContract.sol:12:4: Warning: No visibility specified. Defaulting to "public".

    function testInfo() {

   ^ (Relevant source part starts here and spans across multiple lines).


  TestInfoContract

    ✓ testInfo (838ms)


  1 passing (5s)


3.5 完成前端页面


完成以下2个文件的修改更新和上传。


1) index.html

把宠物商店的index.html的代码删除,替换为本文需要的框架代码。


    <!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

   <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>First Truffle DApp Demo</title>

    <link rel="stylesheet" type="text/css" href="main.css">


</head>

<body>

    <div class="container">

        <h1> First Truffle DApp Demo</h1>


        <h2 id="info"></h2>

        <img id="loader" src="https://loading.io/spinners/double-ring/lg.double-ring-spinner.gif">


        <label for="name" class="col-lg-2 control-label">姓名:</label>

        <input id="name" type="text">


        <label for="name" class="col-lg-2 control-label">年龄:</label>

        <input id="age" type="text">


        <button id="button">更新</button>


    </div>


    <script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>

    <script src="js/web3.min.js"></script>

    <script src="js/truffle-contract.js"></script>

    <script src="js/app.js"></script>

    


2) app.js


然后修改app.js的代码,完成智能合约的执行和调用作用。


App = {

  web3Provider: null,

  contracts: {}, 


 init: function() {

    return App.initWeb3(); 

 },


/*加载web3*/

  initWeb3: function() {

    if (typeof web3 !== 'undefined') {

         App.web3Provider = web3.currentProvider

         web3 = new Web3(App.web3Provider);

     } else {

         App.web3Provider = new Web3.providers.HttpProvider("http://localhost:9545") 

        web3 = new Web3(App.web3Provider);

     }


     return App.initContract();

  },


/*初始化合约,获取合约,不需要使用at()的方式;

  显示合约的姓名和年龄信息*/

  initContract: function() {


    $.getJSON('InfoContract.json', function(data){

      App.contracts.InfoContract = TruffleContract(data); 

     App.contracts.InfoContract.setProvider(App.web3Provider);

      App.getInfo();

      App.watchChanged();

    });


    App.bindEvents();


  },  


getInfo: function() {

    App.contracts.InfoContract.deployed().then(function(instance) {

      return instance.getInfo.call();

    }).then(function(result) { 

     $("#loader").hide();

      $("#info").html(result[0]+' ('+result[1]+' years old)'); 

     console.log(result);

    }).catch(function(err) {

      console.error(err); 

   });

  },


/*点击按钮更新姓名和年龄,则需要更新到智能合约上*/

  bindEvents: function() {

    $("#button").click(function() { 

       $("#loader").show();

        App.contracts.InfoContract.deployed().then(function(instance) {

          return instance.setInfo($("#name").val(), $("#age").val(), {gas: 500000}); 

       }).then(function(result) {

          return App.getInfo();

        } ).catch(function(err) {

          console.error(err);

        }); 

     });

  }, 


 watchChanged: function() { 

   App.contracts.InfoContract.deployed().then(function(instance) { 

     var infoEvent = instance.Instructor(); 

     return infoEvent.watch(function(err, result) {

        $("#loader").hide();

        $("#info").html(result.args.name +' ('+ result.args.age +' years old)'); 

     }); 

   });

  }


  }


$(function(){  

$(window).load(function() {

      App.init();

  });

});


3.6 测试验收前端和合约交互代码


1) 部署合约


合约部署成功。


duncanwang@ubuntu:~/work/name-age$ truffle migrate

Using network 'development'.


Running migration: 1_initial_migration.js

  Deploying Migrations...

  ... 0x5b3cd41a7fa7c58361172ac797412469a10edfbe721d8d81988f19282c9cb6e4

  Migrations: 0x92b6ecd23aa98fad36926c12ec701f9aaa0933f4

Saving successful migration to network...

  ... 0x826fcd5b72b48435bf4f9941305727e52b0b7290631ba7b39f642027b1ee6947

Saving artifacts...

Running migration: 2_info_contract.js

  Deploying InfoContract...

  ... 0x9943dd7b90207bd9fd1e85524d1d0227f18a92269d73f5a2141cb71c22dda1e9

  InfoContract: 0x191391c710e1b632e40b4f2267dbc0f3bdb2bed4

Saving successful migration to network...

  ... 0x7e11f6e32585524e338e73439e4026c7c766625e5d23d56a4c90f8a11e5001ed

Saving artifacts...


2)安装并启动lite-server


1] 安装lite-server


【定义】lite-server 是轻量级的,仅适用于开发 的 node 服务器, 它仅支持 web app。 它能够为你打开浏览器, 当你的html或是JavaScript文件变化时,它会识别到并自动帮你刷新浏览器, 还能使用套接字自动注入变化的CSS, 当路由没有被找到时,它将自动后退页面。


参考:如何在WINDOWS环境下搭建以太坊开发环境(https://www.jianshu.com/p/683ea7d62a39),完成MetaMask和liteServer的安装。


duncanwang@ubuntu:~/work/name-age$ npm install lite-server --save-dev


成功安装的输出结果如下:


npm WARN pet-shop@1.0.0 No description

npm WARN pet-shop@1.0.0 No repository field.

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules/fsevents):

npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"ia32"})


+ lite-server@2.4.0

added 342 packages from 273 contributors in 56.82s


2] 在新的窗口完成lite-server的启动。


duncanwang@ubuntu:~/work/name-age$ npm run dev


> pet-shop@1.0.0 dev /home/duncanwang/work/name-age

> lite-server


** browser-sync config **

{ injectChanges: false,

  files: [ './**/*.{html,htm,css,js}' ],

  watchOptions: { ignored: 'node_modules' },

  server:

    { baseDir: [ './src', './build/contracts' ],

     middleware: [ [Function], [Function] ] } }

[Browsersync] Access URLs:

 --------------------------------------

       Local: http://localhost:3000

    External: http://10.225.18.149:3000

 --------------------------------------

          UI: http://localhost:3001

 UI External: http://localhost:3001

 --------------------------------------

[Browsersync] Serving files from: ./src

[Browsersync] Serving files from: ./build/contracts

[Browsersync] Watching files...


3)打开主页


输入lite-server提示的主页地址:http://10.225.18.149:3000


可以看到页面输出信息。



4)更新姓名和年龄

输入框输入姓名和年龄:王登辉,18 ,点击更新按钮,会弹出MEATMASK的交易提示,确认交易。



确认交易后,姓名和年龄信息会更新。



4

总结


本文仅从操作层面讲解了如何利用宠物商店的模板样例,快速重构一个含前端的DAPP页面。

原作者: 王登辉 来自: 区块链社区HiBlock
文章点评
相关文章

热门货币

柚子币EOS
柚子币EOS

EOS (Enterprise Operation System)是由 Block.one公司主导开发

恒星币XLM
恒星币XLM

恒星币(Stellar),一个由前瑞波币(Ripple)创始人Jed McCaleb

比特币BTC
比特币BTC

比特币(BitCoin)的概念最初由中本聪在2009年提出,根据中本聪的

新经币NEM
新经币NEM

新经币(New Economy Movement,缩写 NEM),是一种点对点虚拟货币

艾达币ADA
艾达币ADA

ADA,中文称为艾达币,是Cardano项目的产物,Cardano项目发起于2

交易平台

火币网
火币网

火币网成立于2013年,是中国最大的比特币(btc)、莱特币(ltc)、以

火币pro
火币pro

火币全球专业站,是火币全球旗下服务于全球专业交易者的创新数字

库币网
库币网

库币网就是以“区块链”为核心上线的数字资产交易平台。千万注册

OkCoin国际
OkCoin国际

okcoin国际站是全球着名的数字资产交易平台之一,主要面向全球用

币安Binance
币安Binance

币安交易平台是由赵长鹏(CZ)领导的一群数字资产爱好者创建而成

币圈大佬

V神:以太坊创始人
V神:以太坊创始人

萌萌的天才少年Vitalik Buterin,圈内人一般称他为V神。这个94年

中本聪:比特币创始人
中本聪:比特币创始人

中本聪,比特币创始人,谜一样的人物。2008年中本聪在互联网上一

李笑来:中国比特币首富
李笑来:中国比特币首富

李笑来,原新东方名师,中国比特币首富,著名天使投资人,比特基

老猫:硬币资本联合创始人
老猫:硬币资本联合创始人

老猫,硬币资本联合创始人,现为Bigone交易所的CEO。巴比特专栏

黄天威:比特时代创始人兼CEO
黄天威:比特时代创始人兼

黄天威,比特时代创始人兼CEO,历任腾讯产品经理,范特西副总裁,