Fidel Vanegas

myShorcuts a very simple Android’s app …

Oct 12, 2011 Android, Computer Programming

I had got Android’s app inventor installed and posted a blog about it. At this point a just want to browse and understand how capable or limited this development tool might be so for now a very simple application would be just enough to do the trick.

This blog entry is not intended to be a full tutorial by any means but just a way to show what I have found so far including personal comments about the steps along the way. Any software development follows a chosen development life cycle even when one is not consciously chosen.

Application development cycle

In the case below a typical water fall type of “SDLC” would do, of course in a very small scale.

What is the problem (analysis).

Well, after using my Nexus One for some time now I found myself always looking into a number of websites using the phone’s built in web browser. It takes me three clicks to get to reach any of them under “Bookmarks” screen. There is always a way to create a shortcut to those “URLs” that will allow me reach them with only one click but in my case I do not want to clutter my home page with too many icons.

I think if I can have a very simple application to list my websites in a form of a list that I can get access through only one icon placed at my home screen that would offer me a less cluttered home page and a two clicks way to get my web pages.

• Application will present a list of elements that would show;
  • A brief description of the target URL.
  • An image with a link to the target URL.
• List of elements can be static for now.
• When image is clicked the related target URL must be opened with Android’s embedded web browser.
• Add a title on top of the list.
• Add an application icon that will be used to start the application from the home screen.

Basic design.

This is really “basic” and just a simple graphical representation of what I am trying to achieve here. Sometimes that is good enough. The stake holder liked it so let’s move on. Adding an icon launcher over my Nexus one home screen will do the final touch so I will be two clicks away from my favorite web sites.

The implementation.

Implementation part 1 The first part is creating the user interface and for this “Android’s AppInventor” makes the task pretty easy. Basically it shows a generic Android’s user interface empty canvas (Screen) where different UI elements (components) can be drag/drop  into it. Each component properties can be customized such adding text, changing colors, adding images etc. So we took our trusty blue print design and just added all required components as follows: Added a label to show our application’s title. This is “LabelTitle” component below “Screen1” canvas. Note that only one screen can be used with AppInventor at this time. Our design requires a two column by three rows layout. We do this by adding a table Arrangement component we called “TableOfWebPages” and this is set at the same level of our title over the “Screen1”. Inside “TableOfWebPages” component we have added our three “static” list elements by adding a “Label”  and a “Button” for each row. Each of these components where customized for having its own text and a background image. Finally we added a non visible component to handle the actions to be executed when a “Button” on the list is selected. Our design specifies that a the related web page should be shown and opened by touching an item over the list and by following its assigned URLs. So we added an “ActivityStarter” component that we renamed “OpenWebPage” and specified “android.intent.action.VIEW” action to be executed, this will open Androids web browser pointing to a provided URL.
Implementation Transition Now that the user interface drawing part is completed it is time to add behavior to our application.This is basically specifying what to do when a user start touching our application elements. This requires a separate tool also provided by “Android’s AppInventor” SDK. At this point go ahead and click “Open the Blocks Editor” button on the upper right corner of our AppInventor’s page. You will notice that a java application called “AppInventorFoAndroidrCodeBlocks.jnlp” will be started. Click “ok” on the dialog box and you will ready to add some “Code” in no time.
Implementation Part 2 This is the moment every hard core developer has been waiting for so lets start adding some code now. Wait a minute, no text is required to start with, instead drag/drop code components are required to do the trick. “When – Do” is the one piece to handle user actions events, so I added one of this for each Button click event in our list. Inside the on click action component we added a “Set – To” piece to specify the required URL to be used for each button. Note that this is text to be assigned to our already created “OpenWebPage” non-visible component. In this case we are changing the “DataUri” attribute of the so called component. Once the URL has been specified then we just need to launch the “action” and we do this by adding a “call” piece where we do specify “OpenWebPage.StartActivity” to launch Android’s web viewer. No more actions are required by our original design so seems like we are all set up and ready to test what we have done!

What about testing and debugging.

As I Could have imagined if there is no source code to be written but placing graphical pieces of code behavior representation instead I would assume there would be some sort of unit testing framework also base in graphical representation but that is not currently available in “Android’s AppInventor” beta state. So what is left to do is to conduct a black box kind of exploratory testing generally done by trying the application itself. For this we have two options described below that will allow you to easily iterate from your application design pages and testing until everything looks about right and ready for real deployment..

Well, do not really need to have a real piece of hardware attached to do some level of testing thanks to “Android’s AppInventor” that provides easy access to Android’s SDK phone simulator facilities.  Just launch it directly from your “Blocks Editor” page and that is it start exploring how you application behave.
If you do actually have a smartphone running Android’s OS then you can also try your application directly over the phone with no need to install or deploy any bits at all. You can also connect to a device from “Blocks Editor” page and the application will start running over your attached phone! Sweet.

Finally wrap up around deployment.

Ok, You and your stakeholder have tested the application to an extend that all parties are satisfied and ready to call for its release. Mmm, with the caveat that “Android’s AppInventor” applications are not meant to be publicly deployed via “Android’s Market” or at least it is not trivial to do so at the time this article was written. You have basically three options to land your application into any Android’s OS powered smart-phone.

You can generate a bar code tag that you can post into an email, blog or web page for later install from your Android’s powerd smartphone but note this will required to provide author’s credential to process application installation. Just scan this bar code using your smart-phone and follow the instructions.
Second option is to create an APK package that you can share with your friends. Note that this installation method requires to attached you smart-phone to a computer and copy this APK file into the phone before attempting to install.
The third option is to directly install your application into the attached phone. This might be the same smart-phone you used for exploratory testing but at this time the application will be permanently residing on the phone and will not require to be connected to your development PC to run.

Future work

Now that we have a complete application running over our Android’s OS base pone, in my case and old but trusty “Nexus One” I noticed the following few improvements we can ask to our developers for the next session.

1. Convert our “Static” list into a “Dynamic” list by allowing some sort of CRUD functionality.
2. Convert our “Static” list into a “Dynamic” list by connecting to a web service to retrieve list entries.
3. Change the list “Look & Feel” to accommodate at least 5 list entries at a time with a nicer scrolling mechanism.