Proyecto en Codex

Ejemplo de cómo crear una aplicación con CODEX

Prompt a Codex

Armar una Aplicación Educativa que me arme un panel de control de asistencia de estudiantes. Tiene que estar 2 opciones, por un lado que tome el archivo de excel o sino que tome el enlace de un archivo compartido de google drive de una hoja de Google sheets.

La aplicación debe permitir cargar un campo numérico que indique la Cantidad de Estudiantes del Curso para medir el porcentaje de asistencia

El Dashboard tiene que ser super profesional con indicadores bien claros.

La planilla de Cálculo va a tener 3 columnas, como voy a hacer varias versiones de esta aplicación, la primera tiene columnas definidas que son estas 3: "Marca temporal", "Dirección de correo electrónico" y "Ingrese su nombre y apellido".

Los indicadores deben ser:

Cantidad de Clases, para esto tomar de la columna "Marca temporal" las fechas que no se repiten.

Luego, Cantidad de Estudiantes por Clase, el porcentaje de asistencia, agregar gráficos de barras y circulares si es que son óptimos y claros para medir

Agregar un botón que actue como un filtro para conocer el porcentaje de estudiantes dependiendo el porcentaje que se quiera analizar

Recordá hacer todo documentado y explicando todo paso a paso

Arquitectura de la versión 1: Aplicación estática que procesa los datos dentro del navegador, ideal para GitHub Pages y sin enviar información estudiantil a un servidor propio.

La lectura local aceptará .xlsx, .xls y .csv; para Google Sheets usará una hoja pública mediante su enlace compartido.

Cada clase será una fecha única de “Marca temporal”, y
Cada correo contará una sola vez por clase para evitar duplicados accidentales.

El código está separado por responsabilidades:

index.html para la estructura,
styles.css para el diseño
app.js para lectura, validación y cálculos.

Los comentarios estarán puestos donde explican decisiones importantes; la explicación completa y reproducible quedará en README.md y en la bitácora, para que el código siga siendo profesional y legible.

Ejecutar en Codex este comando:

Start-Process -FilePath 'C:\Users\Bomba\.cache\codex-runtimes\codex-primary-runtime\dependencies\python\python.exe' -ArgumentList '-m','http.server','8765','--bind','127.0.0.1' -WorkingDirectory 'C:\Users\Bomba\Documents\Manejo de Github\dashboard-asistencia' -WindowStyle Hidden; Start-Sleep -Seconds 2; try { (Invoke-WebRequest -Uri 'http://127.0.0.1:8765/' -UseBasicParsing).StatusCode } catch { $_.Exception.Message }

Versión 1 completada

Se creó "Aula Presente", un dashboard educativo profesional compatible con GitHub Pages.

Incluye:

Importación de Excel, CSV o Google Sheets público.
Validación de las tres columnas obligatorias.
Campo para cantidad total de estudiantes.
Cálculo de clases mediante fechas únicas.
Eliminación de asistencias duplicadas por correo y fecha.
Indicadores generales de asistencia.
Gráfico de barras por clase.
Gráfico circular de asistencia promedio.
Filtro por porcentaje mínimo de asistencia.
Tabla individual de estudiantes.
Datos de ejemplo integrados.
Diseño adaptable para computadoras y celulares.

Documentación

Aplicación principal
Manual del proyecto
Bitácora paso a paso
Tutorial de publicación

Registro Git

Se creó un repositorio independiente usando la rama main.

Primer commit:

text

afb13a5 feat: crear dashboard educativo de asistencia

La aplicación pasó la revisión de sintaxis y estructura. La prueba visual automatizada no pudo completarse por un problema de conexión del navegador integrado.

Para publicarla falta crear el repositorio remoto en tu cuenta de GitHub y conectarlo con este proyecto.