PhoneGap : To build cross-platform mobile apps using HTML5, Javascript and CSS.

Table of contents
Reading Time: 3 minutes

PhoneGap is an open source framework for quickly building cross-platform mobile apps using HTML5, Javascript and CSS.

Building applications for each device–iPhone, Android, Windows Mobile and more–requires different frameworks and languages. PhoneGap solves this by using standards-based web technologies to bridge web applications and mobile devices. Since PhoneGap apps are standards compliant, they’re future-proofed to work with browsers as they evolve.

The PhoneGap code was contributed to the Apache Software Foundation (ASF) under the name Apache Cordova and graduated to top-level project status in October 2012

Read more about PhoneGap’s beliefs, goals, and philosophy

Apache Cordova:

Apache Cordova is a set of device APIs that allow a mobile app developer to access native device function such as the camera or accelerometer from JavaScript. Combined with a UI framework such as jQuery Mobile or Dojo Mobile or Sencha Touch, this allows a smartphone app to be developed with just HTML, CSS, and JavaScript.

When using the Cordova APIs, an app can be built without any native code (Java, Objective-C, etc) from the app developer. Instead, web technologies are used, and they are hosted in the app itself locally (generally not on a remote http server).And because these JavaScript APIs are consistent across multiple device platforms and built on web standards, the app should be portable to other device platforms with minimal to no changes.

Apps using Cordova are still packaged as apps using the platform SDKs, and can be made available for installation from each device’s app store.

Cordova provides a set of uniform JavaScript libraries that can be invoked, with device-specific native backing code for those JavaScript libraries. Cordova is available for the following platforms: iOS, Android, Blackberry, Windows Phone, Palm WebOS, Bada, and Symbian.
Getting Started guide :

After reading Getting Started guide, you will download the required packages according to platform, set PATH environment variable and setup new project.
Here all code is for android platform.

Set up new project :

Here we created project name demoPhonegap. After creating new project, you will find all HTML,CSS, images and js files in /demoPhonegap//assets/www. There will be a java file named in demoPhonegap/src/com/phonegap/app/

In this file , you will find this code :

when we deploy mob app into emulator then initially it will load the file whose path is given in loadUrl()

example code :
I created demo.html whose path is /demoPhonegap//assets/www/demo.html


In this code, I created a text box and a button.When user will click on button, then an alert will be appear containing text of textbox.

So now, We have to mention this file in loadUrl() method.

When we launch emulator, it will look like as :

When application is loaded, it will look like as :

When application will run, it will look like as :

When click on button,an alert will be shown as :

Written by 

Rishi is a tech enthusiast with having around 10 years of experience who loves to solve complex problems with pure quality. He is a functional programmer and loves to learn new trending technologies. His leadership skill is well prooven and has delivered multiple distributed applications with high scalability and availability by keeping the Reactive principles in mind. He is well versed with Scala, Akka, Akka HTTP, Akka Streams, Java8, Reactive principles, Microservice architecture, Async programming, functional programming, distributed systems, AWS, docker.