Programando Pomodoro Timer | Mediateca de EducaMadrid

Vamos a ver ahora cómo podríamos componer una aplicación de temporizador Pomodoro. 00:00:04

Es una aplicación para poder ser más productivos en nuestro trabajo utilizando la técnica Pomodoro, que básicamente alterna entre 25 minutos de trabajo y 5 minutos de descanso. 00:00:09

Para ello vamos a usar diferentes herramientas, nuestra inteligencia artificial en su versión gratuita para crear todo el código y, como siempre, un editor de texto, que en este caso usamos Visual Studio Code en su versión web para no tener que instalar nada. 00:00:20

El prompt que vamos a usar para crear esta herramienta tipo Pomodoro es este. 00:00:34

Le diremos a la IA, crea una aplicación web de temporizador Pomodoro. 00:00:40

La aplicación debe tener un temporizador que alterne entre 25 minutos de trabajo y 5 de descanso, 00:00:44

permitir iniciar, pausar y reiniciar el temporizador. 00:00:48

Fijaos que le vamos explicando las características que queremos que tenga de forma precisa. 00:00:50

Le pediremos también que muestre una notificación visual y incluso que reproduzca un sonido cuando el tiempo se agote. 00:00:56

Que lleve una cuenta de cuántos pomodoros o ciclos hemos completado y que tenga un diseño atractivo y responsivo con TELUIN CSS. Aquí podríamos ponerle, por ejemplo, que tenga un diseño atractivo, colorido y que use emojis de gran tamaño. Por ejemplo, si nos gustan, pues los podemos usar. 00:01:02

Creemos que, y a partir de aquí que incluía una breve explicación de la técnica Pomodoro y lo que siempre ponemos en este caso para que nos haga todo el código en un solo archivo, que cargue las librerías que necesite, en este caso Tailwind porque permite poner muchas cosas en poca extensión de código y en este caso lo cargue desde un CDN, es decir, desde una URL que esté pública online para que no tengamos que preocuparnos de compilar al menos en estas primeras versiones que estamos creando. 00:01:20

Y finalmente que nos dé instrucciones y que genere todo el código completo y se asegure que lo podamos ejecutar haciendo simplemente doble clic con un navegador. 00:01:46

Vamos a ver que crea y ya está empezando a trabajar en lo que nosotros estamos componiendo. 00:01:54

Ya ha acabado de generar el código, ahora nos está explicando las instrucciones que debemos seguir. 00:02:02

Como siempre, copiaremos, nos iremos a nuestro editor, crearemos un nuevo archivo de texto, pegaremos y se va a poner colorido. 00:02:06

y ya está al cabo de un par de segundos vamos a guardarlo archivo guardar como y vamos a crear 00:02:13

una carpeta que se llame pomodoro app y aquí dentro pondremos pomodoro versión ya los que 00:02:20

siempre pongo los nombres y acentos es manías de alguien que ya lleva algunos años haciendo esto 00:02:28

los sistemas válidos de hace años tenían problemas con nombres de archivo que ponían caracteres 00:02:34

especiales hoy en día podemos ponerle acentos y escribir todo perfecto y vamos a ver qué tal 00:02:39

lo ha hecho perfecto voy a abrir y aquí lo tenemos como de la timer nos dice la tenía 00:02:43

como doro altera 25 minutos de trabajo con 5 minutos de descanso completa 4 pomodoros y 00:02:49

toma un descanso más largo vamos a ver qué tal lo inició y automáticamente empieza a contar entiendo 00:02:54

que lo puedo reiniciar y que de momento no hemos completado ningún ciclo para ver cómo sería 00:03:00

podemos intentar editar el código para poder ver cómo funcionaría al final si no diréis bueno no 00:03:05

Quiero esperar 25 minutos para ver qué hace. Pues fijaros que mirando el código, buscando aquí arriba, pone 25 minutos en segundos y 5 minutos en segundos. 00:03:10

Pues algo me dice que si quitamos este por 60, automáticamente será mucho menos tiempo. De hecho, según 10, asumimos que los 25 minutos pasarán a ser solamente 10 segundos. 00:03:18

Vamos a ver si es así. 10 segundos, efectivamente, con lo cual vamos a ver qué pasará si llegamos al final. 00:03:34

Aquí abrimos completo los 25 minutos y empezaría los 5 minutos de periodo de descanso. 00:03:40

Voy a editar también esto y pondremos que el pomodoro dure 7 segundos en el ciclo largo y 3 en lo que serían los 5 minutos de descanso. 00:03:48

Vamos a verlo. Lo he recargado, lo voy a iniciar. 00:04:00

Estamos trabajando 25 minutos muy intensos y automáticamente vienen esos 3. 00:04:04

Y ahora ya ha vuelto a empezar el siguiente ciclo Pomodoro. Fijaros que no está haciendo un ruido, un sonido. Si miramos el código, esto lo vuelvo a dejar como estaba, significa que funciona porque hemos visto, hemos validado que después del ciclo de las dos cosas sumadas pasa algo, que es que se cuenta el ciclo como hecho. 00:04:11

Vamos a ver el tema del sonido. Normalmente, si hubiera algo relacionado con sonido, aquí está, debería tener algo de play. Fijaros que pone alarmSound.play y seguramente si buscamos, ¿dónde está? Fijaros que dice aquí que esta variable de alarmSound está intentando buscar algo en el código y aquí está, fijaros. 00:04:31

Al final lo encontramos. Hemos visto que hay un audio que ha puesto, que está en internet, podríamos abrirlo para ver si funciona, que era un audio, pero no tenía el acceso. Esto se solucionaría buscando un audio alternativo, un sonido de alarma que encontremos por internet o que tengamos colocado en algún sitio, para incluirlo, cambiar la dirección y ver si funciona. 00:04:57

Obviamente una última alternativa sería pedírselo a la IA, le podríamos decir genera una variante del código o cambia el código para que los 75 minutos duren solo 10 segundos y los 5 minutos duren pues 3 segundos para ver que funciona y como ya sabemos que el audio no funciona porque lo hemos validado le diríamos cambia el audio por esta dirección que he encontrado un audio que funciona y que funciona mejor y nos generaría la nueva versión del código. 00:05:17

Y con esto podremos crear aplicaciones de productividad sencillitas, pero que funcionan. No tenemos que pagar, no hay anuncios y la podemos compartir con quien queramos. Y con esto me voy a activar un pomodoro para hacer la siguiente clase sobre algo que honestamente creo que es muy interesante y más útil de lo que nos pensamos a veces. 00:05:42