cecimerelo / vizyourdata

Proyecto para la asignatura de Infraestructura Virtual 20-21 de la UGR

VizYourData

Proyecto para la asignatura de Infraestructura Virtual. Curso 2020-2021

Problema

Muchos de los proyectos que realizo necesitan como mínimo un par de gráficas para la visualización de datos. El problema está en que siempre tengo que mirar la documentación de los mismos tipos de gráficas, así que la idea es crear un microservicio al que le introduzcas los datos que quieres visualizar y cómo quieres visualizarlos y sea capaz de sacarte el gráfico.

Documentación

1. Elección y justificación de las herramientas a usar.

2. Roadmap del proyecto

3. Justificación herramientas de construcción

4. Justificación de la imagen de Docker usada

5. Rúbricas de la entrega 3

6. Rúbricas de la entrega 4

7. Rúbricas de la entrega 5

8. Rúbricas de la entrega 6

Milestone 7

1. Descripción y justificación de las herramientas usadas para desplegar la aplicación en el PaaS.

2. Descripción correcta de la configuración para despliegue automático, desde el repositorio o desde el sistema de integración continua.

3. Funcionamiento correcto del despliegue en el PaaS (no sólo el status). Es decir, no se puede devolver ningún status 500.

4. Buenas prácticas en el diseño del API, incluyendo su correspondencia correcta con diferentes HUs.

5. Uso del logger

Las HUs de este milestone están en: https://github.com/cecimerelo/VizYourData/milestone/7?closed=1

vizyourdata's Issues

Las excepciones capturadas no deben tener nivel "info"

Sino un nivel ERROR

Tampoco parece que se use el middleware para loguear las correctas.

VizYourData/server/api/functions/processPlotInfo.js

Line 25 in 0a6db0d

logger.log('info', e)

Modificar fichero .yaml

El test de travis me ha fallado por no haber indicado las claves correctas en este fichero

Configuración NPM

Definición y gestión de configuraciones que permite la automatización y replicabilidad de la misma.

Reenvío Hito 4

Arregla Dockerfile

Elimina todos los ficheros que no sean de dependencias del DockerFile

Arreglar Docker file

Ahora con el Dockerfile que tengo el código se copia al contenedor. Entonces en alguna de las veces podría estar desactualizado.

Añadir Logger

Como desarrolladora quiero configurar un logger de manera que pueda centralizar los eventos de mi aplicación.

Tareas:

• Configurar papertrail para mi app

Añadir Middleware

Como desarrolladora quiero configurar un middleware de manera que pueda loggear cada vez que se hace una llamada a mi API.

Notas Funcionales:

• Buscar middleware para restify

Notas Técnicas:

• ...

Tareas:

• Dev

Crear GA para ejecutar los tests

Configurar el repo para que ejecute los tests cada vez que se suba algo.

[HU] Configurar Docker

Como desarrolladora quiero configurar Docker en mi proyecto de manera que pueda ejecutar los tests en el contenedor

CoS:

• Escenario: Configurar Dcoker
  • Dado: que estoy desarrollando el proyecto,
  • Cuando: cuando hago un Push nuevo al repositorio.,
  • Entonces: se crea un contenedor donde se ejecutan esos tests

Notas Funcionales:

• Documentar bien la elección de la imagen

Notas Técnicas:

• Crear el dockerfile

Tareas:

• Configurar dockerfile
• Completar Documentación

Configurar Workflow

Como desarrolladora quiero que se construya el contenedor sólo cuando haya cambios en los ficheros de tests de manera que no se ejecuten siempre.

CoS:

• Escenario: Construir contenedor
  • Dado: que estoy desarrollando código,
  • Cuando: cambio los ficheros de tests,
  • Entonces: quiero que se reconstruya mi contenedor

Notas Funcionales:

• ...

Notas Técnicas:

• ...

Tareas:

• Dev

[HU] Configurar GH-Pages

Narrativa [HU]

Como desarrolladora de la aplicación quiero acceder a las GH-Pages del proyecto para que la apariencia de cara al público del proyecto aumente.

Reenvío Hito 3

[HU] Crear una "Scatter Plot"

Como usuario quiero introducir mis datos en la app de manera que pueda imprimir la scatter plot que forman.

CoS:

• Escenario: Crear Scatter plot
  • Dado: que soy un usuario de la app
  • Cuando: introduzco mi dataset
  • Entonces: se imprime una scatter plot

Notas Funcionales:

• El fichero en el que venga el dataset puede variar, tenerlo en cuenta

Notas Técnicas:

• da igual el fichero, siempre convertir a data set. Por ahora sólo vamos a tener en cuenta .csv y .json

Tareas:

• Convertir todos los tipos de fichero a dataframe
• Imprimir una scatter plot a través de ellos

Ver tipos de gráficas

Como usuaria quiero ver qué opciones de gráfica tengo de manera que pueda elegir una de ellas

CoS:

• Escenario: Añadir gráfica
  • Dado: que soy una usuario de la app,
  • Cuando: le doy al botón de añadir,
  • Entonces: me aparecen las opciones de gráficas que puedo añadir
      Y puedo seleccionar una de las opciones

Notas Funcionales:

• ...

Notas Técnicas:

• ...

Tareas:

• Dev

Darme de alta en Vercel

Como desarrolladora quiero configurar Vercel en mi proyecto de manera que pueda usarlo.

CoS:

N/A

Notas Funcionales:

• ...

Notas Técnicas:

• ...

Tareas:

• Darse de alta en Vercel

You should test that it also returns Location correctly here

Because it's part of the spec

VizYourData/tests/integration/processPlotInfo.test.js

Lines 26 to 38 in 0a6db0d

	it('It should return a Scatter Plot Structure', async(done) => {
	chai
	.request(app)
	.post('/plotTypes/scatter')
	.send(PAYLOAD)
	.end((err, res) => {
	expect(res.body.x).to.be.an.instanceof(Array)
	expect(res.body.y).to.be.an.instanceof(Array)
	expect(res.body.mode).equals(MODE)
	expect(res.body.type).equals(TYPE)
	done()
	})
	})

Reenvío Hito 5

Did you check that using two body parsers is correct?

Like here:

VizYourData/server/api/postPlotInfoRoute.js

Lines 5 to 6 in 0a6db0d

	app.use(bodyParser.json())
	app.use(bodyParser.raw())

Añadir Scatter Plot al Dashboard

Como usuaria quiero añadir una nueva gráfica de manera que pueda verla en mi dashboard.

CoS:

• Escenario: Añadir gráfica

  • Dado: que soy una usuario de la app,
  • Cuando: le doy al botón de añadir,
  • Entonces: me aparecen las opciones de gráficas que puedo añadir
      Y puedo seleccionar una de las opciones

• Escenario: Insertar datos

  • Dado: que soy una usuario de la app,
  • Cuando: le doy al botón de añadir,
      Y selecciono una de los tipos de gráficas
  • Entonces: puedo introducir los datos.

• Escenario: Añadir al Dashboard

  • Dado: que soy una usuario de la app,
  • Cuando: le doy al botón de añadir,
      Y selecciono una de los tipos de gráficas
      Y he introducido los datos
  • Entonces: veo mi gráfica en el Dashboard
      Y puedo moverla donde quiera.

Notas Funcionales:

• ...

Notas Técnicas:

• ...

Tareas:

• Backend: nueva ruta post que recoja los datos de la gráfica
• Front: imprimir la gráfica

Añadir fichero .yaml

Narrativa

Como desarrolladora de la aplicación quiero añadir un fichero .yaml para tener el fichero de configuración para tests.

Obtener los tipos de gráficos

Como usuario quiero obtener los tipos de gráficas de manera que pueda escoger.

Notas Técnicas:

• Hasta ahora he obtenido los tipos de gráficas a través de una función de Firebase, pero realmente es bastante lento. Voy a añadir esta nueva ruta a mi servidor a ver si va más rápido.

Tareas:

• Añadir ruta

Add routes to ServerMiddleware option in nuxt

Como desarrolladora quiero poder hacer llamadas al servidor de manera que pueda obtener la información en el cliente.

Notas Funcionales:

• ...

Notas Técnicas:

• ...

Tareas:

• Dev

Completar Documentación Hito 2

Reenvío Hito 6

Vamos a hacer el reenvío del Hito 6, a tope!

[HU] Configurar "Hola Mundo"

Como desarroladora quiero configurar una página de inicio para mi app de manera que pueda probar el funcionamiento de Docker

CoS:

• Escenario: Ejecutar app
  • Dado: que soy un usuario de la app,
  • Cuando: ejecuto mi app,
  • Entonces: puedo ver la página de inicio en mi navegador

Notas Funcionales:

La página principal debería quedar tal que:

Notas Técnicas:

• N/A

Tareas:

• Configurar el Servidor
• Diseñar siguiendo la imagen

Añadir Deploy con Heroku

Como desarrolladora quiero que mi app se despliegue en Heroku de manera que pueda verla en producción

Notas Funcionales:

• Conectar con codeship para habilitar el despliegue automático

Notas Técnicas:

• ...

Tareas:

• Dev

Configurar Travis

Como desarrolladora quiero tener configurado Travis de manera que pueda realizar integración continua en mi proyecto

CoS:

• Escenario: Configurar Travis
  • Dado: Que soy una desarrolladora,
  • Cuando: hago cambios en mi aplicación,
  • Entonces: quiero que se ejecuten los tests sobre dicho cambios

Notas Funcionales:

• ...

Notas Técnicas:

• ...

Tareas:

• Darse de alta en Travis
• Configurar para ejecutar los tests desde Travis

Borrar Gráfica

Como usuaria quiero borrar una gráfica de manera que la deje de ver

CoS:

• Escenario: Borrar gráfica
  • Dado: que soy una usuaria de la app
  • Cuando: le doy al guión de una ventana
  • Entonces: elimino una gráfica

Notas Funcionales:

• ...

Notas Técnicas:

• ...

Tareas:

• Dev

Configurar Firebase

Como desarrolladora quiero configurar firebase en mi proyecto de manera que pueda acceder a sus funcionalidades.

CoS:

-N/A

Notas Funcionales:

• ...

Notas Técnicas:

• ...

Tareas:

• Configurar

Introducir Datos para la gráfica

Como usuaria quiero introducir datos de manera que pueda ver la gráfica

CoS:

• Escenario: Añadir gráfica

  • Dado: que soy una usuario de la app,
  • Cuando: le doy al botón de añadir,
  • Entonces: me aparecen las opciones de gráficas que puedo añadir
      Y puedo seleccionar una de las opciones

• Escenario: Insertar datos

  • Dado: que soy una usuario de la app,
  • Cuando: le doy al botón de añadir,
      Y selecciono una de los tipos de gráficas
  • Entonces: puedo introducir los datos.

Notas Funcionales:

• ...

Notas Técnicas:

• ...

Tareas:

• Dev

Añadir task runner

Añadir Grunt como task runner para automatizar las tareas de compilación

[HU] Añadir estructura general código

Narrativa [HU]

Como desarrolladora de la aplicación quiero añadir una primera clase con la estructura de una clase para hacerme una idea de cómo desarrollar el proyecto.

Añadir Configuración distribuida

Como desarrolladora quiero usar configuración distribuida de manera que pueda asegurarme que el puerto que uso es válido.

Notas Funcionales:

• ...

Notas Técnicas:

• ...

Tareas:

• Dev

Mergear GA

Antes: la subida a Docker y la ejecución de los tests se hace en diferentes github actions
Problema: queremos que primero se suba la imagen y luego se ejecuten los tests, al ponerlo todo en el mismo fichero nos aseguramos de que el orden es el correcto.

Añadir Scater Plot a mi Dashboard

Como usuario quiero darle al botón de add de manera que pueda añadir una scatter plot

CoS:

• Escenario: Añadir Scatter Plot al dashboard
  • Dado: que soy un usuario de la app,
  • Cuando: le doy al botón de añadir,
  • Entonces: me sale la opción de crear una Scatter Plot.

Notas Funcionales:

• Por ahora sólo saldrá la opción de la Scatter plot, más adelante se podrán añadir más.

Notas Técnicas:

• A lo mejor debería de haber una forma de almacenar las gráficas y luego recuperarlas en el frontend

Tareas:

• Cuando pulsas add que salgan las gráficas disponibles (Scatter Plot)
• Modelo de datos con las gráficas disponibles y los datos que necesitan.