Debounce con Vue

Hoy te mostraré cómo usar la función debounce con el framework Vue y obviamente el lenguaje de programación JavaScript.

Implementar esta función es un poco confuso debido a la definición de métodos dentro de los componentes de Vue y por la confusión que genera la función, ya que la misma genera otra función y solo debe ser definida una vez al inicio.

Pero bueno, vamos por partes. Verás que a partir de esto podrás usar debounce en tus componentes de Vue.

(más…)

Usar librería de NPM en Vue con webpack y require

En este post de programación con JavaScript y Vue te enseñaré a importar una librería de NPM a un componente de Vue. Si bien esto es algo muy simple, en ocasiones podemos olvidarnos o perdernos.

Por ello es que en el post de hoy te enseñaré a importar un paquete de NPM desde un componente de Vue y usarlo dentro de ese componente a través de require.

Estoy suponiendo que usas la Vue CLI con Webpack, pero incluso si no lo haces, esto podría darte una ayuda.

(más…)

Acceder a data de Vue dentro del propio objeto

En este post de programación con el framework Vue o Vue.js te mostraré cómo acceder a data cuando regresamos los datos o el objeto data de nuestro componente.

Esto es necesario porque en ocasiones necesitamos acceder a los datos de Vue desde la definición.

Al final esto no tiene tanto que ver con Vue.js, sino con JavaScript. Pero incluso así en ocasiones podemos olvidar lo que sucede con los objetos anónimos.

(más…)

Por parzibyte, hace
Agregar elemento a arreglo con JavaScript

JavaScript – Agregar elemento a arreglo

Hoy veremos algo muy simple en JS: cómo agregar un elemento a un arreglo ya sea para agregarlo al inicio o al final.

Esto lo vamos a hacer con JavaScript así que puede que funcione para los frameworks como Vue, React, Angular o jQuery.

Recuerda que un array en JavaScript puede tener elementos mixtos y de cualquier tipo. Por otro lado puedes agregar elementos sin límite.

Veamos entonces cómo agregar un elemento a un array en JavaScript.

(más…)

Recetario web con PHP y Vue - Open source y gratuito

Software para recetas – gratuito y open source

En este artículo te mostraré un software para recetas que es gratuito y open source. Esto también puede ser conocido como recetario online, libro de recetas, libro de recetas en línea, alternativa simple y open source a kiwilimón, libro de cocina online, programa para recetas, programa para gestionar recetas, sitio de cocina, etcétera.

Lo que te muestro aquí está hecho con Vue y PHP usando MySQL como base de datos. Permite:

  • Registrar recetas con foto, nombre, porciones, ingredientes y pasos
  • Los ingredientes cambian dependiendo de las porciones de manera automática
  • Listar recetas en tabla para editarlas y eliminarlas, es decir, gestionarlas
  • Mostrar recetario o libro de cocina en línea con opción de búsqueda
  • Imprimir receta de manera amigable
  • Ver detalles de receta con cajas de texto para marcar los ingredientes y pasos completados
  • Modificar el software a tus necesidades ya que es open source y gratuito

Oh, y si te lo preguntas, decidí crearlo porque en una ocasión busqué una receta y el sitio en donde la encontré no me daba la opción de imprimirlo.

Vamos allá.

(más…)

Vue router – Navegar a componente

En este corto post sobre Vue y el enrutador del mismo te mostraré cómo ir de un componente a otro de manera programada, es decir, desde el código.

De este modo podrás navegar de manera programada con el Vue Router al hacer clic en algún botón o en cualquier acción, pues lo harás por medio del código de JavaScript o TypeScript.

(más…)

Dashboard de sistema para estacionamientos - Mostrar gráficas y total de pagos

Sistema para estacionamientos: gratuito y open source

En este post te voy a mostrar un programa que acabo de crear (totalmente original) que sirve para el control de estacionamiento o parqueadero.

Básicamente es un software gratuito que sirve para llevar el registro en un parqueadero. Este sistema es open source y gratuito, por lo que puedes usarlo sin ningún costo, además de explorar su código fuente.

Las características generales son:

  • Registro de vehículo, ya sea motocicleta, auto, camionetas, etcétera.
  • Registro de fecha y hora de entrada
  • Cálculo del tiempo que el vehículo pasó estacionado
  • Ajuste de costo por hora con redondeo y tolerancia
  • Reporte de vehículos con tiempo de estancia y ganancia
  • Escritorio con reporte general y gráficas
  • Soporte de impresión de ticket de entrada para comprobante de ingreso y comprobante de pago en impresora térmica

A lo largo de este post te mostraré los detalles del software así como las instrucciones de descarga y la ubicación del código fuente.

Nota: en las capturas de pantalla probablemente verás datos aleatorios o incoherentes, pues los he generado aleatoriamente así que no esperes que tengan sentido, solo son de relleno para mostrarte los módulos.

(más…)

Configurar publicPath de Vue CLI en ./

En este tutorial te mostraré cómo hacer que la ruta pública de Vue (al usar la vue cli para compilar nuestros proyectos con npm run build) sea el directorio actual, es decir, ./.

Normalmente la Vue CLI va a compilar y crear el archivo index.html pero en las rutas habrá algo como:

script src=/js/script.js

Si te fijas, no tiene el ./, por lo que en varios servidores causará errores. Hoy te enseñaré cómo hacer que Vue CLI compile las rutas de manera relativa al directorio actual.

(más…)

Reporte de horarios de transporte público y promedios con app checador de transporte público

Checador de transporte público – Aplicación gratuita

En este post te mostraré una aplicación de checador de transporte público (es web, pero puede ser convertida en app móvil nativa gracias a las PWA) para monitorear y registrar los horarios en los que pasa el transporte público.

Reporte de horarios de transporte público y promedios con app checador de transporte público

Reporte de horarios de transporte público y promedios con app checador de transporte público

Esta app es ideal para la persona que es el “checador” del transporte, mismo que registra los horarios en los que pasa cada unidad hacia cada destino o ruta junto con su número.

Más tarde, se puede saber hace cuánto tiempo pasó el transporte a determinado destino, además de calcular el tiempo promedio y llevar reportes por fecha.

Como varios de mis proyectos, esta PWA de checador de transporte público es open source y gratuita. A lo largo del post te enseñaré los aspectos técnicos, cómo descargar el código y cómo descargar la app.

(más…)

Vuetify con iconos y fuentes sin internet

Vuetify agrega diseños y componentes de Material Design a nuestras aplicaciones creadas con Vue. Para varios casos necesitamos los iconos de Material Design así como la fuente Roboto de Google.

Hoy te mostraré cómo tener los iconos y la fuente de manera offline, fuera de línea, local, o como le llames. De este modo nuestra aplicación no dependerá de ninguna conexión a internet, cosa que viene genial cuando vamos a crear una app local.

(más…)