Apresentação Phonegap

Paulo Vitor Mira Fonseca

AGENDA

• Problema

• Introdução

• Como Funciona?

• Plugins

• Demonstração

• Agradecimentos

Diversas Plataformas

• Diversas plataformas

• Linguagens de programação

• Ambiente de desenvolvimento

• Despadronização de componentes básicos

PROBLEMAS

ALTERNATIVAS

• Phonegap

• PhoMobile

• Titanium

• WidgetPad

PHONEGAP

• Desenvolvimento sistemas mobile utilizando páginas web

• Acesso a recursos nativos

• Framework base: APACHE CORDOVA

• Open Source

PROCESSO DE DEPLOY

Wrap your app withPhoneGap

Deploy to multiple platforms!

APACHE CORDOVA

• Incubado pela Apache.

• OpenSource.

• Plataforma de construção de aplicações mobile nativas utilizando HTML, CSS e JavaScript.

• Utiliza o Browser nativo do dispositivo.

APACHE CORDOVA

• HTML 5

• CSS 3

APACHE CORDOVA

APACHE CORDOVA

FEATURES

ACELERÔMETROfunction onSuccess(acceleration) {    alert('Acceleration X: ' + acceleration.x + '\n' +          'Acceleration Y: ' + acceleration.y + '\n' +          'Acceleration Z: ' + acceleration.z + '\n' +          'Timestamp: '      + acceleration.timestamp + '\n');};

function onError() {    alert('onError!');};

navigator.accelerometer.getCurrentAcceleration(onSuccess, onError);

CÂMERAnavigator.camera.getPicture(onSuccess, onFail, { quality: 50,    destinationType: Camera.DestinationType.DATA_URL });

function onSuccess(imageData) {    var image = document.getElementById('myImage');    image.src = "data:image/jpeg;base64," + imageData;}

function onFail(message) {    alert('Failed because: ' + message);}

BÚSSOLAfunction onSuccess(heading) {    alert('Heading: ' + heading.magneticHeading);};

function onError(error) {    alert('CompassError: ' + error.code);};

navigator.compass.getCurrentHeading(onSuccess, onError);

navigator.compass.clearWatch(watchID);

CONTATOSvar myContact = navigator.contacts.create({"displayName": "Test User"});

var options = new ContactFindOptions();options.filter="Bob"; var fields = ["displayName", "name"];navigator.contacts.find(fields, onSuccess, onError, options);

GEOLOCALIZAÇÃOvar onSuccess = function(position) {    alert('Latitude: '          + position.coords.latitude          + '\n' +          'Longitude: '         + position.coords.longitude         + '\n' +          'Altitude: '          + position.coords.altitude          + '\n' +          'Accuracy: '          + position.coords.accuracy          + '\n' +          'Altitude Accuracy: ' + position.coords.altitudeAccuracy  + '\n' +          'Heading: '           + position.coords.heading           + '\n' +          'Speed: '             + position.coords.speed             + '\n' +          'Timestamp: '         + position.timestamp                + '\n');};

// onError Callback receives a PositionError object//function onError(error) {    alert('code: '    + error.code    + '\n' +          'message: ' + error.message + '\n');}

navigator.geolocation.getCurrentPosition(onSuccess, onError);

NOTIFICAÇÃO

function alertDismissed() {    // do something}

navigator.notification.alert(    'You are the winner!',  // message    alertDismissed,         // callback    'Game Over',            // title    'Done'                  // buttonName);

function onConfirm(buttonIndex) {    alert('You selected button ' + buttonIndex);}

// Show a custom confirmation dialog//function showConfirm() {    navigator.notification.confirm(        'You are the winner!',  // message        onConfirm,              // callback to invoke with index of button pressed        'Game Over',            // title        'Restart,Exit'          // buttonLabels    );}

navigator.notification.beep(2); navigator.notification.vibrate(2500);

STORAGEvar db = window.openDatabase("test", "1.0", "Test DB", 1000000);

function populateDB(tx) {     tx.executeSql('DROP TABLE IF EXISTS DEMO');     tx.executeSql('CREATE TABLE IF NOT EXISTS DEMO (id unique, data)');     tx.executeSql('INSERT INTO DEMO (id, data) VALUES (1, "First row")');     tx.executeSql('INSERT INTO DEMO (id, data) VALUES (2, "Second row")');}

function errorCB(err) {    alert("Error processing SQL: "+err.code);}

function successCB() {    alert("success!");}

var db = window.openDatabase("Database", "1.0", "Cordova Demo", 200000);db.transaction(populateDB, errorCB, successCB);

STORAGE

function queryDB(tx) {    tx.executeSql('SELECT * FROM DEMO', [], querySuccess, errorCB);}

function querySuccess(tx, results) {    var len = results.rows.length;    console.log("DEMO table: " + len + " rows found.");    for (var i=0; i<len; i++){        console.log("Row = " + i + " ID = " + results.rows.item(i).id + " Data =  " + results.rows.item(i).data);    }}

function errorCB(err) {    alert("Error processing SQL: "+err.code);}

var db = window.openDatabase("Database", "1.0", "Cordova Demo", 200000);db.transaction(queryDB, errorCB);

LOCAL STORAGEwindow.localStorage.setItem("key", "value");

var value = window.localStorage.getItem("key");

window.localStorage.removeItem("key");

window.localStorage.clear();

APLICATIVOS

PLUGINS

• Acesso à funcionalidades específicas

• Componentes.

• Exemplo: Leitor de código de barras

• https://github.com/phonegap/phonegap-plugins

• Desvantagens:

• Existem plugins para plataformas específicas

• PhoneListener - Android

• MapKitPlug - IPhone

PLUGINS

PRÓS E CONTRASPHONEGAP

PRÓS

• Única aplicação para várias plataformas

• Conhecimentos em Html5, CSS3 e javascript VS Object-c, Java e C#.

• Aplicações em todos os markets (App Store, Google Play, ...).

CONTRAS

• Aplicativos nativos são mais rápidos

• Problemas de performance na construção de Jogos

• Customização dos componentes

DEMONSTRAÇÃO

DÚVIDAS ???

OBRIGADOPaulo Vitor Mira Fonseca

paulovitor.java@gmail.com0

linkedin.com/in/pfonseca0

paulo.fonseca@vpsa.com.br0

http://www.slideshare.net/paulovitormirafonseca/apresentacao-phonegap