Connect HTML Interface to Ethereum Private Chain – How to Guide

contract-developmentcontract-invocationgo-ethereumsolidity

I'm trying to learn smart contract development and test my contracts.

Before, I used truffle, Metamask and testrpc to test my contracts; and it took care of how to interact my HTML page to the local chain.

Now I'm using "geth" and a private blockchain in Ethereum (I'll explain all the steps shortly). I can deploy my contract using geth. I can interact with the deployed contract using geth console. But I don't know how to connect my HTML file to my blockchain.

Question 1: How can I connect my HTML user interface to private blockchain?

Question 2: Do I need to use Metamask when I'm using the private chain? If yes, how can I log into Metamask? as the private chain doesn't provide any 12 words phrase that Metamask needs (testrpc provides it).

My contract is very very simple: 

pragma solidity ^0.4.4;

contract T2{

 uint public k2;
 function T2(){
  k2=32; 
} }

The steps I take are as follows:

step 1- 

 geth --identity "MyNodeName" --rpc --rpcport "8545" --rpccorsdomain 
"*" --datadir Users/xx/TestChain1 --port "30303" --rpcaddr "127.0.0.1" 
 --nodiscover --rpcapi "db,eth,net,web3" --networkid 123 
 init/Users/xx/CustomGenesis.json

step 2- 

 geth --identity "MyNodeName" --rpc --rpcport "8545" --rpccorsdomain "*" 
--datadir Users/aydinabadi/TestChain1 --port "30303" --nodiscover --
rpcapi "db,eth,net,web3" --networkid 123 console

step 3-

unlock my account on the console and deploy my contract: i.e. I put my contract on remix, run it and copy the content of "Web3 deploy". Then paste it on the geth console.

My .js file is: 

import "../stylesheets/app.css";
import { default as Web3} from 'web3';
 var 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://localhost:8545"));
 }

 var abi=[{"constant":true,"inputs":[],"name":"k2","outputs":
 [{"name":"","type":"uint256"}],"payable":false,"type":"function"},
 {"inputs":[],"payable":false,"type":"constructor"}];

 var ins=web3.eth.contract(abi);
 var instance= ins.at("0x863c7b1600b9312f85501dbc933a862b63dad374");
 var accounts;
 var account;
 var account2;
 window.App = {
 start: function() {
 web3.eth.getAccounts(function(err, accs) {
  if (err != null) {
    alert("There was an error fetching your accounts.");
    return;
  }

  if (accs.length == 0) {
    alert("Couldn't get any accounts! Make sure your Ethereum client is 
  configured correctly.");
    return;
  }
  accounts = accs;
  account = accounts[0];
  account2 = accounts[1];
  });
   },
  setStatus: function(message) {
  var status = document.getElementById("status");
  status.innerHTML = message;
   },


  k2: function() {
  var spec6 = document.getElementById("spec6");
  var val= instance.k2.call();
  spec6.innerHTML = val.valueOf();

  },
  };

and my HTML file is: 

 <!DOCTYPE html>
<html lan="en">
<head>
<script src="./app.js"></script>
<body>
<div class="col-sm-4">
 <br><br><button id="send" onclick="App.k2()">Get value</button>
 <span style="padding-left:130px;"> <span style="padding-left:200px;"  
id="spec6"></span>
 <br>
</div>
</body>
</html>

Best Answer

For Question 1 :

You don't need metamask to connect to private chain, even to a testnet or a live net if you have a full node running locally, meta mask provides a similar to a light client when you can't run a full node.

For Question 2:

Your onClick function doesn't refer to the function in the app.js since App is not defined.

Related Topic