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

  • 682 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
682
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
4
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. { Native mobile apps with HTML, CSS & JavaScript Georges Chitiga – CEO, CTO at VoDoo Solutions http://vodoosolutions.com
  • 2. Build your app with:Actually, almost everything that works with:
  • 3. What is PhoneGAP ?
  • 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. 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. 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. Code Upload Build RunDid you understand ?
  • 8. PhoneGAP API
  • 9. <!DOCTYPE html><html> <head> <title>Application Title</title> <script type="text/javascript" charset="utf-8" src="phonegap.js"></script> PhoneGAP API
  • 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. function capturePhoto() { navigator.camera.getPicture(onPhotoDataSuccess, onFail, {quality: 50 }); }//HTML<button onclick="capturePhoto();">Capture Photo</button> PhoneGAP API
  • 12. function capturePhotoEdit() { navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20,allowEdit: true }); } PhoneGAP API
  • 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. 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. http://docs.phonegap.com/en/2.2.0/ PhoneGAP API
  • 16. DEMO TIME
  • 17. QA
  • 18. Diamond SponsorsPlatinum Sponsors Gold SponsorsTraining Partners Media Partners Other Partners