區(qū)塊鏈平臺(tái)EOSIO開發(fā)智能合約和dapp（三）

CoyPan 發(fā)布于2019-06-27 18:42 / 1558人閱讀

摘要：在中被大量使用以便于開發(fā)。事實(shí)上，在中創(chuàng)建帳戶存在問題。這種方法使我可以輕松調(diào)用智能合約。結(jié)論這就是我的區(qū)塊鏈實(shí)驗(yàn)系列的全部內(nèi)容。

這是一步步的用EOSIO開發(fā)區(qū)塊鏈DApp的第三部分，上一部分中，我為EOSIO平臺(tái)開發(fā)了一個(gè)模擬選舉的智能合約。這部分我將開發(fā)一個(gè)webapp，允許訪問者投票給候選人。

以下是webapp的快速預(yù)覽：

源代碼說明

首先，請(qǐng)參閱下面的概述圖：

前端

前端由HTML，CSS和Javascript組成。我使用Semantic-UI作為CSS框架以獲得漂亮的外觀。JQuery在Javascript中被大量使用以便于開發(fā)。

此webapp只有一個(gè)頁面（主頁HTML）。主頁分為四個(gè)部分。以下是部分的屏幕截圖：

以下是主頁index.html的代碼片段：

index.html的完整源代碼在這里

app.js涵蓋了前端邏輯。以下是亮點(diǎn)：

...
// Main Application Object
function App() {
  ...
}
...
// Ajax calls
App.prototype.getInfo = function() {
  return $.ajax({
    type: "GET",
    dataType: "json",
    url: "/api/getinfo"
  });
}
App.prototype.unlockWallet = function() {
  return $.ajax({
    type: "POST",
    dataType: "json",
    url: "/api/unlock_wallet"
  });
}
...
// Event handlers
App.prototype.onBtnInputNameClicked = function(evt) {
  ...
}
...
// Program startup
App.prototype.start = function() {
  self.getInfo().then(function() {
    return self.unlockWallet();
  }).done(function() {
    ...
  }
}
...

app.js的完整源代碼在這里

如你所見，我使用jQuery ajax()和then()來執(zhí)行對(duì)后端的多次異步調(diào)用。以下部分將提到后端代碼。

后端

后端用Python和Flask框架編程。Flask不僅使我們能夠非常輕松地創(chuàng)建功能強(qiáng)大的Web應(yīng)用程序，而且可以快速開發(fā)RESTful API服務(wù)。以下是server.py代碼的代碼亮點(diǎn)：

import subprocess
from flask import Flask
from flask import render_template
...
def cleos(args):
    if isinstance(args, list):
        command = ["cleos", "--wallet-url=http://localhost:8899"]
        command.extend(args)
        command = " ".join(command)
    else:
        command = "cleos " + args

    results = subprocess.run(command, stdin=PIPE, stdout=PIPE, stderr=PIPE, shell=True, check=False)
    return results
...
app = Flask(__name__)
...
@app.route("/")
@app.route("/index")
def index():
    return render_template("index.html")
...
# RESTful API functions
@app.route("/api/getinfo", methods=["GET"])
def get_info():
    result = cleos(["get", "info"])
    rstmsg = result.stderr.decode("ascii")
    if not rstmsg.startswith("Fail"):
        return result.stdout
    else:
        return "nodeos connection failed", 500
...

server.py的完整源代碼在這里

如上所述，在cleos()函數(shù)內(nèi)部，它生成新進(jìn)程以啟動(dòng)cleos命令，就像在命令行中一樣。你可能想知道為什么不使用EOSJS。事實(shí)上，在EOSJS中創(chuàng)建EOSIO帳戶存在問題。實(shí)際上，我嘗試使用NodeJS代碼在EOSJS中創(chuàng)建一個(gè)帳戶，但都失敗了。所以我放棄了并切換到Python Flask。雖然子進(jìn)程很慢并且具有可擴(kuò)展性問題。但我認(rèn)為它適合于演示目的。

這種方法使我可以輕松調(diào)用EOSIO智能合約。下面的server.py中的代碼片段說明了如何調(diào)用智能合約在上一部分最后小結(jié)開發(fā)的投票操作：

...
@app.route("/api/vote_candidate", methods=["POST"])
def vote_candidate():
    account = request.form.get("account")
    candidate = request.form.get("candidate")
    param = ""["" + account + "", " + candidate + "]""
    # Invoke the Smart Contract "vote" action
    result = cleos(["push", "action", "election", "vote", param, "-p", account])
    print(result.stderr)
    if result.returncode == 0:
        return jsonify({"result": result.stderr.decode("ascii")})
    else:
        return result.stderr, 500
...

因此前端代碼app.js調(diào)用：

...
App.prototype.voteCandidate = function(account, candidate) {
  return $.ajax({
    type: "POST",
    data: {
      account: account,
      candidate: candidate
    },
    dataType: "json",
    url: "/api/vote_candidate"
  });
}
...
  this.voteCandidate(this._account, val).done(function(resp) {
    console.info("Vote AJAX call result");
    console.log(resp);
...

自己動(dòng)手試試吧

我已經(jīng)設(shè)置了一個(gè)演示服務(wù)器，讓你體驗(yàn)EOSIO區(qū)塊鏈。瀏覽http://demo.simonho.net:5000自己嘗試一下。但我無法保證服務(wù)器隨時(shí)可用且持久。它只是我家用電腦的虛擬機(jī)。

結(jié)論

這就是我的EOSIO區(qū)塊鏈實(shí)驗(yàn)系列的全部內(nèi)容。先前部分的超鏈接：第1部分和第2部分。

希望你喜歡！

項(xiàng)目完整源代碼托管在這里github repo

======================================================================

分享一個(gè)交互式的在線編程實(shí)戰(zhàn)，EOS智能合約與DApp開發(fā)入門：

EOS教程

本課程幫助你快速入門EOS區(qū)塊鏈去中心化應(yīng)用的開發(fā)，內(nèi)容涵蓋EOS工具鏈、賬戶與錢包、發(fā)行代幣、智能合約開發(fā)與部署、使用代碼與智能合約交互等核心知識(shí)點(diǎn)，最后綜合運(yùn)用各知識(shí)點(diǎn)完成一個(gè)便簽DApp的開發(fā)。

這里是原文