TTI - Tópicos Avançados em TI
3º Ano do Curso Técnico de Informática Integrado ao Ensino Médio
Atividade de Aprendizagem por meio do App Inventor
------------------------------------------------------------------------------------------------------------------------------
Tutorial: Visualização de endereços em mapa do Google Maps
Observação importante: Este tutorial se baseia no tutorial MapIt, de autoria de M. Hossein
Amerkashi e disponível na biblioteca de tutoriais do App Inventor. O fato de se basear implica
que existem diferenças na estrutura de implementação do aplicativo a ser desenvolvido
conforme os passos deste documento. A maioria dos blocos e componentes de implementação
foram renomeados e traduzidos para a Língua Portuguesa. Além disso, procedimentos foram
suprimidos e outros foram alterados. Sendo assim, o aproveitamento da solução pronta e
disponível na Web, não se mostra compatível ou válida como indicativo de realização dos passos
apresentados neste texto.
Objetivos de aprendizagem deste tutorial:
a) Manipulação de listas de dados em memória (criar listas e adicionar itens, salvando
dados em memória RAM);
b) Uso do componente ListPicker que possibilita o acesso a listas de dados;
c) Uso do componente LocationSensor que possibilita obter a localização atual, pelo GPS
do aparelho celular;
d) Uso do componente ActivityStarter que possibilitar iniciar o aplicativo Google Maps para
um endereço corrente ou informado;
e) Uso do componente Notifier que possibilita exibir mensagens ao usuário, inclusive com
comandos de formatação do texto (negrito, itálico, cor, etc);
f) Uso do componente TinyDB que possibilita salvar e recuperar dados em memória, neste
caso, uma lista de endereços;
g) Visualização de informações em mapas geográficos disponíveis em serviços da Web
providos pela plataforma Google Maps; e
h) Outros elementos presentes em Tecnologias da Informação como: manipulação de
textos, validação básica, emprego de modularização por procedimento ou função e
passagem de parâmetros para procedimento.
Obs: Este aplicativo não pode ser testado em simuladores Android como o NOX, por exemplo,
pois até o momento, o ActivityStarter não funciona adequadamente nestes ambientes. No caso
deste tutorial, ERRO nº 601 é retornado quando se tenta iniciar o Google Maps. Assim, o AI
Companion deve ser conectado a um smartphone real, executando o Android.
Como funciona o aplicativo resultante deste tutorial
A opção “Ver minha localização no mapa” estará disponível de imediato. Contudo, a
visualização de um endereço específico depende deste endereço ser selecionado a partir de uma
lista de endereços registrados. Assim, você não consegue digitar textos no campo “Endereço
selecionado”. Você precisa, primeiramente, registrar pelo menos um endereço na lista de
endereços e depois clicar em “Selecionar endereço registrado”. A lista será exibida e a clicar
sobre um dos endereços este será copiado para o campo “Endereço selecionado”. Com o texto
neste campo você poderá clicar em “Ver no mapa”. Fazendo isso, o Google Maps será iniciado,
Prof. Osvandre Martins Página 1 de 8
TTI - Tópicos Avançados em TI
3º Ano do Curso Técnico de Informática Integrado ao Ensino Médio
Atividade de Aprendizagem por meio do App Inventor
------------------------------------------------------------------------------------------------------------------------------
mostrando um mapa com a posição referente ao endereço. Para continuar usando o aplicativo
você deve comandar a volta para tela anterior no seu smartphone.
A figura a seguir ilustra as principais interfaces do aplicativo. O funcionamento descrito
acima é ilustrado pela sequência de telas enumeradas de 1 a 3.
Passos para construir o aplicativo
1 – Crie a interface de usuário do aplicativo e selecione os componentes funcionais
Na perspectiva Designer, crie a interface de usuário do aplicativo considerando a visualização e
os componentes ilustrados na imagem a seguir. Note-se que vários componentes possuem
nome com prefixos em 3 (três) letras. Estes prefixos indicam o tipo desses componentes,
conforme a tabela abaixo.
Prefixo Tipo de Componente
lbl Label
lpk ListPicker
btn Button
txt TextBox
ATENÇÃO: Renomeie os componentes conforme os nomes mostrados na lista de componentes
da figura abaixo. Alguns componentes permanecem com os nomes sugeridos
(HorizontalArrangement1, Vertical Arrangement1 e outros). O componente txtEndSel (TextBox
para o endereço selecionado pelo usuário) deve ter a sua propriedade ReadOnly (Somente
Leitura) assinalada.
Prof. Osvandre Martins Página 2 de 8
TTI - Tópicos Avançados em TI
3º Ano do Curso Técnico de Informática Integrado ao Ensino Médio
Atividade de Aprendizagem por meio do App Inventor
------------------------------------------------------------------------------------------------------------------------------
2 – Implementação dos blocos de algoritmos/funcionalidades.
2.1 – Inicializações
Inicialize duas variáveis globais: tagEndereco (uma tag usada para identificar um
conjunto de itens armazenados no TinyDB); e listaEnderecos (uma lista em memória dos
endereços registrados pelo usuário). Inicialize também a interface principal com o usuário
(Screen1), conforme os blocos a seguir.
Prof. Osvandre Martins Página 3 de 8
TTI - Tópicos Avançados em TI
3º Ano do Curso Técnico de Informática Integrado ao Ensino Médio
Atividade de Aprendizagem por meio do App Inventor
------------------------------------------------------------------------------------------------------------------------------
2.2 – Mensagem de ajuda para o usuário
Ao clicar no botão Ajuda o aplicativo usará o Notifier para exibir uma mensagem ao
usuário informando os passos para ele utilizar o aplicativo. Note-se nos textos unidos pelo bloco
join, a presença de formatadores de exibição, no caso <b> e </b>. Você pode formatar a exibição
das mensagens com comandos HTML, mudando cores e outras propriedades.
A mensagem exibida ao usuário é ilustrada na figura a seguir.
2.3 – Registro de endereços a visualizar
Para visualizar endereços no mapa o usuário deverá registrá-los. Este comportamento
foi definido apenas para encaminhar a aprendizagem do uso de listas e de validações.
Ao clicar no botão Novo Endereço, os controles para digitação, salvamento ou
cancelamento são exibidos. Este botão é desabilitado e uma mensagem de auxílio à digitação
do campo (Hint) é exibida. A mensagem é a seguinte: “Informe o logradouro, número, cidade e
estado. Para registrar, clique em Salvar!”.
Prof. Osvandre Martins Página 4 de 8
TTI - Tópicos Avançados em TI
3º Ano do Curso Técnico de Informática Integrado ao Ensino Médio
Atividade de Aprendizagem por meio do App Inventor
------------------------------------------------------------------------------------------------------------------------------
Após digitar o endereço que se deseja visualizar no mapa, o usuário pode Salvar este
endereço na lista, clicando no botão com este texto. Neste bloco realiza-se uma verificação e
validação do texto referente ao endereço. Ele não pode ser um texto vazio (is empty),
removendo os espaços em branco do começo e do fim (trim). Se o texto do endereço não for
válido, uma mensagem de alerta é exibida. Caso seja válido, um procedimento chamado
incluirEndereco é invocado e este recupera a lista de endereços do ListPicker, adiciona o texto
do endereço digitado e grava a lista no TinyDB usando a tag definida na inicialização. Após o
registro do endereço na lista uma mensagem é exibida ao usuário, informando o sucesso, e os
controles gráficos da tela do usuário são ajustados para esperar a próxima ação dele.
O usuário pode Cancelar a operação de inclusão de endereço na lista. Se ele fizer isso, o
arranjo vertical que contém os controles para registro do novo endereço é ocultado e o botão
Novo Endereço volta a ser habilitado.
Prof. Osvandre Martins Página 5 de 8
TTI - Tópicos Avançados em TI
3º Ano do Curso Técnico de Informática Integrado ao Ensino Médio
Atividade de Aprendizagem por meio do App Inventor
------------------------------------------------------------------------------------------------------------------------------
2.4 – Seleção de endereço e visualização no mapa
Para visualizar um endereço no mapa o usuário precisa selecionar um endereço na lista
de endereços registrados. Para acessar essa lista ele precisa clicar no componente ListPicker
(lpkEnderecosGravados) que se mostra como um botão na interface do usuário. No nosso
aplicativo, o texto deste componente é “Selecionar endereço registrado”. Clicando no botão
que representa o listPicker, o componente já exibe a lista com os endereços registrados e
aguarda o usuário selecionar. Quando o usuário clica no endereço desejado, o evento
AfterPicking do componente é lançado. No bloco de tratamento deste evento, o texto do
componente referente ao endereço selecionado (txtEndSel) é alterado com base no item
selecionado na lista.
Uma vez selecionado um endereço, ele será exibido no campo Endereço selecionado.
Então o usuário poderá comando Ver no Mapa, clicando no botão com este texto. A rotina de
tratamento do evento de clique neste botão é a seguinte. Note-se que uma verificação e
validação do texto selecionado é realizada. Se o texto for “vazio”, uma mensagem de alerta é
exibida ao usuário. Caso contrário, um procedimento chamado mostrarNoMapa é invocado.
Neste caso, note-se que é passado um parâmetro para este procedimento que é o texto
referente ao endereço selecionado.
Conforme citado anteriormente, o procedimento mostrarNoMapa recebe um
parâmetro que é reconhecido, internamente, como endereco. Trata-se do texto referente ao
endereço que se pretende ver no mapa. De posse dele, as propriedades Action e DataUri do
componente ActivityStarter são configuradas e a ação StartActivity é executada, iniciando o
Google Maps, passando o endereço recebido como valor do parâmetro q requerido pela ação
VIEW da atividade Android referente ao Google Maps.
Prof. Osvandre Martins Página 6 de 8
TTI - Tópicos Avançados em TI
3º Ano do Curso Técnico de Informática Integrado ao Ensino Médio
Atividade de Aprendizagem por meio do App Inventor
------------------------------------------------------------------------------------------------------------------------------
Este procedimento é resultado da aplicação de uma técnica de programação
estruturada chamada modularização. Esta técnica representa uma forma de reduzir trechos ou
blocos repetidos de comandos em um programa, criando procedimentos ou funções. No caso,
este procedimento surgiu porque em dois blocos do tutorial MapIt havia grupos de comandos
semelhantes em que a única diferença era o texto do endereço a ser exibido no mapa. Logo, um
caso perfeito para se aplicar a modularização.
2.5 – Visualização da posição atual do smartphone no mapa
Por fim, temos a implementação da funcionalidade referente ao botão com o texto Ver
minha localização no mapa. Esta funcionalidade se aproveita da modularização realizada por
meio do procedimento mostrarNoMapa. Isto pois ela faz uso de uma propriedade do
componente LocationSensor (GPS) que é o texto do endereço corrente mais próximo à latitude
e longitude indicadas pelo sensor. Esta é uma funcionalidade desenvolvida em Sistemas de
Informação Geográfica.
3 – Verificação da Implementação e Testes
Verifique se o seu aplicativo está completo e teste o funcionamento dele. Ele precisará
ter 12 blocos de implementação para estar, possivelmente, completo, conforme ilustrado na
figura a seguir.
Prof. Osvandre Martins Página 7 de 8
TTI - Tópicos Avançados em TI
3º Ano do Curso Técnico de Informática Integrado ao Ensino Médio
Atividade de Aprendizagem por meio do App Inventor
------------------------------------------------------------------------------------------------------------------------------
Prof. Osvandre Martins Página 8 de 8