Herramienta para aprender a programar con validacion automatica y representacion grafica de estructuras de datos

Vista previa del material en texto

UNIVERSIDAD NACIONAL DEL CENTRO DE LA PROVINCIA DE
BUENOS AIRES
FACULTAD DE CIENCIAS EXACTAS
TESIS DE GRADO - INGENIERÍA DE SISTEMAS
Herramienta para aprender a programar con validación
automática y representación gráfica de estructuras de datos
Alumnos: Carretero Santiago y Covelli Tomas.
Director: Dr. Javier Dottori
Co-Directora: Mg. María Carmen Leonardi
Índice
CAPÍTULO 1
Introducción 6
1.1. Introducción 6
1.2. Motivación 7
1.3. Propuesta del Trabajo Final 8
1.4. Metodología de Desarrollo 9
1.5. Estructura de la tesis 10
CAPÍTULO 2
Marco teórico - Estado del arte 12
2.1. Introducción 12
2.2. Testing 12
2.2.1. ¿Qué es? 12
2.2.2. Las dos metodologías clásicas de testing 14
2.2.3. Suite de Test 15
2.3. Estilos de aprendizaje en la programación 16
2.3.1. Activo 16
2.3.2. Reflexivo 16
2.3.3. Teórico 17
2.3.4. Pragmático 17
2.3.5. Lógico (matemático) 17
2.3.6. Social (interpersonal) 17
2.3.7. Solitario (intrapersonal) 17
2.3.8. Visual 18
2.3.9. Aural o auditivo 18
2.3.10. Verbal (lectura y escritura) 18
2.3.11. Kinestésico 18
2.3.12. Multimodal 18
2.4. Entornos de enseñanza de programación ó aplicaciones educativas de enseñanza de la
programación 19
2.4.1. Mumuki 19
2.4.2. Gobstones 19
2.4.3. Coderbyte 20
2.4.4. CodeWars 20
2.4.5. FreeCodeCamp 21
2.4.6. HackerEarth 21
2.4.7. Moodle UNICEN 22
2.5. Intérprete 22
2.5.1 Árbol de Sintaxis Abstracta 22
2.6. Marco Teórico Metodológico y Tecnológico 23
2.6.1. Vue 23
2.6.2. Firebase 25
Hosting 25
Autenticación 26
Realtime Database 26
2.7. Resumen 26
CAPÍTULO 3
Propuesta de la Herramienta VIDE 28
3.1. Características Herramienta 28
3.1.1 Lenguaje de Programación 30
3.2. Secciones Herramienta VIDE 30
3.2.1. Crear Ejercicio 30
3.2.2. Buscador 32
3.2.3. Consigna 32
3.2.4. Editor de Texto 33
3.2.5. Panel de Ejecución 34
3.2.6. Visualización de Estructuras 36
3.2.7. Banco de Test 37
3.2.8. Consola 38
3.2.9. Solución 39
3.2.10. Estadísticas 40
3.2.11. Descarga Código 41
3.3 Resumen 41
CAPÍTULO 4 43
Diseño, arquitectura e implementación 43
4.1. Introducción 43
4.2. Estructura del proyecto 43
4.2.1. Modelo de dos Capas 43
4.2.2. Base de Datos 45
4.2.3. Hosting y Deployment 46
4.3. Tecnologías utilizadas 46
4.3.1. Framework Desarrollo Frontend 47
4.4. Diseño de la aplicación 48
4.4.1 Diseño de la UI 49
4.5. Implementación 50
4.5.1 Comunicación Componentes Vue 50
4.5.2. Estilos Componentes Vue 53
4.5.3. Cuadrícula redimensionable 55
4.5.4. Editor y ejecución de código 56
4.5.5. Reconocimiento de variables y arreglos 57
4.5.6. Modos de ejecución 62
4.5.6.1. Ejecución clásica 63
4.5.6.2. Ejecución en modo lento 63
4.5.6.3. Ejecución en modo debug 64
4.5.6.4. Resaltado de código 65
4.5.7. Visualización de estructuras de datos 68
4.5.8. Suite de test 68
4.5.9. Estadísticas 69
CAPÍTULO 5 72
Pruebas en Usuarios 72
5.1. Introducción 72
5.2. Estadísticas 74
5.3. Encuesta 81
5.3.1. Encuesta Sección 1 81
5.3.2. Encuesta Sección 2 81
5.3.3. Encuesta Sección 3 82
5.4. Análisis Resultados 82
CAPÍTULO 6 87
Conclusiones y trabajos futuros 87
Anexo 89
Anexo 1: Ejercicios Pruebas de Usuarios 89
Eureka 89
Múltiplos 90
Par/Impar 90
Suma entre Números 91
Tablas de Multiplicación 93
Encontrar el Número Máximo 94
Cantidad y Distribución de Positivos 95
Promedio-Máximo-Mínimo 96
Calificaciones 98
Dados 100
Potencias 101
Múltiplos 102
Divisores 103
Sumar Dos Arreglos 105
Invertir Arreglo 106
Tipos de Números de Arreglo 107
Producto Escalar 108
Promedio escolar 110
Multiplicación 112
Jardín 115
Calcular Promedio 117
Anexo 2: Respuestas Encuesta Herramienta VIDE 118
¿Sabías que era la programación antes de comenzar el curso? 118
Indicar el grado de dificultad para cada uno de los módulos prácticos. [Estructuras de Control] 119
Indicar el grado de dificultad para cada uno de los módulos prácticos. [Arreglos] 119
Indicar el grado de dificultad para cada uno de los módulos prácticos. [Estructuras de Datos y
Métodos] 120
Indicar el grado de dificultad para cada uno de los módulos prácticos. [Ejercicios de Repaso] 120
Describe cuáles fueron las dificultades que se presentaron y cómo hiciste para suplirlas. 121
¿Cuán difícil fue encontrar los errores en los ejercicios ? 122
Comentanos tu experiencia para encontrar errores en base a el grado de dificultad indicado. 123
Selecciona los ejercicios que recordás haber consultado a un compañero/profesor y/o buscaste la
solución provista para terminar de resolverlos 124
¿Utilizaste la herramienta VIDE para la resolución de ejercicios? 125
¿Qué tan útil te resultó la visualización de estructuras? 125
Menciona brevemente en qué te ayudó/no te ayudo la visualización. 125
Que tan útil fue la validación de resultados a través de la suite de test? 126
Menciona brevemente en qué te ayudo/no te ayudo la suite de test. 126
Si utilizaste las pistas, que tan útiles fueron previas a la solución? 126
Comentanos que ejercicios pudiste resolver utilizando las pistas. 126
Miraste en algún ejercicio la solución propuesta antes de dar por terminada tu resolución? Describe
brevemente por qué lo hiciste. 127
¿Cuánto te ayudó la ejecución paso a paso para identificar errores en ejecución? 127
Menciona brevemente en qué te ayudó/no te ayudo la ejecución paso a paso. 127
Indicar cual de los modos de ejecución utilizaste más? 127
¿Cuál es el motivo de tu selección? 128
¿Cómo fue tu experiencia con la herramienta VIDE? 128
Dejanos tu comentario comparando VIDE y VSCode. 128
Al momento de resolver ejercicios, hiciste pruebas de tu código con diferentes escenarios (Pruebas
de escritorio)? Las fuiste documentando de alguna manera? 129
¿Seguiste tu código a mano para probarlo? 129
Referencias 130
CAPÍTULO 1
Introducción
1.1. Introducción
Con el incremento significativo de las inscripciones a carreras orientadas a la programación
(Sadosky, 2019), la incorporación de herramientas que permitan el seguimiento de programas desarrollados
por estudiantes se volvió una necesidad. Así, es realmente importante la forma en que se introduce a la
programación a los alumnos, donde si bien existen gran cantidad de métodos a la hora de enseñar
programación computacional, muchas de estas metodologías no logran conectarse efectivamente con los
alumnos, incluso con quienes tengan una experiencia previa en programación (Spigariol, 2015).
En general, aunque se han creado lenguajes de programación cada vez más cercanos al lenguaje
humano, la enseñanza de la programación no resulta ser una materia intuitiva, ni de fácil compresión y por
lo tanto, con frecuencia tiene altas tasas de deserción en estas carreras. Esto llevó a distintos
investigadores a analizar las causas de esta problemática desde distintos tipos de enfoques, donde se
puede remarcar que una gran cantidad de estudios muestran que los entornos de aprendizaje basados en el
contexto mejoran la participación de los estudiantes. Estos entornos son herramientas que permiten al
estudiante escribir código y observar de inmediato la ejecución, fomentando que los mismos lleguen a
aprender los conceptos abstractos de programación (Dávila, 2016).
Cabe destacar que la gran mayoría de las personas que eligen esta orientación a la hora de
estudiar carecen de un conocimiento básico de lógica y/o de programación. A pesar de que las Ciencias de
la Computación comenzó a incluirse en algunas escuelas secundarias como auxiliar a la matemática y a la
física en el año 1981 (Caraballo y Cicala, 2005), en ese momento predominó el enfoque técnico de la
enseñanza de la computación con énfasis en los componentes y comandos (Levis, 2007). Al día de la fecha,
la Ley de Educación Nacional dispone que las distintas jurisdicciones deben garantizar la revisión de la1
estructura curricular de la Educación Secundaria. Por lo tanto, el diseño curricular de cada provincia tiene
carácter singular adoptando diferentes paradigmas para la selección de contenidos y asignando dispares
posiciones a la computación en los planes de estudio, por lo cual no está ni totalmente ni homogéneamente
implementado en lasescuelas. Esto presenta dificultades en la puesta en práctica de abstracción de
problemas, la cual es sumamente importante para programar (López et al., 2017).
De esta forma, la incorporación de una herramienta que permita a los alumnos entender y razonar
conceptos relacionados a la programación a través de un seguimiento visual constante a nivel básico,
reduciría el tiempo que los profesores tienen que dedicar junto al alumno realizando un seguimiento de la
solución propuesta hasta encontrar la corrección; y permitiendo en consecuencia aumentar el tiempo en que
1 Ley Nacional. 26.206 - Ley de Educación Nacional. Disposiciones Generales, 2006.
el profesor puede dedicar a corregir soluciones que si bien funcionan, no están desarrolladas de la forma
adecuada o no aplican correctamente los conceptos que se quiere que el estudiante ponga en acción.
Además, los alumnos que pasen los primeros cursos, tendrán una base más robusta y autónoma lo cual
permitiría incorporar en un futuro ideas y conocimientos de manera más sencilla.
1.2. Motivación
Una motivación fundamental de mejorar la metodología del aprendizaje en programación, es el
constante y en aumento requerimiento de profesionales en TICS (Díaz et al. 2014), donde a nivel mundial y
ya desde hace varios años se puede observar que la demanda de profesionales en TICS no es satisfecha.
De esta forma se pueden mencionar innumerables artículos que validan estas afirmaciones.
“España busca programadores: hay 300.000 (pero faltan muchos más)” (Hernandez, 2017)
“Desarrolladores de software de aplicaciones, faltan personas con las habilidades y no hay
suficientes graduados nuevos en la profesión” (Stahl, 2018)
“Los profesionales de IT se ubican en el podio de los más buscados en el mercado laboral”
(Pernas, 2019)
La repercusión del conocimiento y desarrollo del “pensamiento computacional” como el proceso por
el cual un individuo, a través de habilidades propias de la computación y del pensamiento crítico, del
pensamiento lateral y otros más, logra hacerle frente a problemas de distinta índole (Wing, 2006), es posible
de evidenciar en diversas disciplinas. Por ejemplo en la biología, no solo se refleja en la exploración de
grandes secuencias de datos en búsqueda de patrones, sino también en la utilización de algoritmos y
estructuras de datos para representar la organización y comportamiento de diversos agentes biológicos
como las proteínas. Así, el “pensamiento computacional” puede verse como una capacidad fundamental que
todo individuo, además de estudiantes y graduados en ciencias de la computación, debería desarrollar.
(Rueda et al., 2014)
Durante una primera introducción a la programación, se atraviesan las siguientes etapas como
referencia (Cobo, 2018):
● Aprendizaje de conceptos y terminología básica: sistemas, sistemas de información, proceso de
desarrollo de sistemas, análisis de requerimientos, diseño, implementación, prueba, mantenimiento,
documentación, algoritmo, programa, proceso, datos.
● Reconocimiento de la estructura de un lenguaje de programación, identificando su sintaxis y
aprendiendo a desarrollar programas sencillos utilizando estructuras de control básicas de la
programación estructurada como secuencia, selección e iteración.
● Planificación de estrategias de resolución, donde se busca incorporar el hábito de leer y comprender
el problema en primer lugar, reconociendo el estado inicial y final del programa.
● Introducción a conceptos específicos de programación como: procedimientos, parámetros, pasaje
de parámetros, variables, alcance de variables, funciones, estructuras de datos, arreglos.
Comúnmente se va presentando la información teórica correspondiente, y por otro lado la práctica
se realiza mediante consignas específicas que reflejan distintos escenarios del tema teórico (Spigariol,
2015) usando lenguajes y/o herramientas para la resolución de dichas consignas prácticas. Con respecto a
las herramienta y las facilidades que deberían proveer, las mismas se enfrentan a las siguientes
problemáticas:
1. Dificultad para probar la validez de una solución: la ausencia de un banco de test puede llevar a
considerar como correcta una solución representada con un lote de datos muy particular que no
describe la variedad de situaciones a las que la solución debe dar respuesta adecuadamente (Aloi
et al., 2015).
2. Ausencia de una representación gráfica de las estructuras de datos: en general los entornos de
desarrollo profesionales no poseen una representación gráfica de las estructuras de datos que
están siendo utilizadas, dificultando así la visualización y seguimiento de las mismas por un usuario
principiante.
3. Carencia de una ejecución paso a paso del código desarrollado: a pesar de que los entornos de
desarrollo profesionales ofrecen ejecutar programas paso a paso mediante herramientas de
“debugging”, las mismas comprenden conceptos avanzados que no están orientados a
desarrolladores principiantes.
4. Ausencia de la disponibilidad de acceder, conocer y comparar con la solución óptima de la consigna
publicada dentro de la plataforma ya sea por otro usuario o autor de la consigna.
5. Disponibilidad de información estadística sobre el número de soluciones probadas, soluciones
aceptadas, errores de compilación, errores de ejecución y soluciones rechazadas por consigna.
1.3. Propuesta del Trabajo Final
En este trabajo final se desarrolla una herramienta llamada VIDE (Visual Integrated Development
Environment), la cual provee las funcionalidades necesarias para diseñar y resolver incisos prácticos de
programación básica, validando automáticamente cada solución propuesta sobre distintos casos de test
definidos por el autor del inciso y exhibiendo modelos concretos visuales de las estructuras de datos
utilizadas en las distintas soluciones propuestas. Además la misma cuenta también con una funcionalidad
que permite observar la solución desarrollada de las siguientes formas:
● Ejecución en modo lento: donde se ejecuta cada instrucción con un intervalo de tiempo,
posibilitando observar también las estructuras de datos que se van creando a medida que se
ejecuta el código, de una forma más pausada y didáctica.
● Ejecución en modo debugger o depurador: en el que el usuario de la herramienta cuenta con la
posibilidad de avanzar instrucción por instrucción con el objetivo de probar y depurar los errores
cometidos durante el desarrollo de la solución provista.
Esto último por lo tanto permite a los usuarios investigar los fallos en sus programas y encontrar no
solo el lugar, sino también el instante en el que surge cada error, permitiendo solucionarlos de forma rápida
y focalizada.
1.4. Metodología de Desarrollo
Con el objetivo de cumplir los plazos propuestos en la sección 4. “Cronograma de Actividades” del
Plan de Trabajo Final y establecer un ritmo de desarrollo, comenzamos con reuniones periódicas para la
etapa de investigación. Dichas reuniones con los directores de tesis, permitian reflexionar sobre la
exploración realizada, y determinar los objetivos a cumplir para la siguiente reunión. Una vez avanzada la
etapa investigación y con el objetivo del desarrollo de la herramienta definido, se estableció incorporar un
tablero kanban.
Kanban es una metodología de gestión de tareas, que se basa en los principios del movimiento
“Agile”. Podemos destacar cinco propiedades clave al momento de utilizar Kanban en un proceso de la
organización (Cornejo Velázquez, Hernández Gutiérrez, 2015):
● Limitar el trabajo en curso.
● Visualizar el flujo de trabajo.
● Medir y optimizar el flujo de trabajo.
● Hacer procesos con reglas explícitas.
● Gestionar el trabajo cuantitativamente.
De esta manera se creó un tablero de trabajo en la herramienta Trello , con tres columnas:2
● Tareas para hacer
● En proceso
● Completadas
2 https://trello.com/
Figura 1.1. Captura del tablero de trabajo en Trello.
Link tablero Proyecto-Final-Carretero-Covelli:
https://trello.com/b/TvOCnHif/proyecto-final-carretero-covelliComo se muestra en la figura 1.1, cada tarea creada se identifica dada una numeración (VIDE-XX),
un título a modo de resumen, una descripción del objetivo de la tarea y un responsable de dicha tarea. En
caso de que la tarea implique desarrollo en código, dicha numeración se utiliza para el nombre de la rama
en el repositorio de Github (Demo Proyecto Final Carretero Covelli ). Además durante el proceso y/o3 4
finalización de cada tarea, se añadían comentarios sobre el estado de avance y detalles de implementación
relevantes.
En un comienzo se crearon un conjunto inicial de tareas relacionadas a la estructuración inicial del
proyecto, una prueba de concepto en React y luego las tareas correspondientes a la implementación de las5
funcionalidades esenciales. Luego dichas tareas fueron creadas a demanda, según los objetivos
determinados en las reuniones periódicas mencionadas.
1.5. Estructura de la tesis
En la presente sección se describe de manera detallada la estructura en la que se presenta el
proyecto. Se resume brevemente la división de capítulos y se sintetiza el contenido de cada uno de ellos.
Como primer punto, el capítulo 2 presenta el estado del arte, es decir, todo lo relacionado al marco
teórico que resume los fundamentos teóricos utilizados en la tesis. Se describen cuestiones acordes a los
5 https://reactjs.org/
4 https://github.com/Proyecto-Final-Carretero-Covelli/demo-proyecto-final-carretero-covelli
3 https://github.com/
estilos de aprendizaje de la programación, entornos de desarrollo y enseñanza de la programación, testing,
intérprete de código y el marco de las tecnologías utilizadas.
Una vez presentados los conceptos teóricos más importantes se procede en el capítulo 3 a explicar
de una manera detallada el enfoque propuesto para cada característica de la herramienta desarrollada.
Luego, una vez establecido el enfoque, en el capítulo número 4 se describe la implementación del
proyecto mostrando el diseño y la arquitectura utilizada.
En el capítulo 5 se presenta la prueba en usuarios y sus resultados estadísticos, así como también
los resultados de la encuesta sobre dichos usuarios.
Por último, el capítulo 6 muestra las conclusiones establecidas y trabajos futuros a realizar.
CAPÍTULO 2
Marco teórico - Estado del arte
2.1. Introducción
El presente capítulo se basa principalmente en el estado del arte del proyecto, es decir, el estudio
del conocimiento acumulado sobre el marco teórico de las distintas áreas que se abordan en este informe.
En este capítulo se mencionan detalladamente los conceptos básicos utilizados en el trabajo de tesis.
Asimismo se presenta el marco metodológico y el tecnológico utilizado en el desarrollo del trabajo.
2.2. Testing
2.2.1. ¿Qué es?
El testing es una actividad desarrollada para evaluar la calidad del producto, y para mejorarlo al
identificar defectos y problemas. El testing de software consiste en la verificación dinámica del
comportamiento de un programa sobre un conjunto finito de casos de prueba, apropiadamente
seleccionados a partir del dominio de ejecución que usualmente es infinito, en relación con el
comportamiento esperado.
Las palabras resaltadas en el párrafo anterior corresponden a las características fundamentales del
testing. Es una técnica dinámica en el sentido de que el programa se verifica poniéndolo en ejecución de la
forma más parecida posible a cómo se ejecutará cuando esté en producción (esto se contrapone a las
técnicas estáticas las cuales se basan en analizar el código fuente). El programa se prueba ejecutando solo
unos pocos casos de prueba dado que por lo general es física, económica o técnicamente imposible
ejecutarlo para todos los valores de entrada posibles. Si uno de los casos de prueba detecta un error el
programa es incorrecto, pero si ninguno de los casos de prueba seleccionados encuentra un error no
podemos decir que el programa es correcto (perfecto). De aquí surge la frase de Dijkstra (Dijkstra, E. W.,
1972):
“Program testing can be a very effective way to show the presence of bugs, but it is hopelessly
inadequate for showing their absence.”
Los casos de prueba mencionados previamente son elegidos siguiendo alguna regla o criterio de
selección. Se determina si un caso de prueba ha detectado un error o no comparando la salida producida
con la salida esperada para la entrada correspondiente (la salida esperada debería estar documentada en la
especificación del programa).
El testing se estructura en casos de prueba o casos de test; los casos de prueba se reúnen en
conjuntos de prueba. Desde el punto de vista del testing se ve a un programa (o subrutina) como una
función que va del producto cartesiano de sus entradas en el producto cartesiano de sus salidas. Es decir:
𝑃 : 𝐼𝐷 → 𝑂𝐷
donde ID se llama dominio de entrada del programa y OD es el dominio de salida. Normalmente los
dominios de entrada y salida son conjuntos de tuplas tipadas cuyos campos identifican a cada una de las
variables de entrada o salida del programa, es decir:
𝐼𝐷 ≡ [𝑥
1
: 𝑋
1
, ... , 𝑥
𝑛
: 𝑋
𝑛
]
𝑂𝐷 ≡ [𝑦
1
: 𝑌
1
, ... , 𝑦
𝑛
: 𝑌
𝑛
]
De esta forma, un caso de prueba es un elemento x del dominio de entrada (es decir ) y𝑥 ϵ 𝐼𝐷
testear P con x es simplemente calcular P(x). En el mismo sentido, un conjunto de prueba, por ejemplo T, es
un conjunto de casos de prueba definido por extensión y testear P con T es calcular P(x) para cada . Es𝑥 ϵ 𝑇
muy importante notar que x es un valor constante, no una variable. Es decir, si por ejemplo 𝐼𝐷 ≡ [𝑛𝑢𝑚 : ℵ]
entonces un caso de prueba es 5, otro puede ser 1000, etc, pero no .𝑛 > 24
También es importante remarcar que son las entradas con que se programó el programa𝑥
1
, ... , 𝑥
𝑛
(esto incluye archivos, parámetros recibidos, datos leídos desde el entorno, etc) y no entradas abstractas o
generales que no están representadas explícitamente en el código. De la misma forma, son las𝑦
1
, ... , 𝑦
𝑛
salidas explícitas o implícitas del programa (esto incluye salidas por cualquier dispositivo, parámetro o valor
de retorno, e incluso errores).
De acuerdo a la definición clásica de corrección, un programa es correcto si verifica su
especificación. Entonces, al considerarse como técnica de verificación el testing, un programa es correcto si
ninguno de los casos de prueba seleccionados detecta un error. Precisamente, la presencia de un error o
defecto se demuestra cuando P(x) no satisface la especificación para algún x en ID. Una falla es el síntoma
manifiesto de la presencia de un error. Es decir que un error permanecerá oculto hasta que ocurra una falla
causada por aquel. Por ejemplo, si la condición de una sentencia if es cuando debería haber sido𝑥 > 0
, entonces hay un error en el programa, que se manifestará (falla) cuando se testee el programa con𝑥 > 1
x igual a 1 (si por fortuna este caso de prueba es seleccionado) porque en tal caso aparecerá cierto mensaje
en la pantalla que para ese valor de x no debería haber aparecido.
En este sentido el testing trata de incrementar la probabilidad de que los errores en un programa
causen fallas, al seleccionar casos de prueba apropiados. Finalmente, una falta es un estado intermedio
incorrecto al cual se llega durante la ejecución de un programa (por ejemplo se invoca a una subrutina
cuando se debería haber invocado a otra, o se asigna un valor a una variable cuando se debería haber
asignado otro).
2.2.2. Las dos metodologías clásicas de testing
Tradicionalmente el testing de software se ha dividido en dos estrategias básicas que se supone son
de aplicación universal.
● Testing estructural o de caja blanca: el testeo de un software siguiendo esta estrategia implica que
se tiene en cuenta la estructura del código fuente del programa para seleccionar casos de prueba
(es decir, como se observa en la figura 2.1 el testing está guiado fundamentalmente por la
existencia de sentencias tipo if, case, while, etc). En muchas ocasionesse pone tanto énfasis en la
estructura del código que se ignora la especificación del programa, convirtiendo al testing en una
tarea un tanto desprolija e inconsistente. Como los casos de prueba se calculan de acuerdo a la
estructura del código, no es posible generarlos sino hasta que el programa ha sido terminado. Peor
aún, si debido a errores o cambios en las estructuras de datos o algoritmos (aun sin que haya
cambiado la especificación), puede ser necesario volver a calcular todos los casos. Por estas
razones es preferible la otra estrategia de testing detallada más abajo. Sin embargo es interesante
remarcar la racionalidad detrás de esta estrategia: no se puede encontrar un error si no se ejecuta
la línea de código donde se encuentra ese error. Por consiguiente es importante seleccionar casos
de prueba que ejecuten al menos una vez todas las líneas del programa, lo cual se logra analizando
la estructura del código. Se dice que el testing estructural prueba lo que el programa hace y no lo
que se supone que debe hacer.
Figura 2.1. Testing estructural o de caja blanca.
● Testing basado en modelos o de caja negra: el testeo de una pieza de software como una caja
negra significa ejecutar el software sin considerar ningún detalle sobre cómo fue implementado.
Esta estrategia se basa en seleccionar los casos de prueba analizando la especificación o modelo
del programa, en lugar de su implementación. Algunos autores consideran que el testing basado en
modelos (MBT) es la automatización del testing de caja negra. Para lograr esta automatización el
MBT requiere que los modelos sean formales dado que esta es la única forma que permite realizar
múltiples análisis mecánicos sobre el texto de los modelos. Por el contrario, el testing de caja negra
tradicional calcula los casos de prueba partiendo del documento de requerimientos. Como en el
MBT los casos de prueba se calculan partiendo del modelo, es posible comenzar a “testear” casi
desde el comienzo del proyecto, en distintos tipos de pruebas destacados en la figura 2.2. Por otra
parte, pero por la misma razón, los casos de prueba calculados con técnicas de MBT son mucho
más resistentes a los cambios en la implementación que aquellos calculados con técnicas de testing
estructural. Se dice que el testing basado en modelos prueba lo que el programa se supone que
debe hacer, y no lo que el programa hace.
Figura 2.2. Pruebas Funcionales.
Es muy importante remarcar que estas estrategias no son opuestas sino complementarias. El
testing debería estar guiado fundamentalmente por técnicas de MBT pero complementadas con
herramientas de análisis de cubrimiento de sentencias de forma tal que los casos generados mediante MBT
cubran al menos todas las líneas de código.
2.2.3. Suite de Test
Los distintos escenarios a los que se somete una determinada solución conforman diferentes suite
de tests, las cuales pueden describirse como contenedores que poseen una serie de casos de test y tienen
como objetivo principal testear un programa de software para mostrar que existen determinados
comportamientos específicos del mismo.
Un caso de test es simplemente la especificación de las entradas, las condiciones de ejecución y las
salidas esperadas para lograr un objetivo particular a la hora de validar cualquier solución.
Ocasionalmente las suite de test son usadas para agrupar casos de test del mismo tipo, aunque
esto último no es obligatorio. Es decir que por lo general existen suite de test que contienen casos de test
estructurales, y por otro lado, otras que almacenan tests basados en modelos. De todas maneras, es
solamente una forma de organizar el testing.
2.3. Estilos de aprendizaje en la programación
En la programación especialmente, y por sobre todas las cosas al momento de aprenderla, saber si
lo que el programador hace es correcto conlleva una gran dificultad, ya que comúnmente lo único que se
observa de la solución es justamente el código desarrollado. Como quien está aprendiendo no cuenta con
una determinada experiencia, y todo lo que hace es completamente nuevo, ver únicamente las sentencias
del software solución se torna complicado para muchas personas, por lo que sería útil contar con
herramientas que logran mostrar las soluciones de los usuarios exhibiendo modelos concretos visuales de
las estructuras de datos utilizadas en las mismas.
Todo esto está fuertemente relacionado con los estilos de aprendizaje. Los estilos de aprendizaje
son las distintas formas en la que los estudiantes responden a los estímulos del entorno a la hora de
aprender. En otras palabras, son las condiciones educativas bajo las cuales una persona incorpora
información.
Como se sabe existen diferentes formas de aprender. Hay personas a las que les resulta más fácil
hacerlo observando, porque los colores o las fotografías simplifican muchos aspectos al momento de
incorporar nuevos conocimientos, mientras otros aprenden mejor leyendo, o incluso otros prefieren escuchar
audios o videos. Lo cierto es que no hay una forma de aprendizaje única, sino que cada individuo suele
sentirse más cómodo con un estilo de aprendizaje u otro. Para Alonso, Gallego y Honey (Alonso, Gallego &
Honey, 1995), autores del libro ‘Los estilos de aprendizaje procedimientos de aprendizaje y mejora’:
“Es necesario saber saber más sobre los estilos de aprendizaje y cuál de éstos define nuestra forma
predilecta de aprender. Esto es esencial, tanto para los aprendices como para los maestros”.
Los autores afirman que existen 4 estilos de aprendizaje: activos, reflexivos, teóricos y pragmáticos.
Pero esta clasificación, no es la única que existe, y nuevas investigaciones descubrieron que los estilos no
son cuatro, sino doce. Los mismos se describen a continuación.
2.3.1. Activo
Los estudiantes que prefieren el estilo de aprendizaje activo disfrutan de nuevas experiencias, no
son escépticos y poseen una mente abierta. No les importa aprender una tarea nueva, ya que no evitan los
retos a pesar de que eso pueda comprometer la idea que tienen de sí mismos y de sus capacidades.
2.3.2. Reflexivo
Los individuos con preferencia por el estilo de aprendizaje reflexivo observan las experiencias desde
distintos ángulos. También analizan datos, pero no sin antes haber reflexionado con determinación. Son
prudentes y no se apresuran a la hora de extraer conclusiones de sus vivencias, por lo cual pueden llegar a
parecer dubitativos.
2.3.3. Teórico
Suelen tener una personalidad perfeccionista. También son analíticos, pero les gusta sintetizar y
buscan integrar los hechos en teorías coherentes, sin dejar cabos sueltos y preguntas sin respuesta. Son
racionales y procuran permanecer objetivos ante todo.
2.3.4. Pragmático
Son más bien prácticos y necesitan comprobar sus ideas. Son realistas a la hora de tomar
decisiones y resolver una cuestión, y orientan su aprendizaje hacia la necesidad de dar respuestas a
problemas concretos. Para ellos, si es útil es válido.
2.3.5. Lógico (matemático)
Los individuos con el estilo de aprendizaje lógico prefieren emplear la lógica y el razonamiento en
lugar de contextualizar. Utilizan esquemas en los que se muestran las cosas relevantes. Asocian palabras
aún sin encontrarles sentido.
2.3.6. Social (interpersonal)
Este estilo de aprendizaje, también llamado grupal, es característico de aquellas personas que
prefieren trabajar con los demás siempre que pueden. Estos individuos tratan de compartir sus conclusiones
con otros, y ponen en práctica sus conclusiones en entornos grupales. El “juego de roles” es una técnica
ideal para ellos.
2.3.7. Solitario (intrapersonal)
Este estilo de aprendizaje, también llamado individual, es característico de aquellos que prefieren la
soledad y la tranquilidad para estudiar. Son personas reflexivas y suelen centrarse en temas que sean de su
interés. Dan mucho valor a la introspección y a los "experimentos mentales", aunque también pueden
experimentar con la materia.
2.3.8. VisualEstos estudiantes no son buenos leyendo textos pero, en cambio, asimilan muy bien las imágenes,
diagramas, gráficos y vídeos. Suele ser práctico para ellos el empleo de símbolos o crear una taquigrafía
visual al tomar apuntes, ya que de ese modo memorizan mejor.
2.3.9. Aural o auditivo
Estos estudiantes aprenden mejor cuando escuchan. Por ejemplo, en las discusiones, debates o
simplemente con las explicaciones del profesor. Mientras otros estudiantes pueden aprender más al llegar a
casa y abrir el manual de clase, éstos aprenden mucho en el aula, escuchando a los maestros.
2.3.10. Verbal (lectura y escritura)
También conocido como aprendizaje lingüístico, los estudiantes con este estilo de aprendizaje
estudian mejor leyendo o escribiendo. Para ellos, es mejor leer los apuntes o simplemente elaborarlos. El
proceso de elaboración de estos apuntes es una buena herramienta para su aprendizaje.
2.3.11. Kinestésico
Estas personas aprenden mejor con la práctica, es decir, haciendo más que leyendo u observando.
Es en esta práctica donde llevan a cabo el análisis y la reflexión. Los maestros que quieran sacar el mayor
rendimiento de estos estudiantes, deben involucrarse en la aplicación práctica de los conceptos que
pretenden enseñar.
2.3.12. Multimodal
Algunos individuos combinan varios de los estilos anteriores, por lo que no tienen una preferencia
determinada. Su estilo de aprendizaje es flexible y le resulta cómodo aprender con varios estilos de
aprendizaje.
2.4. Entornos de enseñanza de programación ó aplicaciones
educativas de enseñanza de la programación
Como se mencionó en el capítulo anterior , existe un abanico de aplicaciones educativas que
encaran la misma problemática de este trabajo final, pero con una visión diferente. Entre ellas encontramos
a:
● Mumuki
● Gobstones
● Coderbyte
● CodeWars
● FreeCodeCamp
● HackerEarth
● Moodle UNICEN
A continuación se pasará a describir con más detalle cada una de estas plataformas, junto a sus
características más importantes.
2.4.1. Mumuki6
Esta herramienta nació con el objetivo de promover la educación de la programación y el
pensamiento computacional de manera inclusiva, entretenida y durable, utilizando software y contenido
libre.
La idea principal de Mumuki es contribuir en la democratización de la educación en informática y
masificar el pensamiento computacional, para lograr una verdadera inclusión digital.
Entre sus principales características podemos encontrar:
● Presenta una secuencia didáctica coherente para guiar el proceso de aprendizaje.
● Fomenta la práctica desde el minuto cero, integrada siempre con la teoría.
● Enseña conceptos fundamentales y durables, orientados a la formación del pensamiento crítico.
● Cuenta con un contenido y una plataforma libre.
● Contiene estadísticas detalladas de los usuarios que utilizan la plataforma.
2.4.2. Gobstones7
La misma cuenta con dos formas diferentes de enseñar a programar:
7https://gobstones.github.io/gobstones-web/#/code
6https://mumuki.io
● Con bloques: es posible a través de Gobstones JR, y permite que la tarea de escribir código sea tan
simple como crear y mover bloques de un lugar hacia otro.
● Con texto: la programación con texto es proveída a través de Gobstones SR, permitiendo a los
estudiantes aprender conceptos más avanzados de codificación utilizando un lenguaje formal.
Gobstones también cuenta con una herramienta para los docentes llamada Gobstones Teacher, que
faculta a los docentes crear guías de ejercicios y distribuirlos fácilmente.
Esta aplicación web es de software libre y también tiene versiones de escritorio que pueden
descargarse desde la página oficial de Gobstones.
2.4.3. Coderbyte8
Diseñada para mejorar el nivel de programación y la preparación técnica a la hora de realizar una
entrevista. Esta herramienta se divide principalmente en tres secciones:
● Desafíos de programación: se presentan desafíos y también videos con la solución al problema,
soluciones de otros usuarios e incluso una sección para discutir en caso que se generen dudas.
● Cursos de programación: para aprender distintos algoritmos o nuevas tecnologías.
● Preparación para entrevistas: en esta sección se abordan temas para ayudar a preparar a cualquier
persona a una futura entrevista de software. En este caso se incluyen estructuras de datos,
algoritmos, diseño de software, programación dinámica y más.
2.4.4. CodeWars9
Esta plataforma fue creada con el objetivo de mejorar el conocimiento del desarrollador sobre
diferentes lenguajes de programación o incluso expandir el mismo animando a aprender una nueva
tecnología.
El método de CodeWars para lograr su fin es someter al usuario a distintos desafíos, y competir en
los mismos con otros desarrolladores en tiempo real.
CodeWars brinda la posibilidad de aprender o mejorar en entre otros, los siguientes lenguajes de
programación:
● C
● C++
● C#
● Go
● Groovy
● Java
● Javascript
9https://www.codewars.com/
8https://www.coderbyte.com/challenges
● Kotlin
● PHP
● Python
● Ruby
● Rust
● Shell
● SQL
● Swift
● Typescript
2.4.5. FreeCodeCamp10
Esta herramienta busca capacitar a los desarrolladores para que puedan conocer los conceptos
básicos a la hora de buscar un nuevo trabajo en el ámbito del software. De esta forma, cuenta con
numerosos ejercicios de práctica sobre los siguientes temas:
● Diseño de software
● Algoritmos
● Estructuras de datos
● Testing
● Aprendizaje de máquinas
● Seguridad
2.4.6. HackerEarth11
HackerEarth es una aplicación web que permite no sólo adentrarse en la práctica de la
programación, sino también prepararse para entrevistas y mejorar las capacidades de codificación con una
amplia comunidad de desarrolladores.
Entre otros temas, cuenta con ejercicios de:
● Programación básica
● Estructuras de datos
● Algoritmos
● Matemática
● Aprendizaje de máquina
11http://www.hackerearth.com/practice/
10https://www.freecodecamp.org/learn/coding-interview-prep/algorithms
2.4.7. Moodle UNICEN12
Moodle es la plataforma más popular del mundo a la hora de buscar un sistema de gestión de
aprendizaje. La misma permite crear tu propio sitio online de forma simple y rápida .
Esta plataforma se utiliza en las materias de primer año de la carrera, para la enseñanza de
programación. Para ello utiliza un plugin llamado Virtual Programming Lab (VPL) que permite a los13
alumnos la realización, compilación y ejecución de sus programas directamente sobre la web. Si bien
Moodle posee la posibilidad de utilizar la funcionalidad de bancos de test, al día de la fecha la misma no
está siendo usada.
2.5. Intérprete
Un intérprete es un programa que procesa el código fuente de determinado software durante su
tiempo de ejecución, es decir, mientras el software se está ejecutando, y actúa como una interfaz entre ese
proyecto y el procesador. Un intérprete siempre procesa el código línea por línea, de modo que lee, analiza
y prepara cada secuencia de forma consecutiva para el procesador. Este principio también se aplica a las
secuencias recurrentes, que se ejecutan de nuevo cada vez que vuelven a aparecer en el código.
Para procesar el código fuente del software, el intérprete recurre a sus propias bibliotecas internas:
en cuanto una línea de código fuente se ha traducido a los correspondientes comandos legibles por
máquina, esta se envía directamente al procesador.
El proceso de conversión no finaliza hasta que se ha interpretado todo el código. Solo se interrumpe
prematuramente si se produce un fallo durante el procesamiento, lo que simplifica mucho la resolución de
los errores, ya que la línea de código problemática se detecta inmediatamente después de ocurrir el fallo.
Los intérpretes se diferencian de los compiladores en que mientras estos traducen un programa desde su
descripción en un lenguaje de programación al código de máquina del sistema, los primeros (los intérpretes)
sólo realizan la traducción a medida que sea necesaria, típicamente, instrucciónpor instrucción, y
normalmente no guardan el resultado de dicha traducción.
2.5.1 Árbol de Sintaxis Abstracta
El árbol de sintaxis abstracta (AST) es un árbol estructurado formato del script de origen que
contiene diferentes nodos, que representan diferentes construcciones del lenguaje y las referencias a las
entradas de la tabla de símbolos. El proceso de la creación de AST implica interacciones con el Símbolo
Administrador de tablas para crear tablas de símbolos y actualizar información en él.
El intérprete de secuencias de comandos utiliza AST y la tabla de símbolos para realizar la
evaluación. AST forma un resultado final del analizador después de la evaluación de la gramática normas
(Patra, Pattanayak, & Puthal. 2013).
13 https://moodle.org/plugins/mod_vpl
12https://moodle.exa.unicen.edu.ar/
2.6. Marco Teórico Metodológico y Tecnológico
2.6.1. Vue
Vue.js : es un framework de javascript para construir interfaces de usuario. A diferencia de otros14
frameworks monolíticos, Vue está diseñado desde cero para ser adoptable gradualmente. La biblioteca
principal se centra solo en la capa de vista y es fácil de recoger e integrar con otras bibliotecas o proyectos
existentes.
Componente: son piezas reutilizables de la aplicación con sus propios datos y vistas. Cada
componente posee su propio ámbito para estilos y métodos, estando completamente aislado de otros
componentes.
MVVM: Model-View-ViewModel es un patrón, en el cual el modelo (Model) se vincula con la vista
(View) a través del denominado “ViewModel”. El modelo contiene datos y cierta lógica de negocios, mientras
que la vista es responsable de su representación (DOM). Como se puede observar en la figura 2.3, la
instancia de Vue cumple el rol de “ViewModel” maneja en el enlace de datos, asegurándose que sí los datos
del modelo cambian, la vista se vea inmediatamente afectada, y viceversa.
Figura 2.3. Representación del enlace entre la vista y el modelo a través de la instancia de Vue.
Data Binding: es el mecanismo de propagación de cambios desde los datos hacia la vista y
viceversa.
Componentes dentro de componentes: Bajo el concepto de reutilización de los componentes, se
pueden definir componentes dentro de componentes, generando así una jerarquía de componentes padres
e hijos.
La comunicación desde componentes padres hacia componentes hijos se realiza mediante “props”.
Dichas “props” forman un enlace unidireccional hacia abajo, por lo tanto si los datos del componente “padre”
cambian, fluyen hacia los componentes “hijos”, pero no en sentido contrario. De esta manera se evita que
los componentes “hijos” modifiquen accidentalmente los datos del “padre”, lo cual podría dificultar la
comprensión del flujo de datos de la aplicación (Props - Vue.Js, 2021).
Para la comunicación desde un componente “hijo” hacia su correspondiente “padre”, es necesario
implementar “Custom Events”, los cuales requieren definir en la instancia del componente hijo
14 https://vuejs.org/v2/guide/
explícitamente que se está escuchando dicho nombre del evento y que acción se va a tomar. Luego en el
componente hijo se debe realizar una “emisión” correspondiente para que el componente padre la escuche
y reciba la información indicada (Custom Events - Vue.Js, 2021).
Estado de la aplicación: es el estado global centralizado de la aplicación. Los datos del estado son
inicializados cuando la aplicación se inicia. Estos datos pueden ser accedidos desde cualquier componente
que integra la aplicación, sin embargo no puede ser fácilmente modificada, sino que cada elemento del
estado de la aplicación, tiene una correspondiente mutación que puede ser despachada dado distintos
eventos que ocurren en los componentes.
La utilización de un estado global centralizado, permite simplificar la comunicación entre
componentes que se encuentran distantes en la jerarquía de la aplicación. Evitando la incorporación de
“props” y “Custom Events” en niveles intermedios de la jerarquía, donde los datos que fluyen pueden dar a
confusión o no ser relevantes, conduce una implementación del flujo de datos fácil de comprender,
mantener y modificar.
Vuex: es una arquitectura para aplicaciones Vue, inspirada en la arquitectura Flux y Redux, la cual
permite una administración simplificada del estado de la aplicación (Filipova, 2016).
Figura 2.4. Flujo de datos entre componentes y el estado de la aplicación mediante Vuex.
La “store” de Vuex, está compuesta por: estado y mutaciones. El estado es un objeto que
representa el estado inicial de los datos de la aplicación. Las mutaciones también son objetos que contienen
funciones de acción que modifican el estado. La “store” de Vuex, no es más que un archivo javascript que
exporta dichos objetos y le indica a Vue que utilice Vuex. De está manera luego la “store” puede ser utilizada
en cualquier componente.
Es importante destacar, que la “store” de Vuex es reactiva, es decir que los componentes obtienen
un estado de la misma, y actualizarán sus vistas cuando dicho estado cambie. Los componentes no son
capaces de modificar directamente el estado de la “store”, en su lugar, estos despachan mutaciones
declaradas en la “store”, permitiendo un seguimiento simple de los cambios. De está manera, como se
muestra en la figura 2.4, la “store” de Vuex se convierte en una “única fuente de la verdad”.
2.6.2. Firebase15
Firebase es un conjunto de herramientas desarrolladas por Google, construidas a partir de tres
pilares: Desarrollar, Crecer y Ganar. Dichas herramientas son:
● Cloud Firestore
● Kit de AA
● Cloud Functions
● Autenticación
● Hosting
● Cloud Storage
● Realtime Database
● Crashlytics
● Performance Monitoring
● Test Lab
● Analytics
● Predictions
● Firebase A/B Testing
● Cloud Messaging
● Remote Config
● Dynamic Links
● Indexación de Aplicaciones
● Invites
Cada una de estas herramientas es independiente, y no es necesario utilizar todas juntas en
nuestra aplicación o sitio web, sino que uno puede elegir cuales de ellas desea emplear. Muchas de ellas
están disponibles sin costo alguno, o en caso contrario existe un nivel gratuito enfocado a realizar pruebas y
con límites razonables para aplicaciones pequeñas (Moroney et al., 2017 ).
A continuación describiremos el conjunto de herramientas utilizadas en el desarrollo de la
aplicación:
Hosting
Firebase Hosting es un servicio de hosting de contenido web con nivel de producción orientado a
desarrolladores. Entre su funciones principales podemos destacar:
● Permite entregar contenido mediante una conexión segura, ya que Firebase Hosting incluye SSL sin
necesidad de configuración.
15 https://firebase.google.com/
● Permite alojar contenido dinámico y estático, además de microservicios. Firebase Hosting admite
todo tipo de contenido para hosting, desde los archivos CSS y HTML hasta las API o los
microservicios de Express.js.
● Permite publicar contenido con rapidez, donde cada archivo subido se almacena en caché en discos
SSD ubicados en los perímetro de la CDN en todo el mundo y se entrega en formato gzip o Brotli
(Firebase Hosting, 2021).
Autenticación
La Autenticación de Firebase proporciona servicios de backend, SDK fáciles de usar y bibliotecas
de IU ya elaboradas para autenticar usuarios, ya sea mediante contraseñas, números de teléfono y
proveedores de identidad federada populares como Google, Facebook, Twitter y muchos más (Firebase
Authentication, 2021).
Realtime Database
Firebase Realtime Database es una base de datos alojada en la nube. Los datos se almacenan en
formato JSON y se sincronizan en tiempo real con cada cliente conectado. Todos los clientes comparten una
instancia de Realtime Database y reciben actualizaciones automáticamente con los datos más recientes
(Firebase Realtime Database, 2021).
2.7. Resumen
A modo de repaso, se puede destacar que existen diferentes metodologías a la hora de aprender,
incluso también en el ámbito de la programación. No todas las personas adquieren conocimientosde la
misma forma, y es por ello que es muy valioso que exista la posibilidad de aprender a programar a través de
distintos estilos de aprendizaje, y no únicamente escribiendo código, ejecutando el mismo y confirmando si
la salida es la correcta o no.
De esta forma, existen diferentes funcionalidades que facilitan el aprendizaje de distintos modos.
Entre otras se pueden mencionar los depuradores de código y las vistas de las estructuras de datos de un
determinado programa. Así ya no existe solo el aprendizaje verbal acompañado también del lógico,
relacionado a la mera lectura y escritura de código junto con la relación de los conceptos a través de la
lógica para comprender lo que un bloque de código está haciendo; sino también la incorporación del estilo
visual que ahora proveen las estructuras de datos actualizadas de un programa, o el aprendizaje
kinestésico, facilitado por el depurador de código, permitiendo reducir en gran medida el tiempo empleado
en leer, observar y comprender determinado programa para adentrarse de lleno en la práctica continua.
Sin embargo, así como es relevante que exista la posibilidad de aprender de distintas formas,
también es necesario la verificación de cada solución para validar que lo que se hizo estaba bien, y la
solución fue óptima. Para ello existen los tests, que evalúan la calidad del producto identificando defectos y
problemas. Esto permite contemplar situaciones que tal vez no fueron pensadas y así generar un código
mucho más robusto.
Los tests a su vez suelen ser agrupados en suites de tests, conteniendo distintos casos de test que
abarcan diferentes funcionalidades de una aplicación.
Hoy en día conviven diferentes plataformas cuyo objetivo principal es enseñar a determinado
usuario a aprender a programar, pero ninguna de ellas cuenta con todos los aspectos mencionados
previamente. Algunas hacen énfasis en el testeo, por ejemplo, mientras que otras se orientan a detallar
visualmente las soluciones desarrolladas.
CAPÍTULO 3
Propuesta de la Herramienta VIDE
3.1. Características Herramienta
Comparando las plataformas y herramientas analizadas en el capítulo 2.5 “Entornos de enseñanza
de programación ó aplicaciones educativas de enseñanza de la programación”, podemos observar en la
tabla 3.1 que ninguna de ellas presenta un conjunto completo de las características destacadas que ayudan
a solucionar las problemáticas mencionadas en el capítulo 1.2 “Motivación”.
Nombre
Herramienta
Mumuki Gobstones Coderbyte CodeWars FreeCodeCamp
HackerEarth
- Problemas
de Práctica
IDE Moodle
Intro. Prog. I
UNICEN16
Banco de Test ✖ ✖ ✖ ✔ ✔ ✖ ✖
Representación
Gráfica
✔ ✔ ✖ ✖ ✖ ✖ ✖
Ejecución Paso a
Paso
✖ ✔ ✖ ✖ ✖ ✖ ✖
Solución
Disponible
✖ ✖ ✔ ✔ ✔ ✔ ✔
Estadísticas de
alumnos
✔ ✖ ✖ ✖ ✖ ✔ ✔
Tabla 3.1: Comparación de plataformas y herramientas según sus características.
Con el objetivo de suplir dicha ausencia, la herramienta desarrollada VIDE (Visual Integrated
Development Environment) ofrece un entorno de desarrollo web para ejercicios prácticos que cumple con
cada una de las características mencionadas, siendo así amigable para un usuario alumno que se está
introduciendo y perfeccionando en la programación. Destacamos el detalle de cada característica:
● Banco de Test: se le habilita al usuario docente, desarrollador de la consigna del ejercicio la
posibilidad de incluir un conjunto amplio de ejemplos sobre los cuales es posible validar la solución
propuesta.
16 La característica “Banco de Test” se encuentra disponible en Moodle, pero no es utilizada por la
cursada de Intro. Prog. I
● Representación Gráfica y Ejecución Paso a Paso: se habilita la visualización de la representación
de los distintos estados de las estructuras de datos declaradas con sus valores, y cómo se van
modificando paso a paso durante la ejecución del programa diseñado por el estudiante para
resolver la consigna
● Solución Disponible: se habilita al usuario docente que crea la consigna indicar la solución óptima
y ciertas “pistas fijas”, que se muestran previa a dicha solución, induciendo al alumno a una
reflexión personal sobre lo desarrollado. Dicha metodología de pistas previas está inspirada en la
implementación actual de los ejercicios prácticos de la herramienta Mumuki.
● Estadísticas de alumnos: permite mostrar las estadísticas del número de soluciones probadas,
soluciones aceptadas, errores de sintaxis, errores de ejecución y soluciones rechazadas para cada
consigna.
En la Figura 3.1 se muestra un esquema de la disposición de secciones que componen la
herramienta VIDE en su interfaz principal.
Figura 3.1. Disposición de secciones de la herramienta VIDE.
Para ingresar a VIDE es requerimiento para el usuario indicar su cuenta de Google con la cual
desea registrarse. Esto permite reconocer las interacciones del usuario en forma individual. A continuación
se puede observar en la figura 3.2, el mensaje de bienvenida presente en la vista inicial de VIDE, que invita
al usuario a ingresar con su cuenta de Google.
Figura 3.2. Mensaje de bienvenida a VIDE, la cual permite registrarse con una cuenta de Google.
3.1.1 Lenguaje de Programación
El lenguaje de programación elegido para que la herramienta VIDE soporte es Javascript. Los
motivos principales por los cuales se eligió Javascript son:
● Popularidad como lenguaje de programación. Posicionándose en el top 3 según el índice PYLP .17
● Ejecución en el navegador en forma nativa, facilitando el desarrollo de la herramienta web.
● Utilizado como lenguaje de programación para front-end y back-end.
3.2. Secciones Herramienta VIDE
La herramienta VIDE está disponible en https://vide-tool.web.app/
Detallamos a continuación cada una de las secciones que se mostró en la figura 3.1
3.2.1. Crear Ejercicio
Está sección permite a los usuarios docentes crear y almacenar ejercicios en VIDE. Como se puede
observar en la figura 3.3 a continuación, los campos carpeta, título y consigna son obligatorios para la
creación del ejercicio. Sí el usuario no indica uno de estos, se le comunican los campos necesarios faltantes
mediante una alerta en la esquina superior derecha.
17 https://www.stackscale.com/es/blog/lenguajes-programacion-populares-2021/
Figura 3.3. Formulario de creación de ejercicios.
Las carpetas permiten agrupar ejercicios facilitando luego la búsqueda y selección de los mismos
dentro de VIDE. Por debajo del campo de entrada de texto para la consigna se posicionan dos editores de
código correspondientes al código inicial y código solución. El código inicial se visualiza en el editor de
código del alumno al abrir el ejercicio, mientras que el código solución permite al creador del ejercicio
disponibilizar la solución óptima del ejercicio. Además, dicho código solución es necesario para la suite de
test, ya que el mismo será ejecutado para generar el resultado de cada test. Luego se posicionan los
editores de texto y código para agregar las pistas 1 y 2 de la consigna. Y por último está el formulario que
permite agregar test al ejercicio, donde cada test está conformado por un nombre identificatorio y el código
correspondiente.
3.2.2. Buscador
Como se puede observar en la figura 3.4 a continuación, está sección permite buscar y
seleccionar ejercicios dentro de VIDE, filtrando por carpeta y nombre de los ejercicios.
Figura 3.4. Explorador de ejercicios.
3.2.3. Consigna
Al seleccionar un ejercicio, se despliega la consigna del ejercicio en el panel redimensionable
destacado en la figura 3.5.
Figura 3.5. Vista general de la herramienta VIDE, donde se destaca la consigna del ejercicio “Eureka”
seleccionado por el usuario.
3.2.4. Editor de Texto
El editor de texto destacado en la figura 3.6 está dividido en dos, donde el “superior” está orientado
al “código entrada”, mientras que el inferior está orientado al “código solución/salida”. A pesar de esta
división, el contenido de dichos editores es concatenado al momento de ejecutarse. Cuando el usuarioalumno selecciona un ejercicio desde el buscador, se coloca en el editor superior el código inicial del
ejercicio y por debajo el código correspondiente al primer test de la suite de test en caso de que el ejercicio
lo contenga. De está manera se le presenta al usuario alumno un escenario listo para comenzar a
desarrollar el ejercicio.
Figura 3.6. Vista principal de la herramienta VIDE, donde se destacan los editores de texto.
3.2.5. Panel de Ejecución
El panel de ejecución destacado en la figura 3.7, presenta tres modos de ejecutar el código
presente en el editor de texto. Estos modos le permiten al usuario alumno elegir el “ritmo de ejecución”.
Figura 3.7. Panel de ejecución. El botón verde corresponde a la ejecución normal, a su derecha se
posiciona el botón de ejecución lenta y por último el botón de ejecución paso a paso.
La ejecución normal ejecuta el código en “tiempo real”. De esta forma el código se interpreta y se
ejecuta al instante. No hay forma posible al ojo humano de identificar lo que va sucediendo en cada
instrucción implementada. Lo único que se logra visualizar es la salida final del programa desarrollado por la
alta velocidad a la que se ejecuta el código.
La ejecución lenta, por otro lado, ejecuta el código con un lapso de espera de 1,2 segundos entre
cada operación significativa, la cual es resaltada en el editor de texto, como se puede observar en la figura
3.8.
Una operación significativa es aquella porción del código que representa una acción trascendental
en la ejecución del programa. Las mismas son: declaraciones, asignaciones, operaciones aritméticas,
condiciones, retornos, llamados a funciones e impresiones por consola.
Figura 3.8. Ejecución lenta en curso, donde se resalta la línea de código “entradaTeclado = [1,2,3];”
que está siendo ejecutada.
Por último la ejecución “paso a paso'' o debugger, ejecuta cada operación significativa y “detiene” la
ejecución hasta que el usuario alumno indica continuar con la siguiente. Al igual que la “ejecución lenta” se
resalta en el editor de texto la última operación significativa ejecutada.
Figura 3.9. Ejecución paso a paso, donde se resalta la última línea de código ejecutada
“número=3;” y donde se encuentra detenida la ejecución.
Como se puede observar en la figura 3.9, cuando el usuario alumno se encuentra en el modo de
ejecución paso a paso, dentro del panel de ejecución se habilitan tres nuevos botones:
● El de resumir la ejecución en tiempo real.
● El de continuar con la siguiente instrucción.
● El de salir del modo debugger.
Este último modo es utilizado en gran manera en muchos de los entornos que existen hoy en día y
es de gran ayuda para testear todo tipo de programas. Su principal uso es el de correr programas bajo
determinadas condiciones que permiten al programador el seguimiento y monitoreo de las operaciones en
progreso, logrando una mayor facilidad a la hora de encontrar errores o funcionamientos erróneos en el
código.
3.2.6. Visualización de Estructuras
La pestaña de “Visualización de estructuras” se encuentra siempre habilitada y permite
reflejar los diferentes estados de las estructuras de datos declaradas. Las estructuras de datos con sus
correspondientes valores, aparecen y desaparecen según su estado durante la ejecución. Se realizaron
representaciones visuales para variables de tipo simple y para arreglos, dado que estos son los tipos
comúnmente utilizados en los primeros ejercicios de un curso introductorio de programación .18
18Programa meteria “Conceptos de Algoritmos, Datos y Programas” - UNLP
https://www.info.unlp.edu.ar/wp-content/uploads/2022/04/COMB-CADP.pdf
Las variables de tipo simple son elementos individuales, como cadenas de caracteres (string),
números ó booleanos. Por otro lado, los “arreglos” (array) son una serie de elementos en un orden
específico, los cuales se acceden utilizando un entero como índice para especificar el elemento que se
requiere (Patel, 2018).
Cada una de estas representaciones se visualizan junto con su nombre identificatorio con el cual
fueron declaradas en el código fuente, y se ubican según el orden de declaración. Está representación se
muestra en la figura 3.10 a continuación, en base al código de ejemplo presente en el editor de texto de la
misma.
Figura 3.10. Ejemplo de los estilos de visualización de estructuras arreglo y variables de tipo simple.
El usuario alumno puede cambiar la ubicación de las estructuras dentro de la visualización
mediante interacciones de arrastrar y soltar, como así también es posible realizar zoom sobre ellas. De esta
manera el usuario alumno puede agrupar las estructuras que son de su interés y realizar un seguimiento de
la ejecución más simple.
3.2.7. Banco de Test
Una vez seleccionado un ejercicio, se habilita la pestaña “Suite de test” donde se listan los test
disponibles. Cada test indica:
● Estado: el cual indica si el test “no fue ejecutado”, “ejecutado pero no pasado” o “ejecutado
pasado correctamente”.
● Nombre del test: indicado por el usuario docente que creo que ejercicio. Al realizar un click
sobre el mismo se permite visualizar en el editor superior el código correspondiente al test.
● Botón “Ejecutar”: el cual permite ejecutar en forma individual el test.
Al final de la pestaña se coloca el botón “Ejecutar Todos”, el cual permite ejecutar el
conjunto completo de test.
Para que un test sea considerado “ejecutado pasado correctamente”, el contenido de la variable
“resultado” luego de ejecutar el código presente en los editores, debe ser igual al obtenido ejecutando el
código indicado como “solución” por el creador del ejercicio. El estado “no fue ejecutado”, “ejecutado pero
no pasado” o “ejecutado pasado correctamente” correspondiente a cada test se ubica a izquierda dentro del
listado, como se puede observar destacado en la figura 3.11.
Figura 3.11. Suite de test, donde el “Test 1” es indicado como “ejecutado pasado correctamente”, el “Test 2”
y “Test 3” es indicado como “ejecutado pero no pasado” y el “Test 4” es indicado como “no fue ejecutado”.
3.2.8. Consola
Este panel redimensionable destacado en la figura 3.12, permite comunicar al usuario alumno los
errores de sintaxis, los errores de ejecución y visualizar las “impresiones por pantalla” del programa.
Figura 3.12. Visualización de la impresión por pantalla “Hello World!”.
3.2.9. Solución
Esta sección permite al usuario alumno, conocer la solución óptima propuesta por el
creador del ejercicio. Además, en caso de haber sido indicadas por este último, se visualizarán dos pistas,
previas a la solución óptima. En las figuras 3.13 y 3.14 a continuación se observa la sección de pistas y
solución óptima mencionadas.
Figura 3.13. Panel solución del ejercicio seleccionado, donde se observa la “Pista 1”.
Figura 3.14. Panel solución del ejercicio seleccionado, donde se observa el código solución.
3.2.10. Estadísticas
Una vez seleccionado un ejercicio, es posible visualizar en la sección de estadísticas, un registro
de:
● Cantidad de ejecuciones en la suite de test..
● Cantidad de ejecuciones satisfactorias en la suite de test.
● Cantidad de ejecuciones rechazadas en la suite de test.
● Cantidad de ejecuciones con error de referencia (ReferenceError ), los cuales se registran19
cuando se hace referencia a una variable inexistente.
● Cantidad de ejecuciones con error de sintaxis (SyntaxError ), los cuales se registran20
cuando se trata de interpretar código que resulta ser inválido sintácticamente.
● Cantidad de ejecuciones con error de operación inválida (TypeError ), error cuando no se21
pudo realizar una operación, generalmente cuando un valor no es del tipo esperado.
Las cantidades se representan gráficamente como se puede observar en la figura 3.15 a
continuación.
21 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypeError
20 https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError
19 https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/ReferenceErrorFigura 3.15. Panel de estadísticas registradas de un ejercicio específico.
3.2.11. Descarga Código
El usuario alumno puede descargar fácilmente el código desarrollado en VIDE en un archivo de
texto, mediante el botón presente en la barra lateral izquierda. El archivo descargado está compuesto
principalmente por el contenido de ambos editores de texto, y en caso de que el alumno se encuentre
resolviendo un ejercicio, la consigna del mismo se adjunta como comentario al comienzo del archivo, así
como también se agrega el nombre del ejercicio al nombre del archivo descargado.
3.3 Resumen
A modo de resumen podemos destacar que VIDE, la herramienta propuesta y desarrollada, posee
las siguientes características principales para la resolución de consignas prácticas en Javascript:
● Creación y distribución de consignas prácticas, con solución propuesta disponible.
● Banco de test.
● Representación gráfica de estructuras de datos y ejecución paso a paso.
● Estadísticas de alumnos.
A diferencia de las diferentes herramientas analizadas en el capítulo 2.5 “Entornos de enseñanza de
programación ó aplicaciones educativas de enseñanza de la programación”, la propuesta se posiciona como
solución integral a las problemáticas mencionadas en el capítulo 1.2 “Motivación”.
El desarrollo fue organizado incorporando un tablero kanban, donde cada tarea se identifica con
numeración (VIDE-XX), un título a modo de resumen, una descripción del objetivo de la tarea y un
responsable de dicha tarea. La primer etapa del desarrollo involucró la investigación e implementación de
los siguientes objetivos:
● Establecer una disposición inicial del editor de texto, sección de consigna, vista interactiva
de estructuras, y sección de suite de test.
● Implementar una vista funcional de estructuras de datos.
● Deployar la herramienta junto con una base de datos que permita almacenar información.
● Ejecutar código javascript en el cliente.
Esta prueba de concepto estableció el enfoque y conceptos necesarios para la implementación final.
La herramienta VIDE está disponible en https://vide-tool.web.app/
CAPÍTULO 4
Diseño, arquitectura e implementación
4.1. Introducción
En el presente capítulo se desarrolla la explicación correspondiente a la materialización del sistema
propuesto presentando los detalles del diseño e implementación de la herramienta VIDE. Además, se
incluye la explicación de cómo cooperan los componentes del sistema, como así también la interacción con
el usuario.
4.2. Estructura del proyecto
En la estructura de este proyecto cada elemento tiene una función específica y una correlación con
los demás elementos que la componen. Eso hace posible que el sistema sea eficaz en su propósito.
Cada parte de dicha estructura fue estudiada y elegida para lograr el objetivo deseado de la manera
más sencilla y performante posible.
4.2.1. Modelo de dos Capas
Esta aplicación cuenta con una arquitectura cliente-servidor, es decir, una estructura que realiza su
trabajo por medio de clientes, que son aquellos que realizan pedidos de servicios, y servidores, que proveen
dichos servicios o recursos.
Existen diferentes modelos cliente-servidor. En este caso se utiliza el modelo de dos capas. Las
respectivas capas son las siguientes:
1. Nivel de aplicación (cliente): en este nivel se encuentra toda la interfaz del sistema y por el cual el
usuario puede realizar su actividad con el sistema. En este caso, el cliente es considerado pesado o
fat-client ya que la lógica de negocio está inmersa dentro de la aplicación que realiza la interfaz de
usuario, en el lado del cliente. Es decir, que tanto la visualización de la información, como el
procesamiento y el cálculo de la misma es realizada del lado del cliente.
2. Nivel de la base de datos (servidor): este nivel es en donde se almacena toda la información
ingresada en el sistema y que se deposita en forma permanente. Su función principal es la de
almacenar y retornar la información persistida del sistema. Puede contar con procesamiento de
datos pero siempre a nivel de base de datos.
Figura 4.1. Modelo de dos capas
A diferencia del modelo de tres capas, como se muestra en la figura 4.1 el modelo de dos capas no
cuenta con la capa servidor que contiene la lógica de negocios. En aplicaciones grandes esta capa es
importante porque permite particionar el trabajo y delegar muchas de las operaciones entre las diferentes
capas. De esta forma, dicha capa sirve de intermediario o puente entre el cliente y la capa de base de datos.
El nivel de negocios proporciona servicios que completan las tareas de negocio tales como verificar,
procesar y calcular el resultado correcto basado en los datos enviados por el cliente.
En el caso de la presente herramienta, la lógica de negocio es sencilla y la inclusión de una nueva
capa a nivel de servidor generaría una pérdida importante de la eficiencia, creando un nuevo eslabón por el
que debe pasar la información, cuando la misma es poca. De esta forma, el modelo escogido aprovecha la
capacidad de cómputo de las computadoras que lo ejecutan, generalmente infrautilizadas, y solo utiliza al
servidor de base de datos para consultar por la información que necesita.
Si bien existen diferentes limitaciones en este modelo (difícilmente escalable, alta carga de la red,
flexibilidad es restringida y funcionalidad limitada) todos estos puntos se reducen a la aplicación que se
desea diseñar. En el caso de una aplicación pequeña, que no requiere de grandes cantidades de
información ni de procesamiento de la misma, un modelo dos capas es ideal. Y es por ello que se eligió
dicho modelo.
Un modelo de tres capas no se aprovecharía al máximo porque se contaría con una gran estructura
para una lógica simple y reducida. Si bien en muchos casos el cliente de un modelo de dos capas se
considera fat-client, en la presente aplicación el cliente no es pesado porque no es demasiada la lógica de
negocio de la misma, permitiendo un incremento de velocidad de aplicación, desarrollo y mantenimiento.
4.2.2. Base de Datos
Como se menciona anteriormente, la segunda capa del modelo de dos capas que utiliza la
herramienta está conformada por la base de datos.
La plataforma utilizada como base de datos fue Firebase Realtime Database . La misma es una22
base de datos no SQL alojada en la nube. Los datos se almacenan en formato JSON y se sincronizan en23
tiempo real con cada cliente conectado.
Existen algunas ventajas importantes por los cuales la elección de esta herramienta diseñada por
Google se adaptaba muy bien al presente proyecto; entre las cuales podemos mencionar;
● Firebase es gratuito para el Plan Spark. El mismo tiene un límite de 1GB para la base de datos, de
los cuales con 22 usuarios registrados y 21 ejercicios almacenados actualmente solo están
ocupados 50kb, representando el 0.005% del espacio disponible.
● Posee una sencilla creación y configuración de la base de datos mediante la consola web de
Firebase.
● No requiere un servidor propio para su instalación y utilización.
● Permite la administración de la base de datos en forma colaborativa.
● Provee notificaciones de errores y problemas de seguridad.
● Facilita la implementación completa de autenticación de usuarios mediante el Firebase JavaScript
SDK el cual es distribuido mediante npm y es fácilmente instalable en cualquier proyecto de24 25
desarrollo web. Además posee documentación detallada e instructivos paso a paso. De está
manera evita el desarrollo de un backend y permite enfocar el desarrollo del proyecto en el frontend.
● Dado que Firebase Realtime Database almacena los datos en formato JSON, no requiere el diseño
de una base de datos relacional, simplificando la administración y comunicación con la base de
datos. Además el SDK mencionado provee métodos para modificar la base de datos en forma
concurrente, simplificando de está manera el registro de las estadísticas por parte de la herramienta
desarrollada, ya que es el SDK elque se encarga de persistir los datos de forma concurrente en
forma segura.
● Es desarrollado por Google, haciéndolo una herramienta popular y generando una gran comunidad
de desarrolladores que la utilizan, y que comparten información y conocimientos.
● Como se observa en la figura 4.2 la interfaz para la visualización y edición de la base de datos en
tiempo real, es simple y amigable.
25 https://www.npmjs.com/
24 https://github.com/firebase/firebase-js-sdk
23 https://www.json.org/json-en.html
22 https://firebase.google.com/products/realtime-database
Figura 4.2. Pestaña de datos de la consola de Firebase Realtime Database.
4.2.3. Hosting y Deployment
Finalmente, para que la plataforma pueda ser accedida por los usuarios finales se necesita del
deploy de la misma a través de un determinado host.
Para el hosting de la herramienta desarrollada fue utilizado Firebase Hosting. El mismo es un
servicio de hosting de contenido web con nivel de producción orientado a desarrolladores.
Las principales ventajas de Firebase Hosting por las cuales se eligió como plataforma son:
● El servicio es gratuito para Plan Spark utilizado, el cual tiene un límite de almacenamiento de 10 GB
para los archivos hosteados y 360 MB por día para la transferencia de datos. Dichos límites son
más que suficientes para los requerimientos de la herramienta desarrollada, la cual solo ocupa 62.9
MB (0,6%) de los 10 GB disponibles para hosting.
● El deploy de la herramienta desarrollada en Firebase Hosting es sencillo. El mismo se realiza
mediante Firebase CLI (Interfaz de Línea de Comandos), la cual es distribuida mediante npm y26
permite administrar, implementar y visualizar en proyectos de Firebase. De esta manera con simples
comandos se permite autentificarse como usuario de un proyecto de Firebase, y realizar mediante
un comando el deploy de los archivos. De está manera Firebase Hosting permite la administración
colaborativa dado que todos los usuarios que tengan acceso de administrador sobre un proyecto
Firebase, pueden utilizar Firebase CLI para administrar, implementar y visualizar el proyecto.
● Firebase Hosting configura automáticamente un certificado SSL para cada sitio que hospeda,
además de un dominio de acceso público.
4.3. Tecnologías utilizadas
Durante la etapa de investigación y prueba de concepto sobre la ejecución de código en el cliente
mencionado en la sección 3.3.1 “Prueba de Concepto”, se llegó a la conclusión que para el mismo era
26 https://firebase.google.com/docs/cli
conveniente utilizar Vue como framework de desarrollo, ya que utiliza Javascript “puro”, en lugar de JSX
como React.
Además al evaluar alternativas de deploy, hosting y bases de datos, se tomó la decisión de utilizar
Firebase, ya que la misma no solo provee al igual que Github Pages una solución rápida y sencilla para27
deploy y hosting de un proyecto web, sino que también incorpora una base de datos en tiempo real,
organizada en forma de árbol JSON, denominada “Realtime Database”. Simplificando el almacenamiento de
información.
Por último también se puede destacar que Firebase provee “Firebase Auth”, el cual es un servicio
que puede autenticar los usuarios utilizando únicamente código del lado del cliente, siendo este uno de los
requerimientos de implementar para el entorno de desarrollo propuesto.
4.3.1. Framework Desarrollo Frontend
Al momento de comparar y elegir un framework de frontend tomamos como punto de partida, los
más populares: Angular , React, Vue.28
Comparando su curva de aprendizaje y rendimiento, podemos destacar que React y Vue son los
dos que mejor se ajustan dadas las necesidades del proyecto.
En cuanto a la curva de aprendizaje, Angular se considera el de mayor dificultad, ya que utiliza
Typescript , lenguaje el cual se suma al aprendizaje en sí del framework. Por otro lado, entre Vue y React,29
se puede considerar que Vue posee una sintaxis más sencilla ya que utiliza “Javascript Vanilla”, mientras
que React utiliza JSX.
La arquitectura de los tres frameworks mencionados es similar, donde la aplicación desarrollada se
puede conceptualizar como un árbol de componentes, el cual comienza desde un componente “raíz”, y se
extiende en jerarquía de componentes hijos. Como excepción se puede mencionar que Angular, no solo
divide la aplicación en componentes, sino también en módulos, los cuales contienen código que relaciona
qué componentes pertenecen a cada módulo.
El rendimiento de los frameworks analizados en aplicaciones de un tamaño pequeño, destaca a Vue
como el óptimo, seguido por React y en último lugar Angular. Estas afirmaciones se pueden corroborar a
partir de las tablas comparativas 4.1 y 4.2, donde a pesar de que Vue produce un proyecto compilado para
producción de mayor tamaño comparado con React, es dos veces más rápido que este último y cinco veces
más rápido que Angular.
Vue 624 KB
React 587 KB
Angular 15.7 MB
Tabla 4.1. Tamaño final de proyecto compilado para producción (Saks, 2019)
29 https://www.typescriptlang.org/
28 https://angular.io/
27 https://pages.github.com/
Vue React Angular
Tiempo de carga de página 246 269 403
Tiempo al crear 1000 componentes fila 232 420 384
Tiempo al recrear 1000 componentes fila 117 190 331
Tiempo al agregar 1000 componentes fila 185 370 254
Tiempo al crear 10.000 componentes fila 1447 2866 6361
Tiempo al recrear 10.000 componentes fila 547 1176 7427
Tiempo al agregar 10.000 componentes fila 1436 3854 7623
Tiempo eliminar todos los componentes fila 505 607 2196
Tiempo total 4715 9752 24978
Multiplicador 1.00 2.07 5.30
Tabla 4.2. Tiempo en milisegundos para la completar la tarea (Saks, 2019)
4.4. Diseño de la aplicación
Dado que el proyecto fue íntegramente desarrollado utilizando un framework de frontend, la
estructura y arquitectura del mismo se basa en la visualización de la herramienta.
Partiendo de la disposición de la vista propuesta para la herramienta, podemos destacar 3
componentes principales:
● Encabezado
● Barra Lateral
● Contenido Principal
Dichos componentes principales están agrupados por el componente Main Container, y como se
observa en la figura 4.3 a continuación, la localización de sus archivos correspondientes se encuentra bajo
la ruta /src/views.
Por otro lado los componentes secundarios que componen cada uno de estos componentes principales se
ubican bajo la ruta /src/components agrupados por funcionalidad.
Figura 4.3. Distribución de carpetas y archivos del código fuente de los componentes Vue de VIDE.
4.4.1 Diseño de la UI
Con el objetivo de acercar al usuario a la interfaz de los entornos de desarrollo del mercado,
tomamos como referencia la localización de los diferentes componentes más significativos de un entorno de
desarrollo como el editor de texto, consola, barras de herramientas superiores y laterales. También
analizamos el diseño de las plataformas educativas de programación mencionadas en el capítulo 2.5
“Entornos de enseñanza de programación ó aplicaciones educativas de enseñanza de la programación”,
comparándolas con los entornos de desarrollo del mercado, identificando la disposición de elementos y sus
similitudes. De está manera destacamos:
● El editor de texto tiene prioridad en tamaño con respecto al resto de secciones. Como se puede
observar en la figura 4.5 el porcentaje del área del editor con respecto al área total, se respeta la
proporción dentro del rango aproximado a 30% - 50%. Teniendo en cuenta ese rango se determinó
que el editor de VIDE ocupe un 45% del área total.
● La barra de herramientas superior y lateral alojan el acceso a diferentes secciones de VIDE, así
como también el panel de ejecución. Además como se puede apreciar en la figura 4.4 al posicionar
el puntero sobre cada uno de los elementos, se muestra el título de la sección que permite acceder
o la acción que realiza.
Figura 4.4. Mensaje informativo al posicionar el puntero sobre un elemento de la barra de herramientas
superior o lateral.
● Las plataformas