“基於以太坊的去中心化電商DApp”程序說明文檔

項目下載地址：基於以太坊的去中心化電商DApp
項目調研報告：去中心化電商平臺調研報告

文章目錄

五、代碼實現

一、項目概述

1.1 項目名稱

基於以太坊的去中心化電商DApp

1.2 項目用途

使用區塊鏈、星際文件系統（IPFS）、Node.js和MongoDB來構建電商平臺類似淘寶的在線電商應用，賣家可以自由地出售商品，買家可以自由地購物。

二、需求分析

eBay或淘寶這樣的C2C電商平臺已經獲得了巨大成功，因爲它使得買賣雙方都相當便利。

在互聯網成爲主流之前，人們只能在小範圍內、或者在鄰里之間買賣商品。當越來越多的人使用互聯網，出現了像eBay這樣的平臺，無論來自世界的任何一個地方，你都可以在網上買賣商品。無論是商家還是消費者，這樣的平臺都有其價值。

儘管eBay這樣的平臺方便了大家，也改善了貿易和經濟，但它也存在一些缺點：

被平臺束縛。參與的商家受制於擁有平臺的企業。在任何時候，平臺擁有者可以自行決定在是否對某個商家進行封號處理，而如果商家嚴重依賴於平臺，那麼賬號被封就是一個巨大的打擊。
商家費用高。商家上架商品要交費，售出商品也要交佣金。收費本身並沒有錯，畢竟eBay這樣的平臺提供了服務。但是，上架費有時太高了，這導致商家最後盈利很少，或是將成本轉嫁到消費者身上。
數據失控。商家或消費者都無法擁有本應屬於自己的數據。評論、購買歷史等等所有數據都爲平臺擁有者所有。比如，如果一個商家想要換一個提供商，或者想要導出商品評論或是其他數據都非常不容易，甚至不可能。

在以太坊上構建的去中心化電商平臺就解決了這些問題：商家的賬戶不會被封；數據也是公開的，所以很容易導出數據；相對於中心化的平臺，交易佣金也會低得多。

三、系統功能模型

在這個項目中將要實現的主要功能特性：

商品上架：應用應該支持賣家上架商品進行銷售。我們將實現讓任何人自由上架商品的功能。

商品瀏覽與搜索：應用應該支持買家方便地瀏覽商品列表。我們會實現瀏覽商品的功能，以及基於商品類別、拍賣時間等條件進行查詢的功能。

商品拍賣：跟eBay一樣，我們會實現維科瑞拍賣方式的商品競價銷售。由於以太坊上的一切交易都是公開的，因此我們的實現將會與中心化環境下有所不同。

資金託管：一旦出價結束，商品拍賣有了贏家以後，我們會創建由勝出的買方、賣方和任意第三方參與的託管合約，由託管合約來管理交易資金。

託管資金保護：爲了保護託管資金，我們將採用多重簽名（2/3）來實現防欺詐保護，即三個參與者有兩個同意時，纔會將託管資金釋放給賣方，或是將託管資金返還給買方。

爲了便於查詢，我們會將商品數據同時存在鏈上和鏈下（數據庫）；同時，爲了避免圖片等數據佔用昂貴的鏈上存儲，我們將把圖片和商品描述信息上傳到同樣去中心化的IPFS網絡。

四、系統設計

4.1 總體設計

我們將用區塊鏈、星際文件系統（IPFS）、Node.js和MongoDB來構建電商平臺類似淘寶的在線電商應用，賣家可以自由地出售商品，買家可以自由地購物：

去中心化：和淘寶或eBay不同，我們把所有的商業邏輯和核心數據都放在以太坊區塊鏈上，這使得它成爲一個完全去中心化的應用。和淘寶這樣中心化的電商平臺相比，一個去中心化的P2P電商應用顯然有其獨特的價值——至少你不用擔心被平臺封賬戶了。

IPFS：在以太坊上存儲用於商品展示的圖片和描述超文本十分昂貴，由於以太坊虛擬機的限制，有時甚至是不可行的。爲了解決這個問題，我們將會把商品圖片和商品描述信息存儲在同樣去中心化的星際文件系統（IPFS)中，而僅僅在鏈上保存這些數據的ID。

商品拍賣：對於賣家而言，拍賣顯然是一種非常好的提升商品利潤空間的銷售手段。因此我們在課程項目中將實現去中心化環境下的維科瑞（Vickery）拍賣 —— 這非常類似於eBay的自動競價系統，而不是簡單地對商品進行固定標價。

資金託管：中心化的平臺有一個優點在於它天然提供了買賣雙方之間的信任中介。在去中心化的環境中，我們將使用一個多方託管合約來應對買賣雙方可能的風險，託管合約採用投票機制來決定買家貨款的最終流向。

鏈下數據存儲：不要被去中心化限制我們的思維，傳統的技術依然有其強大之處。我們將使用MongoDB在鏈下做一個同步的數據備份，以便實現單純用區塊鏈很難實現的功能：靈活的商品查詢。

4.2 架構設計

我們將要構建的去中心化電商DApp的架構：

Web前端：web前端使用HTML/CSS/JavaScript開發，其中大量使用了web3js來訪問區塊鏈。用戶將會通過這個前端應用來訪問以太坊、IPFS和NodeJS服務器。

以太坊區塊鏈：這是去中心化應用的核心，所有的代碼（電商合約、資金託管合約）和交易都存儲在鏈上，這包括所有的商品信息、買家的出價信息、商品競價結果、資金流向投票結果等。

MongoDB：儘管核心數據存儲在區塊鏈上，但是爲了方便買家對商品的檢索和查詢，例如只顯示某一類的商品，或者顯示即將過期的商品等等，我們會用MongoDB數據庫來同步地存儲和檢索商品信息。

NodeJS服務器：這是後端服務器，我們會利用它給前端提供REST風格的API來查詢商品，同時，也利用它來響應對前端靜態頁面的請求。

IPFS: 當賣家上架一個商品時，前端會商品圖片文件和介紹文本上傳到IPFS，並將所上傳文件的哈希值存到鏈上。

五、代碼實現

5.1 合約部分代碼

pragma solidity ^0.4.17;

contract Adoption {

  address[16] public adopters;  // 保存領養者的地址
  uint[16] public volume = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];

  // 領養寵物
  function adopt(uint petId) public returns (uint) {
    require(petId >= 0 && petId <= 15);  // 確保id在數組長度內

    adopters[petId] = msg.sender;        // 保存調用者地址 
    volume[petId]++;
    return petId;
  }

  // 返回領養者
  function getAdopters() public view returns (address[16]) {
    return adopters;
  }

  function getVolume() public view returns (uint[16]) {
    return volume;
  }

}

5.2 HTML代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Super Market</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-8 col-sm-push-2">
            <h1 class="text-center">Super Market</h1>
            <hr/>
            <br/>
        </div>
    </div>

    <div id="petsRow" class="row">
        <!-- PETS LOAD HERE -->
    </div>
</div>

<div id="petTemplate" style="display: none;">
    <div class="col-sm-6 col-md-4 col-lg-3">
        <div class="panel panel-default panel-pet">
            <!-- <div class="panel-heading">
              <h3 class="panel-title">Scrappy</h3>
            </div> -->
            <div class="panel-body">
                <img alt="140x140" data-src="holder.js/140x140" class="img-rounded img-center" style="width: 100%;"
                     src="https://animalso.com/wp-content/uploads/2017/01/Golden-Retriever_6.jpg"
                     data-holder-rendered="true">
                <br/><br/>
                <span class="pet-breed">Golden Retriever</span><br/>
                <strong>$</strong> <span class="pet-age">3</span><br/>
                <span class="pet-location">Warren, MI</span><br/>
                <strong>Repertory</strong>: <span class="repertory">0</span><br/><br/>
                <button class="btn btn-default btn-adopt" type="button" data-id="0">Buy</button>
            </div>
        </div>
    </div>
</div>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="js/web3.min.js"></script>
<script src="js/truffle-contract.js"></script>
<script src="js/app.js"></script>
</body>
</html>

5.3 JavaScript代碼

App = {
    web3Provider: null,
    contracts: {},

    init: async function () {
        // Load pets.
        $.getJSON('../pets.json', function (data) {
            var petsRow = $('#petsRow');
            var petTemplate = $('#petTemplate');

            for (i = 0; i < data.length; i++) {
                petTemplate.find('.panel-title').text(data[i].name);
                petTemplate.find('img').attr('src', data[i].picture);
                petTemplate.find('.pet-breed').text(data[i].breed);
                petTemplate.find('.pet-age').text(data[i].age);
                petTemplate.find('.pet-location').text(data[i].location);
                petTemplate.find('.repertory').text(data[i].repertory);
                petTemplate.find('.btn-adopt').attr('data-id', data[i].id);

                petsRow.append(petTemplate.html());
            }
        });

        return await App.initWeb3();
    },

    initWeb3: async function () {

        // Is there an injected web3 instance?
        if (typeof web3 !== 'undefined') {
            App.web3Provider = web3.currentProvider;
        } else {
            // If no injected web3 instance is detected, fall back to Ganache
            App.web3Provider = new Web3.providers.HttpProvider('http://localhost:8545');
        }
        web3 = new Web3(App.web3Provider);

        return App.initContract();
    },

    initContract: function () {

        // 加載Adoption.json，保存了Adoption的ABI（接口說明）信息及部署後的網絡(地址)信息，它在編譯合約的時候生成ABI，在部署的時候追加網絡信息
        $.getJSON('Adoption.json', function (data) {
            // Get the necessary contract artifact file and instantiate it with truffle-contract
            // 用Adoption.json數據創建一個可交互的TruffleContract合約實例。
            var AdoptionArtifact = data;
            App.contracts.Adoption = TruffleContract(AdoptionArtifact);

            // Set the provider for our contract
            App.contracts.Adoption.setProvider(App.web3Provider);

            // Use our contract to retrieve and mark the adopted pets
            return App.markAdopted();
        });

        return App.bindEvents();
    },

    bindEvents: function () {
        $(document).on('click', '.btn-adopt', App.handleAdopt);
    },

    markAdopted: function (adopters, account) {

        var adoptionInstance;

        App.contracts.Adoption.deployed().then(function (instance) {
            adoptionInstance = instance;

            // 調用合約的getAdopters(), 用call讀取信息不用消耗gas
            return adoptionInstance.getVolume.call();
        }).then(function (volume) {
            for (i = 0; i < volume.length; i++) {
                $('.panel-pet').eq(i).find('.repertory').text(1000 - volume[i]);
            }
        }).catch(function (err) {
            console.log(err.message);
        });
    },

    handleAdopt: function (event) {
        event.preventDefault();

        var petId = parseInt($(event.target).data('id'));

        var adoptionInstance;

        // 獲取用戶賬號
        web3.eth.getAccounts(function (error, accounts) {
            if (error) {
                console.log(error);
            }

            var account = accounts[0];

            App.contracts.Adoption.deployed().then(function (instance) {
                adoptionInstance = instance;

                // 發送交易領養寵物
                return adoptionInstance.adopt(petId, {from: account});
            }).then(function (result) {
                return App.markAdopted();
            }).catch(function (err) {
                console.log(err.message);
            });
        });
    }

};

$(function () {
    $(window).load(function () {
        App.init();
    });
});

“基於以太坊的去中心化電商DApp”程序說明文檔

目錄

文章目錄

一、項目概述

1.1 項目名稱

1.2 項目用途

二、需求分析

三、系統功能模型

四、系統設計

4.1 總體設計

4.2 架構設計

五、代碼實現

5.1 合約部分代碼

5.2 HTML代碼

5.3 JavaScript代碼

《Java程序設計教程》複習

PAT 1153 Decode Registration Card of PAT

“基於以太坊的去中心化電商DApp”程序說明文檔

c++筆記

Java解題常用方法

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結