Hyperledger Composer是一個廣泛的開放式開發工具集和框架，可簡化開發區塊鏈應用程式的過程。Composer支援現有的Hyperledger Fabric區塊鏈基礎架構，使用Composer輕鬆建立區塊鏈環境。我們只關注生成我們的業務網路存檔（.bna）的模型，指令碼和訪問控制檔案。準備好將Business Network Archive檔案部署在存在Hyperledger Fabric和Node.js的分散式分類帳上。在那之後，我們只開發了一個web介面，它使用了我們想要的Rest API語言。安裝先決條件：下面介紹如何在Hyperledger Composer上實現基於區塊鏈的投票應用程式。對於Hyperledger Composer，我們需要檢查是否具備Compose所需的所有先決條件，如果沒有以下條件，則需要安裝；Docker Engine，Docker-Compose，Node，npm，git，Python和VSCode（這不是必需的，但很有用）。安裝開發環境：如果我們確定已安裝了先決條件，則將繼續安裝要使用的開發環境。我們從安裝開發Composer時所需的有用的CLI工具（composer-cli，必不可少的generator-hyperledger-composer，composer-rest-server和Yeoman）開始。然後，我們需要安裝Hyperledger Fabric來部署我們的業務網路。此處說明了如何安裝我們上面介紹的CLI工具和Hyperledger Fabric。然後，透過這些命令啟用Hyperledger Fabric。
cd~/fabric-dev-serversexportFABRIC_VERSION=hlfv11./startFabric.sh./createPeerAdminCard.sh就這樣，所有的安裝步驟都完成了。
Hyperledger Composer專案：
我們從業務網路定義的開發開始，這是我們正在構建的關鍵概念。根據官方文件，它定義為“業務網路定義是Hyperledger Composer程式設計模型的關鍵概念。它們由BusinessNetworkDefinition類表示，該類在composer-common模組中定義，並由composer-admin和composer-client匯出。下圖完美顯示了BNA的各個部分，我們將根據需要對其進行更改。
我們應該對上圖中可以看到的檔案進行一些更改。但是我們透過使用Yeoman並遵循以下步驟來建立業務網路結構：
yohyperledger-composer:businessnetwork1.Entervote-networkasnetworknameanddesiredinformationfordescription,authorname,andauthoremail2.SelectApache-2.0asthelicense3.Enterorg.example.empty4.SelectNowhenaskedwhethertogenerateanemptynetwork商業網路由資產，參與者，交易，訪問控制規則以及可選的事件和查詢組成，如您所見。因此我們進行以下修改。Model File(.cto): 它包含所有資產，參與者和交易的類定義，我們對它們進行如下建模；
namespaceorg.example.emptyassetVoteidentifiedbyvoteID{oStringvoteID-->Candidatecandidate}participantCandidateidentifiedbycandidateId{oStringcandidateIdoStringfirstNameoStringlastName}transactionVoteLog{oStringvoteID-->Candidatecandidate}
Script File(.js): 它包含在事務發生時執行的事務處理器函式。
/***@param{org.example.empty.VoteLog}tx*@transaction*/asyncfunctionlogAdd(tx){letassetRegistry=awaitgetAssetRegistry('org.example.empty.Vote');varfactory=getFactory()varasset=factory.newResource('org.example.empty','Vote',tx.voteID)asset.candidate=tx.candidateawaiAccess Control(.acl):它包含基本的訪問控制規則。
/***Accesscontrolrulesforvote-network*/ruleDefault{description:"Allowallparticipantsaccesstoallresources"participant:"ANY"operation:ALLresource:"org.example.empty.*"action:ALLOW}ruleSystemACL{description:"SystemACLtopermitallaccess"participant:"ANY"operation:ALLresource:"org.hyperledger.composer.system.**"action:ALLOW}生成並部署到業務網路存檔：定義業務網路後，必須導航到vote network目錄（或輸入了其他名稱的目錄）並執行以下命令，將其打包為可部署的業務網路存檔（.bna）檔案；
composerarchivecreate-tdir-n現在我們在vote-network目錄中建立了一個名為[email protected]的業務網路存檔檔案，我們需要開始將其部署到Hyperledger Fabric。我們將再次導航到vote-network目錄並按順序執行命令。注意：如果您已經建立了其他名稱，則需要更改vote-network的名稱安裝業務網路
composernetworkinstall--cardPeerAdmin@[email protected]啟動業務網路
composernetworkstart--networkNamevote-network--networkVersion0.0.1--networkAdminadmin--networkAdminEnrollSecretadminpw--cardPeerAdmin@hlfv1--filenetworkadmin.card將網路管理員身份匯入為可用的名片
composercardimport--filenetworkadmin.card
生成REST伺服器：
此時Hyperledger Composer提供了一個REST Server，我們將參考在先前步驟中建模和定義的BND生成它。我們將再次導航到vote-network目錄並按順序執行命令。
composer-rest-server1.Enteradmin@vote-networkascardname2.Selectneverusenamespaces3.SelectNowhenaskedwhethertosecurethegeneratedAPI4.SelectYeswhenaskedwhethertoenableeventpublication5.SelectNowhenaskedwhethertoenableTLSsecurity之後生成的API將透過http：//localhost：3000地址連線到已部署的區塊鏈和業務網路。下圖顯示了端點的外觀。
我們應該安裝的所有東西都已完成。現在我們可以開發一個網頁並連線到REST Server。該應用程式有2個版本（其中一個使用jQuery框架開發，另一個使用React框架開發），將分別進行解釋。
jQuery版本：
根據官方網站，jQuery是一個快速、小型、功能豐富的JavaScript庫。它用於向Hyperledger Composer提供的REST伺服器發出post和get請求。當任何候選人被選為投票時，結果會顯示出來，如下所示；
這是jQuery程式碼；
<htmllang="en"><head><metacharset="utf-8"><title>BlockchainVoteApp</title><scriptsrc="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><scriptsrc="//cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.js"></script><scriptsrc="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"crossorigin="anonymous"></script><scriptsrc="//stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"crossorigin="anonymous"></script><linkrel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"crossorigin="anonymous"></head><body><divclass="container"><divclass="row"><divclass="col-sm-12"><h2>HyperledgerComposerVoteApplication</h2></div><divclass="col-sm-12row"id="dvAlert"></div><divclass="col-sm-12rowd-flexjustify-content-center"id="dvCandidates"></div></div></div><divclass="modal"id="modalResult"tabindex="-1"role="dialog"><divclass="modal-dialog"role="document"><divclass="modal-content"><divclass="modal-body"><canvasid="resultChart"width="100px"height="100px"></canvas></div></div></div></div><script>varcandidateList=[];$(document).ready(function(){$.get("http://localhost:3000/api/Candidate",function(data){varhtml='';for(i=0;i<data.length;i++){candidateList.push(data[i]);html+='<divclass="col-sm-4">';html+='<imgsrc="image/user.png"class="roundedmx-autod-block">';html+='<aclass="btnbtn-primarycandidateSelect"font-size: inherit;line-height: inherit;color: rgb(42, 146, 146);overflow-wrap: inherit !important;word-break: inherit !important;">'"font-size: inherit;line-height: inherit;color: rgb(42, 146, 146);overflow-wrap: inherit !important;word-break: inherit !important;">'">'+data[i].firstName+''+data[i].lastName+'</a></div>';}$("#dvCandidates").empty();$("#dvCandidates").html(html);$(".candidateSelect").on("click",function(){varcandidateID=$(this).data("value");varcandidateName=$(this).data("name");varparam={"$class":"org.example.empty.VoteLog","voteID":newDate().getTime().toString(),"candidate":"resource:org.example.empty.Candidate#"+candidateName,"transactionId":null,"timestamp":newDate().toString()};$.post("http://localhost:3000/api/VoteLog/",param,function(data){$("#dvAlert").html('<divclass="alertalert-success"role="alert"><buttontype="button"class="close"aria-label="Close"><spanaria-hidden="true">×</span></button><strong>Success!</strong>Youhaveusedyourvoteinsuccessfully!</div>');window.setTimeout(function(){$(".alert").fadeTo(500,0).slideUp(500,function(){$(this).remove();});},4000);setTimeout(getResults,500);});});});});functiongetResults(){vardataArr=[];varbackgroundColorArr=[];varborderArr=[];varlabelsArr=[];varcolorArr=['rgba(255,99,132,0.2)','rgba(54,162,235,0.2)'];for(vari=0;i<candidateList.length;i++){dataArr.push(0);labelsArr.push(candidateList[i].firstName+""+candidateList[i].lastName);backgroundColorArr.push(colorArr[i%2]);borderArr.push(colorArr[i%2]);}$.get("http://localhost:3000/api/Vote",function(data){for(vari=0;i<data.length;i++){for(varj=0;j<candidateList.length;j++){if(data[i].candidate=='resource:org.example.empty.Candidate#'+candidateList[j].firstName){varcount=dataArr[j]+1;dataArr[j]=count;}}}});setTimeout(function(){varctx=document.getElementById("resultChart").getContext('2d');varmyChart=newChart(ctx,{type:'bar',data:{labels:labelsArr,datasets:[{label:'#ofVotes',data:dataArr,backgroundColor:backgroundColorArr,borderColor:borderArr,borderWidth:1}]},options:{scales:{yAxes:[{ticks:{beginAtZero:true}}]}}});},500);setTimeout(function(){$("#modalResult").modal("show");},700);}</script></body></html>
React 版本
根據官方網站，React是一個用於構建使用者介面的JavaScript庫。它是宣告性的和基於元件的。它被用來開發網頁，向Hyperledger Composer提供的REST伺服器發出post和get請求。結果如下所示。使用者可以登入系統並選擇他們想要的候選人。候選人選項卡中存在建立新候選人或刪除現有候選人的資訊。由於使用者需要登入系統，因此如果使用者未透過系統身份驗證，則“候選人”和“投票”標籤將重定向到“登入”螢幕。在這個專案中，vote react目錄是所有react程式碼和檔案所在的位置，此外，Hyperledger Composer還為開發環境提供了2個選擇。
第一個是線上商業環境。我們還可以在瀏覽器上建立和管理我們的業務網路，資產，參與者和交易。
第二個是針對Rest API的Angular 4應用程式。Hyperledger Composer可以在4200埠上顯示現有的Web應用程式，就像我們在此應用程式中完成的應用程式一樣。
