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.
App para calcular edad (cumpleaños) – Gratuita y open source
Aprovechando que SQLite3 ha llegado a los navegadores web, he decidido crear una aplicación web (que puede ser instalada como nativa) simple que muestra la edad de las personas registradas, mostrando:
- Edad calculada al día de hoy
- Edad precisa incluyendo segundos
- Siguiente cumpleaños
- Tiempo que falta para el próximo cumpleaños
App de cumpleaños – Mostrar personas registradas con edad al día de hoy
Esta app también puede servir para mostrar el tiempo que ha transcurrido desde un cierto evento (como un aniversario), solo es cuestión de registrar los datos correctamente.
La app es realmente simple, pero era una webapp que siempre quise hacer y poner a disposición del público, pues es open source.
Está hecha con TypeScript y para los estilos he usado TailwindCSS. Utiliza Workers y SQLite3 como almacenamiento; también se puede convertir en una PWA. Para “compilarla” se usa Vite. (más…)
SQLite3 en JavaScript con WebAssembly y OPFS
Anteriormente te he hablado de SQLite en el navegador web, ya sea con Svelte o JavaScript puro. Hoy voy a mostrarte otra cosa: cómo invocar a SQLite3 desde WASM o WebAssembly.
Al final vamos a estar invocando la API de SQLite3 de JS desde WebAssembly. Te enseñaré cómo es mi entorno de trabajo y cómo usar SQLite3 con WebAssembly.
SQLite3 con JavaScript puro y OPFS – Tutorial
En este post te mostraré cómo usar SQLite3 directamente en el navegador web usando la librería original escrita en C a través de WebAssembly y el OPFS para alojar la base de datos. De este modo tendremos SQLite3 original en la web para trabajar en el navegador con JS del lado del cliente.
Podremos hacer esto con JavaScript puro o con cualquier framework; pero te mostraré un ejemplo básico y bien explicado de SQLite3 con JavaScript. Luego te enseñaré un ejemplo con Tailwind, Svelte y Progressive Web apps.
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.
Código fuente – Software POS restaurante
En este post escribiré los detalles del código fuente para mi sistema gratuito para restaurantes. Te enseñaré a compilarlo y te enseñaré algunos de sus detalles para tenerlo en tu plataforma favorita.
El programa está hecho con Vue, Buefy, Golang, SQLite3. Utiliza JWT para la autentificación, Gorilla para crear la API REST y NSIS para el instalador.
Recuerda que, como está hecho con Go, C y Node, puede compilar en cualquier plataforma que soporte Go y C. Así que puedes compilar en Linux, Android, Mac, Windows, Raspberry Pi, servidores de internet y cualquier otra que soporte estos lenguajes.
Habilitar claves foráneas en SQLite3
Hoy vamos a ver cómo habilitar las foreign keys de SQLite3 ya que en ocasiones las mismas no funcionan incluso al especificar el on delete y on update.
Esto es porque debemos habilitar las claves foráneas de SQLite3 al momento de abrir la base de datos o cambiar el PRAGMA.
Veamos cómo hacerlo al abrir la base de datos.
Combinar y ordenar 2 tablas de base de datos
El día de hoy veremos cómo extraer datos de 2 tablas SQL distintas, combinarlos y extraer solo los primeros de ellos a partir de un parámetro de ordenamiento.
El ejemplo que mostraré va a mostrar los productos más vendidos en una tienda, pero esos productos se venden al contado o en apartado, y cada uno está en una tabla distinta.
Lo que se requiere es obtener los productos más vendidos sin importar a cuál tabla pertenecen, ordenándolos, combinándolos y extrayendo solo los primeros N.