doi: 10.56294/ai202360
ORIGINAL
Platform for learning programming and databases based on artificial intelligence
Plataforma para el aprendizaje de programación y bases de datos basado en inteligencia artificial
Martín Alejandro Gerlero1
1Universidad Siglo 21, Licenciatura en Informática. Río Tercero, Córdoba, Argentina.
Citar como: Alejandro Gerlero M. Platform for learning programming and databases based on artificial intelligence. EthAIca. 2023; 2:60. https://doi.org/10.56294/ai202360
Enviado: 01-05-2022 Revisado: 15-09-2022 Aceptado: 01-01-2023 Publicado: 02-01-2023
Editor: PhD.
Rubén
González Vallejo 
ABSTRACT
This final degree project proposed the development of a gamified web platform to facilitate the initial learning of programming and databases using artificial intelligence. The proposal arose from the need for new teaching tools given the difficulties presented by traditional teaching methods. The objective was to create an application that teaches basic concepts in an interactive and entertaining way. To do this, an investigation was carried out to determine the main contents to be addressed. Then theoretical contents were defined and practical exercises were designed applying gamification techniques. Subsequently, a functional prototype was developed that contains the defined theoretical contents, implements the designed practical exercises, and integrates the artificial intelligence functionality to provide unlimited examples on each topic, correction and personalized feedback on the resolution of exercises performed by the student. The results obtained so far allow validating the usefulness and technical feasibility of the proposal.
Keywords: Education; Programming; Gamification; Artificial Intelligence; Web Application.
RESUMEN
Este trabajo final de grado planteó el desarrollo de una plataforma web gamificada para facilitar el aprendizaje inicial de programación y bases de datos utilizando inteligencia artificial. La propuesta surgió ante la necesidad de contar con nuevas herramientas didácticas ante las dificultades que presentan los métodos de enseñanza tradicionales. El objetivo fue crear una aplicación que enseña conceptos básicos de forma interactiva y entretenida. Para ello se realizó una investigación para determinar los contenidos principales a abordar. Luego se definieron contenidos teóricos y se diseñaron ejercicios prácticos aplicando técnicas de gamificación. Posteriormente se desarrolló un prototipo funcional que contiene los contenidos teóricos definidos, implementa los ejercicios prácticos diseñados e integra la funcionalidad de inteligencia artificial para proveer ejemplos ilimitados sobre cada tema, corrección y retroalimentación personalizada a la resolución de ejercicios realizada por el estudiante. Los resultados obtenidos hasta el momento permiten validar la utilidad y factibilidad técnica de la propuesta.
Palabras clave: Educación; Programación; Gamificación; Inteligencia Artificial; Aplicación Web.
INTRODUCCIÓN
El aprendizaje de la programación constituye un desafío importante para estudiantes de todos los niveles, especialmente para quienes se inician sin formación previa en pensamiento lógico o computacional.(1,2,3,4) A pesar del creciente interés por carreras vinculadas a la tecnología, muchas personas enfrentan dificultades al acceder a contenidos técnicos mediante métodos de enseñanza tradicionales, que suelen ser teóricos, rígidos y poco motivadores. Esta situación plantea la necesidad de explorar nuevas estrategias didácticas que mejoren la accesibilidad, la comprensión y la retención de los conceptos fundamentales de programación y bases de datos.(5,6,7,8,9)
En este contexto, la gamificación ha demostrado ser una herramienta pedagógica eficaz para incrementar la motivación y el compromiso de los estudiantes. Al introducir elementos lúdicos y mecánicas de juego en el entorno educativo, se promueve un aprendizaje activo, dinámico y significativo. Paralelamente, el avance de la inteligencia artificial (IA) ha abierto nuevas posibilidades para personalizar la enseñanza y ofrecer retroalimentación automática e inmediata, lo que optimiza los procesos de evaluación y refuerzo de conocimientos.(10,11,12) La combinación de gamificación e IA representa, por tanto, una oportunidad prometedora para renovar las prácticas educativas en áreas técnicas como la programación.(13,14,15,16)
Existen ya algunas aplicaciones orientadas a la enseñanza lúdica de la programación, como Mumuki, CodeCombat y CodeMonkey.(17,18) No obstante, estas herramientas presentan limitaciones importantes, ya sea por el alcance de los contenidos, los lenguajes de programación disponibles o la falta de adaptación a distintos perfiles de usuario. Asimismo, el uso de IA en entornos educativos sigue siendo incipiente, y son escasas las implementaciones prácticas que integren esta tecnología para asistir y evaluar el aprendizaje del código de manera efectiva.(19,20)
¿Cómo puede una aplicación web educativa gamificada, que incorpore inteligencia artificial, mejorar el aprendizaje de conceptos básicos de programación y bases de datos en estudiantes sin formación previa, superando las limitaciones de los métodos tradicionales de enseñanza?
Objetivo
Desarrollar una aplicación web gamificada que permita el aprendizaje interactivo y entretenido de conceptos básicos de programación y bases de datos, utilizando tecnologías de inteligencia artificial para brindar retroalimentación personalizada a los estudiantes.
MÉTODO
Diseño Metodológico
Herramientas metodológicas
El desarrollo del proyecto se realizó utilizando la metodología ágil Scrum, que organiza el trabajo en sprints o ciclos de desarrollo. Al finalizar cada sprint se obtiene un producto funcional y potencialmente entregable.
Herramientas de desarrollo
Para el desarrollo de la aplicación web se utilizaron tecnologías como PHP, HTML5, CSS3, JavaScript y MySQL. PHP fue el lenguaje principal en el backend para generar el contenido dinámico que luego es mostrado en el frontend.
En el frontend se emplearon HTML5 para la estructura, CSS3 para los estilos visuales y JavaScript para la interactividad. Estas tecnologías fueron implementadas usando el framework MaterializeCSS que facilita el desarrollo web responsive.
En el backend, PHP se conecta con la base de datos MySQL para almacenar y consultar los datos necesarios para la aplicación, como usuarios, cursos, ejercicios, etc. También se empleó la API de ChatGPT para integrar servicios de inteligencia artificial.
De esta manera, PHP en el backend se vincula con HTML, CSS y JS en el frontend para generar el contenido final que ve el usuario. Asimismo, PHP se conecta a la base de datos MySQL y a la API de ChatGPT para la funcionalidad completa de la aplicación web.
Recolección de datos
Para obtener los requerimientos del sistema se utilizaron:
· Entrevistas con docentes de programación: para conocer dificultades en la enseñanza y sugerencias de funcionalidades.
· Encuesta online a estudiantes: para recabar información sobre necesidades y preferencias.
· Observación en clases de programación: para identificar problemáticas y oportunidades.
· Revisión de materiales didácticos existentes: para detectar fortalezas y debilidades.
Planificación del proyecto
El plan de actividades realizadas para cumplir con los objetivos del presente El trabajo final de grado se detalla en el siguiente diagrama de Gantt.
Figura 1. Diagrama de Gantt
Relevamiento
Relevamiento estructural
Por tratarse de una plataforma online, dirigida a adolescentes y adultos que deseen aprender a programar de una forma gamificada con correcciones basadas en la IA, no es posible fijar una localización y estructura específica para el mismo. Esto dependerá del lugar donde el individuo desee utilizarla. Esto puede ser en una institución educativa, ambiente familiar, laboral, entre otros.
Relevamiento Funcional
Existen diferentes formas de desarrollar un sistema de este tipo, no son las mismas funciones cuando se aprende en una institución educativa, que cuando se hace a través de una aplicación, o cuando se hace de manera autodidacta consumiendo teoría a través de libros o videos para luego poner en práctica estos conocimientos directamente en una computadora.
Podríamos suponer que el público objetivo de este proyecto se desempeña en su mayoría dentro de un grupo familiar, tal vez utilizando la plataforma como complemento a su actividad académica formal. Cada grupo familiar es único, por lo que no hay una estructura definida, pero agentes que podemos encontrar son:
· Estudiantes: su función es leer y estudiar los contenidos teóricos que permitirán entender el pensamiento computacional y el lenguaje de programación. Posteriormente deberán ser capaces de llevar a la práctica lo aprendido en la teoría.
· Docente o Instructor: es el encargado de impartir o proporcionar de alguna manera (clase, libro, video, entre otros), la clase o contenido a abordar. Es su responsabilidad explicar los temas, ejemplificarlos, proponer situaciones problemáticas a resolver y corregir o brindar la solución y retroalimentación a las situaciones problemáticas.
· Institución educativa: es la responsable de generar el vínculo docente - estudiante, y generar un entorno propicio para que se produzca el aprendizaje.
En relación a los procesos, ya sea de manera autodidacta, en una institución educativa o a través de una aplicación, el estudiante puede realizar las mismas actividades para favorecer el aprendizaje objetivo. Se tomaron tres procesos como base para la aplicación:
Proceso: desarrollar tema en modalidad teórica con ejemplos.
Roles: docente y estudiante.
Pasos: el docente, ya sea de una institución, o virtual (por ejemplo, a través de un video de youtube o curso online) presenta de manera teórica un tema, el cual es explicado utilizando recursos como presentaciones, imágenes y videos según sea necesario y acorde a la modalidad de enseñanza. Adicionalmente se proporcionan ejemplos que complementan la teoría. Estos ejemplos son explicados por el docente y en caso de ser en una clase sincrónica funciona como disparador para que el estudiante pueda realizar consultas y solicitar nuevos ejemplos.
Proceso: proponer y resolver actividad
Roles: estudiante y docente
Pasos: una vez llevado a cabo el proceso anterior, el docente propone una actividad a desarrollar para que el estudiante ponga en práctica los contenidos aprendidos. Una vez resuelta la actividad el docente corrige la misma y hace las devoluciones correspondientes. En caso de tener dudas sobre las correcciones es el momento en el que el estudiante consulta. El docente resuelve las dudas hasta que no haya nuevas dudas y finaliza el proceso.
RESULTADOS
Procesos De Negocio
Para el modelado de los procesos de negocio, se empleó un flujograma por proceso.
Proceso: desarrollar tema en modalidad teórica con ejemplos
Figura 2. Desarrollar tema en modalidad teórica con ejemplos dinámicos
Proceso: proponer y resolver actividad
Figura 3. Proponer y resolver actividad
Diagnóstico Y Propuesta
|
Tabla 1. Desarrollar tema en modalidad teórica con ejemplos dinámicos |
|
|
Proceso: Desarrollar tema en modalidad teórica con ejemplos |
|
|
Problemas |
Causas |
|
Los ejemplos prácticos que acompañan la teoría no son dinámicos, por lo que a excepción que tengas un docente en el momento que estudias la teoría no se pueden solicitar más ejemplos para comprender mejor el tema. |
El aprendizaje en modalidad autodidacta a través de libros, cursos online, tiene una cantidad de ejemplos limitadas que generalmente no son más de 2 ó 3. En caso de darse en modalidad tradicional con un docente que acompañe, ocurre los mismo y solo tenemos la posibilidad de repreguntar ejemplos siempre y cuando el docente esté disponible. |
|
Tabla 2. Proponer y resolver actividad |
|
|
Proceso: Proponer y resolver actividad |
|
|
Problemas |
Causas |
|
Se carece de corrección inmediata sobre actividades a desarrollar propuestas por el docente. |
Generalmente las actividades que poseen corrección inmediata son actividades de opción múltiple, sólo en cursos que aplican las tecnologías. Cuando se trata de correcciones en actividades a desarrollar se requiere de una persona que corrija, y en caso de que sea un sistema quien corrige se necesita una forma exacta de resolución, algo que no se da siempre en programación, ya que existen muchas formas para resolver el mismo problema. |
Se propone el desarrollo de una plataforma web dividida en niveles, que acompañe al estudiante en el aprendizaje de un lenguaje de programación. La misma proporcionará el contenido teórico de un tema y ejemplos sobre ese tema. Los ejemplos son generados de manera dinámica mediante IA, dando la posibilidad de regenerar el ejemplo todas las veces que el estudiante necesite.
Una vez consumido el material teórico y los ejemplos, el estudiante deberá realizar una actividad, que al aprobar le permita avanzar al siguiente nivel. Esta actividad plantea un enunciado a desarrollar (el cual puede o no ser generado por IA según el tema) y el estudiante deberá escribir el código de fuente que resuelve el enunciado planteado. La resolución proporcionada, es corregida por IA. En caso de ser correcta va a sumar puntaje y habilitar el siguiente nivel, caso contrario mostrará una retroalimentación sobre los errores, para que el estudiante en un nuevo intento posea más herramientas para resolver la situación problemática.
Objetivos, límites y alcances del prototipo
Objetivo del prototipo
Desarrollar un prototipo de plataforma web gamificada para facilitar el aprendizaje inicial de programación en Python mediante retroalimentación personalizada provista por inteligencia artificial.
Límites
La aplicación comprende desde la lectura del material teórico de los temas más básicos, hasta el desarrollo y corrección de actividades utilizando inteligencia artificial.
Alcances
Los procesos alcanzados por el prototipo son los siguientes:
· Interacción con el menú de temas habilitados.
· Presentación de contenidos teóricos del tema seleccionado.
· Generación de ejemplo práctico resuelto sobre el tema seleccionado.
· Realización de actividad práctica sobre el tema seleccionado para evaluación de conocimientos.
· Visualizar retroalimentación de resolución de actividad.
· Visualizar puntaje e insignias de acuerdo al avance.
Descripción Del Sistema
Product Backlog
Se realizó el Product Backlog con todas las historias de usuario del sistema. Cada una posee un código único de identificación (ID) con las siglas HU (Historia de Usuario). Además, presenta el nombre de cada historia, la prioridad, puntos estimados y las dependencias existentes entre ellas.
|
Tabla 3. Product Backlog |
||||
|
ID |
Historia de usuario |
Prioridad |
Puntos |
Dependencias |
|
HU-01 |
Acceso a la plataforma |
Alta |
5 |
|
|
HU-02 |
Registro de nuevo usuario |
Alta |
8 |
HU-01 |
|
HU-03 |
Inicio de sesión de usuario |
Alta |
5 |
HU-01, HU-02 |
|
HU-04 |
Menú de temas |
Media |
3 |
HU-03 |
|
HU-05 |
Selección de tema |
Media |
2 |
HU-04 |
|
HU-06 |
Presentación de teoría |
Alta |
8 |
HU-05 |
|
HU-07 |
Ejemplo del tema |
Media |
5 |
HU-06 |
|
HU-08 |
Presentar actividad |
Alta |
8 |
HU-06 |
|
HU-09 |
Envío de actividad para corrección |
Alta |
5 |
HU-08 |
|
HU-10 |
Retroalimentación de actividad mediante IA |
Alta |
13 |
HU-09 |
|
HU-11 |
Actualización de puntaje |
Alta |
5 |
HU-10 |
|
HU-12 |
Visualización de puntaje e insignias |
Media |
5 |
HU-11 |
|
Tabla 4. Acceso a la plataforma |
|||
|
ID |
HU-01 |
Nombre: |
Acceso a la plataforma |
|
Descripción: |
Como usuario nuevo quiero poder ingresar a la plataforma para comenzar a utilizarla. |
||
|
Criterios de Aceptación: |
Dado el ingreso a la URL de la plataforma, cuando se cargue, entonces debe mostrar la página de inicio con las opciones de registro e ingreso. |
||
|
Prioridad |
Alta |
Puntos: |
5 |
|
Tabla 5. Registro de nuevo usuario |
|||
|
ID |
HU-02 |
Nombre: |
Registro de nuevo usuario |
|
Descripción: |
Como usuario nuevo quiero poder registrarme en la plataforma para obtener una cuenta. |
||
|
Criterios de Aceptación: |
Dados el email y contraseña para registrarse, cuando el usuario confirme, entonces debe validar los datos, confirmar el registro y enviar email de bienvenida. |
||
|
Prioridad |
Alta |
Puntos: |
8 |
|
Tabla 6. Inicio de sesión de usuario |
|||
|
ID |
HU-03 |
Nombre: |
Inicio de sesión de usuario |
|
Descripción: |
Como usuario registrado quiero poder iniciar sesión en la plataforma para acceder a su contenido. |
||
|
Criterios de Aceptación: |
Dadas las credenciales de usuario registrado, cuando se envíen en el formulario de login, entonces debe validar que los datos sean correctos y permitir el ingreso. |
||
|
Prioridad |
Alta |
Puntos: |
5 |
|
Tabla 7. Menú de temas |
|||
|
ID |
HU-04 |
Nombre: |
Menú de temas |
|
Descripción: |
Como usuario registrado quiero ver el menú de temas disponibles para elegir qué estudiar. |
||
|
Criterios de Aceptación: |
Dado el ingreso a la plataforma de un usuario registrado, cuando se cargue la página principal, entonces debe mostrarle el menú con los temas habilitados. |
||
|
Prioridad |
Media |
Puntos: |
3 |
|
Tabla 8. Selección de temas |
|||
|
ID |
HU-05 |
Nombre: |
Selección de tema |
|
Descripción: |
Como usuario registrado quiero seleccionar un tema del menú para comenzar a estudiarlo. |
||
|
Criterios de Aceptación: |
Dado un tema habilitado en el menú, cuando el usuario haga clic sobre él, entonces debe redirigir a la página de contenido de ese tema. |
||
|
Prioridad |
Media |
Puntos: |
2 |
|
Tabla 9. Presentación de teoría |
|||
|
ID |
HU-06 |
Nombre: |
Presentación de teoría |
|
Descripción: |
Como usuario registrado quiero que se muestre la teoría del tema elegido para aprender los conceptos. |
||
|
Criterios de Aceptación: |
Dado un tema seleccionado, cuando se cargue su página, entonces debe mostrar el contenido teórico con formato de texto, títulos, viñetas, enlaces, imágenes y/o videos. |
||
|
Prioridad |
Alta |
Puntos: |
8 |
|
Tabla 10. Ejemplo de tema |
|||
|
ID |
HU-07 |
Nombre: |
Ejemplo del tema |
|
Descripción: |
Como usuario registrado quiero ver un ejemplo práctico del tema para comprender su aplicación. |
||
|
Criterios de Aceptación: |
Dado un tema seleccionado, cuando se solicite un ejemplo, entonces debe mostrar uno resuelto en código y permitir generar nuevos ejemplos mediante IA. |
||
|
Prioridad |
Media |
Puntos: |
5 |
|
Tabla 11. Presentar actividad |
|||
|
ID |
HU-08 |
Nombre: |
Presentar actividad |
|
Descripción: |
Como usuario registrado quiero que se muestre una actividad práctica del tema para poner a prueba mi conocimiento. Dado un tema seleccionado, cuando se solicite una actividad, entonces debe presentar una para completar código sobre ese tema. |
||
|
Criterios de Aceptación: |
|||
|
|
|||
|
Prioridad |
Alta |
Puntos: |
8 |
|
Tabla 12. Envío de actividad para corrección |
|||
|
ID |
HU-09 |
Nombre: |
Envío de actividad para corrección |
|
Descripción: |
Como usuario registrado quiero enviar mi desarrollo de la actividad para obtener la retroalimentación. |
||
|
Criterios de Aceptación: |
Dada una actividad completada, cuando el usuario haga clic en enviar, entonces debe permitir el envío para su corrección. |
||
|
Prioridad |
Alta |
Puntos: |
5 |
|
Tabla 13. Retroalimentación de actividad mediante IA |
|||
|
ID |
HU-10 |
Nombre: |
Retroalimentación de actividad mediante IA |
|
Descripción: |
Como usuario registrado quiero recibir retroalimentación automática de mi actividad para verificar mi aprendizaje. |
||
|
Criterios de Aceptación: |
Dada una actividad enviada, cuando se solicite su corrección, entonces debe procesarla con IA en tiempo real e informar errores o aciertos encontrados y permitir reintentar si no es correcta. |
||
|
Prioridad |
Alta |
Puntos: |
13 |
|
Tabla 14. Actualización de puntaje |
|||
|
ID |
HU-11 |
Nombre: |
Actualización de puntaje |
|
Descripción: |
Como usuario registrado quiero que se actualice mi puntaje y progreso en base a las actividades realizadas para medir mi avance. |
||
|
Criterios de Aceptación: |
Dada una actividad completada y enviada, cuando se corrija, entonces debe calcular y otorgar puntos según dificultad. |
||
|
Prioridad |
Alta |
Puntos: |
5 |
|
Tabla 15. Visualización de puntaje e insignias |
|||
|
ID |
HU-12 |
Nombre: |
Visualización de puntaje e insignias |
|
Descripción: |
Como usuario registrado quiero poder ver mi puntaje acumulado e insignias obtenidas en la plataforma para verificar mi progreso. |
||
|
Criterios de Aceptación: |
Dado el ingreso a la plataforma de un usuario registrado, cuando se cargue su perfil, entonces debe mostrar su puntaje total y las insignias desbloqueadas. |
||
|
Prioridad |
Baja |
Puntos: |
5 |
Sprint 1
|
Tabla 16. Sprint 1 |
|||||
|
ID |
Prioridad |
Tareas |
Dependencias |
Tiempo |
Estado |
|
HU-01 |
Alta |
Diseñar página de inicio |
- |
1 |
Finalizado |
|
|
|
Implementar la funcionalidad de ingreso. |
|
1 |
Finalizado |
|
HU-02 |
Alta |
Diseñar formulario de registro. |
|
1 |
Finalizado |
|
|
|
Implementar el registro de usuario. |
HU-01 |
2 |
Pendiente |
|
HU-03 |
Alta |
Validar credenciales de acceso. |
HU-01, HU-02 |
1 |
Finalizado |
|
|
|
Redirigir a la página principal. |
|
1 |
Finalizado |
|
HU-04 |
Media |
Mostrar menú de temas habilitados. |
|
3 |
Finalizado |
|
HU-05 |
Media |
Dirigir al contenido del tema seleccionado. |
HU-04 |
1 |
Pendiente |
|
HU-06 |
Alta |
Mostrar teoría del tema en formato multimedia. |
HU-05 |
2 |
Pendiente |
|
HU-12 |
Baja |
Mostrar el puntaje total del usuario. |
|
1 |
Pendiente |
Sprint 2
Duración 14 días.
|
Tabla 17. Sprint 2 |
|||||
|
ID |
Prioridad |
Tareas |
Dependencias |
Tiempo |
Estado |
|
HU-07 |
Media |
Mostrar ejemplo práctico del tema en código. |
HU-06 |
2 |
Pendiente |
|
|
|
Permitir generar un nuevo ejemplo mediante IA. |
|
2 |
Pendiente |
|
HU-08 |
Alta |
Presentar una actividad práctica sobre el tema. |
HU-06 |
2 |
Pendiente |
|
HU-09 |
Alta |
Permitir el envío de la actividad completada. |
HU-08 |
2 |
Pendiente |
|
HU-10 |
Alta |
Corregir la actividad en tiempo real utilizando IA. |
HU-09 |
3 |
Pendiente |
|
|
|
Permitir reintentar la actividad si está incorrecta. |
|
3 |
Pendiente |
Sprint 3
Duración: 5 días.
|
Tabla 18. Sprint 3 |
|||||
|
ID |
Prioridad |
Tareas |
Dependencias |
Tiempo |
Estado |
|
HU-11 |
Alta |
Actualizar el puntaje y progreso del usuario. |
HU-10 |
3 |
Pendiente |
Estructura de datos
A continuación, se presenta el diagrama entidad - relación de la base de datos del prototipo.
Figura 4. Diagrama entidad – relación
Prototipos de interfaces de pantallas
Formulario de registro
En esta interfaz se muestra el formulario de registro de usuario. El usuario completa el mismo y queda registrado a la plataforma para poder empezar a interactuar con ella.
Figura 5. Prototipo registro a la plataforma
Formulario de Login
Aquellos usuarios registrados, a través de la siguiente interfaz, pueden iniciar sesión en la plataforma introduciendo su email y contraseña.
Figura 6. Prototipo ingreso a la plataforma
Pantalla de bienvenida
Es la pantalla que se muestra inmediatamente cuando el usuario ingresa a la plataforma. En la misma, se pueden observar las insignias que el mismo posee, puntuación, y temas habilitados. Desde aquí el usuario puede hacer clic sobre el tema que desea estudiar para que prosiga a las siguientes interfaces.
Figura 7. Prototipo pantalla de bienvenida
Presentación de contenido teórico
En esta interfaz se presenta en el encabezado la misma información que la anterior, pero en la parte central, el contenido teórico que debe abordar el estudiante. Una vez abordado, puede hacer clic en el botón “Ver ejemplo” para continuar con un ejemplo sobre la teoría abordada.
Figura 8. Prototipo presentación teórica de tema
Ejemplo de tema abordado
En esta interfaz se muestra en la parte central un ejemplo generado por IA. El mismo puede ser regenerado todas las veces que el estudiante necesite utilizando el botón “Regenerar”. Una vez leído el ejemplo estará en condiciones de resolver una actividad para validar sus conocimientos sobre el tema. A ella se accede mediante el botón “comenzar actividad”
Figura 9. Prototipo ejemplo de tema
Mostrar consigna de actividad
En esta interfaz podemos observar que en la parte central se muestra una consigna de actividad generada por IA. Debajo de ella se encuentra un cuadro de texto para que el estudiante pueda escribir la resolución a la misma. Una vez descripta debe presionar el boton “enviar”, para que la IA corrija la misma.
Figura 10. Prototipo consigna a resolver
Corrección de actividad
Una vez enviada la actividad, la IA corrige la misma. En caso de ser correcta debe mostrar en pantalla que la misma se encuentra aprobada. En caso de no ser correcta, debe mostrar dicho estado por pantalla y una retroalimentación correspondiente.
Figura 11. Prototipo retroalimentación de consigna a resolver
Diagrama de arquitectura
En el siguiente diagrama se puede visualizar la arquitectura del sistema llevada a cabo en el prototipado.
Se utilizó un servidor de hosting compartido de la empresa Net Service Argentina para alojar el prototipo, el cual posee implementado un servidor Web Apache que se encarga de ejecutar el aplicativo PHP y servir el contenido web a los clientes. Además, se usa un servidor MySQL que almacena los datos de la aplicación.
Figura 12. Diagrama de arquitectura
Seguridad
A continuación, se plantea en términos técnicos aquellos aspectos que hacen a la seguridad del sistema, tanto en cuanto al acceso a la aplicación, como en las políticas de respaldo de información.
Acceso a la aplicación
1. El nombre de usuario se utiliza junto con la contraseña para el inicio de sesión. El mismo debe ser único, es decir, no debe existir más de una vez en la base de datos.
2. La contraseña debe cumplir los siguientes requisitos:
a. Mínimo de 8 caracteres.
b. Tener al menos un número.
c. Tener al menos un símbolo.
3. La contraseña es encriptada utilizando la función md5 de PHP, que genera un hash de 128 bits a partir de la contraseña. Este hash se almacena en la base de datos en lugar de la contraseña original. md5 permite encriptar la contraseña sin que sea reversible, ya que es imposible recuperar la contraseña original a partir del hash generado. Además, ante contraseñas iguales genera hashes distintos, aumentando la seguridad.
4. La aplicación maneja dos perfiles, los cuales definen el nivel de acceso a determinadas funcionalidades del sistema:
a. Usuario: Perfil con acceso a las funcionalidades de la plataforma que permiten cursar, pasando por el desarrollo teórico, ejemplos y ejercicios. Así como avanzar a través de los temas habilitados y visualizar puntaje e insignias.
b. administrador: Perfil con acceso total a la plataforma, además de lor roles de perfil básico incluye gestión de usuarios, contenidos y configuración.
Política de respaldo de información
Para respaldar la información de los usuarios y del código de la aplicación, se tendrán dos copias de los datos y una del código fuente, a saber:
· Los datos de los usuarios se almacenan en la base de datos MySQL. Diariamente es respaldada por el proveedor de servicio de hosting.
· Semanalmente se descarga de forma manual el respaldo más reciente de base de datos y se almacena en un servicio de nube externo al servicio de hosting como Google Drive.
· El código fuente se mantiene en un repositorio Git privado en línea.
Cumpliendo con lo mencionado anteriormente se asegura la redundancia ante cualquier pérdida de información.
Análisis de costos
A continuación, se presenta el análisis de costo del desarrollo del sistema contemplando los perfiles necesarios a contratar:
|
Tabla 19. Análisis de costo. HR |
|||
|
Rol |
Costo mensual (ARS) |
Meses |
Totales Subtotal (ARS) |
|
Programador Frontend |
610 000 |
3 |
1 830 000 |
|
Programador Backend |
650 000 |
3 |
1 950 000 |
|
Tester |
535 000 |
2 |
1 070 000 |
|
Total del Desarrollo en Pesos Argentinos |
4 850 000 |
||
Los valores de honorarios fueron estimados en base a salarios promedio para dichos roles en Argentina según CPCIPC.
Además, se considera el siguiente costo operativos mensuales:
|
Tabla 20. Análisis de costo. Servicio de alojamiento web |
|||
|
Recurso / Servicio |
Cant. |
Proveedor |
Subtotal Mensual (ARS) |
|
Certificado SSL Ilimitado espacio en disco SSD Ilimitada transferencia mensual Ilimitadas Bases de datos 30 Cuentas de E-mail @tudominio Copias de seguridad diarias |
1 |
Net Service Argentina (Plan: Hosting Individual Ilimitado) |
2 590 |
|
API de ChatGPT |
1 |
OpenAI |
5 000 |
|
Total, Mensual en pesos argentinos |
7 590 |
||
El valor mensual del hosting compartido se ha tomado del sitio web de la empresa Net Service Argentina en Octubre del 2023.(1)
No se presentan costos de adquisición de Hardware ya que los usuarios utilizan sus dispositivos personales o ya disponibles en las instituciones educativas (PCs de escritorio, notebooks, celulares) para acceder al sistema. Se necesita 1 dispositivo por usuario que accede al sistema.
Todas las tecnologías y aplicativos utilizados para el desarrollo de este proyecto son de código abierto y/o gratuitos, por lo que, no se incurre en costos monetarios en cuanto a licenciamiento de software.
Se presentan en la siguiente tabla los recursos de software utilizados y su correspondiente sitio oficial donde pueden ser descargados gratuitamente.
|
Tabla 21. Análisis de costo. Licencias |
|
|
Recurso |
Fuente |
|
MySQL |
|
|
Apache HTTP Server |
|
|
PHP |
|
|
Tabla 22. Análisis de costo. Resumen de costos |
|
|
Costo Inicial (ARS) |
4 850 000 |
|
Costo Recurrente Mensual (ARS) |
7590 |
Análisis de riesgos
En la tabla que se presenta a continuación se detallan los riesgos existentes al llevar a cabo el proyecto, la misma describe los tipos de riesgos existentes, clasificados entre Técnicos y de Proyecto, detallando la causa raíz del problema.
|
Tabla 23. Riesgos identificados del proyecto |
|||||
|
Riesgos identificados del proyecto |
|||||
|
Id |
Tipo |
Riesgo |
Probabilidad de ocurrencia |
Momento de ocurrencia |
Nivel de impacto |
|
1 |
Proyecto |
El tiempo de desarrollo se extiende debido a la dificultad técnica del proyecto. |
Media |
A la mitad o cerca del final del desarrollo |
Alto |
|
2 |
Proyecto |
Se detectan errores en la aplicación, en el momento de testing. |
Media |
Al final del desarrollo |
Medio |
|
3 |
Proyecto |
El personal se declara técnicamente |
Baja |
A la mitad del desarrollo |
Alto |
|
|
|
incapaz de continuar con el desarrollo |
|
|
|
|
4 |
Proyecto |
Abandono del proyecto por parte de algunos miembros del personal. |
Baja |
Durante todo el desarrollo |
Alto |
|
5 |
Producto |
El producto final no despierta el interés de los usuarios finales. |
Media |
Luego de finalizado el desarrollo |
Alto |
|
6 |
Producto |
El producto final, no cumple con las expectativas luego de ser utilizado por un largo tiempo. |
Media |
Luego de finalizado el proyecto |
Alto |
|
7 |
Proyecto |
El costo real del proyecto es ampliamente superior al calculado debido a la depreciación de la moneda local. |
Alta |
A la mitad o cerca del final del desarrollo |
Alto |
De acuerdo con los riesgos identificados se ha calculado el grado de exposición teniendo en cuenta la probabilidad de ocurrencia y al impacto esperado de los mismos. A continuación, se exponen ordenando los riesgos identificados desde el grado de exposición mayor al menor.
|
Tabla 24. Análisis cuantitativo y grado de exposición |
|||
|
Extiende debido a la dificultad técnica del proyecto |
|||
|
El producto final no despierta el interés de los usuarios finales |
50 % |
5 |
2,5 |
|
El producto final, no cumple con las expectativas luego de ser utilizado por un largo tiempo |
60 % |
4 |
2,4 |
|
Se detectan errores en la aplicación, en el momento de testing |
50 % |
3 |
1,5 |
|
Abandono del proyecto por parte de algunos miembros del personal |
25 % |
4 |
1 |
|
El personal se declara técnicamente incapaz de continuar con el desarrollo |
15 % |
5 |
0,75 |
Los riesgos que tengan mayor grado de exposición, calculado en base a la probabilidad y el impacto, son los que podrían provocar los daños más significativos durante la ejecución del proyecto si llegaran a materializarse.
A continuación, se enumeran las estrategias de mitigación para cada riesgo identificado, ordenados de acuerdo a su grado de exposición. Los riesgos con los grados más altos deben recibir atención prioritaria por su potencial efecto adverso sobre el proyecto. El director del proyecto será el encargado de monitorear la presencia de estos riesgos y de implementar los planes de contingencia necesarios para reducir su impacto en caso de que ocurran.
|
Tabla 25. Plan de contingencia para los riesgos |
|
|
Plan de contingencia para los riesgos |
|
|
Riesgo |
Plan de contingencia |
|
El costo real del proyecto es ampliamente superior al calculado debido a la depreciación de la moneda local |
Hacer una nueva estimación del presupuesto lo antes posible, considerando la pérdida de valor del peso argentino en períodos previos. |
|
El tiempo de desarrollo se extiende debido a la dificultad técnica del proyecto |
Asignar una porción del presupuesto para contratar personal altamente calificado para las tareas más críticas del desarrollo, tales como el diseño y programación del software. |
|
El producto final no despierta el interés de los usuarios finales |
Conseguir opiniones de un grupo selecto de usuarios potenciales mediante la presentación de versiones parciales de la aplicación desarrolladas durante el proceso. |
|
El producto final, no cumple con las expectativas luego de ser utilizado por un largo tiempo |
Realizar un seguimiento continuo de las impresiones de los usuarios con el paso del tiempo y efectuar actualizaciones periódicas a la aplicación. |
|
Se detectan errores en la aplicación, en el momento de testing |
Posponer ligeramente la fecha de lanzamiento de la aplicación y luego seguir haciendo actualizaciones inmediatamente después del estreno para solucionar errores urgentes. |
|
Abandono del proyecto por parte de algunos miembros del personal |
Acordar anticipadamente con personal capacitado para mantenerlos en espera y contratar en caso de que se libere algún puesto. |
|
El personal se declara técnicamente incapaz de continuar con el desarrollo |
Llegar a un acuerdo previo con personal de mayor nivel técnico para tenerlos en reserva y contratarlos en caso de que esta situación ocurra. |
CONCLUSIONES
En este trabajo final de grado se planteó el desarrollo de una plataforma web gamificada para la enseñanza de programación y bases de datos utilizando inteligencia artificial. El objetivo principal fue crear una herramienta innovadora que facilitara el aprendizaje inicial de conceptos de programación de forma entretenida e interactiva.
Los objetivos planteados se han cumplido satisfactoriamente a través del proceso de prototipado realizado. Se llevó a cabo una investigación para determinar los contenidos más relevantes para una introducción a la programación. Luego se diseñaron ejercicios teóricos y prácticos adaptados a esos conceptos mediante la aplicación de técnicas de gamificación. Posteriormente se desarrolló un prototipo funcional de la plataforma web que integra los contenidos diseñados previamente. Finalmente, se incorporó la funcionalidad de inteligencia artificial para brindar ejemplos y retroalimentación personalizada a los usuarios sobre sus actividades.
De esta manera, el sistema obtenido permite validar la utilidad y factibilidad técnica de la propuesta. Los resultados alcanzados hasta el momento han sido positivos y permiten vislumbrar el impacto que tiene la plataforma web en la enseñanza inicial de programación. Desde una perspectiva profesional, este proyecto representó un desafío enriquecedor al poder aplicar conocimientos de programación, bases de datos, inteligencia artificial y diseño de interfaz de usuario. A nivel personal, ha sido una experiencia gratificante poder desarrollar una solución tecnológica innovadora que busca mejorar la educación en disciplinas clave como la programación. Se espera que en un futuro otro estudiante pueda tomar esta tesis e implementar y evaluar la plataforma en un contexto real de uso y completar su desarrollo.
REFERENCIAS BIBLIOGRÁFICAS
1. Net Services Argentina. Web hosting. https://netservicesargentina.com/web-hosting
2. Apache Software Foundation. Servidor HTTP Apache. https://httpd.apache.org/
3. CODE COMBAT. CODE COMBAT. https://codecombat.com/
4. CODE MONKEY. CODE MONKEY. https://www.codemonkey.com/
5. Coddy Learning. Coddy Learning. https://coddy.tech/
6. Consejo Profesional de Ciencias Informáticas de la Provincia de Buenos Aires. Honorarios recomendados. 2022. https://www.cpcipc.org.ar/honorarios-recomendados/
7. Materialize. Materialize. https://materializecss.com
8. MIMO. MIMO. https://mimo.org/
9. Ministerio de Educación. Competencias de educación digital. 2017. https://www.argentina.gob.ar/sites/default/files/competencias_de_educacion_digital_1.pdf
10. Ministerio de Educación. Programación y robótica: Objetivos de aprendizaje para la educación obligatoria. 2017. https://www.educ.ar/recursos/132339/programacion-y-robotica-objetivos-de-aprendizaje-para-la-educacion-obligatoria
11. Mozilla. CSS: Hojas de estilo en cascada. 2022. https://developer.mozilla.org/es/docs/Web/CSS
12. Mozilla. JavaScript. 2022. https://developer.mozilla.org/es/docs/Web/JavaScript
13. Mumuki. Mumuki. https://mumuki.io/home/
14. MySQL. MySQL. https://www.mysql.com/
15. PHP: Hypertext Preprocessor. PHP: Hypertext Preprocessor. https://www.php.net/
16. OpenAI. Introduction to the OpenAI API. 2023. https://platform.openai.com/docs/introduction
17. The PHP Group. ¿Qué es PHP? https://www.php.net/manual/en/intro-whatis.php
18. Udacity. Udacity. https://www.udacity.com/
19. Linux Foundation. Linux Foundation. https://www.linux.org/
20. World Wide Web Consortium (W3C). HTML5 differences from HTML4. 2014. https://www.w3.org/TR/html5-diff/
FINANCIACIÓN
Los autores no recibieron financiación para el desarrollo de la presente investigación.
CONFLICTO DE INTERESES
Los autores declaran que no existe conflicto de intereses.
CONTRIBUCIÓN DE AUTORÍA
Conceptualización: Martín Alejandro Gerlero.
Curación de datos: Martín Alejandro Gerlero.
Análisis formal: Martín Alejandro Gerlero.
Redacción – borrador original: Martín Alejandro Gerlero.
Redacción – revisión y edición: Martín Alejandro Gerlero.