{"id":3638,"date":"2020-03-18T11:00:00","date_gmt":"2020-03-18T10:00:00","guid":{"rendered":"https:\/\/www.codemotion.com\/magazine\/?p=3638"},"modified":"2021-07-08T17:01:34","modified_gmt":"2021-07-08T15:01:34","slug":"smart-contract-create-interface-token-blockchain","status":"publish","type":"post","link":"https:\/\/www.codemotion.com\/magazine\/backend\/blockchain\/smart-contract-create-interface-token-blockchain\/","title":{"rendered":"Creating the interface of a smart contract"},"content":{"rendered":"\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\tTable Of Contents\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
  1. Introduction<\/a>
  2. Smart contract: building a simple interface<\/a><\/ol>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\r\n\r\n\r\n

    Introduction<\/h2>\r\n\r\n\r\n\r\n

    In previous articles in this series, we learned how a basic contract is made<\/a>, and discovered that Ethereum Studio<\/a> is a simple and easy way to develop and deploy on a testnet. We demonstrated how to build a simple web interface using the Web3.js<\/strong> Javascript framework to handle user interaction via web browser. With that in mind, in this chapter we will go through an example of a web page, and in the following (and final) chapter, we\u2019ll see how web3 is actually implemented in order to connect the smart contract to a web page.<\/p>\r\n\r\n\r\n\r\n

    This article is part four of a series on how to create an ERC-20 token<\/strong>. If you want to begin from scratch, please read part one<\/a>, part two<\/a> and part three<\/a> of this series first (here’s part five<\/a>).<\/p>\r\n\r\n\r\n\r\n

    Smart contract: building a simple interface<\/h2>\r\n\r\n\r\n\r\n

    Web3.js is the Javascript framework<\/a> that allows users to interact with the Blockchain. To implement a smart contract with an interactive interface, we must build a simple web page.<\/p>\r\n\r\n\r\n\r\n

    We begin by creating an HTML file:<\/p>\r\n\r\n\r\n

    <!DOCTYPE html<\/span>><\/span>\r\n<html<\/span> lang<\/span>=\"en\"<\/span>><\/span>\r\n\/\/ here lies the smart contract interface\r\n<\/html<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\r\n\r\n\r\n
    Then, we need to configure the metadata in the header. We load jQuery and Web3.js packages:<\/p>\r\n\r\n\r\n
    <head<\/span>><\/span>\r\n    <meta<\/span> charset<\/span>=\"utf-8\"<\/span>><\/span>\r\n    <script<\/span> type<\/span>=\"text\/javascript\"<\/span> src<\/span>=\"https:\/\/unpkg.com\/jquery@3.3.1\/dist\/jquery.js\"<\/span>><\/span><\/script<\/span>><\/span>\r\n    <script<\/span> type<\/span>=\"text\/javascript\"<\/span> src<\/span>=\"https:\/\/unpkg.com\/web3@0.20.5\/dist\/web3.min.js\"<\/span>><\/span><\/script<\/span>><\/span>\r\n<\/head<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\r\n\r\n\r\n
    Then we can actually design the interface<\/strong>. In this example, we are going to create a user interface that has two sections: the first will let users create an address with an attached amount of token, whilst the second will check the balance of an address.<\/p>\r\n\r\n\r\n\r\n
    Here is the first section:<\/p>\r\n\r\n\r\n
    <body<\/span>><\/span>\r\n    <div<\/span> id<\/span>=\"create\"<\/span> class<\/span>=\"tabcontent\"<\/span>><\/span>\r\n        <h2<\/span>><\/span>Create new coins<\/h2<\/span>><\/span>\r\n        <div<\/span> class<\/span>=\"input-group\"<\/span>><\/span>\r\n            <h3<\/span>><\/span>Address<\/h3<\/span>><\/span>\r\n            <input<\/span> type<\/span>=\"text\"<\/span> id<\/span>=\"create-address\"<\/span> placeholder<\/span>=\"Enter address\"<\/span> \/><\/span>\r\n        <\/div<\/span>><\/span>\r\n        <div<\/span> class<\/span>=\"input-group\"<\/span>><\/span>\r\n            <h3<\/span>><\/span>Amount<\/h3<\/span>><\/span>\r\n            <input<\/span> type<\/span>=\"number\"<\/span> id<\/span>=\"create-amount\"<\/span> placeholder<\/span>=\"Enter amount...\"<\/span> \/><\/span>\r\n        <\/div<\/span>><\/span>\r\n        <div<\/span> class<\/span>=\"input-group\"<\/span>><\/span>\r\n            <button<\/span> class<\/span>=\"btn\"<\/span> id<\/span>=\"button-create\"<\/span>><\/span>Send<\/button<\/span>><\/span>\r\n        <\/div<\/span>><\/span>\r\n    <\/div<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\r\n\r\n\r\n
    And here is the second section:<\/p>\r\n\r\n\r\n
        <div<\/span> id<\/span>=\"balances\"<\/span> class<\/span>=\"tabcontent\"<\/span>><\/span>\r\n        <h2<\/span>><\/span>Check balance of wallet<\/h2<\/span>><\/span>\r\n        <div<\/span> class<\/span>=\"input-group\"<\/span>><\/span>\r\n            <h3<\/span>><\/span>Address<\/h3<\/span>><\/span>\r\n            <input<\/span> type<\/span>=\"text\"<\/span> id<\/span>=\"balance-address\"<\/span> placeholder<\/span>=\"Enter address...\"<\/span> \/><\/span>\r\n        <\/div<\/span>><\/span>\r\n        <div<\/span> class<\/span>=\"input-group\"<\/span>><\/span>\r\n            <button<\/span> class<\/span>=\"btn\"<\/span> id<\/span>=\"button-check\"<\/span>><\/span>Check balance<\/button<\/span>><\/span>\r\n        <\/div<\/span>><\/span>\r\n    <\/div<\/span>><\/span>\r\n\r\n    <h1<\/span> class<\/span>=\"text message\"<\/span>><\/span>Balance:\u00a0<span<\/span> id<\/span>=\"message\"<\/span>><\/span><\/span<\/span>><\/span><\/h1<\/span>><\/span>\r\n<\/body<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\r\n\r\n\r\n
    It\u2019s important to note that there\u2019s not even a single script within the HTML code. That\u2019s because the contract connects with the page through a .js<\/em> file that builds objects from the smart contract.<\/p>\r\n\r\n\r\n\r\n
    In the <div><\/code> elements, one can see the id<\/code> of every element: these will later be called by the .js<\/em> core to match the attributes in the smart contract.<\/p>\r\n\r\n\r\n\r\n
    Here\u2019s the complete HTML page:<\/p>\r\n\r\n\r\n
    <!DOCTYPE html<\/span>><\/span>\r\n<html<\/span> lang<\/span>=\"en\"<\/span>><\/span>\r\n\r\n<head<\/span>><\/span>\r\n    <meta<\/span> charset<\/span>=\"utf-8\"<\/span>><\/span>\r\n    <script<\/span> type<\/span>=\"text\/javascript\"<\/span> src<\/span>=\"https:\/\/unpkg.com\/jquery@3.3.1\/dist\/jquery.js\"<\/span>><\/span><\/script<\/span>><\/span>\r\n    <script<\/span> type<\/span>=\"text\/javascript\"<\/span> src<\/span>=\"https:\/\/unpkg.com\/web3@0.20.5\/dist\/web3.min.js\"<\/span>><\/span><\/script<\/span>><\/span>\r\n<\/head<\/span>><\/span>\r\n\r\n<body<\/span>><\/span>\r\n\r\n    <div<\/span> id<\/span>=\"create\"<\/span> class<\/span>=\"tabcontent\"<\/span>><\/span>\r\n        <h2<\/span>><\/span>Create new coins<\/h2<\/span>><\/span>\r\n        <div<\/span> class<\/span>=\"input-group\"<\/span>><\/span>\r\n            <h3<\/span>><\/span>Address<\/h3<\/span>><\/span>\r\n            <input<\/span> type<\/span>=\"text\"<\/span> id<\/span>=\"create-address\"<\/span> placeholder<\/span>=\"Enter address...\"<\/span> \/><\/span>\r\n        <\/div<\/span>><\/span>\r\n        <div<\/span> class<\/span>=\"input-group\"<\/span>><\/span>\r\n            <h3<\/span>><\/span>Amount<\/h3<\/span>><\/span>\r\n            <input<\/span> type<\/span>=\"number\"<\/span> id<\/span>=\"create-amount\"<\/span> placeholder<\/span>=\"Enter amount...\"<\/span> \/><\/span>\r\n        <\/div<\/span>><\/span>\r\n        <div<\/span> class<\/span>=\"input-group\"<\/span>><\/span>\r\n            <button<\/span> class<\/span>=\"btn\"<\/span> id<\/span>=\"button-create\"<\/span>><\/span>Send<\/button<\/span>><\/span>\r\n        <\/div<\/span>><\/span>\r\n    <\/div<\/span>><\/span>\r\n\r\n    <div<\/span> id<\/span>=\"balances\"<\/span> class<\/span>=\"tabcontent\"<\/span>><\/span>\r\n        <h2<\/span>><\/span>Check balance of wallet<\/h2<\/span>><\/span>\r\n        <div<\/span> class<\/span>=\"input-group\"<\/span>><\/span>\r\n            <h3<\/span>><\/span>Address<\/h3<\/span>><\/span>\r\n            <input<\/span> type<\/span>=\"text\"<\/span> id<\/span>=\"balance-address\"<\/span> placeholder<\/span>=\"Enter address...\"<\/span> \/><\/span>\r\n        <\/div<\/span>><\/span>\r\n        <div<\/span> class<\/span>=\"input-group\"<\/span>><\/span>\r\n            <button<\/span> class<\/span>=\"btn\"<\/span> id<\/span>=\"button-check\"<\/span>><\/span>Check balance<\/button<\/span>><\/span>\r\n        <\/div<\/span>><\/span>\r\n    <\/div<\/span>><\/span>\r\n\r\n    <h1<\/span> class<\/span>=\"text message\"<\/span>><\/span>Balance:\u00a0<span<\/span> id<\/span>=\"message\"<\/span>><\/span><\/span<\/span>><\/span><\/h1<\/span>><\/span>\r\n<\/body<\/span>><\/span>\r\n\r\n<\/html<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\r\n\r\n\r\n
    So, to recap:<\/p>\r\n\r\n\r\n\r\n