Criando o seu próprio Rastreador Veicular – Parte 3

Por Gerson Itiro Hidaka, Arquiteto de Soluções AWS Brasil

Introdução

Esta é a terceira e ultima parte desta série e vamos construir os componentes de Front e Back End em nuvem para exibir o Mapa e as informações de rastreamento para o usuário final utilizando, basicamente, o ReactJS como framework e o AWS Amplify.

O objetivo aqui é mostrar algumas das possibilidades e a facilidade de integração dos serviços de Autenticação, APIs e Serverless Computing com o Location Service

Mão na Massa 4: Configurando o Amplify

Nesta seção configuramos o Front End e três componentes no Back End que são instanciados através do serviço AWS Amplify. O primeiro é o Amazon Cognito, para a funcionalidade de autenticação, o segundo é o Amazon API Gateway, para a funcionalidade REST API, e o terceiro é o AWS Lambda, para o processamento e leitura dos dados de localização, conforme diagrama abaixo.

Figura 1 – Diagrama da Solução

1. Utilizando o terminal do seu computador, realizar o clone do repositório. Entre no diretório criado pelo comando git.

git clone https://github.com/aws-samples/cartrack-react-locationservice.git

cd cartrack-react-locationservice

2. Configure o Amplify através do comando abaixo. Se você já realizou a configuração do Amplify antes, pule esta etapa.

amplify configure

3. Ele irá abrir, automaticamente o navegador padrão do seu computador, na console de gerenciamento da AWS. Volte para o terminal e pressione <Enter>. Escolha a região e pressione <Enter>.

4. Escolha o nome de usuário que controlará o serviço Amplify. Você pode aceitar o nome sugerido pela CLI. Pressione <Enter>.

5. A CLI abrirá a console do serviço AWS Identity and Access Management (IAM), com o nome de usuário especificado anteriormente e com o Access Type: Programmatic access Pressione o botão Next: Permissions.

Figura 2 – Adicionando o usuário no IAM

6. Na próxima janela selecionar o botão Next: Tags. As Tags são rótulos que você atribui a um recurso e permitem uma posterior categorização. É uma boa prática utilizá-la em todos os recursos provisionados na nuvem. Selecione o botão Next: Review.

Figura 3 – Tags

7. Selecione o botão Create user para finalizar o processo de criação de usuário do Amplify.
8. O sistema retornará os dois parâmetros da sua chave de acesso: Access key ID e o Secret Access Key. Essas são as credenciais que o Amplify utilizará para criar os recursos na AWS. Importante destacar aqui é que essas credenciais devem ser protegidas e não podem ser compartilhadas.

Anote os dois valores e retorne a tela do terminal.

Figura 4 – Credenciais do Amplify

9. Copie e cole o Access Key ID e em seguida o Secret Access Key. Pressione <Enter>.

10. Aceite o Profile Name padrão (default) e pressione <Enter>.

11. O próximo passo será inicializar o Amplify no diretório da aplicação. Digite o comando abaixo com os parâmetros exibidos na sequência.

amplify init

• Enter a name for the Project: cartrackerawslocatio
• Enter a name for the environment: dev
• Choose your default editor: Visual Studio Code
• Choose the type of app that you’re building: javascript
• What javascript framework are you using: react
• Source Directory Path: src
• Distribution Directory Path: build
• Build Command: npm run-script build
• Start Commando: npm run-script start
• Do you want to use an AWS profile: Yes
• Please choose the profile you want to use: default

Mão na Massa 5: Autenticação

1. Vamos agora implementar o módulo de autenticação do Amplify. Para isso utilizar o comando abaixo com os parâmetros exibidos na sequência.

amplify auth add

• Do you want to use the default authentication and security configuration? Default configuration
• How do you want users to be able to sign in? Username
• Do you want to configure advanced settings? No, I am done.

2. Utilizar o comando amplify push para aplicar essa configuração na nuvem.

amplify push

Após a execução do comando push o Amplify irá instanciar o serviço de Autenticação na nuvem conforme o diagrama abaixo.

Figura 5 – Diagrama da Solução (Amplify Auth)

3. O próximo passo será configurar o Identity Pool e o IAM. Para isso utilize o comando abaixo e selecione Identity Pool quando solicitado.

amplify console auth

4. O navegador abrirá, automaticamente no seu navegador, a console do Cognito (Identity Pool). Selecione o link Edit identity pool.

Figura 6 – Cognito Identity Pool

5. Abra a seção Unauthenticated identities e selecione a opção Enable access to unauthenticated identities. As Unauthenticated identities são utilizadas pelo Front End para renderização dos mapas na tela do usuário final.
6. Anote o nome das duas roles, pois iremos configurá-las no próximo passo (IAM roles). Clique no botão Save changes.

Figura 7 – Configurando o Cognito Identity Pool

7. Abrir a console do serviço IAM. Clicar no menu Roles e procurar pelas roles anotadas no item anterior (final authRole). Clicar no nome da role.
8. Selecionar o botão Add inline policy. Selecione Location no campo Service. Na seção Actions, selecionar os seguintes items.

• ListMaps
• GetMapGlyphs
• GetMapSprites
• GetMapStyleDescriptor
• GerMapTile
• GetMapTileJson

Figura 8 – Inline Policy

9. Em Resources inserir a ARN do Mapa que anotamos nas seções anteriores (Blog Post parte 1). Clicar no botão Review policy e especificar um nome para a política.
10. Você deverá repetir esses passos para a Role com final unauthRole.

Mão na Massa 6: API

1. Seguindo os serviços listados no diagrama, o próximo passo será a criação da REST API que irá trazer as informações do GPS para o FrontEnd.

Figura 9 – Diagrama da Solução (Amplify API)

2. Para isso vamos novamente utilizar o Amplify para instanciar esse serviço. Utilize o comando abaixo para criar a API e utilize os parâmetros mostrados nas figuras abaixo.

amplify add api

• Provide a friendly name for your resource to be used as a label for this category in the Project: blogfinal
• Provide a path (e.g., /book/{isbn}): /items
• Choose a Lambda source: Create a new Lambda function
• Provide an AWS Lambda function name: blogfinal
• Choose the runtime that you want to use: Python
• Do you want to configure advanced settings? No
• Do you want to edit the local lambda function now? No
• Restrict API access: No
• Do you want to add another path? No

O Amplify tem a função de automatizar o processo de criação e integração dos serviços em nuvem para a criação das APIs. O comando retornará o API endpoint.

3. Anote o nome da API (API Friendly Name) e o Path. Vamos utilizar esses dois valores no código da aplicação React (App.js).
4. Vamos editar o código do Lambda Function (API) para que ele retorne a informação de rastreamento. Para isso, acesse o seguinte diretório:

cd ./cartrack-react-locationservice/amplify/backend/function/<lambda_function_name>/src/

5. Utilizar o editor de sua preferência e editar o arquivo index.py. Substitua o seu conteúdo pelo código abaixo.

import sys
from pip._internal import main

main(['install', '-I', '-q', 'boto3', '--target', '/tmp/', '--no-cache-dir', '--disable-pip-version-check'])
sys.path.insert(0,'/tmp/')

import datetime
from datetime import timedelta
import os
import boto3
import json
import datetime

TRACKER_NAME = "MySampleTracker"
DEVICE_ID = "car01"

def handler(event, context):
  os.environ["AWS_DATA_PATH"] = os.environ["LAMBDA_TASK_ROOT"]

  client = boto3.client("location")  
  now = datetime.datetime.now().isoformat()
  yesterday = (datetime.datetime.now() - timedelta(1)).isoformat()
  
  try:
    gps_data = client.get_device_position_history(DeviceId=DEVICE_ID, TrackerName=TRACKER_NAME, StartTimeInclusive=yesterday, EndTimeExclusive=now)
    body = gps_data["DevicePositions"]
  except:
    body = ""
    print ("Error getting Device Position History")

  response = {
      "statusCode": 200,
      "body": json.dumps(body, indent=4, sort_keys=True, default=str),
      'headers': {
        'Content-Type': 'application/json',
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Credentials': 'true',
        'Access-Control-Allow-Headers': 'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token,X-Amz-User-Agent',
        'Access-Control-Allow-Methods': 'DELETE,GET,HEAD,OPTIONS,PATCH,POST,PUT',
      },
  }

  return response

6. Não esquecer de adaptar o código para o seu cenário. As duas variáveis, listadas abaixo, requerem atenção neste ponto:

• TRACKER_NAME = “MySampleTracker”
• DEVICE_ID = “car01”

7. Publicar as alterações no Amplify com o comando abaixo.

amplify push

8. Retorne ao diretório da aplicação (cartrack-react-locationservice). Modifique o Código ReactJS (src/App.js) inserindo o nome do mapa, nome da API (Friendly Name) e o API Path que foram anotados nesta seção.
9. O próximo passo será instalar todas as dependências listadas no package.json e, para isso, utilize o comando abaixo.

npm install –force

10. Opcionalmente você pode testar a aplicação localmente com o comando o npm start.

npm start

11. A ultima etapa é adicionar a capacidade de hosting utilizando novamente o Amplify, conforme diagrama abaixo. O último comando retornará uma URL pública que pode ser utilizada para testar a aplicação. Você poderá utilizar essa URL para testar a sua aplicação no seu navegador preferido.

Figura 10 – Diagrama da Solução (Amplify Hosting)

amplify hosting add
amplify publish

Faremos os testes práticos na próxima seção: Smoke Test.

Smoke Test

Antes de realizar os primeiros testes, efetuei a cópia do arquivo wpa_supplicant.conf para o SD-Card do Raspberry Pi. Esse novo arquivo que contém as credenciais e SSID para o acesso a internet via Personal HotSpot do celular, pois os testes reais serão conduzidos com o veículo em movimentação. Após isso, instalei o Raspberry Pi + GPS no meu carro utilizando uma das portas USB de carregamento de celular (1.0A).

Após rodar 50 Km, pude verificar que todos os pontos de latitude e longitude foram plotados no mapa, conforme figura abaixo:

Figura 11 – Resultado Final

Utilizei a Public URL gerada pelo AWS Amplify no navegador para consultar os pontos de GPS gerados durante o percurso. Com os controles de Navegação conseguimos também efetuar um Zoom In no mapa para verificar com mais precisão cada ponto no Mapa. E apontando a seta do mouse em cada um dos pontos conseguimos consultar a latitude, longitude e o timestamp. Algumas informações também são inseridas no Control Panel a direita da interface.

Há uma oportunidade enorme de aprimoramento deste modelo que é a captura de mais informações do veículo através dos scanners OBD2 e comunicação deste próprio scanner com o Raspberry pi. Esse equipamento poderia capturar dados adicionais como por exemplo a velocidade, consumo de combustível, pressão de entrada e saída dos cilindros e muitos outros dados específicos do veículo. Essas informações poderiam ser plotadas juntamente com cada ponto do GPS para uma análise visual ou detecção de alguma anomalia através de algoritmos de Machine Learning. Enfim, melhorias que podemos implementar no futuro.

Estimativa de Preço

Para reproduzir o cenário descrito neste tutorial você poderá utilizar o Tier de utilização gratuito da AWS (Free Tier). Listamos os limites do Free Tier na tabela abaixo e para maiores detalhes sobre a precificação, selecionar o nome de cada serviço.

Conclusão

Neste Blog Post exploramos o Amazon Location Service para realizar o rastreamento de veículos e exibição de Viewpoints no Mapa. Na indústria em geral, podemos explorar o Location Service para outros casos de uso, por exemplo, ajudar as seguradoras a determinar o preço do seguro veicular, baseado no local onde o cliente trafega ou na utilização de rastreamento de cargas por empresas especializadas e inserindo os recursos de geofencing para determinar se o veículo saiu da rota inicial. Um outro exemplo simples seria utilizar o Location Service para estimar a chegada do transporte público (ônibus, taxi, trem) ou mesmo do transporte Escolar.

Neste exemplo, exploramos a integração do Location Service com o Lambda, React.js, Amplify, mas inúmeras outras integrações poderão ser exploradas, dependendo apenas das necessidades da sua aplicação.

O Amazon Location Service está disponível (Preview) nas regiões US East (N. Virginia), US East (Ohio), US West (Oregon), Europa (Irlanda) e Asia Pacifico (Tokyo). Para maiores informações sobre o serviço por favor acesse o link da documentação aqui.

Convido você a nos enviar as dúvidas, comentários e feedbacks utilizando o formulário abaixo. Até o nosso próximo Blog Post!

Referências

• https://thinkwithwp.com/blogs/aws/amazon-location-add-maps-and-location-awareness-to-your-applications/
• https://pt.wikipedia.org/wiki/NMEA_0183
• https://pt.wikipedia.org/wiki/Raspberry_Pi
• https://pt.wikipedia.org/wiki/Sistema_de_posicionamento_global
• https://www.raspberrypi.org/
• https://nodered.org/
• https://mqtt.org/
• https://reactjs.org/
• https://docs.mapbox.com/mapbox-gl-js/api/map/

Sobre o Autor

Gerson Itiro Hidaka atualmente trabalha como Arquiteto de Soluções da AWS e atua no atendimento a parceiros mundiais chamados de Global System Integrators and Influencers (GSIIs) na região da América Latina. Entusiasta de tecnologias como Internet das Coisas (IoT), Drones, Devops e especialista em tecnologias como virtualização, serverless, container e Kubernetes. Trabalha com soluções de TI a mais de 24 anos, tendo experiência em inúmeros projetos de otimização de infraestrutura, redes, migração, disaster recovery e DevOps em seu portifólio.

Revisores

Murilo Nascimento é um gerente de produtos na AWS. Especialista em tecnologias de bancos de dados, gosta muito de estudar sobre o tema e gosta mais ainda de compartilhar o que aprende com outras pessoas.

Giovanna Chiaratti é Arquiteta de Soluções para Parceiros na América Latina focada em países de língua espanhola. Admiradora e estudiosa de tecnologias como Machine Learning, Inteligência Artificial e Serverless. Trabalha para escalar parceiros de consultoria e tecnologia para que possam apoiar a AWS em criar soluções seguras, inovadoras e inteligentes.

Juliano Fernandes Baeta é Arquiteto de Soluções para Global Systems Integrators para a América Latina. É um entusiasta de Big Data, Analytics, Machine Learning e sua missão é ajudar parceiros a construir soluções seguras, eficazes e resilientes na AWS.