How to create an interaction between a smart contract and a HTML file with Node-js?

Question

My Truffle project is this contract that just shows Yerevan is love:

pragma solidity ^0.5.12;

contract TEST{
string public note="Yerevan is love";
function rep() public view returns(string memory){
return note;
}
}

And by the following code i can see Yerevan is love in Node-js:

var Web3=require('web3');
var web3=new Web3('ws://localhost:8545');
var test_json='C:/Users/lenovo/node_modules/Yerevan/build/contracts/TEST.json';
var test_js=JSON.parse(fs.readFileSync(test_json));
var test_abi=test_js.abi;
var test_sol=new web3.eth.Contract(test_abi, '0xb198a5509138b265234BbD357F77cF44350e10D1');   
    test_sol.methods.rep().call().then(function(o){console.log(o);});

I want to see the result in my browser. How can i create an interaction between the smart contract and a HTML file, by Node-js, to see the result in my browser?. If yes please provide its appropriate code and a guide for beginner me.

Answer 1

To view smart contract’s results in browser you should have a .html file that includes some codes. We call it index.html. We suppose the purpose is representation Yerevan is love in browser with alert();. Moreover, we suppose 1408 is the port you work on it and whenever html request is message-representation the given data be represented. User can change these values as it desires. The code provided here puts JavaScript commands in Node-js and we suppose TEST deployed beforehand.

We need to use a .jade file. For that you need to know what is Engine PUG and its applications. In order to an introduction we offer this link to an overview: https://www.sitepoint.com/a-beginners-guide-to-pug/

In the following, we will see how to create a .jade file.

Now, we go through the following steps:

0- With the followed commands install required modules for your project directory:

`npm install jade`
npm install pug
npm install express
npm install body-parser
npm install fs

1- Open Node-js file that generally called app.js and apply some modules by writing the below code in the file:

    var Web3=require("web3");
    var web3=new Web3("ws://localhost:8545");//if your port is other than 8545 put it instead.
    var express=require("express");
    var fs=require("fs");
    var bodyParser=require("body-parser");
    var app=express();
        app.use(bodyParser.json());
        app.use(bodyParser.urlencoded({extended:false}));
      app.use(express.static("C:/Users/lenovo/node_modules/Yerevan/src/js"));

2- Write the below code to work with Engine PUG:

app.set("view engine","pug");
app.set("views","./view");//shows the directory that index.jade is there.

3- Add the below code to define your deployed smart contract:

    var test_json="C:/Users/lenovo/node_modules/Yerevan/build/contracts/TEST.json";
    var test_js=JSON.parse(fs.readFileSync(test_json));
    var test_abi=test_js.abi;

4- You connect with the defined smart contract with the followed code:

app.get("/message-representation", async function(request, response){//This line is to respond against the html request with .../message-representation.
        var test=new web3.eth.Contract(test_abi," 0xb198a5509138b265234BbD357F77cF44350e10D1");
        var result=await test.methods.fname().call()//Using .call() this transaction won't be recorded in the ledger.
        //var result=await test.methods.fname().send({from: "0x1FE41Da4Df440D72dC598a430AF783d51De4d92C", gas: 100000, gasPrice:10000});//Using .send() this transaction will be recorded in the ledger but you will see an object not its value.
        //Just one of two above commands must be applied.
            response.render('index.jade', {data:result});//This line returns contract's data to the browser.
        });

5- By the followed code, we tell Node-js to listen the given port:

app.listen(1408, err=>{console.log("Processing ...")});

6- Write the below command in index.html in an appropriate line:

alert("#{data}");

Generally, "#{X}" in index.html file is that same variable X in Node-js to which smart contract’s data value assigned. In this example we call it data.

7- Go to html2jade.org and copy&paste whole code of index.html there. A jade version of the html file will be generated. Copy&paste the jade text in a file and save it as index.jade and in the path determined in step 2 (“./view”).

8- Activate the Node-js. Open your browser and enter the followed html request:

localhost:1408/message-representation

9- See the result.

Whole code of the solution:

var Web3=require("web3");
var web3=new Web3("ws://localhost:8545");//if your port is other than 8545 put it instead.
var express=require("express");
var fs=require("fs");
var bodyParser=require("body-parser");
var app=express();
       app.use(bodyParser.json());
       app.use(bodyParser.urlencoded({extended:false}));
       app.use(express.static("E:/Emrooz/src/js"));
       app.set("view engine","pug");
       app.set("views","./view");//shows the directory that index.jade is there.
    var test_json="E:/Emrooz/build/contracts/TEST.json";
    var test_js=JSON.parse(fs.readFileSync(test_json));
    var test_abi=test_js.abi;
       app.get("/message-representation", async function(request, response){//This line is to respond against the html request with .../message-representation.
        var test=new web3.eth.Contract(test_abi,"0x955e2139A28111203C0a648d0513b302F7Af079C");
        var result=await test.methods.fname().call()//Using .call() this transaction won't be recorded in the ledger.
        //var result=await test.methods.fname().send({from: "0x1FE41Da4Df440D72dC598a430AF783d51De4d92C", gas: 100000, gasPrice:10000});//Using .send() this transaction will be recorded in the ledger but you will see an object not its value.
        //Just one of two above commands must be applied.
            response.render('index.jade', {data:result});//This line returns contract's data to the browser.
        });
       app.listen(1408, err=>{console.log("Processing ...")});