HTML5 mobile app development with PhoneGap

Content of downloaded PhoneGap mobile frameworkThis is the first part of the tutorial. Second, Third and the last tutorial parts can be found by following the links.

After receiving good reader feedback for HTML5 widgets tutorial for iOS digital books today I’m starting with new tutorial for developing hybrid mobile applications with the help of PhoneGap framework (or Apache Cordova wrapper as some people like to call it).

The goal is to create a fully working and somewhat useful mobile application from the ground up. To make things more interesting and useful for our readers I’m planning to implement (and go into technical specs) today’s most used mobile application functions. Web services (the way for client devices to communicate with servers and each other over the World Wide Web network), Authentication (after which mobile applications can consume online resources on behalf of third parties), Geolocation, Maps and on device Storage.

I’m estimating that it will take little bit of time to get to the end of the project and to write everything in blog post format. Therefore I will split this tutorial into several parts and will publish them separately here on htmlcenter. It will make it easier to follow for everyone who is reading as well.
You are much welcome to join the discussion any time by posting comments or asking questions. There is much work ahead so lets get started!

Initial file structure after iOS project setup with cordovaWhy PhoneGap and what is hybrid mobile application?

PhoneGap was created at one of iPhoneDevCamp events by Brock Whitten and Rob Ellis and quickly got attention of good few mobile developers globally. Developers who wanted to use HTML5 and JavaScript code in their mobile projects and wanted mobile apps to still be a native mobile applications. Since then PhoneGap was acquired by Adobe who open sourced it as Apache Foundation project named Apache Cordova.

Mobile applications created with PhoneGap are called hybrid mobile apps as they are not fully native but rather are using native web view type elements within mobile application to display app resources. These applications are different from HTML5 based apps running on the web servers as JavaScript code is created for specific set of custom APIs. PhoneGap framework enables set of custom JavaScript APIs to access mobile device native functionality. The source files for mobile application are HTML markup with CSS for styling and JavaScript for interactivity and accessing native mobile functionality.

Such hybrid mobile apps allow developers to use different programming / scripting languages from OS specific one (like Objective C or Java). In this tutorial I want to show you how to create fully working mobile app for both iOS and Android platforms by using mainly the same HTML5, CSS and JavaScript code base. First we are going to create iOS version and later use the same HTML5 / JavaScript code base for developing Android based application.

You might also like

PhoneGap App Tutorial
PhoneGap App Tutorial
Hybrid HTML5 Application Development with Apache Cordova
Hybrid HTML5 Application Development with Apache Cordova ...

HTML5 is the current HTML standard  — WhaTech
Given URL is not allowed by the Application configuration.: One or more of the given URLs is not allowed by the App's settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App's domains.