Appcelerator Titanium – B2W Digital

Download Appcelerator Titanium – B2W Digital

Post on 13-Apr-2017

107 views

Category:

Mobile

1 download

Embed Size (px)

TRANSCRIPT

  • Dirlei Dionsio & Valmir Santana | mqbc.com.br

    Desenvolvimento Multiplataforma NATIVO

    com Appcelerator

    http://mqbc.com.br

  • HISTRIA DE JOO:

    JOO FUNDADOR DE UMA STARTUP EM BUSCA DE

    INVESTIMENTO.

  • ELE RECEBE UM CONVITE INUSITADO:

  • APRESENTAR SEU PRODUTO E MODELO DE NEGCIOS PARA 2

    GRUPOS DE INVESTIDORES:

    UM QUE S FALA JAPONS E OUTRO QUE S FALA MANDARIM.

  • JOO NO FALA NENHUM DESSES IDIOMAS.

    MAS ELE TEM UMA AMIGA QUE FALA FLUENTEMENTE JAPONS

    E MANDARIM.

  • JOO DEVE

    A. Recusar a oportunidade de conversar com os investidores

    B. Comear a aprender japons e mandarim e depois procurar os investidores

    C. Usar sua amiga como intrprete

  • JOO DEVE

    A. Recusar a oportunidade de conversar com os investidores

    B. Comear a aprender japons e mandarim e depois procurar os investidores

    C. Usar sua amiga como intrprete

  • FERRAMENTAS MULTIPLATAFORMA SO COMO INTRPRETES

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

    nativas.

  • MAS EU CONHEOOBJ-C, SWIFT E JAVA!

  • HISTRIA DE MARIA:

    MARIA PRODUTORA, ROTEIRISTA E DIRETORA DE

    CINEMA.

  • ELA QUER PRODUZIR UM FILME E LAN-LO EM 3 IDIOMAS: INGLS,

    PORTUGUS 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 vrios idiomas, mas normalmente no ir faz-lo porque

    prefere otimizar o uso dos seus recursos.

  • H 3 ABORDAGENS DE DESENVOLVIMENTO MULTIPLATAFORMA

    Mobile Web Hbrida Nativa

  • MOBILE WEBConsiste em criar sites otimizados para browsers de dispositivos

    mveis (web apps).

    Usando os recursos do HTML5, podem funcionar total ou parcialmente offline.

    Prs:

    - Suporte a inmeras plataformas

    - Updates instantneos.

    Contra:

    - Acesso fraco ou inexistente ao hardware dos

    dispositivos.

    - No pode ser publicada nas lojas oficiais

  • ABORDAGEM HBRIDAWeb Apps embutidas numa app nativa. So fortemente apoiadas

    no elemento WebView de cada plataforma.

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

    UI e Regras de negcio(HTML/CSS, JavaScript)

    API do framework(JavaScript)

    WebView Nativa

    Window Nativa

  • ABORDAGEM HBRIDAPrs Contras

    Suporte a um bom nmero de plataformas

    Familiar para desenvolvedores web

    UX prejudicada; elementos de UI, transies e animaes so simulaes do equivalente nativo (no melhor caso)

    Sujeitas s diferenas nas engines de renderizao HTML/CSS

  • ABORDAGEM HBRIDAFacebook deixou de usar a

    abordagem hbrida em 2012.

    'Quando se trata de plataformas como iOS, as pessoas esperam uma

    experincia gil e confivel e nossa app estava aqum disso.'

    'O desenvolvimento nativo nos d maiores oportunidades de manter a app mais rpida, estvel 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

    https://www.facebook.com/notes/facebook-engineering/under-the-hood-rebuilding-facebook-for-ios/10151036091753920

  • ABORDAGEM HBRIDALinkedIn deixou de usar a

    abordagem hbrida em 2013.

    'Mudamos para o nativo para obter algumas das animaes, os "spinners" e o

    jeito como eles funcionam, aquela suavidade; ns conclumos que

    precisvamos 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/

    http://venturebeat.com/2013/04/17/linkedin-mobile-web-breakup/

  • ABORDAGEMMULTIPLATAFORMA

    NATIVA

  • ABORDAGEMMULTIPLATAFORMA NATIVA

    Cdigo da aplicao

    "Tradutor"

    Cdigo nativo iOS(Objective-C/Swift)

    Cdigo nativo Android(Java)

    xCode Android Development Tools

    App iOS App Android

    Cdigo nativo WP(C#)

    Visual Studio

    App WP

  • GOOGLE INBOX

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

    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

    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

    Cdigo 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

    Cdigo Objective-C compilado

    Arquivo .IPA (iOS)

    Bytecode Java

    Cdigo JavaScript

    otimizado e minificado

    Imagens, strings, arquivos de configurao

    etc.

    Arquivo .APK (Android)

    V8 JavaScript Engine

    Imagens, strings, arquivos de configurao

    etc.

    Cdigo JavaScript

    otimizado e minificado

  • A API MUTIPLATAFORMA

    Calendrio

    Contatos

    Database

    Facebook

    Filesystem

    Geolocalizao

    Gestos

    udio

    Vdeo

    HTTP

    Socket

    XML

    Internacionalizao

    Interface com o Usurio

    Acelermetro

    Mapas

  • APIS ESPECFICAS

    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 MOTIVAO Ter acesso a novidades nas API's nativas sem precisar aguardar novas

    verses do Titanium

    Utilizar APIs de terceiros que no sejam JavaScript sem precisar de mdulos nativos (e.g. perifricos)

    Ter acesso a recursos no disponibilizados pela API do Titanium (e.g. Foreground Services do Android)

    Poder de escrever mdulos 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 cdigo 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 cdigo em linguagem nativa

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

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

  • MILHARES DE WIDGETS, MDULOS E BIBLIOTECAS DISPONIBILIZADOS PELA COMUNIDADE

    gitt.io

    alloylove.com

    marketplace.appcelerator.com

    loopmodules.com

    http://gitt.iohttp://alloylove.comhttps://marketplace.appcelerator.comhttp://loopmodules.com

  • RESUMO DAS VANTAGENS

    Desenvolvimento multiplataforma em uma linguagem popular, fcil de aprender e manter - JavaScript

    Utilizao do padro MVC, facilitando a organizao e manuteno

    Reaproveitamento de cdigo de 50 95%

    UI verdadeiramente nativa (no web-based)

    Acesso a 100% da API nativa com mdulos 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 fcil e rpido 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

    Nmero de ocorrncias

    Usurios afetados

    Dados do ambiente

    Integrao ao Jira

  • TESTES AUTOMATIZADOS

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

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

  • CASES DA MQBC

  • CAIXA SEGURADORA

    Google Play

    App Store

    https://play.google.com/store/apps/details?id=br.com.caixaseguradorasaude.caixaseguradorahttps://itunes.apple.com/br/app/caixa-seguradora-saude-e-odonto/id1067958089?mt=8

  • AXWAY - ROAD TO DIGITAL

    Google Play

    App Store

    https://play.google.com/store/apps/details?id=net.mqbc.axway.rtd16https://itunes.apple.com/us/app/axway-road-to-digital/id1113353062

  • GLOBO - RADIOBEAT

    Google Play

    App Store

    https://play.google.com/store/apps/details?id=com.aorta.radiobeathttps://itunes.apple.com/br/app/radiobeat/id598225415?mt=8

  • SENAC - MINIDICIONRIO DE ENOLOGIA EM 6 IDIOMAS

    Google Play

    App Store

    https://play.google.com/store/apps/details?id=br.senac.rj.minidicenologiahttps://itunes.apple.com/br/app/minidicionario-de-enologia/id1028917554

  • APPNEWS DELIVERY

    Google Play

    App Store

    https://play.google.com/store/apps/details?id=com.appnewsdelivery.apphttps://itunes.apple.com/us/app/appnews-delivery/id1038953191

  • CREA-RJ FISCAL

  • CASES GLOBAIS

  • POR ONDE COMEAR?

    Plataforma Appcelerator: http://appcelerator.com

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

    Comunidades: tislack.org

    facebook.com/groups/timobilebr

    http://appcelerator.comhttps://github.com/m1ga/titanium_with_atomhttp://tislack.orghttps://www.facebook.com/groups/timobilebr

  • PERGUNTAS?

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

    https://twitter.com/dirleidionisiomailto:dirlei@mqbc.com.brmailto:vsantana@mqbc.com.br?subject=

Recommended

View more >