Getting started with Hybrid apps & PhoneGap

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:

PhoneGap is an open source framework for quickly building cross-platform mobile apps using HTML5, Javascript and CSS and easily compile them without SDKs, compilers and hardware.The resulting applications are hybrid, meaning that they are neither truly native (because all layout rendering is done via web views instead of the platform's native UI framework) nor purely web-based (because they are not just web apps, but are packaged as apps for distribution and have access to native device

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="test@test.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>


3. 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

4. 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

Lakshay Katney Avatar

Lakshay Katney

Saleforce developer by profession but I like to work with various technologies.I blog about Force.com, Hybrid Apps, PhoneGap, AngularJS, BackboneJS, JavaScript in general. I am Angular & NodeJS fan.

Read More
Share this page
Top 15 Posts