1
00:00:02,540 --> 00:00:08,699
Hasta ahora hemos visto aplicaciones, juegos que podíamos crear y que cada vez que iniciábamos

2
00:00:08,699 --> 00:00:12,259
se reseteaban, es decir, que no podían guardar o recuperar datos. Vamos a ver ahora cómo

3
00:00:12,259 --> 00:00:15,699
podemos entrar en este nuevo nivel. El proceso va a ser muy similar al que hemos seguido

4
00:00:15,699 --> 00:00:19,339
hasta ahora, pero vamos a integrar una serie de peticiones donde expliquemos cómo queremos

5
00:00:19,339 --> 00:00:22,500
que la inteligencia artificial guarde los datos que estamos creando. Y para hacerlo,

6
00:00:22,859 --> 00:00:26,940
vamos a crear un ejemplo de un diario personal digital. El proceso empieza exactamente de

7
00:00:26,940 --> 00:00:29,440
la misma forma. Vamos a pegar nuestro prompt. En este caso, le voy a pedir a la inteligencia

8
00:00:29,440 --> 00:00:32,000
artificial que quiera una aplicación web para crear un diario personal digital. La

9
00:00:32,000 --> 00:00:37,060
La aplicación debe permitir al usuario escribir entradas de diario con fecha y título, con un estilo bonito y a pantalla completa, como el creador de entradas de WordPress.

10
00:00:37,219 --> 00:00:40,479
Le pido que haga un diseño parecido a algo que yo ya conozco. Perfecto, lo podemos pedir.

11
00:00:40,780 --> 00:00:42,840
Fijaros aquí. Esto es interesante. Le digo, guarda las entradas en local storage.

12
00:00:43,140 --> 00:00:50,000
Local storage es algo que los navegadores modernos tienen que sirve para guardar datos dentro de un espacio que tiene el propio navegador

13
00:00:50,000 --> 00:00:52,740
destinado a ofrecer a aplicaciones web que guarden sus datos.

14
00:00:53,100 --> 00:00:56,460
Esto significa que, aunque cerremos el navegador y lo volvamos a abrir, los datos seguirán allí.

15
00:00:56,840 --> 00:00:58,659
Y, de hecho, es algo diferente a las propias cookies.

16
00:00:58,659 --> 00:01:04,340
Si borramos las cookies, el local storage no se va a borrar, a no ser que específicamente entremos en la configuración y borremos el local storage como si borráramos cualquier otro archivo.

17
00:01:04,739 --> 00:01:10,620
Es la forma más sencilla de guardar y cargar datos y además le podríamos pedir a nuestra aplicación después que nos permita exportar o importar datos por si queremos usarla desde otro ordenador.

18
00:01:10,900 --> 00:01:13,579
Pero en cualquier caso, esto va a permanecer guardado aunque cerremos el navegador.

19
00:01:13,879 --> 00:01:17,640
A partir de aquí seguiré con las funcionalidades. Le diré que me muestre una lista de entradas pasadas para que se puedan ver o eliminar, pero no editar.

20
00:01:17,719 --> 00:01:21,859
La gracia de tener un diario es que no puede editar lo que ya escribí. Como mucho arrancar una página, pero no cambiarlo.

21
00:01:21,859 --> 00:01:24,180
tener una pequeña sección para ver todas las entradas escritas

22
00:01:24,180 --> 00:01:26,140
igual voy a quitar el lateral para no dar pistas, a ver cómo lo va a hacer

23
00:01:26,140 --> 00:01:27,739
le voy a poner que cuando haya ninguna entrada escrita

24
00:01:27,739 --> 00:01:29,560
tenga un diseño tipo placeholder, es decir, que muestre algo

25
00:01:29,560 --> 00:01:31,620
que no sea todo vacío, para que te inspire a empezar

26
00:01:31,620 --> 00:01:33,680
que use un diseño limpio y minimalista, que mueva una librera física

27
00:01:33,680 --> 00:01:35,180
con Tailwind, igual que las veces anteriores

28
00:01:35,180 --> 00:01:37,799
y después el código que estamos poniendo siempre, que incluya el código HTML

29
00:01:37,799 --> 00:01:39,680
CSS y Javascript en un solo archivo, que cargue

30
00:01:39,680 --> 00:01:41,980
Telindes en un CDN y que funcione completamente del lado del cliente

31
00:01:41,980 --> 00:01:43,420
usando local storage para los datos, he insistido

32
00:01:43,420 --> 00:01:46,079
y directamente que sea todo fácil y que se pueda ejecutar con doble clic

33
00:01:46,079 --> 00:01:47,219
vamos a ver cómo lo hace

34
00:01:47,219 --> 00:01:52,819
perfecto, ya acabo de generar el código, lo voy a copiar

35
00:01:52,819 --> 00:01:54,560
y voy a crear un nuevo archivo en nuestro editor

36
00:01:54,560 --> 00:01:56,640
voy a esperar que se ponga de color y ahora

37
00:01:56,640 --> 00:01:58,760
lo voy a diario personal, diario

38
00:01:58,760 --> 00:01:59,700
versión 1

39
00:01:59,700 --> 00:02:02,840
vamos a cargarlo y aquí lo tenemos, mi diario personal

40
00:02:02,840 --> 00:02:04,420
título de la entrada, escribe aquí tu entrada

41
00:02:04,420 --> 00:02:06,379
el placeholder, este diseño que nos anima

42
00:02:06,379 --> 00:02:08,819
aquí voy a probar, probando mi diario

43
00:02:08,819 --> 00:02:12,819
cuando guardo la entrada ya me aparece

44
00:02:12,819 --> 00:02:14,680
aquí debajo y el placeholder, el empieza a escribir

45
00:02:14,680 --> 00:02:15,879
ha desaparecido, perfecto

46
00:02:15,879 --> 00:02:20,520
como vemos funciona, voy a probar de añadir una más y eliminarla

47
00:02:20,520 --> 00:02:21,879
el sistema de eliminación también funciona

48
00:02:21,879 --> 00:02:46,639
Y ahora lo más complicado. ¿Qué pasará si cierro la aplicación, la ventana, y la vuelvo a abrir? Vemos que siguen las entradas que había creado. Y si cierro completamente el navegador, he cerrado Edge, lo vuelvo a abrir y efectivamente aquí están. Con lo cual vemos que está guardando los datos y que ha funcionado. A partir de aquí ya le podríamos pedir que mejore el diseño, que lo haga diferente, que separe las entradas anteriores en una vista lateral o todos los cambios que quisiéramos. Pero lo más importante es que ya está guardando los datos.

49
00:02:47,000 --> 00:02:47,780
¿Qué problema podría haber?

50
00:02:48,120 --> 00:02:51,439
Que yo me cambie de ordenador o que quiera tener una copia en un pendrive de mis entradas.

51
00:02:51,599 --> 00:02:54,699
Aquí lo que le podríamos pedir sería que añada la funcionalidad de exportar e importar.

52
00:02:55,159 --> 00:02:58,039
Le he pedido que añade un botón para exportar todas las entradas en algún formato ideal para ello.

53
00:02:58,139 --> 00:03:01,659
He puesto algunos formatos que tengo en mente, pero podríamos directamente dejar que la IA eligiera.

54
00:03:01,740 --> 00:03:03,860
Yo he puesto dos formatos típicos para este tipo de exportaciones

55
00:03:03,860 --> 00:03:05,960
y un botón para importarlas sustituyendo el contenido anterior.

56
00:03:06,500 --> 00:03:07,599
He puesto una nota, pero esto es importante.

57
00:03:07,599 --> 00:03:09,840
Cuando el usuario vaya a importar entradas, explícale que se reescribirá al diario

58
00:03:09,840 --> 00:03:11,259
y perderá las entradas actuales para cargar las nuevas.

59
00:03:11,319 --> 00:03:13,400
Si se acepta, después se ejecuta la acción de importar.

60
00:03:13,400 --> 00:03:19,120
Obviamente si no lo quisiéramos de esta forma y quisiéramos que si importo entradas se pongan aparte de las que ya tengo, pues lo podríamos pedir de esta forma

61
00:03:19,120 --> 00:03:20,199
Vamos a ver cómo queda

62
00:03:20,199 --> 00:03:25,780
Perfecto, ya acabo de generar el código, lo voy a copiar y me voy a ir a mi editor de texto

63
00:03:25,780 --> 00:03:29,379
Voy a guardar una nueva versión, que será Diario versión 2

64
00:03:29,379 --> 00:03:30,580
Y voy a pegar el nuevo código

65
00:03:30,580 --> 00:03:33,419
Voy a guardarlo y vamos a ver qué tal lo he hecho

66
00:03:33,419 --> 00:03:37,060
Genial, fijaros que ya ha cargado las entradas, voy a añadir una más, una tercera

67
00:03:37,060 --> 00:03:40,639
Y voy a poner un texto largo, en este caso he copiado un texto típico de relleno en latín

68
00:03:40,639 --> 00:03:42,979
Lo voy a guardar para que se vea una entrada larga, perfecto

69
00:03:42,979 --> 00:03:44,400
Y lo que voy a hacer es exportar entradas

70
00:03:44,400 --> 00:03:48,180
fijaros que me ofrece guardar un archivo, le digo que sí, que lo guarde

71
00:03:48,180 --> 00:03:51,280
y lo voy a llamar entradas diario backup

72
00:03:51,280 --> 00:03:55,400
perfecto, aquí lo tengo guardado y ahora voy a borrarlas

73
00:03:55,400 --> 00:03:58,180
imaginaros que estoy en otro ordenador, cargo el diario y no hay nada

74
00:03:58,180 --> 00:04:00,699
voy a pulsar en importar, voy a seleccionar el archivo

75
00:04:00,699 --> 00:04:03,860
y al abrirlo me avisa que va a reescribir las entradas actuales, le digo que ok

76
00:04:03,860 --> 00:04:07,340
y ya me dice que las ha importado y aquí las tenemos, ha funcionado perfecto

77
00:04:07,340 --> 00:04:10,000
de esta forma siempre los datos se van a quedar guardados por defecto

78
00:04:10,000 --> 00:04:11,800
si recargo, si cierro, si vuelvo a abrir el navegador

79
00:04:11,800 --> 00:04:14,800
pero tengo una forma de exportar o importar contenido a otros ordenadores

80
00:04:14,800 --> 00:04:17,660
o directamente para que yo pueda guardar una copia en algún lugar externo, por ejemplo,

81
00:04:17,740 --> 00:04:19,160
un pendrive o algún espacio web.

82
00:04:19,540 --> 00:04:23,160
Y de esta forma podemos crear aplicaciones que guarden y lean datos sin mayor problema

83
00:04:23,160 --> 00:04:25,379
y sin tener que ponerse a instalar servidores web o software más complejo.