1
00:00:04,400 --> 00:00:09,740
Vamos a ver ahora cómo podríamos componer una aplicación de temporizador Pomodoro.

2
00:00:09,740 --> 00:00:19,960
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.

3
00:00:20,140 --> 00:00:34,140
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.

4
00:00:34,399 --> 00:00:40,619
El prompt que vamos a usar para crear esta herramienta tipo Pomodoro es este.

5
00:00:40,939 --> 00:00:43,920
Le diremos a la IA, crea una aplicación web de temporizador Pomodoro.

6
00:00:44,020 --> 00:00:48,359
La aplicación debe tener un temporizador que alterne entre 25 minutos de trabajo y 5 de descanso,

7
00:00:48,500 --> 00:00:50,840
permitir iniciar, pausar y reiniciar el temporizador.

8
00:00:50,840 --> 00:00:55,560
Fijaos que le vamos explicando las características que queremos que tenga de forma precisa.

9
00:00:56,039 --> 00:01:02,079
Le pediremos también que muestre una notificación visual y incluso que reproduzca un sonido cuando el tiempo se agote.

10
00:01:02,079 --> 00:01:20,579
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.

11
00:01:20,579 --> 00:01:46,040
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.

12
00:01:46,040 --> 00:01:54,260
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.

13
00:01:54,739 --> 00:02:02,140
Vamos a ver que crea y ya está empezando a trabajar en lo que nosotros estamos componiendo.

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

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

16
00:02:13,599 --> 00:02:20,379
y ya está al cabo de un par de segundos vamos a guardarlo archivo guardar como y vamos a crear

17
00:02:20,379 --> 00:02:28,539
una carpeta que se llame pomodoro app y aquí dentro pondremos pomodoro versión ya los que

18
00:02:28,539 --> 00:02:34,379
siempre pongo los nombres y acentos es manías de alguien que ya lleva algunos años haciendo esto

19
00:02:34,379 --> 00:02:39,039
los sistemas válidos de hace años tenían problemas con nombres de archivo que ponían caracteres

20
00:02:39,039 --> 00:02:43,340
especiales hoy en día podemos ponerle acentos y escribir todo perfecto y vamos a ver qué tal

21
00:02:43,340 --> 00:02:49,460
lo ha hecho perfecto voy a abrir y aquí lo tenemos como de la timer nos dice la tenía

22
00:02:49,460 --> 00:02:54,379
como doro altera 25 minutos de trabajo con 5 minutos de descanso completa 4 pomodoros y

23
00:02:54,379 --> 00:03:00,560
toma un descanso más largo vamos a ver qué tal lo inició y automáticamente empieza a contar entiendo

24
00:03:00,560 --> 00:03:05,659
que lo puedo reiniciar y que de momento no hemos completado ningún ciclo para ver cómo sería

25
00:03:05,659 --> 00:03:10,699
podemos intentar editar el código para poder ver cómo funcionaría al final si no diréis bueno no

26
00:03:10,699 --> 00:03:18,919
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.

27
00:03:18,919 --> 00:03:33,919
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.

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

29
00:03:40,699 --> 00:03:48,979
Aquí abrimos completo los 25 minutos y empezaría los 5 minutos de periodo de descanso.

30
00:03:48,979 --> 00:03:59,960
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.

31
00:04:00,060 --> 00:04:02,840
Vamos a verlo. Lo he recargado, lo voy a iniciar.

32
00:04:04,840 --> 00:04:11,400
Estamos trabajando 25 minutos muy intensos y automáticamente vienen esos 3.

33
00:04:11,400 --> 00:04:31,500
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.

34
00:04:31,500 --> 00:04:57,100
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.

35
00:04:57,100 --> 00:05:17,800
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.

36
00:05:17,800 --> 00:05:42,199
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.

37
00:05:42,199 --> 00:06:00,100
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.