Umer Pasha Blogs

www.umerpasha.com

Simplest example of Phonegap testing bar code, camera picture, camera video and geo location

When I started using phonegap, It took a while even with the available documentation to get the app going. I made this example project to trim it to bare minimum but still perform the most sought after functions on any mobile device.

For build purposes i am using build.phonegap.com. Create a test account that allows for one app.

You will probably also need a github account as it makes it very simple to pull updated code from repository when making a build on build.phonegap.com.

I am testing this on an android device as it is just easy to update and download app for testing using android. For Apple/iOS, you will need to have a key.

The functionality has been tested on latest versions of Android, iOS and WinPhone.

To understand this tutorial, you should already know:
Some knoweldge of HTML and HTML5
Working knowledge of Javascript
Some idea what phonegap really is

It has examples of camera function, video recording and geo location.

The only files you have to look into are in www folder.

Config.xml has all the plug-ins defined:

Example: <gap:plugin name=”org.apache.cordova.core.geolocation” version=”0.3.10″ />

Index.html has all the UI and buttons to invoke different functions along with DIVs to show results

Js/app.js has all the javascript code.

I wait for device to be ready to listen to events:

Example: document.addEventListener(“deviceready”, onDeviceReady, false);

If an event is fired (touch end of a button), separate functions are called:

Example: document.querySelector(“#startGLoc”).addEventListener(“touchend”, startGLoc, false);

On event completion, result is updated:

Example: GLocDiv = document.querySelector(“#GLoc”);
Code location is on GitHUb: https://github.com/genrex/PhonegapCamera

Build can be accessed from this QR code:

Advertisements
1 Comment »