Programando Leer y Guardar datos. Diario | Mediateca de EducaMadrid

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. 00:00:05

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. 00:00:19

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. 00:00:30

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. 00:00:58

esto significa que aunque cerremos el navegador y lo vamos a abrir los datos seguirán allí y de 00:01:17

hecho es algo diferente a las propias cookies si borramos las cookies local storage no se va a 00:01:23

borrar a no ser que específicamente entremos en la configuración y borremos el local storage como 00:01:28

si borramos cualquier otro archivo es la forma más sencilla de guardar y cargar datos y además 00:01:32

le podríamos pedir a nuestra aplicación después que nos permita exportar o importar datos por si 00:01:37

queremos usarla desde otro ordenador, pero en cualquier caso esto va a permanecer guardado 00:01:42

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

muestre una lista de entradas pasadas para que se puedan ver o eliminar, pero no editar, la gracia 00:01:50

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

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

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

entrada escrita tenga un diseño tipo placeholder es decir que muestre algo que no sea todo vacío 00:02:08

para que te inspira a empezar que usen diseño limpio y minimalista que mueve una librera física 00:02:13

con tailwind igual que las veces anteriores y después el código estamos poniendo siempre 00:02:18

incluya el código html css y habskit en un solo archivo que cargue tailwind desde un cdn y que 00:02:23

funciona completamente del lado del cliente usando local storage para los datos he insistido y 00:02:29

directamente que sea todo fácil y que se puede ejecutar con doble clic vamos a ver cómo lo hace 00:02:33

perfecto y acabo de generar el código lo voy a copiar y voy a crear un nuevo 00:02:38

archivo en nuestro editor y esperar que se ponga de color y ahora lo voy a 00:02:48

diario personal diario versión 1 vamos a cargarlo y aquí lo tenemos mi 00:02:53

diario personal título de la entrada escribe aquí tu entrada el placeholder 00:03:01

este diseño que nos anima y voy a probar probando mi diario cuando guardo la 00:03:05

entrada ya me aparece aquí debajo y el placeholder él empieza a escribir ha 00:03:16

desaparecido perfecto como vemos funciona voy a probar de añadir una más y 00:03:20

eliminarla el sistema de eliminación también funciona y ahora lo más 00:03:28

complicado que pasará si cierro la aplicación la ventana y la vuelvo a abrir 00:03:31

vemos que siguen las entradas que había creado y si cierro completamente el 00:03:37

navegador he cerrado Edge lo vuelvo a abrir y 00:03:42

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. 00:03:47

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. 00:04:03

importar. Le he pedido que añade un botón para exportar todas las entradas en algún formato 00:04:19

ideal para ello. He puesto algunos formatos que tengo en mente, pero podríamos directamente dejar 00:04:24

que la IA eligiera. Yo he puesto dos formatos típicos para este tipo de exportaciones y un 00:04:29

botón para importarlas sustituyendo el contenido anterior. He puesto una nota, puesto importante, 00:04:34

cuando el usuario vaya a importar entradas explícale que se reescribirá al diario y perderá las 00:04:39

entradas actuales para cargar las nuevas y si acepta después se ejecuta la acción de importar. 00:04:43

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 00:04:48

Vamos a ver cómo queda 00:04:56

Perfecto, he acabado de generar el código, lo voy a copiar y me voy a ir a mi editor de texto 00:04:58

Voy a guardar una nueva versión que será diario versión 2 y voy a pegar el nuevo código 00:05:06

Voy a guardarlo y vamos a ver qué tal lo ha hecho 00:05:13

genial, fijaros que ya ha cargado las entradas, voy a añadir una más, una tercera 00:05:18

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

lo voy a guardar para que se vea una entrada larga, perfecto 00:05:28

y lo que voy a hacer es exportar entradas 00:05:32

fijaros que me ofrece guardar un archivo, le digo que sí, que lo guarde 00:05:34

y lo voy a llamar entradas diario backup.pau 00:05:40

Perfecto, aquí lo tengo guardado y ahora voy a borrarlas 00:05:45

Imaginaros que estoy en otro ordenador, cargo el diario y no hay nada 00:05:51

Voy a pulsar en importar, voy a seleccionar el archivo y al abrirlo me avisa que va a reescribir las entradas actuales 00:05:55

Le digo que ok y ya me dice que las ha importado 00:06:03

Y aquí las tenemos, ha funcionado perfecto 00:06:06

De esta forma siempre los dados se van a quedar guardados por defecto 00:06:08

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

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

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. 00:06:27