Artigo WebMobile 23 - Utilizando Web Services no Google Android

Esse artigo faz parte da revista WebMobile edição 23. Clique aqui para ler todos os artigos desta edição

Para que serve:

Por meio da aplicação exemplo utilizada, demonstrar passo a passo como consumir Web Services em Android usando bibliotecas adicionais, como é o caso do KSOAP2, aproveitando a vantagem de se utilizar mapas para mostrar a localização.

Em que situação o tema é útil:

   Consultar as informações referentes ao CEP informado (por exemplo, endereço, cidade, estado, etc), tendo a facilidade de visualizar esta localização no mapa por meio da API de Mapas em Android e do componente ItemizedOverlay, para construções de novas camadas para sobrepor MapViews.

    Há muito que os Web Services vêm sendo utilizados em aplicações comerciais para resolver – acima de tudo – o problema da “Babel” dos sistemas, permitindo que vários sistemas escritos em linguagens distintas se comuniquem por meio de serviços (métodos) que são expostos para que outros módulos ou sistemas possam acessá-los. Para isso, a tecnologia XML associada ao protocolo SOAP são os protagonistas deste cenário. Ela é utilizada como canal comum de comunicação e juntos constituem a arquitetura SOA (Service Oriented Architecture – Arquitetura Orientada à Serviço).

   Provado o sucesso destes no universo das tecnologias do lado do servidor (como PHP, JSP, JSF, etc), tão logo a tecnologia tornou-se disponível para o mundo ubíquo por meio de implementação do protocolo SOAP para as várias linguagens de programação móvel (dentre elas, a plataforma Android).

   Porém, a tecnologia teve que ser “enxugada” devido a características intrínsecas aos Web Services. Por exemplo, permitir trabalhar com estruturas de dados mais complexas, manipular várias linhas retornadas no XML de resposta a um serviço, carregar uma hierarquia de árvore era quase inviável devido às capacidades restritas dos dispositivos móveis referentes à capacidade de processamento e espaço de memória reduzido.

   Este artigo demonstrará passo a passo como se acessar um Web Service utilizando a biblioteca KSOAP2 em Android. Para isso, será criada uma aplicação que acessa um Web Service público disponível em www.maniezo.com.br que será utilizado para consultar o CEP de determinada localidade e retorna informações adicionais, mostrando também a localização correspondente deste CEP no mapa usando o Google “Android” Maps.

   Na época da escrita deste artigo, foram utilizados a IDE Eclipse 3.4 (codinome Ganymede, disponível em www.eclipse.org/ganymede/) juntamente com o plug-in para desenvolvimento de Android no Eclipse chamado ADT (Android Development Tools) e a versão 1.0 Release 2 (r2) do SDK para Windows (http://code.google.com/android/download.html). Atenção: muito cuidado para baixar a versão do SDK compatível com a versão do plug-in ADT, caso contrário poderá gerar erros indesejáveis em sua aplicação (ler Nota DevMan 1)!

Nota DevMan 1: Compatibilidade entre versões do SDK

   Um dos maiores problemas que estamos enfrentamos durante o desenvolvimento de uma aplicação em Android talvez seja este “bombardeio” de versões de releases do SDK que a plataforma tem sofrido durante este período de amadurecimento do Google Android, o que implicou severamente na parcial incompatibilidade entre as aplicações desenvolvidas em versões diferentes. Elas eram desenvolvidas em uma versão e quase sempre sofriam ajustes (renomeações de APIs, remoção de classes, etc) para que fosse possível rodá-la na versão mais recente.

   Além disso, existe uma correspondência entre a versão de um SDK e a versão do plug-in ADT. Por exemplo, o SDK 1.0 Release 2 (versão mais atual disponível durante a escrita deste artigo) requer a versão 0.8.0 do plug-in Eclipse ADT para que o desenvolvimento de aplicações funcione corretamente.

   Sendo assim, tenha em mente esta característica quando estiver desenvolvendo, adaptando ou migrando aplicações em Android que foram construídas utilizando versões de SDKs diferentes. Para baixar a última versão do SDK acesse http://code.google.com/intl/pt-BR/android/download.html. Para mais informações de como instalar/atualizar o plug-in Eclipse ADT acesse http://code.google.com/intl/pt-BR/android/intro/installing.html#installingplugin.

Construindo a GUI da aplicação

   Nossa aplicação será utilizada para buscar informações de determinada localidade de acordo com o CEP informado, sendo que essa busca será feita por meio do acesso a um Web Service.  Ela será muito útil para sabermos mais informações das mais variadas localidades do Brasil (por enquanto, ficamos apenas com a implementação via emulador e esperamos ansiosamente para que o G1 – atualmente algum dispositivo com a plataforma Android chegue logo no Brasil!). A aplicação ainda mostra a localidade específica deste CEP no mapa de acordo com sua latitude/longitude.

   Como ponto de partida para qualquer desenvolvimento de uma aplicação, criaremos um novo projeto Android. A Figura 1 mostra as configurações (nome do projeto, da Activity, etc) que foram utilizadas para este projeto.

   A aplicação é bem simples e é composta – essencialmente – de TextViews para visualizar textos, um EditText para entrada de texto (no nosso caso o CEP), um ImageButton para disparar eventos de cliques; e um MapView, que representa o mapa renderizado pelo Google Maps que exibirá a localização exata deste CEP.

   LinearLayout é o layout padrão utilizado por todos os widgets. Dentro do primeiro layout percebemos a utilização de um ViewFlipper, que é uma das novidades na plataforma que une o  conceito de animação (um outro tipo de recurso em Android) para ser aplicada às Views. Este componente será utilizado para animar os TextViews que informam como se utilizar nosso buscador, como numa espécie de letreiro digital que ficará sendo exibido continuamente no topo e no centro da tela do dispositivo, com o efeito de aparecimento (fade in, referente ao atributo android:fromAlpha=”0.0” que significa totalmente opaco) e desaparecimento (fade out, referente ao atributo android:toAlpha=”1.0” que significa totalmente transparente), com duração da animação de 100 milisegundos (android:duration=”100”), utilizando o efeito de aceleração (atributo android:interpolator), referenciado por meio de @anim:accelerate_interpolator em fade.xml (Listagem 1), que está em res/anim, diretório padrão para Android carregar recursos de animação. Ainda na tag <ViewFlipper>, encontramos o atributo android:flipInterval=”2000” informando que cada View terá a duração de 2 segundos (2000 milisegundos) para ser exibido na tela. O atributo android:padding diz respeito ao espaçamento entre o filho e o pai que, nesse caso, vai ser 10 pixels igualmente em todos os lados: cima, baixo, esquerda e direita.

Listagem 1. fade.xml

<?xml version="1.0" encoding="utf-8"?>

<alpha xmlns:android="http://schemas.android.com/apk/res/android"

       android:interpolator="@android:anim/accelerate_interpolator"

       android:fromAlpha="0.0" android:toAlpha="1.0" android:duration="100" />

   Seguindo, temos um outro LinearLayout – na direção horizontal – que contém um TextView com o texto “CEP:” (referenciado por @string/cep_desc), o EditText para entrada do CEP (@+id/etCEP) e um ImageButton (@+id/imgBtnPesquisar) que possui as mesmas funcionalidades do Button, exceto que em vez de um texto, uma imagem é mostrada (no nosso caso uma imagem de uma lupa por meio da referência @drawable/search).

   Logo abaixo, temos também um LinearLayout que contém os TextViews que mostrarão as informações da localidade do CEP informado. Essas informações serão preenchidas no momento que a busca for realizada com sucesso. Essas informações são respectivamente: o Estado (@+id/tvEstado), a Cidade (@+id/tvCidade), o Bairro (@+id/tvBairro), o tipo do logradouro (@+id/tvTipoLogradouro),  o Logradouro (@+id/tvLogradouro) e Complemento (@+id/tvComplemento). A Listagem 2 mostra o arquivo main.xml que representa a GUI da aplicação.

   Logo abaixo temos um RelativeLayout que contém um MapView que exibirá a localização exata (latitude/longitude) de acordo com o CEP fornecido; e um LinearLayout que será utilizado para adicionarmos um controle de zoom em nosso mapa. Um detalhe muito importante: a partir da versão 0.9 do SDK da plataforma, para que possamos utilizar MapViews é obrigatório assinarmos, por meio de uma chave privada, a aplicação e adicionarmos umas tags específicas no AndroidManifest.xml, caso contrário sua aplicação irá abortar quando estiver prestes a ser executada.

Listagem 2.main.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

         android:orientation="vertical" android:layout_width="wrap_content"

         android:layout_height="wrap_content" android:id="@+id/rootLayout">

         <ViewFlipper android:id="@+id/flipper"

                   android:layout_width="fill_parent" android:layout_height="wrap_content"

                   android:flipInterval="2000" android:padding="10px">

                   <TextView android:layout_width="fill_parent"

                            android:layout_height="wrap_content" android:gravity="center_horizontal"

                            android:textSize="16px" android:text="Entre com o CEP," />

                   <TextView android:layout_width="fill_parent"

                            android:layout_height="wrap_content" android:gravity="center_horizontal"

                            android:textSize="16px" android:text="clique na lupa ao lado ou" />

                   <TextView android:layout_width="fill_parent"

                            android:layout_height="wrap_content" android:gravity="center_horizontal"

                            android:textSize="16px" android:text="pressione ENTER" />

         </ViewFlipper>

         <LinearLayout android:orientation="horizontal"

                   android:layout_width="wrap_content" android:layout_height="wrap_content">

                   <TextView android:id="@+id/tvCepDesc" android:layout_width="wrap_content"

                            android:layout_height="wrap_content" android:text="@string/cep_desc" />

                   <EditText android:id="@+id/etCEP" android:layout_width="240px"

                            android:hint="Digite o CEP" android:layout_height="wrap_content" />

                   <ImageButton android:id="@+id/imgBtnPesquisar"

                            android:layout_width="wrap_content" android:layout_height="wrap_content"

                            android:src="@drawable/search" />

         </LinearLayout>

         <LinearLayout android:orientation="vertical"

                   android:layout_width="fill_parent" android:layout_height="wrap_content">

                   <TextView android:id="@+id/tvEstado" android:layout_width="wrap_content"

                            android:textSize="12px" android:layout_height="wrap_content"

                            android:text="@string/estado" />

                   <TextView android:id="@+id/tvCidade" android:layout_width="wrap_content"

                            android:textSize="12px" android:layout_height="wrap_content"

                            android:text="@string/cidade" />

                   <TextView android:id="@+id/tvBairro" android:layout_width="wrap_content"

                            android:textSize="12px" android:layout_height="wrap_content"

                            android:text="@string/bairro" />

                   <TextView android:id="@+id/tvTipoLogradouro"

                            android:layout_width="wrap_content" android:textSize="12px"

                            android:layout_height="wrap_content" android:text="@string/tipo_logradouro" ...