DEV Community

Cover image for Recomendador de anime: Crea una aplicaci贸n web para probar las recomendaciones personalizadas de anime en tiempo real.
Elizabeth Fuentes L for AWS Espa帽ol

Posted on • Updated on

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:

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.

Image description

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.

Image description

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).

Image description

Fig. 3 Seleccionar Clone from GitHub

Image description

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.

Image description

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/
Enter fullscreen mode Exit fullscreen mode
  1. Escribe en la terminal la siguiente secuencia de comandos:
npm install
npm start
Enter fullscreen mode Exit fullscreen mode
  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.

Image description

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).

Image description

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.

Image description

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).

Image description

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.

Image description

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

Image description

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).

Image description

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

Por ejemplo, el resultado de ingresar naruto (Fig. 13): 
Enter fullscreen mode Exit fullscreen mode

Image description

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)

Image description

Fig. 14. Descripci贸n del anime seleccionado.

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

Image description
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.

Image description

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:

Image description

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

Image description

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).

Image description

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

Image description

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.

Image description

Fig. 21 Amplify Hosting por primera vez.

  1. En el men煤 a continuaci贸n selecciona AWS CodeCommit (Fig. 22)

Image description

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.

Image description

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).

Image description

Fig. 24 Configuraci贸n de compilaci贸n en Amplify.  
Enter fullscreen mode Exit fullscreen mode
  1. En Rol de IAM selecciona Cree y utilice un nuevo role de servicio y luego Siguiente (Fig. 25).

Image description

Fig. 25 Selecci贸n opci贸n Cree y utilice un nuevo role de servicio.    
Enter fullscreen mode Exit fullscreen mode
  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).

Image description

Fig. 26 Implementaci贸n de aplicaci贸n web en Amplify.  
Enter fullscreen mode Exit fullscreen mode
  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
Enter fullscreen mode Exit fullscreen mode
  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:



隆Gracias!

Te dejo mis redes:
馃嚮馃嚜馃嚚馃嚤 Dev.to Linkedin GitHub Twitter Instagram Youtube

Top comments (0)