Tuesday, 30 July 2013

How to Build Cross Platform Mobile Applications


How to build single application which works on all mobile platforms? 

Although Android has occupied good market share and blooming, still there are many mobile platforms
like Blackberry, windows, symbion, ios.

For each of this you need to setup a environment and learn each.

Do you know you can just create a mobile application on different platforms just using HTML, CSS,
XML FILE?

Then just build it into any platform you want.

Thats cool!! Want to see how? let me start quickly

You need following things to start

1. Setup Java on your system - Windows or linux

2. Download and Install Node.js from here for windows and Linux users install using sudo command.

3. Download Ant from here
    Extract and Add path to the ant\bin to your PATH variable.

    Ex: I have extracted to apacheant folder so am adding this to my path variable
           ; C:\apacheant\apache-ant-1.9.2\bin

   Now you have Ant configured.

After you configure above properly check typing javac --version, Ant and npm to make sure you have
configured it properly.

when typed above commands it should not output "'**** is not recognized as an internal or external command,operable program or batch file".

 Now install cordova by typing

                         sudo npm install -g cordova

Note: windows users type with out sudo keyword.

This will install cordova.

what is cordova??   That's a obvious question.
 Cordova is API by apache previously called PhoneGap, which contains many libraries or api functions to program easily with out using specific sdk.

converting web app to ios, android, blackberry, webOS


It also has build on cloud option, using this we can build application targeting any platform with out downloading any sdk of any platform.

So now you got some idea right !!!

Once you install cordova as shown above, create a cordova app

create cordova wetechies  com.example.cordova  hellowetechies

where hellowetechies is display text and com.example.cordova is domain name or package name and wetechies is a folder name which will contain HTML, css files platforms etc.

Now two things can be done

1. Developing the application by editing HTML and CSS files and building remotely for any platform and downloading apk or platform specific file then check on your phone

2. Download sdk of platform which you want to target importing project into eclipse and developing where you can use emulator to check you application.

 In this post am going to show how to use first method :)

So after creating a project, you have to change directory (go inside the directory)

cd wetechies

Compress the wetechies folder in zip format ( currently rar is  not accepted)

Now go to this URL  phone gap build and register yourself.

Now after signing in click on  +new app and click on private tab.

Click on upload .zip file and select you compressed file and upload.

After uploading is compeleted you can see that app in apps sections and click on Ready to build.

Click on the platform you need to target

using phonegap, how to use phonegap build, how to develope cross platform applications

 For demo purpose I selected Android, second from left

downloading android apk, building webapp for android blacberry ios webOS
As I selected android as my platform, It has build for android and also for windows,hp,i.

You can click on specific platform extension like for android on apk file to download and test it on
your phone.

As you have got error for ios and others, you can click and fix it, you will be guided to fix it as building ios applications is quite different from rest.

Once you install and run on your phone, you can see the demo application created by phonegap you can edit and further proceed by following there api documentation at phonegap.com.

happy blogging :)

Ask us if you have any doubts or stuck with anything :)



1 comment: