Proyecto de Fin de Semana: Super Simple Time Tracker
Publicado el 3 de febrero de 2014En 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…
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
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-
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 […]
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!
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!
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!
Fernando 6 febrero. 2014 - 18:27
¡Gracias! Siento como resistencia a agregar un botón de start por lo minimalista del diseño, pero puedo llegar a agregarlo eventualmente… 😛
Federico 4 febrero. 2014 - 00:02
excelente, esto tan simple me salva la vida, en mi laburo, gracias !
Fernando 4 febrero. 2014 - 10:35
¡Buenísimo! No voy a ser el único usuario entonces 🙂
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!
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!
Jose 25 febrero. 2014 - 12:26
Hola Fernando,
Muy buena app, yo me ví en la misma situación y decidí crear una web app con laravel, https://github.com/jruzafa/TimeTracker espero que te sirva 🙂
saludos.
Fernando 26 febrero. 2014 - 10:41
¡Buenísimo! ¿Lo tenés levantado en algun sitio?
Jose 15 septiembre. 2014 - 06:14
Ahora mismo no, si quieres verlo monto un droplet y le hechas una vistazo
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
Fernando 11 febrero. 2018 - 20:09
¡Correo enviado!
Tanto este blog como el proyecto y yo estamos aún activos en internet…