En mi trabajo actual solíamos cobrar por hora. Usábamos una aplicación de time tracking para llevar la gestión a lo largo del mes de las horas que trabajábamos. Después pasamos a modalidad “sueldo fijo” y ya no tuvimos que volver a usar MinuteDock…

La semana pasada empecé un proyecto en paralelo donde sí tengo que reportar las horas que le dedique. Así que me puse a buscar alguna alternativa a MinuteDock pero más sencilla. Buscaba algo que simplemente “trackee” las horas, sin asignarlas a un proyecto, sin necesitar una cuenta de usuario, sin tener que pagar nada.

Después de una búsqueda rápida, todos los resultados pedían mi correo electrónico, pagar una cuota mensual, o crearme una cuenta más en un servicio web (tampoco es que haya hecho una búsqueda demasiado intensa). Yo solo quería algo que registrara el tiempo que paso dedicado a una tarea y nada más.

Supuse que no podría ser muy difícil hacer algo así en JavaScript para tener abierto en una pestaña del navegador, así que lo empecé a construir. La primera versión me llevó apenas un rato, podrán imaginar su complejidad y funcionalidad… Pero me gustó la idea de tener una aplicación únicamente para esto, así que dediqué parte del fin de semana a seguir desarrollándola.

Time Tracker - Primera versión...

Time Tracker – Primera versión…

Tengo poca experiencia con JavaScript, y estoy en campaña para cambiar eso, así que decidí aprovechar la oportunidad para desarrollar un poco más. Fue así que terminé creando Super Time Tracker, una aplicación que sirve solamente para gestionar tiempo en minutos y horas.

No necesita registro, guardar datos, ni siquiera un servidor. Es una aplicación HTML + CSS + JavaScript puro, sin ningún framework. Usa el storage local del navegador para guardar las tareas (hay que limpiar el caché para borrarlo) y para tratar de sincronizar el reloj. Al no ir contra ningún servidor, la app tiene que estar abierta en alguna pestaña para que el tiempo vaya avanzando.

Los datos pueden ser “exportados” (en el DOM mismo) a JSON y CSV. La idea es que no tenga mucho más complejidad que gestionar minutos y horas de una tarea y poder copiar y pegar la información de eso donde la precisemos. De todas formas puede que le agregue alguna funcionalidad más a medida que vaya surgiendo la necesidad. ¡Los invito a probarlo!

Super Time Tracker

Super Time Tracker

Por ahora, además de mis pruebas, sólo ha pasado por dos usuarios (que yo sepa). Ya tengo al menos dos ideas nuevas para implementar, una de las cuales es crear otra aplicación para procesar los datos. Pero manteniendo la filosofía de que cada una haga una cosa bien nada mas.

Una aplicación más donde experimentar y aprender con tecnologías web. El código está disponible en picandocodigo/supertimetracker.
Próximamente versión para Firefox OS 🙂

14 comentarios en este post

Feed de comentarios
  1. Avatar

    Ezequiel 3 febrero. 2014 - 17:51

    Está bárbaro. Lo único que se me ocurre a primera instancia es que no queda muy claro como “comenzar” el timer, le hice click por casualidad al numero y empezó a correr. Yo tal vez le pondría un boton de start y de stop, o a lo sumo que al pasar por el timer que el cursor quede como un puntero para que parezca clickeable. Salut!

    Google Chrome 32.0.1700.77 Mac OS
    • Avatar

      Fernando 3 febrero. 2014 - 19:46

      ¡Gracias por el feedback!

      Te hice caso y puse el cursor con puntero cuando le pasas por arriba al contador. Falta poder editar las entradas capaz o borrarlas al menos. Por un lado lo quiero mantener bien simple pero a la vez como que le falta algo de funcionalidad básica 😛

      ¡Saludos!

      Debian IceWeasel 28.0a2 GNU/Linux 64 bits
      • Avatar

        despino 4 febrero. 2014 - 20:30

        Estoy de acuerdo con Ezequiel: capaz que faltaría hacer más explícito que el timer arranca al hacer click en el mismo. Se me ocurre que agregando un “Start!” en ese div, abajo del timer, resolvería el tema.

        Salvando eso, es genial!

        Firefox 26.0 GNU/Linux 64 bits
  2. Avatar

    Juani 13 febrero. 2014 - 20:59

    Hola, lo estuve probando y está muy bueno!

    Encontré una pequeña cosita, si tengo un tiempo guardado, lo borro y vuelvo a guardar otro tiempo, el tiempo anterior que ya borré sigue apareciendo en la tabla hasta refrescar la página.

    Descargué el código desde github para ver si me daba cuenta que podía ser. En la función saveEntry() veo que usas insertAdjacentHTML para agregar las entradas a la tabla y parece que lo que hace es meterlas después del <tbody id=results”></tbody> y no adentro. Una idea que se me ocurre, es usar directamente innerHTML para meter las entradas en el <tbody> cambiando
    document.getElementById(“results”).insertAdjacentHTML(“afterend”, printEntry(entry));

    Por algo como
    document.getElementById(“results”).innerHTML = document.getElementById(“results”).innerHTML + printEntry(entry);

    Debe haber alguna forma más linda de hacerlo 😛
    También habría que cambiar lo mismo en la función getTable(), adentro del for, para que las entradas guardadas en local sean agregadas al <tbody> de la misma forma cuando arranca la aplicación.

    Espero que sigas implementando nuevas ideas! Saludos!

    Google Chrome 31.0.1650.63 Ubuntu 64 bits
    • Avatar

      Fernando 18 febrero. 2014 - 13:55

      ¡Gracias por el “code review” Juani!

      Lo voy a revisar y corrijo eso. Ideas a futuro son revisar el diseño en primer lugar, y después ver de implementar algo por otro lado como para mostrar los datos de manera amigable.

      ¡Saludos!

      Debian IceWeasel 29.0a2 GNU/Linux 64 bits
  3. Avatar

    carlos 10 febrero. 2018 - 22:28

    Hola Fernando

    Me gustaría hacerte una pregunta, pero veo que los ultimos comentarios son de 2014.., si aún estas activo mandame un correo.

    Gracias

    Un saludo

    Google Chrome 64.0.3282.140 Windows NT
  1. WordPress Proyectos de fin de semana – Notificador de temperatura y “Control remoto” web | Picando Código | 9 marzo. 2014 - 16:00

    […] acuerdan de Super Simple Time Tracker? Este fin de semana no trabajé en él, pero desde que lo publiqué por primera vez tuvo un cambio […]

Dejar un comentario

Notificarme los nuevos comentarios por correo electrónico. Tambien puedes suscribirte sin comentar.

Toasty!