1

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>
Improve this question
7
  • what are the errors you get in your browser js console?
    – Achala Dissanayake
    Sep 20, 2017 at 18:05
  • @AchalaDissanayake Also, I realized when I call my deployed contract variable, it returns 0. In my question, I set "k2=32" but when I call k2 it returns 0 (in the console). Do you know why? thanks
    – Aydin
    Sep 20, 2017 at 19:42
  • returns 0 or undefined?
    – Achala Dissanayake
    Sep 20, 2017 at 19:48
  • change in html file onClick="k2()" and in js file k2 : function () to function k2() . Give it a try and tell me the console logs
    – Achala Dissanayake
    Sep 20, 2017 at 19:57
  • sure , comment here the outputs
    – Achala Dissanayake
    Sep 20, 2017 at 20:05

2 Answers 2

Reset to default
1

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.

Improve this answer
4
  • Thank you very much for your answer. I have two more questions: 1-how the client sign its transaction without using any wallet? 2- In general, how my HTLM connects itself to the private/live chain? thanks :)
    – Aydin
    Sep 21, 2017 at 9:33
  • since you are js file connect to your local node through web3, when you have an account unlocked (default account) , it signs transctions
    – Achala Dissanayake
    Sep 21, 2017 at 10:24
  • did you get the js file connected to the your chain? it's through the rpc port you open, js web3 access the chain through the port
    – Achala Dissanayake
    Sep 21, 2017 at 10:27
  • thanks, for the comments! Yes, everything is running fine so far.
    – Aydin
    Sep 21, 2017 at 11:17
0

First, you can connect Metamask to your localhost or any other network you would like. I posted some easy code examples (In answers) to integrate VanillaJS and Metamask with contracts. Hope it'll help :)

Sign Data with Metamask and Vanilla JS

How to convert contract ABI to HTML interface?

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.