Web Info and IT Lessons Blog...

Wednesday 14 January 2015

Develop mobile applications in your favourite web technologies using phonegap

Recently I have been working on Phonegap for mobile phone app development and i think it is a really useful and powerful framework. If you are an html 5 game developer and you want to convert your games to android devices, you can do it easily through phonegap. Phonegap works as a wrapper of your web application to run it as a mobile phone application. Phonegap allows you to work in your favourite web technologies and develop apps for android devices.

Phonegap Get Started

Installation of Phonegap:

The easiest way to set up your phonegap environment is to get the Beta Version of PhoneGap Desktop App here. The desktop app is available for both Windows and Mac. Just download the zip file of phonegap setup and run the .exe file to launch phonegap.

Phonegap

You can see in the above image I have already created a Hello-world project in phonegap. To create your first project in phonegap click on the + sign at the top left corner and choose create new phonegap project from the two options provided.

Phonegap Create Project

Choose the local path of your phonegap project and name it. Now click on the 'Create Project' button. You will see that a project directory is created at the local path you provided. You will also see the server running message at the bottom in the green background showing the ip address and port at which the phonegap server is running. Now the next step is to synchronize your desktop app with your mobile device. For this purpose, install the phonegap application on your mobile phone and launch it. Now you will have to enter the ip address along with the port on which phonegap application is running on your desktop in your mobile application and click on connect button. If your ip and port details match you will see 'Successfully connected' message on your mobile phone screen and you are ready to go.

Phonegap App Desktop Pair

Directory Structure:

The directory structure of phonegap is also pretty simple. All you have to do is open the newly created directory created by phonegap. Inside your project directory (which in my case is Hello-world) you will see a folder named 'www'. Open it to see it's contents. At this time, the content of this folder is all you need to develop a phonegap application. The structure of this folder is exactly similar to the directory structure of web projects you are already familiar with. Just play with the index.html file and the .css and and .js files in the js and css directories respectively to see the results. Your phonegap application automatically detects any changes you make in the code after saving the modified file and shows results on your mobile phone screen.

Related Posts
How to handle phonegap touch events
How to build android APK file of your phonegap project?

No comments:

Post a Comment