Skip to main content

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 produced by App Maker:

Conclusion

In my experiment, I’ve used about one hour to make the webapp. Compares to the traditional webapp (in past 3) which used about three hours. App Maker could reduce 70% less of creation time. It is best for making intranet or internal applications. App Maker not only capable connects to external RESTful service, but also connect to Google Cloud SQL. In this case, it provides auto-synchronize the data to the database with no coding needed.






Comments

Popular posts from this blog

Create An Online Store Theme Used By MyCMS

MyCMS is an open-source Content Management System to generate static online shop website. You can use my hosting to input your products, or you can download the source codes and host it in your own server (running NodeJS). Please refer to my Github repo for the detailed installation instructions. This blog is a step-by-step tutorial that shows you how to create an online-shop theme. In this tutorial, it’s using my hosting to input the shop details and products. If you’re hosting the MyCMS by yourself, just change the domain name to yours will do. Introducing MyCMS Before making the theme, you’ll need to use MyCMS to configure the demo shop and input two demo products. MyCMS generates a static website via a theme. The generated static website is NO server program required. You can put the website files (HTML/CSS/JS) to any CDN, hosting. Shop Configuration You must prepare below settings Before using MyCMS: Setting Description Example Store name Your store name will be displayed in t

How I make a web-components based dynamic Javascript page at the top of Google Search

Introduction Everybody wants their website shown at the first position of Google search. SEO (Search Engine Optimization) is a big topic. I just helped my client's website shows the database records at the top search rankings (at least several Chinese generic keywords). See the three example questions all are listed at top ranking: Website background: My client's website  popa.qa  is a traditional Chinese Q&A site that lets members ask and answer questions. All answers and questions are storing in the database server. Step 1: Create The Project This blog illustrates the problems and the steps to fix that with project source codes. Below is the description of the basic project: NodeJS backend (server.js) Develop an API ( /get-database-records ) to simulate getting database records Web-components frontend (index.html) An example component IndexPage  make use of  LitElement to render database records To start the server type: npm start Then I check the webpage speed using th

Progressive Web App Wordpress Theme (Part 2/2)

This is the 2nd part of the blog: Progressive Web App Wordpress Theme Part 1 . Last time the Progressive Web App performs in the local server properly. This part will integrate it with WordPress Theme. Test it in real WordPress server, and Android phone as well. Let’s get started. Produce a Wordpress Basic Theme As WordPress Theme Development document mentioned , it does require at least three basic files. I store those files in directory /wp-files were under the project root. 1. Theme Stylesheet /wp-files/style.css : /* Theme Name: PWAWP-Theme Theme URI: https://wordpress.simonho.net/ Author: Simon Ho Author URI: http://www.simonho.net Description: Progressive Web App Wordpress Theme Version: 1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: pwawordpress Tags: pwa, one-column This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned with others.