MobileConf 2013: PhoneGap

4,198 views
4,174 views

Published on

Slides da palestra sobre PhoneGap apresentada na MobileConf 2013 em Sao Paulo - 5/Abril/2013

Published in: Technology
1 Comment
24 Likes
Statistics
Notes
  • Show... Pena nao ter acesso ao audio. Mas vendo os slides já deu uma noção que a palestra foi nota 10.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
4,198
On SlideShare
0
From Embeds
0
Number of Embeds
731
Actions
Shares
0
Downloads
0
Comments
1
Likes
24
Embeds 0
No embeds

No notes for slide

MobileConf 2013: PhoneGap

  1. 1. PhoneGap:Desenvolvimento Mobile Multiplataforma Loiane Groner
  2. 2. Loiane GronerJava JUG LeaderSencha Community Leader 7+ XP TI Software ProjectManager @ Citibank http://loiane.com @loiane
  3. 3. Autora TécnicaInternacional
  4. 4. 1 Pq Mobile? PqMultiplataforma?
  5. 5. http://wearesocial.sg/blog/2013/04/social-brands-go-mobile-or-stand-still/
  6. 6. Android Java BackBerry Java iOS Objective-C Palm OS C, C++, Pascal Symbian C++Windows Phone C#
  7. 7. 2 HTML 5
  8. 8. 3 Web x Nativo
  9. 9. Acesso DeviceNativo SimWeb Parcial
  10. 10. Acesso Velocidade DeviceNativo Sim SimWeb Parcial ?
  11. 11. Acesso Tempo Velocidade Device DesenvolvimentoNativo Sim Sim CaroWeb Parcial ? Sussa
  12. 12. Acesso Tempo App Velocidade Device Desenvolvimento StoreNativo Sim Sim Caro SimWeb Parcial ? Sussa Não
  13. 13. Acesso Tempo App Cross Velocidade Device Desenvolvimento Store PlatformNativo Sim Sim Caro Sim NãoWeb Parcial ? Sussa Não Sim
  14. 14. AppHíbrida?
  15. 15. 4 Web x Nativo x Híbrido
  16. 16. Acesso Tempo App Cross Velocidade Device Desenvolvimento Store PlatformNativo Sim Sim Caro Sim Não Web Parcial ? Sussa Não SimHíbrido Sim ? Sussa* Sim Sim
  17. 17. Acesso Tempo App Cross Velocidade Device Desenvolvimento Store PlatformNativo Sim Sim Caro Sim Não Web Parcial ? Sussa Não SimHíbrido Sim ? Sussa* Sim Sim ? Já vamos discutir Sussa* Já vamos discutir
  18. 18. ?
  19. 19. Our biggest mistakewas betting too much on HTML5
  20. 20. In your face!
  21. 21. “So, when Mark Zuckerberg saidHTML5 wasnt ready, we took a littleoffense to the comment.”
  22. 22. 5 PhoneGap
  23. 23. •2008: início•2008:suporte a iPhone, Android e Blackberry 4•2009: suporte a Symbian e webOS•2011: suporte a Windows Phone 7•2011: Projeto sob Apache - novo nome
  24. 24. A partir do Phonegap 1.5.0
  25. 25. Apache Cordova•Cordova é o projeto Open Source•PhoneGap é a implementação•http://incubator.apache.org/cordova/
  26. 26. O que é Phonegap / Cordova?•Chromeless webkitbrowser•Plataforma mobileHTML 5 (wrapper)•Acesso Nativo
  27. 27. Phonegap é WORA?Write Once, Run Anywhere?
  28. 28. Write OnceDEBUG Anywhere
  29. 29. Desenvolva Desenvolva
  30. 30. Desenvolva Desenvolva Teste Teste
  31. 31. Desenvolva Desenvolva Teste Teste Build Build
  32. 32. {Desenvolva Desenvolva Desenvolva Híbrido Teste Teste Teste Build Build Build Build
  33. 33. 6Trabalhando com Phonegap
  34. 34. UIWebView WebViewHTML 5 CSS 3 Stores JS APIs JS
  35. 35. 7Gerando uma App
  36. 36. ./create ../../../AppNamecom.loiane.mobileConf AppName
  37. 37. 8 API
  38. 38. Accelerationfunction 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);
  39. 39. Capturar Fotofunction capturePhoto() { navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50, destinationType: destinationType.DATA_URL }); }
  40. 40. Capturar Foto com Ediçãofunction capturePhotoEdit() { navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20,allowEdit: true, destinationType: destinationType.DATA_URL }); }
  41. 41. Busca Foto do Dispositivofunction getPhoto(source) { navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50, destinationType: destinationType.FILE_URI, sourceType: source }); }<button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">Biblioteca</button><br><button onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">Album de Fotos</button>
  42. 42. Compass/Bússulafunction onSuccess(heading) { alert(Heading: + heading.magneticHeading);};function onError(error) { alert(CompassError: + error.code);};navigator.compass.getCurrentHeading(onSuccess, onError);
  43. 43. Conexãofunction checkConnection() { var networkState = navigator.connection.type; var states = {}; states[Connection.UNKNOWN] = Unknown connection; states[Connection.ETHERNET] = Ethernet connection; states[Connection.WIFI] = WiFi connection; states[Connection.CELL_2G] = Cell 2G connection; states[Connection.CELL_3G] = Cell 3G connection; states[Connection.CELL_4G] = Cell 4G connection; states[Connection.NONE] = No network connection; alert(Connection type: + states[networkState]);}checkConnection();
  44. 44. Propriedades do Dispositivofunction onDeviceReady() { var element = document.getElementById(deviceProperties); element.innerHTML = Device Name: + device.name + <br /> + Device Cordova: + device.cordova + <br /> + Device Platform: + device.platform + <br /> + Device UUID: + device.uuid + <br /> + Device Model: + device.model + <br /> + Device Version: + device.version + <br />; }
  45. 45. In App Browservar ref = window.open(http://loiane.com, _blank, location=yes);ref.addEventListener(loadstart, function() { alert(start: + event.url); });ref.addEventListener(loadstop, function() { alert(stop: + event.url); });ref.addEventListener(exit, function() { alert(event.type); });
  46. 46. Notification - Alertnavigator.notification.alert( Alerta!, // message alertDismissed, // callback Titulo, // title Botão // buttonName);
  47. 47. Notification - Confirmfunction showConfirm() { navigator.notification.confirm( Confirmar?, // message onConfirm, // callback to invoke with index of button pressed Titulo, // title OK,Cancel // buttonLabels );}
  48. 48. Notification - Beep// Beepa 3 vezesfunction playBeep() { navigator.notification.beep(3);} Não funciona no iOS
  49. 49. Notification - Vibrar// Vibra por 2 segundosfunction vibrate() { navigator.notification.vibrate(2000);}
  50. 50. Demo
  51. 51. 9 UIFrameworks
  52. 52. jQT
  53. 53. Contatosfunction onDeviceReady() { // acha todos os contatos com Loiane em qualquer campo nome var options = new ContactFindOptions(); options.filter="Loiane"; var fields = ["displayName", "name"]; navigator.contacts.find(fields, onSuccess, onError, options); } // onSuccess: loga o contato que foi achado function onSuccess(contacts) { for (var i=0; i<contacts.length; i++) { console.log("Display Name = " + contacts[i].displayName); } } // onError: Failed to get the contacts function onError(contactError) { alert(onError!); }
  54. 54. Touch
  55. 55. Demo
  56. 56. Workflow deDesenvolvimento
  57. 57. Mock Up Store DispositivoDesenvolvimento Testes Simulação
  58. 58. MOCKUP
  59. 59. Resultado
  60. 60. Emuladores
  61. 61. RIPPLE
  62. 62. Ferramentas de Debug
  63. 63. iWebInspector
  64. 64. Weinre
  65. 65. 10 Produção
  66. 66. XCode Eclipsebuild.phonegap.com
  67. 67. 11 Plugins
  68. 68. Sussa*
  69. 69. SQLite nativo BarCode Scanner etchttps://github.com/phonegap/phonegap-plugins https://github.com/brodyspark/PhoneGap- SQLitePlugin-iOS
  70. 70. echo.jswindow.echo = function(str, callback) { cordova.exec(callback, function(err) { callback(Nothing to echo.); }, "Echo", "echo", [str]);};
  71. 71. config.xml<plugin name="Echo" value="org.apache.cordova.plugin.Echo" />
  72. 72. iOS
  73. 73. Diretório Plugins -Novo Arquivo Objective-C == Echo /********* Echo.h Cordova Plugin Header *******/ #import <Cordova/CDV.h> @interface Echo : CDVPlugin - (void)echo:(CDVInvokedUrlCommand*)command; @end
  74. 74. /********* Echo.m Cordova Plugin Implementation *******/#import "Echo.h"#import <Cordova/CDV.h>@implementation Echo- (void)echo:(CDVInvokedUrlCommand*)command{ CDVPluginResult* pluginResult = nil; NSString* echo = [command.arguments objectAtIndex:0]; if (echo != nil && [echo length] > 0) { pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsString:echo]; } else { pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_ERROR]; } [self.commandDelegate sendPluginResult:pluginResult callbackId:command.callbackId];}@end
  75. 75. Android
  76. 76. src/org/apache/cordova/plugin/Echo.javapackage org.apache.cordova.plugin;import org.apache.cordova.api.CordovaPlugin;import org.apache.cordova.api.PluginResult;import org.json.JSONArray;import org.json.JSONException;import org.json.JSONObject;/** * This class echoes a string called from JavaScript. */public class Echo extends CordovaPlugin { @Override public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException { if (action.equals("echo")) { String message = args.getString(0); this.echo(message, callbackContext); return true; } return false; } private void echo(String message, CallbackContext callbackContext) { if (message != null && message.length() > 0) { callbackContext.success(message); } else { callbackContext.error("Expected one non-empty string argument."); } }}
  77. 77. Como Usarwindow.echo("echome", function(echoValue) { alert(echoValue == "echome"); // mostra alerta true.});
  78. 78. MelhoresPráticas
  79. 79. IssuesApp Store
  80. 80. Parece uma diferente App Aprenda a web desenvolver Parece para mobile, app iOS não web App Buttons, única Hyperlink iOS Human Interface Design Guidelines Eventos Touch, não WebAgregador de links Pinch, Zoom #fail App Intuitiva
  81. 81. Exemplos de Apps http://phonegap.com/app/
  82. 82. 8 Quando não usar?
  83. 83. Demo
  84. 84. https://github.com/loiane/ mobileConf2013http://slideshare.net/loianeg
  85. 85. http://loiane.com @loiane Obrig ada!

×