Paulo Vitor Mira Fonseca
AGENDA•   Problema•   Introdução•   Como Funciona?•   Plugins•   Demonstração•   Agradecimentos
Diversas Plataformas
PROBLEMAS•   Diversas plataformas•   Linguagens de programação•   Ambiente de desenvolvimento•   Despadronização de compon...
ALTERNATIVAS•   Phonegap•   PhoMobile•   Titanium•   WidgetPad
PHONEGAP•   Desenvolvimento sistemas mobile utilizando páginas web•   Acesso a recursos nativos•   Framework base: APACHE ...
Wrap your app with   Deploy to multiple   PhoneGap             platforms! PROCESSO DE DEPLOY
APACHE CORDOVA•   Incubado pela Apache.•   OpenSource.•   Plataforma de construção de aplicações mobile nativas utilizando...
APACHE CORDOVA
APACHE CORDOVA•   HTML 5•   CSS 3
APACHE CORDOVA
FEATURES
ACELERÔMETROfunction onSuccess(acceleration) {    alert(Acceleration X:  + acceleration.x + n +          Acceleration Y:  ...
CÂMERAnavigator.camera.getPicture(onSuccess, onFail, { quality: 50,    destinationType: Camera.DestinationType.DATA_URL })...
BÚSSOLAfunction onSuccess(heading) {    alert(Heading:  + heading.magneticHeading);};function onError(error) {    alert(Co...
CONTATOSvar myContact = navigator.contacts.create({"displayName": "Test User"});var options = new ContactFindOptions();opt...
GEOLOCALIZAÇÃOvar   onSuccess = function(position) {      alert(Latitude:           + position.coords.latitude          + ...
NOTIFICAÇÃO                                               function onConfirm(buttonIndex) {                               ...
STORAGEvar db = window.openDatabase("test", "1.0", "Test DB", 1000000);   function populateDB(tx) {        tx.executeSql(D...
STORAGEfunction queryDB(tx) {    tx.executeSql(SELECT * FROM DEMO, [], querySuccess, errorCB);}function querySuccess(tx, r...
LOCAL STORAGE window.localStorage.setItem("key", "value");var value = window.localStorage.getItem("key");    window.localS...
APLICATIVOS
PLUGINS•   Acesso à funcionalidades específicas•   Componentes.    •   Exemplo: Leitor de código de barras•   https://githu...
PLUGINS•   Desvantagens:    •   Existem plugins para plataformas específicas        •   PhoneListener - Android        •   ...
PRÓS E CONTRAS     PHONEGAP
PRÓS•   Única aplicação para várias plataformas•   Conhecimentos em Html5, CSS3 e javascript VS Object-c, Java e C#.•   Ap...
CONTRAS•   Aplicativos nativos são mais rápidos•   Problemas de performance na construção de Jogos•   Customização dos com...
DEMONSTRAÇÃO
DÚVIDAS ???
paulo.fonseca@vpsa.com.br0                                                             linkedin.com/in/pfonseca0          ...
Apresentação Phonegap
Apresentação Phonegap
Upcoming SlideShare
Loading in …5
×

Apresentação Phonegap

1,953 views

Published on

Introdução ao PhoneGap.

Published in: Technology, Business
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,953
On SlideShare
0
From Embeds
0
Number of Embeds
79
Actions
Shares
0
Downloads
35
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Apresentação Phonegap

  1. 1. Paulo Vitor Mira Fonseca
  2. 2. AGENDA• Problema• Introdução• Como Funciona?• Plugins• Demonstração• Agradecimentos
  3. 3. Diversas Plataformas
  4. 4. PROBLEMAS• Diversas plataformas• Linguagens de programação• Ambiente de desenvolvimento• Despadronização de componentes básicos
  5. 5. ALTERNATIVAS• Phonegap• PhoMobile• Titanium• WidgetPad
  6. 6. PHONEGAP• Desenvolvimento sistemas mobile utilizando páginas web• Acesso a recursos nativos• Framework base: APACHE CORDOVA• Open Source
  7. 7. Wrap your app with Deploy to multiple PhoneGap platforms! PROCESSO DE DEPLOY
  8. 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. 9. APACHE CORDOVA
  10. 10. APACHE CORDOVA• HTML 5• CSS 3
  11. 11. APACHE CORDOVA
  12. 12. FEATURES
  13. 13. 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);
  14. 14. 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);}
  15. 15. BÚSSOLAfunction onSuccess(heading) {    alert(Heading: + heading.magneticHeading);};function onError(error) {    alert(CompassError: + error.code);};navigator.compass.getCurrentHeading(onSuccess, onError); navigator.compass.clearWatch(watchID);
  16. 16. 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);
  17. 17. 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);
  18. 18. 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);
  19. 19. 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);
  20. 20. STORAGEfunction 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);
  21. 21. LOCAL STORAGE window.localStorage.setItem("key", "value");var value = window.localStorage.getItem("key"); window.localStorage.removeItem("key"); window.localStorage.clear();
  22. 22. APLICATIVOS
  23. 23. PLUGINS• Acesso à funcionalidades específicas• Componentes. • Exemplo: Leitor de código de barras• https://github.com/phonegap/phonegap-plugins
  24. 24. PLUGINS• Desvantagens: • Existem plugins para plataformas específicas • PhoneListener - Android • MapKitPlug - IPhone
  25. 25. PRÓS E CONTRAS PHONEGAP
  26. 26. 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, ...).
  27. 27. CONTRAS• Aplicativos nativos são mais rápidos• Problemas de performance na construção de Jogos• Customização dos componentes
  28. 28. DEMONSTRAÇÃO
  29. 29. DÚVIDAS ???
  30. 30. paulo.fonseca@vpsa.com.br0 linkedin.com/in/pfonseca0 paulovitor.java@gmail.com0 http://www.slideshare.net/paulovitormirafonseca/apresentacao-phonegap OBRIGADOPaulo Vitor Mira Fonseca

×