0

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.

  • It should be possible. What code did you try running in the browser? If you embed the contract ABI you don't need to read the json file and your example should include onlye web3 in your html page. – Ismael Feb 13 at 5:10
  • This is my html code: <!DOCTYPE html> <html lang="en"> <head> <title>TEST</title> </head> <body> <script src="js/bootstrap.min.js"></script> <script src="js/web3.min.js"></script> <script src="js/truffle-contract.js"></script> <script src='js/app.js'> </script> <script> </script> </body> </html> – Alireza Feb 13 at 7:57
  • I didn't apply any command to see the value in the html code because i don't know what is appropriate. – Alireza Feb 13 at 7:58
0

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 ...")});
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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