Skip to content

Entrega 2

b-riveros edited this page Jun 17, 2024 · 7 revisions

En esta parte del proyecto, el objetivo era implementar un sistema CI/CD para la aplicación construida en la entrega 1. Para esto, íbamos a incluir dos nuevos requisitos funcionales y abordar cualquier problema pendiente de la primera presentación. Las dos nuevas funcionalidades que decidimos agregar fueron:

  1. Yo como cliente quiero poder seleccionar categorías para encontrar productos de interés.

    • Criterios de aceptación: Dado que el cliente ingresa a la plataforma, cuando seleccione la “barra de búsqueda“, entonces se le permite ingresar categorías preferidas, y los productos que cumplen las categorías van a ser mostrados.
  2. Yo como cliente quiero poder hacer una lista con productos deseados para volver a productos que el cliente le gusta en este momento, en el futuro.

    • Criterios de aceptación: Dado que el cliente ingresa a la plataforma, cuando seleccione la “barra de búsqueda“, entonces se le permite agregar un producto a una lista de deseados, y encontrar este producto mostrado en la lista en un momento más tarde.

Procedimientos:

Comenzamos instalando Jenkins en la nube (en una MV de azure, Linux) e integrando Jenkins con Slack y GitHub. Después, creamos una canalización CI/CD en Jenkins para automatizar tareas basadas en cambios en el repositorio.

Descripción de la herramienta:

Jenkins:

Jenkins es un servidor de automatización de código abierto que proporciona cientos de complementos para respaldar la creación, implementación y automatización de cualquier proyecto. En este proyecto, utilizamos Jenkins para implementar un sistema CI/CD que permita integrar cambios de código de manera continua y desplegar actualizaciones automáticamente. Instalamos Jenkins en la nube y lo configuramos para que ejecute trabajos automáticamente cada vez que se realicen cambios en el repositorio de código fuente, asegurando así un flujo de trabajo eficiente y automatizado.

Descripción del trabajo realizado:

Las etapas que se consideraron en el pipeline fueron las siguientes:

  1. Obtención de Código (Checkout): Esta etapa recupera el código fuente del sistema de control de versiones (en este caso Git) en el espacio de trabajo de Jenkins.

  2. Instalación de Dependencias (Install Dependencies):Esta etapa instala las dependencias necesarias del proyecto utilizando el comando npm install dentro del directorio fashiontrend. También limpia la caché de npm

  3. Compilación (Build): Esta etapa ejecuta el comando npm run build dentro del directorio fashiontrend, para compilar el proyecto.

  4. Implementación en Localhost (Deploy to Localhost): Esta etapa ejecuta la aplicación en modo de desarrollo utilizando npm run dev dentro del directorio fashiontrend.

  5. Ejecución de Pruebas (Run Tests): Esta etapa ejecuta el comando npm run cy:run dentro del directorio fashiontrend, para ejecutar las pruebas del proyecto.

  6. Envío de Información de Compilación a Jira (Send Build Info to Jira): Esta etapa envía información de la compilación a Jira.

Finalmente, al terminar, ocurren las acciones post, que en este caso es mostrar el mensaje de éxito o de error, y enviar una notificación a Slack indicando el resultado del pipeline.

Detalles del proyecto:

Se agregaron las funcionalidades correspondientes a la lista de deseados, utilizando un cliente en especifico, ya que, no se ha implementado las sesiones de cliente, las funciones permiten ver la lista, agregar productos a la lista y eliminarlos de la lista.

Dependencias entre la herramienta y la aplicación:

En la máquina virtual de Azure, primero se instaló Java ya que Jenkins lo requiere para ejecutarse, y no venía incluido. Siguiendo la documentación de Jenkins, se instaló la versión 17 de OpenJDK. Luego, se instaló Jenkins.

En Jenkins, se instalaron los siguientes plugins para que funcione el pipeline:

  • Git Plugin: permite conectar Jenkins con repositorios Git para la obtención de código.
  • NodeJS Plugin: facilita la gestión de las instalaciones y configuraciones de Node.js en Jenkins.
  • Slack Plugin: permite enviar notificaciones a Slack desde Jenkins.
  • AnsiColor Plugin: Para la salida de texto con colores en la consola de Jenkins, para ver los resultados de Cypress.
  • Atlassian Jira Software Cloud Plugin: Para la integración con Jira Software Cloud y el envío de información de la compilación.

Problemas encontrados y soluciones:

Al integrar Jenkins con Github, el problema que se tuvo al inicio fue que al configurar webhooks en GitHub no se estaba colocando el endpoint correcto de github-webhooks para conectarlo con el trabajo en Jenkins, sin embargo luego de que se identificó que el error era por eso se pudo resolver fácilmente. Por otro lado, al ejecutar el pipeline, se obtuvieron errores de dependencias que no se tenían en la máquina virtual de Azure, pero se solucionó fácilmente al instalarlos.

Por otro lado, al integrar con Slack, el problema que hubo fue que inicialmente se habia agregado Jenkins como aplicación directamente, y no funcionó. Sin embargo, leyendo la documentación pudimos notar que había que crear una nueva App en Slack y agregarla al workplace.

Con respecto a Cypress, las pruebas se pueden ejecutar en la máquina virtual, sin embargo la prueba de añadir producto no pasó el test, (localmente si funcionó) ya que no encuentra el elemento CSS que se usó para identificar el botón de añadir producto.

Clone this wiki locally