Como consumir un servicio externo con Axios en Alexa


A veces, podemos encontrarnos con una situación en la que se necesita interactuar con servicios externos, y es que sabemos que es necesario en cualquier desarrollo. Estos pueden ser, por ejemplo, un servicio para obtener información meteorológica, noticias locales o, incluso, configurar un servicio privado para interactuar con dispositivos IoT. Básicamente, cualquier cosa con la que pueda interactuar a través de HTTP.

Por ello, en este articulo aprenderemos sobre cómo podemos interactuar con APIs externas en una Skill de Alexa. En el ejemplo vamos a implementar una Skill que proporcione información con respecto a cargadores eléctricos de carros.

Flujo: Le solicitamos a Alexa una estación eléctrica, esta obtendrá aleatoriamente de una API y nos devolverá los datos correspondientes que tiene el servicio.

Comencemos

El primer paso por realizar será el de crear una Skill en la developer console de Amazon Alexa. Este ejemplo llevara por nombre: Find ChargerCar (recordemos que el nombre de la skill NO es necesariamente es el mismo con el que los usuarios accederán a la misma, puesto que este puede ser editado (cambiado)).

El modelo que seleccionaremos será el de Custom y el método que elegiremos con respecto a nuestro back-end será el de Provision your own, tal y como se muestra a continuación.

* Nota: En este ejemplo y por cuestiones practicas se manejó el lenguaje English (US).

Captura de Pantalla 2019-11-29 a la(s) 11.01.03

Posteriormente seleccionamos la plantilla de Fact Skill

Captura de Pantalla 2019-11-29 a la(s) 11.01.48

Una vez cargado la vista, del lado izquierdo visualizaremos que tenemos un Intent, el cual se genero de manera automática, lo que haremos será cambiarle el nombre por el de: GetChargerIntent y eliminaremos todos sus Utterances, puesto que añadiremos los siguientes: chargers, give me options of chargers.

Guardemos y construyamos nuestro modelo.

De igual manera editemos nuestro nombre de invocación, puesto que él que se genero fue el de “space facts”, cambiémoslo por el de: charger car. Y al igual que el paso anterior, guardemos y construyamos nuestro modelo.

Después nos dirigimos al portal de AWS, en donde buscaremos el servicio Lambda.

Captura de Pantalla 2019-11-29 a la(s) 11.08.36

Al seleccionarla, se nos dará la opción de generar una nueva función, en la ventana siguiente escojamos la plantilla: Crear desde cero.

Brindémosle un nombre como: lambdaChargerCar; En Tiempo de ejecución dejémoslo en Node.js 10.x – después culminemos con el botón que se encuentra en la parte inferior derecha: Crear una función.

Cuando termine de haberse creado, tendremos una vista similar a esta:

Imagen 1

Lo primero que haremos será agregar un desencadenador, el cual al dar clic y desplegarnos otra vista, deberemos de buscar en el listado la opción de: Alexa Skills Kit

Captura de Pantalla 2019-11-29 a la(s) 11.18.50

Al hacer esto nos solicita ingresar (o pegar) él ID de la Skill que anteriormente generamos.

Si no sabemos de donde proviene este, solo debemos de regresar al portal de alexa developer console y debajo de donde se encuentra el nombre de nuestra Skill esta la leyenda View Skill ID, al darle clic veremos dicho valor, este siempre iniciara con las letras: amzn.ask, entonces, solo seleccionémoslo y añadámoslo en la parte indicada del desencadenador y demos clic en el botón Agregar.

Captura de Pantalla 2019-11-29 a la(s) 11.23.10

Al hacerlo nuestra vista queda de la siguiente manera:

Captura de Pantalla 2019-11-29 a la(s) 11.50.44

Después deberemos de añadir una capa, esto dando clic en Layers. Al hacerlo, en la parte inferior nos aparecerá un botón con la leyenda “Añadir una capa”, este nos abrirá una nueva vista en donde solamente deberemos de seleccionar el nombre y la versión, como a continuación podemos ver:

Captura de Pantalla 2019-11-29 a la(s) 12.08.25

Una vez añadida la capa, posicionémonos en la función (lambdaChargerCar) y al recorrer hacia abajo podemos observar que existe un archivo index.js, este ahorita pasaremos a modificarlo, pero antes deberemos de trabajar de manera local, en donde en nuestro respectivo equipo deberemos de crear una carpeta (recomiendo una donde recuerden todos sus proyectos), la cual contendrá nuestros archivos y el paquete que nos permitirá consumir el servicio.

En mi caso le puse por nombre a la carpeta ChargerCar, y dentro de ella generé otra denominada lambda.

Captura de Pantalla 2019-11-29 a la(s) 12.14.52

Una vez hecho esto vayamos a esta ruta mediante la terminal e instalemos el paquete Axios con el siguiente comando: npm install axios

Captura de Pantalla 2019-11-29 a la(s) 12.17.14

Al terminar, nos habrá generado una carpeta denominada node_modules y un archivo package-lock.json, seleccionémoslos y comprimámoslos, de tal manera que nos genere un archivo .zip como a continuación podemos observar:

Captura de Pantalla 2019-11-29 a la(s) 12.21.23

Regresemos a nuestra función lambda en AWS, y en la sección de Código de la función, cambiemos el tipo de entrada de código por el de Cargar un archivo.zip

Captura de Pantalla 2019-11-29 a la(s) 12.27.15

Al hacer esto, deberemos de cargar el paquete que generamos con anterioridad (Archivo.zip), posteriormente damos en el botón Guardar.

Captura de Pantalla 2019-11-29 a la(s) 12.29.48

Si observamos con detenimiento, el archivo index.js desapareció de la estructura y este aparece de la siguiente manera:

Captura de Pantalla 2019-11-29 a la(s) 12.33.02

Ahora lo que deberemos de hacer es crear el archivo antes mencionado y otro llamado package.json, para esto solo posicionémonos en la carpeta raíz, y demos clic derecho – New File

Captura de Pantalla 2019-11-29 a la(s) 12.37.45

Y en cada uno, peguemos el código correspondiente que les comparto a continuación:

index.jspackage.json

index.js

La variable constante chargersUrl es igual al servicio externo, el cual es el que contiene la información que le haremos saber a nuestros usuarios, por ende, si se desea cambiarlo por el propio, solo deberán de respetar los elementos que contenga el json.

Captura de Pantalla 2019-11-29 a la(s) 17.39.16

En el mismo archivo podemos ver que existe un manejador denominado GetChargerIntentHandler, el cual llama al Intent que modificamos en nuestro Front: GetChargerIntent. En este se encuentra la lógica de extracción de datos del servicio, a los cuales accedemos mediante una variable constante llamada ecar y posteriormente lo regresamos con la información obtenida.

Captura de Pantalla 2019-11-29 a la(s) 17.39.30

package.json

Captura de Pantalla 2019-11-29 a la(s) 17.39.46

Vista Previa

Captura de Pantalla 2019-11-29 a la(s) 13.25.17.png

Ya para finalizar deberemos de enlazar nuestra lambda con nuestra Skill, para esto en la parte superior derecha se encuentra nuestro ARN (Amazon Resource Name), este deberemos de copiarlo para pegarlo en nuestro Endpoint, que se encuentra en el portal de alexa developer console.

Imagen 2Imagen 3Una vez hecho esto, guardemos y construyamos nuestra Skill, y comprobemos que funciona yendo a la pestaña de Test e invocando a la misma con el nombre que le asignamos previamente.Captura de Pantalla 2019-11-29 a la(s) 13.23.20Con esto terminamos, ¿te gustó? Si es así te invito a que te suscribas y compartas con tus amigos este material, recuerda que así logras que la comunidad de desarrolladores en español crezca.

Y como siempre a continuación dejo el código completo en mi GitHub de lo que se vio en este pequeño tutorial, recuerda que de igual manera te puedes unir a la comunidad en Facebook.

LogoNuevo.png

¡Happy Coding!

Un comentario sobre “Como consumir un servicio externo con Axios en Alexa

Agrega el tuyo

Responder

Por favor, inicia sesión con uno de estos métodos para publicar tu comentario:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s

WordPress.com.

Subir ↑

A %d blogueros les gusta esto: