PhoneGap Tutorial

What is PhoneGap?

 PhoneGap is a kind of mobile application development framework by the Adobe system, which is used in creating mobile apps. Phonegap is a mobile application development platform that was created by a company called Nitobi. Adobe purchased the company in the year 2011, and renamed it as Phonegap. After that, an open-source and free version of the software was released, which is now called Apache Cordova.

PhoneGap technology is used all over the world as a cross-platform mobile application development software. This technology allows developers to build applications using very easy languages such as HTML, JavaScript, & CSS. This software development framework by Adobe will allow you to produce apps for popular mobile OS platforms like iOS, Android, BlackBerry, as well as windows mobile, etc., which are considered to be the first-class applications once they are published for download on the phone.

 One very good thing about PhoneGap is that developers are not required to have any knowledge of mobile programming to use it, but they need to have knowledge of web development programming languages like HTML, JavaScript, and CSS, which are not so hard to learn, one can easily understand and work on these languages.

What is PhoneGap?

The need for Phonegap

Every mobile operating system has its own set of tools to create apps that can run on them. The applications developed for one operating system can not run on any other system because each OS is entirely different from each other.  The developers tried to develop a system that can cover all the mobile operating systems in order to increase its reach among the targeted users.

Thus for the developers, it became a challenging task to create a program that can run on all operating systems of different mobile phones, which could be felt, look, and functionally identical in all mobile platforms.

For all the problems mentioned above, phoneGap is the solution. Developers use their standard websites APIs for all mobile operating systems, which is open-source and free. Developers just need to know about web development by using HTML, JS, and CSS. The rest of the work, like the look, feel, and the portability between different operating systems is the responsibility of the phone gap.

The developers are also not required to know programming to code the app from scratch. It also is done by phone gap

The phone gap also gives the facility to its users that they can upload the data contents on the website, and it is automatically converted into various apps.

Why developers should use PhoneGap

Developers need to know the reason why they should opt for a PhoneGap when there are so many other frameworks present these days. The following are some positive features of the PhoneGap.

  • It is very easy to start with multiple platforms based on single code Rapid testing and the development of apps. It is a very easy irrespective of the platform. It maintains uniformity, and here is no need to hire expert developers.
  • Apps that are developed by using PhoneGap behave like native apps.
  • It is open-source software.
  • It is powered by a powerful source like Apache Cordova, which is now a part of Adobe.
  • It is easy to work with the Plugin.
  • The PhoneGap is cost-effective. If you have a low budget and want to get more benefits, then PhoneGap is the right tool for you.

Mode of App creation using PhoneGap

We can create apps in two modes using PhoneGap:             

  1. Offline app creation

Another benefit of the phone gap is that offline app creation can also be done by using Cordova command-line interface and Github repository mechanism (GRM). One of the largest community is the Cordova development community. Copied offline websites are present in the local hard drive, which can be accessed whenever the user needs them without an internet connection.

You need to follow the procedure that is written below to create an offline application using phonegap.

  • First, you have to implement an offline configuration file (config.html)
  • Now you have to add index.html file which contains all the web content of the homepage
  • After that add data.html file to which all of your relevant data is processed according to your application
  • When you add all the above files in your offline app project, then you have to add .CSS file for designing the web-pages and Javascript (.js) file to make web pages interactive.
  • And at last, you have set icons according to their operating system.
  • Online app development

In online development mode, entire web content is loaded from the internet website.

For online app development, the following items are included in its package:

  • Configuration files
  • Icons for app
  • Sign-up
  1. Configuration Files

Only one configuration file is needed for a web app, which should be proper or adequate to configure all the necessary settings of the app. Its name is config.xml. This file contains all the information which is needed to compile the app. The file with the required code is given below:

<<?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.tutorialandexample.onlineviewer" version = "1.0">
   <name> tutorialandexample </name>
   <description>
Tutorialandexample Online Viewer
   </description>
   <author href = "http:// tutorialandexample.com" email = "contact@ tutorialandexample.com">
tutorialandexample</author>
   <preference name = "permissions" value = "none"/>
   <icon src = "res/icon/android/drawable-ldpi/tp_icon.png"
      gap:platform = "android" gap:qualifier = "ldpi" />
   <icon src = "res/icon/android/drawable-mdpi/tp_icon.png"
      gap:platform = "android" gap:qualifier = "mdpi" />
   <icon src = "res/icon/android/drawable-hdpi/tp_icon.png"
      gap:platform = "android" gap:qualifier = "hdpi" />
   <icon src = "res/icon/android/drawable-xhdpi/tp_icon.png"
      gap:platform = "android" gap:qualifier = "xhdpi" />
   <icon src = "res/icon/android/drawable-xxhdpi/tp_icon.png"
      gap:platform = "android" gap:qualifier = "xxhdpi" />
   <icon src = "res/icon/ios/Icon-72.png" gap:platform = "ios" gap:qualifier = ""/>
   <icon src = "res/icon/ios/icon-57.png" gap:platform = "ios" width = "66" height = "66" />
   <icon src = "res/icon/ios/icon-72.png" gap:platform = "ios" width = "58" height = "58" />
   <icon src = "res/icon/ios/icon-57-2x.png" gap:platform = "ios" width = "110" height = "110" />
   <icon src = "res/icon/ios/icon-72-2x.png" gap:platform = "ios" width = "150" height = "150" />
</widget>

Brief description of the code

All contents of the configuration are enclosed in tag < widget >.

Syntax:-   

< widget > ……. </widget >
  • Id:- Unique key for the application. It must be a reverse-domain name style (e.g., com. tutorialandexample.onlineviewer) to suit all compatible platforms.
<widget id = app_id>
  • Version:- using a major/minor / patch type version with three numbers, like 0.0.1 for better performance.
<widget version = "0.0.1">
  • Name:- This is the app's name, which will appear on the mobile screen below the app icon. You can search your app using that name.
<name> App Name</name>
  • Description:- In the description section, we will give a short overview of our application.
<description> about app </description>
  • Author:- This block contains the name of the author or programmer, usually set to the name of the organization that launches this app.
<author> Author_Name or company_name </author>
  • Platform:-  In your config.xml, you can have zero or all of those elements present to Set the name of ios, android, or window attribute. If you don't specify any, all the platforms will be built. Using Example:
<platform name=”ios”/>
<platform name=”android”/>
<platform name=”winphone”/>
  • Preference:- The preference tag is used to configure a variety of options, such as FullScreen, BackgroundColor, and Display Orientation. These options are in pairs of names and values. For example: name = value of "FullScreen" = "true" and so on. Since we don't need any of these advanced settings, we just don't need to specify any permissions at all.
<preferences name = "permissions" value = "none">
  • Icon:- Allow us to add icons to our apps. It can be configured in several ways, but since we're learning the shortcut of everything, here it is. The .src defines the path of the image of the icon. The gap: platform defines which OS platform to use this icon for. The gap: qualifier is the density used by android apps. The iOS devices use the parameters of width & height
<icon>
  • Icons

There are so many devices of different sizes that have the same mobile operating systems. To target the users of one platform, you have to furnish the icons of all mobile types. It is important to create the icons of exact size and shape as required by a specific mobile operating system.

  • Sign your app

It is very important to sign the app by the developer or the developing organization. For this purpose, you need a key tool that is a part of the java tool.

Type %JAVA_HOME% in your windows command prompt or if you are using Linux then execute this command in your Linux shell

Text Box: keytool -genkey -v -keystore my_keystore.keystore 
   -alias tutorialandexample -keyalg RSA -keysize 2048 -validity 10000

When you enter this command in your command prompt, it generates a key which is used to sign-in in your app

Benefits of PhoneGap

  • It reduces development cost

As it is well known for cross-platform, so developers can develop an app and deploy it across all mobile platforms. This is a huge benefit for both the business and the developer because, within the shortest possible time, their product is in the market.

  • Easy for web developers

By using PhoneGap, it is quite easy to develop apps for developers as it requires only working knowledge of JavaScript, CSS3, HTML5 to develop cross-platform apps that are as good as native apps. This is good news for businesses and developers, too, because they don't have to learn a new language to use this framework.

  • Each app can behave like native apps

It provides developers to access the native APIs so that the app can make use of attributes like contacts, calendar, geolocation, camera, and so on. It also gives the user experience of native apps.

  • Provide Robust Backend Support

The highly efficient backend support system helps to accelerate production and decreases development effort.  The robust backend can affect app performance. Technology beginners may turn to the beginner's guide to learning how to speed up the development phase.

  • Easy to work on Plugin

PhoneGap Build supports several PhoneGap plugins and Cordova plugins. By creating an app on PhoneGap, developers can extend the native functionality. You can use the Adobe repository to access the plugins. Most of the well-known plugins in the repositories are social sharing, GAPlugin, pushwoosh, status bar, Facebook connect, and barcode scanner.

Drawbacks of PhoneGap

  • PhoneGap doesn't support the plugins with Hooks

PhoneGap Build does not accept hook plugins, so this can obstruct the functionality. In WordPress, there are hooks that help developers to try their code with the core codebase, themes, and plugins in WP. Likewise, PhoneGap does not support the hooks of Córdova.

  • PhoneGap doesn't support hardware intensive app

PhoneGap is designed to develop simple apps. When you create the gaming app, it may not be delivered. Gaming developers are likely to experience 'freeze' and 'drop' problems while pushing notifications from their devices.

  • PhoneGap require Mac to develop ios applications

Developers of PhoneGap applications allow ios SDKs to develop an ios application that needs a Mac to download such SDKs. Without Mac, developers will not be able to create an iOS app.

  • Plugins can get outdated

Often the plugins that you've used are outdated and don't work effectively.This situation could hinder the app functionality completely, like the camera may not work well. You will know this halfway through the project, and this could also lead to some destructive outcomes.

PhoneGap Applications

Below are some applications built on the PhoneGap platform, which provides better user experience-

  1. Wikipedia

So many people all over the world use this free encyclopedia app. It's built like native applications on the PhoneGap platform, and the system works efficiently.

2. DHS Program

This stands for Demographic and Health Surveys. This software was developed by Adobe and provided data on health and surveys. This can be known as big data for small screens.

3. Solution

It is used to make international payments easily. This app is using hyper Wallet technology for making payments. This app is a great replacement for making payments instead of writing cheques.

4. Tripcase

This is one of the smartest applications of PhoneGap.

This app supports users on their journeys.

How to develop apps for android using PhoneGap?

In this tutorial, we will tell you about the Full app development with the Phonegap Cordova

The command-line interface also abbreviated as CLI. To start building android apps, you will have to follow the steps mentioned below:-

Step 1: Install the Android Eclipse Bundle package.

First of all, you may need to download and install the Eclipse Android development tools package by clicking on the link given below:-

http://developer.android.com/sdk/installing/index.html?pkg=adt

 This package contains the Android SDK options, the Eclipse IDE with pre-installed Android developer tools.

Step 2: Set-up the Android SDK

Once you have installed everything that you will need in the further steps, open Eclipse and then go to the Windows option and then click on the Android SDK manager option. In the dialog box, you have to select the SDK tools.

Step 3: Set – up an Android Emulator

Now you will have to create a virtual android device, also known as AVD, on which you can run and test the apps that you've built in this IDE. Go to the windows option and then select the Android Virtual Device Manager. In the AVD Manager window, on the Device definition menu, you can select your desired emulator and click on the create AVD button.

Step 4: Install Cordova CLI

To install the Cordova command-line interface, you will probably require node.js file. If you have not installed it, then install it first.

Step 5: Create a new project in the SDK

Create a new project by typing the required commands and then build the app. After that, deploy it to the emulator to check whether it's working or not. Once the emulator is running, you can see the APACHE CORDOVA icon splashing on your screen. Now, you can share your built app on the web.

How to develop apps for Windows using PhoneGap?

The Phonegap desktop App is one of the easiest ways to start developing apps with PhoneGap technology. It is a substitute for the Command-line interface of the Phonegap. However, the same libraries are used in this method, too, as the PhoneGap CLI. The installation of the Phonegap desktop app is a very easy job to do. In this method, you do not require GIT, NPM, or even node.js. You can start developing your first windows app by following the steps below:-

Step 1: First of all, you have to download the PhoneGap desktop app compatible with windows by clicking on the link given below:-

https://github.com/phonegap/phonegap-app-desktop/releases/download/0.4.5/PhoneGapSetup-win32.exe

Step 2: After downloading the desktop app, you have to Extract the downloaded file to your desired location. After extracting, you simply have to install the app in whichever location you want.

Step 3: After installing, go to the folder where you have installed the app. Then double click on the installed app to open it.

Step 4: Once you have opened the app, click on the + icon on the top left panel of the app interface. Then select Create New Phonegap Project.

Step 5: Then, you have to select a location where you wish to save your project. After that, assign a name to your project as per your choice like "My project." Then click on Create Project.

Step 6: The app server will start on its own. Once the server has started, you will see your IP address on the bottom of your screen with a green-colored banner. If not, then click on th arrow icon (>), which is just right to your app's name.

Step 7: Now, you can start editing and previewing your project on a device.

These are some simple steps by which you can start building your windows app through the PhoneGap desktop App

APP Compilation in PhoneGap

Once you are done with creating your first app with the PhoneGap technology, you must be thinking over the compilation of apps. PhoneGap provides you the facility to even compile the built apps with their own user – friendly interface. In this tutorial, we will learn to transform our web elements into the format of a usable app that can be easily published on different mobile app stores.

The PhoneGap app compiler provides support for User login based on GitHub, or it can be done using the Adobe ID. For your information, GitHub is a platform where you can upload your created contents, and all of its users can use it by providing the URL of the respective content. The app script that you have created can be uploaded to the GitHub, and then it can be directly used by the PhoneGap compiler.

In this tutorial, we will be learning how to compile an app using an Adobe ID. You can follow the steps given below to create an Adobe ID in case you do not have one:-

Step 1: First of all, you will have to open the PhoneGap website by clicking on the link http://www.build.phonegap.com/, and then you have to click on the Create an Account button.

Step 2: Once you click on register, a new window will open similar to the below image:-


Now, you are required to fill in the required details and then click on the sign-up option. Once you create an Adobe ID, you can use the ID that you have created for logging into the PhoneGap web portal.

Step 3: After signing up, you will be automatically taken to the PhoneGap compiler interface as shown in the image below:-

Text Box:

Step 4 : After that, click on  '' Upload a .zip file '' option. Once we click on this option, we will have to upload the .zip file that we have created in the earlier steps, which contain the entire web elements and the configuration of the apps. After successfully uploading the .zip file, the following window appears on the screen:-


In this window, you may observe that the iOS app has instantly failed in its processings as we have not provided any signed key that is required for publishing iOS apps. We are learning to publish android apps, and you can see here that the app has been successfully created by the PhoneGap. This app cannot be uploaded to the Google Play store until we will not assign any key to it.

Step 5: After that, you have to click on the Android icon. After clicking the android icon, the following interface should appear:-

Text Box:

Step 6: Now, click on the down arrow located just next to the android box, which displays '' No key selected '' by default. After that, the following screen will appear:-

Step 7: In this window, you have to provide the Title and Alias for your app as per your choice and click on the Keystore file button. Here, you have to upload the Keystore file that you have created earlier. After that, click on the ' Rebuild ' button next to it.

Step 8: After following the given steps, the created apps can be directly uploaded to the google play store or any other mobile app stores. By clicking on the .apk file, you can download your first app.

Before uploading the app to any app store, make sure to check it on an emulator or an Android Virtual Device to see its compatibility with the targeted devices.

Push Notifications

After developing your first app with PhoneGap, you can use the PhoneGap developer app, which can be paired with the PhoneGap Command-line interface to preview your app. You can also check its compatibility without the tension of setting up SDKs and compiling the apps. With the arrival of PhoneGap CLI version 6.2.0 and the Phonegap developer app version 1.6.2, you can now test the functionality of push notifications feature without the Google cloud messaging (GCM) for android or an Apple push notification service (APNs) for iOS devices.

Note:- Before continuing, make sure that your phone and computer are connected and running on the same network.

Creating a default PhoneGap push project:-

To create a default PhoneGap push notification project, you will have to follow the below steps:-

Step 1. You have to enter the following code in your PhoneGap CLI :

    $ PhoneGap create myApp –template push

When you run the above code, a folder named myApp will be created in the current path with a default project name and id. You can specify a name and id to the project on your own to maintain the uniqueness of the project containing the same code of the project, as shown below:

$ phonegap create myApp --id "org.myapp.sample" --name "appName" --template phonegap-template-push

Step 2. After running the code, please make sure that the following output is displayed on your console:

creating a new cordova project.

Retrieving phonegap-template-push using npm...

Step 3. You can change the directory of the new project with the help of the cd command.

$ cd myApp/

Step 4. Before proceeding further, ensure that you see the set of files and folders as shown below:-

config.xml         hooks         platform        plugin              www

Step 5. After that, command into the www folder, in which you look at all the files and folders where you find the content of the app that you have to build, and the starting point is always the index.html file.

  $ cd www/ 

Step 6. Now you have to type $ PhoneGap serve. After typing this code, you will receive the address of the server on which your app is being hosted in the output section of the console.

Step 7. After that, you have to go to your mobile device, where you are running the PhoneGap developer app. Here you have to enter the server address on the main screen

Tap on the Connect Button.

Text Box:

After completing all of the above steps, you will see the connection is occurring, and it is followed by a completion message showing the text "SUCCESS." If you receive any kind of error, please ensure that your computer and mobile device are both connected and running on the same network.

When you run the app first time inside the PhoneGap developer app, it will ask your permission to receive the push notifications and the following dialogue will be displayed on the screen:-

You have to click on the OK button to provide the required permissions to the app for showing the push notifications to you. On further running the apps, you will not see such kind of this dialogue box.

Once the PhoneGap developer apps get connected, and your mobile applications are loaded, the following screen should be displayed for preview as shown in the image below:-

Sending your first push notification

If you are testing the app on an Android device or a browser, you will have to write the required code for the push notification. You will have to replace the default device ID with that one that you received during the registration. By following this step, a push notification will be received by the mobile app.