Guías

Cómo crear una app de control de horas: temporizadores, hojas de horas e informes

Una app de control de horas registra quién trabajó en qué, durante cuánto tiempo y si ese tiempo se puede facturar. Para crear una necesitas clientes y proyectos con los que asociar el tiempo, un temporizador que sobreviva al cierre de la pestaña del navegador, una forma de añadir y corregir registros a mano, una hoja de horas semanal e informes que conviertan los registros en totales. Un generador de apps con IA puede producir una primera versión funcional a partir de un prompt claro. Las decisiones que importan son las de las normas: el redondeo, quién puede editar qué, cuándo se bloquea una semana y qué se considera facturable.

Decide para qué vas a usar el tiempo registrado

La misma app cambia según el motivo por el que existe:

  • Facturar a clientes. Horas por cliente, una tarifa por persona o por proyecto y una exportación limpia para las facturas. Lo más importante son la precisión y un registro de auditoría.
  • Nóminas de personal por horas. Fichaje de entrada y salida, pausas, reglas de horas extra y aprobación por parte del responsable. Se aplica la normativa laboral local, así que revisa qué registros estás obligado a conservar.
  • Entender en qué se va el tiempo. Visión personal o de equipo, estimaciones frente a lo real. La rapidez al registrar importa más que los flujos de aprobación.

Elige una como trabajo principal para la primera versión. El control de horas de un autónomo y un reloj de turnos para un almacén comparten un temporizador y poco más.

Qué necesita la app

Datos

TablaCampos clave
ClientesNombre, tarifa horaria por defecto, activo sí/no
ProyectosCliente, nombre, presupuesto en horas (opcional), facturable por defecto sí/no
Tareas o categoríasProyecto, nombre (diseño, reuniones, soporte); opcional al principio
Registros de tiempoPersona, proyecto, tarea, hora de inicio, hora de fin, duración, nota, facturable sí/no, estado (borrador, enviado, aprobado), facturado sí/no
PersonasNombre, correo, rol, tarifa de coste o tarifa de venta

Guarda la hora de inicio y de fin en cada registro y calcula la duración a partir de ellas. Los registros introducidos como «2 h 15 min» sin horas pueden guardar solo la duración, pero siempre con una fecha.

Páginas

  • Temporizador y hoy: un botón grande de inicio y parada, un selector de proyecto y los registros de hoy debajo.
  • Vista semanal: una cuadrícula con los proyectos en filas y los días en columnas, donde la gente escribe las horas directamente. Muchas personas la prefieren a los temporizadores.
  • Informes: horas por cliente, proyecto y persona en un rango de fechas, con el reparto entre facturable y no facturable, y exportación a CSV.
  • Administración: gestionar clientes, proyectos, personas y tarifas.

Permisos

Antes de construir, deja por escrito quién puede hacer qué:

  • Las personas ven y editan sus propios registros.
  • Los responsables ven los registros de su equipo y aprueban las semanas.
  • Solo los administradores cambian las tarifas, e idealmente solo ellos pueden verlas.
  • Nadie edita un registro que ya está aprobado o facturado, salvo que un administrador lo reabra.

Esa última regla es la que hace fiables los informes. Nuestra guía sobre añadir inicio de sesión a tu app cubre el acceso, y control de acceso basado en roles cubre los roles.

Decisiones y compensaciones

Temporizador, registro manual o ambos

Los temporizadores son precisos si la gente se acuerda de pulsarlos, lo que no siempre ocurre. El registro manual es rápido para quien rellena la semana el viernes. La mayoría de los equipos necesitan ambos, y una forma de editar un registro de temporizador a posteriori. Si solo vas a construir uno, construye la cuadrícula semanal: es más sencilla y cubre el caso de «se me olvidó pulsar el temporizador».

Dónde vive el temporizador en curso

Un temporizador que cuenta en el navegador pierde todo cuando se cierra la pestaña. Guarda la hora de inicio en la base de datos cuando alguien pulsa inicio, y muestra el tiempo transcurrido restando esa hora de la actual. Así el temporizador sigue funcionando al recargar, en otro portátil o en el móvil. Decide si una persona puede tener dos temporizadores a la vez. Normalmente la respuesta es no: al iniciar uno nuevo se detiene el anterior.

Redondeo

Las reglas habituales redondean cada registro hacia arriba al múltiplo de 6, 15 o 30 minutos más cercano. Guarda las horas exactas en la base de datos y aplica el redondeo solo en los informes y las facturas. Muestra ambas cifras en los informes para que nadie se sorprenda.

Bloqueo y aprobaciones

Sin bloqueo, las horas facturadas del mes pasado pueden cambiar después de haber enviado la factura. Un modelo sencillo: la persona envía una semana, un responsable la aprueba y los registros aprobados pasan a solo lectura. Si facturas desde la app, marca los registros como facturados para que no se puedan cobrar dos veces.

Zonas horarias y medianoche

Guarda las horas en UTC y muéstralas en la zona horaria de cada persona. Decide a qué día pertenece un registro que va de las 23:00 a la 01:00. La respuesta habitual es el día en que empezó.

Un primer prompt que funciona

Crea una app de control de horas para un estudio de diseño de seis personas. Datos: clientes (nombre, tarifa horaria), proyectos (cliente, nombre, horas de presupuesto) y registros de tiempo (persona, proyecto, inicio, fin, nota, facturable sí/no, estado borrador/enviado/aprobado). Páginas: una página Hoy con un temporizador de inicio y parada y un selector de proyecto que guarda la hora de inicio en la base de datos para que el temporizador sobreviva a una recarga; una página Semana con los proyectos como filas y de lunes a domingo como columnas, donde la gente puede escribir las horas directamente; una página de Informes con las horas por cliente, proyecto y persona para un rango de fechas, separadas en facturables y no facturables, con exportación a CSV; y una página de Administración para clientes, proyectos y personas. Solo puede haber un temporizador activo por persona. Los registros aprobados no se pueden editar. Guarda las horas en UTC y muéstralas en la zona horaria del usuario. Diseño limpio, rápido y usable con teclado.

El prompt nombra las tablas, las páginas, el comportamiento del temporizador y la regla de bloqueo, que son las cosas que una IA adivinaría si no se las dices.

Pasos de construcción

  1. Proyectos y registros manuales primero. Clientes, proyectos, un formulario para añadir un registro y una lista. Asegúrate de que los totales cuadran.
  2. Temporizador. Inicio, parada, un solo temporizador activo por persona y hora de inicio guardada. Pruébalo: inicia un temporizador, cierra la pestaña y vuelve a abrirla.
  3. Cuadrícula semanal. Escribir horas en una celda crea o actualiza un registro.
  4. Inicio de sesión y roles. Añádelos antes de que personas reales usen la app, para que nadie vea tarifas o registros ajenos por accidente.
  5. Envío y aprobación. Envío semanal, aprobación por el responsable y solo lectura tras la aprobación.
  6. Informes y exportación. Rango de fechas, agrupación, reparto facturable y CSV.
  7. Ganchos de tarifas y facturación si facturas a clientes. Mantén la creación de facturas en un paso o una app aparte; consulta cómo crear una app de facturación.
  8. Prueba los casos límite. Un registro que cruza la medianoche, una semana con cambio de hora, dos temporizadores iniciados desde dos dispositivos, editar un registro aprobado.

Errores habituales

  • Contar el tiempo solo en el navegador. Funciona en la demo y pierde horas en el uso real.
  • Redondear los valores guardados. Nunca recuperarás la hora exacta.
  • Sin bloqueo de semanas aprobadas. Los informes dejan de coincidir con las facturas.
  • Que todos vean las tarifas de todos. Oculta las tarifas por rol desde el primer día.
  • Demasiados campos obligatorios. Si registrar el tiempo tarda más de unos segundos, la gente deja de hacerlo y los datos se vuelven ficción. Haz opcionales la tarea y la nota al principio.
  • Convertir el control de horas en un gestor de proyectos completo. Mantén los proyectos como simples etiquetas. Si necesitas tareas, tableros y plazos, eso es una herramienta de gestión de proyectos, una construcción aparte.

Cuándo es mejor una herramienta de control de horas ya hecha

Si tu equipo necesita un temporizador, una vista semanal e informes, los productos de control de horas dedicados ya hacen esto muy bien. Además incluyen cosas que requieren mucho trabajo: apps de escritorio y móvil, detección de inactividad, integraciones con calendarios y otras herramientas, y recordatorios para rellenar las hojas de horas. Para nóminas por horas, una herramienta hecha para ello gestionará las pausas, las horas extra y el registro de datos de forma más segura que una app personalizada de primera versión.

Constrúyela tú cuando tus reglas no encajen, cuando quieras vincular las horas con datos que ya guardas (trabajos, órdenes de trabajo, minutas, facturas), cuando el precio por puesto de un equipo grande se dispare o cuando el control de horas sea solo una parte de una herramienta interna más amplia. Nuestra guía sobre construir frente a comprar software explica la disyuntiva, y si tus horas viven ahora en una hoja compartida, consulta cómo convertir una hoja de cálculo en una app.

Cómo construirla con Mythex

En Mythex describes el control de horas en el chat y el agente lo construye en una vista previa en directo. Añade una base de datos Postgres dedicada cuando hace falta guardar registros, y puedes pedirlo directamente o escribir /database. La guía de casos de uso de herramientas internas de la documentación sugiere elegir un paso doloroso para la primera versión, algo que encaja aquí: empieza con los registros y la cuadrícula semanal, y luego añade temporizadores y aprobaciones.

El inicio de sesión para tu equipo es algo que añades con tu propio enfoque de autenticación (receta para añadir inicio de sesión). Las cuentas de Mythex son para quienes construyen la app, no para quienes la usan. Cuando el flujo principal funcione, /test hace que el agente recorra la vista previa (iniciar un temporizador, añadir un registro, generar un informe) e informe de lo que falla. Para tener un punto de partida visual, echa un vistazo a las plantillas de apps.

Preguntas

¿Qué funciones necesita una app de control de horas?

Una lista de clientes y proyectos, un temporizador de inicio y parada, una forma de añadir o corregir registros a mano, una vista semanal de hojas de horas y un informe de horas por proyecto y persona. Las aprobaciones, las tarifas facturables y las exportaciones vienen después.

¿Cómo evito perder tiempo de un temporizador cuando se cierra el navegador?

Guarda la hora de inicio en la base de datos en cuanto se pulsa el temporizador, y calcula la duración en curso a partir de esa hora guardada. Así, cerrar la pestaña, recargar la página o cambiar de dispositivo no hace perder nada.

¿Deben redondearse las horas?

Guarda las horas exactas de inicio y fin y aplica el redondeo solo en los informes y las facturas. Así puedes cambiar la regla de redondeo más adelante sin reescribir el historial.

¿Merece la pena crear mi propio control de horas?

Normalmente solo si tus normas son poco habituales o quieres vincular las horas a otros datos que ya guardas, como trabajos, clientes o facturas. Para temporizadores e informes sencillos, un control de horas ya hecho es más barato y rápido.

Mythex · Pricing · Crea lo que quieras con IA · Plantillas de sitios web y apps · Mythex comparado · Glosario de creación de apps con IA · Herramientas gratuitas para crear apps con IA · English

English አማርኛ العربية Български বাংলা Bosanski Català Čeština Dansk Deutsch Ελληνικά Español Eesti فارسی Suomi Français Français (Canada) ગુજરાતી हिन्दी Hrvatski Magyar Հայերեն Bahasa Indonesia Íslenska Italiano 日本語 ქართული Қазақ тілі ಕನ್ನಡ 한국어 Lietuvių Latviešu Македонски മലയാളം Монгол मराठी Bahasa Melayu မြန်မာ Norsk bokmål Nederlands ਪੰਜਾਬੀ Polski Português (Brasil) Português (Portugal) Română Русский Slovenčina Slovenščina Soomaali Shqip Srpski Svenska Kiswahili தமிழ் తెలుగు ไทย Tagalog Türkçe Українська اردو Tiếng Việt 简体中文 繁體中文(香港) 繁體中文(台灣)