Simon Ho | Software Developer Blog

Posts

Showing posts from July, 2018

EOSIO Blockchain dApp Step by Step: Part 4 - Google App Maker Frontend

This is the complement of the blog: EOSIO dApp on Blockchain Step-by-Step: Part 3 . In the blog, I’ll show how to build the Election Demo webapp using Google App Maker instead of HTML/CSS/Javascript manually coding. The backend has no change still using EOSIO Blockchain. Google announced on 14 Jun 2018 that App Maker had been made generally available to G-suite business and enterprise users. App Maker is a low-code development environment for developing software based on its G Suite productivity and communications suite. App Maker uses templates for building UIs, which can be assembled via drag-and-drop. Create an App using Google App Maker I’ve recorded the webapp creation as below video (silent mode). The whole creation process was about 30 minutes and has been reduced to 5 minutes. Below listed two scripts (client script and server script) which are copy&paste to App Maker: The Produced Webapp Below is the video recorded (at normal speed) the webapp which prod...

EOSIO Blockchain dApp Step by Step: Part 3 - Webapp

This is the 3rd part (final) of the blog: EOSIO dApp on Blockchain Step-by-Step: Part 1 . In the last part , I’ve developed a Smart Contract for EOSIO platform to simulate an election. This part I will develop a webapp that allows visitors to vote for a candidate. Below is a quick preview of the webapp: Source Code Explanation Firstly, please see below for the overview diagram: The Frontend The frontend consists of HTML, CSS, and Javascript. I used SemanticUI as CSS framework for a nice appearance. JQuery is heavily used in Javascript for easy development. There has only one page (homepage HTML) for this webapp. The homepage has divided into four portions. Below is the screenshot of the portions: Below is the code fragment of the homepage index.html : ... <body> <div class="ui container"> <div class="ui grid"> ... <div id="hints_portion" class="sixteen wide column"> ...

EOSIO Blockchain dApp Step by Step: Part 2 - Smart Contract

This is the 2nd part of the blog: EOSIO dApp on Blockchain Step-by-Step: Part 1 . The last blog described the EOSIO setup processes steps-by-steps. This part will develop a Smart Contract for EOSIO platform. Development The purpose of the smart contract is to simulate an election. I created an EOSIO user to host the smart contract. Created two citizen users to vote for a candidate. The voting records keep saving in the EOSIO blockchain. In this example, all operations are operating in command mode. Let’s get started. Develop the Smart Contract EOSIO executes the smart contract which is developed in WebAssembly standard . So I developed the election smart contract in C++. Below is the full source code of election.cpp : Note the last line EOSIO_ABI() is a macro statement to generate ABI file automatically rather than write it manually. ABI file is to define the apply action handler . Which tells the EOSIO the definition of the handlers inside the smart contract. EOSIO provides multi...

EOSIO Blockchain dApp Step by Step: Part 1 - Setup

After I listen Bettina Warburg’s speech , I am fascinated by the concept of decentralized economy (dApps). The traditional web application is: Front End → Backend → Database In contrast, dApp website is: Front End → Smart Contract → Blockchain For instance, when you go onto e-banking, the web page will call the backend code to grab your personal data and display them on the page. The backend code is running on centralized servers. As opposed to traditional, where dApps have their backend code (smart contract) running on a decentralized P2P network (Blockchain). Why Is Blockchain So Hot? "Blockchain is the technology that underpins the digital currency Bitcoin – but it has far wider applications and is being commercialised in a growing number of areas. It has generated much interest in technology circles and beyond, because of the new possibilities it opens up in financial services, the public sector and other areas." THOUGHT LEADERSHIP Nov 2017 What Is EOSIO blockchain? EO...