Instalando o Mapbox e listando imóveis no React Native

Série Clone AirBnB com AdonisJS, React Native e ReactJS [Parte 5]

Instalando o Mapbox e listando imóveis no React Native

Esse post é a quinta parte da série de posts “Clone AirBnB com AdonisJS, React Native e ReactJS” onde iremos construir do zero uma aplicação web com ReactJS e também uma aplicação mobile com React Native com dados servidos através de uma API REST feita com NodeJS utilizando o framework AdonisJS.

Nesse ponto já temos a aplicação criada e configurada para se comunicar com a API desenvolvida no começo dessa série, e com isso já conseguimos implementar o processo de autenticação e cadastro de usuário, nessa parte iremos instalar e configurar o Mapbox para podermos fazer o uso de mapas e também buscar da API uma listagem de imóveis cadastrados com base na distância do ponto onde você está.

Iniciando a Aplicação

Caso você tenha entrado direto nessa parte, você pode acessar esse link e baixar o projeto com todas as configurações do post anterior, apesar de eu recomendar pessoalmente que você leia a primeira parte para entender o fluxo da aplicação.

Ou se você já viu a primeira parte pode continuar para a próxima sessão onde iremos começar a instalação do Mapbox.

Instalando e Configurando o Mapbox

Para não deixar o post muito extenso explicando o passo a passo da instalação e configuração do Mapbox, você pode correr no Blog da Rocketseat e ler esse super post do Higo sobre a instalação e configuração do Mapbox.

E para obter o token de acesso indicado no post sobre o Mapbox você pode acessar esse link, use o botão Sign In para fazer login com sua conta ou então se cadastrar, depois de logado basta acessar esse link e ter acesso à seu token 😉

Caso você tenha algum problema na instalação ou não tenha conseguido fazer todas as configurações acesse esse link e baixe a estrutura configurada para dar continuidade.

Usando o Mapbox na Tela Principal

Até no post anterior quando um usuário era autenticado com sucesso na aplicação o código que tínhamos na Tela Principal era:


Ainda tem dúvidas ou insegurança com Javascript usando a sintaxe do ES6? Tá esperando o que? Corre lá no site da Rocketseat (entre aqui) e faça os nossos cursos gratuitos sobre Javascript e ES6/ES7/ES8.


Ufa, agora sim vamos inserir o Mapa ocupando a tela toda, para isso primeiro adicione a linha de importação do componente MapboxGL, como abaixo:

import MapboxGL from '@mapbox/react-native-mapbox-gl';

Feito isso troque a View que temos dentro do componente App por:

<MapboxGL.MapView
  centerCoordinate={[-49.6446024, -27.2108001]}
  style={{ flex: 1 }}
  styleURL={MapboxGL.StyleURL.Dark}
/>

O código acima irá inserir na Tela Principal o Mapa ocupando todo espaço disponível, as props passadas para ele são: centerCoordinate, que é usada para indicar qual o ponto que o mapa deve inicializar centralizado e a styleURL que é usada para dar o estilo ao mapa, no nosso caso, um tema escuro.

Obs.: Se você ainda não adicionou o token de acesso do Mapbox em lugar algum, abra o arquivo index.js da pasta src e adicione a importação do Mapbox logo no início seguida da linha abaixo, do contrário o mapa será inserido na tela mas não será exibido.

MapboxGL.setAccessToken('<aqui_vai_seu_token>');

Nesse momento se você executar o aplicativo no emulador/simulador a tela principal deve estar assim:

tela-principal-com-mapboxPara finalizar a Tela Principal falta listar os imóveis cadastrados no banco de dados e também adicionar alguns detalhes ao código, como esconder a navigationBar e modificar a cor da StatusBar.

Primeiramente vamos criar no arquivo styles.js um Container usando a lib Styled Components, o estilo vai ficar assim:

import styled from 'styled-components';
const Container = styled.View`
  flex: 1;
`;
export { Container };

Agora vamos importá-lo no arquivo index.js como já fizemos anteriormente nas outras telas e inseri-lo por volta do componente de Mapa, e para mudar a cor da StatusBar adicione a importação dela no começo do código, dessa maneira:

import { StatusBar } from 'react-native';

E dentro do Container mas acima do componente de Mapa adicione a StatusBar com a prop barStyle="light-content". O código final do index.js deve ficar assim:

Você pode ver o código completo da aplicação até esse ponto nesse link.

tela-principal-finalizadaBuscando a Lista de Imóveis na API

 

Com o mapa sendo renderizado corretamente vamos agora recuperar a lista de imóveis da API para listá-los no Mapa.

O primeiro passo para essa funcionalidade é fazer uma pequena mudança no componente Main, que para realizar essa busca de imóveis precisaremos fazer uso dos métodos de Ciclo de Vida desse componente, portanto precisamos transformá-lo de um Stateless Component (baseado em constante) para um Stateful Component (baseado em classe), o código do componente transformado fica assim:

Com o componente transformado em Stateful Component podemos criar a função que será a responsável por renderizar no mapa a lista de Imóveis que serão buscados da API, logo abaixo função que usaremos para isso, mas antes dela devemos fazer 2 ajustes para que ela funcione corretamente, o primeiro é criar um state no componente contendo a variável locations contendo um array vazio, ficando assim:

state = {
  locations: [],
}

O próximo ajuste é dentro do componente de mapa, devemos ajustá-lo para receber componentes dentro dele, para isso você pode deixá-lo assim:

Agora sim podemos focar na criação da função renderLocations, que irá apenas fazer um map na variável locations do state e para cada item renderizar uma PointAnnotation no Mapbox, seu código ficou assim:

E para que os pontos sejam renderizados corretamente e não haja erro de importação, vamos primeiro no arquivo styles.js e criar os componentes AnnotationContainer e AnnotationText, ficando assim:

E depois importá-los no index.js da Tela Principal, ficando assim:

import { Container, AnnotationContainer, AnnotationText } from './styles';

Estamos quase terminando essa parte de listagens de imóveis(aleluiaaaaa), temos apenas que adicionar mais um método no arquivo index.js pra terminarmos a busca de imóveis da API, afinal já configuramos para listar os imóveis mas ainda não enviamos a requisição que irá retornar essa lista rsrs.

Para finalizar vamos criar o método componentDidMount no componente Main, ele será o responsável por enviar a requisição para a API assim que o componente for montado, irei postar o código e logo abaixo explico o que está sendo feito:

Você deve ter percebido logo no início da função o async, isso porque esse é o único método do ciclo de vida que pode ser executado de forma assíncrona, dentro dele temos um try/catch para tratativa de erros, e no começo do try já temos a função responsável por enviar a requisição para a API, e como visto nos posts sobre a API para recuperar os imóveis temos que passar as coordenadas do usuário para que sejam trazidos baseado na distância, assim que houver uma resposta da requisição o array é passado para o locations do state.


Bom nesse ponto se tudo deu certo quando você tentar enviar a requisição para a API haverá um erro (Ué, mas como haverá erro se tudo está correto?).

Esse erro acontece pois depois que o usuário foi autenticado temos que enviar o Token JWT em todas as requisições para validar o usuário e retornar um resultado correto, mas não se preocupe, veja a sessão abaixo que vamos corrigir isso (acho bom mesmo).

Implementando Interceptors no Axios para envio do Token JWT

Para garantir que o Axios envie em toda requisição o token JWT no índice Authentication do Header da mesma vamos implementar o recurso de Interceptors.

Você pode ler mais sobre esse recurso diretamente na documentação da lib nesse link.

Para implementar é bem simples, abram o arquivo de configuração do Axios, o api.js, e entre o const api = axios.create(); e o export default api; o seguinte código:

Esse trecho de código irá interceptar todas as requisições enviadas e antes de repassá-la para a API vai verificar se há no Async Storage o token que nós criamos no momento do Login, caso ele exista será adicionado no Authorization do Header esse Token no formato correto para a API reconhecer e validá-lo, e por último será retornado essa nova config para a request.

Ufa, mais uma parte chega ao fim

Nessa parte da série vimos como utilizar o token retornado da autenticação para buscarmos informações que a API só fornece para um usuário depois de autenticado.

Se você gostou desse post e também da série sobre o AirBnb deixe seu comentário, crítica ou sugestão que é muito importante pra gente.

Aguardo você no próximo post 😉

AdonisJS + ReactJS + React Native
A seguir:

Instalando o Mapbox e listando imóveis no React Native

Instalando o Mapbox e listando imóveis no React Native