georges chitiga - introduction to phonegap - html5 & js to native mobile app

18
{ Native mobile apps with HTML, CSS & JavaScript Georges Chitiga – CEO, CTO at VoDoo Solutions http://vodoosolutions.com

Upload: codecampiasi

Post on 09-May-2015

743 views

Category:

Documents


0 download

TRANSCRIPT

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

{

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

Build your app with:

Actually, almost everything that works with:

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

What is PhoneGAP ?

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

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

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

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

Code Upload Build Run

Did you understand ?

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

PhoneGAP API

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

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

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

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

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

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

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

PhoneGAP API

http://docs.phonegap.com/en/2.2.0/

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

DEMO TIME

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

QA

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

Diamond Sponsors

Platinum Sponsors Gold Sponsors

Training Partners Media Partners Other Partners