This document discusses cross-platform mobile app development using PhoneGap. It introduces common problems with developing for multiple platforms, and explores PhoneGap as an alternative that allows building apps using HTML, CSS and JavaScript that can be deployed across platforms like iOS, Android and more. Key PhoneGap features that provide access to device capabilities are demonstrated.

1. Paulo Vitor Mira Fonseca

2. AGENDA
• Problema
• Introdução
• Como Funciona?
• Plugins
• Demonstração
• Agradecimentos

3. Diversas Plataformas

4. PROBLEMAS
• Diversas plataformas
• Linguagens de programação
• Ambiente de desenvolvimento
• Despadronização de componentes básicos

5. ALTERNATIVAS
• Phonegap
• PhoMobile
• Titanium
• WidgetPad

6. PHONEGAP
• Desenvolvimento sistemas mobile utilizando páginas web
• Acesso a recursos nativos
• Framework base: APACHE CORDOVA
• Open Source

7. Wrap your app with Deploy to multiple
PhoneGap platforms!
PROCESSO DE DEPLOY

8. 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.

9. APACHE CORDOVA

10. APACHE CORDOVA
• HTML 5
• CSS 3

11. APACHE CORDOVA

14. FEATURES

15. ACELERÔMETRO
function 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);

16. CÂMERA
navigator.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);
}

17. BÚSSOLA
function onSuccess(heading) {
alert('Heading: ' + heading.magneticHeading);
};
function onError(error) {
alert('CompassError: ' + error.code);
};
navigator.compass.getCurrentHeading(onSuccess, onError);
navigator.compass.clearWatch(watchID);

18. CONTATOS
var 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);

19. GEOLOCALIZAÇÃO
var 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);

20. NOTIFICAÇÃO
function onConfirm(buttonIndex) {
alert('You selected button ' + buttonIndex);
function alertDismissed() { }
// do something
} // Show a custom confirmation dialog
//
navigator.notification.alert( function showConfirm() {
'You are the winner!', // message navigator.notification.confirm(
alertDismissed, // callback 'You are the winner!', // message
'Game Over', // title onConfirm, // callback to invoke with index of button pressed
'Done' // buttonName 'Game Over', // title
); 'Restart,Exit' // buttonLabels
);
}
navigator.notification.beep(2); navigator.notification.vibrate(2500);

21. STORAGE
var 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);

22. 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);

23. LOCAL STORAGE
window.localStorage.setItem("key", "value");
var value = window.localStorage.getItem("key");
window.localStorage.removeItem("key");
window.localStorage.clear();

24. APLICATIVOS

25. PLUGINS
• Acesso à funcionalidades específicas
• Componentes.
• Exemplo: Leitor de código de barras
• https://github.com/phonegap/phonegap-plugins

26. PLUGINS
• Desvantagens:
• Existem plugins para plataformas específicas
• PhoneListener - Android
• MapKitPlug - IPhone

27. PRÓS E CONTRAS
PHONEGAP

28. 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, ...).

29. CONTRAS
• Aplicativos nativos são mais rápidos
• Problemas de performance na construção de Jogos
• Customização dos componentes

30. DEMONSTRAÇÃO

31. DÚVIDAS ???

32. paulo.fonseca@vpsa.com.br0
linkedin.com/in/pfonseca0
paulovitor.java@gmail.com0
http://www.slideshare.net/paulovitormirafonseca/apresentacao-phonegap
OBRIGADO
Paulo Vitor Mira Fonseca