Your SlideShare is downloading. ×
0
{   Native mobile apps with HTML, CSS & JavaScript        Georges Chitiga – CEO, CTO at VoDoo Solutions                   ...
Build your app with:Actually, almost everything that works with:
What is PhoneGAP ?
One code, deploy to all                     JavaScript is cooler everyday - iPhone 3GS+ - Android                         ...
One code, deploy to all                     JavaScript is cooler everyday - iPhone 3GS+ - Android                         ...
One code, deploy to all                     JavaScript is cooler everyday - iPhone 3GS+ - Android                         ...
Code   Upload   Build   RunDid you understand ?
PhoneGAP API
<!DOCTYPE html><html> <head>  <title>Application Title</title> <script type="text/javascript" charset="utf-8" src="phonega...
<script type="text/javascript" charset="utf-8">  var pictureSource; // picture source  var destinationType; // sets the fo...
function capturePhoto() {        navigator.camera.getPicture(onPhotoDataSuccess, onFail, {quality: 50 });  }//HTML<button ...
function capturePhotoEdit() {     navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20,allowEdit: true })...
function onPhotoDataSuccess(imageData) {   var smallImage = document.getElementById(smallImage);   smallImage.style.displa...
Navigator.camera.getPicture Camera Options quality : 75, destinationType : Camera.DestinationType.DATA_URL, sourceType : C...
http://docs.phonegap.com/en/2.2.0/ PhoneGAP API
DEMO TIME
QA
Diamond SponsorsPlatinum Sponsors                    Gold SponsorsTraining Partners   Media Partners          Other Partners
Upcoming SlideShare
Loading in...5
×

Georges Chitiga - Introduction to Phonegap - HTML5 & JS to native mobile app

732

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
732
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Georges Chitiga - Introduction to Phonegap - HTML5 & JS to native mobile app"

  1. 1. { Native mobile apps with HTML, CSS & JavaScript Georges Chitiga – CEO, CTO at VoDoo Solutions http://vodoosolutions.com
  2. 2. Build your app with:Actually, almost everything that works with:
  3. 3. What is PhoneGAP ?
  4. 4. One code, deploy to all JavaScript is cooler everyday - iPhone 3GS+ - Android Better then web apps - Blackberry 5+ - WebOS - Windows Phone 7 - W8 Coming Soon - Symbian - Bada What is PhoneGAP ?
  5. 5. One code, deploy to all JavaScript is cooler everyday - iPhone 3GS+ - Android Better then web apps Every day new - Blackberry 5+ frameworks, new - WebOS - Windows Phone 7 cool techniques and - W8 Coming Soon new technologies - Symbian rise. - Bada What is PhoneGAP ?
  6. 6. One code, deploy to all JavaScript is cooler everyday - iPhone 3GS+ - Android Better then web apps Every day new - Blackberry 5+ frameworks, new - WebOS - Windows Phone 7 cool techniques and PhoneGAP allows you to access the device - W8 Coming Soon new technologies SDK API - Symbian rise. - Bada What is PhoneGAP ?
  7. 7. Code Upload Build RunDid you understand ?
  8. 8. PhoneGAP API
  9. 9. <!DOCTYPE html><html> <head> <title>Application Title</title> <script type="text/javascript" charset="utf-8" src="phonegap.js"></script> PhoneGAP API
  10. 10. <script type="text/javascript" charset="utf-8"> var pictureSource; // picture source var destinationType; // sets the format of returned value // Wait for PhoneGap to connect with the device document.addEventListener(“deviceReady",onDeviceReady,false); // PhoneGap is ready to be used function onDeviceReady() { pictureSource=navigator.camera.PictureSourceType; destinationType=navigator.camera.DestinationType; } PhoneGAP API
  11. 11. function capturePhoto() { navigator.camera.getPicture(onPhotoDataSuccess, onFail, {quality: 50 }); }//HTML<button onclick="capturePhoto();">Capture Photo</button> PhoneGAP API
  12. 12. function capturePhotoEdit() { navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20,allowEdit: true }); } PhoneGAP API
  13. 13. function onPhotoDataSuccess(imageData) { var smallImage = document.getElementById(smallImage); smallImage.style.display = block; smallImage.src = "data:image/jpeg;base64," + imageData; }//HTML<img style="display:none;width:60px;height:60px;" id="smallImage"src="" /> PhoneGAP API
  14. 14. Navigator.camera.getPicture Camera Options quality : 75, destinationType : Camera.DestinationType.DATA_URL, sourceType : Camera.PictureSourceType.CAMERA, allowEdit : true, encodingType: Camera.EncodingType.JPEG, targetWidth: 100, targetHeight: 100 PhoneGAP API
  15. 15. http://docs.phonegap.com/en/2.2.0/ PhoneGAP API
  16. 16. DEMO TIME
  17. 17. QA
  18. 18. Diamond SponsorsPlatinum Sponsors Gold SponsorsTraining Partners Media Partners Other Partners
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×