Recomendador de anime: Crea una aplicación web para probar las recomendaciones personalizadas de anime en tiempo real.

🇻🇪🇨🇱 Dev.to Linkedin GitHub Twitter Instagram Youtube

github: https://github.com/aws-samples/aws-recomendador-anime/tree/main/recomendador-de-anime

Blog original --> https://aws.amazon.com/es/blogs/aws-spanish/crea-una-aplicacion-web-para-probar-las-recomendaciones-personalizadas-de-anime-en-tiempo-real/

series: Recomendador de anime

Recomendaciones personalizadas de anime, es una serie de episodios donde te guío en la construcción de una aplicación web capaz de entregar una experiencia personalizada de recomendaciones de animes, nuevos de la preferencia del usuario y, a medida que se utiliza con mayor frecuencia, puede ir entregando recomendaciones cada vez más relevantes.

Consiste en los siguientes episodios:

• Cómo crear un modelo de recomendaciones personalizadas.
• Cómo desplegar el modelo recomendador de anime en una API REST
• Crea una aplicación web para probar las recomendaciones personalizadas de anime en tiempo real.
• Agrega autenticación a tu aplicación web.
• Medir el impacto de las recomendaciones personalizadas en los usuarios.

En el primer episodio se entrenó un modelo de recomendaciones de anime utilizando Amazon Personalize empleando las calificaciones de Anime. Este modelo se puede utilizar a través de la API de Personalize Runtime utilizando un jupyter notebook.

En el segundo episodio se hizo la integración de la API de Personalize a una API REST (Fig. 1) empleando Amazon API Gateway para invocar funciones de AWS Lambda, y así consumirla de forma segura y escalable, esta API permite entregar las recomendaciones de acuerdo a los gustos del usuario y/o anime consultado, agregar la metadata necesaria, filtrar los resultados por géneros y además alimentar el modelo recomendador con las nuevas interacciones de los usuarios empleando Event Tracker de Amazon Personalize.

Fig. 1 Diagrama de api-rest para un recomendador utilizando Amazon Personalize.

En este episodio vas a desplegar una aplicación web que simulará la interfaz de una plataforma de video streaming de series y películas de Anime, donde el usuario podrá:

• Realizar búsquedas de anime a través del nombre (1 en Fig. 1).
• Recibir recomendaciones de animes personalizadas (2 en Fig. 1) de acuerdo con los filtros creados en el primer episodio (Shounen, Music, Drama, Sci-Fi y Action).
• Seleccionar un anime conduciéndolo a una nueva página, donde:
o Recibirá la descripción del anime (3 en Fig. 1),
o Recibirá recomendaciones de anime similares (4 en Fig. 1) al que está mirando.
o Podrá simular que lo visualizo y calificarlo (5 en Fig.1)
o Ingresada la calificación la aplicación entregará recomendaciones de acuerdo a esta preferencia, porque el modelo se estará retroalimentando con el perfil del usuario.

En la creación de esta aplicación vas a desplegar el código fuente en el repositorio de este proyecto, creado con react y complementado con el sistema de diseño CloudScape.

Para empezar (Fig. 2)

• Clonarás el repositorio del proyecto en un entono virtual de desarrollo de AWS Cloud9
• Acá es donde configurarás los endpoints las APIs REST creadas en el episodio anterior (tus APIs)
• Probarás la aplicación web de forma local.
• Crearás un repositorio nuevo con los cambios en AWS CodeCommit
• Finalmente, el despliegue de la aplicación web de recomendaciones de Anime lo harás empelando el servicio de AWS Amplify.

Fig. 2 Diagrama creación aplicación web recomendación de anime.

Esto te permitirá emplear el método de una integración y despliegue continuo (en ingles continuous integration/ continuous deployment – CI/CD), los cambios que se realicen en el repositorio de CodeCommit automáticamente generaran un nuevo despliegue de la aplicación para integrar los nuevos cambios.

¡A construir! 🧰🚀

El proyecto 👷🏻: Crea una aplicación web para recomendaciones personalizadas de anime en tiempo real.

Pre-requisitos:
• Cuenta de AWS
• Conocimientos básicos en Python.
• Conocimientos básicos en JavaScript / react.

Manos a la obra 🚀 👩🏻‍🚀

 Paso 1: Despliega la API REST del modelo recomendador de anime.

1. Sigue los pasos del episodio Cómo crear un modelo de recomendación personalizado e ignora el paso final donde se borran los recursos.
2. Sigue los pasos del episodio Cómo desplegar el modelo recomendador de anime en una API REST e ignora el paso final donde se borran los recursos.

Paso 2: Crea y configura el entorno en AWS Cloud9.

1. Para crear el entorno en AWS Cloud9 sigue los pasos en este link, y selecciona la región en la cual configuraste en los dos episodios anteriores.
2. Para la configuración debes clonar el repositorio de esta serie de episodios, selecciona Clone from Github en la pestaña de bienvenida de Cloud9 (Fig.3), y luego pega el link del repositorio https://github.com/aws-samples/aws-recomendador-anime (Fig. 4).

Fig. 3 Seleccionar Clone from GitHub

Fig. 4 Clona repositorio de Recomendaciones personalizadas de anime

 Paso 3: Configura las URL de la API REST para que sean invocadas por la aplicación web.

Para eso modifica el valor de APIS del archivo en app-recomendador/src/apis_url.js (Fig. 5) pegando los valores de Invocar URL que obtuviste en el paso 10 del episodio 2.

Fig. 5 Valores a modificar en archivo en app-recomendador/src/App.js

 Paso 4: Corre la aplicación localmente en Cloud9.

Lanza la aplicación react existente en el repositorio en el localhost de Cloud9, para eso:

1. Ve a la carpeta app-recomendador:

cd aws-recomendador-anime/app-recomendador/

1. Escribe en la terminal la siguiente secuencia de comandos:

npm install
npm start

1. Para visualizar la aplicación debes ir a Preview y seleccionar Preview Running Application (Fig. 6), esto debido a que estas dentro del ambiente virtual de Cloud9, pero si estuvieras trabajando en un ambiente local la aplicación se desplegaría de forma automática en el navegador.

Fig. 6. Menú para ver una aplicación web en Amazon Cloud9.

Copia la dirección de esa nueva ventana y pégala en el navegador (Fig. 7).

Fig. 7. Aplicación web local en Amazon Cloud9.

Paso 5: Prueba localmente la aplicación Recomendador de anime.

El paso anterior te muestra una aplicación web como en la Fig. 8.

Fig. 8. Aplicación Recomendador de Anime.

Las recomendaciones son personalizadas para el usuario que la utiliza, al ingresar a la aplicación web creada en este episodio lo haces con un usuario genérico 500000, escrito en el código, por lo que todas las recomendaciones entregadas van a estar asociadas a ese usuario, lo puedes cambiar el menú Probar con otro User ID (Fig. 9).

Si deseas generar un usuario para ti y empezar a recibir recomendaciones personalizadas debes ingresar un ID de usuario mayor a 320.000, correspondiente al ID de usuario de mayor valor en el dataset empleado para entrenar el modelo (un usuario que el modelo no conoce).

Fig. 9. Cambiar ID de usuario.

No se recomienda forzar el registro de usuarios en el código, esta es una excepción para probar la aplicación. Para crear una aplicación web segura en el próximo episodio se va a abordar como incorporar un pool de usuarios.

Tomando la consideración anterior, te explico como interactuar con las API REST creadas en el episodio anterior (Fig. 1) desde esta aplicación web.

1. Información entregada por Anime: Es información entregada a las API REST (Fig.1) por Personalize para cada Anime (Fig. 10), Recommendation Score es la puntuación (0 a 100%) que genera Personalize a los elementos y se refiere a la certeza de que el usuario prefiere ese contenido.

Fig. 10 Información de Anime.

1. Recomendaciones de anime por género: en el inicio de la página verás 4 recomendaciones de anime personalizadas para el usuario separadas por género (Shounen, Drama, Music, Sci-Fi, Action), esto se logra consultando la API REST personalization (Fig. 1), por ejemplo, para Shounen (Fig.11):

https://API-ID.execute-api.TU-REGION.amazonaws.com/prod/personalization/50000?filter=Shounen

Fig. 11. Recomendaciones personalizadas de género Shounen.

1. Búsqueda de anime por su nombre: en el menú donde dice Ingresa Anime para buscar (Fig. 12), al ingresar el nombre de un anime va a invocar la API REST search (Fig. 1).

Fig. 12. Búsqueda de anime por su nombre.

Por ejemplo, el resultado de ingresar naruto (Fig. 13): 

Fig. 13. Resultado de búsqueda de anime por su nombre.

1. Selecciona Ver Anime: automáticamente abre una nueva ventana que te mostrará: a. Descripción del anime (Fig.14), entregada por la API REST get_anime (Fig. 1)

Fig. 14. Descripción del anime seleccionado.

b. Animes Similares a ese anime seleccionado (Fig. 15), entregada por la API REST sims. (Fig. 1)

Fig. 15. Animes Similares al anime seleccionado.

c. Recomendaciones personalizadas para ti, entregada por la API REST personalization sin el filtro del género.

1. Selecciona Calificar. En una ventana (Fig. 16) podrás calificar el anime. Esto permite alimentar modelo de recomendaciones de anime con tu preferencia empleando la API REST tracker.

Fig. 16. Ventana calificar anime.

1. Actualiza las recomendaciones: cuando alimentas el modelo con tus preferencias automáticamente se va a actualizar para entregarte recomendaciones nuevas ajustadas a ellas, esto lo descubres actualizando el navegador.

Paso 6: Explora el código del front-end de la aplicación web.

La aplicación esta creada con react y el de diseño proviene de los componentes de CloudScape (Fig. 17)

Si quieres crea una nueva aplicación debes seguir los pasos para crear una aplicación con react y los de instalación de CloudScape, luego comienza a armarla importando y utilizando los componentes de CloudScape listos. En la aplicación de Recomendador de Anime se utilizan los siguientes:

Fig. 17. Diseño de la aplicación con CloudScape.

• Para crear la barra de navegación (1 en Fig. 17): Top Navigation Compuesta por otros componentes: o Button o Button dropdown
• Para crear la búsqueda: Input con un Button
• Para visualizar los animes en listado (3 en Fig. 17): Cards
• Para armar la estructura de la página (4 en Fig.17): Grid

Fig. 18. Diseño de la vista de animes en la aplicación con CloudScape.

• El botón de Calificar el anime en la Fig. 18 es un Modal.

En este punto la aplicación debe funcionar localmente y aprovecha de explorar el código en la carpeta src.

 Paso 7: Crea un repositorio en AWS CodeCommit en la consola.

1. Ingresa a la consola de AWS CodeCommit.
2. Selecciona la región donde configuraste los episodios anteriores.
3. En Repositorios selecciona Crear el repositorio.
4. En Nombre del repositorio escribe recomendador-anime y selecciona Crear.

Paso 8: Actualiza el repositorio de CodeCommit con tu código.

1. En Cloud9 abre una nueva terminal desde el menú de Window y luego New Terminal (Fig. 19).

Fig. 19. Nueva terminal en Cloud9.

1. Ve a la carpeta aws-recomendador-anime:

cd aws-recomendador-anime

1. Agrega un el repositorio recomendador-anime como nuevo destino remoto:

git remote add origin_new codecommit://recomendador-anime

1. Sube todo aws-recomendador-anime al nuevo repositorio (nuevo remoto del paso anterior) (Fig. 20):

git push -u origin_new main


Fig. 20 Repositorio recomendador-anime en la consola de CodeCommit.

1. Actualiza el nuevo repositorio con las URLs de las APIs que agregaste en el Paso 3:

git add .
git commit -m "actualizando las apis"
git push origen_new main

 Paso 8: 🥳🚀👩🏻‍🚀 Despliega el Recomendador de anime en una aplicación web:

1. Ingresa a la consola de AWS Amplify
2. Selecciona la región donde configuraste los episodios anteriores.
3. Si es la primera vez que entras a la consola de Amplify, ve hasta el final y selecciona Introducción en Amplify Hosting (Fig. 21). Si no es la primera vez, ve a Todas las aplicaciones, selecciona Nueva aplicación y luego Aloja la aplicación web.

Fig. 21 Amplify Hosting por primera vez.

1. En el menú a continuación selecciona AWS CodeCommit (Fig. 22)

Fig. 22 Menú creación de Amplify Hosting.

1. Selecciona el repositorio recomendador-anime, selecciona la casilla ¿Conectando un monorepo? Escoja una carpeta y escribe el app-recomendador, carpeta donde se encuentra el código de la aplicación web (Fig. 23) y selecciona Siguiente.

Fig. 23 Configuración de Agregar ramificación de repositorio en Amplify.

1. Amplify se basa en el lenguaje de programación de la aplicación para determinar el tipo de aplicación web y genera un archivo de configuración que contiene las instrucciones para empaquetar o compilar la aplicación, así como las instrucciones para desplegarlo y/o probarlo. Dicho archivo utilizado para crear el pipeline de CI/CD puede ser personalizado para funciones más avanzadas (Fig. 24).

Fig. 24 Configuración de compilación en Amplify.  

1. En Rol de IAM selecciona Cree y utilice un nuevo role de servicio y luego Siguiente (Fig. 25).

Fig. 25 Selección opción Cree y utilice un nuevo role de servicio.    

1. Finaliza con Guardar e implementar.
2. Ahora puedes ver el proceso de CI/CD de la aplicación web en la consola de Amplify, te invito a curiosear y observar cada paso a medida que avanza, cuando finalice tu aplicación estará lista en el link que se encontrara dentro del recuadro naranja (Fig. 26).

Fig. 26 Implementación de aplicación web en Amplify.  

1. Cuando ingreses al link podrás hacer todo lo que hiciste en el Paso 5, pero esta vez desde cualquier parte del mundo.

Paso 9: Opcional – Probar las maravillas de CI/CD.

1. Ve a Cloud9.
2. En aws-recomendador-anime/app-recomendador/src/AppTopNavigation.json modifica el valor de la línea 47 R_ecomendador de Anime_, por el texto que desees.
3. Actualiza el repositorio de CodeCommit:

git add .
git commit -m "probando la integracion continua"
git push origen_new main

1. Ve a la consola de AWS Amplify, ingresa a tu aplicación y observa cómo se realiza un nuevo despliegue de tu aplicación, al finalizar recarga la página web y podrás ver el cambio.

Paso 10: Limpieza de recursos en la cuenta de AWS.

Estos pasos son opcionales, si tu intención es continuar con la construcción de la aplicación web, puedes mantener los recursos ya que los vamos a utilizar en el próximo episodio de esta serie.

De lo contrario, sigue los siguientes pasos:

1. Borrar recursos en AWS Amplify: En la consola de Amplify, ingresa a tu aplicación y en Acciones selecciona Eliminar la aplicación.
2. Borrar el repositorio en AWS CodeCommit: En la consola de CodeCommit ve Repositorios, selecciona el repositorio recomendador-anime y luego en Eliminar el repositorio.
3. Borrar el ambiente virtual de AWS Cloud9: En la consola de Cloud9 ve a Environments, selecciona el ambiente y luego Delete.

 Conclusiones

Ahora ya tienes una aplicación web que te permite recibir una experiencia personalizada de recomendaciones de animes nuevos de la preferencia del usuario. Además, la aplicación está preparada para entrenarse con tus gustos calificando animes y así te entregue recomendaciones cada vez más relevantes.

En este episodio desbloqueaste nuevas habilidades: exploraste la posibilidad de crear aplicaciones web de forma modular utilizando los componentes listos para utilizar de CloudScape, aprendiste a trabajar en un ambiente virtual de AWS Cloud9, a crear un repositorio en AWS CodeCommit y a emplearlo en el despliegue de la aplicación en AWS Amplify aprovechando las ventajas del CI/CD.

Pero este no es el final, aun te falta:
• Incorporar un pool de usuarios a una aplicación web.
• Analizar el comportamiento de una aplicación web mediante un dashboard.
Te dejos estos recursos para que sigas aprendiendo de las herramientas utilizadas:

• Implementar una aplicación web en AWS Amplify.
• Configuración de dominios personalizados con AWS Amplify.
• Amplify Immersion Day Workshop
• Crear una aplicación móvil en la nube
• WorkShop de Static Web
• Build a cloud experience with Cloudscape Design System 🚀
• Build on AWS Weekly - S1 E2 - Breaking Blocks with Terraform
• WorkShops de AWS CodeCommit

¡Gracias!

Te dejo mis redes:
🇻🇪🇨🇱 Dev.to Linkedin GitHub Twitter Instagram Youtube