Projetando e criando Aplicativos para Dispositivos Móveis

Veja neste artigo como podemos projetar e implementar aplicativos para dispositivos móveis.

Os dispositivos móveis crescem cada dia mais e já representam a maioria dos sistemas computadorizados atualmente. Por isso torna-se cada vez mais importante criarmos aplicativos voltados para esse segmento. Criar um aplicativo para dispositivos móveis requerer diversos desafios e complicações como: lidar com recursos físicos limitados tais como CPU, memória, tela, dispositivos de entrada, bateria, entre outros; além disso, ambientes e contextos diversos com excesso de barulho, muita claridade, situações em que usamos apenas uma mão dependendo do momento, pessoa ou lugar são mais algumas das complicações que precisam ser gerenciadas quando construímos aplicativos voltados para dispositivos móveis.

Outra característica importante ao projetar e criar aplicativos para dispositivos móveis é que estes possuem um propósito bem definido. Ao contrário dos aplicativos para desktop em que tínhamos aplicativos de propósitos mais gerais, nos aplicativos móveis tem-se mais oportunidades para aplicativos que resolvem problemas mais específicos. Um exemplo de aplicativo para desktop popular é o Microsoft Office que possui todas as ferramentas necessárias para resolver qualquer problema de escritório como apresentações, criação de documentos, planilhas, etc. Já nos dispositivos móveis acharemos diversos aplicativos para resolver problemas de escritório mais específicos como software para planilhas eletrônicas, software editor de texto, etc.

Além disso, quando projetamos nosso aplicativo devemos escolher o(s) sistema(s) operacional(is) que ele será executado. Nesse ponto também é importante conhecermos o mercado, quais são os sistemas que mais crescem em uso, quais possuem um desenvolvimento mais facilitado, quais possuem bibliotecas públicas, etc. Analisando o mercado atual de sistemas operacionais tem-se que o Android já detém 79.3% do mercado como era esperado há alguns anos atrás, seguido por Apple iOS com 13.2%, RIM com 2.9%, Windows Phone com 3.7% e outros sistemas com apenas 0.9% do mercado. Se analisarmos os dados dos anos anteriores verificaremos que o Android cresce bastante a cada ano. Analisando friamente os dados parece que o Android é um sistema muito superior aos outros e está sufocando o mercado. No entanto, o Android cresce bastante porque além de ser um bom sistema existe um grande número de aparelhos que entraram e entram cada dia mais no mercado e a grande maioria desses aparelhos estão equipados com sistemas operacionais Android. Isso também explica o fato da Apple ter caído no mercado nos últimos anos, apesar que essa queda é considerada pequena. Uma das vantagens do sistema Android é que ele possui diversas versões que rodam em diversos dispositivos, como por exemplo, Android para Motorola, Android para HTC, etc. Cada vez mais os novos Smartphones e as grandes companhias vão aderindo ao sistema operacional da Google que se mostra cada vez mais confiável e melhor. Já o Windows Phone sofreu devido a entrada tardia no mercado, mas não deixa de ser um ótimo sistema assim como iOS e o Android. Outro sistema que tinha uma boa parcela do mercado, a Symbian, foi abandonado, por isso cada vez mais o sistema cairá em desuso não sendo uma boa opção de desenvolvimento.

Dessa forma, verificamos que os principais sistemas atualmente são Android, iOS e Windows Phone. Neste artigo veremos melhor como projetar um aplicativo para dispositivos móveis e como podemos desenvolver aplicativos para o sistema Android. A pedidos faremos outro artigo sobre iOS e Windows Phone também. Além do sistema Android veremos também como podemos fazer aplicativos que rodam em qualquer plataforma utilizando HTML 5.

Projetando uma Aplicação

Ao projetar uma aplicação precisamos primeiramente pensar na interface do dispositivo que é o responsável por guiar o usuário. Existem padrões para o desenvolvimento de interfaces para dispositivos móveis que visam padronizar a experiência do usuário na plataforma em questão e a facilitar o desenvolvimento das interfaces. Esses padrões são disponibilizados pelos desenvolvedores de sistemas operacionais em forma de guia que pode baixado e consultado livremente.

Alguns dos guias disponíveis são:

Outros sistemas operacionais também disponibilizam seus guias, no entanto estamos frisando apenas aqueles que são considerados os sistemas operacionais mais importantes e utilizados do mercado hoje.

O guia “iOS Human Interface Guidelines” fornece diversas dicas sobre o que podemos fazer para que as aplicações (também chamadas de apps) possam ser aceitas na “App Store” (loja de aplicativos da Apple). Vale lembrar que para ser aceito na App Store existe uma rigorosa avaliação realizada por especialistas contratados pela Apple. O guia também trás muitos detalhes e recomendações. Algumas recomendações são mais genéricas e outras mais específicas detalhando mais como realizar determinada funcionalidade, por isso o guia caracteriza-se por ser bastante completo. O guia sempre é adaptado para a última versão do sistema operacional, atualmente iOS 7.

O guia “Android Styleguide” é mais bonito que o guia da Apple, mas apresenta o mesmo nível de descrição que o guia da Apple. O guia atual do Android foi adaptado para a versão 4.4 KitKat do sistema operacional, ou seja, a última versão disponível. O guia do Android parte de três premissas básicas: Encante-me, Simplifique minha vida e Surpreenda-me. Espera-se que todo aplicativo Android siga essas três premissas que trazem dicas de beleza, detalhes, representação de objetos, customização, entre outras (Encante-me); além de dicas para frases, palavras, figuras, exibição, entre outras (Simplifique minha vida); e dicas para truques, ajuda ao usuário, correção de erros, feedback, eficiência, entre outras (Surpreenda-me).

O guia “Windows Phone Design Guidelines” tem a mesma organização e fácil linguagem que os guias dos sistemas operacionais Android e iOS. Este guia trás seis princípios básicos que devem ser seguidos: Preste atenção aos detalhes, Menos é mais, Rápido e fluido, Seja Autenticamente Digital, Tente não Reinventar a Roda, Privilegie a Experiência do Usuário. Os princípios básicos fazem recomendações sobre detalhes, interfaces minimalistas e bem utilizadas, respostas muito rápidas, adaptações, aproveitamento e coerências das interações, etc.

Os guias possuem diversos formatos como PDF, HTML, etc. Além disso, esses guias possuem uma linguagem bastante natural e acessível a qualquer usuário independente da sua experiência. Os guias também têm em comum os diversos princípios básicos que regem o desenvolvimento de interfaces para dispositivos móveis, os detalhes de concepção e uma semelhança grande no estilo e nas ideias centrais. Portanto, todo desenvolvedor de dispositivos móveis deve ter esses guias sempre debaixo dos braços seguindo as recomendações indicadas. Aplicando os princípios contidos nos guias os aplicativos terão muito mais chances de ter sucesso no mercado e de ser aceitos nas lojas de aplicativos.

Após seguirmos as dicas dos guias já podemos realizar a prototipação do nosso aplicativo. Para isso podemos usar desenhos simples em papel ou até protótipos funcionais onde algumas partes do aplicativo são codificadas e também pode ser executado. No entanto, vamos tratar aqui da prototipação mais utilizada que é a prototipação simples. Nesse tipo de prototipação apresentamos os elementos da interface e a navegação entre as telas. A navegação entre as telas pode ser realizada usando setas como veremos.

Prototipando uma Aplicação

Uma excelente abordagem para prototipação é a utilização de aplicativos específicos que auxiliam na criação de protótipos. Existem tanto aplicativos na web que estão disponíveis através do browser quanto aplicativos executáveis diretamente no sistema operacional.

No site http://mashable.com/2013/04/02/wireframing-tools-mobile/ temos a indicação de vinte excelentes ferramentas que podem ser utilizadas para prototipação do nosso aplicativo. Essas ferramentas muitas vezes já trazem modelos de interfaces especificas para a plataforma que queremos prototipar como Android, iOS, Windows Phone, plataforma Web, etc.

Uma das ferramentas mais utilizadas para a prototipação de dispositivos móveis é o MockFlow desenvolvido pela Adobe Air e que está disponível em http://www.mockflow.com. O Mockflow facilita a prototipação em wireframes interativos e interfaces com usuários para sites ou aplicações. O Mockflow pode ser utilizado tanto online através do browser quanto diretamente no sistema operacional, mas possui limitações no plano gratuito. Entre as limitações o Mockflow apenas permite trabalharmos em no máximo um projeto com até no máximo quatro páginas e não mais do que dois colaboradores simultaneamente. No entanto, para dispositivos móveis ele oferece muitos elementos, sendo uma excelente solução gratuita.

Para exemplificar a criação de um protótipo com o Mockflow vamos desenvolver um protótipo. Para isso primeiramente devemos visitar o site http://www.mockflow.com/ e fazer uma conta.

Após criarmos uma conta já estamos aptos a criar um novo projeto. Ao criar um novo projeto no Mockflow podemos selecionar criar um protótipo para diversas plataformas como: iPhone, Android, iPad ou Windows Phone; além de outras plataformas que também estão disponíveis. A Figura 1 mostra os tipos de protótipos que podem ser criados.

Figura 1. Opções para criação de protótipos.

Após a seleção do tipo de protótipo que queremos criar basta selecionarmos o nome do projeto conforme é demonstrado na Figura 2.

Figura 2. Configurando o nome do projeto.

Após isso podemos visualizar a tela inicial com diversas ferramentas que estão no menu direito da tela. Todas essas ferramentas podem ser arrastadas para a parte central da tela onde aparece a tela do celular. Não precisamos necessariamente usar a tela do celular, porém se quisermos um projeto mais real é interessante usá-lo, até para termos uma ideia de como poderemos organizar os componentes na tela. Segue na Figura 3 a tela com os componentes e o screen do celular.

Figura 3. Tela principal para prototipação de aplicativos.

Com a ajuda da ferramenta acima podemos criar diversos protótipos antes de efetivamente implementarmos a aplicação. A apresentação de protótipos aos interessados também ajuda a melhorarmos a aplicação e adapta-la as necessidades do usuário antes mesmo de começarmos a codificação.

Outras Etapas do Projeto da Aplicação

Após a finalização do protótipo é importante testarmos ele diretamente no aparelho. Se quisermos maximizar a experiência do usuário, é imperativo testarmos nossos protótipos nos ambientes nativos.

Apesar de o protótipo oferecer uma boa ideia de como ficará o aplicativo na plataforma, a implementação do protótipo no próprio aparelho ajuda a respondermos de forma mais precisa algumas perguntas, tais como: todos os elementos do design estão organizados de forma confortável? É fácil chegar aos elementos com o dedo? Ainda é fácil se estivermos usando apenas uma mão?

Através de imagens estáticas não é fácil verificarmos todas as possibilidades. Por isso que o teste na plataforma torna-se importante. Algumas ferramentas possibilitam exportarmos um protótipo para que possamos testar em determinadas plataformas.

Para ajudar no projeto da aplicação também devemos atentar para detalhes extras como: entender os detalhes, analisar a audiência e compor casos de uso. Entender os detalhes diz respeito a entender o objetivo do negócio. Cada projeto tem seu próprio objetivo de negócio podendo ser desde a criação de canais de receita extras, melhorar a identificar a marca ou simplesmente uma versão móvel de um produto web. É muito importante entendermos porque estamos trabalhando na aplicação de forma a relacionar o projeto com os objetivos de negócio. A análise de audiência se refere a analisarmos o público do nosso produto. Um exemplo disso é uma aplicação direcionada para pessoas de negócio e ter o nome relacionado com algum super-herói ou desenho que pode ter algum relacionamento com o contexto do aplicativo, mas certamente não chamará a atenção do público alvo. Por fim, compor casos de uso se refere a pensarmos em como os usuários usarão o aplicativo. Casos de uso nos permitem descobrir diversas coisas importantes que certamente ajudarão na criação de uma grande aplicação.

Outra dica importante que pode ajudar no projeto da aplicação é a realização de uma análise dos competidores. Essa análise pode ser feita através de sites, blogs e redes sociais, ou até mesmo através da App Store ou um repositório de aplicativos específico para a plataforma do sistema. Pode ser necessário comprar aplicativos dos concorrentes de forma a explorar as ideias do aplicativo. Além disso, podemos também buscar inspiração na internet em um grande número de sites e aplicativos, procurar por comparações de produtos e opiniões em diversos mercados, ou se informar e estudar blogs populares de tecnologia onde frequentemente temos publicadas informações sobre conceitos novos referentes ao mundo mobile e pensamentos interessantes dos experts em mobile. Ler artigos e explorar diferentes aparelhos e plataformas também ajuda a ampliarmos nossos horizontes. Alguns recursos, por exemplo, são muito utilizados em um tipo de plataforma, mesmo sendo disponível em todas as outras, porém como convenção procurou-se usar este tipo de feature em determinada plataforma. Utilizar essa feature que se mostrou interessante em outras plataformas pode ser uma excelente oportunidade para populariza-lo na nossa plataforma também.

Ao final do desenvolvimento de uma versão de teste do nosso aplicativo precisamos atentar para alguns detalhes. Primeiramente devemos ser um participante ativo durante todo o estágio de desenvolvimento, pois um projetista é sempre responsável pela forma como o aplicativo deve funcionar, portanto, quanto mais estivermos envolvidos no estágio de desenvolvimento, melhor será o produto final. A velocidade do aplicativo, tamanho, algoritmos, todos esses e muitos outros aspectos do desenvolvimento estão sob responsabilidade dos projetistas, além dos desenvolvedores, por isso é importante que tenhamos participação também nas sessões de brainstorming.

O projetista também deve participar dos testes do produto, visto que o projetista esteve envolvido com diversas fases do desenvolvimento do produto juntamente com o cliente, assim ele pode sentir se a aplicação esta respondendo as necessidades dos usuários.

Durante os testes devemos comparar a aplicação com o projeto original, pois desenvolvedores podem implementar as coisas de forma diferente devido mal entendimentos ou por algum erro. Devemos comparar cada tela desenvolvida com o que foi acordado e prototipado junto ao cliente, até mesmo detalhes como fontes, cores, bordas, etc. Após os testes terem sido realizados não devemos ter medo de alterar o produto ao longo do caminho. Normalmente temos grandes ideias durante a fase de teste e essas ideias devem ser consideradas. Mas é importante atentarmos se essas ideias podem ser feitas rapidamente e o quão criticas elas são. Se a ideia for rápida e não tão crítica, estamos livres para efetuar as mudanças, sempre comunicando essas mudanças aos clientes.

Introdução ao HTML e CSS

A especificação do HTML e de outros padrões abertos (como XHTML, CSS, JS) é responsabilidade do W3C.

O W3C (Consórcio World Wide Web) é uma comunidade internacional que desenvolve padrões com o objetivo de garantir o crescimento da Web. O HTML (HyperText Markup Language ou Linguagem de Marcação de Hipertexto) é uma linguagem de marcação para definir a estrutura e a semântica para construção de páginas na Web. Outro importante elemento é o CSS que foi criado com o objetivo de separar o conteúdo das informações de estilo.

O HTML é baseado no conceito de Hipertexto que são conjuntos de elementos ligados por conexões. Estes elementos podem ser palavras, imagens, vídeos, áudio, documentos, etc.

A estrutura básica de um documento HTML é como o definido na Listagem 1.

Listagem 1. Exemplo de estrutura de um documento HTML.

<!DOCTYPE HTML> <html> <head> <title>Título do Documento</title> </head> <body> texto, imagem, links, ... </body> </html>

O HTML ainda é composto por diversas tags que podem ser usadas para definir cabeçalhos, texto em negrito, texto grande, texto em itálico, texto forte, especificar links, imagens, tabelas, listas, formulários, frames e muito mais.

Tudo isso pode ser definido através de tags como <h1>, <b>, <big>, <em>, <strong>, <sub>, <p>, <a href>, <img>, <table>, <tr>, <td>, <th>, <ul>, <li>, <form>, <input>, <br>, <frameset>, etc.

O XHTML É uma versão mais rigorosa e limpa do HTML. O XHTML é praticamente idêntico ao HTML 4.01 e tornou-se uma recomendação da W3C desde 26 de janeiro de 2000. Basicamente o HTML é utilizado para exibir elementos e o XHTML é utilizado descrever elementos. Os elementos XHTML devem estar aninhados e todos os elementos devem ser fechados, escritos em minúsculo e devem conter o elemento raiz.

O DOCTYPE correto para páginas XHTML é:

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN“ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Enquanto o W3C focava suas atenções para a criação da segunda versão do XHTML, um grupo chamado Web Hypertext Application Technology Working Group (WHATWG) trabalhava em uma nova versão do HTML que trazia mais flexibilidade para a produção de websites e sistemas baseados na web. O WHATWG inclui empresas como a AOL, Apple, Google, IBM, Microsoft, Mozilla, Nokia e Opera. Assim surgiu o novo HTML 5.

A nova estrutura do HTML, denominada HTML 5, foi definida conforme a Listagem 2.

Listagem 2. Exemplo de estrutura do HTML 5.

<!DOCTYPE HTML> <html lang="pt-br"> <head> <meta charset="UTF-8"> <linkrel="stylesheet"type="text/css"href="estilo.css"> <title></title> </head> <body> ... </body> </html>

Entre as novas características do HTML 5 estão: mais semântica com menos código, mais interatividade sem a necessidade de instalação de plug-ins e código interoperável, que pode ser aproveitado para futuros dispositivos e que facilita a reutilização da informação.

O HTML 5 não usa mais tags como <center>, <font>, <big>, <u> e <s> por se tratarem de tags para visualização, isso tudo foi deixado para o CSS resolver. Tags que ferem princípios de usabilidade como <frameset>, <frame> e <noframe> também foram retiradas da especificação do HTML 5.

No entanto, o HTML 5 definiu diversos novos padrões como reprodução de áudio através do elemento <audio>, vídeo através do elemento <video>, novo tipos de input como tel, search, email, url, number e range além de diversos novos elementos como section, nav, article, aside, hgroup, header, footer e time. Outra novidade também foi o suporte a geolocalização que já é bastante utilizada por diversos aplicativos.

Diferente das versões antigas, o HTML 5 não é visto separadamente do CSS e do JavaScript. Todas essas tecnologias juntas permitem, por exemplo, desenhar na tela do navegador por meio de funções como Canvas e SVG.

Antes do XHTML e do atual HTML 5 haviam quatro versões do HTML. A primeira versão foi o HTML 1.0 lançada em 1989 sendo muito limitada em termos de estilização e apresentação do conteúdo, após a primeira versão surgiu o HTML 2.0 em 1995 sendo suportada por mais navegadores, mas cada navegador criava suas próprias funcionalidades. Nesse período a W3C foi criada. Após isso surgiu o HTML 3.2 em 1997 incluindo suporte a folhas de estilo CSS. Por fim em 1999 criou-se o HTML 4.01 com foco em separar estilo e apresentação do conteúdo.

Além do HTML temos também o CSS para construção de páginas web. O CSS (Cascading Style Sheets ou Folhas de estilo em cascata) é uma linguagem de estilo utilizada para descrever a apresentação de um documento escrito em uma linguagem de marcação, como HTML.

Enquanto que a função da linguagem de marcação é definir a estrutura e a semântica, o CSS foi criado com o objetivo de separar o conteúdo das informações de estilo.

Existem três métodos para utilização do CSS. O método "Inline" é utilizado quando as regras CSS são declaradas dentro da tag do elemento. O método "Incorporada ou interna" é utilizado quando as regras CSS são declaradas no próprio documento, na seção <head> do documento com a tag de estilo <style>. O método "Externo" é utilizado quando as regras CSS estão declaradas em um documento externo e esse arquivo possui a extensão ".css".

Segue um exemplo do método inline, interno e externo respectivamente, nas Listagens 3, 4 e 5.

Listagem 3. Exemplo utilizando o método inline.

<p style=“color:black; margin: 5px;”> Aqui um parágrafo de cor preta com 5px nas 4 margens. </p>

Listagem 4. Exemplo utilizando o método interno.

<head> <style type=“text/css”> body { background: black; } </style> </head>

Listagem 5. Exemplo utilizando o método externo.

<head> ... <link rel=“stylesheet” type=“text/css” href=“estilo.css”/> ... </head>

As vantagens da utilização do CSS é facilitar de manutenção, oferecer novas possibilidades de apresentação visual, criação de sites “tableless”, diminuição do tempo de download, e um maior controle em sistemas que não exibem informações em tela.

Aplicativos Móveis utilizando HTML 5

Podemos criar duas versões da nossa página HTML. Uma página poderia ser criada para que o usuário possa visualiza-la no desktop e a outra versão poderia ser visualizada num dispositivo móvel. Um exemplo disso é a página do globoesporte que dependendo da plataforma que tentamos acessa-lo um dos dois domínios serão acessados: globoesporte.globo.com ou m.globoesporte.globo.com se acessado por meio de um dispositivo móvel.

Apesar de podermos customizar melhor o site para uma determinada plataforma, essa forma também tem suas desvantagens. Uma desvantagem está relacionada com a manutenção, visto que é muito mais complicado manter dois sites. É sempre importante que essas páginas se adaptem às diferentes resoluções dos dispositivos móveis. Essa característica tem o nome de “páginas responsivas”.

Depois que a nossa interface em HTML 5 estiver pronta podemos utilizar um emulador para verificar como ficou a interface nos mais diferentes tipos de dispositivos. Para isso podemos baixar o Opera Mobile Emulator em http://www.opera.com/pt-br/developer/mobile-emulator.

Após instalar o Opera Mobile Emulator e executa-lo podemos visualizar a sua tela principal. A tela inicial do Opera Mobile é mostrada na Figura 4.

Figura 4. Tela principal do Opera Mobile Emulator.

Em "Profile" no lado esquerdo da tela podemos escolher o tipo de dispositivo móvel que queremos utilizar para o nosso teste. No lado direito podemos configurar a resolução, o tipo de interface, etc. Após isso basta clicar em "Launch" e visualizar o browser para as configurações realizadas. Com o browser aberto podemos digitar a URL desejada e visualizar como ficará a interface no dispositivo móvel.

Outro detalhe importante é que podemos construir dois tipos diferentes de aplicações: uma aplicação HTML 5 genérica ou uma aplicação nativa. A grande diferença é que se utilizarmos HTML 5 estaremos fazendo uso de padrões abertos como HTML 5, CSS, JavaScript, e isso permite que o nosso aplicativo seja portável para diferentes plataformas (dispositivos e sistemas operacionais). O aplicativo HTML 5 é multiplataforma porque ele está limitado apenas à compatibilidade dos navegadores. Porém, utilizando aplicativos nativos podemos fazer uso de elementos da interface nativa e podemos acessar os diversos sensores que o aplicativo suporta como câmera, GPS, SMS, etc. Além disso, utilizar aplicativos nativos permite que possamos comercializar essa aplicação através de um repositório como Google Play, Apple Store, Android Market, etc. Esses recursos estão disponíveis quando utilizamos os kits de desenvolvimento de software nativo. Aplicativos nativos costumam ter um desempenho ainda melhor.

Além de termos a liberdade de desenvolvermos aplicativos genéricos ou nativos ainda temos os aplicativos híbridos que são desenvolvidos em HTML 5 e conseguem utilizar recursos de hardware disponíveis nos kits de cada plataforma.

Existem frameworks que compilam o código HTML 5 para rodar como aplicações nativas, entre eles temos: PhoneGAP, Cordova e Tigger. O mais famoso deles é o PhoneGap que é OpenSource e tem compatibilidade com sete diferentes sistemas operacionais: iOS, Android, Blackberry, Windows Phone, Palm WebOS, Bada e Symbian.

Dessa forma, o PhoneGap compila uma aplicação em HTML 5 para se comportar como uma aplicação nativa. O PhoneGap está disponível para ser baixado em http://phonegap.com/ ou então pode ser utilizado online. Abaixo mostraremos como utiliza-lo de forma online.

Após entrar na página vá em "Try it now" conforme ilustra a Figura 5.

Figura 5. Tela principal do PhoneGap.

Na próxima tela (Figura 6) podemos verificar que a versão não paga possui algumas limitações, mas nada que nos impeça de usar a ferramenta. Portanto, basta clicarmos em “free” para que possamos nos registrar e começar a usar a ferramenta.

Figura 6. Selecionando o plano free do PhoneGap.

Após isso, na próxima tela precisamos criar um registro em “Create an Adobe ID” conforme ilustra a Figura 7.

Figura 7. Criando um registro para utilizar o PhoneGap.

Após nos registrarmos podemos visualizar a tela inicial da ferramenta. Nesta tela podemos importar a nossa página HTML com todos os arquivos (CSS, JS, Imagens, etc) a partir de um repositório no Git ou clicando em “Upload a .zip file” para importarmos um aplicativo do nosso computador. Após selecionar o projeto podemos clicar em “Ready to Build” conforme ilustra a Figura 8.

Figura 8. Selecionando a compilação do projeto.

Na próxima tela podemos verificar seis plataformas diferentes que podem ser selecionadas para compilar a aplicação para um código nativo de plataforma. A Figura 9 abaixo mostra a tela.

Figura 9. Plataformas disponíveis para serem compiladas.

No botão “Rebuild all” podemos compilar para todas as plataformas.

Para compilar para o iOS basta clicar no botão do iOS e aguardar a compilação conforme ilustra a Figura 10.

Figura 10. Compilando para a plataforma iOS.

Após o arquivo ser gerado, na próxima tela, abaixo do nome e da descrição do aplicativo, aparecerão o status da compilação para cada um dos sistemas operacionais suportados pelo PhoneGap. Quando os ícones correspondentes estiverem destacados em azul significará que a compilação para aquele sistema foi concluída com sucesso. Caso não seja adicionado um ID ou um certificado específico para o iOS e BlackBerry, eles não serão compilados e aparecerão em vermelho, como a Figura 11.

Figura 11. Plataformas disponíveis após a compilação.

Agora já podemos baixar o arquivo compilado e enviar para a plataforma específica da aplicação.

Frameworks para Interface

Como o HTML 5 fornece muita liberdade para o desenvolvedor construir interfaces, muitas vezes fica difícil adequar esta interface aos padrões. Existem frameworks que ajudam os desenvolvedores a se adequarem a esses diferentes padrões de interfaces que existem.

Dois desses frameworks são o Ionic e o Ratchet. O Ratchet é o mais simples deles bastando utilizar as suas classes para que a nossa interface seja formatada.

Por exemplo, podemos imaginar uma aplicação HTML 5 que calcula o IMC de uma pessoa, conforme demonstrada na Figura 12.

Figura 12. Página principal do cálculo IMC.

Segue na Listagem 6 o código HTML da página acima.

Listagem 6. Código HTML da página index.html mostrada na imagem acima.

<!DOCTYPE html> <html lang="pt-br"> <head> <title>Cálculo IMC</title> </head> <body> <header> <h1>Cálculo IMC</h1> </header> <div class="content" > <form name="calculoIMC"> <label for="altura">Altura:</label> <input type="text" name="altura" placeholder="Digite a altura"/><br /> <label for="peso">Peso:</label> <input type="text" name="peso" placeholder="Digite o peso"/><br /> <input type="button" value="Calcular IMC" onClick="calcular()" /> </form> <div id="resultado"> </div> </div> </body> <script src="calculo.js"></script> </html>

Na Listagem 7 o código JavaScript que calcula o IMC de uma pessoa dado seu peso e sua altura.

Listagem 7. Código JS da página index.html acima.

function calcular() { var altura = document.calculoIMC.altura.value; var peso = Number(document.calculoIMC.peso.value); if (altura.indexOf(',') > -1) { altura.replace(',', '.'); } altura = Number(altura); var resultadoIMC = peso / Math.pow(altura,2); var resultado = 'Seu IMC é ' + resultadoIMC; resultado += '<br />'; /*Calculo do IMC*/ if (resultadoIMC < 18.5) { resultado += 'Você está abaixo do peso ideal'; } else if (resultadoIMC < 25) { resultado += 'Você está em seu peso normal!'; } else if (resultadoIMC < 30) { resultado += 'Você está acima de seu peso (sobrepeso)'; } else if (resultadoIMC < 35) { resultado += 'Você está com Obesidade grau I'; } else if (resultadoIMC < 40) { resultado += 'Você está com Obesidade grau II'; } else { resultado += 'Você está com Obesidade grau III'; } document.getElementById('resultado').innerHTML = resultado; }

Agora vamos incrementar o nosso aplicativo feito em HTML 5 com o framework Ratchet para que ele fique aderente aos padrões de interface para dispositivos móveis. Para isso basta visitarmos o site http://goratchet.com/ e realizarmos o download do Ratchet, conforme ilustra a Figura 13.

Figura 13. Baixando o Ratchet para utilizarmos no nosso projeto.

Basta extrairmos os arquivos para um diretório. Neste diretório onde foram extraídos os arquivos podemos verificar diversos arquivos, porém agora estaremos interessados apenas no diretório "dist". Copie este diretório para o diretório da aplicação HTML 5 criado anteriormente conforme ilustra Figura 14.

Figura 14. Diretório principal da aplicação com a pasta “dist”.

Para fazer um teste das capacidades do framework Ratchet abra o arquivo index.html criado anteriormente e adicione no head os elementos abaixo:

<link href="dist/css/ratchet.css" rel="stylesheet"> <script src="dist/js/ratchet.js"></script>

Após este procedimento já podemos utilizar o framework em nosso aplicativo. Como um exemplo das capacidades do ratchet abra o arquivo index.html e modifique o conteúdo adicionando as classes pré-definidas pelo Ratchet, conforme a Listagem 8.

Listagem 8. Exemplo do arquivo index.html utilizando propriedades do Ratchet.

<!DOCTYPE html> <html lang="pt-br"> <head> <title>Cálculo IMC</title> <link href="dist/css/ratchet.css" rel="stylesheet"> <script src="dist/js/ratchet.js"></script> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> </head> <body> <header class="bar bar-nav"> <h1 class="title">Cálculo IMC</h1> </header> <div class="content"> <form name="calculoIMC" class="form input-group"> <label for="altura">Altura:</label> <input type="text" name="altura" placeholder="Digite a altura"/><br /> <label for="peso">Peso:</label> <input type="text" name="peso" placeholder="Digite o peso"/><br /> <input class="btn" type="button" value="Calcular IMC" onClick="calcular()" /> </form> <div id="resultado" class="bar bar-standard bar-footer"> </div> </div> </body> <script src="calculo.js"></script> </html>

Aplicando algumas classes do Ratchet podemos deixar a nossa aplicação com uma aparência muito mais voltada aos dispositivos móveis. conforme ilustra a Figura 15.

Figura 15. Aplicativo HTML 5 após utilizar o framework Ratchet.

Existem ainda diversas outras classes que podemos utilizar e aprimorar ainda mais nossa aplicação HTML 5 sem nenhum esforço adicional. Essas classes podem ser encontradas na documentação do Ratchet e são exemplificadas na página http://goratchet.com/components/.

Para transformarmos nosso aplicativo HTML em um aplicativo híbrido precisamos adicionar algumas configurações ao código, essas e muitas outras informações são encontradas na página do Ratchet.

Programação em Android

O Android não é caracterizado apenas como um sistema operacional, mas também uma plataforma de software que nos permite criar aplicativos para dispositivos móveis como Smartphones e Tablets. Portanto, o Android oferece um conjunto completo de softwares para dispositivos móveis como sistema operacional, middleware e aplicações.

Inicialmente o Android foi desenvolvido por uma empresa própria chamada Android, a empresa foi comprada pela Google em 2005 e posteriormente passou a ser desenvolvido em 2007 por uma organização que une várias empresas com o objetivo de criar padrões abertos para dispositivos móveis, essa organização é denominada OHA (Open Handset Alliance). A OHA é composta por empresas fabricantes de dispositivos móveis, operadoras, empresas de comercialização, semicondutores e de software.

Ao longo da sua história desde o lançamento da versão estável 1.0 em 23 de setembro de 2008 o Android teve o lançamento de diversas versões. As versões mais importantes do Android possuem o nome de um doce como: Cupcake, Donut, Eclair, Froyo, Gingerbread, Honeycomp, Ice Cream Sandwich, Jelly Bean e a recente versão KitKat. As atualizações são gratuitas e normalmente liberadas pelo fabricante do aparelho.

O código do Android é Open Source e tem como base o kernel do Linux para gerenciamento de memória, processos, threads, segurança, etc. O Android tem um kit de desenvolvimento chamado Android SDK que permite o desenvolvimento de aplicativos para a plataforma Android. Esse kit tem uma versão para praticamente qualquer sistema operacional. Além disso, o Android também tem um sistema de gerenciamento de banco de dados nativo chamado SQLite e suporte para gráficos 3D baseado na API OpenGL ES.

Nas próximas seções veremos mais sobre os principais componentes da plataforma Android, como podemos utilizar seu kit de desenvolvimento e por fim faremos uma aplicação demonstrando como podemos utilizar Android e uma plataforma de desenvolvimento.

Componentes do Android

O Android possui quatro componentes principais no seu framework, são eles: Activities, Services, Intents e Broadcast receivers. Abaixo detalharemos melhor cada um dos componentes.

Uma Activity tem um ciclo de vida com diversos estados que ela pode passar e também diversos métodos que podem alterar o estado de uma Activity. Na criação de uma Activity temos o método onCreate() que é chamado uma única vez quando a Activity começa. O método onStart() é chamado quando a aplicação fica visível para o usuário. O método onStart() também é chamado quando a Activity está no estado Stopped e passa para o estado Started, isso ocorre quando por exemplo, uma Activity vai para a pilha pois uma outra Activity iniciou e após a Activity atual ser finalizada a Acvity anterior volta a entrar em execução, dessa forma temos a transição dos estados. O método onRestart() é necessário quando uma aplicação estiver prestes a ser chamada novamente. É o mesmo caso anterior, no entanto, onRestart() é chamado antes de onStart(). O método onResume() é chamado quando a aplicação vai interagir com o usuário e isso acontece em duas situações: quando a aplicação está ativa e vai passar para o estado Resumed ou quando a aplicação está em pausa (Paused) e vai passar para a situação Resumed. O método onPause() é o oposto do método onResume(), pois ele é chamado quando o sistema está prestes a retornar de uma outra Activity. O onResume() tira uma Activity do estado parado e põe em execução, enquanto que onPause() é chamado quando uma Activity está prestes a ser pausada e uma outra atividade entrará em execução. O método onStop() é chamado quando a aplicação não estiver mais sendo executada. Isso ocorre quando uma Activity sai do estado Paused e passa para Stopped. Por fim, onDestroy() é chamado quando a aplicação já terminou, ou quando o sistema necessita finalizar uma Activity. É o último método chamado no ciclo de vida de uma Activity.

A Figura 16 mostra os estados que uma Activity pode estar e os métodos que podem ser chamados para alterar o estado da Activity.

Figura 16. Ciclo de vida de uma Activity.

A Figura 17 mostra os estados que o Services pode estar e os métodos que podem ser chamados para alterar o seu estado.

Figura 17. Ciclo de vida de uma Service.

Kit de Desenvolvimento Android

Para desenvolvermos aplicativos Android primeiramente precisamos do Android SDK, o kit de desenvolvimento do Android que fornece as bibliotecas da API e as ferramentas necessárias para que possamos construir, testar e depurar nossos aplicativos Android. Se preferirmos ainda podemos fazer o download do pacote ADT (Android Developer Tools) onde podemos adquirir de uma só vez os componentes essenciais do SDK e uma versão da IDE Eclipse para que possamos desenvolver os aplicativos Android de uma forma muito mais ágil. Dessa forma, não precisamos baixar e configurar o SDK e ainda baixar e configurar o Eclipse.

Depois que o aplicativo estiver pronto podemos publica-lo no Google Play que é a loja virtual do Android. Para publicar nossos aplicativos no Google Play basta se autenticarmos com a nossa conta do Google, preencher os formulários e efetuar o pagamento 25 dólares com um cartão de crédito. Feito isso teremos acesso ao console do desenvolvedor Android.

Além da Google Play existem outras lojas que podemos distribuir nossas aplicações Android como a Amazon Appstore for Android, Getjar, Slide ME, F-Droid e AppsLib.

Desenvolvendo Aplicativos com Android

Para começar o desenvolvimento Android devemos fazer o download do JDK (Java Development Kit), visto que o Android faz uso da tecnologia Java; Devemos baixar também o Android SDK que possui diversas bibliotecas e ferramentas como o emulador para diversas plataformas; e por fim, devemos baixar o Eclipse e o Plugin ADT para facilitar o desenvolvimento para a plataforma Android. Para isso devemos visitar o site https://developer.android.com/sdk/index.html para baixar num pacote apenas o Android SDK, Eclipse e o plugin ADT, conforme ilustra a Figura 18.

Figura 18. Baixando num pacote o SDK, Eclipse e ADT.

O pacote acima apenas não possui o Java Development Kit. Se ainda não temos o JDK devemos fazer o download em http://www.oracle.com/technetwork/java/javase/downloads/index.html.

Inicialmente devemos criar um novo projeto Android em File -> New -> Android Application Project, conforme ilustra a Figura 19.

Figura 19. Criando um novo projeto Android.

Na próxima tela colocamos o nome da aplicação, o nome do projeto que aparecerá no Eclipse e o nome do pacote raiz da aplicação. A Figura 20 demonstra como nomeamos nossa App de teste.

Figura 20. Criando um novo projeto Android.

Além disso, selecionamos também o target do projeto para o qual ele será compilado. É sempre indicado utilizarmos a API mais recente. O campo Minimum Required SDK indica a menor API suportada pelo nosso aplicativo. APIs que estiverem abaixo do mínimo não serão capazes de rodar o aplicativo. Nas próximas telas selecionaremos o ícone do aplicativo, Activity padrão, etc.

Após os passos anteriores teremos a tela da Figura 21 sendo apresentada no Eclipse.

Figura 21. Tela inicial do eclipse com o projeto criado.

Podemos verificar que temos uma Activity e um layout associado a essa Activity. A aba "fragment_main.xml" exibida acima possui o layout da aplicação contendo um título e um texto padrão.

Clicando duas vezes em cima do texto “Hello World” seremos direcionamos para o código do aplicativo. Pode-se notar neste código que o trecho android:text="@string/hello_world" diz de onde está sendo adquirido o texto. Nesse caso, o texto está sendo adquirido do arquivo "string.xml" que fica na pasta "values" dentro do diretório res, ou seja, o caminho é res -> values -> string.xml.

Abrindo o arquivo "string.xml" verificamos que existem três elementos Strings com pares nome/valor e que podem ser editados. Novos elementos também podem ser adicionados.

A Figura 22 mostra o layout gráfico do arquivo.

Figura 22. Editando o arquivo strings.xml.

Para rodar a aplicação é muito simples basta ir em “Run As” -> “Android Application”, conforme ilustra a Figura 23.

Figura 23. Executando a aplicação Android.

Se nenhum dispositivo virtual foi criando ainda no gerenciador, a mensagem abaixo será exibida (Figura 24).

Figura 24. Configurando um dispositivo Android.

Basta clicar em Yes para configurar o dispositivo Android que usaremos para testar a aplicação. Na próxima tela (Figura 25) basta selecionarmos “Launch a new Android Virtual Device” e clicar em “Manager”.

Figura 25. Criando um novo dispositivo Android.

A janela "Android Virtual Device Manager" permite adicionarmos um novo dispositivo apenas clicando no botão "New", conforme a Figura 26.

Figura 26. Criando um novo dispositivo para o Android.

Na nova janela (Figura 27) podemos configurar o nosso dispositivo adicionando o nome do dispositivo virtual, a versão Android instalada, etc.

Figura 27. Configurando o Nexus para testar o aplicativo para o Android.

Depois de criado, basta clicar em “Start” e a seguir “Launch” para rodar o dispositivo virtual (Figuras 28 e 29).

Figura 28. Executando o aplicativo Android com o Emulador criado.

Figura 29. Executando o aplicativo Android com o Emulador criado.

Após isso, o emulador será carregado para ser executado conforme ilustra a Figura 30.

Figura 30. Carregando o emulador para ser executado.

Após isso, a tela da Figura 31 será exibida.

Figura 31. Carregando o aplicativo Android.

Devemos aguardar um tempo até que o aplicativo seja carregado, dependendo a espera pode ser um pouco maior que o desejável. Após isso a aplicação será executada e exibida na tela, conforme mostra a Figura 32.

Figura 32. Aplicação sendo executada no emulador.

Também podemos testar a aplicação diretamente em um aparelho Android, para isso será necessário configurá-lo antes. Essa configuração depende da versão do dispositivo. Basicamente precisamos conectar o dispositivo na porta USB e configura-lo. A configuração pode estar em diferentes caminhos no menu dependendo do dispositivo. Para versões anteriores ao Android 4.0 podemos ir em Menu > Configurações -> Aplicativos -> Desenvolvimento e deixar marcada a opção "USB Debugging". Se estamos utilizando alguma versão entre o Android 4.0 e 4.1.2 o caminho será Menu -> Configurações -> Opções do Desenvolvedor. A partir da versão 4.2 do Android o menu de opção de desenvolvimento vem oculto sendo necessário entrar em Configuração -> Sobre o telefone, depois rolar a tela até o fim e clicar sete vezes sobre "build number", feito isso basta seguir os passos da versão 4.0 para habilitar a execução do aplicativo.

Para executar o aplicativo no Android precisamos exportá-lo no formato apk. Para isso clique com o botão direito do mouse no nome do projeto e selecione Exportar, conforme ilustra a Figura 33.

Figura 33. Exportando nossa aplicação no formato apk.

Na próxima tela (Figura 34) selecione a pasta “Android” e “Export Android Application”.

Figura 34. Selecionando a opção de exportar uma App Android.

Na tela seguinte deveremos selecionar o projeto que queremos exportar.

Após isso, na tela "Keystore Selection" devemos selecionar uma chave para ser utilizada ou devemos criar uma nova chave e uma senha. Opte por criar uma nova chave, conforme a Figura 35.

Figura 35. Criando uma nova chave.

Na próxima tela preenchemos mais algumas informações da chave e clicamos em Next (Figura 36).

Figura 36. Finalizando a criação da chave.

Agora, no último selecionamos o destino do APK, conforme mostra a Figura 37.

Figura 37. Selecionando o caminho da Apk.

Por fim, já podemos voltar ao desenvolvimento do nosso projeto. Toda a programação é feita com Java. Para o desenvolvimento da interface basta arrastar os componentes da barra de ferramentas para o centro da tela.

Criando uma Aplicação Android de Exemplo

O Índice de Massa Corporal (IMC) é um índice que mede o grau de obesidade de uma pessoa. Através do cálculo de IMC é possível saber se alguém está acima ou abaixo dos parâmetros ideais de peso para uma determinada estatura. Para calcular o IMC é bem simples precisando apenas de uma fórmula que leva em conta o peso e a altura do indivíduo.

Nesse exemplo faremos uma aplicação que calcula o IMC de uma pessoa. Para isso inicialmente criamos um projeto no Eclipse chamado CalculoIMC, conforme mostra a Figura 38.

Figura 38. Criando um novo projeto no eclipse.

Na próxima tela criamos uma “Blank Activity”, conforme mostra a Figura 39.

Figura 39. Criando uma Blank Acitvity.

Agora com o projeto criado abra o arquivo “fragment_main.xml” e selecione a aba “Graphical Layout”. Após isso exclua o primeiro elemento Text View que possui o label “Hello World” e adicione dois Text View, dois Edit Text e um Button, conforme mostra a Figura 40.

Figura 40. Criando a tela principal do aplicativo.

Agora edite os dois Text View adicionados para “Digite o seu Peso:” e “Digite a sua Altura:” respectivamente. No botão coloque o texto “Calcular IMC”, conforme mostra a Figura 41.

Figura 41. Editando os componentes da tela.

Segue a Listagem 9 como ficou o código do arquivo “fragment_main.xml”.

Listagem 9. Código do arquivo “fragment_main.xml”.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context="com.example.calculoimc.MainActivity$PlaceholderFragment" > <TextView android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="24dp" android:text="Digite o seu Peso:" /> <EditText android:id="@+id/editText1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignLeft="@+id/textView2" android:layout_below="@+id/textView2" android:layout_marginTop="16dp" android:ems="10" android:inputType="textPersonName" > <requestFocus /> </EditText> <TextView android:id="@+id/textView3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignLeft="@+id/editText1" android:layout_below="@+id/editText1" android:layout_marginTop="28dp" android:text="Digite a sua Altura:" /> <EditText android:id="@+id/editText2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignLeft="@+id/textView3" android:layout_below="@+id/textView3" android:layout_marginTop="18dp" android:ems="10" /> <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/editText2" android:layout_centerHorizontal="true" android:layout_marginTop="46dp" android:text="Calcular IMC" /> </RelativeLayout>

Quando o usuário clicar no botão precisaremos capturar no evento do clique deste botão os valores que foram digitados para o peso e a altura. Esses valores precisarão ser capturados para serem enviados para uma segunda tela que fará o cálculo e apresentará o resultado ao cliente. Portanto, no arquivo “fragment_main.xml” acima adicione o código “android:onClick="sendMessage"” no fragmento de código do botão. Veja na Listagem 10 como ficou o código.

Listagem 10. Código do botão com o evento de clique.

<Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/editText2" android:layout_centerHorizontal="true" android:layout_marginTop="46dp" android:onClick="sendMessage" android:text="Calcular IMC" />

Após isso, na classe MainAcitivity, devemos adicionar o código que irá capturar o clique do botão, neste caso será o método sendMessage, conforme configurado no arquivo XML anterior. Dessa forma, adicione o método da Listagem 11 na classe.

Listagem 11. Método que processará o evento do botão.

public void sendMessage(View view) { }

Também precisamos criar a tela que irá exibir a mensagem do cálculo de IMC. Para isso devemos criar um novo layout clicando com o botão direito em cima da pasta res/layout e selecionando “New” -> “Other”. Na próxima tela selecione a opção “Android XML Layout” abaixo de “Android”. A seguir selecione o nome “segundatela”. As Figuras 42, 43 e 44 mostram a sequência de passos a serem seguidos.

Figura 42. Criando um novo layout.

Figura 43. Selecionando a opção “Android XML Layout File”.

Figura 44. Configurando o nome do projeto e finalizando.

Agora precisamos criar uma nova Activity chamada SecondActivity, lembrando que já temos a MainActivity. Para isso abra o arquivo "AndroidManifest.xml" e clique na aba "Application", conforme mostra a Figura 45.

Figura 45. Abrindo o arquivo AndroidManifest aba Application.

Agora, em “Application Nodes”, clique em “Add...”, conforme mostra a Figura 46.

Figura 46. Criando uma nova Activity.

Na próxima tela selecione a opção Activity e clique em OK, conforme mostra a Figura 47.

Figura 47. Selecionando uma Activity.

De volta ao AndroidManifest, clique no link "Name*" no canto inferior direito da janela para criar uma classe para a nova Activity. Podemos nomear a nova Activity como SecondActivity(Figura 48).

Figura 48. Criando uma nova classe Activity.

Certifique-se que as Activities estejam referenciadas igualmente, conforme ilustra a Figura 49.

Figura 49. Referenciando igualmente as duas Activity.

Para que a nova Activity utilize este layout, precisamos ir ao código do SecondActivity.java e adicionar no método onCreate() o seguinte fragmento de código “setContentView(R.layout.segundatela);”. Portanto, nossa classe ficará conforme a Listagem 12.

Listagem 12. Código da classe SecondActivity.

package com.example.calculoimc; import android.app.Activity; import android.os.Bundle; public class SecondActivity extends Activity { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.segundatela); } }

Agora devemos abrir a segunda tela que é chamada de “segundatela.xml” e adicionar um componente “Text View” para que possamos exibir o resultado nela. Deixaremos o Text View sem nenhum texto, conforme a Figura 50.

Figura 50. Adicionando um novo Text View na segundatela.xml.

Já podemos fazer a interação entre as Activities. Dessa forma, deveremos voltar para a MainActivity e adicionar o seguinte código no método sendMessage (Listagem 13).

Listagem 13. Adicionando códigos no método sendMessage para capturar os valores enviados e envia-los para a segunda tela.

public void sendMessage(View view) { EditText peso = (EditText) findViewById(R.id.editText1); EditText altura = (EditText) findViewById(R.id.editText2); Intent t = new Intent(MainActivity.this, SecondActivity.class); if (t != null) { t.putExtra("altura", altura.getText().toString()); t.putExtra("peso", peso.getText().toString()); startActivity(t); } }

O método sendMessage() sempre será chamado quando o botão for clicado, conforme configuramos anteriormente no XML do botão.

No código acima criamos uma variável do mesmo tipo do componente e utilizamos a função findViewById para associarmos a nossa variável ao componente.

Para chamarmos outra Activity, é necessário criar um Intent com o tipo da Activity que desejamos chamar e após isso utilizar o comando startActivity() passando a Intent criada como parâmetro. O intent tem uma estrutura do tipo chave/valor que podemos utilizar para passar a mensagem. Para adicionarmos a mensagem usamos o método putExra() passando como primeiro parâmetro a chave e com o segundo a mensagem.

Feito isso, agora devemos ir para a SecondAcitiy na função OnCreate() e utilizamos a função getIntent() para obtermos o intent e os dados enviados pela outra Activity. Portanto, o código da nossa SecondActivity ficará conforme a Listagem 14.

Listagem 14. Exemplo de código da SecondActivity.

package com.example.calculoimc; import com.example.calculoimc.R; import android.app.Activity; import android.os.Bundle; import android.widget.TextView; public class SecondActivity extends Activity { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.segundatela); TextView saida = (TextView) findViewById(R.id.textView1); String altura = ""; String peso = ""; Bundle extras = getIntent().getExtras(); if(extras !=null) { altura = extras.getString("altura"); peso = extras.getString("peso"); } //calcula imc double ResultadoIMC = Integer.valueOf(peso)/(Double.valueOf(altura)*Double.valueOf(altura)); String msg = ""; if( ResultadoIMC > 30 ) msg = "Atenção! Você está com Obesidade."; else if (ResultadoIMC > 25) msg = "Você está acima do peso normal."; else if (ResultadoIMC > 18.5) msg = "Parabéns, você está com o Peso normal."; else msg = "Parabéns, você está abaixo do peso normal"; saida.setText(msg); } }

Dependendo do resultado da nossa fórmula do cálculo do IMC disponibilizaremos uma mensagem na tela do usuário.

Por fim, basta executar a aplicação e testar. A Figura 51 mostra a tela inicial do aplicativo criado.

Figura 51. Tela inicial do aplicativo.

Podemos digitar alguns valores para testar. Por exemplo, digite uma altura de 1.75 e um peso de 80 quilos e clique no botão Calcular IMC. Teremos como resposta a tela da Figura 52.

Figura 52. Mostrando o resultado do processamento anterior.

Faça modificações e seus próprios testes no aplicativo agora que já temos uma noção bem melhor de como funciona um aplicativo desenvolvido para Android. É importante salientar que não é necessário ficar fechando o emulador após cada alteração, apenas devemos efetuar a alteração, salvar e dar um clean no projeto. Após isso já é possível testar o aplicativo com as alterações diretamente no emulador.

Bibliografia

[1] Mockflow WireframePro. Disponível em http://www.mockflow.com/.

[2] Tommi Mikkonen. Programming Mobile Devices: An Introduction for Practitioners. Editora Willey, 2012.

[3] Ed Burnette. Hello, Android Introducing Google’s Mobile Development Platform, 2nd Edition.

Artigos relacionados