¿Cómo diseñar una GUI/página web que pueda interactuar con mi contrato implementado?

Deberá crear una página HTML que use la web3biblioteca para interactuar con su navegador habilitado para Ethereum (MetaMask, Mist, etc.).

Primero incluya web3.jso web3.min.jsen su HTML, luego podrá llamar a funciones de JavaScript que interactúan con cuentas y contratos, verificar el estado de sincronización y bloquear números, etc.

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

Aquí hay un ejemplo de cómo instanciar una web3instancia:

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

Entonces puedes usarlo así:

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

Aquí está la referencia de la API: https://github.com/ethereum/wiki/wiki/JavaScript-API

Aviso: la referencia de la API tiene muchos ejemplos de llamadas sincrónicas, pero web3las ha dejado obsoletas en muchos casos. La mayoría de las llamadas a funciones necesitarán especificar devoluciones de llamada.

Aquí hay un artículo que escribí sobre este tema: https://medium.com/metamask/calling-a-smart-contract-with-a-button-d278b1e76705?source=linkShare-9cdd320de5c9-1504477348

web3.js es lo que necesita. Es bastante simple diseñar una interfaz web que interactúe con su contrato usando web3. Tienes que hacer las instalaciones/importaciones necesarias que puedes ver en su repositorio de github.

Aquí hay una API simple escrita en el nodo que verifica el equilibrio de un token estándar erc-20.

var web3 = require('web3');
var options = { 
  host: ' http://localhost:8545',
  ipc : true,
  personal: true, 
  admin: false,
  debug: false
};
var contractABI= /*abi of contract */
var contractAddress = /* address of contract */
exports.checkCoinBalance = function(req, res) {
    var accountAddr = req.body.accountAddress;
    if(isAddress(accountAddr)==false){
        console.log("This address is not valid");
        return res.json({"success":"false","data":[{"message":"Inavlid address"}]});
    }
    var coinBalance=contract.balanceOf(accountAddr).toNumber();                 
    console.log(coinBalance);
    return res.json({"success":"true","data":[{balance: coinBalance}]});
    //return "success";
}

Espero que esto haga que las cosas sean fáciles de entender. He diseñado una interfaz web para interactuar con mi token estándar erc-20. Puede echar un vistazo al código fuente completo prashantprabhakar/ethereum-web-wallet . Espero que esto ayude. Editado:

Código de código de front-end:

$scope.checkCoinBalance = function(accountAddr) {
    var data = JSON.stringify({
        accountAddress: accountAddr
    });
    var config = {
        headers: {
            'Content-Type': 'application/json'
        }
    };
    $http.post('http://localhost:7000/eth/checkCoinBalance', data, config)
        .then(function successCallback(resp) {
                if (resp.data.success == 'true') {
                    console.log(resp.data.data[0].balance);
                    $scope.coinBalance = resp.data.data[0].balance;
                }
            },
            function failureCallback() {
                console.log('failure');
            });
}

Puede llamar a esto checkCoinBalance()con un clic de botón más o menos.