Construyendo una Pokédex con Python y AWS CDK: Una guía paso a paso para crear tu propia aplicación web en menos de 25 minutos

¿Eres fanático de Pokemon? ¡Seguro que sí! Estos seres fantásticos han capturado nuestros corazones a través de videojuegos, series, películas y más. Pero, ¿alguna vez has soñado con tener tu propia Pokédex para explorar la diversidad y características únicas de cada Pokémon?

Hoy es tu día de suerte. En este post, te guiaré paso a paso para crear tu propia Pokédex en menos de 25 minutos usando AWS CDK, Python y la API pública de Pokémon. ¡Vamos a darle y no consejos!

Prerequisitos

Antes de comenzar, asegúrate de tener conocimientos básicos en los siguientes temas:

1. Familiaridad con AWS y su consola
2. Conocimientos básicos de Python
3. Experiencia con la línea de comandos

Configuración de herramientas

Para empezar, necesitamos configurar las herramientas necesarias para crear nuestra Pokédex. A continuación, te dejo la lista de herramientas que vamos a utilizar:

• Una cuenta de AWS
• AWS CLI
• AWS CDK
• Python 3.9 o superior
• Javascript Vanilla
• Un editor de código de tu preferencia

Configuración de nuestro entorno de trabajo

Lo primero que debemos hacer es configurar nuestro entorno de trabajo para poder desplegar nuestra solución. Sigue estos pasos:

Permisos

Siguiendo las buenas prácticas recomendadas por AWS, debemos crear un usuario y asignar solo los permisos necesarios para nuestro proyecto. Para ello:

1. Accede a la consola de AWS.signup#/start/email)
2. Ve al apartado IAM.
3. Crea un usuario y configura el acceso mediante [AWS Access Keys].

Una vez configurado, asigna los permisos necesarios para trabajar con el CDK. Una manera de hacerlo es asignar políticas con los permisos directamente al usuario.

Después de esto, configura tu consola con las credenciales recientemente creadas

aws configure
// Nos solicitará la siguiente información
AWS Access Key ID [None]:  
AWS Secret Access Key [None]: 
Default region name [None]: 
Default output format [None]:

Creando el proyecto CDK

Vamos a crear el proyecto usando Python. Abre una terminal y ejecuta el siguiente comando:

cdk init app --language python

Esto creará una carpeta con el nombre de tu proyecto, que contiene los archivos necesarios para el CDK. Entre estos, se encuentra el archivo app.py, donde vamos a concretar nuestra aplicación. También se crea un entorno virtual de Python, que se activa automáticamente.

Creación del Bucket de S3

En este paso, crearemos el bucket de S3 que contendrá los archivos de nuestro sitio web Pokedex. Abre el archivo app.py y modifícalo de la siguiente manera:

from constructs import Construct
from aws_cdk import (
    Stack,
    aws_s3 as s3,
    aws_s3_deployment as s3deploy,
    core
)


class CdkStack(Stack):

    def __init__(self, scope: Construct, construct_id: str, **kwargs) -> None:
        super().__init__(scope, construct_id, **kwargs)

        pokeBucket = s3.Bucket(self, id="pokebuck",
            website_index_document="index.html",
            website_error_document="error.html",
            public_read_access=True,
            block_public_access=s3.BlockPublicAccess.BLOCK_ACLS,
            access_control=s3.BucketAccessControl.BUCKET_OWNER_FULL_CONTROL,
removal_policy=core.RemovalPolicy.DESTROY
        )

        s3deploy.BucketDeployment(self, id="pokebuckdep",
            sources=[s3deploy.Source.asset("../static_site/")],
            destination_bucket=pokeBucket)

Aquí estamos creando una clase llamada CdkStack, que representa una pila de AWS CloudFormation, una colección gestionable de recursos de AWS. Dentro del constructor de la clase, estamos creando una instancia de la clase s3.Bucket, que representa un bucket de S3. Los parámetros se describen a continuación:

1. pokebuck: El identificador del recurso dentro de la pila.
2. website_index_document: El nombre del documento que se mostrará cuando se acceda al bucket como un sitio web. En este caso, será el archivo index.html, que se encuentra en la carpeta "static_site".
3. website_error_document: El nombre del documento que se mostrará cuando ocurra un error al acceder al bucket como un sitio web. En este caso, será el archivo error.html.
4. public_read_access: Un valor que indica si el bucket tendrá acceso público de lectura. Lo asignaremos como True para que nuestro sitio web de Pokedex pueda ser visto por cualquier persona.
5. removal_policy: La política que se aplicará al bucket cuando se elimine la pila. Le asignamos el valor core.RemovalPolicy.DESTROY para que el bucket se borre al momento de eliminar la pila.

También creamos una instancia de la clase s3deploy.BucketDeployment, que representa el despliegue del sitio web estático en el bucket de S3.
Le pasamos los siguientes parámetros:

1. pokedex-deployment: Identificador del recurso dentro de la pila.
2. sources: Lista de fuentes que contienen los archivos que queremos desplegar. En este caso, usamos el método s3deploy.Source.asset para indicar que los archivos se encuentran en la carpeta ./static_site de nuestro proyecto.
3. destination_bucket: Bucket de S3 donde desplegaremos los archivos. En este caso, es el bucket que hemos creado anteriormente.

Cargar el sitio web estático

Ahora vamos a cargar el sitio web estático que mostrará la información de los Pokémon. Para ello, vamos a usar el código que se encuentra en nuestro repositorio de GitHub, rama cdk, carpeta static_site. Este código es un sitio web estático, con JavaScript vanilla, que se comunica mediante Axios con la API pública de Pokémon v2 web.

Nota: Este proyecto no tiene como objetivo ser una solución frontend completa, sino ofrecer distintas posibilidades de trabajo relacionadas con la API pública de Pokémon. El frontend es totalmente mejorable y se aceptan sugerencias y aportes

Deploy deploy deploy!

Ya tenemos todo listo para desplegar nuestra aplicación. Para ello, vamos a usar los comandos del AWS CDK que nos permiten crear y gestionar la infraestructura en AWS. Los comandos son los siguientes:

1. cdk bootstrap: Prepara el entorno de AWS para el CDK, creando un bucket de S3 que almacenará las plantillas de CloudFormation y los artefactos de la aplicación. Solo hay que ejecutarlo una vez por cada cuenta y región de AWS que usemos.
2. cdk synth: Genera la plantilla de CloudFormation que representa nuestra aplicación y la muestra en la salida estándar. Con esto verificamos que nuestra aplicación está bien definida y que no haya errores de sintaxis o lógica.
3. cdk deploy: Crea y/o actualiza la pila de CloudFormation que representa nuestra aplicación y despliega los recursos en AWS.

Durante este proceso, obtendremos información de la consola del paso a paso.

Como recomendación, siempre es bueno acceder a la consola y revisar la sección de AWS CloudFormation, de esta manera podremos ir observando los eventos y cada una de las acciones realizadas dentro de nuestra cuenta.

DEMO

Conclusión

¡Felicidades! Has creado tu propia Pokedex en menos de 25 minutos usando AWS CDK, Python y la API pública de Pokémon. Ahora puedes explorar todos los Pokémon y sus características desde tu propia aplicación web.

Si te ha gustado este tutorial, no dudes en compartirlo y dejar tus comentarios. ¿Qué otras funcionalidades te gustaría agregar a tu Pokedex? ¡Déjamelo saber!