Laravel: problemas con route model binding y middleware propio

En este pequeño post voy a relatar un pequeño problema que tuve con las rutas de Laravel al pasar un Model a través de la URL usando el Route Model Binding.

El problema era que yo pasaba el modelo por la URL pero al momento de recibirlo en el controlador, el mismo estaba vacío. Mejor dicho, era un arreglo vacío o un Model nuevo sin atributos.

Después de horas depurando me di cuenta de que el problema estaba causado debido a un middleware propio que yo había escrito.

(más…)

Encriptar y desencriptar información con JavaScript usando AES

Encriptación con JavaScript del lado del cliente usando la Web Crypto API

En este post de programación con JavaScript en el navegador veremos cómo encriptar y desencriptar datos usando una API nativa, segura y confiable.

Encriptar y desencriptar información con JavaScript usando AES

Encriptar y desencriptar información con JavaScript usando AES

Vamos a usar la interfaz Crypto a través de window.crypto. Al final podremos encriptar y desencriptar archivos usando una contraseña, derivando una clave de la misma y usando AES para el cifrado de datos.

Nota: voy a usar cifrado y encriptado como sinónimos para referirme a la encriptación de información.

Por cierto, usaremos la encriptación simétrica aunque también es posible usar la asimétrica con claves públicas y privadas.

(más…)

Enlace de descarga de archivo compartido

Aplicación para transferencia de archivos – Gratuita y open source

En este post te mostraré un software muy simple que he creado recientemente. Es para compartir archivos por internet y enviarlos de manera rápida y simple.

La principal función de esta app para transferir y compartir archivos es su funcionamiento para subir archivos en conexiones lentas.

Básicamente es como una alternativa open source y gratuita a WeTransfer, File.io, Firefox Send, etcétera.

A lo largo de este post te enseñaré cómo funciona, cómo puedes tenerla gratis (ya que usa Firebase en su plan gratuito) y cómo montarla en un servidor gratuitamente.

Nota: puedes ver cómo luce la app al descargar un archivo en este enlace.

(más…)

Número de semana con JavaScript a partir de una fecha

Número de semana con JavaScript

En este post de JavaScript te enseñaré a obtener el número de la semana a partir de una fecha.

Esto será para el número de semana que inicia el lunes. Vamos a ver una función de JavaScript que te dirá en qué número de semana estamos según una fecha (misma que puede ser la actual).

Vas a poder usar este código en el lado del cliente con el navegador web, y en el lado del servidor con Node.

(más…)

Listado de conejos - Mostrar fotos, información y filtrar

Aplicación para cunicultura – Gratuita y open source

En este post te mostraré una aplicación web y PWA que acabo de crear. Se trata de una app para llevar el control de la crianza de conejos. Básicamente es una app para cunicultura.

Esta app web que puede ser usada como app móvil sirve básicamente para llevar el registro de los conejos y tener un control sobre su edad, género, información de sacrificio, reproducción, ventas, etcétera.

También vamos a poder llevar los registros de reproducción de los conejos, tomando en cuenta la cantidad de días para el parto y muchas cosas más.

A lo largo del artículo te enseñaré todos los módulos del programa, la parte técnica, cómo descargar el código fuente y cómo probar la app web.

(más…)

Reducir tamaño de imagen con JavaScript

Reducir tamaño de imagen con JavaScript

En el post de hoy te enseñaré a comprimir una imagen usando JavaScript al seleccionar una imagen con un input de tipo file.

Con comprimir me refiero a reducir el tamaño del archivo de imagen, cambiando su calidad. Verás que podrás reducir la imagen hasta el 20 % de su calidad sin que se note (y podrás comprimirla incluso más).

Reducir tamaño de imagen con JavaScript – Antes y después, al poner el 30 % de calidad

De este modo puedes reducir el tamaño de una imagen antes de subirla a un servidor o cosas por el estilo (cambiando su peso, no su medida en pixeles). Todo esto lo haremos del lado del cliente trabajando con JS, Canvas y URL.

Yo hago este post porque estoy usando el storage de Firebase y necesito subir archivos pero no quiero que se agote mi plan gratuito.

También te servirá a ti para ahorrar ancho de banda y almacenamiento en tu servidor, o tal vez solo quieras hacer una app que reduzca la calidad de las imágenes.

(más…)

Reporte de deudas - Filtro por acreedor, deudor o estado de liquidación

Aplicación para deudas y gastos compartidos – Gratuita y open source

Hoy voy a enseñarte una app móvil y web que sirve para llevar el registro de las deudas y gastos compartidos entre cierto grupo de personas.

En esta app puedes registrar las deudas que tienes, y las otras personas pueden registrar lo que tú le debes a ellas. Además, las deudas o gastos pueden ser de persona a persona o compartidas entre todos.

A lo largo de este post te mostraré las características de la app, los módulos que tiene y cómo funciona. Desde ahora te cuento que esta es una PWA y puede ser usada en móviles o en computadoras como si fuera nativa.

Entre sus características encontramos:

  1. Sincronización de datos en tiempo real
  2. Trabajo sin conexión (los datos se suben cuando la conexión regresa)
  3. PWA que puede ser usada como nativa o en el navegador web
  4. Manejo de usuarios
  5. Control de deudas con opción para repartir los gastos y liquidar las deudas
  6. Filtros para acreedores y deudores
  7. Totalmente gratuita y open source, puede ser usada como un proyecto de estudiante
  8. Tú puedes tener tu propia versión, solo debes configurar el SDK de Firebase y comenzar a usar la app

Por cierto, la he hecho usando Firebase con Firestore Database y Vue con Buefy.

(más…)

Service worker en Progressive Web App

Crear y publicar Progressive Web App – Convertir app web en PWA

Hoy voy a enseñarte cómo convertir cualquier aplicación web en una PWA o Progressive Web App.

Tú puedes programar en cualquier lenguaje y Framework, ya que las PWA no están atadas a algo más allá de JavaScript.

Así que mientras tu app conste de archivos del lado del cliente, podrás convertirla en PWA. Y con estos archivos me refiero a CSS, JS, HTML, imágenes, etcétera.

Te repito que para crear una PWA no necesitas usar un framework específico, así que puedes usar JavaScript puro, Angular, Vue, React, jQuery (bueno, jQuery no, ya es obsoleto) y cualquier otro que genere JavaScript al final.

(más…)

Leer código de barras (lector USB conectado) con JavaScript

En este post te mostraré algo muy simple pero que no todos sabemos al principio: cómo conectar un lector de código de barras a nuestra aplicación de JavaScript.

Con esto me refiero a un lector de código de barras físico, conectado a la computadora ya sea por USB o PS/2.

Vamos a leer el código de barras y saber cuando el código se ha terminado de leer. Todo esto en la web con JavaScript y un input.

Nota: recuerda que en mi blog ya te enseñé a leer códigos de barras en JavaScript con la cámara del dispositivo, pero no con un lector físico de esos que tienen “luces rojas”.

(más…)

Ganancias por día y por mes en programa gratuito para renta de consolas

Sistema gratuito para renta de consolas de videojuegos

En este post te mostraré un programa que he terminado de hacer y que es totalmente gratuito. Se trata de un software para rentar consolas de juegos o computadoras por tiempo y cobrar por ese tiempo, con opción para agregar productos adicionales a la renta.

El sistema gratuito te ayudará si tú tienes un negocio de renta de consolas de juegos o tienes un cibercafé. De cierto modo esto podría ser una alternativa a CafeStation de CafeSuite o Control de Ciber.

Este sistema permite registrar equipos como consolas de juegos o computadoras con precio por hora, colocar tiempo libre o un tiempo límite y agregar productos al consumo de la renta.

Entre sus características se encuentran:

  • Control de dispositivos con descripción y precio por hora
  • Gestión de productos para vender, con descuento de inventario
  • Módulo para rentar consolas, computadoras, etcétera ya sea por tiempo libre o con límite
  • Escritorio con reporte de rentas y productos vendidos, así como gráficas de ventas y detalles
  • Ajuste de redondeo y tolerancia para el costo de la renta
  • Impresión de tickets en impresora térmica
  • Soporte para móviles
  • Opción para usar a través de la red de área local (LAN)

A lo largo de este artículo te mostraré los módulos del programa, cómo descargarlo y cómo usarlo.

Por cierto, no es un post falso ni algo para distribuir virus. Realmente te ofrezco un programa totalmente gratuito (no versión demo, sin restricciones) tal y como todo lo que publico en mi blog.

(más…)

Gráfica con chart.js y Vue.js usando Webpack y NPM - Integración

Usar chart.js con Vue.js, Webpack y NPM

Hoy voy a enseñarte a usar chart.js (librería para crear gráficas en la web) con Vue.js cuando se programa en Webpack con NPM.

Te aviso desde ahora que probablemente esta no sea la manera de vue, es decir, lo haremos como lo haríamos sin usar el framework, pero esto me ha funcionado y te funcionará a ti para no tener tantos problemas al integrar Chart.js con Vue.

Nota: primero te invito a familiarizarte con chart.js, ya que aquí solo te enseñaré a usarlo con Vue a través de webpack con npm.

(más…)

Obtener lista de archivos (imágenes) con PHP y glob

PHP: obtener imágenes de directorio

En este post de programación en PHP te mostraré cómo escanear el directorio actual (donde se ejecuta el script) para obtener una lista de todas las imágenes existentes, ya sean gif, png o jpg.

Obviamente con este ejemplo tú vas a poder obtener la lista de archivos de cualquier extensión o que cumplan con determinado patrón. Para esto vamos a usar la función glob.

(más…)