Introduction to PhoneGap

366 views

Published on

A brief introduction to Mobile Programming with PhoneGap.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
366
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Introduction to PhoneGap

  1. 1. Introduction to Mobile Programming with PhoneGap Yagiz Nizipli
  2. 2. What is PhoneGap? • PhoneGap is a JavaScript framework used to access mobile device’s core features without writing native code for each device. • It is perfectly used with JS, HTML and CSS. • It helps developer to use the same code written for a platform to be used with minor changes in other platform. • PhoneGap supports iOS, Android, Windows Phone, BlackBerry and WebOS.
  3. 3. Where should I start? • Visit phonegap.com • Install PG using Node Package Manager. Simply type: “sudo npm install -g phonegap” • Type “phonegap create helloWorld” to create a new project. • Type “phonegap add ios” to add iOS version of your current project, and later on type “phonegap run ios” to test it!
  4. 4. A Simple Hello World Application • Let’s write a simple “Hello World” application. • Create your project. • Edit index.html inside /www directory (if you want to do more than “Hello World”). • Type “phonegap add ios” and later type “phonegap run ios”. • Here is your “Hello World” application!
  5. 5. Take a photo using PhoneGap navigator.camera.getPicture(onSuccess, onFail, { quality: 50, destinationType: Camera.DestinationType.FILE_URI }); ! function onSuccess(imageURI) { var image = document.getElementById(‘myImage'); image.src = imageURI; } ! function onFail(message) { alert('Failed because: ' + message); }
  6. 6. Get current location var onSuccess = function(position) { alert('Latitude: ' + position.coords.latitude + 'n' + 'Longitude: ' + position.coords.longitude + 'n' + 'Altitude: ' + position.coords.altitude + 'n' + 'Accuracy: ' + position.coords.accuracy + ‘n'; }; ! function onError(error) { alert('code: ' + error.code + 'n' + 'message: ' + error.message + 'n'); } ! navigator.geolocation.getCurrentPosition(onSuccess, onError);
  7. 7. Use Accelerometer function onSuccess(acceleration) { alert('Acceleration X: ' + acceleration.x + 'n' + 'Acceleration Y: ' + acceleration.y + 'n' + 'Acceleration Z: ' + acceleration.z + ‘n’; }; ! function onError() { alert('onError!'); }; ! navigator.accelerometer.getCurrentAcceleration(onSuccess, onError);
  8. 8. What about click events? • You can easily listen to a click event on top of a button/ div/link. Let’s say we have a “div” and we want to add a click event listener, and show an alert button after that. • var clickedFunction = function() { alert(“You just clicked me!”); }; • myDivElement.addEventListener(“click", clickedFunction()); !
  9. 9. What about page transitions? • You can use CSS3 transition events, but do not forget: Never refresh the webpage to show different content. Just change the position of your current screen, and show the new one instead. • For great examples: http://www.creativebloq.com/ css3/animation-with-css3-712437 !

×