Programar el back de una Alexa Skill con Typescript

Gran parte de la comunidad de desarrolladores de Alexa Skills usa Javascript como lenguaje del back con node.js 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 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 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. 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, 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 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 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.

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 creada por Xavi Portilla 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.

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, una guía de estilo de Google, que además te configura prettier, eslint, 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.

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, 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 :)