React Native: integrando geolocalização para mapas

Olá, estudante da Alura! Meu nome é Pedro Mello e serei seu instrutor.

Audiodescrição: Pedro é um homem branco, com cabelos e barba escuras. Usa piercing no nariz, brincos e uma camiseta preta. Ao fundo, uma parede lisa com iluminação degradê do rosa ao azul. Há decorações penduradas na parede, além de uma prateleira com itens de decoração.

Boas-vindas a mais um curso na nossa plataforma Alura. Neste curso, continuaremos a ajudar a Desbrava App. Caso ainda não conheça, a Desbrava App é um aplicativo que funciona como um guia de aventuras, permitindo registrar e acessar aventuras.

Com os emuladores abertos em tela, encontramos formulários para adicionar aventuras em ambas as plataformas, cada uma com suas particularidades nativas, um ponto que será enfatizado.

Objetivos do curso

Neste curso, trabalharemos com localização, integrando o Maps Kit no iOS e o Google Maps no Android.

Realizaremos a integração com o Expo Location para acessar a geolocalização e localização do usuário, configurando de forma nativa em ambas as plataformas.

Este é um conteúdo interessante, e a equipe da Desbrava App está bastante animada, pois sabem que você, estudante, é a pessoa ideal para ajudar na implementação deste formulário e da parte de localização no aplicativo.

Pré-requisitos

Para mergulharmos nesta jornada, é necessário que já tenhamos conhecimento em algumas tecnologias. Como estamos utilizando o React Native, é importante que já tenhamos familiaridade com a plataforma React e, se possível, experiência com React Native, especialmente com TypeScript. Utilizaremos bastante o TypeScript para realizar tipagens e verificar o typecheck de algumas bibliotecas que serão usadas ao longo do curso. As demais configurações nativas e bibliotecas serão abordadas juntos durante o curso.

Vamos nos preparar para esta jornada e explorar a geolocalização em aplicações React Native. Nos encontramos em breve. Até lá!

Vamos começar a trabalhar no módulo de geolocalização. Anteriormente, foi solicitado que integrássemos o módulo nativo de câmera, e agora o foco é desenvolver um módulo de geolocalização.

Atualmente, é possível tirar fotos e cadastrar uma aventura com título, descrição e data. A funcionalidade de data ainda pode ser aprimorada no futuro. Agora, o principal objetivo é que o módulo de localização permita obter a geolocalização da pessoa usuária e possibilite salvar a localização da aventura, futura ou já vivenciada, além de permitir edições.

Execução da aplicação em diferentes plataformas

Com o editor de texto aberto do repositório do Desbrava App, abrimos dois terminais. Em um deles, rodamos o comando para rodar a aplicação no iOS e no outro o android.

npm run ios

npm run android

Estamos rodando as duas plataformas, pois utilizamos um computador com macOS, o que nos dá acesso ao Xcode e aos simuladores do iOS e Android. Se você estiver utilizando um computador com Windows ou Linux, provavelmente terá acesso apenas ao simulador do Android.

Testes de funcionalidade nos simuladores

Com as duas aplicações abertas, os módulos nativos já estão funcionando. Vamos trabalhar com a localização. No iOS, ao clicar em "Adicionar Aventura", somos encaminhados para a outra tela com campos de preenchimento. Em Nome, escrevemos "ios 1", abaixo, definimos a data "12/12/2025", lembrando que esse campo é uma string e não fazemos validação de data por enquanto.

Abaixo, adicionamos uma descrição "Lorem Ipsum". Clicamos em "Adicionar imagem" e tiramos uma fotos. Lembrando que, como esse é um simulador, não temos uma câmera real. Feito isso, um timestamp é gerado, mostrando a data e o horário no formato de 12 horas com AM/PM.

Agora, faremos o mesmo teste no android, preeenchendo os campos com os mesmos dados. Feito isso, ao clicar em "Adicionar imagem", notamos que o módulo de câmera do simulador do Android é utilizado. É mais esteticamente agradável, simulando um ambiente com uma estante de livros, uma TV, um gato, imitando uma câmera.

Seria interessante testar após instalar e exportar o build com um APK ou IPA e fazer o upload no celular. Assim, conseguimos ver uma câmera real. No entanto, por questões didáticas, é mais fácil utilizar o simulador. Mas recomendamos que você use um dispositivo físico para uma experiência mais completa.

Ao clicar em "tirar foto", ele não captura a imagem que estava sendo exibida na tela, e sim um fundo preto com um timestamp bem pequeno. No Android, a data aparece no formato de 24 horas.

Feito isso, clicamos no botão "Adicionar", no android e iOsA, assim, a imagem é adicionada na tela inicial. Já temos um gerenciamento de contexto funcionando na aplicação, que a Desbrava nos forneceu.

A intenção é, além de exibir as informações que já mostramos, habilitar a edição, que ainda não funciona em nenhuma das plataformas, e adicionar uma nova aventura. Por exemplo, no iOS, podemos criar um evento de comemoração do Ano Novo. A ideia é que o formulário permita adicionar a localização da aventura, seja no momento da edição ou criação, embora não seja obrigatório.

Próximos passos para implementação de geolocalização

No card da tela inicial, onde aparece "Teste iOS" ou "Teste iOS 2", queremos exibir a distância aproximada entre o local atual e o local da aventura. Essa informação será acompanhada por um ícone de localização, indicando a distância em quilômetros ou metros, permitindo explorar melhor a funcionalidade de geolocalização.

Essa implementação será feita por meio de módulos nativos, que começaremos a desenvolver em breve. Em seguida, configuraremos as permissões necessárias para ambas as plataformas, garantindo a integração com geolocalização e mapas, aprimorando ainda mais o Desbrava App. Nos encontramos na próxima etapa para seguir com essa jornada!

No navegador, vamos acessar a documentação do Expo. Para isso, acessamos o site e depois, na barra lateral esquerda, clicamos em "Search". Digitamos "location" e clicamos em "Expo location". Esse módulo, que pode ser instalado em nossa aplicação, nos permite acessar a geolocalização da pessoa usuária.

A página não possui tradução embutida, então selecionamos todo o conteúdo e utilizamos uma ferramenta de tradução para facilitar a leitura. Após traduzir, aumentamos o zoom para melhorar a visualização das informações na documentação sobre o Expo Location.

O módulo permite acessar informações de geolocalização do dispositivo, possibilitando, por exemplo, pesquisar a localização atual e assinar eventos de atualização de localização.

Instalação do módulo Expo Location

Na parte de instalação, como não estamos utilizando uma aplicação Expo Managed, que seria totalmente gerenciada pelo Expo sem acesso aos módulos nativos, precisamos seguir instruções adicionais. Essas instruções estão disponíveis na documentação dentro do GitHub, na seção de instalação em projetos React Native Bare.

Para instalar o módulo, utilizamos o comando npx expo install expo-location no nosso editor de texto. Antes disso, interrompemos qualquer execução do servidor Node com "Ctrl+C" para evitar conflitos durante a instalação. Após colar o comando e iniciar a instalação, verificamos as configurações e permissões necessárias para Android e iOS.

npx expo install expo-location

Configuração de permissões no Android

No Android, as permissões devem ser adicionadas no arquivo "AndroidManifest.xml", semelhante ao que fizemos em cursos anteriores com módulos de câmera. No iOS, as permissões são configuradas no arquivo "info.plist", localizado no módulo nativo do iOS.

Copiamos as permissões necessárias para o Android e colamos no editor de texto. Após a conclusão da instalação, fechamos o terminal para liberar espaço e aumentamos o zoom para facilitar a leitura. Na aba lateral esquerda, acessamos a pasta "android > app > src > main" e abrimos o arquivo AndroidManifest.xml.

No início do código, identificamos o manifest, que passa o schema do próprio Android. A partir da linha 3, temos as permissões de uso. Podemos notar que há permissões para câmera e gravação de áudio, adicionadas por nós anteriormente. Pulamos uma linha e colamos o código que havíamos copiado. Depois, removemos o comentário da linha 14 e também da linha 16, que se referem a permissões adicionais e ajustamos a indentação.

//Código omitido
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.FOREGROUND_SERVICE" />
<uses-permission android:name="android.permission.FOREGROUND_SERVICE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_BACKGROUND_LOCATION" />

Próximo à linha 13, adicionamos acesso à localização aproximada (coarse location), que é uma localização geral, semelhante à que compartilhamos em aplicativos como o WhatsApp. Já a localização precisa está na linha 14. Abaixo, temos a permissão para localização em foreground, que é quando a aplicação está em uso, ou seja, em tela. Por fim, temos as permissões para background, que é quando a aplicação está em segundo plano. Salvamos o arquivo.

Configuração de permissões no iOS

Após, no menu lateral esquerdo, abrir a pasta "ios > rndesbravaapp" e abrimos o arquivo info.plist, que é um pouco mais complexo. Isso, pois funciona como um dicionário com chaves, tornando mais difícil encontrar as permissões. No entanto, pela localização da câmera, temos uma referência para adicionar as permissões de localização.

Voltamos ao Google Chrome e copiamos o código referente a configuração do iOS. Voltamos para o editor de texto, abaixo da linha 39 pulamos uma linha, colamos e ajustamos a indentação. Após, substituímos o $(PRODUCT_NAME) por DesbravaApp.

//Código omitido
<key>NSCameraUsageDescription</key>
<string>Allow DesbravaApp to use the camera</string>
<key>NSMicrophoneUsageDescription</key>
<string>Allow DesbravaApp to use the microphone</string>
<key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
<string>Allow DesbravaApp to use your location</string>
<key>NSLocationAlwaysUsageDescription</key>
<string>Allow DesbravaApp to use your location</string>
<key>NSLocationWhenInUseUsageDescription</key>
<string>Allow DesbravaApp to use your location</string>
<key>UILaunchStoryboardName</key>
<string>SplashScreen</string>
<key>UIRequiredDeviceCapabilities</key>

Finalizando a configuração

Assim, temos as permissões necessárias de localização tanto para iOS quanto para Android. Para finalizar, basta rodar o comando npx pod-install para iOS. No Android, ele será executado automaticamente.

npx pod-install ios

Na sequência, começaremos a inicializar a funcionalidade de localização propriamente dita. Já configuramos o lado nativo, agora é hora de trabalhar com o código em React Native, que é o foco principal.