Georges Chitiga - Introduction to Phonegap - HTML5 & JS to native mobile app
-
Upload
codecampiasi -
Category
Documents
-
view
746 -
download
0
Transcript of Georges Chitiga - Introduction to Phonegap - HTML5 & JS to native mobile app
![Page 1: Georges Chitiga - Introduction to Phonegap - HTML5 & JS to native mobile app](https://reader036.fdocuments.in/reader036/viewer/2022082221/554d25d0b4c905ab268b4c1f/html5/thumbnails/1.jpg)
{
Native mobile apps with HTML, CSS & JavaScript
Georges Chitiga – CEO, CTO at VoDoo Solutions http://vodoosolutions.com
![Page 2: Georges Chitiga - Introduction to Phonegap - HTML5 & JS to native mobile app](https://reader036.fdocuments.in/reader036/viewer/2022082221/554d25d0b4c905ab268b4c1f/html5/thumbnails/2.jpg)
Build your app with:
Actually, almost everything that works with:
![Page 3: Georges Chitiga - Introduction to Phonegap - HTML5 & JS to native mobile app](https://reader036.fdocuments.in/reader036/viewer/2022082221/554d25d0b4c905ab268b4c1f/html5/thumbnails/3.jpg)
What is PhoneGAP ?
![Page 4: Georges Chitiga - Introduction to Phonegap - HTML5 & JS to native mobile app](https://reader036.fdocuments.in/reader036/viewer/2022082221/554d25d0b4c905ab268b4c1f/html5/thumbnails/4.jpg)
What is PhoneGAP ?
One code, deploy to all
JavaScript is cooler everyday
Better then web apps - iPhone 3GS+ - Android - Blackberry 5+ - WebOS - Windows Phone 7 - W8 Coming Soon - Symbian - Bada
![Page 5: Georges Chitiga - Introduction to Phonegap - HTML5 & JS to native mobile app](https://reader036.fdocuments.in/reader036/viewer/2022082221/554d25d0b4c905ab268b4c1f/html5/thumbnails/5.jpg)
What is PhoneGAP ?
One code, deploy to all
JavaScript is cooler everyday
Every day new frameworks, new cool techniques and new technologies rise.
Better then web apps - iPhone 3GS+ - Android - Blackberry 5+ - WebOS - Windows Phone 7 - W8 Coming Soon - Symbian - Bada
![Page 6: Georges Chitiga - Introduction to Phonegap - HTML5 & JS to native mobile app](https://reader036.fdocuments.in/reader036/viewer/2022082221/554d25d0b4c905ab268b4c1f/html5/thumbnails/6.jpg)
What is PhoneGAP ?
One code, deploy to all
JavaScript is cooler everyday
Every day new frameworks, new cool techniques and new technologies rise.
Better then web apps - iPhone 3GS+ - Android - Blackberry 5+ - WebOS - Windows Phone 7 - W8 Coming Soon - Symbian - Bada
PhoneGAP allows you to access the device SDK API
![Page 7: Georges Chitiga - Introduction to Phonegap - HTML5 & JS to native mobile app](https://reader036.fdocuments.in/reader036/viewer/2022082221/554d25d0b4c905ab268b4c1f/html5/thumbnails/7.jpg)
Code Upload Build Run
Did you understand ?
![Page 8: Georges Chitiga - Introduction to Phonegap - HTML5 & JS to native mobile app](https://reader036.fdocuments.in/reader036/viewer/2022082221/554d25d0b4c905ab268b4c1f/html5/thumbnails/8.jpg)
PhoneGAP API
![Page 9: Georges Chitiga - Introduction to Phonegap - HTML5 & JS to native mobile app](https://reader036.fdocuments.in/reader036/viewer/2022082221/554d25d0b4c905ab268b4c1f/html5/thumbnails/9.jpg)
PhoneGAP API
<!DOCTYPE html> <html> <head> <title>Application Title</title> <script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
![Page 10: Georges Chitiga - Introduction to Phonegap - HTML5 & JS to native mobile app](https://reader036.fdocuments.in/reader036/viewer/2022082221/554d25d0b4c905ab268b4c1f/html5/thumbnails/10.jpg)
PhoneGAP API
<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; }
![Page 11: Georges Chitiga - Introduction to Phonegap - HTML5 & JS to native mobile app](https://reader036.fdocuments.in/reader036/viewer/2022082221/554d25d0b4c905ab268b4c1f/html5/thumbnails/11.jpg)
PhoneGAP API
function capturePhoto() {
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50 }); }
//HTML
<button onclick="capturePhoto();">Capture Photo</button>
![Page 12: Georges Chitiga - Introduction to Phonegap - HTML5 & JS to native mobile app](https://reader036.fdocuments.in/reader036/viewer/2022082221/554d25d0b4c905ab268b4c1f/html5/thumbnails/12.jpg)
PhoneGAP API
function capturePhotoEdit() { navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true }); }
![Page 13: Georges Chitiga - Introduction to Phonegap - HTML5 & JS to native mobile app](https://reader036.fdocuments.in/reader036/viewer/2022082221/554d25d0b4c905ab268b4c1f/html5/thumbnails/13.jpg)
PhoneGAP API
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="" />
![Page 14: Georges Chitiga - Introduction to Phonegap - HTML5 & JS to native mobile app](https://reader036.fdocuments.in/reader036/viewer/2022082221/554d25d0b4c905ab268b4c1f/html5/thumbnails/14.jpg)
PhoneGAP API
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
![Page 15: Georges Chitiga - Introduction to Phonegap - HTML5 & JS to native mobile app](https://reader036.fdocuments.in/reader036/viewer/2022082221/554d25d0b4c905ab268b4c1f/html5/thumbnails/15.jpg)
PhoneGAP API
http://docs.phonegap.com/en/2.2.0/
![Page 16: Georges Chitiga - Introduction to Phonegap - HTML5 & JS to native mobile app](https://reader036.fdocuments.in/reader036/viewer/2022082221/554d25d0b4c905ab268b4c1f/html5/thumbnails/16.jpg)
DEMO TIME
![Page 17: Georges Chitiga - Introduction to Phonegap - HTML5 & JS to native mobile app](https://reader036.fdocuments.in/reader036/viewer/2022082221/554d25d0b4c905ab268b4c1f/html5/thumbnails/17.jpg)
QA
![Page 18: Georges Chitiga - Introduction to Phonegap - HTML5 & JS to native mobile app](https://reader036.fdocuments.in/reader036/viewer/2022082221/554d25d0b4c905ab268b4c1f/html5/thumbnails/18.jpg)
Diamond Sponsors
Platinum Sponsors Gold Sponsors
Training Partners Media Partners Other Partners