2. 程式人生 > >以太坊DApp開發:web3.js與智慧合約互動

以太坊DApp開發:web3.js與智慧合約互動

阿新 • • 發佈：2018-12-13

前言

環境準備

ubuntu 14.0.4（16.0.4）， 64位 還需要安裝以太坊相關的環境:

  • nodejs
  • truffle
  • solidity
  • testrpc

編寫智慧合約

首先在使用者目錄(home)下新建conference目錄(任意目錄都可以)，進入目錄執行truffle init，該命令會建立如下的子目錄和檔案:

  • 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目錄，這裡是存放合約程式碼的地方。我們可以使用sublime等工具編寫測試合約程式碼。我這裡只貼出部分程式碼，文章最後會給出完整原始碼的地址。

pragma solidity ^0.4.19;

contract Conference {  // can be killed, so the owner gets sent the money in the end

    address public organizer;
    mapping (address => uint) public registrantsPaid;
    uint public numRegistrants;
 

    uint public quota;

    event Deposit(address _from, uint _amount); // so you can log the event
    event Refund(address _to, uint _amount); // so you can log the event

    function Conference() {
        organizer = msg.sender;     
        quota = 100;
        numRegistrants = 0;
    }
}

...

合約內容很簡單，是一個針對會議的智慧合約，通過它參會者可以買票，組織者可以設定參會人數上限，以及退款策略。

編譯智慧合約

修改migrations下的1_initial_migration.js檔案，改成如下：

//var Migrations = artifacts.require("./Migrations.sol");
var Conference = artifacts.require("./Conference.sol");

module.exports = function(deployer) {
  //deployer.deploy(Migrations);
  deployer.deploy(Conference);
};

編譯，

sudo truffle compile --compile-all

此處編譯智慧合約可能會有警告，提示建構函式形式的改變，原因是高版本的solidity使用了 constructor作為宣告建構函式的關鍵字。

Truffle僅預設編譯自上次編譯後被修改過的檔案，來減少不必要的編譯。如果你想編譯全部檔案，可以使用–compile-all選項。

然後會多出一個build目錄，該目錄下的檔案都不要做任何的修改。

部署，

sudo truffle migrate --reset

這個命令會執行所有migrations目錄下的js檔案。如果之前執行過truffle migrate命令，再次執行，只會部署新的js檔案，如果沒有新的js檔案，不會起任何作用。如果使用–reset引數，則會重新的執行所有指令碼的部署

測試下，在test目錄新增一個conference.js測試檔案，

var Conference = artifacts.require("./Conference.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);
  });
});

...

這裡只貼出部分程式碼，一個測試case，執行truffle test檢視測試結果。 在這裡插入圖片描述

編寫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檔案，如下:

<!DOCTYPE html>
<html>
<head>
  <title>Conference DApp2</title>
  <link href='https://fonts.loli.net/css?family=Open+Sans:400,700,300' rel='stylesheet' type='text/css'>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="./app.js"></script>
</head>
<body>
  <h1>Conference DApp</h1>
  <div class="section">
    Contract deployed at: <div id="confAddress"></div>
  </div>
  <div class="section">
    Organizer: <input type="text" id="confOrganizer" />
  </div>
  <div class="section">
    Quota: <input type="text" id="confQuota" />
      <button id="changeQuota">Change</button>
      <span id="changeQuotaResult"></span>
  </div>
  <div class="section">
    Registrants: <span id="numRegistrants">0</span>
  </div>
  <hr/>
</body>
</html>

然後在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
});

window.App = { //where to close
    start: function() {
        var self = this;

        web3.eth.getAccounts(function(err, accs) {
            if (err != null) {
                alert("There was an error fetching your accounts.");
                return;
            }

            if (accs.length == 0) {
                alert("Couldn't get any accounts! Make sure your Ethereum client is configured correctly.");
                return;
            }
 accounts = accs;
//$("#tentantAddress").html(getBalance(accounts[0])); //prints balance

            //console.log(accounts);
            self.initializeConference();
        });
    },

    initializeConference: function() {
        var self = this;
	
        Conference.deployed().then(function(instance) {
            sim = instance;
            $("#confAddress").html(sim.address);

            self.checkValues();
        }).catch(function(e) {
            console.log(e);
        });

    },

checkValues: function() {

        Conference.deployed().then(function(instance) {
           sim = instance;
	    console.log(sim);	
            sim.quota.call().then( 
            function(quota) { 
            console.log(quota); 
            $("input#confQuota").val(quota);
            return sim.organizer.call();
              }).then(
              function(organizer){
                $("input#confOrganizer").val(organizer);
                return sim.numRegistrants.call();
              }).then(
              function(num){
                $("#numRegistrants").html(num.toNumber());
              });
	
	});
   },

   changeQuota: function(newquota){
        Conference.deployed().then(function(instance) {
           sim = instance;
        console.log(sim);   
            sim.changeQuota(newquota,{from:accounts[0],gas:3000000}).then( 
            function() {
                return sim.quota.call(); 
              }).then(
              function(quota){
                var msgResult;
                if(quota == newquota){
                    msgResult = "change sucessful";

                }else{
                    msgResult = "change failed";

                }
                
                $("#changeQuotaResult").html(msgResult);
              });
    
    });
   }
};//loop for main

打包部署web應用

打包部署需要安裝webpack和相關的元件，安裝的方式有全域性安裝和區域性安裝兩種。所謂的區域性安裝，是指元件都是安裝在專案的目錄下(conference/node_modules)。我這裡採用的就是區域性安裝。根據我們專案的實際情況，需要安裝以下元件，

npm install --save-dev [email protected]
npm install babel-loader --save-dev
npm install babel-core --save-dev
npm install html-loader --save-dev
npm install --save-dev [email protected]
npm install html-webpack-plugin --save-dev
npm install truffle-contract --save-dev
npm install --save-dev style-loader css-loader

環境裝好，可以打包了。 在這裡插入圖片描述

沒報錯的話，進入build目錄可以看到bundle.js和index.html兩個檔案，這兩個就是最終打包好的網頁檔案。

然後部署，

在這裡插入圖片描述

此時,瀏覽器會自動開啟:http://localhost:8080,效果如下: 在這裡插入圖片描述 可以看到合約的釋出地址和會議組織者地址(msg.sender)都已經成功的顯示出來了，點選change按鈕還可以改變quota的值。

相關推薦

以太坊DApp開發:web3.js與智慧合約互動

前言 環境準備 ubuntu 14.0.4（16.0.4）， 64位 還需要安裝以太坊相關的環境: nodejs truffle solidity testrpc 編寫智慧合約 首先在使用者目錄(home)下新建conference目錄(任意目錄都

用web3.js與智慧合約互動(修改版)

工具：Truffle v4.0.4   ganache-1.1.0-beta（ui介面版） nodejs 8.9.4 npm 5.6.0    web3 1.0.0 思路： 1、先用truffle建立一個以太坊智慧合約專案，部署在ganache測試網路。 2、用np

用web3.js與智慧合約互動

工具：Truffle v4.0.4  ganache-1.1.0-beta（ui介面版）nodejs 8.9.4npm 5.6.0   web3 1.0.0思路：1、先用truffle建立一個以太坊智慧合約專案，部署在ganache測試網路。2、用npm建立另外一個專案，使用

以太坊 DApp 開發入門實戰！ 用Node.js和truffle框架搭建——區塊鏈投票系統！

以太坊 區塊鏈 Node.js truffle DApp 第一節 概述 面向初學者，內容涵蓋以太坊開發相關的基本概念，並將手把手地教大家如何構建一個 基於以太坊的完整去中心化應用 —— 區塊鏈投票系統。 通過學習，你將掌握： 以太坊區塊鏈的基本知識 開發和部署以太坊合約所需的軟件

以太坊DApp開發入門教程——Node.js和truffle框架打造區塊鏈投票系統

第一節 課程概述本課程面向初學者，內容涵蓋以太坊開發相關的基本概念，並將手把手地教大家如何構建一個 基於以太坊的完整去中心化應用 —— 區塊鏈投票系統。通過本課程的學習，你將掌握：以太坊區塊鏈的基本知識開發和部署以太坊合約所需的軟體環境使用高階語言（solidity）編寫以太

以太坊教程：學習以太坊Dapp開發

以太坊教程 以太坊 以太坊開發 智能合約 區塊鏈 dapp 一、區塊鏈 1. 分布式去中心化 比特幣設計的初衷就是要避免依賴中心化的機構，沒有發行機構，也不可能操縱發行數量。既然沒有中心化的信用機構，在電子貨幣運行的過程中，也勢必需要一種機制來認可運行在區

區塊鏈全棧開發-以太坊DAPP開發實戰視訊課程-熊麗兵-專題視訊課程

區塊鏈全棧開發-以太坊DAPP開發實戰視訊課程—84人已學習 課程介紹         本門課從一個去中心化應用的概念講起，讓大家理解去中心化應用與傳統應用的不同，然後用一個個案例帶大家瞭解掌握中心

以太坊DAPP[3]-×××-react特性與×××合約例項

×××例項 在之前的課程中，我們介紹瞭如何編譯與部署合約。現在，我們假設已經把合約部署到了ropsten的網路之上。得到了地址。現在，我們需要通過合約的ABI介面與地址來構建×××合約的例項。 新建檔案：src/lottery.js: 1234567 import w

以太坊dApp開發教程（如何一步步構造一個全棧式去中心化應用）（四）實現投票功能

一、更新智慧合約 增加投票功能後的智慧合約如下： pragma solidity ^0.4.2; contract Election { //候選者結構體 struct Candidate { uint id; string name; uint vot

區塊鏈學習(3)--以太坊Dapp開發

c函數 ali cati 意思 定制 區塊鏈學習 網絡 開發 功能 DApp是Decentralized Application的縮寫，譯為:分散式的應用程序。App我們都知道，我們在智能手機上安裝的應用程序也就是App。而DApp比App多了一個‘D’，‘D’的意思是分散

【區塊鏈】以太坊DApp開發

機器環境 win10 nodev8.9.4 npm install -g truffle npm install -g ganache-cli Github地址 效果

以太坊Dapp開發全過程（solidity）

繼上篇用php70行程式碼獲取所有以太坊區塊鏈應用程式碼，獲取到以太坊dapp的solidity程式碼，除了用mythril工具掃描出安全問題，還是得深入分析程式碼邏輯。然而solidity語法有些不明白的地方，故藉著loomnetwork的cryptozombies遊戲 學

以太坊DAPP開發例項: 全棧投票系統

[教程最近更新於2018年1月]在我以前的文章中，我解釋了以太坊平臺和web 應用的差別。作為一個開發者，學習任何新技術的最好方法是潛入和嘗試構建應用。在這篇文章中，讓我們構建一個簡單的"Hello World!" 應用程式, 這是一個投票應用程式。該應用程式非常簡單，它所做

以太坊私鏈 利用Java 釋出智慧合約

使用前需要將合約轉換為java 程式碼 建立maven 專案 pom.xml   這裡版本號需要根據生成java 文件得工具進行修改 <dependency> <groupId>org.web3j</groupId>

以太坊：呼叫已部署的智慧合約

轉載請註明出處：https://www.cnblogs.com/zhizaixingzou/p/10122350.html   目錄     1. 呼叫已部署的智慧合約 相關截圖來自： https://solidity-cn.readthedocs.io/

在以太坊的私鏈上釋出智慧合約

如何搭建以太坊私鏈請參考： https://blog.csdn.net/Ssuper_X/article/details/83272170 #這是一個簡單的乘法例子 pragma solidity ^0.4.2; contract test { fu

以太坊構建DApps系列教程(五):智慧合約通訊和代幣銷售

在本系列關於使用以太坊構建DApps教程的第4部分中，我們開始構建和測試我們的DAO智慧合約。 現在讓我們更進一步，根據我們的介紹，處理向故事Story新增內容和代幣。 新增代幣 對於能夠與另一個合約進行互動的合約，它需要知道其他合約的介面——可用的函式。由於我們的TNS代幣具有相當

【以太坊系列-006】ethereum solidity智慧合約在geth控制檯上的操作(mapping實踐)

   說明，本文基於已經部署好的etherum環境，在geth控制檯上操作以下命令。文中用到的命令，可以參考該系列的其他文件。 1、解鎖賬號 > personal.unlockAccount(eth.accounts[0], "lyh001", 300) # 3

用Visual Studio和c#開發以太坊dapp

分享 chain dap 本地 當前 疑問 運行 course 啟動 最近區塊鏈技術引起了我的註意。我剛開始了解它，就看到了區塊鏈去中心化架構的巨大潛力，並且它能夠簡化各種現有繁瑣的流程，通過各種形式的合約。 作為一名.NET開發人員，我主要使用的是一些提供中心數據源的架構

以太坊Dapp專案-網頁錢包開發手冊

以太坊Dapp專案-網頁錢包開發手冊 修訂日期 姓名 郵箱 2018-10-10 brucefeng [email protected] 前言 在之前的一篇文章以太坊智慧合約專案-To