ALTIUM Tecmo Cn Coe MO an Nears mutate Aplicativos Web Pro Android MeO NTO COMAUITY COLL Usando HTMLS, CSS3 & JavaScript PU ESCDamon Oehlman e Sébastien Blanc Aplicativos Web Pro Android Desenvolvimento Pro Android Usando HTMLS, CSS3 & JavaScript Tradugao: Kleber Rodrigo de Carvalho EDITORA CIENCIA MODERNADo original: Pro Android Web Apps: Develop for Android Using HTMLS, CSS3 & JavaScript Original English language edition published by Apress Inc., Copyright © 2011 by Apress, Inc.. Portuguese-language edition for Brazil Copyright © 2012 by Editora Cigncia Moderna, All rights reserved. Nenhuma parte deste livro poderd ser reproduzida, transmitida e gravada, por qualquer meio eletrénico, mecdnico, por fotocépia e outros, sem a prévia autorizagao, por escrito, da Editora. Editor: Paulo André P. Marques Produtora Editorial: Aline Vieira Marques Diagramagao: Daniel Jara Tradugao: Kleber Rodrigo de Carvalho Copidesque: Eveline Vieira Machado Capa: Carlos Candal (baseada no original) Assistente Editorial: Laura Santos Souza Virias Mareas Registradas aparecem no decorrer deste livro. Mais do que simplesmente listar esses nomes ¢ informar quem possui seus direitos de exploragio, ou ainda imprimir os logotipos das mesmas, 0 editor declara estar utilizando tais nomes apenas para fins editoriais, em beneficio exclusivo do dono da Marca Registrada, sem intengao de infringir as regras de sua utilizagio. Qualquer semelhanga em nomes préprios e acontecimentos seré mera coincidéncia, FICHA CATALOGRAFICA OEHLMAN, Damon; BLANC, Sébastien. Aplicativos Web Pro Android - Desenvolvimento Pro Android Usando HIMLS, CSS3 & JavaScript Rio de Janeiro: Editora Ciéncia Moderna Ltda., 2012. 1. Informatica; 2. Linguagem de programagao. |—Titulo ISBN: 978-85-399-0295-5 CDD 001.642 005.1330 Editora Ciéncia Moderna Ltda. R. Alice Figueiredo, 46 — Riachuelo Rio de Janeiro, RJ— Brasil CEP: 20.950-150 Tel: (21) 2201-6662/ Fax: (21) 2201-6896 E-wait: Lcu@tow.cow.on w..oM.cOm.AR oait2Sobre os Autores Damon Oehlman é um experiente desenvolvedor de sof- twares e gerente técnico. Tendo desenvolvido para uma 7 variedade de plataformas, Damon tem uma perspectiva inica que alimenta a sua paixdo pelo desenvolvimento de aplicativos Web: o slogan “escreva uma vez, rode em qualquer lugar’. Vendo a crescente tendéncia rumo ao desenvolvimento para dispositivos méveis, Damon dei- xou o ambiente estével do mundo corporativo e tornou- -se cofundador da empresa Sidelab (www:sidelab.com) para desenvolvimento de dispositivos méveis. Ele também mantém um blog técnico, Distractable (www.distractable.net) e criou o Tile5, uma biblioteca Ja- vaScript de mapeamento mével para o HTMLS (wwwctile5.org). Sébastien Blanc é engenheiro de software sénior JEE. Ele trabalha para a E-id (www.e-id.nl), uma empresa holan- desa de TI. Além disso, passa muito tempo utilizando a sua experiéncia com aplicativos Web para dispositivos miéveis. Ble é palestrante regular em conferéncias e acre- dita realmente no sucesso dos aplicativos méveis basea- dos na Web. Como Damon, quando nio est4 progra- mando, Seb adora passar 0 tempo com a familia.Sobre o Revisor Técnico Kunal Mittal atua como diretor executivo de ‘Tecnologia da Sony Pictures Entertainment, onde ele é responsivel pelo SOA, Gerenciamento de Identidade e programas para Gerenciamentos de Contetido. Ele fornece um ser vico centralizado de Engenharia para diferentes linhas de negécios e lidera esforgos para introduzir novas pla- taformas e tecnologias para o ambiente TI da Sony Pic- tures Enterprise. Kunal é um empreendedor que auxilia novos negécios a definirem suas estratégias de tecnologias, produto roteiro e planos de desenvolvimento. Com suas fortes relagdes associadas a diversas parcerias de desenvolvimento em todo o mundo, ele pode auxiliar nos projetos iniciais e construir parcerias de desenvolvimento até mesmo para grandes companhias. Ele geralmente atua na funcao de conselheiro ou consultor da CTO, e trabalha ativamente nas funcdes de Gerenciamento de Projetos e Arquitetura Técnica. £ autor e editor de va- rios livros e artigos sobre J2EE, computacao com cloud e tecnologias méveis. Possui mestrado em Engenharia de Computacao e é piloto privado para a ava- liagdo de instrumentosAgradecimentos Em primeiro lugar, meus agradecimentos vao para minha adoravel esposa e meus filhos. 2010 foi um ano de grandes projetos, repleto de muitas oportu- nidades e vocés nao apenas me suportaram com todo o trabalho que eu tinha de fazer, mas também me lembraram que passar o tempo com a familia era também importante. Por isso, eu amo muito todos vocés. Em segundo lugar, quero agradecer a equipe da Apress tanto pela oportu- nidade de escrever este livro como pelo apoio e pela recomendagao, bem como a viagem de escrevé-lo, Certamente, eu aprendi muito em todo 0 processo ¢ agradeco a paciéncia e o profissionalismo de voces desde o inicio até o final. Damon Para Mathilde, meu filhos, Damon, Douglas, Mary, Kunal, e Steve. SébastienIntrodugao A medida que entramos em um mundo onde os dispositivos méveis es- téo tornando-se o principal mecanismo para a pessoas se conectarem com a Internet, no deveriamos surpreender-nos que a habilidade em desenvolver aplicativos para dispositives méveis esta tornando-se uma busca por funcio: nalidades. Nés também temos uma competicio muito forte por representan- tes dentro deste espaco, resultando em um mercado repleto de variedades de dispositivos. ‘Vemos representantes promovendo o desenvolvimento de ferramentas mercados para seus proprios dispositivos, tentando criar ecossistemas de sof- tware em torno de seus produtos. Na maior parte, a estratégia é trabalhar tam- bém (para alguns fornecedores mais do que para outros). Os desenvolvedores nao estio usando essas ferramentas e criando aplicativos “nativos” para um dispositivo particular, mas reconstruindo grandes porcées de seus aplicativos buscando como meta cada um dos diferentes dispositivos. Para algumas companhias que constroem aplicativos méveis, esta é uma metodologia aceitavel. E, contudo, uma das menos sustentaveis a longo prazo. Considere que cada companhia com um produto Web era de se esperar que fornecesse tanto um aplicativo Web para desktop como para clientes méveis para multiplos dispositivos nos proximos anos (ou meses). Entao, considere o miimero de desenvolvedores de softwares - pessoas como vocé e eu, que exis- tem no mundo. Serd que nés temos os recursos requeridos para atender esta demanda? Eu nao arriscaria. Deve haver uma maneira melhor. E existe. Construir aplicativos Web para dispositivos méveis éa maneira melhor. Ea abordagem para os desenvolyimentos de aplicativos para dispositivos méveis que, quando feito corretamente, fara com que vocé reescreva usando menos codigo para atingir a diversidade de dispositivos que existem no mercado. Este livro € focado para escrever aplicativos Web para dispositivos méveis para 0 Android, mas, na realidade, muitos dos conceitos podem ser facilmente leva- dos para outros dispositivos méveis (que ¢ 0 que interessa). O que é um Aplicativo Web para Dispositivos Méveis? Um aplicativo Web para dispositivos méveis ¢ um aplicativo construido com as tecnologias Web centradas no cliente em HTML, CSS e JavaScript, e €X | Aplicativos Web Pro Android especificamente projetado para os dispositivos méveis. Auxiliar os aplicativos Web para dispositivos méveis a receber um pouco de atencao ¢ a tendéncia para 0 HTMLS e a C$S3—as tiltimas “versdes” das duas tecnologias. Estare- ‘mos explorando tanto o HTMLS como a CSS3 em detalhes no livro, junto com um pouco de JavaScript. JavaScript é a linguagem que muitos desenvolvedores adoram odiar. Al guns nem mesmo a consideram uma linguagem de programagio. Todavia, o JavaScript esté aqui para o grande impulso e provavelmente sera uma das mais exigidas caixas de experiéncias durante os préximos cinco anos. Quais Tecnologias Sao Usadas Neste Livro? Neste livro, utilizaremos muito (mas muito) o cédigo JavaScript. Existe ob- viamente um pouco de HTML e CSS aqui também, mas, na verdade, 0 JavaS- cript & a linguagem para o desenvolvimento de aplicativos Web para disposi- tivos méveis. Se voce nao trabalhou com o JavaScript no passado, nés nao vamos conse- guir informé-lo com a profundidade que gostariamos, mas recomendariamos adquirir alguns materiais de aprendizado porque este nao é um livro sobre os fandamentos do JavaScript. Nés também usamos muito uma excelente biblio- teca JavaScript de jQuery para tornar a vida, de modo geral, muito mais ficil durante 0 desenvolvimento. Se isso for algo novo para vocé, recomendamos adquirir o tutorial de jQuery ou dois outros tutoriais que estejam disponiveis. Se vocé tiver experiéncia com Prototype, MooTools, ou qualquer outro “con- corrente” do jQuery, entao ser4 capaz de adaptar o cédigo de exemplos do livro com relativa facilidade. Em termos de aplicativos Web para dispositivos méveis (e de outros aplica- tivos Web ricos em JavaScript), aprender a estruturar os seus aplicativos para a legibilidade e a manutengao é importante. Esta é uma das razoes para prefe- rirmos trabalhar com projetos de aplicativos de pequenas dimensées no livro, ao invés de pequenos snippets de cédigo que mostram uma funcionalidade em particular, Isto permitird que vocé se familiarize com os diferentes aspectos técnicos do desenvolvimento de aplicativos Web para os dispositivos méveis também entenda como poderia efetivamente colocar junto um aplicativo Web mével do mundo real. Se vocé ja est familiarizado com o desenvolvimento de aplicativos Web, este livro deverd fazer a transicéo para o desenvolvimento simples de apli- cativos Web para dispositivos méveis. Se, todavia, vocé esté vindo de umIntrodugio | @ [XI aplicative mével e esta procurando explorar a metodologia dos aplicativos Web, possuir todos esses materiais adicionais faré uma grande diferenga. O Que Ha Neste Livro? Este livro foi estruturado em torno de dois exemplos de aplicativos que en- sinard a vocé os varios aspectos do desenvolvimento de aplicativos Web para dispositivos méveis. Os Capitulos 2-6 tratario do primeiro miniaplicativo de uma simples “Lista de Tarefas” e os Capitulos 8-12 irao guid-lo através dos principios da construgao de um jogo com reconhecimento de localizagao. Dentro e em torno destes dois "pratos principais’, temos ainda trés Capi- tulos “aperitivos”. © Capitulo 1 esté focado em preparar ¢ rodar os conceitos basicos para escrever aplicativos Web para o Android. O Capitulo 7 daré uma rapida olhada em como trabalhar com a interatividade e o canvas do HTMLS. E finalmente, o Capitulo 13 examinara algumas coisas que poderiam estar acontecendo no mundo dos aplicativos para os dispositivos méveis.Suméario Capitulo 1 Dando Inicio Entendendo os Recursos da Plataforma Android . Conectividade do Dispositivo....... Toques Geolocalizacio . Sensores de Hardware Bancos de Dados e Armazenamento Locais... Suporte 4 Camera... . Sistema de Mensagens e Notificagées de Impulsos (Push) Navegador Web com WebKit Gerenciamento de Processo Resumo dos Recursos do SO Androii Preparando o Ambiente de Desenvolvimento Editores de ‘Textos e Diretérios de Trabalho Servidor Web. Mongoose no Windows Mongoose no Mac OS.. Mongoose no Linux.... Executando 0 Mongoose . Abordagens Alternativas... Emulador.... Criando um Dispositivo Virtual Android... Iniciando o Emulador Ola Mundo. Resumo..... Capitulo 2 Construindo um Formulario de Entrada HTML para Dispositivos Movei .23 HTML para Dispositivos Méveis. 123 Paginas Web Preparadas para Dispositivos Méveis sDXIV | © |Aplicativos Web Pro Android Apresentando a Tag meta viewport. Auto-ocultando a Barra de URL Adicionando Elementos de Formulério Adicionando um Pouco de Estilo...... Estilos de Formulario com um Splash da CSS3.. appearance (-webkit-appearance) ... border-radius (-webkit-border-radius) box-shadow (-webkit-box-shadow) ....0. gradiente fill style (-webkit-gradiente).. Melhorando a Aparéncia do Titulo da Pagina Codificando para Diferentes Tamanhos de Tela.. 40 Tratando as Mudangas de Orientagao do Dispositivo Al Adicionando um Formulirio de Validacio 47 Fornecendo Feedback com um Espaco de Tela Limitado. 48 Resumo. 55, Capitulo 3 APIs de Armazenamento do HTML5 57 Banco de Dados SQL para Web 67 Salvando Itens da Lista de Tarefas com um Banco de Dados no Cliente .69 Versées e Atualizagées do Banco de Dados ... 5 Resumo....... 77 Capitulo 4 Construindo um Aplicativo com Multiplas Paginas... Arquivo HTML Unico, Aplicativo com Multiplas Paginas... Criando um Gerenciador de Visualizacio .. Implementando Agées de Visualizagio Construindo a Tela Principal do Aplicativo 0... Alterando a Funcionalidade de ViewManager ... Requisitos de Armazenamento da Tela Inicial. Conectando a Tela Principal... Exercicio 4-1: Integrando o formuldrio de Adicéo como tela extra Criando a Tela Para Todas as Tarefas scene 105 106Sumério |@]XV Exercicio 4-2: acabando a tela ALL TASKS. 13 RESUMO......coossssrsesseresserssssersnseesansesssnsssnonnensonsssonsanssccassccssssecenssssssssssssssensossereee LLB Capitulo 5 Sincronizando com Cloud. Explorando as Opgées de Armazenamento Online... Requisitos de Armazenamentos Sincronizados Online... Evitando uma Arquitetura de Trés Camadas...... Autenticacao do Usuario . Uma Biblioteca de Sincronizagao JavaScript. Possiveis Solucdes de Sincronizacao Dando Inicio ao Mecanismo de Aplicativos do Google 122 Implantando o jsonengine localmente.. Escolhendo um Modo Adequado de Sincronizaao Enviando Seus Dados Offline para jsonengine... Atualizando a Interface do Usuario para a Sincronizagio Online Criando uma Interface para Desktop... Consultando uma Instancia para jsonengine. Implantando o Seu Aplicativo em Cloud. Resume... Capitulo 6 139 Competindo com Aplicativos Nativos... Adicionando Animagoes Leves a Layouts Parecidos Com os Nativos....139 Adicionando um Spinner de Carregamento Simple ....n1-0enervne 140 Adicionando um Contetido Rolavel.. 144 Enfeitando a Barra de Ag6es 146 ‘Tornando o Seu Aplicativo com Reconhecimento de Localizagao .....148 Especificagao da API de Geolocalizagio da W3C.. 149 Executando o seu Aplicativo Offline . 154 Arquivo Cache Manifest Offline 154 Explorando os Recursos Ocultos do Cache Offline. 157 Detectando o seu Status de Conexio... 158 Resumo. 160XVI | @ [Aplicativos Web Pro Android Capitulo 7 Explorando a Interatividade Introdugio a0 Canvas do HTML... Desenhando Interativamente com o Canva: Interatividade: O Caminho do Mouse Interatividade: O Caminho do Toque...» Implementando a Animago para 0 Canvas. Construindo uma Iteracao de Animacio . Construindo um Quadro de Animagio Um Exemplo Que Funciona.. Um Répido Panorama dos Caminhos de Canvas. . Desenhando Imagens: Relatando para o Dispositivo DPI 178 Um Conto dos Trés Androids ‘Técnicas Avangadas de Animasio... Criando Movimentos Realisticos em Animacées . Actescentando uma funcéo de EASING adicional a Prowebapps Transformagées de Canvas e Animagio ‘Transformagées e a Nossa Animagao do Carr ReSUMO rene Capitulo 8 Servigos Baseados em Localiza¢io e Mapeamento para Dispositivos Mévei: 201 Servigos Baseados em Localizagao..... seen 201 Redes Geossociais. . enn sone 203 Mapeamento em Dispositivos M&veis .. enn 204 Exibindo um Mapa com o aplicativo Mapas do Google 205 Tile5: Uma API Alternativa de Mapeamento do HTM) 207 Adicionando Marcadores a um Mapa do Google .. 21 Mostrando os Detalhes do Marcador... 213 ‘Uma UI de Mapeamento Otimizada para Dispositivos Méveis . 216 Um Simulador de UI para Mapeamento . 216 Codificando uma UI para o Mapeamento Padrao para Dispositivos Moveis 218 Implementando a Navegacdo da UI dentro do Padrao 224Sumério | @ | XVII Selecionando Marcadores com a Barra de Navegagao. 231 Configurando Marcadores e Mostrando [cones Customizados......-......231 Implementando a Selegio de Marcadores nao Assinalados.... 234 Aplicando a Classificagao para Assegurar a Navegacao do Marcador 238 son-240 Capitulo 9 Bridging Nativo com PhoneGap Introduzindo Bridging Frameworks... sesnreeeees 43 Quando Usar o PhoneGap. 244 Baixando o PhoneGap. . 245 Um Aplicativo de Exemplo com PhoneGap. soe DAS Construindo o Aplicativo de Exemplo... 1247 Pesquisando o Aplicativo de Exemplo .. 254 Captura de Dados do Accelerometer 254 A Camera e a Biblioteca de Fotos 256 Eventos de Notificaga0 ncn 1.260 Um Simples Aplicativo de Mapeamento PhoneGap 260 Modificando o Projeto de Exemplo PhoneGay 261 Colocando em Ordem: Renomeando as Classes... 263 ‘Transferindo o Cédigo Existente para um Aplicativo PhoneGap 267 Resumo.... 271 Capitulo 10 Integracao com APIs Sociai Conectando as APIs da Web 273 O Que é JSONP?...... 274 Lidando com as APIs Que Precisam do Suporte JSONP 281 Escrevendo um Proxy no Lado do Servidor. . 281 Linguagem de Consulta do Yaho« 282 Aplicativo Nativo PhoneGap... 283 Apresentando a API Geominer... 284 Recursos de Localizag4o no Moundz..... 1.286XVIII | @ [Aplicativos Web Pro Android Encontrando os Recursos Préximos com a API Geominer........ 289 Usando a Geolocalizagao para Rastrear a Sua Posicao. 293 Implementando um Login do Usuatio.. 297 Construindo a Tela de Boas-Vindas e de Login. 299 Twitter Anywhere e 0 Processo de Login. soo 302, Autenticacao Alternativa do Twitter via Geominer 307 RESUMOentennee 312 Capitulo 11 Frameworks UI para Dispositivos Méveis Comparados. Visao Geral dos Frameworks UI para Dispositivos Méveis Similaridades e Diferencas Entre os Frameworks. Frameworks Uls Baseados em Marcagoes Frameworks Uls Declarativos.. Encontrando 0 Seu Melhor Ajuste . Estabelecendo Comparacées com Framework Dando Inicio com 0 Jo. Moundz, Conhega 0 Jo... Framework: jQTouch ..... Dando Inicio com o jQTouch . Aplicando Alguns Retoques do jQTouch a Mounds... jQuery Mobile Dando Inicio com o jQuery Mobile Dispositivos Moundz e jQuery Mobile. Sencha ‘Touch . . Dando Inicio com o Sencha Touch Moundz e Sencha Touch... Resumo... 366 Capitulo 12 Aperfeicoando e Empacotando um Aplicativo para Langamento .. . Continuando com 0 jQuery Mobile .....csosscssee OE.)Sumério | @ | XIX Reinstalando a Tela de Login. 369 Melhorando 0 Layout de Navegacao 376 Coletando Recursos... 379 Construindo a Tela de Detalhes dos Recursos... Usando a Geominer para o Rastreamento dos Recursos Empacotando 0 Moundz como um Aplicativo Nativo.. Empacotando para o PhoneGap.... Fornecendo um [cone Lancador do “Aplicativo . Modificando as Permissdes do Aplicativo.... PhoneGap, Autenticacio e Intents... Nosso Fluxo de Autenticagao Web Anterior Uma Viséo Geral das Intents do Android... 379 389 391 391 393 395 397 Usando os Plug-Ins do PhoneGap para Tratar as Intents 402 Mantendo uma tinica base de cédigo. 404 Empacotando Nosso Aplicativo para o Langamento..... pene OD ReSUMO. .nnnninininninnnninnninnnnnnnnninnnnnnnnnnnsned A Capitulo 13 O Futuro da Computacao para Dispositivos Méveis A Era da Computacio Mével Um Fendmeno Mundial. Morte do Desktop? .. Abragando a Melhoria Progressiva. Prognésticos Sobre a Tecnologia Mével Melhorias das Ferramentas e das Bibliotecas. Modificagdes na Arquitetura dos Dispositivos Codificando para as Arquiteturas Futuras A Internet das Coisas .. Redes para Sensores de Hardware... Sensor Humano Resumo.... Apéndice Depurando Aplicativos Web para AndroidXX | @[Aplicativos Web Pro Android e431 JSLint: Prevenir é Melhor que Remediar. Depurando com as Ferramentas do Desenvolvedor do Google Chrome .. 432 Obtendo Mensagens e Ertos no Console.. 0 A383 Depurando o Script. . 435 Inspecionando o DOM com a Guia Elements... 437 Depurando com o Android Debug Bridge..... 438 Indice.Capitulo 1 Dando Inicio Bem-vindos a0 mundo maravilhoso do desenvolvimento de aplicativos Web para Android. Em toda a extensio do livro, vamos caminhar pelos processos da construgao de aplicativos Web. Embora projetado inicialmente para o Android, a maior parte do (se nao todo) cédigo ira funcionar também no Chrome OS. Na verdade, a reutilizagao do cédigo do aplicativo ir além do Chrome OS— 0 cédigo deste livro deverd rodar em qualquer dispositivo que forneca um navegador baseado em WebKit. Se vocé nao est familiarizado com WebKit ou Chrome OS a esta altura, nao se preocupe ~estard até o final do livro, Neste capitulo, examinaremos alguns tépicos em alto nivel para que vocé possa comegar a construir aplicativos o mais rapidamente possivel: + Uma visio geral das capacidades da plataforma do Android. + Quais destes recursos podemos acessar através de um navegador Web (tanto por default como usando um Bridging Framework, tal como o PhoneGap). + Configuracao de um ambiente de desenvolvimento para codificar os exemplos deste livro e dos seus aplicativos. + Uma visao geral das ferramentas que vém com o kit de desenvolvimento para Android ¢ algumas ferramentas de suporte para ajudé-lo a construir aplicativos Web. Entendendo os Recursos da Plataforma Android sistema operacional Android foi projetado como um SO genérico para os dispositivos méveis (tais como, smartphones e tablet PCs). O plano era que © Android fosse utilizado por fabricantes com multiples dispositivos como © SO do dispositivo deles, com 0 qual os fabricantes pudessem customizar e operacionalizar. Na maior parte, esta visio foi realizada e numerosos fabricantes tm construido dispositivos que sio embalados com o Android2| @lAplicativos Web Pro Android instalado, também se tornando parte da OpenHandset Alliance (http:// openhandsetalliance.com). O Android, todavia, nao é 0 tinico SO mével disponivel e isto significa que um aplicativo nativo Android teria de ser reescrito para dar suporte a um outro dispositivo mével (nao Android), ou seja, ter de gerenciar o desenvolvimento continuo dos aplicativos méveis para cada uma das plataformas que vocé deseja suportar. Enquanto as grandes companhias do mundo conseguem fazer isto, pode ser dificil para uma organizagio menor ou em estigio inicial. E ai que esté o atrativo em desenvolver aplicativos méveis para a Web — escrever 0 cédigo do aplicativo uma vez e fazé-lo funcionar em miltiplos dispositivos, Esta secao do livro ir descrever os recursos atuais do SO Android e em caso de relevancia, se vocé pode acessar essa funcionalidade ao construir aplicativos Web. Para aqueles que preferem um resumo das capacidades do sistema e do que vocé pode realmente acessar por meio do navegador ou do Bridging Framework, ento vi diretamente para a ‘Tabela 1-2 no fim desta seco. peecrenr auc tta © Bridging Framework fornece aos desenvolvedores uma técnica para consteuir aplicativos Web que podem ser distribuidos para os dispositivos méveis. O framework também fornece acessos para parte das funcionalidades nativas dos dispositivos (tais como, accelerometer ¢ camera) através de um wrapper (normalmente o JavaScript) para a API nativa No decorrer deste livro, utilizaremos alguns exemplos que usam o PhoneGap (http:// phonegap.com) para conectar algumas dessas funcionalidade nativas. Embora o PhoneGap tenha sido um dos primeiros, existem muitos outros Bridging Frameworks disponiveis. Neste livro, todavia, iremos focar PhoneGap porque ele fornece uma abordagem simples e leve para empacotar (wrap) um aplicativo mével Web para a distribuicao (deployment) nativa Para obter maiores informagées a respeito dos diversos frameworks para os aplicativos Web para dispositivos méveis, eu redigi algumas diferentes colocages em um blog sobre o t6pico, Em particular, o site seguinte possui comentarios interessantes dos contribuintes sobre os projetos que ajudam a mostrar suas areas de concentragao: http://distracTabela net/coding/iphoneandroid-web-application-frameworks. Embora eu adorasse falar mais sobre cada uma delas neste livro, 0 foco aqui esta em. construir aplicativos Web para dispositivos méveis. A partir desta perspectiva, estes sio aplicativos que podem ser distribuidos para a Web e acessados através de um navegador do dispositive, A adigéo de um Bridging Framework deve set uma op¢ao extra, ao invés de um requisito. Dado este caso de uso particular, o PhoneGap é um verdadeiro vencedor.Dando Inicio | @ |3 Conectividade do Dispositivo Como consumidores, todos nés provavelmente comecarfamos a utilizar as opses de conectividade dos nossos préprios dispositivos méveis sem custos, mas ¢ importante nfo fazer isto na qualidade de desenvolvedor mével (tanto para os aplicativos Web como os nativos). Se os aplicativos para os dispositivos miéveis séo construidos assumindo que uma conexéo Web esta sempre disponivel, entdo isto limita a utilidade de um aplicativo quando a conectividade élimitada—o que é mais frequente do que vocé poderia imaginar. Entender que o seu aplicativo tera niveis variados de conectividade em diferentes vezes ¢ muito importante para criar um aplicativo que ofereca uma experiéncia satisfat6ria ao usuario todas as vezes, Em termos muito simples, um dispositivo mével pode ter trés niveis de conectividade a partir de uma perspectiva da Web: + Uma conexio com alta largura de banda (por exemplo, WiFi) + Uma conexio com baixa largura de banda (por exemplo, 3G) + Conexao limitada ou sem conectividade (offline) Atualmente, ao construir um aplicativo puro para a Web, vocé pode, na verdade, detectar apenas se possui ou nao uma conexao (sem, na verdade, tentar downloads ou provavelmente testar a velocidade da conexio). Isto é diferente dos aplicativos Android nativos porque esses aplicativos podem acessar as APIs nativas que fornecem informacées relativas ao tipo ou a qualidade de conexio corrente do dispositivo, No Capitulo 5, iremos investigar os recursos da API do HTMLS para permitir que seus aplicativos funcionem bem offline e no Capitulo 9, exploraremos alguns exemplos usando os Bridging Frameworks para acessar alguma deteccao de conectividade nativa. Toques Um dos recursos que ajudaram a producio corrente de dispositivos méveis a romper com 0 passado foi a interface de toques. Dependendo da versio do Android, em um nivel nativo vocé poderd ter acesso tanto a eventos com miiltiplos toques como a eventos com simplesmente um toque. Os aplicativos4 @ Aplicativos Web Pro Android Web, por outro lado, somente permitem o acesso a eventos com um tinico toque no estagio atual. Comecaremos explorando 0s eventos de toques com alguma profundidade no Capitulo 7. Geolocalizagao OSO Android suportaa detecgao da localizacao geografica através de varias implementagdes diferentes, incluindo o GPS (Sistema de Posicionamento Global), a triangulagio de torres para celulares e, excepcionalmente, os servicos de Internet que utilizam técnicas, tais como o farejamento de IPs para determinar a localizacao. No nivel de API nativa, a geolocalizacao é implementada no pacote android.location (consulte o site http://developer. android.com/reference/android/location/package-summary.html) e a maioria dos Bridging Frameworks exibe essa funcionalidade da API nativa. Uma vez que 0 HTMLS est ganhando aceitacao e foi implementado parcialmente (a implementagao total vird uma vez que a especificacao esteja finalizada dentro dos préximos dois anos), também podemos acessar a informagao da localizagao diretamente no navegador, sem a necessidade de Bridging Frameworks. Isto é feito usando a API de Geolocalizacao do HTMLS (www:w3.org/TR/geolocation-AP1). Para obter mais informagoes sobre a API de Geolocalizagao do HTMLS, consulte o Capitulo 6.Dando Inicio |@|5 Sensores de Hardware Uma das coisas mais legais sobre os modernos smartphones é que cles vém equipados com uma gama de sensores de hardware e medida que a tecnologia se torna mais difundida, isto somente vai aumentar. Um dos sensores mais divulgados correntemente é 0 acelerémetro com trés eixos, 0 qual permite aos desenvolvedores escrever 0 software que rastreia a interagao com 0 usuario de maneiras inovadoras. A lista de sensores de hardware com os quais 0 SO Android pode atualmente interagir vai além do acelerémetro e uma répida visita A referéncia da API corrente do sensor de hardwares para o desenvolvimento nativo revela uma impressionante lista de sensores que ja sio suportados dentro da API nativa (veja http://developer.android. com/reference/android/hardware/Sensor html). A Tabela 1-1 lista os varios sensores ¢ fornece informagdes sobre se 0 acesso ao sensor tem atualmente suporte para o Bridging Framework PhoneGap. Se vocé nao esté familiarizado com um dos sensores listados, a Wikipedia possui algumas informagées excelentes - simplesmente busque o nome do sensor, Note que enquanto o SDK Android (kit para desenvolvimento de softwares) suporta uma série de sensores de hardwares, a maior parte nao é acessivel por meio dos aplicativos Web para dispositivos méveis (ainda). Tabela 1-1. Sensores suportados pelo SDK Android Sensor Suporte para PhoneGap Accelerometer ‘Sim Gyroscope Nao Light Magnetic field Orientation Sim Pressure Nao Proximity Nao Temperature Sim ‘Um dosargumentosmaisconvincentes queacompanham desenvolvimento nativo sobre o desenvolvimento Web é ganhar acesso a uma vasta lista de sensores que continuardo a ser adicionados aos dispositivos méveis 4 medida que a tecnologia progride. Embora seja um argumento definitivamente vilido, construir um aplicativo Web em conjungéo com um Bridging Framework6 | © Aplicativos Web Pro Android pode permitir a vocé acessar alguns dos sensores mais comumente usados e disponiveis. Além disso, 0 PhoneGap é um framework livre e a habilidade de escrever plug-ins é fornecida (embora seja dificil encontrar boas informagoes a respeito), portanto, é definitivamente possivel acessar sensores adicionais. Bancos de Dados e Armazenamento Locais Os dispositivos méveis suportaram durante longo tempo armazenamentos locais de uma forma ou outra, mas nos iltimos tempos, comecamos a ver técnicas padronizadas (e selecao de tecnologia) na implementacio de armazenamentos. Certamente, no nivel da API nativa, o Android implementa 0 suporte para o SQLite (http://sqlite.org) através do pacote android database. sqlite (visite http://developer.android.com/reference/android/database/sqlite/ packagesummary. html). © SQLite esta rapidamente se tornando o padrao de fato para os bancos de dados embutidos ¢ isto é verdadeiro quando se trata de implementar armazenamentos locais e bancos de dados para as tecnologias Web. 'Ter acesso a um banco de dados leve, tal como 0 SQLite no cliente, torna possivel criar aplicativos que podem tanto armazenar como utilizar cépias de informagao de localizacao em cache, que normalmente poderiam ser armazenadas em um servidor remoto. Dois novos padrdes HTMLS em andamento fornecem mecanismos para a persisténcia de dados sem precisar interagir com quaisquer servicos externos além do JavaScript. Estas novas APIs, 0 HTML5 Web Storage (http://dev. w3.org/html5/webstorage) e 0 Web SQL Database (http://dev.w3.org/html5/ webdatabase) fornecem algumas ferramentas excelentes para ajudar seus aplicativos funcionarem em situagoes offline. Exploraremos esas APIs com alguma profundidade no Capitulo 3. Suporte a Camera Antes do toque se tornar um dos principais e mais procurados recursos para os dispositivos méveis, ter uma camera razodvel era certamente algo que influenciava uma deciséo de compra. Isto se reflete em uma variedade de aplicativos nativos que normalmente fazem uso da camera. Em um nivel nativo, 0 acesso 4 camera é implementado através da classe android hardware. ‘A camera (consulte _ http://developer.android.com/reference/android/Dando Inicio |@ |7 hardware/Camera html); todavia, nao é ainda acessivel dentro do navegador— mas a especificagao de Captura de Midia do HTML est em progresso (visite www.w3.org/TR/capture-api). Até uma determinada época, quando a especificacao foi finalizada, os Bridging Frameworks podiam fornecer acessos aos aplicativos Web para a camera e a biblioteca de imagens no dispositivo. Sistema de Mensagens e Notificagées de Impulsos (Push) No Android 2.2, um servigo chamado Cloud para o Sistema de Mensagens do Dispositivo (C2DM) (http://code.google.com/android/c2dm/index html) foi implementado no nivel nativo. Esse servico permite que os desenvolvedores nativos registrem seus aplicativos para 0 que sio comumente conhecidos como notificagées de impulsos (push), por meio das quais um usuario mével ser notificado quando algo é novo ou foi alterado. Decorrera algum tempo antes que as notificagdes de impulsos (push) sejam implementadas nos navegadores porque um grupo de trabalho somente recentemente foi anunciado para discutir e fornecer uma recomendagao nesta drea particular (veja www.w3.org/2010/06/notification-charter). Infelizmente, como 0 C2DM é relativamente novo, ir decorrer algum tempo antes que os Bridging Frameworks implementem isso para o Android. Navegador Web com WebKit © SO Android implementa um navegador provido de um WebKit. WebKit (http://webkit.org) é um mecanismo de navegacio de open source, que atingiu um notavel nivel de aceitacéo para os desktops e os navegadores méveis igualmente. O mecanismo do WebKit potencializa muitos navegadores populares, tais como 0 Chrome e o Safari para desktop, o Safari mével ¢ o navegador Android nativo para os dispositivos méveis (para mencionar apenas alguns). $6 isto j4 é uma grande razao para construir aplicativos Web para dispositivos méveis, ao invés de aplicativos nativos. Como tanto o Android quanto o iPhone implementam um navegador com WebKit (0 Mobile Safari é um WebKit em seu niicleo), vocé pode ter como alvo, ambos os dispositivos muito simplesmente se considerar 0 WebKit como um denominador comum, Por que ter um WebKit em comum é téo importante? Dado que o HTML5 e 0 CSS3 sao especificagdes ainda emergentes, ainda decorrerao alguns anos antes que os padrdes Web estejam concretizados e os navegadores méveis8] @ |Aplicativos Web Pro Android se comportem de maneira consistente. Por enquanto, ter um WebKit como elemento comum entre as duas plataformas dominantes de consumidores de smartphone é uma grande vantagem. Na qualidade de desenvolvedores, podemos construir aplicativos que fazem uso dos componentes do HTMLS que estao comecando a se estabilizar (e desse modo, estao sendo implementados em mecanismos de navegadores mais progressivos, tal como 0 WebKit) e, na verdade, temos boa chance de fazer esses aplicativos funcionarem tanto nos handsets Android como no iPhone. Tente fazer isso com os cédigos Java Android ou com os cédigos iPhone Objective-C. Gerenciamento de Processo O Gerenciamento de Processo é tratado de modo similar no Android e nos dispositivos iS desde a versio do iOS4 da Apple; todavia, antes disso, havia uma diferenca bastante significativa entre as maneiras como os aplicativos Android e iPhone comportavam-se quando um usuario “saia” deles. No iPhone, quando vocé saia do aplicativo, ele essencialmente parava de funcionar—o que significava que realmente nao havia nenhuma capacidade de fazer qualquer coisa em segundo plano. No Android, contudo, se um usudrio saisse do aplicativo (inclusive de um aplicativo Web) sem feché-lo, ele continuaria a ser executado em segundo plano. Para validar isto, executamos 0 cédigo seguinte em um handset Android para garantir que as requisigées ainda estavam chegando enquanto o aplicativo (neste caso, o navegador) nao era o aplicativo ativo. new Tmage( )? ges/" + new Date( ).getTime( ) + *.png”; Usar a chamada setInterval do JavaScript neste contexto significa que uma requisicdo de imagem (para uma imagem que nao existe) é emitida a cada segundo. Quando o cédigo ¢ executado, essa requisicio de imagem é feita a0 servidor Web a cada segundo (ou quase isso), independentemente se © navegador Web é ou nao o aplicativo. Além disso, como o navegador no Android suporta que miltiplas janelas sejam abertas ao mesmo tempo, a requisi¢ao continuaré a ser executada ainda que o navegador esteja ativo, mas ‘uma janela diferente seja selecionada como a janela corrente. ‘Ter esse tipo de capacidade de processamento em segundo plano fornece aos desenvolvedores algumas oportunidades excelentes. Contudo, éimportante assegurar que nossos aplicativos sejam construidos de tal maneira que, quando estiver em segundo plano, os aplicativos nao estejam baixando informacées desnecessérias ou consumindo excessivamente a energia da bateria. Resumo dos Recursos do SO Android A Tabela 1-2 mostra uma matriz com recursos dos dispositivos, a versio Android a partir da qual eles so suportados e se podem ser acessados no navegador. Em alguns casos, a coluna de suporte do navegador usa o termo bridge. Isso se refere ao uso de Bridging Frameworks (tais como, PhoneGap, Rhodes etc.) para expor a funcionalidade nativa do dispositivo ao navegador. Tabela 1-2. Recursos do SO Android e Matriz de Acessibilidade do Navegador Caracteristica do Dispositivo Suporte da Versio do so _Acess0 do Navegador Deteccao da conectividade 215 Bridge Geolocalizacao (GPS) 21s Sim Sensores de hardware 215 Bridge’ Toque de tela e eventos de sis Parcial toque