溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

怎么從零開始搭建一個Truffle框架的DAPP應(yīng)用

發(fā)布時間：2021-12-10 18:49:50 來源：億速云 閱讀：143 作者：柒染 欄目：互聯(lián)網(wǎng)科技

這篇文章將為大家詳細講解有關(guān)怎么從零開始搭建一個Truffle框架的DAPP應(yīng)用，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。

需求描述

我們要實現(xiàn)一個用戶姓名和年紀的輸入和呈現(xiàn)頁面，能更新智能合約上的用戶名和年齡。重新輸入用戶名和年紀，點擊按鈕可更新智能合約的這2個變量信息。

操作步驟

3.1 創(chuàng)建目錄，下載框架

首先創(chuàng)建好目錄，下載寵物商店的代碼框架。

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 創(chuàng)建智能合約代碼

新建一個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 增加合約相關(guān)的部署和測試代碼

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", "設(shè)置名字出錯");

     Assert.equal(age, 10, "設(shè)置年齡出錯");

   }

}

3）修改配置文件

因為默認ganache-cli的端口為8545，所以需要修改truffle.js的端口號由7545 變?yōu)?545。

module.exports = {

  // See <http://truffleframework.com/docs/advanced/configuration>

  // 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">

        <h2> First Truffle DApp Demo</h2>

        <h3 id="info"></h3>

        <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的代碼，完成智能合約的執(zhí)行和調(diào)用作用。

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 是輕量級的，僅適用于開發(fā) 的 node 服務(wù)器， 它僅支持 web app。 它能夠為你打開瀏覽器, 當(dāng)你的html或是JavaScript文件變化時，它會識別到并自動幫你刷新瀏覽器, 還能使用套接字自動注入變化的CSS, 當(dāng)路由沒有被找到時，它將自動后退頁面。

參考：如何在WINDOWS環(huán)境下搭建以太坊開發(fā)環(huán)境（https://www.jianshu.com/p/683ea7d62a39），完成MetaMask和liteServer的安裝。

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

成功安裝的輸出結(jié)果如下：

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

可以看到頁面輸出信息。

怎么從零開始搭建一個Truffle框架的DAPP應(yīng)用

4）更新姓名和年齡

輸入框輸入姓名和年齡：王登輝，18 ，點擊更新按鈕，會彈出MEATMASK的交易提示，確認交易。

怎么從零開始搭建一個Truffle框架的DAPP應(yīng)用

確認交易后，姓名和年齡信息會更新。

怎么從零開始搭建一個Truffle框架的DAPP應(yīng)用

關(guān)于怎么從零開始搭建一個Truffle框架的DAPP應(yīng)用就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

向AI問一下細節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手