Building applications for each platform–iPhone, Android, Windows 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 framework was contributed by the Apache Software Foundation (ASF) under the name Apache Cordova and graduated to top-level project status in October 2012. Through the ASF, future PhoneGap development will ensure open stewardship of the project. It will always remain free and open source under the Apache License, Version 2.0.
To develop apps using Phonegap, the developer does not require top have knowledge of mobile programming language but should know languages like, HTML, CSS, JScript.
PhoneGap takes care of rest of the work, such as look and feel of the app and portability among various mobile operating systems and also allows its users to upload the data contents on website and it automatically converts it to various App files.
PhoneGap Environment Setup
An application package must contain following files:
- Configuration File
- Icons for App
- Content (built using web technologies)
App require one configuration file named as “config.xml” that configure all its necessary settings. This file contains all the necessary information required to compile the app.
following is the content of config.xml file
<?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.example"
versionCode = "10"
version = "1.0.0" >
<!-- versionCode is optional and Android only -->
An example for phonegap build docs.
<author href="https://build.phonegap.com" email="[email protected]">
The widget element must be the root of your XML document.When using PhoneGap Build, ensure you have the following attributes set on your widget element.
id – The unique identifier for your application. To support all supported platforms, this must be reverse-domain name style (e.g. com.yourcompany.yourapp)
version – for best results, use a major/minor/patch style version, with three numbers, such as 0.0.1
versionCode – (optional) when building for Android, you can set the versionCode by specifying it in your config.xml.
<name> – The name of the application.
<description> – A description for your application.
<author> – The author of the application, either a company or individual (required for Windows 10 builds).
<platform> – You can have zero or more of these elements present in your config.xml. Set the name attribute to one of ios, android, or windows.If you specify none, all platforms will be built.
It is important to prepare icons of exact shapes and sizes as required by particular mobile operating system. Here we are using the folders res/icon/ios and res/icon/android/drawable-xxxx..To get this work done fast, you can create a logo of size 1024×1024 and log on to makeappicon.com. This website will help you instantly create logos of all sizes for both android and iOS platform.
PhoneGap App Contents
We can create two type of apps. Online app and Offline App. Following is the directory structure for the applications.
In online app entire information content is loaded from the Internet.
The index.html file contains actual links as it contains at the web server and all its links are either absolute or used with base href tag.
Offline app will let you create a web application that is downloaded to its entirety to the mobile devices of a user who can access that offline.
The config.xml contains app configuration settings. The index.html file contains homepage of web contents. All the HTML files should contain only relative path not absolute path or base href tag.
Once selected your app type, organize files in above mentioned structure and zip it using any standard tool zip tool.
Sign Your App
Android requires that all APKs be digitally signed with a certificate before they can be installed. For this reason, you need to sign your app. You may need keytool which is a part of standard java distribution.Execute the following command in %JAVA_HOME% in your Windows command prompt or Linux Shell:-
keytool -genkey -v -keystore my_keystore.keystore
-alias TutorialsPoint -keyalg RSA -keysize 2048 -validity 10000
It should generate one file.
PhoneGap App Compilation
Now we are ready to compile our first web API-based app. PhoneGap accepts user login created on GitHub or using AdobeID. GitHub is a online repository service where users can upload their contents and use them by providing their URL references.
Following steps are required to create Adobe Id and Compile the application.
Create Adobe ID
Got to https://build.phonegap.com/ and register after that login to your account it will display PhoneGap Console as shown in below
Click on ‘Upload a .zip file’ and upload the .zip file we created, which has the entire web content and configurations. You should see the following window after successful upload
Click on the Android icon and the following screen should appear
Click on drop-down option menu next to Android icon that reads No key selected, click on add a key and the following screen should appear
Provide the file created while signing the App. Then click on ‘Rebuild’ button next to it. The app built by this process can be directly uploaded to Google Play. Click on .apk file and you can download your first web-based free app.Before uploading, app should be tested on either virtual or real devices.