JavaScript y OPFS: almacenar y leer archivos
En este artículo voy a enseñarte a usar el Origin Private File System con JavaScript para almacenar, leer y eliminar cualquier tipo de archivo en el navegador web.
Sistema de archivos en la web con JavaScript y OPFS
Puedes probar la demostración aquí: https://stackblitz.com/edit/vitejs-vite-hl34zf?file=index.html
Como lo dije anteriormente, el Origin Private File System ha llegado para revolucionar las cosas con JavaScript. Gracias al OPFS podemos tener un sistema de archivos completo con JavaScript directamente en el navegador web.
Con esto, podemos escribir cualquier tipo de archivo en el web browser, así como descargarlo más adelante. Todo ello sin depender de localStorage o cosas similares; es una tecnología diferente.
Se pueden guardar documentos de texto, imágenes, vídeos e incluso bases de datos, además de que no hay necesidad de pedir permiso o confirmación al usuario, todo es transparente.
¿Cómo almacenar contraseñas en bases de datos?
El día de hoy te voy a compartir un poco de mi experiencia como programador al guardar contraseñas en bases de datos, sin importar lenguaje de programación ni motor de base de datos.
Te daré algunos consejos para almacenar passwords en una base de datos y que obviamente queden seguras para que ni siquiera tú sepas cuál es la contraseña pero puedas resetearla en caso de ser necesario.
Guardar fechas en bases de datos: tipo de dato
En el post de hoy vamos a hablar sobre el almacenamiento de fechas y horas en las bases de datos y cómo trabajar con ellas al usarlas en nuestros sistemas.
Te diré algunos consejos desde mi experiencia para que puedas guardar y recuperar timestamps a cualquier base de datos y en cualquier lenguaje de programación.
Tomar foto de cámara con Python y guardarla en servidor con PHP
Introducción
Acabo de publicar cómo tomar una foto de la cámara web con Python. La vez pasada, vimos cómo tomar una foto con Javascript y guardarla en servidor con PHP. Lo hicimos porque con Javascript (al menos en el navegador, no con NodeJS) no podemos escribir archivos.
Ahora puede que nos preguntemos ¿por qué tomar una foto con Python y guardarla luego con PHP? y bueno, la respuesta varía; pero a mí se me ocurre que puede que tengamos un servidor en internet que hable PHP, y que ahí alojemos nuestras fotos. O, pensando mal, podemos tomar una foto del usuario (ya que esto no pide permiso) y mandarla a nuestro servidor.
En fin, las respuestas sobran, y aquí yo respondo a cómo hacerlo. De todos modos, es responsabilidad de cada usuario hacer lo que se le dé la gana.
Requisitos
- Tener instalado Python y pip. Aquí hay un tutorial que escribí hace algún tiempo.
- Contar con un servidor para pruebas. En este post veremos cómo hacerlo en modo local. Si no tienes PHP o Apache, te recomiendo ver: cómo instalar PHP en Windows.
- También recomiendo leer la entrada anterior, pues así tendremos las bases. Además, recuerda instalar opencv.
Python
Comencemos viendo cómo programaremos a Python. Ya vimos que con opencv podemos tomar una foto y guardarla en nuestro disco duro. El código era este:
Realizaremos algunas modificaciones sólo al momento de guardar la imagen, ya que no quedará en la pc del usuario; sino que la mandaremos.
Para mandarla y evitar que se pierda información en el camino vamos a codificarla con la vieja confiable: base64. Ya que Python y PHP traen por defecto la codificación/decodificación con este algoritmo o lo que sea, será fácil implementar esto.
Entonces:
- Tomamos la foto
- La codificamos en base64
- Enviamos la cadena a PHP
Así que, aquí el código:
Como vemos, requerimos de nuevas librerías para poder hacer las peticiones. No hay necesidad de instalar otra cosa, pues ya vienen incluidas por defecto.
Utilizamos imencode para poner la imagen en un buffer, y a ese buffer lo codificamos en base64. Finalmente, hacemos la petición y mandamos la imagen.
Aquí termina el código (del lado del cliente, ¿tal vez?) de Python. Vamos con PHP.
PHP
5 líneas (y podrían utilizarse menos) bastan para guardar la imagen. Simplemente escribimos un archivo png… su contenido será lo que venga en el índice foto del arreglo $_POST.
Pero no lo hacemos nomás así, sino que primero comprobamos si existe algo en esa posición. Para el nombre de la imagen usamos uniqid. Y listo.
He aquí el grandioso código.
Por cierto, al final hacemos un json_encode y mandamos los bytes que se escribieron. Esto no lo estamos capturando en Python, pero por si quisiéramos, podríamos hacerlo. Además, en este caso lo hago para ser educado y no quedar sin responder.
Importante: este archivo, en mi caso, está en mi servidor en una carpeta llamada “fotos_python“. Recuerda que si cambias la ruta o el nombre del archivo php, también debes cambiar la variable en Python.
Probando
Un post sin probar el resultado sería un post sin sentido. Voy a probarlo ahora mismo…
Tomar foto con Python y enviar a PHP
Ahí dice que ya se envió. Si visito mi disco duro en donde está la carpeta pública de mi servidor, veré esto:
Imagen almacenada en servidor correctamente
Ahí está la foto. Y digo lo mismo que la vez pasada: tengo cubierta mi cámara, pero el script sirve como un encanto. Además, ¿a qué le tomaría foto para comprobarlo?
Conclusión
Así de fácil es esto. Me parece una combinación perfecta Python y PHP. Por cierto, podríamos loguear la IP del cliente, la hora, y esas cosas… pero ya cada quien lo puede modificar a su gusto.
Así es como terminamos hoy.