mobile apps cross-platform
DESCRIPTION
Palestra sobre Mobile Apps Cross-Platform realizada por Adriel Café na Semana Cientifica da FAZAG (26/10/12)TRANSCRIPT
![Page 1: Mobile Apps Cross-Platform](https://reader033.vdocuments.site/reader033/viewer/2022061220/54bb97284a7959cd1e8b45b9/html5/thumbnails/1.jpg)
MOBILE APPSCROSS-PLATFORMMOBILE APPSCROSS-PLATFORM
/adrielcafe
@adrielcafe
/in/adrielcafe
Adriel Café
![Page 2: Mobile Apps Cross-Platform](https://reader033.vdocuments.site/reader033/viewer/2022061220/54bb97284a7959cd1e8b45b9/html5/thumbnails/2.jpg)
Plataformas
![Page 3: Mobile Apps Cross-Platform](https://reader033.vdocuments.site/reader033/viewer/2022061220/54bb97284a7959cd1e8b45b9/html5/thumbnails/3.jpg)
![Page 4: Mobile Apps Cross-Platform](https://reader033.vdocuments.site/reader033/viewer/2022061220/54bb97284a7959cd1e8b45b9/html5/thumbnails/4.jpg)
Precisamos fazer escolhas...
Tantas plataformasTantas linguagens
Tão pouco tempoTão pouco dinheiro
![Page 5: Mobile Apps Cross-Platform](https://reader033.vdocuments.site/reader033/viewer/2022061220/54bb97284a7959cd1e8b45b9/html5/thumbnails/5.jpg)
Sistema OperacionalParcela do Mercado
(2º Sem. 2012)
Android 68,1 %
iOS 16,9 %
BlackBerry 4,8 %
Symbian 4,4 %
Windows Phone 2,5 %
Outros 2,4 %
Fonte: IDC Worldwide Mobile Phone Tracker, 8 de Agosto de 2012
Como anda o mercado?
![Page 6: Mobile Apps Cross-Platform](https://reader033.vdocuments.site/reader033/viewer/2022061220/54bb97284a7959cd1e8b45b9/html5/thumbnails/6.jpg)
Mas ainda assim enfrentamos um grande desafio:
Criar aplicativosmulti-plataforma
![Page 7: Mobile Apps Cross-Platform](https://reader033.vdocuments.site/reader033/viewer/2022061220/54bb97284a7959cd1e8b45b9/html5/thumbnails/7.jpg)
Fonte: Developer Economics 2012 (developereconimics.com), Junho de 2012
O que os desenvolvedores querem?
![Page 8: Mobile Apps Cross-Platform](https://reader033.vdocuments.site/reader033/viewer/2022061220/54bb97284a7959cd1e8b45b9/html5/thumbnails/8.jpg)
• .NET Framework (C#, Visual Basic, F#, IronPython, IronRuby...)• Visual Studio
• Java, C/C++, HTML5, Adobe AIR• Android Runtime
• Objective-C• X Code• Mac OS
• Java, C++• Eclipse, NetBeans, MotoDev...• Open Source
![Page 9: Mobile Apps Cross-Platform](https://reader033.vdocuments.site/reader033/viewer/2022061220/54bb97284a7959cd1e8b45b9/html5/thumbnails/9.jpg)
Java
C#
Objective-C
Visual Basic
Visual Studio
C++
EclipseMotoDevNetBeans
Como criar um aplicativo multi-plataforma neste cenário?
Adobe AIR
![Page 10: Mobile Apps Cross-Platform](https://reader033.vdocuments.site/reader033/viewer/2022061220/54bb97284a7959cd1e8b45b9/html5/thumbnails/10.jpg)
Tecnologias Web
![Page 11: Mobile Apps Cross-Platform](https://reader033.vdocuments.site/reader033/viewer/2022061220/54bb97284a7959cd1e8b45b9/html5/thumbnails/11.jpg)
Tecnologias Web• Arquitetura Cliente-Servidor• Rodam em quase todas as plataformas existentes• Fáceis de aprender• Rápido desenvolvimento
![Page 12: Mobile Apps Cross-Platform](https://reader033.vdocuments.site/reader033/viewer/2022061220/54bb97284a7959cd1e8b45b9/html5/thumbnails/12.jpg)
Tecnologias Web
Disponível em: http://goo.gl/aX8yE
![Page 13: Mobile Apps Cross-Platform](https://reader033.vdocuments.site/reader033/viewer/2022061220/54bb97284a7959cd1e8b45b9/html5/thumbnails/13.jpg)
HTML5, CSS3 & JavaScript
![Page 14: Mobile Apps Cross-Platform](https://reader033.vdocuments.site/reader033/viewer/2022061220/54bb97284a7959cd1e8b45b9/html5/thumbnails/14.jpg)
HTML5
![Page 15: Mobile Apps Cross-Platform](https://reader033.vdocuments.site/reader033/viewer/2022061220/54bb97284a7959cd1e8b45b9/html5/thumbnails/15.jpg)
CSS3• Novas propriedades• @font-face• Border-radius• Box-shadow• Opacity• Transform• Transition• Resize• ...
![Page 16: Mobile Apps Cross-Platform](https://reader033.vdocuments.site/reader033/viewer/2022061220/54bb97284a7959cd1e8b45b9/html5/thumbnails/16.jpg)
JavaScript• Linguagem client-side• Orientada a objetos• Tipagem fraca e dinâmica• Possui milhares de API’s• AJAX, JQuery, ExtJS, Node.js, GWT, MooTools, RaphaëlJS...
![Page 17: Mobile Apps Cross-Platform](https://reader033.vdocuments.site/reader033/viewer/2022061220/54bb97284a7959cd1e8b45b9/html5/thumbnails/17.jpg)
Estão pensando o mesmo que eu?
Que tal utilizar tecnologias webpara criar aplicativos móveis
multi-plataforma?
![Page 18: Mobile Apps Cross-Platform](https://reader033.vdocuments.site/reader033/viewer/2022061220/54bb97284a7959cd1e8b45b9/html5/thumbnails/18.jpg)
Mobile Apps Cross-Platform
![Page 19: Mobile Apps Cross-Platform](https://reader033.vdocuments.site/reader033/viewer/2022061220/54bb97284a7959cd1e8b45b9/html5/thumbnails/19.jpg)
Mobile Apps Cross-Platform• Write Once, Run Anywhere• Utiliza, na maioria das vezes, tecnologias web• Técnicas utilizadas• JavaScript Frameworks• jQuery Mobile, Wink, Zepto JS, LimeJS...
• App Factories• AppMkr, Tiggzi, Mobjectify...
• Web-to-native wrappers• Sencha Touch, PhoneGap, MoSync...
• Runtimes• Titanium Mobile, Unity, Adobe Air, AppMobi...
![Page 20: Mobile Apps Cross-Platform](https://reader033.vdocuments.site/reader033/viewer/2022061220/54bb97284a7959cd1e8b45b9/html5/thumbnails/20.jpg)
Mobile Apps Cross-Platform• Reduzem drasticamente o custo e tempo de
desenvolvimento• Permitem que os web developers possam reutilizar seus
conhecimentos em uma nova plataforma
![Page 21: Mobile Apps Cross-Platform](https://reader033.vdocuments.site/reader033/viewer/2022061220/54bb97284a7959cd1e8b45b9/html5/thumbnails/21.jpg)
Fonte: Cross-Platform Tools 2012 (crossplatformtools.com), Fevereiro de 2012
Frameworks mais utilizados
![Page 22: Mobile Apps Cross-Platform](https://reader033.vdocuments.site/reader033/viewer/2022061220/54bb97284a7959cd1e8b45b9/html5/thumbnails/22.jpg)
Nem tudo são flores...
Solução perfeita? Não.
![Page 23: Mobile Apps Cross-Platform](https://reader033.vdocuments.site/reader033/viewer/2022061220/54bb97284a7959cd1e8b45b9/html5/thumbnails/23.jpg)
Native App, Web App & Hybrid App
![Page 24: Mobile Apps Cross-Platform](https://reader033.vdocuments.site/reader033/viewer/2022061220/54bb97284a7959cd1e8b45b9/html5/thumbnails/24.jpg)
Native AppPrós•Melhor performance•UI nativa•Pode armazenar mais informações offline•Disponível nas App Stories•Acesso a todas as funcionalidades do aparelho•Instalado no aparelho
Contras•Mais demorado e custoso para desenvolver•Suporta apenas uma plataforma•Precisa ser aprovado para ser publicado na App Store
![Page 25: Mobile Apps Cross-Platform](https://reader033.vdocuments.site/reader033/viewer/2022061220/54bb97284a7959cd1e8b45b9/html5/thumbnails/25.jpg)
Web AppPrós•Utiliza tecnologias web (HTML5, CSS3 & JavaScript)•Suporta múltiplas plataformas•Não é preciso ser aprovado nas App Stories•Atualizações instantâneas
Contras•Linguagem interpretada•Não possui acesso a todas as funcionalidades do aparelho•Não pode ser encontrado nas App Stories
![Page 26: Mobile Apps Cross-Platform](https://reader033.vdocuments.site/reader033/viewer/2022061220/54bb97284a7959cd1e8b45b9/html5/thumbnails/26.jpg)
Hybrid AppPrós•Utiliza tecnologias web (HTML5, CSS3 & JavaScript)•Suporta múltiplas plataformas•UI nativa (suportado por alguns frameworks)•Pode armazenar mais informações offline•Disponível nas App Stories•Instalado no aparelho•Suporta muitas funcionalidades do aparelho
Contras•Linguagem interpretada•Precisa ser aprovado para ser publicado na App Store
![Page 27: Mobile Apps Cross-Platform](https://reader033.vdocuments.site/reader033/viewer/2022061220/54bb97284a7959cd1e8b45b9/html5/thumbnails/27.jpg)
Qual a melhor opção?• O aplicativo requer o uso de alguma funcionalidade
especial? (Câmera, acelerômetro, GPS, armazenamento...)• Qual o seu orçamento?• O aplicativo requer conexão com a internet?• Quantas plataformas você pretende suportar?• Quais linguagens de programação eu, ou minha equipe,
domina?• A performance é muito importante?• O tempo é curto?
![Page 28: Mobile Apps Cross-Platform](https://reader033.vdocuments.site/reader033/viewer/2022061220/54bb97284a7959cd1e8b45b9/html5/thumbnails/28.jpg)
Ferramentas Cross-Platform
![Page 29: Mobile Apps Cross-Platform](https://reader033.vdocuments.site/reader033/viewer/2022061220/54bb97284a7959cd1e8b45b9/html5/thumbnails/29.jpg)
• Baseado no jQuery e jQuery UI• Suporta as plataformas iOS, Android, Windows Phone,
BlackBerry, WebOS, Bada, MeeGo, Symbian• Possui o Download builder
<!DOCTYPE html><html lang="en"> <head> <title>Hello jQuery Mobile</title> <link rel="stylesheet“ href="http://code.jquery.com/jquery.mobile.min.css" /> <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script> <script src="http://code.jquery.com/mobile/jquery.mobile-1.0a4.min.js"></script> </head> <body> <div data-role="page"> Hello jQuery Mobile </div> </body></html>
![Page 30: Mobile Apps Cross-Platform](https://reader033.vdocuments.site/reader033/viewer/2022061220/54bb97284a7959cd1e8b45b9/html5/thumbnails/30.jpg)
• Suporta as plataformas Android, iOS e Blackberry• Baseado nas bibliotecas javascript ExtJS, jQTouch e Raphaël• Possui sua própria IDE: o Sencha Architect• Possui a extensão Sencha Animator• Roda apenas na engine webkit• Documentação perfeita
Ext.application({ launch: function () { Ext.create('Ext.Panel', { fullscreen: true, html: 'Hello World!' }); }});
![Page 31: Mobile Apps Cross-Platform](https://reader033.vdocuments.site/reader033/viewer/2022061220/54bb97284a7959cd1e8b45b9/html5/thumbnails/31.jpg)
• Suporta as plataformas iOS, Android, Blackberry, Symbian, Bada e Windows Phone• Possui suas próprias APIs javascript que possibilitam o uso
de recursos nativos que as plataformas oferecem
var showMessageBox = function() { navigator.notification.alert("Hello World!"); } function init(){ document.addEventListener("deviceready", showMessageBox, true); }
![Page 32: Mobile Apps Cross-Platform](https://reader033.vdocuments.site/reader033/viewer/2022061220/54bb97284a7959cd1e8b45b9/html5/thumbnails/32.jpg)
• Suporta as plataformas iOS, Android e Blackberry (beta)• Possui sua própria IDE: o Titanium Studio• Possui sua própria loja virtual: a Appcelerator Marketplace• Suporta as linguagens server-side PHP, Python e Ruby• Possui suas próprias APIs javascript que possibilitam o uso de
recursos nativos que as plataformas oferecem
var winHello = Titanium.UI.createWindow(); var lblHello = Titanium.UI.createLabel({ text: 'Hello World!',}); winHello.add(lblHello);winHello.open();
![Page 33: Mobile Apps Cross-Platform](https://reader033.vdocuments.site/reader033/viewer/2022061220/54bb97284a7959cd1e8b45b9/html5/thumbnails/33.jpg)
Conclusão
“Cada caso é um caso”(Autor desconhecido)
![Page 34: Mobile Apps Cross-Platform](https://reader033.vdocuments.site/reader033/viewer/2022061220/54bb97284a7959cd1e8b45b9/html5/thumbnails/34.jpg)
JOptionPane.showMessageDialog(null, "Muito Obrigado!“
);System.exit(0);
/adrielcafe
@adrielcafe
/in/adrielcafe
Adriel Café