If you are a web app developer and you care about mobile, you definitely heard of PhoneGap
PhoneGap is a free and open source framework that allows you to create mobile apps using standardized web APIs for the platforms you care about.
Before we ger started let me clarify that PhoneGap and Cordova are same thing so don’t get confused !!!
I needed a small app to play with phonegap and last time I wrote the simple note application in AngularJS immediately I start converting it to a phonegap application, which wasn’t that hard.
Preparing Cordova
First you need to install Cordova CLI, you can do this by running
1
|
|
Now that you have Cordova installed, go to your project folder and run this
1
|
|
and then go into cordova-app folder
1
|
|
Now all you need to do is to add the platforms that you want to make you application for !! Keep that in mind you need their SDKs instilled !!
1
|
|
Application Source
Now we are ready to work on our source code which should be inside the www
folder inside your cordova-app folder !!!
The source code is almost the same as the webapp version that I put in my last blog post, except a few changes that i’m going to explain now !!
Very first change it that we have to include Cordova library in our main html file.
1
|
|
For every Cordova app we need one main script file to listen to deviceready
event and initialise our application and our plugins !!
After release of IOS7 and PhoneGap 3 your application uses the whole screen which means the app starts from top of the screen that means you need to shift it down 20px if you want to have status bar while your application is running or otherwise you have to hide the statusbar!! There are a lot of ways to fix this problem but the easiest one is to install status bar plugin :
1
|
|
and then we have to run this code in our main.js file :
1 2 3 4 5 |
|
For more information about this plugin go here !!
Build process and testing
When everything finished all you need to do is to run build command which you can specify your desired platform !!
1
|
|
You app is ready now !! Now you can open the Xcode project file inside the platforms/ios folder and play with it using the iOS simulator.
A small tip if you are developing for iOS, you can install ios-sim using homebrew and then you can run this which directly runs your application inside the simulator !!
1
|
|
1
|
|
Conclusion
This is simple app that helped me get my hands around phonegap, and hopefully was useful for you as well !!
You can get the source code from HERE !!