appcelerator titanium – b2w digital

Dirlei Dionísio & Valmir Santana | mqbc.com.br

Desenvolvimento Multiplataforma NATIVO

com Appcelerator

HISTÓRIA DE JOÃO:

JOÃO É FUNDADOR DE UMA STARTUP EM BUSCA DE

INVESTIMENTO.

ELE RECEBE UM CONVITE INUSITADO:

APRESENTAR SEU PRODUTO E MODELO DE NEGÓCIOS PARA 2

GRUPOS DE INVESTIDORES:

UM QUE SÓ FALA JAPONÊS E OUTRO QUE SÓ FALA MANDARIM.

JOÃO NÃO FALA NENHUM DESSES IDIOMAS.

MAS ELE TEM UMA AMIGA QUE FALA FLUENTEMENTE JAPONÊS

E MANDARIM.

JOÃO DEVE…

A. Recusar a oportunidade de conversar com os investidores

B. Começar a aprender japonês e mandarim e depois procurar os investidores

C. Usar sua amiga como intérprete

JOÃO DEVE…

A. Recusar a oportunidade de conversar com os investidores

B. Começar a aprender japonês e mandarim e depois procurar os investidores

C. Usar sua amiga como intérprete

FERRAMENTAS MULTIPLATAFORMA SÃO COMO INTÉRPRETES

Habilitam programadores a desenvolver aplicativos para iOS e Android sem conhecer as linguagens

nativas.

MAS EU CONHEÇOOBJ-C, SWIFT E JAVA!

HISTÓRIA DE MARIA:

MARIA É PRODUTORA, ROTEIRISTA E DIRETORA DE

CINEMA.

ELA QUER PRODUZIR UM FILME E LANÇÁ-LO EM 3 IDIOMAS: INGLÊS,

PORTUGUÊS E ESPANHOL.

ELA FALA ESSES 3 IDIOMAS, TEM DINHEIRO PRA INVESTIR, MAS TEM

PRESSA.

MARIA DEVE…

A. Gravar todas as cenas do filme em cada umdos 3 idiomas

B. Gravar o filme inteiro em um só idioma e adicionar dublagem e legenda para osdemais idiomas depois

MARIA DEVE…

A. Gravar todas as cenas do filme em cada umdos 3 idiomas

B. Gravar o filme inteiro em um só idioma e adicionar dublagem e legenda para os demais idiomas depois

DESENVOLVIMENTO MULTIPLATAFORMA É COMO PRODUZIR UM FILME COM

DUBLAGEMVocê pode até ser capaz de gravar um filme inteiro em vários idiomas, mas normalmente não irá fazê-lo porque

prefere otimizar o uso dos seus recursos.

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.

API Nativa(Obj-C/Swift/Java/C#)

UI e Regras de negócio(HTML/CSS, JavaScript)

API do framework(JavaScript)

WebView Nativa

Window Nativa

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/

ABORDAGEMMULTIPLATAFORMA

NATIVA

ABORDAGEMMULTIPLATAFORMA NATIVA

Código da aplicação

"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

GOOGLE INBOX

Fonte: http://gmailblog.blogspot.com.br/2014/11/going-under-hood-of-inbox.html

FACEBOOK GROUPS E ADS MANAGER

Fonte: https://code.facebook.com/posts/1014532261909640/react-native-bringing-modern-web-techniques-to-mobile

ABORDAGEMMULTIPLATAFORMA NATIVA

2015

2009

2009

2015

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

Facebook

Filesystem

Geolocalização

Gestos

Áudio

Vídeo

HTTP

Socket

XML

Internacionalização

Interface com o Usuário

Acelerômetro

Mapas

APIS ESPECÍFICAS

NewsKit

iOS

Touch ID

SafariDialog

SplitWindow (iPad)

Android

ActionBar

Intent

Services

BroadcastReceiver

ActivityToolbar, TabbedBar

ELEMENTOS DE UI NATIVOS

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

HYPERLOOP – MOTIVAÇÃO• Ter acesso a novidades nas API's nativas sem precisar aguardar novas

versões do Titanium

• Utilizar API’s de terceiros que não sejam JavaScript sem precisar de módulos nativos (e.g. periféricos)

• Ter acesso a recursos não disponibilizados pela API do Titanium (e.g. Foreground Services do Android)

• Poder de escrever módulos nativos sem conhecer as linguagens nativas (basta conhecer a API)

HYPERLOOP – VANTAGENS• Acesso a 100% da API nativa de cada plataforma

• Possibilidade de estender classes escritas em código nativo (Obj-C/Swift/Java) usando JavaScript

• Acesso a NSBundle via require do JavaScript (e.g. XIB)

• Acesso a bibliotecas nativas de terceiros (.jar, .dylib, .a)

• Possibilidade de escrever partes do código em linguagem nativa

Exemplos em http://github.com/appcelerator/hyperloop-examples

MILHARES DE WIDGETS, MÓDULOS E BIBLIOTECAS DISPONIBILIZADOS PELA COMUNIDADE

gitt.io

alloylove.com

marketplace.appcelerator.com

loopmodules.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 à 95%

• UI verdadeiramente nativa (não web-based)

• Acesso a 100% da API nativa com módulos e/ou Hyperloop

DESVANTAGENS

• Tamanho maior da app no Android (~4mb)

• Builds completos mais lentos que os feitos apenas com ferramentas nativas (minimizado com LiveView)

• Uma camada extra de bugs

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

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

TESTES AUTOMATIZADOS

https://www.youtube.com/watch?v=SJVe56mT8KM

CASES DA MQBC

CAIXA SEGURADORA

Google Play

App Store

AXWAY - ROAD TO DIGITAL

Google Play

App Store

GLOBO - RADIOBEAT

Google Play

App Store

SENAC - MINIDICIONÁRIO DE ENOLOGIA EM 6 IDIOMAS

Google Play

App Store

APPNEWS DELIVERY

Google Play

App Store

CREA-RJ – FISCAL

CASES GLOBAIS

POR ONDE COMEÇAR?

Plataforma Appcelerator: http://appcelerator.com

Titanium SDK + CLI + Atom (OSS) https://github.com/m1ga/titanium_with_atom

Comunidades: tislack.org

facebook.com/groups/timobilebr

PERGUNTAS?

@DirleiDionisio | dirlei@mqbc.com.brvsantana@mqbc.com.br