{"id":2719,"date":"2018-12-17T23:21:50","date_gmt":"2018-12-17T17:51:50","guid":{"rendered":"http:\/\/navveenbalani.dev\/?p=2719"},"modified":"2019-12-18T17:31:21","modified_gmt":"2019-12-18T12:01:21","slug":"integrating-smart-contract-with-web-app","status":"publish","type":"post","link":"https:\/\/navveenbalani.dev\/index.php\/articles\/integrating-smart-contract-with-web-app\/","title":{"rendered":"Integrating Smart Contract with Web App"},"content":{"rendered":"\n<p>In this section, we would create a front-end web application that\nwould execute our smart contract. As mentioned earlier, the DApp comprises of a\nfrontend and a blackened code. We implemented the backend code for our\ncrowdsourcing application using smart contract. Now, to interact with the smart\ncontract and the blockchain network using a frontend application, we have a\nwide range of options. You can develop using the Web3.js JavaScript library or\ninstall a framework like Truffle that provides a development and testing\nenvironment for building DApp.<\/p>\n\n\n\n<p>For our use case, we would use the Web3.js library to interact with\nour smart contract.&nbsp; We will execute the\nsame steps we carried out in Use Case 2, but this time, we would call the Stop\nFund Raising method of the contract through the user interface and check the\nstatus of the project once the block has been committed to our local blockchain\nnetwork. <\/p>\n\n\n\n<p>To get started, carry out steps 1 -5 as listed in Use Case 2 as a\nprerequisite. Next, navigate to ethereum\/web folder of the downloaded source\ncode location and open the home.html in any editor. Let\u2019s look at some of the\nimportant code snippets.<\/p>\n\n\n\n<p>In home.html, we first&nbsp; add\nweb3.js library.<\/p>\n\n\n\n<p>&lt;script type=&#8221;text\/javascript&#8221;\nsrc=&#8221;web3.js&#8221;&gt;&lt;\/script&gt;<\/p>\n\n\n\n<p>Next, we specify the public address of the contract. Replace the below\naddress with the address of the contract you created for this use case. (Tip:\nClick on the newly created contract address in Ethereum Wallet and select <em>copy address<\/em> on the contract page)<\/p>\n\n\n\n<p>var contract_address =\n&#8220;0x0EfBae3f8e3bc34b4A77E07c75dFd9f9A32f6bA2&#8221;;<\/p>\n\n\n\n<p>Next, we will initialize a variable with the contract details in JSON format. To get these details, click the <em>Show Interface<\/em> icon, as shown below, on the contract page and you will the relevant contract information in JSON format.&nbsp; <\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" width=\"240\" height=\"216\" src=\"https:\/\/navveenbalani.dev\/wp-content\/uploads\/2019\/12\/image-61.png\" alt=\"\" class=\"wp-image-2720\"\/><figcaption><br><br><\/figcaption><\/figure>\n\n\n\n<p>We have defined the contract_abi variable and initialized it with the\nabove contract details.<\/p>\n\n\n\n<p>var contract_abi = [ { &#8220;constant&#8221;: true,\n&#8220;inputs&#8221;: [], &#8220;name&#8221;: &#8220;fundingproject&#8221;,\n&#8220;outputs&#8221;: [ { &#8220;name&#8221;: &#8220;name&#8221;, &#8220;type&#8221;:\n&#8220;string&#8221;, &#8220;value&#8221;: &#8220;g&#8221; }, { &#8220;name&#8221;:\n&#8220;email&#8221;, \u2026.. &#8220;payable&#8221;: false, &#8220;type&#8221;:\n&#8220;constructor&#8221; } ]<\/p>\n\n\n\n<p>Next, we create the Web3 instance by providing the endpoint\naddress&nbsp; of our running Ethereum\ninstance.<\/p>\n\n\n\n<p>web3 = new Web3(new\nWeb3.providers.HttpProvider(&#8220;http:\/\/127.0.0.1:8545&#8221;));<\/p>\n\n\n\n<p>Next, we create the instance of contract by providing the contract\ndetails as part of contract_abi variable&nbsp;\nand address of the contract.<\/p>\n\n\n\n<p>var contract_instance =\nweb3.eth.contract(contract_abi).at(contract_address);<\/p>\n\n\n\n<p>In our HTML page, we have added a button named <em>Stop Fund Raising<\/em>, once clicked will invoke the <em>getStatus()<\/em> method. The <em>getStatus()<\/em> method calls the <em>stopFundRaising()<\/em> method on the contract\ninstance. To execute the operations on the contract, we also provide the\naccount (the Main Account for this example), which would pay the transaction\nfee to execute this transaction on the blockchain network. While running this,\nreplace the \u2018<em>passw0rd\u2019<\/em> value in the <em>unlockAccount<\/em> method below, with the\npassword of your Main account.<\/p>\n\n\n\n<p>&nbsp;The following&nbsp; shows the <em>getStatus()<\/em> method.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function getStatus() {\n\n\/\/Unlock main Ether Base account and replace password with your account password\n\/\/This is a demo setup only, get this value through secured login credentials in actual environment\n            web3.personal.unlockAccount(web3.eth.accounts[0], 'passw0rd');\n\/\/Call the Stop Fund Raising method\n            contract_instance.stopFundRaising({from: web3.eth.accounts[0]}, function(error, result) {\n                if(error) {\n                    console.error(error);\n                } else {\n                    var hash = result;\n                    console.log(\"hash\"+hash);\n                    checkHashStatus(hash, updateStatusFromContract);\n                }\n            });\n        }\n<\/code><\/pre>\n\n\n\n<p>Now, once the <em>stopFundRaising<\/em> method is executed, the transaction will be committed as a block in the blockchain network. As we are running this on the local network, it shouldn\u2019t take more than a minute or so to execute. To track the transaction, we will store the returned hashed value of the submitted transaction. We then call the <em>getTransactionReceipt() <\/em>method passing the hash value as a parameter. The said method will be invoked recursively every one minute to check for the valid returned object. If the method returns a valid object, it implies the block is committed, and the transaction is complete. The following code snippet shows the <em>checkHashStatus()<\/em> which makes a call to the<em> getTransactionReceipt() <\/em>of the web3 API:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function checkHashStatus(hash, callback) {\nweb3.eth.getTransactionReceipt(hash, function(error, rcpt) {\n                if(error) {\n                    console.error(error);\n                } else {\n                    if(rcpt == null) {\n                        setTimeout(function() {\n\/\/call iteratively till hash matches and block is mined\n                            checkHashStatus(hash, callback);\n                        }, 1000);\n                    } else {\n                        console.log(rcpt)\n                        \/\/call the function once block is committed\n                        callback();\n                    }\n                }\n            })\n        }\n<\/code><\/pre>\n\n\n\n<p>We also print the response from the <em>getTransactionReceipt()<\/em> method on the\nbrowser console, and you can verify the hash, block number, address (contract\naddress) and other details like gas used for this transaction.<\/p>\n\n\n\n<p>{blockHash:\n&#8220;0x739f8a73aa5e7ccca62be65d2f43be732c82ac02693d298ce2af64354be9ee1b&#8221;,\nblockNumber: 39659, contractAddress: null, cumulativeGasUsed: 32083, from:\n&#8220;0x6b8dc00c09dd3c240c0b964ccec6baf07ab038a5&#8221;,&nbsp;to:&#8221;0x290298bf15d9546850161e3046233801f2488523&#8243;\u2026}<\/p>\n\n\n\n<p>Once we receive the transaction receipt, we print the status of the\nproject on the html page as shown below. The status is fetched by invoking the <em>getProjectStatus()<\/em> method on the\ncontract instance. The method returns the status as \u2018Funding Stopped\u2019.<\/p>\n\n\n\n<p>document.getElementById(&#8220;status&#8221;).innerText =&nbsp;&nbsp; contract_instance.getProjectStatus();<\/p>\n\n\n\n<p>This completes one end-to-end transaction\nof a web application invoking a smart contract. <\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>Note &#8211; The above example uses ether\ntokens for crowdfunding. As a next step, you can create your own digital token\nfor crowdfunding. You can extend the ECR20 Token Contract (<a href=\"https:\/\/theethereum.wiki\/w\/index.php\/ERC20_Token_Standard\">https:\/\/theethereum.wiki\/w\/index.php\/ERC20_Token_Standard<\/a>) as the starting point to create\nyour own Initial Coin offering (ICO) and club it with the crowd funding\ncontract logic, which will use&nbsp; your\ncoins for fund raising. Investors\/Participant would invest in your idea by\nbuying your tokens with a hope that their investment and value in tokens\nmultiplies based on the success of the funded project.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>In the <a href=\"https:\/\/navveenbalani.dev\/index.php\/articles\/extensions-to-ethereum-platform\/\">next article<\/a>, we look at some of the challenges of Ethereum platform<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this section, we would create a front-end web application that would execute our smart contract. As mentioned earlier, the DApp comprises of a frontend and a blackened code. We implemented the backend code for our crowdsourcing application using smart contract. Now, to interact with the smart contract and the blockchain network using a frontend [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[3,174],"tags":[286],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v16.0.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Integrating Smart Contract with Web App - Current and Future Technology Trends by Navveen Balani<\/title>\n<meta name=\"description\" content=\"Integrating Smart Contract with Web App - Articles\" \/>\n<link rel=\"canonical\" href=\"https:\/\/navveenbalani.dev\/index.php\/articles\/integrating-smart-contract-with-web-app\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Integrating Smart Contract with Web App - Current and Future Technology Trends by Navveen Balani\" \/>\n<meta property=\"og:description\" content=\"Integrating Smart Contract with Web App - Articles\" \/>\n<meta property=\"og:url\" content=\"https:\/\/navveenbalani.dev\/index.php\/articles\/integrating-smart-contract-with-web-app\/\" \/>\n<meta property=\"og:site_name\" content=\"Current and Future Technology Trends by Navveen Balani\" \/>\n<meta property=\"article:published_time\" content=\"2018-12-17T17:51:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-12-18T12:01:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/navveenbalani.dev\/wp-content\/uploads\/2019\/12\/image-61.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"5 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/navveenbalani.dev\/#website\",\"url\":\"https:\/\/navveenbalani.dev\/\",\"name\":\"Current and Future Technology Trends by Navveen Balani\",\"description\":\"Current and Future Technology Trends by Navveen Balani\",\"publisher\":{\"@id\":\"https:\/\/navveenbalani.dev\/#\/schema\/person\/51f7ab14b20611d95e3c7fd4ea0950bf\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/navveenbalani.dev\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/navveenbalani.dev\/index.php\/articles\/integrating-smart-contract-with-web-app\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/navveenbalani.dev\/wp-content\/uploads\/2019\/12\/image-61.png\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/navveenbalani.dev\/index.php\/articles\/integrating-smart-contract-with-web-app\/#webpage\",\"url\":\"https:\/\/navveenbalani.dev\/index.php\/articles\/integrating-smart-contract-with-web-app\/\",\"name\":\"Integrating Smart Contract with Web App - Current and Future Technology Trends by Navveen Balani\",\"isPartOf\":{\"@id\":\"https:\/\/navveenbalani.dev\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/navveenbalani.dev\/index.php\/articles\/integrating-smart-contract-with-web-app\/#primaryimage\"},\"datePublished\":\"2018-12-17T17:51:50+00:00\",\"dateModified\":\"2019-12-18T12:01:21+00:00\",\"description\":\"Integrating Smart Contract with Web App - Articles\",\"breadcrumb\":{\"@id\":\"https:\/\/navveenbalani.dev\/index.php\/articles\/integrating-smart-contract-with-web-app\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/navveenbalani.dev\/index.php\/articles\/integrating-smart-contract-with-web-app\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/navveenbalani.dev\/index.php\/articles\/integrating-smart-contract-with-web-app\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"item\":{\"@type\":\"WebPage\",\"@id\":\"https:\/\/navveenbalani.dev\/\",\"url\":\"https:\/\/navveenbalani.dev\/\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"position\":2,\"item\":{\"@type\":\"WebPage\",\"@id\":\"https:\/\/navveenbalani.dev\/index.php\/articles\/integrating-smart-contract-with-web-app\/\",\"url\":\"https:\/\/navveenbalani.dev\/index.php\/articles\/integrating-smart-contract-with-web-app\/\",\"name\":\"Integrating Smart Contract with Web App\"}}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/navveenbalani.dev\/index.php\/articles\/integrating-smart-contract-with-web-app\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/navveenbalani.dev\/index.php\/articles\/integrating-smart-contract-with-web-app\/#webpage\"},\"author\":{\"@id\":\"https:\/\/navveenbalani.dev\/#\/schema\/person\/51f7ab14b20611d95e3c7fd4ea0950bf\"},\"headline\":\"Integrating Smart Contract with Web App\",\"datePublished\":\"2018-12-17T17:51:50+00:00\",\"dateModified\":\"2019-12-18T12:01:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/navveenbalani.dev\/index.php\/articles\/integrating-smart-contract-with-web-app\/#webpage\"},\"publisher\":{\"@id\":\"https:\/\/navveenbalani.dev\/#\/schema\/person\/51f7ab14b20611d95e3c7fd4ea0950bf\"},\"image\":{\"@id\":\"https:\/\/navveenbalani.dev\/index.php\/articles\/integrating-smart-contract-with-web-app\/#primaryimage\"},\"keywords\":\"blockchain-guide\",\"articleSection\":\"Articles,Blockchain\",\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/navveenbalani.dev\/#\/schema\/person\/51f7ab14b20611d95e3c7fd4ea0950bf\",\"name\":\"Navveen\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/navveenbalani.dev\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/navveenbalani.dev\/wp-content\/uploads\/2019\/07\/navveen_balani.jpeg\",\"width\":200,\"height\":200,\"caption\":\"Navveen\"},\"logo\":{\"@id\":\"https:\/\/navveenbalani.dev\/#personlogo\"},\"sameAs\":[\"http:\/\/naveenbalani.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/navveenbalani.dev\/index.php\/wp-json\/wp\/v2\/posts\/2719"}],"collection":[{"href":"https:\/\/navveenbalani.dev\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/navveenbalani.dev\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/navveenbalani.dev\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/navveenbalani.dev\/index.php\/wp-json\/wp\/v2\/comments?post=2719"}],"version-history":[{"count":3,"href":"https:\/\/navveenbalani.dev\/index.php\/wp-json\/wp\/v2\/posts\/2719\/revisions"}],"predecessor-version":[{"id":2774,"href":"https:\/\/navveenbalani.dev\/index.php\/wp-json\/wp\/v2\/posts\/2719\/revisions\/2774"}],"wp:attachment":[{"href":"https:\/\/navveenbalani.dev\/index.php\/wp-json\/wp\/v2\/media?parent=2719"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/navveenbalani.dev\/index.php\/wp-json\/wp\/v2\/categories?post=2719"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/navveenbalani.dev\/index.php\/wp-json\/wp\/v2\/tags?post=2719"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}