package.json配置檔案依賴包！

"dependencies": {
    "bootstrap": "^4.2.1",
    "jquery": "^3.3.1",
    "popper.js": "^1.14.6",
    "truffle-contract": "^3.0.4",
    "web3": "^0.20.0"
  }


//app.js核心js程式碼(其他js檔案全部是nodejs庫，安裝即可)

var $ = require("jquery");

var startObj = {
    ////web初始化成功之後獲得的當前操作賬號物件！
    web3Provider : null,
    //truffle-contract智慧合約初始化成功後，獲得調取賬戶例項的許可權！
    contracts : {},
    //web初始化成功之後獲得的web3物件！
    web3 : {},


    //初始化web前端寵物介面！！
    init : 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('.btn-adopt').attr('data-id', data[i].id);
                //petTemplate.css("display","block");
                petsRow.append(petTemplate.html());
            }
        });
    },

    //web3初始化函式！
    initWeb3 : function() {
        var Web3 = require('web3');
        if (typeof web3 !== 'undefined') {
            web3 = new Web3(web3.currentProvider);
            } else {
            // set the provider you want from Web3.providers
            web3 = new Web3(new Web3.providers.HttpProvider("http://127.0.0.1:8545"));
            }
            startObj.web3Provider = web3.currentProvider;
            startObj.web3 = web3;
        
    },

    //truffle-contract智慧合約初始化函式！
    initContract : function () {
        var TruffleContract = require("truffle-contract");

        //這裡的json檔案路徑由於在lite-server伺服器檔案bs-config.json配置了./build/contracts預設路徑！
        $.getJSON('Adoption.json', function(data) {
            var AdoptionArtifact = data;

            startObj.contracts.Adoption = TruffleContract(AdoptionArtifact);
            startObj.contracts.Adoption.setProvider(startObj.web3Provider);
           
            //合約初始化完畢之後，等待執行ETH賬戶與合約的互動工作！
            startObj.markAdopted();
        });
    },

    //呼叫智慧合約中的getAdoptors函式，查詢所有領養者的賬號資訊！
    markAdopted : function() {
        var apotionInstance;
        startObj.contracts.Adoption.deployed().then(function(instance) {
            apotionInstance = instance;
            console.log("例項賬戶物件為：");
            console.log(instance);
            var adopters = apotionInstance.getAdoptors.call();
            console.log("從智慧合約陣列中得到的結果：",adopters);
            //這裡的return返回的結果，會傳遞給下一個then回撥函式！
            return adopters;

        }).then(function(adopters) {
                for(i =0; i< adopters.length; i++) {
                    console.log(adopters[i]);
                    if(adopters[i] !== '0x0000000000000000000000000000000000000000') {
                        $('.panel-pet').eq(i).find('button').text('Success').attr('disabled', true);
                    }
                }
            }).catch(function(err) {
                console.log(err.message);
            })
    },

    //按鈕事件，如果有點選領養，那麼獲得領養賬戶的地址，並呼叫智慧合約中的adoptor方法把當前賬號地址存入陣列中！
    bindEvents : function () {
        $(document).on('click', '.btn-adopt', function(event) {
            event.preventDefault();
            var apotionInstance;
            var petId = parseInt($(event.target).data('id'));

            startObj.web3.eth.getAccounts(function(error, accounts){
                var account = accounts[0];

                startObj.contracts.Adoption.deployed().then(function(instance){
                    apotionInstance = instance;
        
                    return apotionInstance.adoptor(petId, {from: account});
                    }).then(function(result) {
                    return startObj.markAdopted();
                    } ).catch(function(err) {
                    console.log(err.message);
                });
            });
        });
    }
}


$(function() {
    //初始化前端寵物介面！
    startObj.init();
    //展示完畢寵物資訊之後，初始化web3;
    startObj.initWeb3();
    //web3初始化完畢之後，繼續初始化合約;
    startObj.initContract();
    //繫結按鈕事件，等待使用者Adopt領養觸發！
    startObj.bindEvents();

});
 

//html主檔案（樣式方面的就不提供了，自己搞！！！）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Pete's Pet Shop</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
    <div class="container">
        <h1 class="text-center">Pete's Pet Shop</h1>
        <div id="petsRow" class="row">
            
        </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="" data-holder-rendered="true">
              <br/><br/>
              <strong>Breed</strong>: <span class="pet-breed">Golden Retriever</span><br/>
              <strong>Age</strong>: <span class="pet-age">3</span><br/>
              <strong>Location</strong>: <span class="pet-location">Warren, MI</span><br/><br/>
              <button class="btn btn-default btn-adopt" type="button" data-id="0">Adopt</button>
            </div>
          </div>
        </div>
      </div>

      <script src="./browserify/main.js"></script>


</body>
</html>