Professor Rodrigo Bossini

https://sites.google.com/site/professorrodrigobossini/

MIT – App Inventor

1 Introdução

Neste material iremos desenvolver uma aplicação que registra a localização do usuário usando os
mecanismos disponíveis no celular. Quando o usuário desejar, ele pode interagir com a aplicação
para que ela armazene a sua localização atual. No futuro, quando potencialmente estiver em uma
localização diferente, ele pode interagir novamente com o aplicativo para que ele mostre uma
rota entre a localização em que ele está no momento e a localização que ele salvou previamente.
Note que esta aplicação pode ser útil, por exemplo, para ajudar o usuário a encontrar o seu
veículo depois de tê-lo estacionado e ter ido a um evento.

2 Desenvolvimento

2.1 (Abrindo a plataforma) O primeiro passo é abrir a plataforma de desenvolvimento. Ela

pode ser acessada pelo Link 2.1.1.

Link 2.1.1
http://ai2.appinventor.mit.edu/?locale=pt_BR

Escolha um nome apropriado para a sua aplicação, que te ajude a lembrar a sua razão de ser.

2.2 (Construindo a interface gráfica) A interface gráfica fará uso de diversos objetos do tipo
OrganizacaoHorizontal. As descrições de cada um deles bem como de seus filhos são dadas a
seguir.

2.2.1 (Cabeçalho para a localização atual) O primeiro OrganizacaoHorizontal terá as seguintes

propriedades:

- AlinhamentoHorizontal: Centro
- AlinhamentoVertical: Centro
- Altura: 7 percentual
- Largura: Preencher principal
 Professor Rodrigo Bossini
https://sites.google.com/site/professorrodrigobossini/

Seu único filho é um Legenda cujas propriedades são as seguintes:

- nome: CabecalhoLocalizacaoAtualLegenda
- FonteNegrito: Marcar a caixa
- Texto: Sua Localização Atual

2.2.2 (Texto para a localização atual) O segundo OrganizacaoHorizontal tem as seguintes

propriedades:

- AlinhamentoHorizontal: Centro
- AlinhamentoVertical: Centro
- Altura: 7 percentual
- Largura: Preencher principal

Ele possui dois filhos do tipo Legenda, cujos nomes são LocalizacaoAtualLegenda e
DadosLocalizacaoAtualLegenda. Altere a propriedade Texto deles para Endereço: e
Desconhecida, respectivamente.

2.2.3 (Coordenadas latitude e longitude da localização atual) O terceiro

OrganizacaoHorizontal exibe as coordenadas latitude e longitude da localização atual. Suas
proprieadades são as seguintes:

- AlinhamentoHorizontal: Centro
- AlinhamentoVertical: Centro
- Altura: 7 percentual
- Largura: Preencher principal

Ele possui quatro filhos do tipo Legenda, cujos nomes são GPSLegenda,
LatitudeAtualLegenda, VirgulaLegenda e LongitudeAtualLegenda. Altere a propriedade
Texto deles para GPS: , 0.0, , (uma vírgula) e 0.0, respectivamente.

2.2.4 (Botão para lembrar a localização atual) O quarto OrganizacaoHorizontal irá exibir um
único botão para que o usuário possa clicar e registrar a localização atual. Suas propriedades são
as seguintes:

- AlinhamentoHorizontal: Centro
- AlinhamentoVertical: Centro
- Altura: 7 percentual
- Largura: Preencher principal
 Professor Rodrigo Bossini
https://sites.google.com/site/professorrodrigobossini/

Ele possui um botão como filho. Seu nome é LembrarLocalizacaoBotao. Suas propriedades são
as seguintes:

- Ativado: Desmarcar a caixa, pois não dá pra lembrar de uma localização se nenhuma tiver sido
detectada, o que pode ocorrer quando a aplicação inicializar
- Texto; Lembrar Localização Atual

2.2.5 (Cabeçalho para a última localização salva) O quinto OrganizacaoHorizontal servirá

para exibir um cabeçalho para a última localização salva. As suas propriedades são as seguintes:

- AlinhamentoHorizontal: Centro
- AlinhamentoVertical: Centro
- Altura: 7 percentual
- Largura: Preencher principal

Ele possui um único filho do tipo Legenda, cujo nome é

CabecalhoUltimaLocalizacaoSalvaLegenda. Suas propriedades são as seguintes:

- FonteNegrito: Marcar a caixa

- Texto: Última Localização

2.2.6 (Exibição do último endereço salvo) O sexto OrganizacaoHorizontal irá exibir o endereço
da última localização salva. As suas propriedades são as seguintes:

- AlinhamentoHorizontal: Centro
- AlinhamentoVertical: Centro
- Altura: 7 percentual
- Largura: Preencher principal

Ele possui dois filhos do tipo Legenda, cujos nomes são EnderecoSalvoLegenda e
DadosEnderecoSalvoLegenda. Altere a propriedade Texto deles para Endereço: e
Desconhecido, respectivamente.

2.2.7 (Exibição das coordenadas latitude e longitude do último endereço salvo) O sétimo
OrganizacaoHorizontal irá exibir as coordenadas da última localização salva. Suas propriedades
são as seguintes:

- AlinhamentoHorizontal: Centro
- AlinhamentoVertical: Centro
- Altura: 7 percentual
- Largura: Preencher principal
 Professor Rodrigo Bossini
https://sites.google.com/site/professorrodrigobossini/

Ele possui quatro filhos do tipo Legenda, cujos nomes são GPSLembradoLegenda,
LatitudeLembradaLegenda, Virgula2Legenda e LongitudeLegendaLegenda. Altere o valor
de sua propriedade Texto para GPS:, 0.0, ,(uma vírgula) e 0.0.

2.2.8 (Botão para a exibição da rota) O oitavo OrganizacaoHorizontal irá exibir um botão que,
quando clicado, irá exibir em um mapa uma rota entre a localização atual do usuário e a última
localização que ele salvou. Suas propriedades são as seguintes:

- AlinhamentoHorizontal: Centro
- AlinhamentoVertical: Centro
- Altura: 7 percentual
- Largura: Preencher principal]

Seu único filho é um botão cujo nome é RotasBotao. Suas propriedades são as seguintes:

- Ativado: Desmarcar a caixa, já que não dá para calcular uma rota se não existirem localizações
salvas previamente.
- Texto: Exibir Rota

2.2.9 (Componentes invisíveis) A aplicação possui, ainda, componentes invisíveis do tipo

SensorDeLocalização (para capturar a localização do usuário), TinyDB (para armazenar a
localização quando ele desejar, em meio persistente) e um NavegadorWeb para exibir o mapa.

2.3 (O que fazer quando for detectada uma nova localização?) Quando uma nova localização
for detectada o usuário provavelmente terá se movido. Desejamos alterar o conteúdo dos
componentes visuais da aplicação refletindo a nova localização. Isso pode ser feito com um
manipulador de eventos do tipo quando/LocalizaçãoAlterada. No editor de blocos, clique no
componente SensorDeLocalização à esquerda para encontrar esse manipulador de eventos. A
seguir, ajuste seu conteúdo como na Figura 2.3.1. Note que ajustamos o endereço e coordenadas
atuais, bem como habilitamos o botão que permite ao usuário salvar a localização detectada.
 Professor Rodrigo Bossini
https://sites.google.com/site/professorrodrigobossini/

Figura 2.3.1

2.4 (Clique no botão de lembrar a localização) Quando o usuário clicar no botão para lembrar
a localização atual, desejamos atualizar a interface gráfica (além de salvar os dados atuais em
uma base, o que faremos adiante). Além disso, desejamos habilitar o botão que permite traçar
rotas, já que com uma localização atual e com uma localização salva, já podemos traçar uma rota
entre elas. Veja a Figura 2.4.1.

Figura 2.4.1

2.5 (Abrindo um mapa) Quando o botão de traçar rota for clicado, desejamos abrir um Google
Maps com uma rota entre os dois endereços (o atual e o salvo). Isso pode ser feito muito
facilmente abrindo a URL do Link 2.5.1.

Link 2.5.1
http://maps.google.com/maps?saddr=-23.5677666,-46.6487763&daddr=-23.5856,-46.6097

Nesta URL informamos coordenadas da fonte (saddr de source address) e do destino (daddr de
destination address). Neste exemplo, a fonte é a Avenida Paulista e o destino é o Museu do
Ipiranga.

Dica: Caso queira descobrir as coordenadas de uma determinada localização, visite o Google
Maps (maps.google.com) e coloque um marcador na localização desejada. Basta clicar com o
direito sobre ela, logo a seguir.
 Professor Rodrigo Bossini
https://sites.google.com/site/professorrodrigobossini/

Quando o botão da aplicação for clicado, nosso objetivo é montar uma string, concatenando as
coordenadas da localização atual do usuário e da última localização salva por ele. A seguir,
usamos o NavegadorWeb para abrir o mapa. Veja a Figura 2.5.1. Figura 2.5.1

2.6 (Armazenando o endereço e coordenadas em meio persistente) A aplicação se torna

muito mais interessante caso o usuário possa armazenar os dados em meio persistente já que,
depois disso, ele pode fechá-la e até mesmo desligar o celular. Quando voltar a utilizá-la, ele terá
acesso a ela e poderá traçar uma rota entre ela e a sua localização atual. Ajuste o quando/Clique
do botão RotasBotao como na Figura 2.6.1. Lembre-se que em um TinyDB armazenamos dados
como pares chave/valor.

Figura 2.6.1
 Professor Rodrigo Bossini
https://sites.google.com/site/professorrodrigobossini/

2.7 (Utilizando localização e coordenadas armazenadas em meio persistente) Quando a

aplicação inicia, desejamos verificar se há dados já armazenados e, se for o caso, exibi-los na
tela. Caso contrário, desejamos exibir o valor padrão (endereço desconhecido e coordenadas
iguais a 0.0). Além disso, caso exista um endereço previamente salvo, desejamos habilitar o
botão para calculo de rotas. Veja a Figura 2.7.1. O bloco quando/Inicializar da tela Screen1
executa assim que a aplicação começa.

Figura 2.7.1
 Professor Rodrigo Bossini
https://sites.google.com/site/professorrodrigobossini/

Referências

MIT App Inventor | Explore MIT App Inventor. 2020. Disponível em

<https://appinventor.mit.edu/>. Acesso em junho de 2020.

WOLBER, D.; ABELSON, H.; SPERTUS, E.; LOONEY, L. App Inventor 2. Create Your
Own Android Apps. Second Edition. O’Reilly Media, 2018.