Creación de su propio rastreador de vehículos – Parte 3

Por Gerson Itiro Hidaka, Arquitecto de Soluciones AWS Brasil

Introducción

Esta es la tercera y última parte de esta serie y construiremos los componentes Front y Back End en la nube para mostrar el mapa y la información de seguimiento al usuario final utilizando ReactJS como framework y AWS Amplify.

El objetivo aquí es mostrar algunas de las posibilidades y la facilidad de integración de los servicios de Autenticación, API y Serverless con Localización.

Manos a la obra 4: Configuración de Amplify

En esta sección configuramos el Front End y tres componentes en el back-end que se encargan de crear instancias por medio del servicio AWS Amplify. El primero es Amazon Cognito, para la funcionalidad de autenticación; el segundo es Amazon API Gateway, para la funcionalidad de API REST; y el tercero es AWS Lambda, para procesar y leer datos de ubicación, como se muestra en el diagrama.

Figura 1 – Diagrama de solución

1. Utilizando el terminal de su computadora, realice el clon del repositorio. Introduzca el directorio creado por el comando git.

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

cd cartrack-react-locationservice

2. Configure Amplify con el siguiente comando. Si ya ha configurado Amplify antes, puede omitir este paso.

amplify configure

3. Se abrirá automáticamente el navegador predeterminado a su equipo en AWS Management Console. Vuelve a la terminal y presiona <Enter>. Elija la región y haga clic en <Enter>.

4. Elija el nombre de usuario que controlará el servicio Amplify. Puede aceptar el nombre sugerido por la CLI. Haga clic en <Enter>.

5. La CLI abrirá la consola de servicio AWS Identity and Access Management (IAM), con el nombre de usuario especificado anteriormente y con el Access type: Programatic access Haga clic en el botón Next: Permissions.

Figura 2 – Agregar el usuario en IAM

6. En la siguiente ventana seleccione el botón Next: Tags. Las etiquetas son etiquetas que se asignan a un recurso y permiten una mayor categorización. Es una buena práctica utilizarlas en todos los recursos aprovisionados en la nube. Seleccione el botón Next: Review.

Figura 3 – Tags

7. Seleccione el botón Create user para finalizar el proceso de creación de usuarios de Amplify.

8. El sistema devolverá los dos parámetros de su clave de acceso: Access key ID y Secret Access Key. Estas son las credenciales que Amplify utilizará para crear los recursos en AWS. Importante mencionar aquí es que estas credenciales deben estar protegidas y no se pueden compartir.

Anote ambos valores y regrese a la pantalla del terminal.

Figura 4 – Credenciales de amplificación

9. Copie y pegue el Access key ID y luego el Secret Access Key . Haga clic en <Enter>.

10. Acepte el profile name predeterminado (default) y haga clic en <Enter>.

11. El siguiente paso es iniciar Amplify en el directorio de la aplicación. Escriba el comando siguiente con los parámetros mostrados en la secuencia.

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

Manos a la obra 5: Autenticación

1. Vamos a implementar ahora el módulo de autenticación Amplify. Para ello, utilice el siguiente comando con los parámetros mostrados en la secuencia.

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. Utilice el comando amplify push para aplicar esta configuración en la nube.

amplify push

Después de ejecutar el comando push Amplify arrancará el servicio de autenticación en la nube como se muestra en el siguiente diagrama.

Figura 5 – Diagrama de solución (Auth Amplify)

3. El siguiente paso es configurar el Identity Pool. Para ello, utilice el comando siguiente y seleccione Identity Pool cuando se le solicite.

amplify console auth

4. El navegador abrirá automáticamente la consola de Cognito (Identity Pool) en su navegador. Seleccione el vínculo Edit identity pool.

Figura 6 – Grupo de identidades Cognito

5. Abra la sección unauthenticated identities y seleccione la opción enable access to unathenticated identities. Las identidades no autenticadas son utilizadas por el Front End para representar mapas en la pantalla del usuario final.

6. Tenga en cuenta los nombres de los dos roles, ya que los configuraremos en el siguiente paso (roles de IAM). Haga clic en el botón Save changes.

Figura 7 – Configuración del grupo de identidades de Cognito

7. Abra la consola de servicio de IAM. Haga clic en el menú Roles y busque los roles guardados en el paso anterior (AuthRole final). Haga clic en el nombre del rol.

8. Seleccione el botón Add inline policy. Seleccione Location en el campo Service. En la sección Actions, seleccione los siguientes elementos.

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

Figura 8 – Política en línea

9. En Resources copie y pegue el ARN del mapa que hemos anotado en las secciones anteriores (Publicación del blog parte 1). Haga clic en el Review policy y especifique un nombre para la política.

10. Debe repetir estos pasos para el rol con la finalización de UnAuthRole.

Manos a la obra 6: API

1. Siguiendo los servicios enumerados en el diagrama, el siguiente paso será crear la API REST que traerá la información GPS al FrontEnd.

Figura 9 – Diagrama de solución (API de Amplify)

2. Para ello volvemos a utilizar Amplify para crear una instancia de este servicio. Utilice el siguiente comando para crear la API y utilizar los parámetros que se muestran en las siguientes figuras.

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

Amplify está diseñado para automatizar el proceso de creación e integración de servicios en la nube para crear API. El comando devuelve el endpoint de la API.

3. Tenga en cuenta el nombre de la API (API friendly name) y el path. Utilizaremos estos dos valores en el código de aplicación React (App.js).

4. Vamos a editar el código de la función Lambda (API) para que devuelva la información de seguimiento. Para ello, vaya al siguiente directorio:

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

5. Utilice el editor de su elección y edite el archivo index.py. Reemplace su contenido con el siguiente código.

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. No olvide adaptar el código a su escenario. Las dos variables, enumeradas a continuación, requieren atención en este punto:

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

7. Publique los cambios en Amplify con el siguiente comando.

amplify push

8. Vuelva al directorio de la aplicación (cartrack-react-locationservice). Modifique el código de ReactJS (src/App.js) introduciendo el nombre del mapa, el nombre descriptivo (API) y el path de la API que se indicaron en esta sección.

9. El siguiente paso es instalar todas las dependencias enumeradas en package.json, y para hacerlo, utilice el siguiente comando.

npm install –force

10. Opcionalmente, puede probar la aplicación localmente con el comando npm start.

npm start

11. El último paso es añadir capacidad de alojamiento utilizando Amplify nuevamente, de acuerdo al siguiente diagrama. El último comando devolverá una URL pública que se puede utilizar para probar la aplicación. Puede utilizar esta URL para probar su aplicación en su navegador preferido.

Figura 10 – Diagrama de solución (Amplify Hosting)

amplify hosting add
amplify publish

Haremos las pruebas de práctica en la siguiente sección: Smoke Test.

Smoke Test

Antes de realizar las primeras pruebas, copie el archivo wpa_supplicant.conf a la tarjeta SD de Raspberry Pi. Este nuevo archivo que contiene las credenciales y SSID para el acceso a Internet a través de Personal HotSpot del teléfono móvil, ya que las pruebas reales se llevarán a cabo con el vehículo en movimiento. Después de eso, instalé el GPS Raspberry Pi+ en mi coche usando uno de los puertos de carga móvil USB (1.0A).

Después de recorrer 50 Km, pude verificar que todos los puntos de latitud y longitud estaban trazados en el mapa, como se muestra a continuación:

Figura 11 – Resultado Final

Utilizé la URL pública generada por AWS Amplify en mi navegador para consultar los puntos GPS generados durante la ruta. Con los controles de navegación también podemos utilizar el mapa para comprobar con mayor precisión cada punto del mapa. Y al apuntar la flecha del ratón a cada uno de los puntos podemos ver la latitud, longitud y timestamp. Parte de la información también se ingresa en el Panel de control a la derecha de la interfaz.

Hay una gran oportunidad para mejorar este modelo que es la captura de más información del vehículo por medio de los escáneres OBD2 y la comunicación de este propio escáner con el Raspberry pi. Este aparato podría capturar datos adicionales como velocidad, consumo de combustible, presión de entrada y salida del cilindro, y muchos otros datos específicos del vehículo. Esta información se podría trazar junto a cada punto GPS para el análisis visual o la detección de una anomalía utilizando algoritmos de Machine Learning. Por último, mejoras que podemos implementar en el futuro.

Precio Estimado

Para reproducir el escenario descrito en este tutorial, puede utilizar la capa de uso gratuito de AWS (capa gratuita). Hemos enumerado los límites de capa gratuita en la tabla siguiente y para obtener más información sobre los precios, seleccione el nombre de cada servicio.

Conclusión

En esta publicación de blog exploramos Amazon Location Service para realizar el seguimiento de vehículos y mostrar Viewpoints en el mapa. En la industria general, podemos explotar el Servicio de Ubicación para otros casos de uso, por ejemplo, ayudar a las aseguradoras a determinar el precio del seguro de vehículos, en función de dónde viaja el cliente o el uso del seguimiento de carga por empresas especializadas, e introduciendo capacidades de geofencing para determinar si el vehículo ha abandonado su ruta inicial. Otro ejemplo sencillo sería utilizar Location Service para estimar la llegada del transporte público (autobús, taxi, tren) o incluso transporte escolar.

En este ejemplo, exploramos la integración de Location Service con Lambda, React.js, Amplify, pero muchas otras integraciones se pueden explorar dependiendo de las necesidades de su aplicación.

Amazon Location Service está disponible (Vista previa) en las regiones

US East (N. Virginia), US East (Ohio), US West (Oregon), Europa (Irlanda) y Asia Pacifico (Tokyo). Para obtener más información sobre el servicio, visite el enlace de documentación aquí.

Te invito a que nos envíes preguntas, dudas y comentarios utilizando el siguiente formulario. Hasta nuestro próximo blog Post!

Referencias

• https://aws.amazon.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/

Este artículo fue traducido del Blog de AWS en Portugués

Sobre el Autor

Gerson Itiro Hidaka actualmente trabaja como Arquitecto de Soluciones de AWS y presta servicios a socios de todo el mundo denominados Global System Integrators and Influencers (GSII) en la región de América Latina. Entusiasta de tecnologías como Internet de las cosas (IoT), drones, Devops y un experto en tecnologías como la virtualización, serverless, contenedor y Kubernetes. Ha trabajado con soluciones de TI durante más de 24 años, con experiencia en numerosos proyectos de infraestructura, red, migración, recuperación ante desastres y optimización de DevOps en su portafolio.

Revisores

Murilo Nascimento es Gerente de Producto de AWS. Especialista en tecnologías de bases de datos, le encanta estudiar sobre el tema y disfruta aún más compartir lo que aprende con los demás.

Giovanna Chiaratti es Arquitecta de Soluciones para Socios en América Latina enfocada en los países hispano-hablantes. Admiradora y estudiosa de tecnologías como Machine Learning, Artificial Intelligence y Serverless. Trabaja para escalar los socios de consultoría y tecnología para que puedan apoyar a AWS en la creación de soluciones seguras, innovadoras e inteligentes.

Juliano Fernandes Baeta es Arquitecto de Soluciones para Integradores Globales de Sistemas para América Latina. Es un entusiasta del big data, el análisis y el aprendizaje automático y su misión es ayudar a los socios a crear soluciones seguras, eficaces y resistentes en AWS.

Gabriela Diaz es Arquitecta de Soluciones en AWS México.