In my last post I detailed the process I went through to come to a decision on what method I would use to develop our application ( post here ). I came to the conclusion that using PhoneGap would be the best fit for our particular project.

So, what is PhoneGap ?

“PhoneGap is an application framework that enables you to build native applications using HTML and JavaScript. Think of PhoneGap as a webview container that is 100% width and 100% height, with a JavaScript programming interface that allows you to access operating system features.” (Natili, Giorgio 2013).

In essence PhoneGap allows you to use web development languages HTML, CSS and JavaScript, to develop and test mobile applications for both Android and iOS. PhoneGap is “an open source, cross-platform framework for developing mobile applications. PhoneGap allows developers to leverage web development skills— HTML, CSS, and JavaScript— to developed native applications for iOS, Android, BlackBerry, and many other platforms with a single codebase.” ( Lunny, Andrew 2011)

What kind of Applications can you create using PhoneGap ?

There are three main types of applications available, native apps, web apps and hybrid apps. There are advantages and disadvantages to each method of application development. Native apps are made specifically for the OS they are intended for. Native applications can store more data offline and have more access to the devices hardware and OS features. These apps are more costly because they have to be coded in the language corresponding to each specific platform.

Web Apps can be developed using one common language for all platforms, however they have limited functionality and access to the devices OS. “Web apps are built using web standards, so it’s possible to have a common code base for all the supported devices and it’s much easier to find developers with the appropriate skills. On the con side, a web app is not able to access the entire device’s hardware and OS features and is not installed on the user device, which means that users cannot access it when the device is not online.”(Natili, Giorgio 2013).

Hybrid applications are a mixture of web apps and native applications. “A hybrid app can be viewed like a web app on steroids; in fact it uses web standards and can access most of the device’s hardware and OS features”(Natili, Giorgio 2013).

Beginning in PhoneGap

Using PhoneGap it is possible to build the core functionality of the application testing on a desktop browser before moving onto a native project. You can also use the PhoneGap developers application to test your application on the actual device (this is only currently available for android development as the application was recently removed from the app store).To begin a project you simply open up the PhoneGap desktop application and start a new blank document. You are required to place the new application into a folder and name it. It is also recommended you give the application an ID in the form of a backwards URL.

Scaling UI images based on Pixel Density

1. Create a css class for the images you wish to scale <img class=’highres’ />
2. Create a script able to get all the images marked with the previously defined class and change their width according to the pixel ratio. function processImages() { var pixelRatio = window.devicePixelRatio; if(window.devicePixelRatio > 1) {   var matches = document.querySelectorAll(“img.highRes”); for(var i = 0; i < matches.length; i++) { matches[i].width = (matches[i].width / pixelRatio); } }
3. Run the script when the page is loaded or when the deviceready event is fired. When using PhoneGap, it is strongly recommended that the code that needs to run at startup is executed immediately after the deviceready event.

addEventListener(‘deviceready’, onDeviceReady);

function onDeviceReady(evt){ processImages(); }

(Natili, Giorgio 2013)

Page 186 of PhoneGap Beginner’s Guide by Giorgio Natili has a list of all the common API plugins available.

Accessing Device Sensors

“The use of sensors opens the doors to sophisticated apps, able to improve the user experience and enhance the capabilities of a modern app” ( Natili, Giorgio 2013) Most mobile devices have sensors that sense touch, geolocation, orientation and motion. These sensors are generally composed of an accelerometer, gyroscope, compass, barometer, and orientation sensor. understanding how these sensors work is an important step o understanding how to use them.

Accelerometer : Generally made up of three accelerometers, one on each axis (x, y, z), that measure the changes in velocity

Gyroscope : Measures the rate of rotation around the axes pitch, roll and yaw.(y, x, z).

Magnetometer : Measures the strength of magnetic fields around the device, this is how the phone determines its position in relation to the geomagnetic north pole.

Location Capabilities

Determined by position sensors

• GPS
• APS
• Cell Tower Triangulation
• Wifi Triangulation
• IP Address

Orientation Changes

Device User Gesture	Events Fired	Orientation
Ipad to Landscape	resize	0
orientation	90
Ipad to Portrait	resize	90
orientation	0
Android to Landscape	resize	90
orientation	90
Android to Portrait	resize	0
orientation	0

Current Academic Paper

Bibliography

Natili, G 2013, PhoneGap Beginner’s Guide, Packt Publishing Ltd, Birmingham. Available from: ProQuest Ebook Central. [1 March 2019].

Lunny, Andrew. PhoneGap Beginner’s Guide, Packt Publishing Ltd, 2011. Available from: ProQuest Ebook Central. [1 March 2019].