Mobile app development

iOS, Android, IDEs, APIs, best practices

Web Development

PHP, Joomla, Programming best practices

Tools and techniques

Web, Mobile development tools and technologies

Internet marketing

Keywords, Social media, Google Algorithm, ROI, SEO Ethics etc

29Jan 2013

Getting started with PhoneGap development – What a developer needs?

Phone DevelopmentDriven by smart phones, mobile and web based app development has gained momentum, though, for a novice, it is getting trickier day after day. With diverse gadgets accessing the web, developers across the world face challenges pertaining to multiple use cases like varied screen sizes, pixels, screen mode (landscape or portrait), user convenience, etc. Today, all of these need thorough consideration during an app development process since it is practically impossible to write codes on and on for every new device hitting the market.

Here comes PhoneGap, an open source mobile development frame work to ease the process. PhoneGap takes advantage of the webkit rendering instance, a common characteristic of all the latest gadgets like iPhone, Android, Blackberry, Windows Mobile, etc. In addition, the developer need not learn new codes nor is he expected to have a thorough knowledge of the device SDK, but be capable of using web standards. Simply put, PhoneGap allows you to create web apps using Java script, HTML5, and CSS3. And it’s exciting because it harmonizes with the device API and allows you to package the web app like a native app getting access to the phone’s unique hardware/ services.

So, let’s get started!

PhoneGap for iOS

  • Get xCode and PhoneGap installed.
  • Once done you will find a number of folders relevant to various OS. Click on the iOS folder as we are creating for iOS. This will install PhoneGap features into xCode..
  • Run xCode and create a new xCode project. Opt for the folder “PhoneGap based application.” This would allow xCode to create parts required to develop an iOS application. Compile these assets in an iOS folder on your computer.
  • Thereafter name the demo project and decide on options like the application name, screen mode, app icon, etc.
  • Subsequently, launch xCode in the project navigator and open file named “www.” This contains all parts related to PhoneGap.
  • Click on indexfile.html. Here you can modify codes as required.
  • Now run the demo app on any preferred simulator (iOS versions). Once the demo app is successfully run you are all set to create real time apps of your choice for iOSusing PhoneGap framework.

PhoneGap for Android

  • Install eclipse and Android SDK.
  • Download ADT plug-in and restart eclipse.
  • Launch PhoneGap for Android and run Eclipse.
  • Create a new project on Eclipse and name the project. Select the appropriate Android version.
  • Check “create activity” and go to Android project folder. Build folders like www, libs and res and drag in assets including cordova 1.5.0.jar, cordova 1.5.0.js, and xml to the appropriate location such that it has all parts and pieces required for the demo PhoneGap app development.
  • Finally, create index.html file and put in the required HTML codes. Choose the respective emulator and check for the output.

All said, it takes a little while to get around the framework plus the run time for any PhoneGap app is quite high in comparison to a native app. However, developers could easily bridge the gap for it is a great tool to build effective and innovative mobile applications.

We at Macronimous provide PhoneGap development as part of our wide range of mobile development services. Please check here for further details.