1
00:00:05,230 --> 00:00:18,589
Hasta ahora hemos visto aplicaciones, juegos que podíamos crear y que cada vez que iniciábamos se reseteaban, es decir, que no podían guardar o recuperar datos. Vamos a ver ahora cómo podemos entrar en este nuevo nivel.

2
00:00:19,309 --> 00:00:30,570
El proceso va a ser muy similar al que hemos seguido hasta ahora, pero vamos a integrar una serie de peticiones donde expliquemos cómo queremos que la inteligencia artificial guarde los datos que estamos creando.

3
00:00:30,570 --> 00:00:58,689
Y para hacerlo vamos a crear un ejemplo de un diario personal digital. El proceso empieza exactamente de la misma forma. Vamos a pegar nuestro prompt. En este caso le voy a pedir a la inteligencia artificial que quiera una aplicación web para crear un diario personal digital. 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. Le pido que haga un diseño parecido a algo que yo ya conozco. Perfecto, lo podemos pedir.

4
00:00:58,689 --> 00:01:17,069
Fijaros aquí, esto es interesante, le digo guarda las entradas en local storage. Local storage es algo que los navegadores modernos tienen que sirve para guardar datos dentro de un espacio que tiene el propio navegador destinado a ofrecer a aplicaciones web que guarden sus datos.

5
00:01:17,069 --> 00:01:23,430
esto significa que aunque cerremos el navegador y lo vamos a abrir los datos seguirán allí y de

6
00:01:23,430 --> 00:01:28,569
hecho es algo diferente a las propias cookies si borramos las cookies local storage no se va a

7
00:01:28,569 --> 00:01:32,890
borrar a no ser que específicamente entremos en la configuración y borremos el local storage como

8
00:01:32,890 --> 00:01:37,370
si borramos cualquier otro archivo es la forma más sencilla de guardar y cargar datos y además

9
00:01:37,370 --> 00:01:42,390
le podríamos pedir a nuestra aplicación después que nos permita exportar o importar datos por si

10
00:01:42,390 --> 00:01:47,269
queremos usarla desde otro ordenador, pero en cualquier caso esto va a permanecer guardado

11
00:01:47,269 --> 00:01:50,849
aunque cerremos el navegador. A partir de aquí seguiré con las funcionalidades, le diré que me

12
00:01:50,849 --> 00:01:55,090
muestre una lista de entradas pasadas para que se puedan ver o eliminar, pero no editar, la gracia

13
00:01:55,090 --> 00:02:00,170
de tener un diario es que no puede editar lo que ya escribí, como mucho arrancar una página, pero

14
00:02:00,170 --> 00:02:04,750
no cambiarlo. Tener una pequeña sección para ver todas las entradas escritas, igual voy a quitar

15
00:02:04,750 --> 00:02:08,849
el lateral para no dar pistas, a ver cómo lo va a hacer. Le voy a poner que cuando haya ninguna

16
00:02:08,849 --> 00:02:13,469
entrada escrita tenga un diseño tipo placeholder es decir que muestre algo que no sea todo vacío

17
00:02:13,469 --> 00:02:18,469
para que te inspira a empezar que usen diseño limpio y minimalista que mueve una librera física

18
00:02:18,469 --> 00:02:23,169
con tailwind igual que las veces anteriores y después el código estamos poniendo siempre

19
00:02:23,169 --> 00:02:29,169
incluya el código html css y habskit en un solo archivo que cargue tailwind desde un cdn y que

20
00:02:29,169 --> 00:02:33,650
funciona completamente del lado del cliente usando local storage para los datos he insistido y

21
00:02:33,650 --> 00:02:38,729
directamente que sea todo fácil y que se puede ejecutar con doble clic vamos a ver cómo lo hace

22
00:02:38,849 --> 00:02:48,629
perfecto y acabo de generar el código lo voy a copiar y voy a crear un nuevo

23
00:02:48,629 --> 00:02:53,509
archivo en nuestro editor y esperar que se ponga de color y ahora lo voy a

24
00:02:53,509 --> 00:03:01,729
diario personal diario versión 1 vamos a cargarlo y aquí lo tenemos mi

25
00:03:01,729 --> 00:03:05,750
diario personal título de la entrada escribe aquí tu entrada el placeholder

26
00:03:05,750 --> 00:03:16,240
este diseño que nos anima y voy a probar probando mi diario cuando guardo la

27
00:03:16,240 --> 00:03:20,120
entrada ya me aparece aquí debajo y el placeholder él empieza a escribir ha

28
00:03:20,120 --> 00:03:28,039
desaparecido perfecto como vemos funciona voy a probar de añadir una más y

29
00:03:28,039 --> 00:03:31,520
eliminarla el sistema de eliminación también funciona y ahora lo más

30
00:03:31,520 --> 00:03:37,419
complicado que pasará si cierro la aplicación la ventana y la vuelvo a abrir

31
00:03:37,419 --> 00:03:42,280
vemos que siguen las entradas que había creado y si cierro completamente el

32
00:03:42,280 --> 00:03:47,139
navegador he cerrado Edge lo vuelvo a abrir y

33
00:03:47,139 --> 00:04:03,639
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.

34
00:04:03,639 --> 00:04:19,639
Pero lo más importante es que ya está guardando los datos. ¿Qué problema podría haber? Que yo me cambie de ordenador o que quiera tener una copia en un pendrive de mis entradas. Aquí lo que le podríamos pedir sería que añada funcionalidad de exportar e importar.

35
00:04:19,639 --> 00:04:24,120
importar. Le he pedido que añade un botón para exportar todas las entradas en algún formato

36
00:04:24,120 --> 00:04:29,079
ideal para ello. He puesto algunos formatos que tengo en mente, pero podríamos directamente dejar

37
00:04:29,079 --> 00:04:34,160
que la IA eligiera. Yo he puesto dos formatos típicos para este tipo de exportaciones y un

38
00:04:34,160 --> 00:04:39,379
botón para importarlas sustituyendo el contenido anterior. He puesto una nota, puesto importante,

39
00:04:39,500 --> 00:04:43,319
cuando el usuario vaya a importar entradas explícale que se reescribirá al diario y perderá las

40
00:04:43,319 --> 00:04:48,040
entradas actuales para cargar las nuevas y si acepta después se ejecuta la acción de importar.

41
00:04:48,040 --> 00:04:56,620
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

42
00:04:56,620 --> 00:04:58,240
Vamos a ver cómo queda

43
00:04:58,240 --> 00:05:06,600
Perfecto, he acabado de generar el código, lo voy a copiar y me voy a ir a mi editor de texto

44
00:05:06,600 --> 00:05:13,800
Voy a guardar una nueva versión que será diario versión 2 y voy a pegar el nuevo código

45
00:05:13,800 --> 00:05:18,000
Voy a guardarlo y vamos a ver qué tal lo ha hecho

46
00:05:18,000 --> 00:05:23,500
genial, fijaros que ya ha cargado las entradas, voy a añadir una más, una tercera

47
00:05:23,500 --> 00:05:28,879
y voy a poner un texto largo, en este caso he copiado un texto típico de relleno en latín

48
00:05:28,879 --> 00:05:32,379
lo voy a guardar para que se vea una entrada larga, perfecto

49
00:05:32,379 --> 00:05:34,560
y lo que voy a hacer es exportar entradas

50
00:05:34,560 --> 00:05:40,139
fijaros que me ofrece guardar un archivo, le digo que sí, que lo guarde

51
00:05:40,139 --> 00:05:45,579
y lo voy a llamar entradas diario backup.pau

52
00:05:45,579 --> 00:05:51,040
Perfecto, aquí lo tengo guardado y ahora voy a borrarlas

53
00:05:51,040 --> 00:05:55,180
Imaginaros que estoy en otro ordenador, cargo el diario y no hay nada

54
00:05:55,180 --> 00:06:03,040
Voy a pulsar en importar, voy a seleccionar el archivo y al abrirlo me avisa que va a reescribir las entradas actuales

55
00:06:03,040 --> 00:06:06,100
Le digo que ok y ya me dice que las ha importado

56
00:06:06,100 --> 00:06:08,980
Y aquí las tenemos, ha funcionado perfecto

57
00:06:08,980 --> 00:06:12,980
De esta forma siempre los dados se van a quedar guardados por defecto

58
00:06:12,980 --> 00:06:20,139
si recargo, si cierro, si vuelvo a abrir el navegador, pero tengo una forma de exportar o importar contenido a otros ordenadores

59
00:06:20,139 --> 00:06:26,680
o directamente para que yo pueda guardar una copia en algún lugar externo, por ejemplo, un pendrive o algún espacio web.

60
00:06:27,300 --> 00:06:36,019
Y de esta forma podemos crear aplicaciones que guarden y lean datos sin mayor problema y sin tener que ponernos a instalar servidores web o software más complejo.