1 of 45

Kevin

Uehara

Criando Soluções Geográficas Com Mapas No Frontend

2 of 45

Kevin

Uehara

Dúvidas Remotas

#7068509

3 of 45

Kevin Uehara

Senior Front-end Engineer no iFood

  • Sou de Campinas/SP
  • Jogando CS de vez em quando
  • Dev há uns 8 anos e com foco em front há uns 3 anos
  • Sommelier de um bom typescript

4 of 45

Kevin Uehara

Senior Front-end Engineer no

  • Atuo na tribo de logística do ifood

​

  • Auto de forma cross em dois times Location Areas e Location Geo

​

  • Geoprocessamento, geolocalização, áreas de entrega de parceiros e muito mais

5 of 45

Kevin

Uehara

Mas, vou falar do quê? (ou pelo menos tentar)

  • Overview Aplicação
  • Tecnologias
  • Arquitetura
  • Show me the code
  • Dúvidas?

6 of 45

Kevin

Uehara

Overview Aplicação

7 of 45

8 of 45

Kevin

Uehara

Overview Aplicação

  • O que vamos criar?

​

    • Aplicação Web que calcula a melhor rotas entre dois pontos

​

    • Permite a busca de uma localização pelo nome utilizando uma ferramenta Open Source

​

    • Permite selecionar 3 tipos de modo de viagem (carro, bike e caminhando)

​

    • Exibe o tempo, rota e distância

9 of 45

Kevin

Uehara

Tecnologias

10 of 45

Kevin

Uehara

Tecnologias

  • Vite - Frontend Tooling
  • React + Typescript - Lib Frontend
  • Tailwind - Framework CSS
  • Google Maps API - Criação da rota
  • MapLibre - Lib para renderização de mapas
  • MapTiler - Provedor de estilo de Mapa
  • React Map GL - Lib de componentes para mapa em React
  • Nominatim - Geocoder (buscador de localização)

11 of 45

Kevin

Uehara

Tecnologias

  • Google Maps API

​

  • Biblioteca do Google Maps API

​

  • A Google Cloud fornece uma série de ferramentas e API's para mapas

​

  • Possui uso de graça, porém com cotas em quantidade de requisições

​

  • Foi utilizado para definir e criar a rota entre duas localizações

​

12 of 45

Kevin

Uehara

Docs: https://console.cloud.google.com/

13 of 45

Kevin

Uehara

Tecnologias

  • MapLibre

​

  • Biblioteca Open Source para publicar mapas em sua aplicação.

​

  • A exibição é possível graças à renderização de bloco vetorial acelerada por GPU

​

  • Se originou do Fork do Mapbox-GL-JS

​

  • Podemos renderizar mapas de forma vetorial ou rasterizada

​

  • Outra ferramenta: Leaflet

​

Docs: https://maplibre.org/maplibre-gl-js-docs/api/

14 of 45

Kevin

Uehara

15 of 45

Kevin

Uehara

Tecnologias

  • MapTiler

​

  • Provedor de mapas com estilos e customizáveis

​

  • Podemos criar uma conta de graça porém com determinadas cotas nas requisições

​

  • Outra opção é utilizar o OpenStreetMaps (OSM) que é um provedor de mapeamento Open Source

​

16 of 45

Kevin

Uehara

Docs: https://www.maptiler.com/

17 of 45

Kevin

Uehara

Tecnologias

  • React Map GL

​

  • Biblioteca com componentes integrados ao MapLibre/Mapbox para utilizar na aplicação

​

  • Permite utilizar hooks próprios para se integrar aos componentes e o mapa

​

  • Outra opção: Deck.gl

​

​

Docs: https://visgl.github.io/react-map-gl/

18 of 45

Kevin

Uehara

19 of 45

Kevin

Uehara

20 of 45

Kevin

Uehara

Tecnologias

  • Nominatim

​

  • API Open Source Geocode

​

  • Utiliza os dados do OpenStreetMaps para realizar as buscas

​

  • Buscador de endereços e transforma em uma localização (lat/long) e vice-versa

​

  • Existem alguns requisitos para a utilização, por exemplo, não utilizar como autocomplete.

​

  • Outra ferramenta: Open Source Routing Machine (OSRM)

​

21 of 45

Kevin

Uehara

Docs: https://nominatim.org/release-docs/develop/api/Overview/

22 of 45

Kevin

Uehara

Arquitetura

23 of 45

Kevin

Uehara

24 of 45

Kevin

Uehara

25 of 45

Kevin

Uehara

Show me the code

26 of 45

Kevin

Uehara

Código

yarn create vite demo-maps --template react-ts

yarn

  • Criando o projeto em Vite utilizando o React + Typescript
  • Instalando as dependências
  • Dando um start na aplicação

yarn dev

27 of 45

Kevin

Uehara

Estrutura inicial

28 of 45

Kevin

Uehara

Tela inicial

29 of 45

Próximos Passos

  • Configurando o tailwind no projeto

30 of 45

Próximos Passos

  • Criação do arquivo .env com os tokens do MapTiler e Google Maps API
  • Adicionar dependências que iremos utilizar:

yarn add axios google-maps mapbox-gl maplibre-gl react-map-gl @mapbox/polyline

  • Adicionar dependências de desenvolvimento que iremos utilizar:

yarn add -D @types/mapbox__polyline

31 of 45

Apagar o conteúdo do App.tsx e substituir por:

32 of 45

Vamos ter já como resultado: WOW

33 of 45

Próximos Passos

  • Criação de um diretório para armazenar nossos componentes e um para o service (integração com API's) e assets

34 of 45

Componente GeocoderInput

Componente responsável por ser o buscador que irá apresentar os dados fornecidos pelo Nominatim

​

  • Recebe como parâmetro um placeholder, os resultados, o valor selecionado na busca e os eventos de onSelect e onChange

35 of 45

Componente Infobox

Componente responsável por exibir os dados de tempo e distância da rota entre as duas localizações

​

  • Recebe como parâmetro o tempo e distância

36 of 45

Componente Modal

Componente de Select responsável por exibir as opções de modais disponíveis

​

  • Recebe como parâmetro uma callback com o modal selecionado

37 of 45

Criando o Service para o Nominatim

Criamos o GeocoderService para integrarmos à API do Nominatim:

38 of 45

Alterando o App.tsx

Adicionando os componentes na App.tsx, criando e gerenciando os estados

39 of 45

40 of 45

Kevin

Uehara

Resumidamente é isso…

41 of 45

Kevin

Uehara

Artigo entrando mais em detalhes

42 of 45

Kevin

Uehara

Contatos

E-mail: uehara.kevin@gmail.com

​

Github: https://github.com/kevinuehara

​

Instagram: https://www.instagram.com/uehara_kevin/

​

Twitter: https://twitter.com/ueharaDev

​

Dev.to: https://dev.to/kevin-uehara

43 of 45

Kevin

Uehara

Muito Obrigado!

E fiquem bem

44 of 45

Kevin

Uehara

Dúvidas?

45 of 45

Links Úteis

Aplicação

Github

Artigo