Empowering Masses to Brew their Own Flavor of DIY Mobile Applications


The Android operating system is currently dominating the smart phone and tablet market. The Free and Open Source (FOSS) frameworks and ease of use has made Android the most sought after OS for use by manufacturers such as Samsung. With thousands of apps available through the Google Play store, Android provides a feature rich experience to the user and has an app for just about anything imaginable.

The exponential growth of the smart phone and tablet markets over the past few years has caught the attention of many sectors including governments, industries and educators. As a result, Mobile Business, Mobile Learning and Mobile Government have become some of the fastest growing sectors taking information and services to a global market through mobile devices. This has given rise to a massive demand for various customized apps resulting in businesses and services investing heavily in custom mobile applications.

Another key factor contributing to the popularity of mobile applications is the rich interaction between the user and the software. Up until recently the concept of user interfaces (UI) was used to design the interface between the human user and the software application. However, the interaction with the UI was limited to visual and occasionally auditory. Devices such as a mouse, touchpad and a keyboard were used to interact with the UI. With the advent of the mobile device and touch screens, the focus has shifted from UI to UX which provides a richer experience to the user. With UX design the user is able to touch the components displayed on screen, use gestures such as pinch, get feedback as auditory messages or vibrations, use speech to text to issue voice commands and use the inbuilt camera for visual inputs. This has revolutionized the way apps are built. Furthermore, UX can easily cater to impaired users making applications more accessible.

Traditionally, Android app development is a highly specialized field reserved only for software engineers and programmers. However, the massive demand for customized apps has lead to the democratization of Android app development through the concept of ‘Visual Programming’. Visual Programming is a concept which allows non-programmers to build powerful application using logical building blocks. It can best be explained as constructing a jigsaw puzzle using fitting virtual puzzle pieces. Each of these puzzle pieces are blocks of code which form complete complex programs when assembled logically.

One of the leading visual app development platforms, at present, is the App Inventor (AI2) platform developed by the Massachusetts Institute of Technology (MIT) of the US. The first generation of MIT App Inventor had a local developer environment where users could download the program onto their computers to develop applications offline. The second generation of App Inventor or AI2 does not have a downloadable developer environment. Harnessing the power of the cloud, AI2 provides a comprehensive web-based app development platform for customized Android app development. Anyone with a Gmail account can quickly setup an AI2 account at http://ai2.appinventor.mit.edu/ . Among the benefits of the new web-based AI2 platform, users can develop apps any time, anywhere with various internet enabled devices. Devices such as tablets and phablets can easily be used to develop apps on the go. However, a larger screen is recommended for a richer development experience. The current AI2 version only supports Google Chrome and Mozilla Fire Fox browsers.

The AI2 platform revolves around two main concepts which are the Designer and Blocks Editor. The designer provides a work space resembling the screen of a mobile device for building the UX of the application. Developers can drag and drop components such as buttons, labels, text boxes, images, date-time pickers, and list pickers etc. to design the UX on screen. The following image shows the designer view of an AI2 project.

The Viewer area displays the screen visible to the end user on his/her mobile device. The Palette holds the various components which can be used in the design of the application. There are several drawers in the palette which are (i) User Interface – visual components to design the look and feel of the application; (ii) Layout – placeholders which allow the components to be aligned as required; (iii) Media – components for audio, video and multimedia; (iv) Drawing and Animation – components for designing interactivity and games; (v) Sensors – components to use various inbuilt sensors of the mobile device such as accelerometer and orientation sensor; (vi) Social – components to access and interact on social media; (vii) Storage – components for using the persistent storage in the device and external databases; and (viii) Connectivity – components to access Bluetooth and other applications installed on the device. The Components pane displays the components which have been used in the application; the Media pane shows the external resources such as images which have been uploaded; and the Properties pane provides access to editable properties for each component.

The Blocks view is used to build the program using visual building blocks.

The developer can drag and drop various individual blocks from the Blocks pane to build compound blocks which perform various tasks. For example the following compound block changes the text of Label1 to “Hello World!” when Button1 is clicked. The logic reads when Button1 is clicked set the text of Label1 to Hello World!. The blocks provide a very high level form of programming. As such, they somewhat follow the rules of English grammar in terms of building the logic. i.e. if you can explain a particular activity in English, the blocks can be designed the same way.

The Built In blocks provide a large collection of blocks such as control structures, logic operators, math operators, text manipulation, list manipulation, custom colors, variables and procedures. Using the Blocks available for a particular component, coupled with the Built In blocks, complicated apps can be developed rapidly with minimum technical expertise.

Another cool feature of AI2 is the ability to debug your application live. There are three methods of live debugging which are (i) using an Android device and WiFi connection; (ii) using the emulator; and (iii) using an Android device with USB cable. Once live debugging is setup, the developer can see the application taking shape in real-time on the Android device or the emulator. This allows the application to be tweaked continuously until the expected effect is achieved. More information on live debugging can be found at  http://appinventor.mit.edu/explore/ai2/setup.html .

(image adapted from http://appinventor.mit.edu/explore/ai2/setup.html)

Finally, once you have developed the application to your satisfaction, AI2 provides you with the feature of downloading the .apk file to be shared with your potential users or to be uploaded onto Google Play. You can also download the project file as a .aia file to be distributed to colleagues or students so that they can build upon your work.

Overall the AI2 platform provides a comprehensive solution for developing and distributing Android mobile applications. One of the key benefits of this approach is that anyone can develop Android applications regardless of their technical/programming knowledge. Since the AI2 platform writes the necessary code in the background based on the blocks you create, the applications developed are relatively error free when it comes to programming code. However, the developer has to build the logic of the application using the blocks correctly. AI2 has features which assist in building sound logic blocks.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s