Programar el back de una Alexa Skill con Typescript
Tags: alexa, alexaskills, typescript, awslambda
Published: 2020-10-28 16:31:10

---
title: Programar el back de una Alexa Skill con Typescript
published: true
date: 2020-04-08 09:12:29 UTC
tags: alexa,alexaskills,typescript,awslambda
canonical_url: https://www.kinisoftware.com/programar-el-back-de-una-alexa-skill-con-typescript/
---

Gran parte de la comunidad de desarrolladores de Alexa Skills usa [Javascript](https://developer.mozilla.org/en-US/docs/Web/JavaScript) como lenguaje del back con [node.js](https://nodejs.org/en/) como runtime. Desde luego tiene mucha popularidad y se ha convertido en todo un referente en la industria. En el mundo de Alexa hay más herramientas a día de hoy para JS o incluso [el propio SDK de JS](https://developer.amazon.com/en-US/docs/alexa/alexa-skills-kit-sdk-for-nodejs/overview.html) va siempre por delante de los otros.

Mis conocimientos de JS son mínimos ya que nunca he trabajado profesionalmente con el lenguaje, si acaso alguna cosa puntual, y me faltan los conocimientos relacionados con el runtime, con el sistema de dependencias, librerías, tooling, etc. Pero ahora me he puesto a aprender [Typescript](https://www.typescriptlang.org/) y eso me lleva de cabeza a todo el universo node.js. Al igual que pasa con Kotlin y Java, con Typescript y Javascript vas a tener de la mano la interoperabilidad de ambos lenguajes y todo su ecosistema.

## Mi setup para usar Typescript en una Alexa Skill

De momento solo estoy empezando y creando de cero [una skill con Typescript](https://github.com/kinisoftware/alexa-skill-mis-series). De todas formas, los pasos serán los mismos, ya sea empezar algo nuevo o migrar el back de una skill con Javascript. De echo, en mi caso, yo empecé con una skill creada en base a una plantilla con Javascript.

Ya de paso introduciré brevemente [ASK CLI](https://developer.amazon.com/en-US/docs/alexa/smapi/quick-start-alexa-skills-kit-command-line-interface.html), la herramienta por línea de comandos que ofrece Amazon para la gestión de skills.

### ASK CLI

Seré breve ya que no es el objetivo de este post y se puede consultar todo muy bien en la documentación oficial. Alexa Skills Kit Command Line Interface es una herramienta que, mediante línea de comandos, te permite gestionar todo lo relacionado con una Alexa Skill, incluso temas de back como lambda, S3, etc.

En la documentación oficial verás cómo puedes instalarla y configurar todo para su uso. [Podrás crear skills](https://developer.amazon.com/en-US/docs/alexa/smapi/ask-cli-intro.html#create-new-skill) a base de plantillas (node.js y python por ahora), ya sean alexa-hosted o no. En el caso de tener el back en AWS lambda podrás también gestionar esto de forma sencilla.

Desde la propia herramienta podrás hacer también [deploy de la skill](https://developer.amazon.com/en-US/docs/alexa/smapi/ask-cli-intro.html#deploy-skill) y usar ciertos comandos para probar la skill que te permite iniciar diálogos o simular conversaciones. Además hay herramientas en el mercado que se basan en ASK CLI para construir por encima temas de integración continúa o testing.

### Creando una Alexa Skill básica en JS con ASK CLI

Como decía antes, yo partí de una plantilla básica de skill que te facilita usar ASK CLI con el comando `new`.

![](https://www.kinisoftware.com/content/images/2020/04/Screenshot-2020-04-06-at-17.08.23.png)

En la imagen anterior se puede ver los tres puntos básicos que te pedirá el comando:

- Elegir el runtime > por el momento, node.js v10 o python.
- Elegir una plantilla > crea la skill basándose en una plantilla previa que puede tener más o menos features ya cubiertas (hay algunas ya con APL). No sólo puedes usar los templates de Amazon sino que puedes usar otros. En la doc oficial lo cuentan. [Aquí os dejo una plantilla](https://github.com/xavidop/alexa-typescript-lambda-helloworld) creada por [Xavi Portilla](https://twitter.com/xavidop) que sigue más o menos la estructura que cuento en este post con Typescript y todo configurado.
- Darle nombre a la skill > el nombre que tendrá el directorio que se crea y la skill en el listado de skills de tu Alexa Developer Console.

![](https://www.kinisoftware.com/content/images/2020/04/Screenshot-2020-04-06-at-17.24.41.png)

En la estructura básica que nos crea (yo he eliminado ficheros que no me interesaban) vamos a centrarnos en la parte de la lambda. Para que funcione correctamente tenemos que seguir dos pasos: configurar el proyecto para usar Typescript y configurar el despliegue.

### Configurar el proyecto

Aquí debemos configurar todo para que se pueda escribir código Typescript que luego se transpilará a Javascript. Podría bastar con añadir la dependencia en el `package.json` pero yo he usado [GTS](https://github.com/google/gts), una guía de estilo de Google, que además te configura [prettier](https://prettier.io/), [eslint](https://eslint.org/), etc. Además, si no tienes Typescript también te lo pone.

Soy consciente de que la magia conlleva un precio y que las decisiones que tome Google sobre esta guía de estilo son cuestionables pero a mi, de momento, me vale. Lo único que hay que hacer dentro del directorio `lambda/custom` es instalar GTS tal como viene en el readme del proyecto. Esto nos pondrá las dependencias necesarias, creará los ficheros de eslint y prettier, y creará algunos scripts para `npm`. Además, creará un directorio `src` donde pondrá un primer fichero `index.ts`. Me gusta eso de separar los ficheros de "configuración", como el `package.json` y tal, del código fuente.

El siguiente paso es tan simple como llevar los ficheros Javascript que ya existían en el proyecto al directorio `src` y cambiar su extensión a `ts`. Con eso ya tenemos el backend en Typescrit! Esto es así porque Typescript no es más que un superset de Javascript aunque, probablemente, el código que ya existía no vaya a compilar :) Tendremos que arreglar los errores, basado en tipos en su mayoría, antes de poder generar el código final que será desplegado en la lambda.

### Configurar el despliegue

Partiendo del proyecto de cero no tenemos información de despliegue de ninguna AWS lambda. Eso lo podemos ver mirando el fichero `.ask/config` que, en este punto, estará prácticamente vacío.

Con el primer `ask deploy` se va a crear todo lo necesario para usar AWS lambda como hosting del back. Para que todo funcione correctamente es necesario que tengas configuradas unas [credenciales AWS](https://developer.amazon.com/en-US/docs/alexa/smapi/manage-credentials-with-ask-cli.html#create-aws-credentials).

Una vez finalice la ejecución del deploy se habrá modificado el fichero `.ask/config` con la información referente a la lambda. Aquí simplemente debemos indicar el directorio donde estará el código Javascript que se generará desde Typescript. En mi caso, por defecto lo deja así GTS, estará en `lambda/custom/build/src`. Esto es totalmente personalizable.

Pero no basta solo con el código en ese directorio sino que harán falta el `package.json` y las dependencias. Para esto [os recomiendo mirar el artículo de Javi Mora](https://medium.com/alexa-tips/ask-deploy-con-typescript-34f87554e5f9), que lo explica muy bien y nos enseña algunos scripts para `npm` muy útiles. Es el artículo que tomé de referencia para toda esta parte del despliegue.

* * *

Aunque no está exento de la típica burocracia de configuración, una vez que hemos realizado lo contado en este post, podremos usar Typescript como lenguaje de nuestro back tranquilamente :)