Aplicación web para etiquetar imágenes de entrenamiento de redes neuronales.

por

Alexis Ivan Puc Oxte

Reporte de estadía

Presentado

En opción al título de

Técnico Superior Universitarios en

Tecnologías de la Información y Comunicación

Sistemas Informáticos

de la Universidad Tecnológica Metropolitana

Mérida, Yucatán 2018

Aplicación web para etiquetar imágenes de entrenamiento de redes neuronales.

por

Alexis Ivan Puc Oxte

Reporte de estadía

Presentado

En opción al título de

Técnico Superior Universitarios en

Tecnologías de la Información y Comunicación

Sistemas Informáticos

de la Universidad Tecnológica Metropolitana

Mérida, Yucatán 2018

 El presente reporte contiene información que no ha sido

Presentada anteriormente por otra persona para obtener el

Título de Técnico Superior Universitario; asimismo, la

Información proporcionada por la empresa u organización

es confidencial y su uso es estrictamente académico

 AGRADECIMIENTOS

En primer lugar, agradezco a mis padres por el apoyo que me han brindado a lo largo

de mis estudios por haberme dado la oportunidad de estudiar una carrera

universitaria. Le doy gracias por sus consejos enseñanzas para hacer de mí una gran

persona también brindarme las herramientas necesarias para salir adelante al igual a

toda mi familia que durante todo este tiempo me apoyaron y motivaron para cumplir

mis metas.

A mi tutor Ing. Laura Castillo Salazar por su ayuda durante la estadía ya que gracias

a sus consejos el trabajo se realizó de la manera correcta.

A la Empresa Ksquare Labs México por permitirme estar involucrado en el desarrollo

de este proyecto y por la confianza.

A la Universidad Tecnológica Metropolitana por brindar un servicio de excelente

calidad

A mis maestros que a lo largo de estos años han compartido sus conocimientos.

A mis amigos y compañeros por hacer que este tiempo en la escuela sea más

relajado

A la beca de MANUTENCION por el apoyo económico brindado, el cual fue de

mucha ayuda ya que me sirvió para cubrir los gastos escolares, el transporte etc.
 CONTENIDO

Abstract

Introducción

Antecedentes y contexto

Proyecto

Objetivos

Método

Intervención desarrollo

Conclusiones y recomendaciones

Anexos

Referencias
Abstrac
 INTRODUCCIÓN

El presente documento trata sobre el proyecto denominado Aplicación web

para etiquetar imágenes de entrenamiento de redes neuronales.

A continuación, se explicará los apartados que contendrá la realización del

mismo

En el primer apartado se abarcan los antecedentes y contexto indicando la

historia de la empresa Ksquare labs contemplando su misión visión, objetivos valores

organigrama y descripción de funciones. El contexto explicó cómo se trabajó en la

empresa el clima organizacional, la ayuda obtenida en la realización del proyecto.

El segundo apartado Proyecto, describe la problemática planteada. En el cual

se explica el alcance, las limitaciones y delimitaciones que se obtuvieron durante el

proceso, los pasos principales para el uso de la aplicación, así como también

ventajas y desventajas.

El apartado de objetivos se explica el objetivo general que consiste en

establecer un desarrollo eficaz y los objetivos, específicos para establecer los

alcances y limitaciones para el logro del proyecto. El cuarto método se explica el

modelo de desarrollo de software que se implementó, para las actividades que se

dieron durante el diseño y desarrollo del proyecto. De igual manera las herramientas

utilizadas en el proceso de desarrollo.

En el quinto apartado Intervención y desarrollo se describe como fueron los

pasos del desarrollo del proyecto por medio de algunas capturas de pantalla de cada

módulo explicando la función de cada una de ellas.

En el siguiente se mencionan las conclusiones y recomendación en donde se

concluye el proyecto dando a conocer el logro de la aplicación.

 Por último, se muestras los anexos en donde se incluyen diagramas de caso

de uso y secuencia que se utilizaron para saber cómo se encuentra la relación del

proyecto y como está conformado dando una idea del sistema.

Para finalizar se mencionan las referencias en donde se encuentran todas las

consultas bibliográficas que se obtuvieron de barias fuentes como páginas de

internet, libros etc.

 ANTECEDENTES Y CONTEXTO

En Ksquare. empresa de tecnología digital de rápido crecimiento centrada en

mejorar las capacidades tecnológicas y ayudar en la transformación digital de sus

clientes. Utilizando las últimas herramientas tecnológicas y las metodologías

iterativas de ritmo rápido, como Machine Learning y UI / UX, para aplicaciones

empresariales y aplicaciones móviles.

Historia de Ksquare

Nuestra historia comienza en 2014, con la fundación de Ksquare Inc. en

Dallas, Texas. Nuestro CEO Varma Buddharaju desarrollando y consultando ofertas

de tecnología de la información para brindar de estos servicios a compañía de alta

reputación en los Estados Unidos de América.

En septiembre 2016, con el propósito de expandir la compañía, decidimos

cruzar las fronteras y convertirnos en una compañía internacional, abriendo nuestras

primeras oficinas en Mérida, Yucatán, con el nombre Ksquare Labs México.

En julio del 2017 Infolob Solutions Inc., y Oracle database management

solutions, se integraron al manejo y desarrollo de software con nuestro equipo de

desarrollo en Irving, Texas, completando así la adquisición y el renombre de

Ksquare Solutions.

¿Por qué el interés en machine learning?

Machine learning es el proceso automatizado de analizar datos, para

reconocer patrones usando algoritmos que pueden aprender en cada iteración.

 El objetivo del machine learning es encontrar información valiosa que no es

evidente o fácil de encontrar. Con machine learning es posible de forma rápida y

automática producir modelos que pueden analizar más grandes, más complejos

datos y entregar más rápido, resultados más acertados – incluso a muy grande

escala. Al construir modelos precisos, una organización tiene una mejor oportunidad

de identificar oportunidades de ganancia – o evitar riesgos en la incertidumbre.

¿Qué es lo más importante que han realizado?

Creemos que lo más importante que hemos realizado es trabajar con

inteligencia artificial. No solamente creemos si no aseguramos que es el futuro de

toda tecnología en el futuro, por lo cual tratamos que nuestros desarrolladores de

involucren a aprender más para poder crecer juntos como empresa.

Contexto

Visión

Posicionarnos como la principal empresa de desarrollo software en la

península de Yucatán a través de relaciones estratégicas con diferentes sectores de

la comunidad nacional e internacional, ofreciendo oportunidades laborales

competitivas para nuestros empleados y brindando a nuestros clientes un servicio de

calidad, y atención especializada y personalizada.

Misión

Somos una compañía de tecnologías digitales, nos enfocamos en ayudar a

nuestros clientes a alcanzar un alto nivel de competencia mediante el desarrollo de

soluciones innovadoras satisfaciendo las necesidades por encima de las

expectativas, brindando las últimas herramientas tecnológicas. Así mismo, nuestro

equipo de trabajo se basa en el respeto, compromiso y colaboración, permitiendo el

desarrollo óptimo de cada proyecto

Valores

● Respeto. Diversidad humana, complementariedad, diferentes formas de hacer

y ver el mundo.

● Colaboración. Somos un equipo, trabajo interdisciplinario, apoyo y busco la

integración de ideas.

● Compromiso. Cada quien conoce cuál es su trabajo y aporta sus habilidades y

conocimientos para lograr los objetivos. Los demás cuentan contigo y te

apoyan cuando tú entregas lo mismo. El compromiso es recíproco.

En Ksquare Labs Mexico. es una empresa que se preocupa por la atención de

sus trabajadores, no sólo les proporciona las instalaciones, si no que igual les

proporciona las herramientas para el desarrollo de sus proyectos como por ejemplo

Laptops al igual de instalaciones para conferencias con sus clientes, áreas de

recreación y área de comida. Los desarrolladores se contactan por medio de Skype

ya que la mayoría de los clientes de Kquare Labs Mexico son extranjeros es por esto

que necesitan comunicar por medio de video llamadas.

Las instalaciones que aporta la empresa son totalmente cómodas, a todos los

trabajadores se le proporciona un espacio de trabajo que consta de una silla

ejecutiva y una mesa lo suficientemente espaciosa como para que estén 4

desarrolladores trabajando. La mesa consta de 8 entradas de electricidad para la

conexión de dispositivos electrónicos.

 Como se había mencionado la empresa consta con dos cuartos para

conferencias, y también cuenta con 5 baños, una sala de estar, una cocina equipada

con estufa, refrigerador, horno de microondas, dos áreas acondicionadas como los

comedores, las áreas donde trabajan los programadores que son 2 la primera es un

pasillo y la segunda es un cuarto en la parte alta, el cuarto de recursos humanos y el

cuarto para marketing. También en la casa se encuentran 4 módems para otorgar

internet a todos los rincones de la casa. La ubicación de la empresa es Calle 10 307,

Montebello, 97113 Mérida Yucatán, En la figura 1.0 se muestra la ubicación exacta,

del lugar donde estamos realizando la estadía.

Figura 1.0 Ubicación de la empresa Ksquare Labs México fuente:(Google maps)

A continuación, podremos ver el organigrama de la empresa (véase figura

número 2.0), como el CEO de la empresa se encuentra en la cabeza Varma Commented [1]: Véase fig, 2

Buddharaju seguidamente del director de operaciones en México Rajesh Kumar,

manejando las 3 áreas inferiores que son las siguientes, Human resources

Department, Development Department, Marketing Department.

 Cada departamento cuenta con sus encargados, el departamento de HR

Department la encargada es la Licenciada Zazil María Pérez Várguez este

departamento se encarga de reclutar al personal y de hacer actividades para la

convivencia entre todos los empleados.

Marketing Department el encargado es el Lic. Andrés Solís Santamaría este Commented [2]: Explicar la función del departamento

departamento se encarga de dar a conocer al público la empresa para esto cuenta

con algunos proyectos entre ellos el más importante es Tech Dojo, que es una

plataforma todo en uno construida para unir desarrolladores en todo el mundo para

participar, colaborar y sobresalir en la mejora de sus habilidades.

Developtment Department el encargado es el Ing. Juan Mendoza la empresa

ksquare tiene varios proyectos de desarrollo para esta problemática la empresa

decidió agrupar cada desarrollo en sub departamentos, entre estos se encuentra el

sub departamento de Inteligencia Artificial y el encargado es el Doctor Jorge Ríos

quien tiene a su cargo un equipo de especialistas en el área de machine learning que

se encargan de desarrollar los algoritmos, que pueden reconocer objetos, y

sentimiento en un tweet u oración, estos algoritmos aún se encuentran en una etapa

muy temprana de desarrollo aún tienen bugs pero el equipo trabaja día con día para

mejorarlos. De aquí surge la necesidad de un equipo de desarrollo que pueda

realizar las aplicaciones para probar sus algoritmos.

Figura 2.0. Organigrama de la empresa Ksquare Labs Mexico Fuente: (Elaboración

propia)

PROYECTO

Planteamiento del problema Commented [3]: Leer de nuevo

En el departamento de Inteligencia artificial se trabajan en varios algoritmos

algunos de ellos ya están en una fase de entrenamiento mientras que otros apenas

van en fase de desarrollo.

La problemática surge a partir de que el Departamento de Inteligencia artificial

tiene algunos algoritmos que pueden reconocer los objetos dentro de una imagen. El

Doctor Jorge Rios necesitaba un equipo de desarrollo que pueda dedicarse a

desarrollar una aplicación para probar los algoritmos.

Propuesta
 Consiste en crear, desarrollar e implementar una aplicación que se describe a

continuación.

Aplicación Web se encargará de proveer al usuario una interfaz atractiva

donde tendrá todas las opciones con las cuales podrá interactuar, podrá subir sus

imágenes para que sean procesadas y reconocidas por un algoritmo de inteligencia

artificial, también el usuario podrá agrupar estas imágenes en carpetas y contará con

un control de acceso.

Web Service Su principal función es establecer los enlaces de comunicación

de datos entre la aplicación Web y los algoritmos logrando así el alcance deseado.

Alcance

El sistema Aplicación web para etiquetar imágenes de entrenamiento de redes

neuronales. Consistió en la creación y desarrollo de un Web service e Interfaz Web

El sistema Cuenta con los siguientes apartados.

● Galería de Imágenes

● Vista para subir Imágenes

● Vista para escoger un algoritmo

● Vista de imagen con todos los objetos

● Login

A continuación, explicaremos los componentes con los que cuenta la interfaz

web, se le denomina componente ya que la tecnología que usamos para crear las

interfaces, ese nombre les da.

Componente del Login: Este componente servirá para que el usuario ingrese

sus credenciales como el correo electrónico y contraseña, cuenta con dos inputs Commented [4]: Entre parentesis
cada uno corresponde a los datos mencionados y también cuenta con botón que se

encarga de enviar los datos del usuario, si el proceso del login se realiza de manera

correcta el usuario será redirigido a la vista principal.

La vista principal es un conjunto de varios componentes.

El primero una barra o cabecera donde se encuentra el nombre del usuario, un

pequeño icono de usuario y también un botón para que el usuario pueda cerrar la

sesión.

Componente de opciones este componente cuenta con tres opciones, delete

álbum, créate álbum y upload photo, cada uno de estos cuenta con un color

representativo para eliminar es color rojo, para crear es el color verde y para subir

una foto es de color azul. También cada opción tiene un Icono que lo identifica. Si el

usuario presiona la opción delete react modificará el componente de álbum para

mostrar un icono de eliminar sobre cada álbum. Si el usuario selecciona la opción de

créate álbum se mostrará un nuevo componente que es un modal. Por último si el

usuario selecciona la opción de upload photo será redirigido a un nuevo componente

llamado Drag and Drop que más adelante se describirá con detalle.

Componente de Álbum este componente se encarga de mostrar el nombre de

los álbumes, así como un icono que es el mismo para todos.

Por finalizar se tiene al último componente que conforma la vista principal y es

un paginado, tal y como el nombre lo indica tiene la función de paginar todos los

álbumes que el usuario tenga, este componente tiene a los costados dos indicadores

en forma de flecha para cambiar de álbumes. Con esto finaliza de describir la

pantalla principal para el usuario.

 Componente Drag and Drop el diseño de este componente es el siguiente al

centro cuenta con un Texto, debajo de esto un botón en color verde y por último tiene

icono que hace referencia a unas fotos. La función del componente es de subir las

imágenes al servidor de una manera intuitiva y amigable para el usuario.

Componente de Galería este componente tiene la funcionalidad de mostrar al

usuario todas las imágenes que previamente haya subido y procesado con los

algoritmos de reconocimiento de objetos en la parte superior del componente tiene

una barra de búsqueda donde se podrá filtrar las imágenes de acuerdo a los objetos

que el usuario desee, debajo de esto se encuentran las imágenes del usuario en

miniatura cuando el usuario seleccione alguna imagen se despliega un componente

donde podrá ver la imagen, todos sus datos así como los objetos encontrados en la

imagen.

Componente de Selección de algoritmo en este componente el usuario podrá

escoger que tipo de algoritmo desea para procesar la imagen y el diseño es el

siguiente en la parte superior se tiene tres opciones con los nombres

correspondientes estas opciones hacen referencia a los algoritmos que se pueden

usar, en la parte central está la pre visualización de la imagen subida anteriormente

en el componente de drag and drop. Cuando el usuario haya seleccionado la opción

que desee aparecerá un botón hasta la parte de abajo para aplicar el procesamiento

de la imagen. Cuando el procesamiento haya finalizado se dibujará unos recuadros

donde se encuentren los objetos.

Delimitaciones
 La delimitación principal es el no contar con un servidor para pruebas, ya que

para desarrollar la interfaz se necesita poder hacer la conexión con el web service

que está alojada en la computadora de otro compañero y cuando él no se encuentra

es muy difícil poder trabajar.

También el tiempo para el desarrollo se considera como una limitante ya que

en un principio el jefe del departamento tenía contemplado un CRUD de usuarios.

Sin embargo, se tomó la decisión de que el usuario ya estaría creado en la base de

datos.

Por último, una delimitación no trascendente pero que si hubiera beneficiado al

equipo de desarrollo es el solo trabajar con las laptops y no contar con un monitor

externo ya que esto hubiera facilitado en gran medida el desarrollo de los

componentes.

Plataformas a utilizar

Para la programación de esta Sistema para etiquetar imágenes de

entrenamiento de redes neuronales se divide en dos partes Web service (Backend) e

Interfaz web (Frontend) a mí solo me corresponde desarrollar la parte del Frontend. Commented [5]: Mencionar cual estas desarrollando

Web service

Para el desarrollo del Web service se usaron las siguientes Tecnologías, Java

con el Framework Spring que permitió al equipo de desarrollo realizar esto de

manera rápida eficaz y corta, saltando tareas repetitivas y ahorrando líneas de

código y como base de datos se usó PostgreSql

Interfaz web
 Para el desarrollo de la interfaz se usaron las siguientes tecnologías Reactjs

que usa ECMAScript 6. Reactjs es una librería enfocada en la visualización usamos

esta tecnología porque nos ofrece grandes beneficios en performance y modularidad.

También se usaron módulos de nodejs para complementar el funcionamiento

de Reactjs, estos módulos se describirán enseguida

React Bootstrap para tener una interfaz responsiva y se adapte a distintos

tipos de pantallas.

React-Router-Dom este módulo sirve para poder manejar las rutas del

navegador y redirigir al componente deseado cuando se pone algún link en la barra

de navegación.

React-Dropzone este módulo sirvió como base para poder desarrollar el

componente de Drag and Drop.

React-js-pagination, este módulo se utilizó para implementar el paginado

donde se requiriera.

React-Konva este módulo sirvió para poder dibujar los objetos encontrados

sobre la imagen.

OBJETIVOS

Objetivo General

Desarrollar una aplicación web desarrollada con tecnología de JavaScript la

aplicación servirá para poder identificar objetos en una imagen, esto se logrará con el

uso de web services.

Objetivo Específico
Para poder Lograr este resultado es necesario plantear objetivos específicos a

cumplir que son los siguientes.

● Crear la interfaz de la aplicación para etiquetado de Imágenes.

● Integrar Web service para obtener la información almacenada en la base de

datos.

● Programar las pantallas de captura de imágenes que se procesaron por el

algoritmo de reconocimiento de patrones u objetos.

MÉTODO

En este apartado se explica el modelo que se utilizó para el desarrollo de la

aplicación durante el orden de las etapas implicada en el sistema como en el diseño

y su codificación de igual manera las técnicas y herramientas que se utilizaron en la

realización del proyecto.

La empresa Ksquare el modelo de desarrollo de software Scum en sus

proyectos ya que este modelo, está orientado para proyectos con entornos complejos

o donde se necesite obtener resultados de manera ágil, donde los requisitos son

cambiantes o poco definidos, donde la innovación, la competitividad, la flexibilidad y

la productividad son fundamentales.

En la empresa Ksquare se usa de la siguiente manera la metodología, todos

los días se tienen Standups por las mañanas en los distintos proyectos que se llevan

a cabo, estas reuniones duran aproximadamente 15 o minutos, es el equipo de

desarrollo menciona sus avances y todos los problemas que se presentaron en el

desarrollo, también se definen nuevos sprints.

 A continuación, se describe la implementación de la metodología de trabajo

Scrum para la gestión del desarrollo el proyecto Aplicación Web para

Reconocimiento de objetos Incluye seguimiento del avance, así como las

responsabilidades y compromisos de los participantes en el proyecto.

Personas involucradas en el desarrollo del proyecto Aplicación web para

reconocimiento de objetos se Muestra en la Tabla 1

Tabla 1

Personas y Roles del proyecto

Persona Contacto Rol

Alexis Puc Alexis.puc@ksquareinc.com Equipo de trabajo
Jaime Chavez Jaime.chavez@ksquareinc.com Equipo de trabajo
Rodrigo Novelo Rodrigo.novelo@ksquareinc.com Supervisor del proyecto

Este equipo de trabajo se conformó de esta manera ya que Rodrigo Novelo es

el encargado del frontend de los proyectos en la empresa Ksquare por lo tanto el dio

seguimiento a rodo el proyecto.

INTERVENCIÓN Y DESARROLLO
Antes de comenzar con la parte del proyecto considero de mucha importancia

mencionar que el proyecto se comenzó hasta el mes de junio, sin embargo, todo el

mes de mayo lleve una capacitación con las tecnologías a utilizar y una pequeña

platica con los altos mandos de Ksqure Labs México donde se nos explicó lo que la

empresa esperaba de nosotros, sobre las problemáticas que ya se nos habían

otorgado. Para empezar con la capacitación en las tecnologías se comenzó con

teoría sobre JavaScript para esto se leyó una serie de libros llamados “You Don’t
Know JS” tras la primera semana de teoría comencé a realizar pequeñas prácticas,

por ejemplo, una aplicación que pueda decir si dos palabras eran anagramas o no.

Después de los primeros 15 días de capacitación en JavaScript, Comenzamos

con la capacitación con Node js y las tecnologías o herramientas que se usan con

Node js por ejemplo NPM (node packages manager) que sirve para agregar nuevos

módulos a Nodejs. Sobre esta tecnología también se comenzó por la teoría, para

posteriormente pasar a la práctica, la primera problemática que se me dio fue la serie

de Fibonacci me topé con un problema común en JavaScript que hasta ese momento

desconocía el problema se tiene por nombre “Callback Hell” cuando surgió esta

problemática tuve que investigar y leer más sobre como Nodejs y cómo funcionaba

internamente y como resolver la problemática antes mencionada.

Antes de finalizar el primer mes de capacitación se realizó una pequeña

inducción a ReactJs con Michell un programador que lleva años manejando esta

tecnología, después de la pequeña charla sobre Reactjs se estuvo leyendo sobre la

tecnología y se nos otorgaron algunas problemáticas. Para ya por fin comenzar con

el proyecto de Aplicación para reconocimiento de objetos.

La duración de cada sprint es de 1 semana.

Sprint 1

4 de junio al 8 de junio

Se comenzó con el código base del proyecto con una herramienta que te

brinda Facebook en la documentación de Reactjs que se denomina créate-react-app.

Este es un comando que se debe ejecutar a través de la terminal también es

importante tener previamente instalado Nodejs, NPM (node package manager) o

Yarn.

En este primer sprint se crearon los componentes del login y los componentes

de la vista principal. (Véase Figura 3.0 y 4.0)

Figura 3.0. Login de Aplicación de reconocimiento de objetos. Fuente:(Elaboración

propia)

Figura 4.0. Vista principal de Aplicación de reconocimiento de imágenes.

Fuente:(Elaboración propia)
 Sprint 2

10 de junio al 15 de junio

En este segundo sprint se implementaron los diseños de un drag and drop

(arrastra y suelta) para poder subir las imágenes que el usuario desee al sistema.

También se creó el diseño de un modal que sirven para poder crear nuevos

álbumes. De igual manera se implementó la opción para el usuario pueda borrar

algún álbum. Todo este proceso se podía realizar. Sin embargo, los datos eran datos

estáticos ya que hubo un atraso con la producción de las API’S. (Véase figura 5.0)

Figura 5.0. Drag and Drop de Aplicación de reconocimiento de imágenes.

Fuente:(Elaboración propia)

Sprint 3

18 de junio al 22 de junio
 En este tercer sprint el equipo de desarrollo implemento el diseño de algunos

componentes que no estaban definidos en los primeros Sprint por ejemplo algunos

alertas o confirmaciones al momento de eliminar o agregar un álbum.

También se realizó el diseño de los componentes faltantes que son donde el

usuario puede escoger que tipo de algoritmo desea para procesar alguna imagen y

una pre-visualización de la imagen ya subida y la galería que es donde se muestra

todas las imágenes almacenadas dentro de una imagen.

Sprint 4

25 de junio al 29 de junio

En este cuarto sprint al tener ya un 70 % de las pantallas ya implementadas se

nos otorgaron los links de los APIS para poder aplicarle la programación necesaria a

cada componente y así el funcionamiento ya sea de manera real sin datos estáticos.

Comenzar el sprint se determinó en un Standup que necesitábamos optimizar

el código de la aplicación por lo tanto el equipo de trabajo busco alguna forma de

poder hacer que el sistema sea más óptimo en cuestión de rendimiento. Se

implementó una nueva librería de Reactjs que se denomina Context API. Para poder

heredar cierta información a todos los componentes que lo necesiten. Esto para

poder hacer un control de sesiones ya que al ser react una tecnología que solo

maneja la información del lado del cliente. Y para la autenticación se maneja una

librería llamada Json Web Token. Entonces se presentaba un problema al momento

de realizar una petición y el Backend recibe un token ya caducado.

 Cuando se solucionó este problema el equipo de desarrollo continuo con la

programación los componentes faltantes sin embargo a la fecha de entrega no se

pudo entregar todas las pantallas ya programadas. (Véase figura 6.0)

Figura 6.0. Parte de código Context API para verificar el token de autorización.

Aplicación de reconocimiento de imágenes. Fuente:(Elaboración propia)

Sprint 5

2 de julio al 6 de julio

En este quinto sprint el equipo de desarrollo termino por programar el

componente del drag and drop. Para poder subir las imágenes al servidor y así poder

ser procesadas por el algoritmo que el usuario desee. Es importante mencionar

también que estos algoritmos se limitan a 3 estos tres. Tienen la misma función. Lo

único que los hace diferentes. Son la velocidad y la efectividad.

 A mitad de semana se tuvo un standup con nuestro supervisor de proyecto

para determinar cómo se podría realizar el proceso de dibujar los objetos

encontrados en la imagen, el equipo de desarrollo dio también algunas opiniones

sobre esto. Al final el equipo decidió implementar el uso de canvas.

Al comenzar con el desarrollo de esto surgió un problema las etiquetas

normales de canvas no funcionaban de manera correcta con Reactjs. Por lo tanto, se

investigó como podríamos usar esta tecnología en Reactjs se encontró como más

factible el uso de una librería llamada react-konva, que maneja las etiquetas canvas,

pero ya enfocadas a la tecnología usada que es React.

Se implementó la programación para poder dibujar los objetos encontrados en

la imagen, y se replicó el funcionamiento en la parte de la galería. (Véase Figura 7.0)

Sprint 6

9 de julio al 13 de julio

En este Sexto Sprint se detectaron algunas fallas con respecto a la aplicación

por lo tanto se comenzó a realizar pruebas en busca de todos los errores posibles, se

encontró que en algunas pantallas los elementos HTML no se veían de manera

correcta, se implementó un método que hasta ese momento no se tenía que era el

Logout, se le dio un nuevo diseño para la Navba.

También nuestro supervisor nos hizo observaciones en cuanto algunos

métodos, específicamente donde se realizaban peticiones a la API y el servidor

tardaba en responder, para esto se implementaron pantallas de carga o loaders esto

con el fin de que el usuario final vea una interacción con el sistema.
 Sprint 7

16 de julio al 20 de julio

En este Séptimo Sprint se realizó la paginación para las imágenes y también

el filtrado de las imágenes por cada objeto encontrado dentro de algún álbum, con la

finalidad de que así el usuario pueda encontrar las imágenes que desee el usuario de

manera mas eficiente.