App de notas y listas con encriptación – Open source
El día de hoy te enseñaré una aplicación simple, gratuita y open source para gestionar notas y listas (To Do app). Está hecha con JavaScript usando Svelte, utiliza SQLite3 para el almacenamiento, Tailwind para el diseño y se agrega encriptación con la web crypto API.
Puedes probar la aplicación ya mismo ingresando al siguiente enlace: https://notasbyparzibyte.parzibyte.repl.co/#/. Incluso puedes instalarla como nativa, y todos los datos se van a quedar en tu dispositivo sin necesidad de internet.
Con esta app de notas podrás agregar notas y listas de pendientes, además de poder encriptarlas usando AES en modo CBC. Cada nota y cada lista puede ser encriptada de manera independiente y con una contraseña distinta, generado el vector de inicialización y derivando la clave a partir de una contraseña.
App de notas con encriptación – Open source
Puedes agregar etiquetas a cada lista y nota, para que puedas filtrarlas más adelante.
Lo mejor de esto es que la app puede ser instalada como una aplicación nativa gracias al poder de las PWA, así que puedes usarla en móviles y dispositivos de escritprio.
Me emocioné tanto con la llegada de SQLite3 a la web con OPFS que hice esta app para aprender Svelte y Tailwind, pero terminé haciendo también la app de cumpleaños y luego experimenté un poco con WASM.
Veamos entonces esta webapp de tareas pendientes totalmente open source.
Pasar parámetros a función de Svelte
En Svelte podemos indicar funciones que se van a invocar cuando se desencadena un evento. Por ejemplo, para invocar a holaMundo en el click de un elemento podemos indicarlo como on:click={holaMundo}
En ocasiones se necesita pasar parámetros a esa función dentro de un componente de Svelte, pero no podemos indicarlo así:
on:click={holaMundo(parametro)}
Ya que eso ejecutará la función tan pronto se cargue el componente, y no esperará al clic. Por ello es que en este post te mostraré cómo pasar argumentos a las funciones en Svelte sin que se invoquen automáticamente.
Usando SQLite3 en la web con Sveltekit y @sqlite.org/sqlite-wasm
Estoy muy emocionado porque después de tanto tiempo y gracias al Origin Private File System podremos tener SQLite3 en los navegadores, con todas sus ventajas y todo contenido desde una página web.
Si quieres puedes ver el hola mundo sin Svelte, es decir, con JS puro y aprender cómo usar SQLite3 en el navegador web sin servidores.
Ya había leído eso hace tiempo pero tenías que hacer unas cosas “experimentales”.
El punto es que ando aprendiendo un poco de Svelte con Tailwind haciendo una app de notas (a las que les agregaré encriptación) y me dio curiosidad por ver si SQLite3 ya estaba “portado” totalmente, porque si bien ya existía con WebAssembly no había manera de crear archivos binarios en el navegador web.
Entonces encontré a: https://developer.chrome.com/blog/sqlite-wasm-in-the-browser-backed-by-the-origin-private-file-system/
Y vi que ya era posible. Lo siguiente era hacerlo funcionar con SvelteKit que usa a su vez Vite para todo su entorno.
Te contaré cómo lo hice y de dónde me he guiado.