Friday 27 May 2016

Android Development for Everyday People - Using App Inventor To Send Shortcodes

Welcome to a new week. This week, we will be looking at how to use App Inventor to send shortcodes.
Shortcodes are numbers meant for services that are created in collaboration with a telecoms provider. The aim of which is to carry out a particular functionality in the telecoms system.

The service I will be using as an example is the Bank 737 shortcode service from GTB. Now I am not a staff of GTB only a customer who got dissatisfied with the inconvenience of having to type *737* every time I wanted to perform an operation.

During the course of developing this application, I learned how to use shortcodes in App Inventor. Special thanks go to @puravidaapps for insight on how to do this.

The system architecture for this service is shown below:

 Once again I repeat that I am not a staff of GTB so please don’t take this diagram as the gospel. This diagram is based on my analysis of how the system works from my perspective as an engineer, it represents how I would design the system if I was given the task of implementing it.

Bank1337 is simply a frontend to the Bank 737 shortcodes. It starts the process of contacting the shortcode service. Once it does that, the GTB USSD API takes over and continues the interaction with the user.

The shortcodes that power this service are shown below:

Getting Started

Using the NICE method, our first step would be to name our application. In my case, I named my application Bank1337. 1337 represents Leet. We don’t use the name Bank 737 because we don’t have the copyright and we wouldn’t want GTB to come after us J.

Choose a name for your project and let’s start creating our application. Last week, we covered how to create a multi-screen applications so I won’t go over it here again.

For the shortcodes, there are 9 things we can do. They are listed below:
  1. Buy Airtime (Self)
  2. Buy Airtime (Third Party)
  3. Transfer to GTBank
  4. Transfer to Other Banks
  5. Pay Bills (Startimes)
  6. Internet Banking Details
  7. Generate Token Code
  8. Account Opening
  9. Balance Check/Enquiry

The code for the Bank1337 application has been placed in the App Inventor Gallery. For the purposes of this tutorial, I shall only explain how to create the code for the first operation. Please search the App Inventor Gallery for the source code.

User Interface

The operations 1 to 5 will have their own screens while the remaining can be done from the first screen.
Our first screen looks as shown below:

Once the user presses any of the first five operations, it should go to a new screen. The remaining can be done using the first screen. In total, this application has 6 screens.

For the first operation, we use a simple user interface to retrieve the amount of airtime the user wants to buy. This is shown below:

For our textbox component, we want to ensure that the user enters a number and that the number entered is less than N1000.

The NumbersOnly property of our textboxes are set to ensure that only numbers are entered in the textboxes. This is done for all the textboxes used throughout this application.

Since the code is available online, I will show you the code that moves from one screen to the other. This is shown below:

Once we click on the first button, the program redirects to Screen2. On Screen2 we perform our operation.
The code for Screen2 is shown below:

The only component we have not seen before is the PhoneCall component. This is found in the Social drawer of the Palette.

The PhoneCall component allows you to make phone calls using App Inventor. The PhoneNumber of the PhoneCall component must be set to the shortcode value along with the value in the textbox.

Note the %23 which is the Unicode value of #. App Inventor does not allow you to use # so we trick the component into making a call with its Unicode value.

At the end of the day, every character is converted to Unicode so using this method, we ensure that the # is attached at the end of our shortcode. So what is going to be set as the phone number of the PhoneCall component is going to be in format *737*AMOUNT%23.


This week, we created a simple application to work with the shortcode service from GTB. While the original shortcode service is simple, the Bank1337 application adds accuracy and convenience to the mix.

The source code for the Bank1337 application is available in the App Inventor Gallery and you can also download the final application from the Google Play Store.

The gift of being able to program is the fact that you can create. You don’t have to accept the world as it is you can create solutions to meet your needs. Once you learn to program, you can bend computers to your will and make them do whatever you want.

As a Nigerian I testify that the world is gradually moving to the stage where smartphones and hence computers surround us everyday. So learning how to program is starting to look like a super power.

Next week, we will be looking at how to create games using App Inventor. 3 more topics to go and we will be done with this series have a great weekend.