Sócio & Coordenador de desenvolvimento mobileMQBC.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-gadgets-on-earth-than-people
‘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
‘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/
‘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
QUE PLATAFORMA ESCOLHER?
QUE PLATAFORMA ESCOLHER?
QUAISS
Market ShareTráfego de
internet
Fonte: IDC e NETMARKETSHARE (2T2015, Worlwide)
O DESAFIO PARA O DESENVOLVEDOR
xCodeCocoa Touch
Objective-C/Swift
Eclipse/Android StudioAndroid SDK/Google APIs
Java
Ferramentas, frameworks, bibliotecas e linguagens diferentes.Pouco reaproveitamento de conhecimento entre as plataformas.
0% de reaproveitamento de código.
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 PARA VÁRIOS
IDIOMAS
HÁ 3 ABORDAGENS DE DESENVOLVIMENTO MULTIPLATAFORMA
• Mobile Web • Híbrida • Nativa
MOBILE WEBConsiste 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
ABORDAGEM HÍBRIDAWeb 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#)
App
híbrida
ABORDAGEM HÍBRIDAPró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
ABORDAGEM HÍBRIDAFacebook 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
ABORDAGEM HÍBRIDALinkedIn 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/
ABORDAGEM NATIVA
Código da APP (linguagem familiar)
Tradutor
Código nativo iOS(Objective-C/Swift)
Código nativo Android(Java)
xCode Android Development Tools
App iOS App Android
Código nativo WP(C#)
Visual Studio
App WP
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-bringing-modern-web-techniques-to-mobile
ABORDAGEM NATIVA: DROPBOX MAILBOX E CAROUSEL
Fonte: http://oleb.net/blog/2014/05/how-dropbox-uses-cplusplus-cross-platform-development/
Appcelerator Titanium
PLATAFORMAS SUPORTADAS
COMO O TITANIUM 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)
RAIO-X DE UMA APP TITANIUM
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
A API MUTIPLATAFORMA
Calendário
Contatos
Database
Filesystem
Geolocalização
Gestos
Áudio
Vídeo
HTTP
Socket
XML
Internacionalização
Interface com o Usuário
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. 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
ALLOY - O FRAMEWORK MVC DO TITANIUM
• Estrutura da UI em XML
• Estilo em TSS (equivale ao CSS)
• Controller em JavaScript
• Backbone.js para models e collections
View
Style
Controller
MILHARES DE WIDGETS, MÓDULOS E BIBLIOTECAS DISPONIBILIZADOS PELA COMUNIDADE
http://gitt.io
http://alloylove.com
https://marketplace.appcelerator.com
RESUMO DAS VANTAGENS• 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
DESVANTAGENS
• A API do Titanium 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
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 Checkin
Events Files
Friends Messages
Objects PhotoCollection
Photos
Push Notifications
Reviews
Social Integrations
Users SMS
ARROW
ANALYTICS EM TEMPO REAL
MONITORAMENTO DE ERROS EM TEMPO 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
LIVE VIEW
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/radiobeat/id598225415
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
APPNEWS DELIVERY
https://play.google.com/store/apps/details?id=com.appnewsdelivery.app
https://itunes.apple.com/us/app/appnews-delivery/id1038953191
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
'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