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

2
00:00:04,980 --> 00:00:09,019
Es una aplicación para poder ser más productivos en nuestro trabajo utilizando la técnica Pomodoro,

3
00:00:09,099 --> 00:00:11,740
que básicamente alterna entre 25 minutos de trabajo y 5 minutos de descanso.

4
00:00:11,740 --> 00:00:16,339
Para ello vamos a usar diferentes herramientas, nuestra inteligencia artificial en su versión gratuita para crear todo el código

5
00:00:16,339 --> 00:00:21,199
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.

6
00:00:21,500 --> 00:00:25,539
El prompt que vamos a usar para crear esta herramienta tipo Pomodoro es este.

7
00:00:25,699 --> 00:00:27,719
Le diremos a AIA, crea una aplicación web de temporizador Pomodoro.

8
00:00:27,719 --> 00:00:30,679
La aplicación debe tener un temporizador que alterne entre 25 minutos de trabajo y 5 de descanso

9
00:00:30,679 --> 00:00:32,340
Permitir iniciar, pausar y reiniciar el temporizador

10
00:00:32,340 --> 00:00:35,500
Fijaos que le vamos explicando las características que queremos que tenga de forma precisa

11
00:00:35,500 --> 00:00:37,140
Le pedimos también que muestre una notificación visual

12
00:00:37,140 --> 00:00:39,840
Y incluso que reproduzca un sonido cuando el tiempo se agote

13
00:00:39,840 --> 00:00:42,259
Que lleve una cuenta de cuántos pomodoros o ciclos hemos completado

14
00:00:42,259 --> 00:00:44,359
Y que tenga un diseño atractivo y responsivo con Telo y CSS

15
00:00:44,359 --> 00:00:47,640
Aquí podríamos ponerle, por ejemplo, que tenga un diseño atractivo, colorido

16
00:00:47,640 --> 00:00:50,320
Y que use emojis de gran tamaño

17
00:00:50,320 --> 00:00:52,200
Por ejemplo, si nos gustan, pues los podemos usar

18
00:00:52,200 --> 00:00:54,899
Tenemos que, y a partir de aquí, que incluya una breve explicación de la técnica pomodoro

19
00:00:54,899 --> 00:00:58,799
y lo que siempre ponemos en este caso para que nos haga todo el código en un solo archivo,

20
00:00:58,979 --> 00:01:02,780
que cargue las librerías que necesite, en este caso Telwin porque permite poner muchas cosas en poca extensión de código

21
00:01:02,780 --> 00:01:06,120
y en este caso lo cargue desde un CD, es decir, desde una URL que esté pública online

22
00:01:06,120 --> 00:01:09,140
para que no tengamos que preocuparnos de compilar al menos en estas primeras versiones que estamos creando

23
00:01:09,140 --> 00:01:11,400
y finalmente que nos dé instrucciones y que genere todo el código completo

24
00:01:11,400 --> 00:01:14,620
y se asegure que lo podamos ejecutar haciendo un siguiente doble clic con un navegador.

25
00:01:14,939 --> 00:01:19,859
Vamos a ver que crea y ya está empezando a trabajar en lo que nosotros estamos componiendo.

26
00:01:19,859 --> 00:01:22,620
Ya ha acabado de generar el código, ahora nos está explicando las instrucciones que debemos seguir,

27
00:01:22,620 --> 00:01:24,680
como siempre, copiaremos, nos iremos

28
00:01:24,680 --> 00:01:26,640
a nuestro editor, crearemos un nuevo archivo de texto, pegaremos

29
00:01:26,640 --> 00:01:28,659
y se va a poner colorido y ya está, al cabo de un par de segundos

30
00:01:28,659 --> 00:01:30,780
vamos a guardarlo, archivo, guardar como

31
00:01:30,780 --> 00:01:32,540
y vamos a crear una carpeta

32
00:01:32,540 --> 00:01:34,280
que se llame Pomodoro App

33
00:01:34,280 --> 00:01:35,879
y aquí dentro pondremos Pomodoro

34
00:01:35,879 --> 00:01:38,459
versión 1, fijaos que siempre pongo los nombres

35
00:01:38,459 --> 00:01:40,400
en acentos, es manías de alguien

36
00:01:40,400 --> 00:01:42,400
que ya lleva algunos años haciendo esto, los sistemas de archivos de hace años

37
00:01:42,400 --> 00:01:43,980
tenían problemas con nombres de archivos que ponían

38
00:01:43,980 --> 00:01:46,480
carácteres especiales, hoy en día podemos ponerle acentos y escribir todo perfecto

39
00:01:46,480 --> 00:01:48,599
vamos a ver que tal lo ha hecho, perfecto

40
00:01:48,599 --> 00:01:49,939
voy a abrir y aquí lo tenemos

41
00:01:49,939 --> 00:01:52,519
Pomodoro Timer, nos dice la técnica Pomodoro, altera 25 minutos de trabajo

42
00:01:52,519 --> 00:01:54,599
con 5 minutos de descanso, completa 4 pomodoros

43
00:01:54,599 --> 00:01:56,400
y toma un descanso más largo, vamos a ver que tal

44
00:01:56,400 --> 00:01:57,980
lo inicio y automáticamente empieza a contar

45
00:01:57,980 --> 00:02:00,579
entiendo que lo puedo reiniciar y que de momento no hemos completado

46
00:02:00,579 --> 00:02:02,260
ningún ciclo, para ver como sería

47
00:02:02,260 --> 00:02:04,579
podemos intentar editar el código para poder ver como funcionaría

48
00:02:04,579 --> 00:02:06,599
pero al final si no, diréis, bueno, no quiero esperar 25 minutos para ver que hace

49
00:02:06,599 --> 00:02:08,020
pues fijaros que mirando el código

50
00:02:08,020 --> 00:02:10,319
buscando aquí arriba pone 25 minutos en segundos

51
00:02:10,319 --> 00:02:12,340
y 5 minutos en segundos, pues algo me dice que

52
00:02:12,340 --> 00:02:14,280
si quitamos este por 60

53
00:02:14,280 --> 00:02:16,539
automáticamente pues será mucho menos tiempo

54
00:02:16,539 --> 00:02:18,419
de hecho si ponemos 10, asumimos que

55
00:02:18,419 --> 00:02:20,599
los 25 minutos pasarán a ser solamente

56
00:02:20,599 --> 00:02:22,620
10 segundos. Vamos a ver si es así. 10 segundos, efectivamente,

57
00:02:22,780 --> 00:02:24,439
con lo cual vamos a ver qué pasará si

58
00:02:24,439 --> 00:02:25,460
llegamos al final.

59
00:02:26,699 --> 00:02:28,419
Aquí habríamos completado los 25 minutos y

60
00:02:28,419 --> 00:02:30,659
empezaría los 5 minutos de periodo

61
00:02:30,659 --> 00:02:32,699
de descanso. Voy a editar también esto y pondremos que

62
00:02:32,699 --> 00:02:34,240
el pomodoro dure 10 segundos,

63
00:02:34,439 --> 00:02:36,699
tenemos 7 segundos en el ciclo largo y 3

64
00:02:36,699 --> 00:02:38,400
en lo que serían los 5 minutos de descanso.

65
00:02:38,500 --> 00:02:40,379
Vamos a verlo. Lo he recargado, lo voy a iniciar.

66
00:02:41,639 --> 00:02:42,520
Estamos trabajando 25 minutos

67
00:02:42,520 --> 00:02:43,860
muy intensos y automáticamente

68
00:02:43,860 --> 00:02:46,580
vienen esos 3 y

69
00:02:46,580 --> 00:02:48,560
ahora ya ha vuelto a

70
00:02:48,560 --> 00:02:50,520
empezar el siguiente ciclo pomodoro. Fijaros que no está haciendo

71
00:02:50,520 --> 00:02:52,139
un ruido, un sonido, si miramos el código

72
00:02:52,139 --> 00:02:54,060
esto lo voy a dejar como estaba, significa que funciona

73
00:02:54,060 --> 00:02:56,680
porque hemos visto, hemos validado que después de el ciclo

74
00:02:56,680 --> 00:02:58,159
de las dos cosas sumadas, pues pasa algo

75
00:02:58,159 --> 00:03:00,060
es que se cuenta el ciclo como hecho, vamos a ver

76
00:03:00,060 --> 00:03:01,819
el tema del sonido, normalmente

77
00:03:01,819 --> 00:03:04,740
si hubiera algo relacionado con sonido

78
00:03:04,740 --> 00:03:06,280
aquí está, debería tener algo de play

79
00:03:06,280 --> 00:03:08,180
fijaros que pone alarmSound.play y

80
00:03:08,180 --> 00:03:10,460
seguramente si buscamos

81
00:03:10,460 --> 00:03:12,379
¿dónde está? fijaros que dice

82
00:03:12,379 --> 00:03:14,560
aquí que esta variable de alarmSound

83
00:03:14,560 --> 00:03:16,520
está intentando buscar algo en el código y aquí está, fijaros

84
00:03:16,520 --> 00:03:18,620
al final lo encontramos, hemos visto que hay un audio

85
00:03:18,620 --> 00:03:20,659
que ha puesto, que está en internet, podríamos abrirlo

86
00:03:20,659 --> 00:03:22,360
para ver si funciona, que era un audio, pero

87
00:03:22,360 --> 00:03:24,759
no se tenía el acceso. Esto se solucionaría buscando

88
00:03:24,759 --> 00:03:26,479
un audio alternativo, un sonido de

89
00:03:26,479 --> 00:03:28,439
alarma que encontremos por internet o que tengamos colocado en algún sitio

90
00:03:28,439 --> 00:03:30,300
para incluirlo, cambiar la dirección y ver si funciona.

91
00:03:30,439 --> 00:03:32,520
Obviamente, una última alternativa sería pedírselo

92
00:03:32,520 --> 00:03:34,460
a la IA. Le podríamos decir, genera una variante del

93
00:03:34,460 --> 00:03:36,219
código o cambia el código para que

94
00:03:36,219 --> 00:03:38,479
los 25 minutos duren solo 10 segundos y los

95
00:03:38,479 --> 00:03:40,479
5 minutos duren 3 segundos para ver que funciona. Y como ya

96
00:03:40,479 --> 00:03:42,560
sabemos que el audio no funciona porque lo hemos validado, le diríamos, cambia el audio

97
00:03:42,560 --> 00:03:44,460
por esta dirección que ha encontrado un audio

98
00:03:44,460 --> 00:03:46,560
que funciona y que funciona mejor. Y nos generaría la nueva versión del código.

99
00:03:46,740 --> 00:03:48,219
Y con esto, podremos crear aplicaciones

100
00:03:48,219 --> 00:03:50,500
de productividad sencillitas, pero que funcionan, no tenemos que pagar

101
00:03:50,500 --> 00:03:52,020
no hay anuncios y la podemos compartir con quien queramos

102
00:03:52,020 --> 00:03:54,439
y con esto me voy a activar un pomodoro para hacer la siguiente

103
00:03:54,439 --> 00:03:56,580
clase sobre algo que honestamente creo que es

104
00:03:56,580 --> 00:03:58,520
muy interesante y más útil de lo que nos pensamos a veces