Semana 5. Implementación de la Sonda de Tecleo (Typing Probe)

Tras comprobar el correcto funcionamiento de la sonda de ejecución, esta semana me he centrado en la sonda de tecleo. La idea general es monitorizar los intervalos reales de tiempo que el alumno pasa escribiendo código en el editor. Para no saturar el servidor con peticiones por cada pulsación de tecla, se envía un evento de “start_typing” al inicio, y un evento de “stop_typing” solo cuando se detectan 5 segundos de inactividad.

El flujo de comunicación es el siguiente:

1. Acción del Usuario: El estudiante comienza a escribir código en el editor web.
2. Detección en el IDE: El submódulo jderobot-ide-interface detecta los cambios de texto en vivo y emite el evento onCodeChange.
3. Control de Tiempos en React: El componente ExerciseContainer.tsx recibe el evento, actualiza el estado de escritura y arranca o reinicia un temporizador (setTimeout) de 5 segundos.
4. Emisión de la Sonda: Cuando se inicia la escritura o expira el temporizador, la función sendTypingProbe exportada en api.ts recoge las marcas de tiempo exactas y lanza la petición HTTP POST autenticada.
5. Recepción y Persistencia: Django (views.py) procea el evento y lo almacena de forma definitiva en la base de datos mediante el modelo CodeTypingProbe (models_probe.py).

   Archivos involucrados

   • Frontend: ExerciseContainer.tsx, api.ts y el submódulo jderobot-ide-interface.
   • Backend: urls.py, views.py, models_probe.py.

Funcionamiento y resolución de errores

El mayor reto arquitectónico estuvo en el frontend. Inicialmente, al intentar realizar la petición directamente desde ExerciseContainer.tsx utilizando fetch plano, nos volvimos a topar con el error 403 Forbidden. Al intentar replicar el uso de Axios directamente en el contenedor, surgió un error en tiempo de ejecución: TypeError: axiosExtra is not a function, debido a problemas de ámbito e importación de módulos.

La solución definitiva consistió en mantener la arquitectura limpia: dejamos toda la lógica de control de tiempos (los useRef y setTimeout) en ExerciseContainer.tsx, conectada al evento onCodeChange que nos expone jderobot-ide-interface. Toda la responsabilidad de comunicación HTTP se delegó exportando una nueva función sendTypingProbe en api.ts. Al aprovechar el entorno de api.ts donde axiosExtra() ya funciona correctamente, logramos que las peticiones viajen firmadas de manera segura, manteniendo el componente de React limpio de lógica de red y obteniendo un flujo continuo de respuestas HTTP 201 en Django.