FREE AppyBuilder Plan


Build mobile apps With No Coding Skills! View Details & plans HERE

This slideshow requires JavaScript.


Posted by on April 4, 2016 in Uncategorized


QR Code Generation

QR or Quick Response Codes are a type of two-dimensional barcode that can be read using smartphones and dedicated QR reading devices, that link directly to text, emails, websites, phone numbers and more. For example, QR code below can be scanned to take user to :

Preview of your QR Code

QR Codes can be programatically generated using App Inventor or AppyBuilder by invoking a RESTful API service. Below is a tutorial that will show you how to generate QR and how to save the generated code onto devices SD card.


This tutorial assumes that you have previous knowledge using AI2 or AppyBuilder

Live Testing:

For live testing, download a copy of AppyBuilder companion from Google Play Store HERE.

Design Editor:

To start, use your browser and go to Once there, create a new project called qrApp. Next start up your companion app and connect it for Live Testing to AppyBuilder:


Our design editor will include 2 buttons, a TextBox and a Canvas as shown below:


TextBox1 – will be used to enter a text that will be used for generating QR code; e.g.

Button1 – once clicked, will take TextBox1.Text and invoke REST API to generate QR.

Canvas1 – Used to display QR code into its background

Button2 – Used to save the Canvas1 Background image (the QR code image) onto SD card

Web1 – Used to encode a text so that it can be used in a URL

Blocks Editor:

We now switch to Blocks Editor for coding using blocks. As shown in blocks below, we use Web1.UriEncode to encode text in TextBox1 text field. We then create full URL string by concatenating the API URL passing it TextBox1 text as its data parameter. The API URL is:×150&data=

Next we set our Canvas background image to resulting URL:


Below is how screen will look like after Button1 is clicked:


To save this QR code image locally on the device, add blocks so that when Button2 is clicked, the Canvas1 background image is saved into a file foo.jpg. This file will be stored onto root folder of your device.  If you like, you can add a directory to your file name; e.g. /MyPics/foo.jpg



Above tutorial showed you how to easily add functionality to generate QR code and save the resulting QR onto devices external storage.

Please share and check out AppyBuilder HERE to see some of cool features / components.



Leave a comment

Posted by on October 11, 2016 in Uncategorized


AppyBuilder – Build Mobile apps with no Coding Skills!

Leave a comment

Posted by on September 1, 2016 in Uncategorized


Develop mobile Flashight app

In this post I’ll discuss how to develop a flashlight app using AppyBuilder (FREE or Silver plan).

The final app will look like image below, allow user to tap on ON or OFF image buttons to turn camera flash ON or OFF and to also change the displayed image to ON or OFF flashlight images.



Designing the layout:

To start, goto AppyBuilder (free or silver) and create a new project called flashlight.

We’ll use HorizontalArrangement to contain the ON, OFF image Buttons and to also include a text (Label) that will display in between the two image buttons.


Table below shows the components and their associated properties that were used to design the above layout. Note: For images, refer to the .zip file at the end of this post.


Next, from User Interface palette, drag and drop an Image component into viewer and set its width and height to Fill parent and set its Picture to flashon.png.

From Media palette, drag and drop a Camera non-visible component into viewer. Also, from User Interface, drag and drop a Notifier component into viewer. Camera will be used for turning flash on or off and Notifider will be used to display alert messages. By now, your viewer should look like figure below:


Coding the blocks:

We are done with designing the layout and will now switch to Blocks Editor to code the app functionality.

Once in Blocks Editor, select the Camera component and you’ll see its associated blocks as shown in figure below. You’ll notice that Camera has a HasFlash block that once executed, returns true if device has flash or false if it doesn’t. Camera also has a FlashOn block that takes a logic true or false block  to turn flash on or off.


We now logic for turning flash on when btnFlashOn button is Clicked. While in Blocks Editor, select the btnFlashOn component and then select its Click event handler which will be triggered when the ON button is clicked. From built-in Control blocks, select IF block. We’ll use this block and plug in  Camera.HasFlash to determine if our device has flash or not. If Camera HasFlash, then we’ll use Camera.FlashOn and use logic true to turn flash on, else we’ll use our Notifier component to pop-up a message letting user know that device doesn’t have a flash light. If device has flash, we’ll also change the Picture for Image to flashon.png to show that flash is on.

The blocks for coding this is shown in figure below:


Lastly, we’ll code the blocks for turning flash off. Figure below shows that in the Clicked event-handler of btnFlashOff, we use Camera.FlashOn block to turn flash off and switch the Image picture to flashoff.png.


Download .apk:

You can download .apk from HERE or scan QR code below to install onto your device:


Download source code and images:

The source .aia and images can be downloaded from HERE.


Leave a comment

Posted by on July 3, 2016 in Uncategorized


App Inventor offline

If you are interested to run App Inventor offline, then grab the from HERE.

This offline version is built based on MIT App Inventor that was released on June 15, 2016.

Please also checkout AppyBuilder at



Posted by on June 25, 2016 in Uncategorized


AppyBuilder Intro

Leave a comment

Posted by on May 8, 2016 in Uncategorized


Google Map Component

Check out the new GoogleMap component in aiLive

Forum HERE. Wanna try out Demo Servers? See HERE. Wanna Join? See HERE


Posted by on March 27, 2016 in Uncategorized

%d bloggers like this: