VueJS

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…)

Por parzibyte, hace
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…)

Por parzibyte, hace
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…)

Por parzibyte, hace
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…)

Por parzibyte, hace
Ajustes del sistema - Impresora y acceso a través de la LAN

Software para control de eventos, aforo y boletería

En este post te mostraré otro sistema que he realizado recientemente. Se trata de un programa para llevar el control de eventos por tiempo, en donde se cobra por el tiempo que la persona ingresa al evento.

Esto está pensado para controlar el acceso a eventos como parques, piscinas, juegos, etcétera; ya que se registra el tiempo de entrada y de salida a partir de un número de pulsera.

Cuando la persona sale del evento se realiza el cobro del mismo y se imprime un ticket. Las características del software son:

  • Control de aforo: Indica cuántas personas están dentro del establecimiento o evento
  • Registro de datos con número de pulsera para tener un identificador
  • Posibilidad de acceder desde el teléfono o cualquier dispositivo para que una persona esté en la entrada y otra en la salida del evento a través de la LAN
  • Opción para anular los tickets
  • Reporte de ventas en donde se incluyen filtros por fecha y hora, así como un reporte que indica la cantidad de tickets vendidos o anulados.
  • Reporte de ticket con mayor costo y ticket con menor costo
  • Impresión de tickets en impresora térmica

Realmente este programa fue pensado para llevar el control de eventos a donde asisten niños acompañados con sus padres (en donde dependiendo del tiempo de la estancia, se realiza el cobro) pero se puede adaptar a cualquier circunstancia.

(más…)

Por parzibyte, hace

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…)

Por parzibyte, hace

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…)

Por parzibyte, hace

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
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…)

Por parzibyte, hace

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…)

Por parzibyte, hace
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…)

Por parzibyte, hace