Palestra apresentada em 2 de março no evento BeagaJS. Palestra Desenvolvimento Mobile Multiplataforma e Open Source com PhoneGap e Sencha Touch

1. Dev Mobile
Multiplataforma e
Open Source com
Sencha Touch e PhoneGap
Loiane Groner

2. Loiane Groner
Java JUG Leader
Sencha Community Leader
7+ XP Java
4+ XP Sencha
Software Developer
Manager @ Citibank
http://loiane.com
@loiane

3. Autora Técnica
Internacional

4. 1
Sencha
Touch

5. Primeiro framework Javascript para
desenvolvimento de apps mobile ricas
usando padrões web

6. Tem Acesso
Nativo?

7. Acesso Nativo
App in Purchases
Câmera
Contatos (read only)*
Connection (online/offline)
Device Info (nome, plataforma, uuid)
GeoLocation
Notifications (vibrar)
Sencha Packager*
Orientation
PhoneGap
Push Notifications
Emulator

8. Sencha Touch não tem
Acelerômetro
Compass
File

9. 2
Phone Gap

11. 3
Sencha Touch
+ PhoneGap

12. UIWebView
WebView
HTML 5
CSS 3 Stores
JS
APIs JS

13. Workflow de
Desenvolvimento

14. Mock Up Store
Dispositivo
Desenvolvimento
Testes Simulação

15. M
O
C
K
U
P

16. Resultado

17. Mãos à Obra!

18. sencha generate app
Contatos
../beagajs/Contatos

20. Testes Locais

22. Testes
Automatizados

23. http://bryntum.com

24. Hora de Integrar!

26. app.json
"js": [
{
"path": "touch/sencha-touch.js"
},
{
"path": "cordova-2.5.0.js"
},
{
"path": "app.js",
"bundle": true,
"update": "delta"
}
],

27. navigator.contacts.find( MyContacts.proxy.ContactsProxy
! fields,
! function(deviceContacts) {
! //loop over deviceContacts and create Contact model instances
! var contacts = [];
! for (var i = 0; i < deviceContacts.length; i++) {
! var deviceContact = deviceContacts[ i ];
! ! ! ! ! console.log(deviceContact);
! ! ! ! ! var phone = deviceContact.phoneNumbers[0];
! ! ! ! ! if (phone){
! ! ! ! ! ! phone = phone.value;
! ! ! ! ! } else{
! ! ! ! ! ! phone = "";
! ! ! ! ! }
! ! ! ! ! console.log("phone " + phone);
! var contact = Ext.create('MyContacts.model.Contact',{
! id: deviceContact.id,
! givenName: deviceContact.name.givenName,
! familyName: deviceContact.name.familyName,
! phoneNumber: phone,
! birthday: new Date(deviceContact.birthday),
! notes: deviceContact.note
! });
! contact.deviceContact = deviceContact;
! contacts.push(contact);
! }
! //return model instances in a result set
operation.setResultSet(
! Ext.create('Ext.data.ResultSet', {
! records: contacts,
! total : contacts.length
})
);
! //announce success
! operation.setSuccessful();
! operation.setCompleted();
console.log('operation complete');
! //finish with callback
! if (typeof callback == "function") {
! callback.call(scope || thisProxy, operation);
! }
! },

28. ./create
ContatosIOS
com.loiane.beagajs
../../../ContatosIOS

30. Emuladores

31. R
I
P
P
L
E

32. Ferramentas de
Debug

33. iWebInspector

34. Weinre

35. Build

36. XCode
Eclipse
build.phonegap.com

37. Melhores
Práticas

39. sencha app build

40. 4
Storage

42. REST

43. JSON-P

44. CORS
http://enable-cors.org/

45. Local Storage
Web SQL (SQLite)

46. 5
Multiplataforma

49. "css": [
{
"path": "../../resources/css/base.css",
"update": "delta"
},
{
"path": "resources/css/sencha-touch.css",
"platform": ['chrome', 'safari', 'ios'],
"update": "delta"
},
{
"path": "resources/css/android.css",
"platform": ['android'],
"update": "delta"
},
{
"path": "resources/css/bb.css",
"platform": ['blackberry'],
"update": "delta"
},
{
"path": "resources/css/wp.css",
"platform": ['ie10'],
"update": "delta"
}
]

50. 6
Nativo x Web

52. Acesso
Device
Nativo Sim
Web Parcial

53. Acesso
Velocidade
Device
Nativo Sim Sim
Web Parcial ?

54. Acesso Tempo
Velocidade
Device Desenvolvimento
Nativo Sim Sim Caro
Web Parcial ? Sussa

55. Acesso Tempo App
Velocidade
Device Desenvolvimento
Store
Nativo Sim Sim Caro Sim
Web Parcial ? Sussa Não

56. Acesso Tempo App Cross
Velocidade
Device Desenvolvimento
Store Platform
Nativo Sim Sim Caro Sim Não
Web Parcial ? Sussa Não Sim

57. Acesso Tempo App Cross
Velocidade
Device Desenvolvimento
Store Platform
Nativo Sim Sim Caro Sim Não
Web Parcial ? Sussa Não Sim
Híbrido Sim ? Sussa* Sim Sim
? Já vamos discutir
Sussa* Já vamos discutir

58. Acesso Tempo App Cross
Velocidade
Device Desenvolvimento
Store Platform
Nativo Sim Sim Caro Sim Não
Web Parcial ? Sussa Não Sim
Híbrido Sim ? Sussa* Sim Sim

59. App
Híbrida?

61. Desenvolva Desenvolva

62. Desenvolva Desenvolva
Teste Teste

63. Desenvolva Desenvolva
Teste Teste
Build Build

64. {
Desenvolva Desenvolva Desenvolva
Híbrido
Teste Teste Teste
Build Build Build Build

65. ?

66. Our biggest mistake
was betting too much
on HTML5

67. In your face!

68. “So, when Mark Zuckerberg said
HTML5 wasn't ready, we took a little
offense to the comment.”

71. Sussa*

72. Plugins

73. SQLite nativo
BarCode Scanner
etc

74. 7
Produção

75. Issues
App Store

76. 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 Web
Agregador de
links
Pinch,
Zoom
#fail
App Intuitiva

78. Exemplos
de Apps

79. Obrigada!
http://loiane.com
@loiane