如何設計一個可以與我部署的合約互動的 GUI/網頁？

目前我正在使用 MyEthereumWallet、testrpc 和 MetaMask 與部署在 testrpc 上的合約進行互動。所以，我只使用“MyEthereumWallet”的“合約”選項卡，但我想更改背景等，所以它看起來更個性化。

問題 1：如何設計一個 GUI，比如 MyEthereumWallet，允許我與部署的合約進行互動？

您將需要創建一個 HTML 頁面，該頁面使用該web3庫與支持乙太坊的瀏覽器（MetaMask、Mist 等）進行互動。

首先在您的 HTML 中包含web3.jsor web3.min.js，然後您將能夠呼叫與賬戶和合約互動的 JavaScript 函式，檢查同步狀態和塊號等。

<script src="web3.min.js"></script>

以下是如何實例化實例的web3範例：

if (typeof web3 !== 'undefined') {
 web3 = new Web3(web3.currentProvider);
} else {
 // browser is not web3-enabled
}

然後你可以像這樣使用它：

web3.eth.getBlock(48, function(error, result){
   if(!error)
       console.log(result)
   else
       console.error(error);
})

以下是 API 參考：https ://github.com/ethereum/wiki/wiki/JavaScript-API

注意： API 參考中有很多同步呼叫的範例，但web3在很多情況下已棄用它們。大多數函式呼叫都需要指定回調。

這是我就這個主題寫的一篇文章： https ://medium.com/metamask/calling-a-smart-contract-with-a-button-d278b1e76705?source=linkShare-9cdd320de5c9-1504477348

引用自：https://ethereum.stackexchange.com/questions/25739