Text Encoding & Decoding using Lists

A list (also called an array in other programming languages) is a tool that can be used to store multiple pieces of information at once.

In this tutorial, we will learn how to create, navigate and find items in a List. For this, we will create an Android app that will parse text (e.g. user entry text) and will then encode or decode it using Lists. We will also use DRY (Don’t Repeat Yourself) concept by using Procedures.


This tutorial assumes that user is already familiar with App Inventor Or AppyBuilder. This app is being developed using AppyBuilder, but same concept can be used in App Inventor. Source code can be downloaded using link at bottom of this post and it can be imported into FREE AppyBuilder here:

User Interface

This tutorial focuses on behaviour / logic rather than user interface and for this, it does not contain any user interface. You can tailor this code to your needs and design the user interface as needed.


We will use Procedure to include the processing logic. However, before diving into blocks logic, take a look at image below that shows results of calling the procedure. The procedure-calls below encodes “apple peach” and then decodes it back to original text.

We now start coding the logic and start by creating three global variables:

  • varTemp – used to get result of encoding or decoding of text
  • listFrom and listTo – These synchronized lists will contain a mapping of letters. Details on usage will be covered below.

Next, we create a Procedure. This procedure will return result. It will also take 2 parameters as shown below:

  • shouldEncode – this boolean parameter is used to indicate if we want the procedure to encode or decode text
  • someText – this parameter will be used to receive the text that procedure should encode or decode

Next, from Control drawer, we drag & drop a “do with result” block. We use this block so that we include additional blocks and also return a result when procedure completes. Plug the “do with results” into procedure return socket as shown below:

Image below shows entire code that is used for this encodeOrDecode procedure and below explains logic for each section.

  • A – In this section, we first change the passed in text as lower case. We also replace all spaces with pipe (|). The reason for this is that some list-blocks ignore blank space. So we temporarily change space to pipe and when returning final result, change pipe back to space.
  • B – In this section, we initialize our listFrom and listTo to some default values in format of CSV and then use “list from csv row” to convert CSV to list. NOTE: Complete the list to include all alphabet letters
  • C – Our procedure is used to encode OR decode. If the parameter shouldEncode is false, we switch our listFrom and listTo lists
  • D – We initialize varTemp to empty string. This variable will contain the final result
  • E – We include a “for each” loop that will be repeated for the length of passed-in text. Inside this block, we will inspect each letter of the text by using the index of the loop.
  • F – Reading blocks from right-to-left, we retrieve the letter at position idx (segment), find its position (index) in listFrom (index in list), then retrieve letter at position idx of listTo (select list item). Then we append this to varTemp
  • G – In this section, we take our final varTemp, replace all the pipe (|) back to spaces and then return that as final result.

Blocks below show how to invoke above procedure and encoding or decoding text.

Source and .apk

Find this post useful or using it? Appreciate your support:  PayPal - The safer, easier way to pay online!

Like this post?  Share using button below and give us your thumbs-up

Leave a comment

Posted by on January 19, 2017 in Uncategorized


Push Notification

Push notifications let your application notify a user of new messages or events even when the user is not actively using your application. On Android devices, when a device receives a push notification, your application’s icon and a message appear in the status bar.



Design Editor

AppyBuilder SILVER plan now contains an experimental non-visible PushNotification component that can easily be added into your app. It contains simple configuration properties and blocks to enable the push notifications without any coding!


To enable this feature, drag-and-drop a PushNotification component onto design layout. It, currently, contains below properties:


  • FirebaseURL – On back-end, this component uses Firebase and will be listening to any updates that your app has subscribed to. This property will need to be configured to use your own Firebase database.
  • TopicPath – Each app can subscribe (listen) to specific TopicPath. Once configured in your app, using Firebase-dashboard, you will be able to push messages to any app that is subscribed to this specific topic. TopicPath will have default value of:
    • _topic_/EMAIL_DOMAIN/APP_NAME   where
      • EMAIL_DOMAIN is the domain of your email. For example if your email is, domain will will be jdoe
      • APP_NAME is the name of your app; e.g. LegoApp
      • Given above examples the full TopicPath will be: _topic_/jdoe/LegoApp
  • VersionCode – Push messages can be sent to ALL apps, regardless of version OR specific versions of the app. This optional property can be used to push messages to specific version of the published apps. For example, updating VersionCode to 2, will update the TopicPath like below; meaning that app will be subscribed to (listen to) any messages that are sent to path below:
    • _topic_/jdoe/LegoApp/2

Blocks Editor

PushNotification includes a block that should be used to start the subscription.


Once subscription is started, the app will listen to messages, even if the app is not active. This block returns a boolean indicating if starting the subscription was success or not. For this tutorial, we just ignore the value. Therefore, from built-in blocks, use “Evaluate but ignore result” block and snap into PushNotification.StartSubscription:


Above blocks can be added into Screen1.Initialize event-handler block. Once this is triggered, app will listen to messages, even if app is not active OR if app is closed / killed.


Configuring Firebase

Once Firebase account is setup, we use Firebase dahsboard (console), to add the TopicPath. For this, from your app, copy the TopicPath into clipboard. Next, in Firebase dashboard, at root level, click the + sign and paste the copied TopicPath  as shown below:


Above will result in child-tags being created like below. Now, the message will be pushed to your app and will display in the taskbar, even if the app is not-active or is forced-closed.


A notification message on device taskbar will include a title. Above will result in a default title to be displayed on taskbar. If you like to use your own title, you could use below syntax for the message.

someTitle=Hello Android!

Once the message is received by device, it will take display “someTitle” (or whatever your title is) as the title of the notification.


PushNotification allows you to re-engage users by delivering messages to all client apps and can be used to notify client app that for example new data is available to sync or new version of the app is available.



Leave a comment

Posted by on November 21, 2016 in Uncategorized


AppyBuilder App


Checkout AppyBuilder’s new app in Google Play Store HERE.

This slideshow requires JavaScript.


Leave a comment

Posted by on October 31, 2016 in Uncategorized


File Transfer using FTP

FTP Clients are used to transfer files back-and-forth between two computers using File Transfer (FTP) protocol which can be used with live connection to the Internet. Standalone FTP clients such as FileZilla can be used to transfer files back-and-forth between two computers, such as mobile phone and FTP server.

Mobile apps that have implemented FTP features can provide developer many advantages such ability as to:

  • Push local device files to remote FTP server
  • Pull FTP server data from remote server to local device. For example, on user’s 1st app installation, data / media (image, sound, etc.) files can be downloaded to user’s device.
  • etc.

AppyBuilder provides FTPManager component that includes built-in features (blocks) that ease FTP operations without any coding!


Blocks below show how to connect to FTP server and list remote files asynchronously. On completion, it will trigger an event showing the list of files:


Use below to asynchronously download from FTP server to device SD folder. If folder doesn’t exist, it will create all folder and its sub-folders:


Use block below to asynchronously upload local device files to remote FTP server:


Use block below to create folder either on local or remote FTP server:


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

Leave a comment

Posted by on October 28, 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.




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

%d bloggers like this: