0
Sencha Touch +
Phone Gap
Loiane Groner
Me, Myself & I
•Gerente de Desenv Projetos @Citibank
•8+ XP TI
•Java JUG Leader
•Sencha Community Leader
•http://loiane.co...
Autora Técnica
Internacional
Pq Mobile?
Pq
Multiplataforma?
0
#changeBrazil
Aplicações
WORA:
Write Once
Run Anywhere
Mobile
Android Java
BackBerry Java
iOS Objective-C
Palm OS C, C++, Pascal
Symbian C++
Windows Phone C#
Sencha
Touch
1
Primeiro framework Javascript para
desenvolvimento de apps mobile ricas
usando padrões web - HTML 5
O que tem no Sencha Touch?
Componentes e Layouts
Themas e Ícones
Orientação e Animação
Eventos Touch e Scroller
Pacote de ...
Componentes
Lists
- Nested, Grouped, Sortable
Carousel
Picker
Overlay
Slider
Forms & fields Toolbars & buttons HTML5
- Audi...
Ext.define('Contact', {
extend: 'Ext.data.Model',
config: {
fields: ['firstName', 'lastName']
}
});
var store = Ext.create('Ex...
Forms
Ext.create('Ext.form.Panel', {
fullscreen: true,
items: [
{
xtype: 'textfield',
name: 'name',
label: 'Name'
},
{
xtype: 'em...
Scrolling
Scrolling
Momentum/bounce physics
ardware accelerated
hroughout all components:
Lists
Carousel
Pickers
Eventos Touch
Baseado em Eventos Nativos
Abstraído para Performance
Eventos Adicionais:
- Tap
- Double tap
- Tap & hold - ...
Data Package
Models, Stores, e Proxies
- Associations
-Validation
- Local & server storage
Consumir web services
- JSON/P
...
REST
JSON-P
Local Storage
Web SQL (SQLite)
CORS
http://enable-cors.org/
Temas
Use CSS3 & SASS
- Flexible themes
- Highly optimized
e.g.
Theming
$base-color: #ff6699
Use CSS3 & SASS
- Flexible th...
Gráficos
Touch Charts
Demo 1
Tem Acesso
Nativo?
Acesso Nativo
App in Purchases
Câmera
Contatos (read only)*
Connection (online/offline)
Device Info (nome, plataforma, uuid...
Sencha Touch não tem
Acelerômetro
Compass
File
Sencha Touch SDK
Sencha Cmd
Local WebServer
Browser (safari, Chrome)
Emuladores
Dispositivos para testes
$ cd /path/to/sencha-touch-2-sdk
$ sencha generate app MyApp /path/to/www/
Phone Gap
2
•2008: início
•2008:suporte a iPhone, Android e Blackberry 4
•2009: suporte a Symbian e webOS
•2011: suporte a Windows Pho...
A partir do Phonegap 1.5.0
Apache Cordova
•Cordova é o projeto Open Source
•PhoneGap é a implementação
•http://incubator.apache.org/cordova/
O que é Phonegap /
Cordova?
•Chromeless webkit
browser
•Plataforma mobile
HTML 5 (wrapper)
•Acesso Nativo
Phonegap é
WORA?
Write Once, Run Anywhere?
Write Once
DEBUG Anywhere
function onSuccess(acceleration) {
    alert('Acceleration X: ' + acceleration.x + 'n' +
          'Acceleration Y: ' + ac...
function capturePhoto() {
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50,
destinationType: destinat...
function capturePhotoEdit() {
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20,
allowEdit: true,
dest...
function getPhoto(source) {
navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,
destinationType: destina...
function onSuccess(heading) {
alert('Heading: ' + heading.magneticHeading);
};
function onError(error) {
alert('CompassErr...
function checkConnection() {
var networkState = navigator.connection.type;
var states = {};
states[Connection.UNKNOWN] = '...
function onDeviceReady() {
var element = document.getElementById('deviceProperties');
element.innerHTML = 'Device Name: ' ...
var ref = window.open('http://loiane.com', '_blank', 'location=yes');
ref.addEventListener('loadstart', function() { alert...
navigator.notification.alert(
'Alerta!', // message
alertDismissed, // callback
'Titulo', // title
'Botão' // buttonName
)...
function showConfirm() {
navigator.notification.confirm(
'Confirmar?', // message
onConfirm, // callback to invoke with in...
// Beepa 3 vezes
function playBeep() {
navigator.notification.beep(3);
}
Notification - Beep
Não funciona no iOS
// Vibra por 2 segundos
function vibrate() {
navigator.notification.vibrate(2000);
}
Notification - Vibrar
Demo 2
http://nodejs.org/
$ sudo npm install -g phonegap
$ phonegap create hello com.example.hello HelloWorld
$ phonegap build ios
    [phonegap] detecting iOS SDK environment...
    [phonegap] using the local environment
    [phone...
$ phonegap run android
    [phonegap] detecting Android SDK environment...
    [phonegap] using the local environment
    ...
Sencha Touch
+ PhoneGap
3
HTML 5
CSS 3
JS
UIWebView
WebView
APIs JS
Stores
Workflow de
Desenvolvimento
Mock Up
Desenvolvimento
Testes Simulação
Dispositivo
Store
M
O
C
K
U
P
Resultado
$ sencha generate app Contatos ../Contatos
Testes Locais
Testes
Automatizados
http://bryntum.com
Hora de Integrar!
app.json
"js": [
{
"path": "touch/sencha-touch.js"
},
{
"path": "cordova-2.9.0.js"
},
{
"path": "app.js",
"bundle": true,
...
navigator.contacts.find(
! fields,
! function(deviceContacts) {
! //loop over deviceContacts and create Contact model inst...
$ ./create ContatosIOS com.loiane ../../../ContatosIOS
Emuladores
R
I
P
P
L
E
Ferramentas de
Debug
iWebInspector
Weinre
Build
$ sencha app build
$ sencha app build native
$ sencha app package run packager.json
XCode
Eclipse
build.phonegap.com
http://www.loiane.com/2013/07/usando-
phonegap-build-build-automatico-para-6-
plataformas-de-uma-so-vez/
Melhores
Práticas
sencha app build
Multiplataforma
4
"css": [
{
"path": "../../resources/css/base.css",
"update": "delta"
},
{
"path": "resources/css/sencha-touch.css",
"platf...
Nativo x Web
5
Nativo
Web
Acesso
Device
Sim
Parcial
Nativo
Web
Acesso
Device
Velocidade
Sim Sim
?Parcial
Nativo
Web
Acesso
Device
Velocidade Tempo
Desenvolvimento
Sim Sim
?
Caro
Parcial Sussa
Nativo
Web
Acesso
Device
Velocidade Tempo
Desenvolvimento
App
Store
Sim Sim
?
Caro
Parcial Sussa
Sim
Não
Nativo
Web
Acesso
Device
Velocidade Tempo
Desenvolvimento
App
Store
Cross
Platform
Sim Sim
?
Caro
Parcial Sussa
Sim
Não Si...
Nativo
Web
Acesso
Device
Velocidade Tempo
Desenvolvimento
App
Store
Cross
Platform
Sim Sim
?
Caro
Parcial Sussa
Sim
Não Si...
App
Híbrida?
Desenvolva Desenvolva
Desenvolva
Teste
Desenvolva
Teste
Desenvolva
Teste
Build
Desenvolva
Teste
Build
Desenvolva
Teste
Build
Desenvolva
Teste
Build
Desenvolva
Teste
Build Build
{Híbrido
?
Our biggest mistake
was betting too much
on HTML5
In your face!
“So, when Mark Zuckerberg said
HTML5 wasn't ready, we took a little
offense to the comment.”
Sussa*
Plugins
SQLite nativo
BarCode Scanner
etc
https://github.com/phonegap/phonegap-plugins
https://github.com/brodyspark/PhoneGap-
SQL...
Issues
App Store
Parece uma
App
Parece
app iOS
diferente
web
Aprenda a
desenvolver
para mobile,
não web
App
únicaButtons,
iOS Human Interfa...
http://phonegap.com/app/
http://www.sencha.com/apps/
http://www.loiane.com/2012/03/
curso-de-sencha-touch-2-gratuito
Códigos:
https://github.com/loiane/senchatouch2-contacts
https://github.com/loiane/mobileConf2013
Obrigada!
http://loiane.com
@loiane
http://loiane.com
facebook.com/loianegroner
@loiane
https://github.com/loiane
youtube.com/user/Loianeg
slideshare.net/loia...
FAESA CONENCO 2013: Sencha Touch 2 + PhoneGap
FAESA CONENCO 2013: Sencha Touch 2 + PhoneGap
FAESA CONENCO 2013: Sencha Touch 2 + PhoneGap
FAESA CONENCO 2013: Sencha Touch 2 + PhoneGap
FAESA CONENCO 2013: Sencha Touch 2 + PhoneGap
FAESA CONENCO 2013: Sencha Touch 2 + PhoneGap
FAESA CONENCO 2013: Sencha Touch 2 + PhoneGap
FAESA CONENCO 2013: Sencha Touch 2 + PhoneGap
FAESA CONENCO 2013: Sencha Touch 2 + PhoneGap
FAESA CONENCO 2013: Sencha Touch 2 + PhoneGap
FAESA CONENCO 2013: Sencha Touch 2 + PhoneGap
FAESA CONENCO 2013: Sencha Touch 2 + PhoneGap
FAESA CONENCO 2013: Sencha Touch 2 + PhoneGap
FAESA CONENCO 2013: Sencha Touch 2 + PhoneGap
FAESA CONENCO 2013: Sencha Touch 2 + PhoneGap
FAESA CONENCO 2013: Sencha Touch 2 + PhoneGap
FAESA CONENCO 2013: Sencha Touch 2 + PhoneGap
FAESA CONENCO 2013: Sencha Touch 2 + PhoneGap
FAESA CONENCO 2013: Sencha Touch 2 + PhoneGap
FAESA CONENCO 2013: Sencha Touch 2 + PhoneGap
FAESA CONENCO 2013: Sencha Touch 2 + PhoneGap
FAESA CONENCO 2013: Sencha Touch 2 + PhoneGap
FAESA CONENCO 2013: Sencha Touch 2 + PhoneGap
FAESA CONENCO 2013: Sencha Touch 2 + PhoneGap
FAESA CONENCO 2013: Sencha Touch 2 + PhoneGap
FAESA CONENCO 2013: Sencha Touch 2 + PhoneGap
FAESA CONENCO 2013: Sencha Touch 2 + PhoneGap
Upcoming SlideShare
Loading in...5
×

FAESA CONENCO 2013: Sencha Touch 2 + PhoneGap

752

Published on

Palestra apresentada no CONENCO e SECS 2013 - Faesa - em Vitória - ES no dia 20 de setembro de 2013.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
752
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
21
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "FAESA CONENCO 2013: Sencha Touch 2 + PhoneGap"

  1. 1. Sencha Touch + Phone Gap Loiane Groner
  2. 2. Me, Myself & I •Gerente de Desenv Projetos @Citibank •8+ XP TI •Java JUG Leader •Sencha Community Leader •http://loiane.com •@loiane
  3. 3. Autora Técnica Internacional
  4. 4. Pq Mobile? Pq Multiplataforma? 0
  5. 5. #changeBrazil
  6. 6. Aplicações
  7. 7. WORA: Write Once Run Anywhere
  8. 8. Mobile
  9. 9. Android Java BackBerry Java iOS Objective-C Palm OS C, C++, Pascal Symbian C++ Windows Phone C#
  10. 10. Sencha Touch 1
  11. 11. Primeiro framework Javascript para desenvolvimento de apps mobile ricas usando padrões web - HTML 5
  12. 12. O que tem no Sencha Touch? Componentes e Layouts Themas e Ícones Orientação e Animação Eventos Touch e Scroller Pacote de Dados MVC
  13. 13. Componentes Lists - Nested, Grouped, Sortable Carousel Picker Overlay Slider Forms & fields Toolbars & buttons HTML5 - Audio -Video - GeoLocation Lists - Nested, Grouped, Sortable Carousel Picker Overlay Slider Forms & fields Toolbars & buttons HTML5 - Audio - Video Components
  14. 14. Ext.define('Contact', { extend: 'Ext.data.Model', config: { fields: ['firstName', 'lastName'] } }); var store = Ext.create('Ext.data.Store', { model: 'Contact', sorters: 'lastName', grouper: { groupFn: function(record) { return record.get('lastName')[0]; } }, data: [ { firstName: 'Tommy', lastName: 'Maintz' }, { firstName: 'Rob', lastName: 'Dougan' }, { firstName: 'Ed', lastName: 'Spencer' }, { firstName: 'Jamie', lastName: 'Avins' }, { firstName: 'Aaron', lastName: 'Conran' }, { firstName: 'Dave', lastName: 'Kaneda' }, { firstName: 'Jacky', lastName: 'Nguyen' }, { firstName: 'Abraham', lastName: 'Elias' }, { firstName: 'Jay', lastName: 'Robinson'}, { firstName: 'Nigel', lastName: 'White' }, { firstName: 'Don', lastName: 'Griffin' }, { firstName: 'Nico', lastName: 'Ferrero' }, { firstName: 'Jason', lastName: 'Johnston'} ] }); Ext.create('Ext.List', { fullscreen: true, itemTpl: '<div class="contact">{firstName} <strong>{lastName}</strong></div>', store: store, grouped: true });
  15. 15. Forms
  16. 16. Ext.create('Ext.form.Panel', { fullscreen: true, items: [ { xtype: 'textfield', name: 'name', label: 'Name' }, { xtype: 'emailfield', name: 'email', label: 'Email' }, { xtype: 'passwordfield', name: 'password', label: 'Password' } ] }); form.submit({ url: 'url/to/submit/to', method: 'POST', success: function() { alert('form submitted successfully!'); } });
  17. 17. Scrolling Scrolling Momentum/bounce physics ardware accelerated hroughout all components: Lists Carousel Pickers
  18. 18. Eventos Touch Baseado em Eventos Nativos Abstraído para Performance Eventos Adicionais: - Tap - Double tap - Tap & hold - Swipe - Rotate - Drag & drop
  19. 19. Data Package Models, Stores, e Proxies - Associations -Validation - Local & server storage Consumir web services - JSON/P - XML -YQL
  20. 20. REST
  21. 21. JSON-P
  22. 22. Local Storage Web SQL (SQLite)
  23. 23. CORS http://enable-cors.org/
  24. 24. Temas Use CSS3 & SASS - Flexible themes - Highly optimized e.g. Theming $base-color: #ff6699 Use CSS3 & SASS - Flexible themes - Highly optimized e.g. Theming $base-color: #ff6699 CSS3 com Sass e Compass
  25. 25. Gráficos Touch Charts
  26. 26. Demo 1
  27. 27. Tem Acesso Nativo?
  28. 28. Acesso Nativo App in Purchases Câmera Contatos (read only)* Connection (online/offline) Device Info (nome, plataforma, uuid) GeoLocation Notifications (vibrar) Orientation Push Notifications Sencha Packager* PhoneGap Emulator
  29. 29. Sencha Touch não tem Acelerômetro Compass File
  30. 30. Sencha Touch SDK Sencha Cmd Local WebServer Browser (safari, Chrome) Emuladores Dispositivos para testes
  31. 31. $ cd /path/to/sencha-touch-2-sdk $ sencha generate app MyApp /path/to/www/
  32. 32. Phone Gap 2
  33. 33. •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
  34. 34. A partir do Phonegap 1.5.0
  35. 35. Apache Cordova •Cordova é o projeto Open Source •PhoneGap é a implementação •http://incubator.apache.org/cordova/
  36. 36. O que é Phonegap / Cordova? •Chromeless webkit browser •Plataforma mobile HTML 5 (wrapper) •Acesso Nativo
  37. 37. Phonegap é WORA? Write Once, Run Anywhere?
  38. 38. Write Once DEBUG Anywhere
  39. 39. 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); Acceleration
  40. 40. function capturePhoto() { navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50, destinationType: destinationType.DATA_URL }); } Capturar Foto
  41. 41. function capturePhotoEdit() { navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true, destinationType: destinationType.DATA_URL }); } Capturar Foto com Edição
  42. 42. function 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> Busca Foto do Dispositivo
  43. 43. function onSuccess(heading) { alert('Heading: ' + heading.magneticHeading); }; function onError(error) { alert('CompassError: ' + error.code); }; navigator.compass.getCurrentHeading(onSuccess, onError); Compass/Bússula
  44. 44. function 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(); Conexão
  45. 45. function 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 />'; } Propriedades do Dispositivo
  46. 46. var 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); }); In App Browser
  47. 47. navigator.notification.alert( 'Alerta!', // message alertDismissed, // callback 'Titulo', // title 'Botão' // buttonName ); Notification - Alert
  48. 48. function showConfirm() { navigator.notification.confirm( 'Confirmar?', // message onConfirm, // callback to invoke with index of button pressed 'Titulo', // title 'OK,Cancel' // buttonLabels ); } Notification - Confirm
  49. 49. // Beepa 3 vezes function playBeep() { navigator.notification.beep(3); } Notification - Beep Não funciona no iOS
  50. 50. // Vibra por 2 segundos function vibrate() { navigator.notification.vibrate(2000); } Notification - Vibrar
  51. 51. Demo 2
  52. 52. http://nodejs.org/
  53. 53. $ sudo npm install -g phonegap
  54. 54. $ phonegap create hello com.example.hello HelloWorld
  55. 55. $ phonegap build ios     [phonegap] detecting iOS SDK environment...     [phonegap] using the local environment     [phonegap] compiling iOS...     [phonegap] successfully compiled iOS app
  56. 56. $ phonegap run android     [phonegap] detecting Android SDK environment...     [phonegap] using the local environment     [phonegap] compiling Android...     [phonegap] successfully compiled Android app     [phonegap] trying to install app onto device     [phonegap] no device was found     [phonegap] trying to install app onto emulator     [phonegap] successfully installed onto emulator
  57. 57. Sencha Touch + PhoneGap 3
  58. 58. HTML 5 CSS 3 JS UIWebView WebView APIs JS Stores
  59. 59. Workflow de Desenvolvimento
  60. 60. Mock Up Desenvolvimento Testes Simulação Dispositivo Store
  61. 61. M O C K U P
  62. 62. Resultado
  63. 63. $ sencha generate app Contatos ../Contatos
  64. 64. Testes Locais
  65. 65. Testes Automatizados
  66. 66. http://bryntum.com
  67. 67. Hora de Integrar!
  68. 68. app.json "js": [ { "path": "touch/sencha-touch.js" }, { "path": "cordova-2.9.0.js" }, { "path": "app.js", "bundle": true, "update": "delta" } ],
  69. 69. navigator.contacts.find( ! 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); ! } ! }, MyContacts.proxy.ContactsProxy
  70. 70. $ ./create ContatosIOS com.loiane ../../../ContatosIOS
  71. 71. Emuladores
  72. 72. R I P P L E
  73. 73. Ferramentas de Debug
  74. 74. iWebInspector
  75. 75. Weinre
  76. 76. Build
  77. 77. $ sencha app build $ sencha app build native $ sencha app package run packager.json
  78. 78. XCode Eclipse build.phonegap.com
  79. 79. http://www.loiane.com/2013/07/usando- phonegap-build-build-automatico-para-6- plataformas-de-uma-so-vez/
  80. 80. Melhores Práticas
  81. 81. sencha app build
  82. 82. Multiplataforma 4
  83. 83. "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" } ]
  84. 84. Nativo x Web 5
  85. 85. Nativo Web Acesso Device Sim Parcial
  86. 86. Nativo Web Acesso Device Velocidade Sim Sim ?Parcial
  87. 87. Nativo Web Acesso Device Velocidade Tempo Desenvolvimento Sim Sim ? Caro Parcial Sussa
  88. 88. Nativo Web Acesso Device Velocidade Tempo Desenvolvimento App Store Sim Sim ? Caro Parcial Sussa Sim Não
  89. 89. Nativo Web Acesso Device Velocidade Tempo Desenvolvimento App Store Cross Platform Sim Sim ? Caro Parcial Sussa Sim Não Sim Não
  90. 90. Nativo Web Acesso Device Velocidade Tempo Desenvolvimento App Store Cross Platform Sim Sim ? Caro Parcial Sussa Sim Não Sim Não Híbrido Sim ? Sussa* Sim Sim ? Sussa* Já vamos discutir Já vamos discutir
  91. 91. App Híbrida?
  92. 92. Desenvolva Desenvolva
  93. 93. Desenvolva Teste Desenvolva Teste
  94. 94. Desenvolva Teste Build Desenvolva Teste Build
  95. 95. Desenvolva Teste Build Desenvolva Teste Build Desenvolva Teste Build Build {Híbrido
  96. 96. ?
  97. 97. Our biggest mistake was betting too much on HTML5
  98. 98. In your face!
  99. 99. “So, when Mark Zuckerberg said HTML5 wasn't ready, we took a little offense to the comment.”
  100. 100. Sussa*
  101. 101. Plugins
  102. 102. SQLite nativo BarCode Scanner etc https://github.com/phonegap/phonegap-plugins https://github.com/brodyspark/PhoneGap- SQLitePlugin-iOS
  103. 103. Issues App Store
  104. 104. Parece uma App Parece app iOS diferente web Aprenda a desenvolver para mobile, não web App únicaButtons, iOS Human Interface Design Guidelines Eventos Touch, não Web Pinch, Zoom #fail Agregador de links App Intuitiva Hyperlink
  105. 105. http://phonegap.com/app/ http://www.sencha.com/apps/
  106. 106. http://www.loiane.com/2012/03/ curso-de-sencha-touch-2-gratuito
  107. 107. Códigos: https://github.com/loiane/senchatouch2-contacts https://github.com/loiane/mobileConf2013
  108. 108. Obrigada! http://loiane.com @loiane
  109. 109. http://loiane.com facebook.com/loianegroner @loiane https://github.com/loiane youtube.com/user/Loianeg slideshare.net/loianeg
  1. Gostou de algum slide específico?

    Recortar slides é uma maneira fácil de colecionar informações para acessar mais tarde.

×