Sócio & Coordenador de desenvolvimento mobile

MQBC.com.br
Dirlei Dionísio
Appcelerator Titanium
POR QUE DESENVOLVER
MOBILE APPS?
‘Há mais dispositivos móveis ativos
que pessoas no mundo’ (CNet)
Fonte: http://www.cnet.com/news/there-are-now-more-gadget...
‘Há mais pessoas que usam apenas
seus telefones para acessar a internet
que pessoas que usam apenas
desktops’ (Business In...
‘Usuários gastam 89% do tempo
consumindo conteúdo em apps; e
apenas 11%, no browser’ (Nielsen)
Fonte: http://www.smartinsi...
‘Visando otimizar o uso
dos dispositivos móveis,
os usuários abrem mão
do navegador de uso
geral. Eles usam a
Internet, ma...
QUE PLATAFORMA
ESCOLHER?
QUE PLATAFORMA
ESCOLHER?
QUAIS
S
Market Share
Tráfego de
internet
Fonte: IDC e NETMARKETSHARE (2T2015,Worlwide)
O DESAFIO PARA O DESENVOLVEDOR
xCode
CocoaTouch
Objective-C/Swift
Eclipse/Android Studio
Android SDK/Google APIs
Java
Ferr...
REESCREVER A APP INTEIRA EM
CADA PLATAFORMA OU…
…USAR UMA ABORDAGEM DE
DESENVOLVIMENTO
MULTIPLATAFORMA
O DESENVOLVIMENTO MULTIPLATAFORMA
É COMO SE COMUNICAR COM
ESTRANGEIROS USANDO INTÉRPRETES.
OU COMO PRODUZIR UM FILME E
ADICIONAR DUBLAGEM PARAVÁRIOS
IDIOMAS
HÁ 3 ABORDAGENS DE
DESENVOLVIMENTO MULTIPLATAFORMA
• Mobile Web
• Híbrida
• Nativa
MOBILE WEB
Consiste em criar sites otimizados para browsers de dispositivos
móveis (web apps).
Usando os recursos do HTML5...
ABORDAGEM HÍBRIDA
Web Apps embutidas numa app nativa. São fortemente apoiadas
no elemento WebView de cada plataforma.
UI e...
ABORDAGEM HÍBRIDA
Prós Contras
• Suporte a um bom
número de plataformas
• Familiar para
desenvolvedores web
• UX prejudica...
ABORDAGEM HÍBRIDA
Facebook deixou de usar a
abordagem híbrida em 2012.
'Quando se trata de plataformas como
iOS, as pessoa...
ABORDAGEM HÍBRIDA
LinkedIn deixou de usar a
abordagem híbrida em 2013.
'Mudamos para o nativo para obter
algumas das anima...
ABORDAGEM NATIVA
Código da APP (linguagem familiar)
Tradutor
Código nativo iOS
(Objective-C/Swift)
Código nativo Android
(...
ABORDAGEM NATIVA: GOOGLE INBOX
Fonte: http://gmailblog.blogspot.com.br/2014/11/going-under-hood-of-inbox.html
ABORDAGEM NATIVA:
FACEBOOK GROUPS E ADS MANAGER
Fonte: https://code.facebook.com/posts/1014532261909640/react-native-bring...
ABORDAGEM NATIVA:
DROPBOX MAILBOX E CAROUSEL
Fonte: http://oleb.net/blog/2014/05/how-dropbox-uses-cplusplus-cross-platform...
Appcelerator Titanium
PLATAFORMAS SUPORTADAS
COMO OTITANIUM FUNCIONA
Código da APP (JavaScript)
API
Titanium
iOS
(JavaScript)
API
Titanium
Android
(JavaScript)
API
Tit...
RAIO-X DE UMA APPTITANIUM
Código Objective-C
compilado
Arquivo .IPA (iOS)
Bytecode Java
Código
JavaScript
otimizado e
mini...
A API MUTIPLATAFORMA
Calendário
Contatos
Database
Facebook
Filesystem
Geolocalização
Gestos
Áudio
Vídeo
HTTP
Socket
XML
In...
ELEMENTOS DE UI NATIVOS
iOS6 iOS7+
ELEMENTOS DE UI NATIVOS
Android 4.x Android 5.xAndroid 2.3
BENEFÍCIOS DA APP NATIVA
'Queremos proporcionar aos usuários a experiência nativa, no
iPhone, iPad e dispositivos Android....
ALLOY - O FRAMEWORK MVC DO
TITANIUM
• Estrutura da UI em XML
• Estilo emTSS (equivale ao CSS)
• Controller em JavaScript
•...
View
Style
Controller
MILHARES DE WIDGETS, MÓDULOS E BIBLIOTECAS
DISPONIBILIZADOS PELA COMUNIDADE
http://gitt.io
http://alloylove.com
https://ma...
RESUMO DASVANTAGENS
• Desenvolvimento multiplataforma em uma linguagem popular, fácil de
aprender e manter - JavaScript
• ...
DESVANTAGENS
• A API doTitanium não cobre 100% das APIs nativas
• Tamanho maior da app no Android e WP (pelo menos +5mb)
•...
QUANTO CUSTA?
Titanium é free e open source,
sem restrições de uso.
• Titanium CLI
• Titanium SDK
• Alloy MVC Framework
PLATAFORMA APPCELERATOR
PLATAFORMA APPCELERATOR
Titanium
Arrow é um Mobile Backend as a Service (MBaaS) que oferece
um jeito fácil e rápido de desenvolver apps conectadas.
Chat Ch...
ANALYTICS EMTEMPO REAL
MONITORAMENTO DE ERROS
EMTEMPO REAL
Mensagem de
erro
Arquivo e
linha que
causou o
erro
Número de
ocorrências
Usuários
afet...
LIVEVIEW
https://www.youtube.com/watch?v=m5M4qrjT6DI
https://www.youtube.com/watch?v=nbbcj12_bgQ
TESTES AUTOMATIZADOS
https://www.youtube.com/watch?v=SJVe56mT8KM
CASES
GLOBO - RADIOBEAT
https://play.google.com/store/apps/
details?id=com.aorta.radiobeat
https://itunes.apple.com/br/app/
radi...
SENAC - MINIDICIONÁRIO DE
ENOLOGIA EM 6 IDIOMAS
https://play.google.com/store/apps/details?
id=br.senac.rj.minidicenologia...
APPNEWS DELIVERY
https://play.google.com/store/apps/details?
id=com.appnewsdelivery.app
https://itunes.apple.com/us/app/ap...
POR ONDE COMEÇAR?
Plataforma Appcelerator:
http://appcelerator.com
Titanium SDK + CLI + Atom
https://github.com/m1ga/titan...
'Não existe ferramenta, framework ou técnica que alcance
todos os dispositivos e plataformas sem abrir mão de
algumas func...
PERGUNTAS?
@DirleiDionisio | dirlei@mqbc.com.br | mqbc.com.br
Dirlei Dionísio
Desenvolvimento Multiplataforma com Appcelerator Titanium
Desenvolvimento Multiplataforma com Appcelerator Titanium
Próximos SlideShares
Carregando em…5
×

Desenvolvimento Multiplataforma com Appcelerator Titanium

786 visualizações

Publicada em

Nessa palestra online ministrada através da MobGeek, foram abordadas questões como:

- Por que desenvolver mobile apps?
- Por que desenvolvimento multiplataforma?
- Diferença entre multiplataforma híbrido e multiplataforma nativo
- Como o Titanium funciona?
- Vantagens e desvantagens do Titanium
- Recursos da Plataforma Appcelerator

Publicada em: Software
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
786
No SlideShare
0
A partir de incorporações
0
Número de incorporações
14
Ações
Compartilhamentos
0
Downloads
19
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Desenvolvimento Multiplataforma com Appcelerator Titanium

  1. 1. Sócio & Coordenador de desenvolvimento mobile
 MQBC.com.br Dirlei Dionísio Appcelerator Titanium
  2. 2. POR QUE DESENVOLVER MOBILE APPS?
  3. 3. ‘Há mais dispositivos móveis ativos que pessoas no mundo’ (CNet) Fonte: http://www.cnet.com/news/there-are-now-more-gadgets-on-earth-than-people
  4. 4. ‘Há mais pessoas que usam apenas seus telefones para acessar a internet que pessoas que usam apenas desktops’ (Business Insider) Fonte: http://www.businessinsider.com/mobile-internet-users-pass-desktop-users-2015-4
  5. 5. ‘Usuários gastam 89% do tempo consumindo conteúdo em apps; e apenas 11%, no browser’ (Nielsen) Fonte: http://www.smartinsights.com/marketplace-analysis/customer-analysis/consumer-media-device-use/
  6. 6. ‘Visando otimizar o uso dos dispositivos móveis, os usuários abrem mão do navegador de uso geral. Eles usam a Internet, mas não a web’ (Chris Anderson,Wired) Fonte: http://www.wired.com/2010/08/ ff_webrip/all/1
  7. 7. QUE PLATAFORMA ESCOLHER?
  8. 8. QUE PLATAFORMA ESCOLHER? QUAIS S
  9. 9. Market Share Tráfego de internet Fonte: IDC e NETMARKETSHARE (2T2015,Worlwide)
  10. 10. O DESAFIO PARA O DESENVOLVEDOR xCode CocoaTouch Objective-C/Swift Eclipse/Android Studio Android SDK/Google APIs Java Ferramentas, frameworks, bibliotecas e linguagens diferentes. Pouco reaproveitamento de conhecimento entre as plataformas. 0% de reaproveitamento de código.
  11. 11. REESCREVER A APP INTEIRA EM CADA PLATAFORMA OU…
  12. 12. …USAR UMA ABORDAGEM DE DESENVOLVIMENTO MULTIPLATAFORMA
  13. 13. O DESENVOLVIMENTO MULTIPLATAFORMA É COMO SE COMUNICAR COM ESTRANGEIROS USANDO INTÉRPRETES.
  14. 14. OU COMO PRODUZIR UM FILME E ADICIONAR DUBLAGEM PARAVÁRIOS IDIOMAS
  15. 15. HÁ 3 ABORDAGENS DE DESENVOLVIMENTO MULTIPLATAFORMA • Mobile Web • Híbrida • Nativa
  16. 16. MOBILE WEB Consiste em criar sites otimizados para browsers de dispositivos móveis (web apps). Usando os recursos do HTML5, podem funcionar total ou parcialmente offline. Prós:
 - Suporte a inúmeras plataformas 
 - Updates instantâneos. Contra: - Acesso fraco ou inexistente ao hardware dos dispositivos.
 - Não pode ser publicada nas lojas oficiais
  17. 17. ABORDAGEM HÍBRIDA Web Apps embutidas numa app nativa. São fortemente apoiadas no elemento WebView de cada plataforma. UI e Regras de negócio (HTML/CSS, JavaScript) API do framework (JavaScript) WebView Código Nativo (Obj-C/Java/C#) A pp híbrida
  18. 18. ABORDAGEM HÍBRIDA Prós Contras • Suporte a um bom número de plataformas • Familiar para desenvolvedores web • UX prejudicada; elementos de UI, transições e animações são simulações do equivalente nativo (no melhor caso) • Sujeitas às diferenças nas engines de renderização HTML/CSS
  19. 19. ABORDAGEM HÍBRIDA Facebook deixou de usar a abordagem híbrida em 2012. 'Quando se trata de plataformas como iOS, as pessoas esperam uma experiência ágil e confiável e nossa app estava aquém disso.' 'O desenvolvimento nativo nos dá maiores oportunidades de manter a app mais rápida, estável e rica em recursos.' Jonathan Dann, Software Engineer, Facebook Fonte: https://www.facebook.com/notes/facebook-engineering/under-the-hood-rebuilding-facebook-for-ios/ 10151036091753920
  20. 20. ABORDAGEM HÍBRIDA LinkedIn deixou de usar a abordagem híbrida em 2013. 'Mudamos para o nativo para obter algumas das animações, os "spinners" e o jeito como eles funcionam, aquela suavidade; nós concluímos que precisávamos do nativo para fazer isso bem feito.’ Kiran Prasad, Senior Director for Mobile Engineering, LinkedIn Fonte: http://venturebeat.com/2013/04/17/linkedin-mobile-web-breakup/
  21. 21. ABORDAGEM NATIVA Código da APP (linguagem familiar) Tradutor Código nativo iOS (Objective-C/Swift) Código nativo Android (Java) xCode Android DevelopmentTools App iOS App Android Código nativo WP (C#) Visual Studio App WP
  22. 22. ABORDAGEM NATIVA: GOOGLE INBOX Fonte: http://gmailblog.blogspot.com.br/2014/11/going-under-hood-of-inbox.html
  23. 23. ABORDAGEM NATIVA: FACEBOOK GROUPS E ADS MANAGER Fonte: https://code.facebook.com/posts/1014532261909640/react-native-bringing-modern-web-techniques-to-mobile
  24. 24. ABORDAGEM NATIVA: DROPBOX MAILBOX E CAROUSEL Fonte: http://oleb.net/blog/2014/05/how-dropbox-uses-cplusplus-cross-platform-development/
  25. 25. Appcelerator Titanium
  26. 26. PLATAFORMAS SUPORTADAS
  27. 27. COMO OTITANIUM FUNCIONA Código da APP (JavaScript) API Titanium iOS (JavaScript) API Titanium Android (JavaScript) API Titanium multiplataforma (JavaScript) API iOS Nativa (Objective-C) API Android Nativa (Java)
  28. 28. RAIO-X DE UMA APPTITANIUM Código Objective-C compilado Arquivo .IPA (iOS) Bytecode Java Código JavaScript otimizado e minificado Imagens, strings, arquivos de configuração etc. Arquivo .APK (Android) V8 JavaScript Engine Imagens, strings, arquivos de configuração etc. Código JavaScript otimizado e minificado
  29. 29. A API MUTIPLATAFORMA Calendário Contatos Database Facebook Filesystem Geolocalização Gestos Áudio Vídeo HTTP Socket XML Internacionalização Interface com o Usuário
  30. 30. ELEMENTOS DE UI NATIVOS iOS6 iOS7+
  31. 31. ELEMENTOS DE UI NATIVOS Android 4.x Android 5.xAndroid 2.3
  32. 32. BENEFÍCIOS DA APP NATIVA 'Queremos proporcionar aos usuários a experiência nativa, no iPhone, iPad e dispositivos Android. Nossa aplicação nesses dispositivos deve se comportar assim como os usuários esperam que elas se comportem. Os usuários querem uma experiência que se integre perfeitamente com a plataforma em que estão usando no momento. Eles querem alta performance, o que normalmente só é obtido través das bibliotecas nativas do dispositivo ou do sistema operacional.’ - Karen White, CEO do Syncplicity Fonte: http://readwrite.com/2011/09/06/syncplicity-makes-the-case-for
  33. 33. ALLOY - O FRAMEWORK MVC DO TITANIUM • Estrutura da UI em XML • Estilo emTSS (equivale ao CSS) • Controller em JavaScript • Backbone.js para models e collections
  34. 34. View Style Controller
  35. 35. MILHARES DE WIDGETS, MÓDULOS E BIBLIOTECAS DISPONIBILIZADOS PELA COMUNIDADE http://gitt.io http://alloylove.com https://marketplace.appcelerator.com
  36. 36. RESUMO DASVANTAGENS • Desenvolvimento multiplataforma em uma linguagem popular, fácil de aprender e manter - JavaScript • Utilização do padrão MVC, facilitando a organização e manutenção • Reaproveitamento de código de 50 a 90% • Produção de apps verdadeiramente nativas (não web-based), aproveitando ao máximo os elementos de UI nativos • Extensibilidade garantida com módulos nativos • Possibilidade de criar web apps, apps híbridas e nativas
  37. 37. DESVANTAGENS • A API doTitanium não cobre 100% das APIs nativas • Tamanho maior da app no Android e WP (pelo menos +5mb) • Builds mais lentos que os feitos apenas com ferramentas nativas • Uma camada extra de bugs
  38. 38. QUANTO CUSTA? Titanium é free e open source, sem restrições de uso. • Titanium CLI • Titanium SDK • Alloy MVC Framework
  39. 39. PLATAFORMA APPCELERATOR
  40. 40. PLATAFORMA APPCELERATOR Titanium
  41. 41. Arrow é um Mobile Backend as a Service (MBaaS) que oferece um jeito fácil e rápido de desenvolver apps conectadas. Chat Checkin E-mail Events Files Friends Messages Objects PhotoCollection Photos Push Notifications Reviews Social Integrations Users SMS ARROW
  42. 42. ANALYTICS EMTEMPO REAL
  43. 43. MONITORAMENTO DE ERROS EMTEMPO REAL Mensagem de erro Arquivo e linha que causou o erro Número de ocorrências Usuários afetados Dados do ambiente Integração ao Jira
  44. 44. LIVEVIEW https://www.youtube.com/watch?v=m5M4qrjT6DI https://www.youtube.com/watch?v=nbbcj12_bgQ
  45. 45. TESTES AUTOMATIZADOS https://www.youtube.com/watch?v=SJVe56mT8KM
  46. 46. CASES
  47. 47. GLOBO - RADIOBEAT https://play.google.com/store/apps/ details?id=com.aorta.radiobeat https://itunes.apple.com/br/app/ radiobeat/id598225415
  48. 48. SENAC - MINIDICIONÁRIO DE ENOLOGIA EM 6 IDIOMAS https://play.google.com/store/apps/details? id=br.senac.rj.minidicenologia https://itunes.apple.com/br/app/ minidicionario-de-enologia/id1028917554
  49. 49. APPNEWS DELIVERY https://play.google.com/store/apps/details? id=com.appnewsdelivery.app https://itunes.apple.com/us/app/appnews-delivery/id1038953191
  50. 50. POR ONDE COMEÇAR? Plataforma Appcelerator: http://appcelerator.com Titanium SDK + CLI + Atom https://github.com/m1ga/titanium_with_atom Comunidades brasileiras: https://www.facebook.com/groups/timobilebr https://groups.google.com/group/titanium-mobile-br
  51. 51. 'Não existe ferramenta, framework ou técnica que alcance todos os dispositivos e plataformas sem abrir mão de algumas funcionalidades ou sem a necessidade de portar alguns trechos de código. E essa é a realidade não apenas do desenvolvimento mobile, mas também da maior parte de todo desenvolvimento de software.'
 
 (Mobile Learning Environment) http://www.amazon.com/Mobile-Learning-Environment-MoLE-Project/dp/1482558181
  52. 52. PERGUNTAS? @DirleiDionisio | dirlei@mqbc.com.br | mqbc.com.br Dirlei Dionísio

×