How to create serverless applications for Mist | Ethereum Foundation Blog<\/title><meta name=\"title\" content=\"How to create serverless applications for Mist | Ethereum Foundation Blog\"\/><meta name=\"description\" content=\"\"\/><meta name=\"application-name\" content=\"Ethereum Foundation Blog\"\/><meta name=\"image\" content=\"https:\/\/blog.ethereum.org\/images\/eth-org.jpeg\"\/><meta property=\"og:title\" content=\"How to create serverless applications for Mist | Ethereum Foundation Blog\"\/><meta property=\"og:description\" content=\"\"\/><meta property=\"og:type\" content=\"website\"\/><meta property=\"og:site_name\" content=\"Ethereum Foundation Blog\"\/><meta property=\"og:url\" content=\"https:\/\/blog.ethereum.org\/2016\/07\/12\/build-server-less-applications-mist\"\/><meta property=\"og:image\" content=\"https:\/\/blog.ethereum.org\/images\/eth-org.jpeg\"\/><meta property=\"og:image:url\" content=\"https:\/\/blog.ethereum.org\/images\/eth-org.jpeg\"\/><meta property=\"og:image:secure_url\" content=\"https:\/\/blog.ethereum.org\/images\/eth-org.jpeg\"\/><meta property=\"og:image:alt\" content=\"Ethereum Foundation Blog\"\/><meta property=\"og:image:type\" content=\"image\/png\"\/><meta name=\"twitter:card\" content=\"summary_large_image\"\/><meta property=\"twitter:url\" content=\"https:\/\/blog.ethereum.org\/2016\/07\/12\/build-server-less-applications-mist\"\/><meta name=\"twitter:creator\" content=\"@ethereum\"\/><meta name=\"twitter:site\" content=\"@ethereum\"\/><meta name=\"twitter:title\" content=\"How to create serverless applications for Mist | Ethereum Foundation Blog\"\/><meta name=\"twitter:description\" content=\"\"\/><meta name=\"twitter:image\" content=\"https:\/\/blog.ethereum.org\/images\/eth-org.jpeg\"\/><link rel=\"icon\" href=\"https:\/\/blog.ethereum.org\/images\/favicon.png\"\/><link rel=\"canonical\" href=\"https:\/\/blog.ethereum.org\/2016\/07\/12\/build-server-less-applications-mist\"\/><link rel=\"preload\" as=\"image\" imagesrcset=\"\/_next\/image?url=%2Fimages%2Feth-org.jpeg&w=1080&q=75 1x, \/_next\/image?url=%2Fimages%2Feth-org.jpeg&w=3840&q=75 2x\"\/><meta name=\"next-head-count\" content=\"28\"\/><link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\"\/><link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin=\"true\"\/><link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\"\/><link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin=\"true\"\/><link rel=\"preconnect\" href=\"https:\/\/Y49Y4R9SYF-dsn.algolia.net\" crossorigin=\"true\"\/><link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/instantsearch.css@7.3.1\/themes\/reset-min.css\" integrity=\"sha256-t2ATOGCtAIZNnzER679jwcFcKYfLlw01gli6F6oszk8=\" crossorigin=\"anonymous\"\/><link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin=\"\"\/><link rel=\"preload\" href=\"https:\/\/blog.ethereum.org\/_next\/static\/css\/433fa9e02c79e69c.css\" as=\"style\"\/><link rel=\"stylesheet\" href=\"https:\/\/blog.ethereum.org\/_next\/static\/css\/433fa9e02c79e69c.css\" data-n-g=\"\"\/><noscript data-n-css=\"\"\/><\/head><body id=\"wp_automatic_ReadabilityBody\"><\/p>\n<div id=\"__next\">\n<div class=\"css-1b6n4o1\">\n<div dir=\"ltr\" class=\"css-1mbdz04\">\n<div class=\"css-117th2g\"><\/div>\n<div class=\"css-nizyf\"><img decoding=\"async\" alt=\"ETH bottom background ending image\" src=\"https:\/\/blog.ethereum.org\/images\/eth-bottom-right@2x.png\" class=\"chakra-image css-147f9zw\"\/><\/div>\n<\/div>\n<div class=\"css-13vzj2f\">\n<div class=\"chakra-container css-t26gxy\"><main><\/p>\n<h2 class=\"chakra-text css-1hp3qq6\">Published by Alex Van de Sande on July 12, 2016<\/h2>\n<div class=\"css-rszk63\">\n<div class=\"css-0\"><img decoding=\"async\" style=\"display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0\" alt=\"\" aria-hidden=\"true\" src=\"data:image\/svg+xml,%3csvg%20xmlns=%27http:\/\/www.w3.org\/2000\/svg%27%20version=%271.1%27%20width=%271064%27%20height=%27456%27\/%3e\"\/><\/span><img alt=\"How to create serverless applications for Mist\" srcset=\"\/_next\/image?url=%2Fimages%2Feth-org.jpeg&w=1080&q=75 1x, \/_next\/image?url=%2Fimages%2Feth-org.jpeg&w=3840&q=75 2x\" src=\"https:\/\/blog.ethereum.org\/_next\/image?url=%2Fimages%2Feth-org.jpeg&w=3840&q=75\" decoding=\"async\" data-nimg=\"intrinsic\" style=\"position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%\"\/><\/span><\/div>\n<\/div>\n<div class=\"chakra-stack css-6i8n52\">\n<div class=\"chakra-stack css-1kd73y8\">\n<article>\nEthereum is not envisioned to serve as a platform for constructing obscure smart contract applications that necessitate a STEM degree to comprehend; rather, it aspires to be a foundational element of a different framework for applications on the internet. This article aims to clarify how this can be achieved and provide some fundamental examples of how to initiate the creation of a decentralized application.<\/p>\n<\/p>\n<h2 class=\"chakra-heading css-1w54o5f\" id=\"who-is-this-for\">Who is the target audience?<\/h2>\n<\/p>\nThis article targets those with a basic grasp of web technologies and the ability to develop a simple JavaScript and HTML application, and desire to adapt these skills for building applications in the Ethereum ecosystem.<\/p>\n<\/p>\n<h2 class=\"chakra-heading css-1w54o5f\" id=\"how-can-apps-run-without-servers\">How can applications operate without servers?<\/h2>\n<\/p>\nCurrently, servers in web applications perform far more tasks than they were initially designed for. In addition to serving static pages, they also manage private data, oversee user authentication, and handle all the complex methods in which data is processed and stored. The only role of the user’s device \u2014 once considered a supercomputer at the inception of the web \u2014 is to load and present that data to the user.<\/p>\n<\/p>\n<a class=\"chakra-link css-ug8vf0\" href=\"https:\/\/blog.ethereum.org\/images\/posts\/2016\/07\/Screen-Shot-2016-07-08-at-5.27.25-PM.png\"><img decoding=\"async\" alt=\"Current server models\" src=\"https:\/\/blog.ethereum.org\/images\/posts\/2016\/07\/Screen-Shot-2016-07-08-at-5.27.25-PM.png\" class=\"chakra-image css-hw6q2r\"\/><\/a> Current server models<\/p>\n<\/p>\nIn contrast, a more decentralized structure would permit a significantly more modular approach, with various machines and protocols managing specific functions, some on the user’s end and others on specialized machines distributed throughout a peer-to-peer network. Thus, all Data logic (which data is stored, who stores it, conflict resolution, etc.) is managed by smart contracts on the blockchain, static files are delivered via <a target=\"_blank\" rel=\"noopener\" class=\"chakra-link css-ug8vf0\" href=\"http:\/\/swarm-gateways.net\/bzz:\/a600d48f01d5e6d07907d9d14db0ff205624caf0570d0c2601cdb80c9767bcb9\/index.html\"> Swarm <\/a> and real-time interaction is facilitated through <a target=\"_blank\" rel=\"noopener\" class=\"chakra-link css-ug8vf0\" href=\"https:\/\/github.com\/ethereum\/wiki\/wiki\/Whisper\"> Whisper<\/a>. The user’s device retains user authentication and operates the application’s interface.<\/p>\n<\/p>\nImplementing this model would diminish the risk of data breaches and attacks since fewer single nodes hold large amounts of unencrypted data, while also alleviating the burden and expenses of serving applications by spreading it across the network. Given that all these protocols are decentralized, anyone can access the network and begin offering a specialized service: if the user is browsingfrom a robust laptop, for example, they can likewise provide static files to neighboring networks.<\/p>\n<\/p>\n\u00a0<\/p>\n<\/p>\n<a class=\"chakra-link css-ug8vf0\" href=\"https:\/\/blog.ethereum.org\/images\/posts\/2016\/07\/Screen-Shot-2016-07-08-at-5.37.32-PM.png\"><img decoding=\"async\" alt=\"Decentralized Server models\" src=\"https:\/\/blog.ethereum.org\/images\/posts\/2016\/07\/Screen-Shot-2016-07-08-at-5.37.32-PM.png\" class=\"chakra-image css-hw6q2r\"\/><\/a> Decentralized Server models<\/p>\n<\/p>\nA decentralized framework also fosters creativity: as the interface is separate from the data, anyone is free to develop a new interface for the same application, thus cultivating a more dynamic and competitive environment. It could be said that one of the most fascinating and inventive phases in Twitter’s timeline occurred when it operated primarily as a central data source and allowed anyone to construct their own Twitter Application.<\/p>\n<\/p>\n<h2 class=\"chakra-heading css-1w54o5f\" id=\"see-it-working\">See it in action<\/h2>\n<\/p>\nIf you’re eager to test the app prior to fully understanding it, we suggest you <a target=\"_blank\" rel=\"noopener\" class=\"chakra-link css-ug8vf0\" href=\"https:\/\/github.com\/ethereum\/mist\/releases\/tag\/0.8.0\">download Mist and consult our beginner’s guide on how to set up and operate the application.<\/a> Alternatively, if you’re simply interested in viewing the entire application, it can be obtained directly from the <a target=\"_blank\" rel=\"noopener\" class=\"chakra-link css-ug8vf0\" href=\"https:\/\/github.com\/ethereum\/stake-voice\">Stake Voice Github repository<\/a>.<\/p>\n<\/p>\n\u00a0<\/p>\n<\/p>\n<a class=\"chakra-link css-ug8vf0\" href=\"https:\/\/blog.ethereum.org\/images\/posts\/2016\/07\/92730668-4473-11e6-8a49-fef5d43a1eb7-1.png\"><img decoding=\"async\" alt=\"Stake Voice operational on the Mist Browser\" src=\"https:\/\/blog.ethereum.org\/images\/posts\/2016\/07\/92730668-4473-11e6-8a49-fef5d43a1eb7-1.png\" class=\"chakra-image css-hw6q2r\"\/><\/a> Stake Voice operational on the Mist Browser<\/p>\n<\/p>\n<h2 class=\"chakra-heading css-1w54o5f\" id=\"lets-get-to-it\">Let\u2019s dive in<\/h2>\n<\/p>\nWe are set to create a straightforward application known as “Stake Voice”. The concept is to enable ether stakers to express their votes on any subject they choose, with the application tallying the total ether balance of all individuals who concur or dissent with the proposition.<\/p>\n<\/p>\nThe foundational contract of the application is crafted in <a target=\"_blank\" rel=\"noopener\" class=\"chakra-link css-ug8vf0\" href=\"https:\/\/solidity.readthedocs.io\/en\/latest\/\">Solidity<\/a>, a javascript-like syntax which is quite elementary:<\/p>\n<\/p>\n<div class=\"chakra-stack css-1uyok63\">\n<pre><pre style=\"color:white;font-family:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;font-size:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:0.5em 0;overflow:auto;background:#011627\"><code class=\"language-bash\" style=\"color:#d6deeb;font-family:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;font-size:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none\">contract EtherVote <\/span>{<\/span>\n<\/span> \u00a0\u00a0\u00a0event LogVote<\/span>(<\/span>bytes32 indexed proposalHash, bool pro, address addr<\/span>)<\/span>;<\/span>\n<\/span> \u00a0\u00a0\u00a0<\/span>function<\/span> vote<\/span>(<\/span>bytes32 proposalHash, bool pro<\/span>)<\/span> <\/span>{<\/span>\n<\/span> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>if<\/span> <\/span>(<\/span>msg.value <\/span>><\/span> <\/span>0<\/span>)<\/span> throw<\/span>;<\/span>\n<\/span> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0LogVote<\/span>(<\/span>proposalHash, pro, msg.sender<\/span>)<\/span>;<\/span>\n<\/span> \u00a0\u00a0\u00a0<\/span>}<\/span>\n<\/span> \u00a0\u00a0\u00a0<\/span>function<\/span> <\/span>(<\/span>)<\/span> <\/span>{<\/span> throw<\/span>;<\/span> <\/span>}<\/span>\n<\/span><span\/>}<\/span><\/code><\/pre>\n<\/div>\n<\/p>\nThe initial line establishes the contract name and the subsequent line generates an event titled “LogVote”, which will record the following in the logs:<\/p>\n<\/p>\n<ul role=\"list\" class=\"css-1onhfjo\">\n<li class=\"css-cvpopp\">a hash of the proposal under voting<\/li>\n<li class=\"css-cvpopp\">whether the voter is in favor or against it<\/li>\n<li class=\"css-cvpopp\">the voter’s address<\/li>\n<\/ul>\n<\/p>\nThe “vote” function will subsequently trigger the log, which the application will later tally. Additionally, it includes a validation to ensure that no ether is sent unintentionally. The \u201canonymous\u201d function executes when any ether is added to the smart contract and will effectively reject it.<\/p>\n<\/p>\nTo deepen your understanding of coding in Solidity, we recommend starting with the <a target=\"_blank\" rel=\"noopener\" class=\"chakra-link css-ug8vf0\" href=\"https:\/\/ethereum.org\/token\">ethereum<\/a> <a target=\"_blank\" rel=\"noopener\" class=\"chakra-link css-ug8vf0\" href=\"https:\/\/ethereum.org\/crowdsale\">solidity<\/a> <a target=\"_blank\" rel=\"noopener\" class=\"chakra-link css-ug8vf0\" href=\"https:\/\/ethereum.org\/dao\">tutorials<\/a>, reviewing the \u00a0<a target=\"_blank\" rel=\"noopener\" class=\"chakra-link css-ug8vf0\" href=\"https:\/\/solidity.readthedocs.io\/en\/latest\/\">official documentation page<\/a>, and experimenting on your browser using the <a target=\"_blank\" rel=\"noopener\" class=\"chakra-link css-ug8vf0\" href=\"https:\/\/ethereum.github.io\/browser-solidity\/#version=soljson-latest.js\">online compiler<\/a>.<\/p>\n<\/p>\nThat’s fundamentally it: you select a hash,“`html \nchoose a position and perform Vote(). So how does this convert into a voting application?<\/p>\n<\/p>\n<h2 class=\"chakra-heading css-1w54o5f\" id=\"serverless-architecture\">Serverless Infrastructure<\/h2>\n<\/p>\nAdhering to the KISS principle, we are creating the simplest viable product that remains functional, which signifies that we will not utilize databases for holding proposals or implement any capabilities that depend on anything beyond basic JavaScript and standard HTML.<\/p>\n<\/p>\nThus, we will make use of the app’s URL to retain the proposal content, which we will then leverage to present to the user and create a hash that can subsequently verify the votes. Users can share their desired proposals for discussion via social media or opt for direct links.<\/p>\n<\/p>\n<div class=\"chakra-stack css-1uyok63\">\n<pre><pre style=\"color:white;font-family:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;font-size:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:0.5em 0;overflow:auto;background:#011627\"><code class=\"language-bash\" style=\"color:#d6deeb;font-family:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;font-size:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none\">\/\/ During the initial startup operation:\n<\/span>proposal <\/span>=<\/span> decodeURI<\/span>(<\/span>getParameterByName<\/span>(<\/span>'proposal'<\/span>))<\/span>;<\/span>\n<\/span>\n\/\/ <\/code><\/pre>\n<\/div>\n<\/p>\n<h2 class=\"chakra-heading css-1w54o5f\" id=\"start-with-basics\">Begin with the fundamentals<\/h2>\n<\/p>\nSo obtain your preferred HTML framework and set up a basic site on your local device, then access it through Mist. All pages within Mist have access to a JavaScript object known as web3, where you will predominantly be operating. First, we should ascertain whether web3 is available:<\/p>\n<\/p>\n<div class=\"chakra-stack css-1uyok63\">\n<pre><pre style=\"color:white;font-family:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;font-size:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:0.5em 0;overflow:auto;background:#011627\"><code class=\"language-bash\" style=\"color:#d6deeb;font-family:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;font-size:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none\">Function <\/span>init<\/span>(<\/span>)<\/span> <\/span>{<\/span>\n<\/span><span\/>..<\/span>.\n<\/span>if<\/span>(<\/span>typeof web3 <\/span>==<\/span> <\/span>'undefined'<\/span>)<\/span> <\/span>{<\/span>\n<\/span>\u00a0 \/\/ Notify the user that they are not <\/span>in<\/span> a web3 compatible browser\n<\/span>\u00a0\u00a0\u00a0\u00a0<\/span>return<\/span>;<\/span> \u00a0\u00a0\u00a0\n<\/span>\u00a0<\/span>}<\/span>\n<\/span> <\/code><\/pre>\n<\/div>\n<\/p>\nSome developers may wish to load their own web3 object to ensure future compatibility. To accomplish this, simply add just before <\/p>\n<\/article>\n<\/div>\n<\/div>\n<\/main><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/body><\/p>\n tag:<\/p>\n \n<\/p>\nAnd then incorporate this into your initial function to load your custom web3 provider:<\/p>\n<\/p>\n<div class=\"chakra-stack css-1uyok63\">\n<pre><pre style=\"color:white;font-family:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;font-size:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:0.5em 0;overflow:auto;background:#011627\"><code class=\"language-bash\" style=\"color:#d6deeb;font-family:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;font-size:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none\">\/\/ Verifies Web3 support\n<\/span>if<\/span>(<\/span>typeof web3 <\/span>!=<\/span>=<\/span> <\/span>'undefined'<\/span> <\/span>&&<\/span> typeof Web3 <\/span>!=<\/span>=<\/span> <\/span>'undefined'<\/span>)<\/span> <\/span>{<\/span>\n<\/span>\u00a0\u00a0\u00a0\u00a0\/\/ If a web3 library is loaded, proceed to construct your own web3\n<\/span>\u00a0\u00a0\u00a0\u00a0web3 = new Web3(web3.currentProvider);\n<\/span>} else if (typeof Web3 !== '<\/span>undefined<\/span>') {\n<\/span>\u00a0\u00a0\u00a0\u00a0\/\/ If there isn'<\/span>t <\/span>then<\/span> <\/span>set\n``````html\n<\/span> a supplier\n<\/span>\u00a0\u00a0\u00a0\u00a0web3 <\/span>=<\/span> new Web3<\/span>(<\/span>new Web3.providers.HttpProvider<\/span>(<\/span>\"http:\/\/localhost:8545\"<\/span>))<\/span>;<\/span>\n<\/span><span\/>}<\/span> <\/span>otherwise<\/span> if<\/span>(<\/span>typeof web3 <\/span>==<\/span> <\/span>'undefined'<\/span>)<\/span> <\/span>{<\/span>\n<\/span>\u00a0\u00a0\u00a0\u00a0\/\/ Notify the user that they are not <\/span>within<\/span> a web3 compatible browser\n<\/span>\u00a0\u00a0\u00a0\u00a0<\/span>return<\/span>;<\/span> \u00a0\n<\/span><span\/>}<\/span>\n<\/span><\/code><\/pre>\n<\/div>\n<\/p>\n<h2 class=\"chakra-heading css-1w54o5f\" id=\"load-information-from-the-blockchain\">Retrieve data from the blockchain<\/h2>\n<\/p>\nYou verified you are connected to a blockchain, but which one is it? Is it the main ethereum network? Possibly a testnet or a private network? It might even be a future fork and your chain is entirely new. The most effective method to confirm this is to check whether the contract address you aim to access has any code present.<\/p>\n<\/p>\nMoreover, to\u00a0execute a contract, you need to know two fundamental elements: its address and the ABI, which will be a JSON encoded file that holds interface details.<\/p>\n<\/p>\n<div class=\"chakra-stack css-1uyok63\">\n<pre><pre style=\"color:white;font-family:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;font-size:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:0.5em 0;overflow:auto;background:#011627\"><code class=\"language-bash\" style=\"color:#d6deeb;font-family:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;font-size:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none\">var contractAddress <\/span>=<\/span> <\/span>'0x1e9d5e4ed8ef31cfece10b4c92c9057f991f36bc'<\/span>;<\/span>\n<\/span>var contractABI <\/span>=<\/span> <\/span>[<\/span>{<\/span>\"constant\"<\/span>:false,<\/span>\"inputs\"<\/span>:<\/span>[<\/span>{<\/span>\"name\"<\/span>:<\/span>\"proposalHash\"<\/span>,<\/span>\"type\"<\/span>:<\/span>\"bytes32\"<\/span>}<\/span>,<\/span>{<\/span>\"name\"<\/span>:<\/span>\"pro\"<\/span>,<\/span>\"type\"<\/span>:<\/span>\"bool\"<\/span>}<\/span>]<\/span>,<\/span>\"name\"<\/span>:<\/span>\"vote\"<\/span>,<\/span>\"outputs\"<\/span>:<\/span>[<\/span>]<\/span>,<\/span>\"type\"<\/span>:<\/span>\"function\"<\/span>}<\/span>,<\/span>{<\/span>\"anonymous\"<\/span>:false,<\/span>\"inputs\"<\/span>:<\/span>[<\/span>{<\/span>\"indexed\"<\/span>:true,<\/span>\"name\"<\/span>:<\/span>\"proposalHash\"<\/span>,<\/span>\"type\"<\/span>:<\/span>\"bytes32\"<\/span>}<\/span>,<\/span>{<\/span>\"indexed\"<\/span>:false,<\/span>\"name\"<\/span>:<\/span>\"pro\"<\/span>,<\/span>\"type\"<\/span>:<\/span>\"bool\"<\/span>\n``````html\n}<\/span>,<\/span>{<\/span>\"indexed\"<\/span>:false,<\/span>\"name\"<\/span>:<\/span>\"addr\"<\/span>,<\/span>\"type\"<\/span>:<\/span>\"address\"<\/span>}<\/span>]<\/span>,<\/span>\"name\"<\/span>:<\/span>\"LogVote\"<\/span>,<\/span>\"type\"<\/span>:<\/span>\"event\"<\/span>}<\/span>]<\/span>;<\/span>\n<\/span><\/code><\/pre>\n<\/div>\n<\/p>\nWith that information in hand, it’s possible for you to verify the existence of the contract within the startup function:<\/p>\n<\/p>\n<div class=\"chakra-stack css-1uyok63\">\n<pre><pre style=\"color:white;font-family:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;font-size:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:0.5em 0;overflow:auto;background:#011627\"><code class=\"language-bash\" style=\"color:#d6deeb;font-family:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;font-size:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none\">\/\/ Retrieve the contract\n<\/span>web3.eth.getCode<\/span>(<\/span>contractAddress, function<\/span>(<\/span>e, r<\/span>)<\/span> <\/span>{<\/span>\n<\/span> <\/span>if<\/span> <\/span>(<\/span>!<\/span>e <\/span>&&<\/span> r.length <\/span>><\/span> <\/span>3<\/span>)<\/span>\n<\/span> \u00a0 loadContract<\/span>(<\/span>)<\/span>;<\/span>\n<\/span>\u00a0<\/span>}<\/span>)<\/span>\n<\/span> <\/code><\/pre>\n<\/div>\n<\/p>\nIt is also feasible to execute this command repeatedly in an attempt to reconnect using a different address (in case you are indeed connected to the testnet). Upon locating your contract, you can load it here:<\/p>\n<\/p>\n<div class=\"chakra-stack css-1uyok63\">\n<pre><pre style=\"color:white;font-family:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;font-size:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:0.5em 0;overflow:auto;background:#011627\"><code class=\"language-bash\" style=\"color:#d6deeb;font-family:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;font-size:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none\">\n<\/span>Function \u00a0\u00a0<\/span>loadContract<\/span>(<\/span>)<\/span> <\/span>{<\/span>\n<\/span>\/\/ import the contract to javascript\n \u00a0\u00a0\u00a0\u00a0\u00a0ethervoteContract <\/span>=<\/span> web3.eth.contract<\/span>(<\/span>contractABI<\/span>)<\/span>;<\/span>\n<\/span> \u00a0\u00a0\u00a0\u00a0\u00a0ethervote <\/span>=<\/span> ethervoteContract.at<\/span>(<\/span>contractAddress<\/span>)<\/span>;<\/span>\n<\/span><span\/>}<\/span>\n<\/span><\/code><\/pre>\n<\/div>\n<\/p>\nUtilizing the web3 object permits you to establish a brand new javascript object capable of carrying out all ethereum operations directly via the browser. Should you wish to load merely a single instance of the contract, it’s possible to accomplish it in a single line:<\/p>\n<\/p>\n<div class=\"chakra-stack css-1uyok63\">\n<pre><pre style=\"color:white;font-family:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;font-size:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:0.5em 0;overflow:auto;background:#011627\"><code class=\"language-bash\" style=\"color:#d6deeb;font-family:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;font-size:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none\"> \u00a0\u00a0\u00a0\n<\/span>ethervote <\/span>=<\/span> web3.eth.contract<\/span>(<\/span>contractABI\n```<\/span>)<\/span>.at<\/span>(<\/span>contractAddress<\/span>)<\/span>;<\/span>\n<\/span><\/code><\/pre>\n<\/div>\n<\/p>\n<h2 class=\"chakra-heading css-1w54o5f\" id=\"identify-the-user\">Identify the user<\/h2>\n<\/p>\nUnderstanding the user’s account discloses a substantial amount of details about them: the balance of ether and any other tokens they possess, along with their transaction history. Therefore, having all applications recognize this by default could lead to a super cookie phenomenon, which would represent an intolerable breach of privacy. Conversely, mandating that the user register an account complete with login credentials for each website is not only bothersome for the individual, but also places their sensitive information under the control of third-party entities, resulting in significant honey pots that hackers can infiltrate.<\/p>\n<\/p>\nConsequently, most individuals find that their personal and authentication data is <a target=\"_blank\" rel=\"noopener\" class=\"chakra-link css-ug8vf0\" href=\"https:\/\/xkcd.com\/1150\/\">managed by a handful of billion-dollar corporations<\/a>. Privacy should not be a trade-off we accept for the sake of convenience: users ought to effortlessly authenticate into any application while retaining authority over their personal information.<\/p>\n<\/p>\nWith Mist, applications do not possess any details about the user until the individual chooses to disclose themselves to the application. When you wish to inquire about the accounts, the getAccounts function should be called:<\/p>\n<\/p>\n<div class=\"chakra-stack css-1uyok63\">\n<pre><pre style=\"color:white;font-family:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;font-size:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:0.5em 0;overflow:auto;background:#011627\"><code class=\"language-bash\" style=\"color:#d6deeb;font-family:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;font-size:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none\">web3.eth.getAccounts<\/span>(<\/span>function<\/span>(<\/span>e,accounts<\/span>)<\/span>{<\/span>\n<\/span> <\/span>if<\/span> <\/span>(<\/span>!<\/span>e<\/span>)<\/span> <\/span>{<\/span>\n<\/span> \/\/ <\/span>do<\/span> something with the accounts\n<\/span> <\/span>}<\/span>\n<\/span><span\/>}<\/span>)<\/span>;<\/span>\n<\/span><\/code><\/pre>\n<\/div>\n<\/p>\nAt present, the returned object is an array that contains straightforward accounts accessible to the user, but in the future, it will also incorporate smart contract accounts the user employs for identification purposes. This will enable users to access functionalities currently reserved for centralized authenticators, such as two-factor authentication or cloud backup, along with future advancements unique to smart contracts, like permitting a few trusted friends to grant you access to an account for which you’ve lost the keys or facilitating automatic inheritance of dormant accounts.<\/p>\n<\/p>\nEvery forthcoming Ethereum browser will manage how users identify themselves to the application. Within Mist, we have two methods: either the user can initiate it by pressing the “connect” button (currently labeled as a “no accounts” button) or the application can solicit authentication by invoking the “requestAccount” API.<\/p>\n<\/p>\nNotice: the accounts listed here are merely those that the user claims to control the key for, but the user has not provided any evidence of this; therefore, you may present a different interface, but do not transmit any confidential information designated solely for that account. If you require verification of the user\u2019s identity, you will need them to sign a message. While Mist will also support this in the future, be aware that it would necessitate an additional step for the user to enter their password, so this should only be implemented when absolutely essential.<\/p>\n<\/p>\n\u00a0<\/p>\n<\/p>\n<h2 class=\"chakra-heading css-1w54o5f\" id=\"voting\">Voting<\/h2>\n<\/p>\nOnce you possess the contract as an object, executing votes is simply a matter of invoking it from JavaScript. This will trigger a Mist transaction pane, allowing the user to verify the transaction before entering their password. Thus, we will first create two interactive objects that call a vote function:<\/p>\n<\/p>\n<div class=\"chakra-stack css-1uyok63\">\n<pre><pre style=\"color:white;font-family:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;font-size:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:0.5em 0;overflow:auto;background:#011627\"><code class=\"language-bash\" style=\"color:#d6deeb;font-family:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;font-size:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none\"> \u00a0\u00a0\u00a0\n<\/span>document.getElementById<\/span>(<\/span>'vote-support'<\/span>)<\/span>.addEventListener<\/span>(<\/span>'click'<\/span>, <\/span>function<\/span>(<\/span>)<\/span>{<\/span> vote<\/span>(<\/span>true<\/span>)<\/span>;<\/span>```html\n}<\/span>, <\/span>false<\/span>)<\/span>;<\/span>\n<\/span>document.getElementById<\/span>(<\/span>'vote-against'<\/span>)<\/span>.addEventListener<\/span>(<\/span>'click'<\/span>, <\/span>function<\/span>(<\/span>)<\/span>{<\/span> vote<\/span>(<\/span>false<\/span>)<\/span>;<\/span>}<\/span>, <\/span>false<\/span>)<\/span>;<\/span>\n<\/span><\/code><\/pre>\n<\/div>\n<\/p>\nObserve that one invokes the function with a true argument while the other employs false. The vote function may be as straightforward as:<\/p>\n<\/p>\n<div class=\"chakra-stack css-1uyok63\">\n<pre><pre style=\"color:white;font-family:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;font-size:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:0.5em 0;overflow:auto;background:#011627\"><code class=\"language-bash\" style=\"color:#d6deeb;font-family:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;font-size:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none\">Function <\/span>vote<\/span>(<\/span>)<\/span> <\/span>{<\/span>\n<\/span> ethervote.vote<\/span>(<\/span>proposalHash, support, <\/span>{<\/span>from: web3.eth.accounts<\/span>[<\/span>0<\/span>]<\/span>}<\/span>)<\/span>;<\/span>\n<\/span><span\/>}<\/span>\n<\/span><\/code><\/pre>\n<\/div>\n<\/p>\n“Ethervote” represents the entity we established earlier, and “vote” is one of its methods, corresponding to one of the contract methods:<\/p>\n<\/p>\n<div class=\"chakra-stack css-1uyok63\">\n<pre><pre style=\"color:white;font-family:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;font-size:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:0.5em 0;overflow:auto;background:#011627\"><code class=\"language-bash\" style=\"color:#d6deeb;font-family:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;font-size:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none\">function<\/span> vote<\/span>(<\/span>bytes32 proposalHash, bool pro<\/span>)<\/span> <\/span>{<\/span>}<\/span><\/code><\/pre>\n<\/div>\n<\/p>\nWe supply the two required parameters for the function and then incorporate a third object that includes transaction details, such as the sender’s address and, optionally, how much gas to allocate or the cost of the gas.<\/p>\n<\/p>\nAs a result, this would prompt a dialog requesting the user to verify the transaction – yet it will likely produce an error because the web3.eth.accounts object is an empty array by default; therefore, it is necessary to validate this and if it is empty, prompt the user to provide the accounts:<\/p>\n<\/p>\n<div class=\"chakra-stack css-1uyok63\">\n<pre><pre style=\"color:white;font-family:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;font-size:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:0.5em 0;overflow:auto;background:#011627\"><code class=\"language-bash\" style=\"color:#d6deeb;font-family:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;font-size:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none\">function<\/span> vote<\/span>(<\/span>support<\/span>)<\/span> <\/span>{<\/span>\n<\/span>\n web3.eth.getAccounts<\/span>(<\/span>function<\/span>(<\/span>e,accounts<\/span>)<\/span>{<\/span>\n<\/span> \/\/ Verify <\/span>if<\/span> there are accounts accessible\n<\/span> <\/span>if<\/span> <\/span>(<\/span>!\n``````html\n<\/span>e <\/span>&&<\/span> accounts <\/span>&&<\/span> accounts.length <\/span>><\/span> <\/span>0<\/span>)<\/span> <\/span>{<\/span>\n<\/span> \/\/ Create a dialog initiating the transaction\n ethervote.vote<\/span>(<\/span>proposalHash, support, <\/span>{<\/span>from: accounts<\/span>[<\/span>0<\/span>]<\/span>}<\/span>)<\/span>\n<\/span>\n <\/span>}<\/span> <\/span>else<\/span> <\/span>{<\/span>\n<\/span> mist.requestAccount<\/span>(<\/span>function<\/span>(<\/span>e, account<\/span>)<\/span> <\/span>{<\/span>\n<\/span> if<\/span>(<\/span>!<\/span>e<\/span>)<\/span> <\/span>{<\/span>\n<\/span> \/\/ Create a dialog initiating the transaction\n ethervote.vote<\/span>(<\/span>proposalHash, support, <\/span>{<\/span>from: account.toLowerCase<\/span>(<\/span>)<\/span>}<\/span>)<\/span>\n<\/span> <\/span>}<\/span>\n<\/span> <\/span>}<\/span>)<\/span>;<\/span>\n<\/span> <\/span>}<\/span>\n<\/span> <\/span>}<\/span>)<\/span>;<\/span>\n<\/span><span\/>}<\/span>\n<\/span><\/code><\/pre>\n<\/div>\n<\/p>\nYou ought to only ask for an account when the user has initiated an action: unexpectedly pinging a transaction will rightfully frustrate the user and likely prompt him to exit your application. Should we notice misuse of this feature by applications, we may implement more stringent requirements regarding when a notification appears.<\/p>\n<\/p>\n<h2 class=\"chakra-heading css-1w54o5f\" id=\"watch-the-contract\">Monitor the contract<\/h2>\n<\/p>\nLastly, in order to tally all the votes, it’s necessary to observe the contract events and determine which votes were cast. To accomplish this, we must execute this function once to commence monitoring the events, subsequent to instantiating “ethervote”:<\/p>\n<\/p>\n<div class=\"chakra-stack css-1uyok63\">\n<pre><pre style=\"color:white;font-family:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;font-size:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:0.5em 0;overflow:auto;background:#011627\"><code class=\"language-bash\" style=\"color:#d6deeb;font-family:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;font-size:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none\">ethervote <\/span>=<\/span> web3.eth.contract<\/span>(<\/span>contractABI<\/span>)<\/span>.at<\/span>(<\/span>contractAddress<\/span>)<\/span>;<\/span>\n<\/span>var logVotes <\/span>=<\/span> ethervote.LogVote<\/span>(<\/span>{<\/span>proposalHash: proposalHash<\/span>}<\/span>, <\/span>{<\/span>fromBlock: <\/span>1800000<\/span>}<\/span>)<\/span>;<\/span>\n<\/span>\/\/ Wait <\/span>for<\/span> the events to load\n<\/span>logVotes.watch<\/span>(<\/span>function<\/span>(<\/span>error, result<\/span>)<\/span>{<\/span>\n<\/span> \u00a0\u00a0\u00a0<\/span>if<\/span> <\/span>(<\/span>!<\/span>error<\/span>)<\/span> <\/span>{<\/span> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n<\/span> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ Perform an action whenever the event\n```happens\n \u00a0\u00a0\u00a0\u00a0\u00a0receivedEvent<\/span>(<\/span>result<\/span>)<\/span>;<\/span>\n<\/span> \u00a0\u00a0\u00a0<\/span>}<\/span>\n<\/span><span\/>}<\/span>)<\/span><\/code><\/pre>\n<\/div>\n<\/p>\nThe code provided above will commence retrieving all blocks from 1.8M onwards (the moment the contract was deployed) and subsequently execute the receivedEvent() function for each event. Each time a new block is received containing an event, this function will be activated again, thus eliminating the need for constant calls. So, what exactly does this function do?<\/p>\n<\/p>\n<div class=\"chakra-stack css-1uyok63\">\n<pre><pre style=\"color:white;font-family:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;font-size:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:0.5em 0;overflow:auto;background:#011627\"><code class=\"language-bash\" style=\"color:#d6deeb;font-family:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;font-size:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none\">Var voteMap <\/span>=<\/span> <\/span>{<\/span>}<\/span>;<\/span>\n<\/span>Function receivedEvent<\/span>(<\/span>event<\/span>)<\/span> <\/span>{<\/span>\n<\/span> \u00a0\u00a0\u00a0\/\/ Retrieve the present balance of a voter \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n \u00a0\u00a0\u00a0var bal <\/span>=<\/span> Number<\/span>(<\/span>web3.fromWei<\/span>(<\/span>web3.eth.getBalance<\/span>(<\/span>event.args.addr<\/span>)<\/span>, <\/span>\"finney\"<\/span>))<\/span>;<\/span>\n<\/span> \u00a0\u00a0\u00a0voteMap<\/span>[<\/span>res.args.addr<\/span>]<\/span> <\/span>=<\/span> <\/span>{<\/span>balance: bal, support: event.args.pro<\/span>}<\/span>;<\/span>\n<\/span><span\/>}<\/span><\/code><\/pre>\n<\/div>\n<\/p>\nFrom the original solidity contract, you can observe that the LogVote event includes three arguments: proposalHash, Pro, and Addr:<\/p>\n<\/p>\n<div class=\"chakra-stack css-1uyok63\">\n<pre><pre style=\"color:white;font-family:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;font-size:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:0.5em 0;overflow:auto;background:#011627\"><code class=\"language-bash\" style=\"color:#d6deeb;font-family:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;font-size:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none\">event LogVote<\/span>(<\/span>bytes32 indexed proposalHash, bool pro, address addr<\/span>)<\/span>;<\/span><\/code><\/pre>\n<\/div>\n<\/p>\nThus, the operation of this function entails utilizing the web3.eth.getBalance function to verify the current ether balance of the voting address. All balances consistently return figures in wei, which represents 1\/1000000000000000000 of an ether and is not particularly useful in this context; therefore, we utilize a different web3 function that converts it into any ether unit of our choice. In this instance, we will use finney, which corresponds to a thousandth of an ether.<\/p>\n<\/p>\nFollowing that, the function will store the balance along with the voter’s position in a mapping based on their address. One benefit of employing a mapping in place of an array is that it will automatically override any previous data relating to the same address; thus, if an individual votes multiple times, only their most recent stance will be retained.<\/p>\n<\/p>\nAdditionally, we could potentially identify the user and indicate whether they have voted or not.<\/p>\n<\/p>\n<div class=\"chakra-stack css-1uyok63\">\n<pre><pre style=\"color:white;font-family:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;font-size:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:0.5em 0;overflow:auto;background:#011627\"><code class=\"language-bash\" style=\"color:#d6deeb;font-family:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;font-size:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none\">\/\/ Verify <\/span>if<\/span> the present owner has already cast their vote and display that on the interface\n<\/span>web3.eth.getAccounts<\/span>(<\/span>function<\/span>(<\/span>e,accounts<\/span>)<\/span>{<\/span>\n<\/span> <\/span>if<\/span> <\/span>(<\/span>```html\n!<\/span>e <\/span>&&<\/span> accounts <\/span>&&<\/span> accounts<\/span>[<\/span>0<\/span>]<\/span> <\/span>==<\/span> res.args.addr<\/span>)<\/span> <\/span>{<\/span>\n<\/span> <\/span>if<\/span> <\/span>(<\/span>res.args.pro<\/span>)<\/span> <\/span>{<\/span>\n<\/span> \/\/ User has cast a positive vote<\/span>!<\/span>\n<\/span> <\/span>}<\/span> <\/span>else<\/span> <\/span>{<\/span>\n<\/span> \/\/ User has voted negatively<\/span>!<\/span>\n<\/span> <\/span>}<\/span>\n<\/span> <\/span>}<\/span>\n<\/span> <\/span>}<\/span>)<\/span>;<\/span>\n<\/span><\/code><\/pre>\n<\/div>\n<\/p>\n<h2 class=\"chakra-heading css-1w54o5f\" id=\"tally-up-the-votes\">Count the votes<\/h2>\n<\/p>\nIn conclusion, we need to introduce a distinct function for totaling the votes:<\/p>\n \n<\/p>\nWhat is the reason for tallying votes in a separate function? Since the weight of each vote is derived from the current balance of every account, it is essential to recalculate these balances with every new block, even if no new event has transpired. To accomplish this, you can implement the following function that triggers automatically with each new block entry:<\/p>\n<\/p>\n<div class=\"chakra-stack css-1uyok63\">\n<pre><pre style=\"color:white;font-family:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;font-size:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:0.5em 0;overflow:auto;background:#011627\"><code class=\"language-bash\" style=\"color:#d6deeb;font-family:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;font-size:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none\">web3.eth.filter<\/span>(<\/span>'latest'<\/span>)<\/span>.watch<\/span>(<\/span>function<\/span>(<\/span>e, result<\/span>)<\/span>{<\/span>\n<\/span> \u00a0\u00a0\u00a0if<\/span>(<\/span>!<\/span>e<\/span>)<\/span> <\/span>{<\/span>\n<\/span> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0calculateVotes<\/span>(<\/span>)<\/span>;<\/span>\n<\/span> \u00a0\u00a0\u00a0<\/span>}<\/span>\n<\/span><span\/>}<\/span>)<\/span>;<\/span> <\/span><\/code><\/pre>\n<\/div>\n<\/p>\nEventually, we will move on to the final total calculation. Previously, we utilized eth.getBalance in synchronous fashion, where the application awaited the outcome of the preceding action. Now, since multiple actions may be invoked during each block, we will employ it in asynchronous mode: calling the node and executing the action when it responds, all while keeping the interface fluid.<\/p>\n<\/p>\n<div class=\"chakra-stack css-1uyok63\">\n<pre><pre style=\"color:white;font-family:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;font-size:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:0.5em 0;overflow:auto;background:#011627\"><code class=\"language-bash\" style=\"color:#d6deeb;font-family:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;font-size:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none\">var totalPro, totalAgainst, totalVotes<\/span>;<\/span>\n<\/span><span\/>function<\/span> <\/span>calculateVotes<\/span>(<\/span>)<\/span> <\/span>{<\/span>\n<\/span> \u00a0\u00a0\u00a0totalPro <\/span>=<\/span> <\/span>0<\/span>;<\/span>\n<\/span> \u00a0\u00a0\u00a0totalAgainst <\/span>=<\/span> <\/span>0<\/span>;<\/span>\n<\/span> \u00a0\u00a0\u00a0totalVotes <\/span>=<\/span> <\/span>\n``````html\n0<\/span>;<\/span>\n<\/span> \u00a0\u00a0\u00a0Object.keys<\/span>(<\/span>voteMap<\/span>)<\/span>.map<\/span>(<\/span>function<\/span>(<\/span>a<\/span>)<\/span> <\/span>{<\/span>\n<\/span> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ invoke the <\/span>function<\/span> asynchronously\n<\/span> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0web3.eth.getBalance<\/span>(<\/span>a, function<\/span>(<\/span>e,r<\/span>)<\/span> <\/span>{<\/span>\n<\/span> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0voteMap<\/span>[<\/span>a<\/span>]<\/span>.balance <\/span>=<\/span> Number<\/span>(<\/span>web3.fromWei<\/span>(<\/span>r, <\/span>'finney'<\/span>))<\/span>;<\/span>\n<\/span> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>if<\/span> <\/span>(<\/span>voteMap<\/span>[<\/span>a<\/span>]<\/span>.support<\/span>)<\/span>\n<\/span> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0totalPro <\/span>+=<\/span> parseFloat<\/span>(<\/span>voteMap<\/span>[<\/span>a<\/span>]<\/span>.balance<\/span>)<\/span>;<\/span>\n<\/span> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>else<\/span>\n<\/span> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0totalAgainst <\/span>+=<\/span> parseFloat<\/span>(<\/span>voteMap<\/span>[<\/span>a<\/span>]<\/span>.balance<\/span>)<\/span>;<\/span>\n<\/span> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ <\/span>perform<\/span> something exciting with the outcomes<\/span>!<\/span> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n<\/span> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>}<\/span>)<\/span>;<\/span> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n<\/span> \u00a0\u00a0\u00a0<\/span>}<\/span>)<\/span>;<\/span>\n<\/span><span\/>}<\/span><\/code><\/pre>\n<\/div>\n<\/p>\nAs you can see from the code, the application iterates through each voting address to fetch their balance, and upon receiving it, it will either contribute to the pro or against camp and calculate the totals.<\/p>\n \n<\/p>\nA few additional warnings: if no events occur, nothing will be retrieved and votes won’t be computed, so it’s advisable to include a timeout mechanism in all functions that depend on events from the blockchain.<\/p>\n<\/p>\n<div class=\"chakra-stack css-1uyok63\">\n<pre><pre style=\"color:white;font-family:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;font-size:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:0.5em 0;overflow:auto;background:#011627\"><code class=\"language-bash\" style=\"color:#d6deeb;font-family:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;font-size:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none\">setTimeout<\/span>(<\/span>function<\/span>(<\/span>)<\/span>{<\/span>\n<\/span> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ In case the application does not respond post a <\/span>timeout<\/span> it likely has no votes\n<\/span> \u00a0\u00a0\u00a0<\/span>}<\/span>, <\/span>3000<\/span>)<\/span>;<\/span><\/code><\/pre>\n<\/div>\n<\/p>\nNow, you are free to employ all your current web development techniques to create whatever impressive outcome you desire. Use the figures to craft a captivating 3D visualization or link to your preferred social media to promote the most intriguing questions.<\/p>\n<\/p>\nMist also aims to streamline your code by offering some fundamental navigation and UI functionalities. If you wish for your application to be headerless and take up the full height of the mist app, simply add the following to your <\/p>\n<head\/><\/p>\n tag:<\/p>\n<\/p>\n<div class=\"chakra-stack css-1uyok63\">\n<pre>\n```<pre style=\"color:white;font-family:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;font-size:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:0.5em 0;overflow:auto;background:#011627\"><code class=\"language-bash\" style=\"color:#d6deeb;font-family:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;font-size:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none\"> <\/span>meta <\/span>name<\/span>=<\/span>\"ethereum-dapp-url-bar-style\"<\/span> <\/span>content<\/span>=<\/span>\"transparent\"<\/span>><\/span><\/code><\/pre>\n<\/div>\n<\/p>\nIn the event that you wish to utilize Mist itself for navigating your application, you can employ the <a target=\"_blank\" rel=\"noopener\" class=\"chakra-link css-ug8vf0\" href=\"https:\/\/github.com\/ethereum\/mist\/blob\/develop\/MISTAPI.md#mistmenu\">Mist.menu<\/a> object:<\/p>\n<\/p>\n<div class=\"chakra-stack css-1uyok63\">\n<pre><pre style=\"color:white;font-family:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;font-size:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:0.5em 0;overflow:auto;background:#011627\"><code class=\"language-bash\" style=\"color:#d6deeb;font-family:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;font-size:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none\">for<\/span> <\/span>(<\/span>item of propHistory<\/span>)<\/span> <\/span>{<\/span>\n<\/span> <\/span>if<\/span> <\/span>(<\/span>item.length <\/span>><\/span> <\/span>0<\/span> <\/span>&&<\/span> item <\/span>!=<\/span> <\/span>'null'<\/span>)<\/span> <\/span>{<\/span>\n<\/span> mist.menu.add<\/span>(<\/span> item ,<\/span>{<\/span>\n<\/span> name: item,\n position: n++,\n selected: item <\/span>==<\/span> proposal\n<\/span> <\/span>}<\/span>, <\/span>function<\/span>(<\/span>)<\/span>{<\/span>\n<\/span> window.location.search <\/span>=<\/span> <\/span>'?proposal='<\/span> + encodeURI<\/span>(<\/span>this.name<\/span>)<\/span>;<\/span>\n<\/span> <\/span>}<\/span>)<\/span>;<\/span>\n<\/span> <\/span>}<\/span>\n<\/span> <\/span>}<\/span><\/code><\/pre>\n<\/div>\n<\/p>\nAn excellent feature of Ethereum is the capability to build upon this straightforward contract functionality without requiring authorization: you can append additional functions on distinct contracts, maintaining each one simple and more manageable for troubleshooting. Furthermore, it allows others to incorporate the contracts you established into their applications, thereby providing new functionality. Meanwhile, all applications access the same data and backend.<\/p>\n<\/p>\nYou can experiment with this application live hosted on <a target=\"_blank\" rel=\"noopener\" class=\"chakra-link css-ug8vf0\" href=\"https:\/\/github.com\/ethereum\/stake-voice\">github pages<\/a>, but keep in mind that this isn’t the authoritative source, just one of numerous potential interfaces to it. The same application will also function as a local HTML file on your device or on an <a target=\"_blank\" rel=\"noopener\" class=\"chakra-link css-ug8vf0\" href=\"https:\/\/ipfs.io\/\">IPFS network<\/a> and it is expected that it will be downloaded directly via Mist utilizing Swarm in the future.<\/p>\n<\/p>\nHere are some concepts on how you might explore:<\/b><\/p>\n<\/p>\n<ul role=\"list\" class=\"css-1onhfjo\">\n<li class=\"css-cvpopp\">Form a list of currently accessible statements. Anyone can verify them by viewing the sha3 of the proposal text, hence you don’t require permission.<\/li>\n<li class=\"css-cvpopp\">Establish threaded comments where users can respond to statements and subsequently upvote or downvote them, akin to a decentralized stake-based Reddit<\/li>\n<li class=\"css-cvpopp\">Rather than (or in addition to) utilizing ether balance, you could use another Ethereum token, such as The DAO or Digix Gold to differentiate your questions. Given that all the original contract registers is the sender, you can review all balances. Alternatively, you might create your own currency based on reputation, karma, or another criterion.<\/li>\n<\/ul>\n \n<span\/><\/div>\n \n <a href=\"https:\/\/blog.ethereum.org\/en\/2016\/07\/12\/build-server-less-applications-mist\">Source link <\/a><\/p>\n","protected":false},"excerpt":{"rendered":"How to create serverless applications for Mist | Ethereum Foundation Blog Published by Alex Van de Sande on July 12, 2016 Ethereum is not envisioned to serve as a platform for constructing obscure smart contract applications that necessitate a STEM degree to comprehend; rather, it aspires to be a foundational element of a different framework<\/p>\n","protected":false},"author":3,"featured_media":8282,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[23],"tags":[1421],"class_list":["post-8905","post","type-post","status-publish","format-standard","has-post-thumbnail","category-ethereum","tag-return-a-list-of-comma-separated-tags-from-this-title-how-to-build-server-less-applications-for-mist"],"yoast_head":"\n<title>Building Serverless Applications for Mist: A Comprehensive Guide - WSJ-Crypto<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/wsj-crypto.com\/index.php\/2025\/02\/23\/building-serverless-applications-for-mist-a-comprehensive-guide\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Building Serverless Applications for Mist: A Comprehensive Guide - WSJ-Crypto\" \/>\n<meta property=\"og:description\" content=\"How to create serverless applications for Mist | Ethereum Foundation Blog Published by Alex Van de Sande on July 12, 2016 Ethereum is not envisioned to serve as a platform for constructing obscure smart contract applications that necessitate a STEM degree to comprehend; rather, it aspires to be a foundational element of a different framework\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wsj-crypto.com\/index.php\/2025\/02\/23\/building-serverless-applications-for-mist-a-comprehensive-guide\/\" \/>\n<meta property=\"og:site_name\" content=\"WSJ-Crypto\" \/>\n<meta property=\"article:published_time\" content=\"2025-02-23T05:20:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wsj-crypto.com\/wp-content\/uploads\/2025\/02\/eth-org.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"2100\" \/>\n\t<meta property=\"og:image:height\" content=\"900\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"wsjcrypto\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"wsjcrypto\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"16 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/wsj-crypto.com\/index.php\/2025\/02\/23\/building-serverless-applications-for-mist-a-comprehensive-guide\/\",\"url\":\"https:\/\/wsj-crypto.com\/index.php\/2025\/02\/23\/building-serverless-applications-for-mist-a-comprehensive-guide\/\",\"name\":\"Building Serverless Applications for Mist: A Comprehensive Guide - WSJ-Crypto\",\"isPartOf\":{\"@id\":\"https:\/\/wsj-crypto.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/wsj-crypto.com\/index.php\/2025\/02\/23\/building-serverless-applications-for-mist-a-comprehensive-guide\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/wsj-crypto.com\/index.php\/2025\/02\/23\/building-serverless-applications-for-mist-a-comprehensive-guide\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/wsj-crypto.com\/wp-content\/uploads\/2025\/02\/eth-org.jpeg\",\"datePublished\":\"2025-02-23T05:20:54+00:00\",\"author\":{\"@id\":\"https:\/\/wsj-crypto.com\/#\/schema\/person\/88a93723b30416db1a352d5a0096c4a7\"},\"breadcrumb\":{\"@id\":\"https:\/\/wsj-crypto.com\/index.php\/2025\/02\/23\/building-serverless-applications-for-mist-a-comprehensive-guide\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wsj-crypto.com\/index.php\/2025\/02\/23\/building-serverless-applications-for-mist-a-comprehensive-guide\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/wsj-crypto.com\/index.php\/2025\/02\/23\/building-serverless-applications-for-mist-a-comprehensive-guide\/#primaryimage\",\"url\":\"https:\/\/wsj-crypto.com\/wp-content\/uploads\/2025\/02\/eth-org.jpeg\",\"contentUrl\":\"https:\/\/wsj-crypto.com\/wp-content\/uploads\/2025\/02\/eth-org.jpeg\",\"width\":2100,\"height\":900},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/wsj-crypto.com\/index.php\/2025\/02\/23\/building-serverless-applications-for-mist-a-comprehensive-guide\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/wsj-crypto.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Building Serverless Applications for Mist: A Comprehensive Guide\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/wsj-crypto.com\/#website\",\"url\":\"https:\/\/wsj-crypto.com\/\",\"name\":\"WSJ-Crypto\",\"description\":\"Just Another Crypto News Website\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/wsj-crypto.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/wsj-crypto.com\/#\/schema\/person\/88a93723b30416db1a352d5a0096c4a7\",\"name\":\"wsjcrypto\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/wsj-crypto.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/86fe8af82ea089646d6639ca2f87e0243d8688d957bd8e3ec22ec3c457cc16d4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/86fe8af82ea089646d6639ca2f87e0243d8688d957bd8e3ec22ec3c457cc16d4?s=96&d=mm&r=g\",\"caption\":\"wsjcrypto\"},\"url\":\"https:\/\/wsj-crypto.com\/index.php\/author\/wsjcrypto\/\"}]}<\/script>\n","yoast_head_json":{"title":"Building Serverless Applications for Mist: A Comprehensive Guide - WSJ-Crypto","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/wsj-crypto.com\/index.php\/2025\/02\/23\/building-serverless-applications-for-mist-a-comprehensive-guide\/","og_locale":"it_IT","og_type":"article","og_title":"Building Serverless Applications for Mist: A Comprehensive Guide - WSJ-Crypto","og_description":"How to create serverless applications for Mist | Ethereum Foundation Blog Published by Alex Van de Sande on July 12, 2016 Ethereum is not envisioned to serve as a platform for constructing obscure smart contract applications that necessitate a STEM degree to comprehend; rather, it aspires to be a foundational element of a different framework","og_url":"https:\/\/wsj-crypto.com\/index.php\/2025\/02\/23\/building-serverless-applications-for-mist-a-comprehensive-guide\/","og_site_name":"WSJ-Crypto","article_published_time":"2025-02-23T05:20:54+00:00","og_image":[{"width":2100,"height":900,"url":"https:\/\/wsj-crypto.com\/wp-content\/uploads\/2025\/02\/eth-org.jpeg","type":"image\/jpeg"}],"author":"wsjcrypto","twitter_card":"summary_large_image","twitter_misc":{"Scritto da":"wsjcrypto","Tempo di lettura stimato":"16 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/wsj-crypto.com\/index.php\/2025\/02\/23\/building-serverless-applications-for-mist-a-comprehensive-guide\/","url":"https:\/\/wsj-crypto.com\/index.php\/2025\/02\/23\/building-serverless-applications-for-mist-a-comprehensive-guide\/","name":"Building Serverless Applications for Mist: A Comprehensive Guide - WSJ-Crypto","isPartOf":{"@id":"https:\/\/wsj-crypto.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/wsj-crypto.com\/index.php\/2025\/02\/23\/building-serverless-applications-for-mist-a-comprehensive-guide\/#primaryimage"},"image":{"@id":"https:\/\/wsj-crypto.com\/index.php\/2025\/02\/23\/building-serverless-applications-for-mist-a-comprehensive-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/wsj-crypto.com\/wp-content\/uploads\/2025\/02\/eth-org.jpeg","datePublished":"2025-02-23T05:20:54+00:00","author":{"@id":"https:\/\/wsj-crypto.com\/#\/schema\/person\/88a93723b30416db1a352d5a0096c4a7"},"breadcrumb":{"@id":"https:\/\/wsj-crypto.com\/index.php\/2025\/02\/23\/building-serverless-applications-for-mist-a-comprehensive-guide\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wsj-crypto.com\/index.php\/2025\/02\/23\/building-serverless-applications-for-mist-a-comprehensive-guide\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/wsj-crypto.com\/index.php\/2025\/02\/23\/building-serverless-applications-for-mist-a-comprehensive-guide\/#primaryimage","url":"https:\/\/wsj-crypto.com\/wp-content\/uploads\/2025\/02\/eth-org.jpeg","contentUrl":"https:\/\/wsj-crypto.com\/wp-content\/uploads\/2025\/02\/eth-org.jpeg","width":2100,"height":900},{"@type":"BreadcrumbList","@id":"https:\/\/wsj-crypto.com\/index.php\/2025\/02\/23\/building-serverless-applications-for-mist-a-comprehensive-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wsj-crypto.com\/"},{"@type":"ListItem","position":2,"name":"Building Serverless Applications for Mist: A Comprehensive Guide"}]},{"@type":"WebSite","@id":"https:\/\/wsj-crypto.com\/#website","url":"https:\/\/wsj-crypto.com\/","name":"WSJ-Crypto","description":"Just Another Crypto News Website","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wsj-crypto.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Person","@id":"https:\/\/wsj-crypto.com\/#\/schema\/person\/88a93723b30416db1a352d5a0096c4a7","name":"wsjcrypto","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/wsj-crypto.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/86fe8af82ea089646d6639ca2f87e0243d8688d957bd8e3ec22ec3c457cc16d4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/86fe8af82ea089646d6639ca2f87e0243d8688d957bd8e3ec22ec3c457cc16d4?s=96&d=mm&r=g","caption":"wsjcrypto"},"url":"https:\/\/wsj-crypto.com\/index.php\/author\/wsjcrypto\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/wsj-crypto.com\/index.php\/wp-json\/wp\/v2\/posts\/8905","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wsj-crypto.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wsj-crypto.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wsj-crypto.com\/index.php\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/wsj-crypto.com\/index.php\/wp-json\/wp\/v2\/comments?post=8905"}],"version-history":[{"count":2,"href":"https:\/\/wsj-crypto.com\/index.php\/wp-json\/wp\/v2\/posts\/8905\/revisions"}],"predecessor-version":[{"id":8909,"href":"https:\/\/wsj-crypto.com\/index.php\/wp-json\/wp\/v2\/posts\/8905\/revisions\/8909"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wsj-crypto.com\/index.php\/wp-json\/wp\/v2\/media\/8282"}],"wp:attachment":[{"href":"https:\/\/wsj-crypto.com\/index.php\/wp-json\/wp\/v2\/media?parent=8905"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wsj-crypto.com\/index.php\/wp-json\/wp\/v2\/categories?post=8905"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wsj-crypto.com\/index.php\/wp-json\/wp\/v2\/tags?post=8905"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}