Skip to content

February 1, 2012

4

Getting started tutorial on how to develop portable mobile apps using web technologies

by Colin

This is a first from a series of tutorials about how to develop portable mobile apps using web technologies like HTML5 and CSS3. You will learn to develop Web application that can be packed into a binary app for mobile phone, so the purpose is to quickly build mobile phone apps with only Web technologies knowledge and those apps will be portable accross mobile platforms, at least at source code level.

develop portable mobile apps using web technologies

PhoneGap is a free open source framework which gives you access to native APIs.

I’m working on a Windows station, but this can also be done on Linux and OSX.

The main advantage to using web technologies with PhoneGap is that web designers and web developers can write HTML5, CSS and JavaScript code and still be able to build Apps for mobile devices without having to learn other programming languages such as C++, Objective C or JAVA. The best part is that you write code once and build for Android, iPhone, Blackberry, Windows Phone, WebOS, Symbian.

This tutorial on how to develop portable mobile apps using web technologies focuses on the Android devices

You’ll learn how to configure your IDE towards how to develop portable mobile Apps using web technologies. Same principle to develop portable mobile apps using web technologies can be applied on iPhone or other mobile platforms with little modifications to source code.

Download & Configure tools in order to develop portable mobile apps using web technologies

Next step in order to develop portable mobile apps using web technologies is setting up a new project in Aptana.

Setting up a new project

Launch Eclipse, then go to the File menu and select New > Project



In the project root directory create two new directories:

  • /libs
  • /assets/www

Copy PhoneGap.js from the extracted PhoneGap files to /assets/www
Copy PhoneGap.jar from the extracted PhoneGap files to /libs
Copy the xml folder from the extracted PhoneGap files to /res
Edit the main Java file found in the src folder: (check with image below)

Change the class’s extend from Activity to DroidGap
Replace the setContentView() line with super.loadUrl(“file:///android_asset/www/index.html”);
Add import com.phonegap.*;
Remove import android.app.Activity;

If you experience an error it’s because Eclipse can’t find phonegap-1.3.0.jar. To fix this right click on the /libs and go to Build Paths > Configure Build Paths. Then, in the Libraries tab, add phonegap-1.3.0.jar to the Project. Refresh the project (F5).

Right click on AndroidManifest.xml and select Open With > Text Editor
Paste the following permissions under versionName:

[xml light=”true”]
<supports-screens
android:largeScreens="true"
android:normalScreens="true"
android:smallScreens="true"
android:resizeable="true"
android:anyDensity="true"
/>
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.VIBRATE" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.RECEIVE_SMS" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.READ_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.GET_ACCOUNTS" />
<uses-permission android:name="android.permission.BROADCAST_STICKY" />
[/xml]

We’re almost done, with few more steps in order to develop portable mobile apps using web technologies.

Add android:configChanges=”orientation|keyboardHidden” to the activity tag in AndroidManifest:

[xml light=”true”]
<activity
android:name="com.phonegap.DroidGap"
android:label="@string/app_name"
android:configChanges="orientation|keyboardHidden">
<intent-filter> </intent-filter>
</activity>
[/xml]

The full AndroidManifest.xml code:

[xml]
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.digitalnoiz.app"
android:versionCode="1"
android:versionName="1.0" >
<supports-screens
android:largeScreens="true"
android:normalScreens="true"
android:smallScreens="true"
android:resizeable="true"
android:anyDensity="true"
/>
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.VIBRATE" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.RECEIVE_SMS" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.READ_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> <uses-permission android:name="android.permission.GET_ACCOUNTS" />
<uses-permission android:name="android.permission.BROADCAST_STICKY" />

<uses-sdk android:minSdkVersion="8" />

<application
android:icon="@drawable/ic_launcher"
android:label="@string/app_name" >
<activity
android:name=".App"
android:label="@string/app_name" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />

<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity
android:name="com.phonegap.DroidGap"
android:label="@string/app_name"
android:configChanges="orientation|keyboardHidden">
<intent-filter> </intent-filter>
</activity>
</application>
</manifest>
[/xml]

Hello World

Now create and open a new file named index.html in the /assets/www directory. Paste the following code:

[html]
<!DOCTYPE HTML>
<html>
<head>
<title>DigitalNoiz</title>
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
</head>
<body>
<h1>Hello World!</h1>

<p>In our quest to develop portable mobile apps using web technologies we will first build the most basic app that can be build: Hello World.</p>

<p>This is a native App built with PhoneGap using HTML5 and JavaScript.</p>
</body>
</html>
[/html]

phonegap.js might need to be replaced with phonegap.<VERSION NUMBER>.js

Deploy to Simulator

Right click the project and go to Run As > Android Application
Eclipse will ask you to select an appropriate AVD. If there isn’t one, then you’ll need to create it

Deploy to Device

Make sure USB debugging is enabled on your device and plug it into your system. (Settings > Applications > Development)
Right click the project and go to Run As > Android Application.

And voila, your first mobile program from a series of simple to develop portable mobile apps using web technologies such as HTML5 and CSS3 is done. Simple, isn’t it?

This concludes first tutorial from a series of articles about how to develop portable mobile apps using web technologies, good luck with mobile development!

Leave a Reply

required
required

Note: HTML is allowed. Your email address will never be published.

Subscribe to comments