Visión global de proceso de desarrollo (visualización)

Durante el proceso de desarrollo del sistema Decide nos encontramos con dos tipos de cambios: en primer lugar hablamos de las nuevas funcionalidades aportadas al módulo de visualización y por otro lado surgirán incidencias provenientes de los módulos externos o propias del desarrollo interno en el equipo. Existen varias fases desde que se inicia el desarrollo de una nueva tarea de desarrollo hasta que se ve reflejada en el entorno de producción. Durante el proceso de desarrollo nos encontraremos distintas fases, desde las propiestas de cambios o incidencias al subsitema de visualización hasta su despliegue en producción, teniendo en cuenta que las siguientes fases han sido llevadas a cabo

1. Creación y asignación de la tarea en el proyecto del submodulo visualización.
2. Se crea una nueva rama proveniente de la rama 'visualización' con el formato: visualización-[nombre-del-miembro]. Si esta rama ha sido creada anteriormente, se puede saltar el paso 2.
3. Actualizar la nueva rama. Si esta rama acaba de ser creada, se puede saltar el paso 3.
4. Se realizan los cambios o se subsana la incidencia propuesta.
5. Se prueban los nuevos cambios en local.
6. Se realiza un 'pull request' a la rama de desarrollo 'visualización'.
7. Una vez que los cambios esten ya probado en la rama de desarrollo, se mergean con la rama 'visualizacion-deployment'. Esta rama será usada para desplegar el sistema en producción.

A continuación se propone un ejemplo para afianzar la explicación de las distintas fases:

Funcionalidad: Añadir la visualización de los resultados de las votaciones de tipo 'EQUALITY'

1. Creación y asignación de la tarea en el proyecto del submodulo visualización:

2. Se crea una nueva rama proveniente de la rama 'visualización' con el formato: visualización-[nombre-del-miembro]. Si esta rama ha sido creada anteriormente, se puede saltar el paso 2.

3. Actualizar la nueva rama. Si esta rama acaba de ser creada, se puede saltar el paso 3.

4. Se realizan los cambios o se subsana la incidencia propuesta: El siguiente script contiene todas las opciones para crear la gráfica de los resultados.

<script>
        var options = {
        series: {{results|safe}},
        chart: {
        height: 500,
        type: 'radialBar',
        },
        title: {
            text: 'Voting results',
            align: 'center',
            margin: 10,
            padding: 30,
            offsetX: 0,
            offsetY: 0,
            floating: true,
            style: {
            fontSize:  '32px',
            fontWeight:  'bold',
            fontFamily:  undefined,
            color:  '#263238'
            },
        },
        plotOptions: {
        radialBar: {
            offsetY: 0,
            startAngle: 0,
            endAngle: 270,
            hollow: {
            margin: 20,
            size: '25%',
            background: 'transparent',
            image: undefined,
            },
            dataLabels: {
            name: {
                show: false,
            },
            value: {
                fontSize: '25px',
                show: true,
                fontWeight:  'bold',
                offsetY: 0,
            }
            }
        }
        },
        labels: {{options|safe}},
        legend: {
        show: true,
        floating: true,
        fontSize: '18px',
        position: 'right',
        offsetX: 50,
        offsetY: 150,
        fontWeight:  'bold',
        labels: {
            useSeriesColors: true,
        },
        markers: {
            size: 0
        },
        formatter: function(seriesName, opts) {
            return seriesName
        },
        itemMargin: {
            vertical: 11
        }
        },
        responsive: [{
        breakpoint: 480,
        options: {
            legend: {
                show: false
            }
        }
        }]
        };

        var chart = new ApexCharts(document.querySelector("#resultsChart"), options);
        chart.render();
</script>

5. Se prueban los nuevos cambios en local:

6. Se realiza un 'pull request' a la rama de desarrollo 'visualización':

7. Una vez que los cambios esten ya probado en la rama de desarrollo, se mergean con la rama 'visualizacion-deployment'. Esta rama será usada para desplegar el sistema en producción:

---

Implementación

Para implementar nuevos cambios, el equipo decide-full-guadalentin-visualizacion usarán distintos IDEs, como por ejemplo PyCharm o Visual Studio Code, ambos incluyen Git, que será usado para la gestión de ramas y código, siempre respetando los criterios grupales de equipo.

Despliegue

Para probar los nuevos cambios se usarán distintas maquinas, dependiendo de cada miembro del grupo. En concreto son: VirtualBox con Ubuntu 20.04, y afitrión, Kali Linux 20.04 y Ubuntu 20.04. Para el despliegue en producción se usará como proveedor Heroku.