In the previous blog we created a smart contract in solidity and accessed it using the nodejs console. Here we will access it using a static web page. This will help us learn the Javascript that goes into invocations of the ethereum contract. We will be copying the 5 or 6 lines of javascript invocation calls we used last time after the contract is deployed.
Again this is a simplistic view. Every impression needs to be recorded using some gas from the account. This will turn out to be expensive. In the next blog we will attempt to overcome this issue using channels. After that we will deploy our web pages using truffle.
These two files can be kept in the same folder where we kept the solc files except for the fact that they should be work together. The HTML simply has a text box to post impressions. Tomorrow in a real world scenario we will replace with values posted from the beacon on client or AdServer.
Sample Impression DApp
<!--
<a href="https://cdn.rawgit.com/ethereum/web3.js/develop/dist/web3.js">https://cdn.rawgit.com/ethereum/web3.js/develop/dist/web3.js<//a>
<a href="https://code.jquery.com/jquery-3.1.1.slim.min.js">https://code.jquery.com/jquery-3.1.1.slim.min.js</a>
<a href="http://./index.js">http://./index.js</a>
Sample Impression DApp
<h1>Access Ad Impression Smart Contract</h1>
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>Entity</th>
<th>Impression</th>
</tr>
</thead>
<tbody>
<tr>
<td>Advertiser</td>
<td id="advertiser"></td>
</tr>
<tr>
<td>Publisher</td>
<td id="publisher"></td>
<//tr>
<//tbody>
<//table>
<//div>
<a href="#" class="btn btn-primary">Impression Increment</a>
I have intentionally used few slashes extra to escape the WordPress html formatting.
We need to ensure that deployed address is available using the nodeJS console. Even the inserted interface script is one copied from the script tag when we compile code by solc.
web3 = new Web3();
web3.setProvider(new Web3.providers.HttpProvider("http://localhost:8545"));
abi = JSON.parse('[{"constant":false,"inputs":[{"name":"sender","type":"bytes32"}],"name":"increment","outputs":[{"name":"","type":"bool"}],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[{"name":"sender","type":"bytes32"}],"name":"getImpressions","outputs":[{"name":"","type":"uint8"}],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[{"name":"","type":"bytes32"}],"name":"impressionsLedger","outputs":[{"name":"","type":"uint8"}],"payable":false,"stateMutability":"view","type":"function"},{"inputs":[{"name":"_entity","type":"bytes32[]"}],"payable":false,"stateMutability":"nonpayable","type":"constructor"}]')
AdImpression = web3.eth.contract(abi);
// In your nodejs console, execute contractInstance.address to get the address at which the contract is deployed and change the line below to use your deployed address
contractInstance = AdImpression.at('0xca50e64ec65c7cd1fd15404149ff880b7d91efce');
sender = "hello";
function increment() {
entityName = $("#entity").val();
contractInstance.increment(entityName, {from: web3.eth.accounts[1]}, function() {
// let div_id = candidates[candidateName];
$("#" + "advertiser").html(contractInstance.getImpressions.call("Rama").toString());
$("#" + "publisher").html(contractInstance.getImpressions.call("Nick").toString());
});
}
$(document).ready(function() {
let val = contractInstance.getImpressions.call("Rama").toString()
$("#" + "advertiser").html(val);
let val2 = contractInstance.getImpressions.call("Nick").toString()
$("#" + "advertiser").html(val);
});
The updates might have to wait for transactions to be committed.
Learning Ledger 