Most Powerful Open Source ERP

Phone Application Developper Guide

The goal of this document is to learn you how create a phone application.
  • Last Update:2010-11-03
  • Version:001
  • Language:en

Introduction

The goal of this document is to permit to the reader to be able to create an application that can be runned on multiple phones like on Nokia, Iphone, Blackberry, Androïd.

Currently, there is some multiple phone web based application framework and we decide to use PhoneGap.

PhoneGap presentation

PhoneGap framework permit to create applications just using html, javascript and css. It provides javascript api to access the phone hardware like geolocation, accelerometer, camera, ...

Developp application on Symbian

We will start working on symbian. Following, it will be explained how to port the application on other OS (like android, iPhone, ...)

Setting up developpement environment

First, this instructions are only made to design web applications using PhoneGap on Nokia S60 5th Edition devices that run Web Runtime 1.1 (it will not work on other Nokia devices). You can check the list of compatible devices at Nokia website.

There is a PhoneGap wiki that explain how to setup, but as it is not so clear, following steps could be followed.

  1. Download PhoneGap. This will give you a folder structure with some files. If you look in the folder phonegap/symbian.wrt/framework/www, you will see 4 files : Icon.png, index.html, Info.plist, phonegap.js. This files make your phone application.
  2. Download Aptana Studio standalone soft, it's an integrated development environment (based on Eclipse) that is really helpful to debug your application.
  3. Install Nokia Web Runtime plugin into Aptana Studio (this is required to developp on Nokia phones). To do this, follow "Aptana Studio based" installation on Nokia howto.
  4. You are now ready to create a Symbian application.

Concrete example of how to create an application

Now the devel environnement have been setup, here it's explain how to create an "Hello World" application.

Create new project

In Aptana studio, go to File -> New -> Project. In the project wizard, select "New Web Runtime Widget". Select "Basic Widget Project" and give a name to your new project. (you can follow nokia explanations here)

Modify the index.html page to have this body and save :

    <body onLoad="javascript:init();">
        hello world
    </body>

File organisation

PhoneGap permit to create applications just using html, javascript and css, so, the files you need are from the same type :

  • index.html : the first page, it's the only one that can access hardware api (geolocation, ...). You can have others web pages but they can not acess hardware api.
  • icon.png : the icon of your application used in the phone to launch it
  • basic.css : css used by your application (name can be changed). It's required to link it to index.html like in any website
  • basic.js : javascript file used by your application (name can be changed). It's required to link it to index.html like in any website
  • phonegap.js : phonegap API. This file change from one phone to another, you find it in the folder structure you downoad from PhoneGap (in phonegap/symbian.wrt/framework/www folder) copy it into your project.

So basically PhoneGap API can be summarized by just one javascript file (phonegap.js). All other files are phonegap independant (for symbian at least).

Preview on emulator

Now you can preview and debug your new application doing the following. From aptana left pannel (file explorer), right clic on wrt_preview_frame.html file and chose Run As -> JavaScript Web Application. This should open firefox and you should see a fake phone that display your application (for now just "hello world).

Package your application

On left pannel (file explorer), right click on your project, and chose Package Widget. You can see error message in the console. If every thing works fine, you should have "Packaging Successful" message at the end of the console. The package is in your project folder : YourProjectName.wgz.

Deploy your application

There is severals way to deploy your application on a phone :

  1. using bluetooth
  2. using wifi (you need an apache server running on your machine)
  3. using cable (if you have a cable, put the application on your phone, in the same way than for a USB key)
  4. by mail if you can read your mails on your phone
  5. ...

Install your application on mobile phone

Once the application is on your phone, use the file explorator to find it, and open it. This starts the installation process, which follows the same sequence as installing an application. Once installed, the widget will be in your Application folder. So go to Applications, you will find the icon you add on your project at the begining, just clic on it to have the application launched. Enjoy ! 

How to port the application to android

how to set up devel environment

There is an Eclipse plugin for android devel that make life easier, unfortunatly this plugin seems not compaptible with nokia plugin previously installed on aptana. To make things easier, use aptana for Nokia devel and Eclipse for android devel.

Some paket are required, on mandriva, you can install them like this :

urpmi java-1.6.0-sun-devel java-1.6.0-sun ant urpmi rubygems

install nokogiri :

sudo gem install nokogiri

evrything else is well explained at http://phonegap.pbworks.com/Getting-started-with-Android-PhoneGap-in-Eclipse

How to port the application to iPhones

Everything is very well explained here : http://building-iphone-apps.labs.oreilly.com/ch07.html so I will not reinvent the wheel, just follow this explanations. This how to permit me to create Geoblabla application available on the apple store.