MobilidadeDesenvolvimento de aplicações móveis

Sobre o palestrante● Graduado em Ciência da Computação;

● Arquiteto/desenvolvedor com mais de 10 anos de experiência com desenvolvimento de aplicações de missão crítica;

● Entusiasta ágil;

● Especialista na plataforma Java/JEE;

● Certificados○ SCEA - Sun Certified Enterprise Architect for the Java2 EE

○ SCBCD – Sun Certified Business Component Developer

○ SCWCD - Sun Certified Web Component Developer for the Java 2EE Platform

○ SCPJ2 - Sun Certified Programmer for Java[tm] 2 Platform 1.2

○ ISEB ISTQB – Foundation Certificate in Software Testing

● Atualmente trabalha como consultor freelancer;

Agenda● Conceito de mobilidade;

● Mercado;

● Por que aderir?

● Desenvolvimento móvel:

○ Nativo;

○ Web mobile;

○ Web mobile versus Nativo;

○ Híbrido;

○ Multiplataforma;

● Plataformas dominantes;

● Qual abordagem?

● Treinamento;

Agenda

Conceito de mobilidade● O que é mobilidade?

○ Mobilidade ou sistemas computacionais móveis são sistemas que podem facilmente ser movidos fisicamente ou cujas capacidades podem ser executadas enquanto eles estão sendo movidos;

● Em outras palavras:○ Informação disponível em qualquer

lugar e a qualquer momento;

Mercado● Vendas de smartphones em 2011

superaram a venda de PCs;● Aumento de 45% em relação a 2010;

Mercado● Em 2013 os smartphones irão superar os

PCs em acesso à internet;

Mercado● Em 2016 serão vendidos 1.6 bilhões de

smartphones;

Mercado● Há mais de 3 bilhões de dispositivos móveis;● 4x o número de PCs;

Mercado● Estamos nos tornando uma sociedade pós-PC:

○ Máquinas e serviços que interagem de forma mais natural com os usuários:■ Smartphone;

■ Tablet;

■ Qualquer dispositivo móvel conectado a Internet;

Por que aderir?● Mercado de aplicações e

dispositivos móveis estão em crescimento acelerado;

● Novos usuários em

potencial; ● Para muitas pessoas o

smartphone é o principal dispositivo;

Por que aderir?● Maior visibilidade e novas

oportunidades para as organizações;

● Segundo GigaOm Pro Survey,

em 2011 38% dos negócios foram feitos com smartphones, em comparação a 26% do ano anterior;

Por que aderir?● A Internet levou informação para dentro de

nossas casas e escritórios, agora é possível acessá-la em qualquer lugar;

● Hoje é possível desenvolver praticamente

qualquer tipo de aplicação:○ E-commerce;○ ERP;○ Aplicações dedicadas;

Desenvolvimento móvel● Novo paradigma com oportunidades e

desafios específicos, onde as melhores práticas do mundo desktop simplesmente não se aplicam;

Desenvolvimento móvel● Criação de um novo ecossistema em

constante mudança;

● Sem padrões estabelecidos;

● Mercado em constante experimentação;

● Usuários mobile têm padrões de uso e métodos de navegação únicos;

Desenvolvimento móvel● Características dos dispositivos móveis:

○ Múltiplas versões da aplicação:■ Crescente variedade de plataformas (BlackBerry, iPhone,

Windows Mobile, Android etc) ;

○ Diferentes modelos de hardware:■ Android é a plataforma mais fragmentada;

Desenvolvimento móvel● Tamanho e resolução da tela:

○ A aplicação deve estar preparada para adaptar-se automaticamente ou devem ser feitas versões diferentes para cada tamanho específico;

● Memória e processamento:○ A aplicação deve preocupar-se com a capacidade de memória e

processamento do dispositivo que irá ser executada;

● Conexão de rede imprevisível, cobertura limitada e baixa velocidade;

Desenvolvimento móvel● Conectividade:

○ Ao desenvolver uma aplicação, deve-se saber de que formas ela vai se comunicar com meio externo para a troca de informações;

● Aplicação tem que se preocupar com consumo de

bateria;

Desenvolvimento móvel● Antes de migrar ou criar aplicações móveis

deve-se levar em conta:

○ Layout:■ Disponibilizar apenas as funcionalidades mais importantes para o

usuário. Nesse caso, menos é mais;

■ Utilizar navegação vertical e transição entre páginas, ao invés de usar navegação esquerda/direita;

■ Evitar links multinível;

■ Prover atalhos para a home, seção anterior e posterior no fim de cada página, para que o usuário não precise rolar a página até o início;

Desenvolvimento móvel○ Definir público alvo; ○ Conteúdo:

■ Garantir que a informação seja fácil de ler e navegar;

○ Evitar animações complexas para não consumir bateria desnecessariamente;

Desenvolvimento móvel● Imagem:

○ Usar imagens apenas quando realmente for necessário;○ Usar os formatos jpeg, png e gif;○ Não permitir zooming;○ Permitir desabilitar imagens;

● Tamanho da página:

○ É essencial manter as páginas simples e pequenas;○ Evitar que o tamanho das páginas ultrapasse 25 Kb;

Desenvolvimento móvel● Exemplos:

Desenvolvimento móvel● Erros comuns:

○ Achar que não há necessidade de criar uma versão móvel da aplicação só porque a aplicação web abre no browser do smartphone;

○ Exportar todas as funcionalidades da versão

desktop para a mobile; ○ Utilização frequente do pinch to zoom;

Desenvolvimento móvel● Erros comuns:

○ Páginas web convencionais não foram projetadas para serem acessadas por dispositivos móveis:

■ Tamanho pré-fixado;

■ Animações javascript complexas e efeitos mouse-over;

■ Uso de tags específicas;

■ Baixa usabilidade e performance;

Desenvolvimento móvel● Erros comuns:

○ Desenvolvimento voltado para um tipo de dispositivo ao invés do tamanho da tela e resolução;

○ Utilizar os mesmos serviços "API" da versão

desktop para a versão móvel:■ Tráfego desnecessário de dados;

○ Utilizar a mesma abordagem para plataformas diferentes;

Desenvolvimento móvel● O site da TAM não funciona corretamente no

Android, iPhone e iPad;

Desenvolvimento móvel● Diferenças entre Web Mobile e Web Desktop;

Desenvolvimento móvel● O desenvolvimento de aplicações móveis é

classificado em:

○ Nativo;

○ Web mobile;

○ Híbrido; ○ Multiplataforma;

Nativo● Refere-se a aplicações desenvolvidas

usando ling. de programação específica de uma plataforma como iOS ou Android;

● Atualmente é a solução preferida pelos

programadores;

Nativo● São rápidas, confiáveis e podem acessar

recursos de hardware (câmera, acelerômetro, bússola, etc);

● Restrita a plataforma escolhida;

Nativo● Vantagens:

○ Performance;○ Usabilidade;○ Interfaces rica "Rich GUI";○ Armazenamento local;○ Offline;○ Acesso completo aos hardwares e APIs do

dispositivo (câmera, accelerometer, compass, etc); ○ Monetização;

Nativo● Desvantagens:

○ Alto custo de desenvolvimento e manutenção;○ Atualização não é transparente ao usuário;○ Processo de aprovação;○ Complexidade:

■ Cada plataforma tem características específicas;○ Escassez de profissionais capacitados;

Cons:

● Typically more expensive to build, even for a single platform. Build costs increase significantly for each new platform.

● Because the codebase needs to be re-worked for each OS, the time to build an app for multiple devices can also be quite involved.

Your app must be accessed through the device’s app store, which has two important considerations: your app must go through an approval process, which can be lengthy and arbitrary, and if your app generates revenue you must share a percentage with the store (30% for Apple’s App Store, including in-app purchases). App updates must go through a new approval process each time.

Nativo● Arquitetura;

Nativo● Comparativo entre plataformas;

Web mobile● Aplicações que utilizam padrões abertos e

teoricamente podem ser executadas em qualquer dispositivo que possua browser;

● Possibilita uso de conhecimentos prévios das

tecnologias web (html, xhtml, js e css) com novas técnicas para fazer a aplicação funcionar em dispositivos móveis;

● Mesmo código para todos os dispositivos;

Web mobile● Vantagens:

○ Portável;○ Uso de tecnologias (HTML/CSS/Javascript)

conhecidas;○ Problemas de performance são cada vez menos

importante devido evolução dos browsers móveis;○ Não há processo de aprovação;○ Atualização transparente para o usuário;

Web mobile● Desvantagens:

○ Performance inferior às aplicações nativas;○ Sem acesso a componentes de hardware do

dispositivo (câmera, acelerômetro, bússola, etc);○ Baixa usabilidade;○ Especificação HTML5 não finalizada;○ Dificuldade em adaptar para diferentes dispositivos,

resolução de telas e diversidade de browsers;

Web mobile● Responsive Web

Design é um conceito onde o objetivo é apresentar informação de forma acessível e confortável para diversos meios de acesso;

● Layout agnostic;

Web mobile● Com o crescimento da variedade de

dispositivos, onde os websites são visualizados em laptops, tablets, netbooks, smartphones e etc, torna-se praticamente impossível criar múltiplas versões do mesmo web site;

● O web site deve se adaptar para qualquer

tipo, tamanho e resolução do dispositivo;

Web mobile● Detecta as características do aparelho como

resolução e tamanho através de "media queries", ao invés do tipo;

● Uso de tecnologias conhecidas como js e

css para montar o layout do web site; ● Performance pode ser inferior em relação a

abordagem de diferentes web site para cada dispositivo;

Web mobile● Exemplos:

Web mobileExemplos:

Web mobile● Um design responsivo incluí:

○ Adaptar o layout da página de acordo com a resolução em que está sendo visualizada;

○ Redimensionar as imagens automaticamente para

que caibam na tela e para que não sobrecarreguem a transferência de dados;

Web mobile○ Ocultar elementos desnecessários nos dispositivos; ○ Adaptar tamanho de botões e links para interfaces

touch onde o ponteiro do mouse é substituído pelo dedo do usuário;

○ Utilizar de forma inteligente recursos mobile como

geolocalização e mudança na orientação do aparelho (horizontal ou vertical);

Web mobileExemplos:

Web mobileExemplos:

Web mobile● Atualmente há um crescente interesse no

uso da tríade (HTML5, JS e CSS3) para o desenvolvimento de aplicações web mobile;

● HTML5 permite criar aplicações que

ofereçam experiência próxima a das aplicações nativas:○ Suporte a multitouch, GPS;○ Armazenamento local;

Web mobile● Frameworks específicos "JQuery Mobile"

HTML5 para o desenvolvimento móvel; ● Empresas como Microsoft, Facebook e

Financial Times estão investindo em HTML5;

● Microsoft anunciou que será possível

desenvolver aplicação para o Windows 8 usando apenas HTML5 e JavaScript;

Web mobile● Tendências para 2012 segundo relatório do

Appcelerator/IDC:○ Crescente interesse por HTML5;

○ 79% dos desenvolvedores dizem que planejam usar ou integrar HTML5 em suas aplicações mobile;

○ O principal problema do HTML5 é que o padrão ainda não foi finalizado;

Web mobile● Apesar das aplicações web mobile ainda

não conseguirem obter a mesma eficácia e eficiência das aplicações nativas, é apenas questão de tempo para aplicações web mobile superarem as aplicações nativas;

● A história está se repetindo:

○ Alguém se lembra dos anos 90´s?

Web mobile versus nativoThe Issues Native Apps Web AppsInternet access Not required Required, except for rare apps with offline

capability

Installation/updates Must be deployed or downloaded

Hit refresh

User interface Native apps are responsive and functional

Browsers can be clunky, but new advancements in JavaScript like jQuery Mobile are catching up fast

Device compatibility Platform-dependent, hardware-dependent

Platform-agnostic, content can be reformatted with CSS to suit any device

Animation/Graphics Fast and responsive Web apps are getting closer, but will probably always lag

Streaming media Few problems with audio and video. Flash works, but only if the device supports it

Flash works where supported. Browser-based audio and video are getting there, but still beset by compatibility headaches. Give it a year or two

Web mobile versus nativoThe Issues Native Apps Web AppsAccess to hardware sensors

Yes, all of them: camera, gyroscope, microphone, compass, accelerometer, GPS

Access through the browser is limited, though geolocation is common

Development Specific tools required for some platforms (like Apple’s). You have to build a new app for each target platform

Write once, publish once, view it anywhere. Multiple tools and libraries to choose from

Can I sell it? Charge whatever you want. Most app distributors take a slice, up to 30%

Advertising is tolerated, subscriptions and paywalls less so. No distribution costs beyond server fees

Distribution Most app stores require approval. And you gotta wait

No such hassle

Outside access to your content

No, the reader must download your app

Yep, just click a link

Advertising Control over design (though limited in iAds) and rate

More choices for design, plus access to web analytics. Rates vary widely

Híbrido● Aplicação nativa que encapsula tecnologias

web; ● Transparente para o usuário; ● Regra de negócio fica no servidor; ● Interface do usuário nativa da plataforma:

○ Assegura acesso a componentes de hardware;

Híbrido● Arquitetura;

Híbrido● Exemplos;

Desenvolvimento móvel● Comparativo entre abordagens;

Desenvolvimento móvel● Trade-off;

Multiplataforma● Frameworks projetados para criar

aplicações multiplataforma sem a necessidade de reescrever a aplicação para cada plataforma;

● Foco no negócio da aplicação; ● Frameworks populares:

○ Titanium;○ PhoneGAP;

Multiplataforma● Vantagens

○ Interface gráfica nativa da plataforma; ○ Acesso aos recursos de hardware do dispositivo; ○ Código fonte único; ○ Menor time to market;

Multiplataforma● Desvantagens:

○ Pode ser necessário ter que aprender ling. ou tecnologia proprietária;

○ Dependência do framework; ○ Custo; ○ Não adequado para desenvolvimento de aplicações

complexas;

Multiplataforma● Titanium:

○ Tecnologias Web(HTML, JS, CSS e Python);○ Cria aplicação web e/ou nativa;○ Acesso completo aos hardwares e APIs do

dispositivo;○ Suporte para iPhone,iPad e Android;

● PhoneGap:○ Tecnologias Web(HTML e JS);○ Acesso completo aos hardwares e APIs do

dispositivo; ○ Suporte para iPhone, iPad e Android, Blackberry e

Symbian;

Multiplataforma

Plataformas dominantes● De acordo com o NDP as plataformas iOS e

Android representaram 90% do mercado móvel em 2011;

Plataformas dominantes● Android 47%● iOS 43%

iOS● Linguagem: Objective-C; ● Curva de aprendizado maior na ling.

Objective-C por ser pouca difundida; ● Muitas funcionalidades na API, mas

aplicações ficam presas numa "sandbox"; ● Exclusivo para iPhone, iPod e iPad;

iOS● IDE: Xcode (Apenas Mac OS); ● Mensalidade anual de $99,00; ● Interface do usuário e hardware

padronizados para todos os dispositivos;

● Aprovação de uma aplicação na App Store dura aproximadamente 15 dias;

iOS● Arquitetura;

● Plataforma mais popular; ● Faz parte da Open Handset Alliance:

○ Samsung;○ Motorola;○ LG;

● Código aberto; ● Linguagem: Java;

Android

Android● IDE: Eclipse; ● Aplicação é executada dentro da máquina

virtual "Dalvik"; ● Fragmentada:

○ Diversos tipos de aparelhos com hardwares, memórias e versões do Android diferentes;

● Taxa de licenciamento única de $25,00;

Android● Muitas funcionalidades na API; ● Pequena curva de aprendizado para quem

conhece Java; ● Processo de aprovação simples e rápido; ● Houve casos de aplicações infectadas por

Malware;

Android● Arquitetura;

Qual abordagem?● Não existe solução única e padronizada

para todos os tipos de aplicações; ● Cada solução precisa de uma análise

detalhada de todos os requisitos que devem ser implementados na aplicação;

● Foco no curto prazo, pois os conceitos

estão em constante mudança;

Qual abordagem?● Geralmente aplicações Web mobile são mais

baratas para desenvolver e distribuir, mas não oferecem a mesma experiência que as aplicações nativas;

● Se acesso a recursos de hardware for

requisito mandatório, acredito que a abordagem "híbrida", "multiplataforma" ou "nativa" seja mais adequada;

Treinamento

Referências● http://www.gartner.com;● http://www.businessinsider.com/category/intelligence;● http://www.morganstanley.com/;● http://econsultancy.com/us/blog/7832-the-fight-gets-technical-mobile-apps-

vs-mobile-sites;● http://www.yahoo.com;● http://pro.gigaom.com/;● http://www.appcelerator.com/company/survey-results/mobile-developer-

report-q-2012/;● http://marketshare.hitslink.com;● http://www.jumptap.com/blog/android-and-iphone-now-hog-91-of-mobile-

os-market-share/;● http://www.zdnetasia.com/analysis-of-mobile-development-approaches-

62300902.htm;● http://phonegap.com/2011/10/13/phonegap-build-pricing-plans-update/;● http://www.appcelerator.com/products/titanium-mobile-application-

development/;● http://www.boxuk.com/blog/mobile-the-business-case;