Getting started with Hybrid apps & PhoneGap
Background about Hybrid Apps :
Hybrid apps are part native apps, part web apps. (Because of that, many people incorrectly call them “web apps”). Like native apps, they live in an app store and can take advantage of the many device features available. Like web apps, they rely on HTML being rendered in a browser, with the caveat that the browser is embedded within the app.
Often, companies build hybrid apps as wrappers for an existing web page; in that way, they hope to get a presence in the app store, without spending significant effort for developing a different app. Hybrid apps are also popular because they allow cross-platform development: that is, the same HTML code components can be reused on different mobile operating systems, reducing significantly the development costs. Tools such as PhoneGap and Sencha Touch allow people to design and code across platforms, using the power of HTML.
Background about PhoneGap:
To know more about Phonegap, Please go to : PhoneGap
Steps to prepare a build with PhoneGap:
1.Your landing html page index.html should be in the root directory
-----Mobile ---------| public | index.html | config.xml | server.js
Note : The public folder here contains all the JS and CSS files required by index.html.
2. A config file config.xml is required so that phoneGap picks up the configuration for this app such as Name of App, configuration required for Andriod, Iphone devices etc. Also there are many plugins of Phonegap which are very useful and can be used to access contacs, camcorders, mics etc.
It should be in the root directory too along with index.html
sample config.xml :
<?xml version="1.0" encoding="UTF-8" ?> <widget xmlns = "http://www.w3.org/ns/widgets" xmlns:gap = "http://phonegap.com/ns/1.0" id = "com.phonegap.ini" version = "0.0.1"> <name>Hybrid App</name> <description> Hybrid App </description> <author href="http://test.com" email="email@example.com"> Lakshay Katney </author> <access origin="*" /> <gap:plugin name="com.phonegap.plugins.childbrowser" /> <preference name="phonegap-version" value="2.9.0" /> <preference name="webviewbounce" value="false" /> </widget>
- Zip all files mentioned in above structure and upload it into PhoneGap. To upload it, you should have an account on PhoneGap. you can register for
developer account for testing here : Build with PhoneGap
- Upload your files in new app and your build will be ready.
Note : For andriod, you can directly download .apk file and check it out in your andriod device. For iphone, windows & others, you cannot do that directly as they are not open source. you need to go through by their respective development methods