MOTODEV For Enterprise

[#1]

Doing something for the first time often seems to be the hardest. Whether it’s on a personal or professional level, it can be difficult to just get going. I think the same holds true for creating mobile enterprise apps for your company. As you consider your first app, I strongly recommend keeping it as simple as possible. One opportunity may be to create a web app with an Android “wrapper”.

About this time last year our IT Strategy team was challenged to develop an Android app that could be used in our enterprise. This challenge was really a test for us to understand what it would take to create an app for use on our mobile devices and a way for us to essentially “dip our toe” in the pool per se. We knew for our first effort we didn’t want to tackle something too complex, but also wanted to make it useful for people. We already had a mobile view of one of our intranet landing sites, so we decided to give it an Android experience.

What you will need to get started:

1. Choose a website to mobilize. This should be a site that is exposed outside of your company’s firewall (ex. yahoo financial lookup, or expose an internal site that handles authentication and security).
2. Setup your development environment/tools - install MOTODEV Studio. Click here for instructions.
3. Skills - basic javascript

The code example below shows the core activities with simply calling a website via your Android app. By changing the string url to the web address of your choice, you now have an android app for accessing a website. With a few more modifications, you’ve just completed your first app.

package com.example.web;

import android.app.Activity;
import android.content.Intent;
import android.net.Uri;
import android.os.Bundle;

public class View extends Activity {

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);

		String url = "http://www.motorola.com";
		Intent i = new Intent(Intent.ACTION_VIEW);
		i.setData(Uri.parse(url));
		startActivity(i);
		this.finish();
	}
}

Full code here:  http://code.google.com/p/android-web-example/downloads/list

Here’s what to do:

1. Download zip file fromhttp://code.google.com/p/android-web-example/downloads/list
2. In MOTODEV Studio, Click File - Import - Existing Projects into Workspace.  Click Next.  Under select archive file, select the zipped file that was downloaded, then click finish.
3. The Android project now exists in your workspace.  Change the url value in the View.java file to your url. To get to this file go to src -> com.example.web -> view.java
4. Customize the app to your organization by replacing the icon files in the drawable folders and renaming the app in the strings.xml file.

While there are several ways to wrap a web page (WebView, UI, etc..) into an Android app, the way shown here makes maximum use of Android's built-in support.  For additional information on WebView, please visit the WebView tutorial.

Wrapper script:

An example of an Android “Wrapper” in a webapp would be to include highly visible functional buttons that link to the corresponding webapp functions. In this case, rather than pinch zooming to see the home or back buttons on the webpage, menu selections were added to the screen for ease of navigation.  See image below:

Here’s example code of the menu buttons used above:

public boolean onCreateOptionsMenu(Menu menu)
   	{
          	menu.add(1, 1, 1, "Home").setShortcut('1', 'a')
          	.setIcon(null);
          	menu.add(1, 2, 1, "Exit").setShortcut('2', 'b')
          	.setIcon(null);
          	return super.onCreateOptionsMenu(menu);
   	}
 
   	@Override
   	public boolean onOptionsItemSelected(MenuItem item)
   	{
          	
          	switch (item.getItemId()) {
          	case 1:
                 	goHome();
                 	return true;
          	case 2:
                 	ExitApplication();
                 	return true;     	
          	}
          	return super.onOptionsItemSelected(item);
   	}

Security:

For increased levels of security, you can use two factor authentication of your device and user. In our case, users had to register their device via their pc and scan a QR code with the device. This activity stored a cookie on the device so the app recognized it as being approved for accessing the content.

Another way is to prompt the user for login and password the first time they access the site using the device and then store this information in the device. This leverages the existing website security and keeps it simple for the user <see screen shot above>. This will be covered in more detail in an upcoming blog.

Hopefully the information above gives you a basic understanding of leveraging webapps for Android. Be on the look out in upcoming blogs as we  progress through the cycle of testing, deploying, and security/authentication of your apps.

Greg Hansen 

IT Strategy, Motorola Mobility

Copyright © 2011, Motorola Mobility, Inc. All rights reserved unless otherwise explicitly indicated. Sample source code written by Motorola Mobility, Inc. is provided to you under the conditions of the Motorola Modified BSD License.

[#2]

Hi Greg I just finished following your tutorial and it works great, thank you very much, I would just like to know where do I put the example code for the menu buttons.

[#3]

Hello Dave, sorry for the delayed response. But you will want to put it In the main View class, as a separate function from onCreate.  I hope this helps.