VueJS

Archivos env para Vue js y Vue CLI

Variables del entorno con Vue.js y Vue CLI

septiembre 23, 2019 0 VueJS web Webpack

Las variables del entorno en Vue.js sirven para saber el entorno en el que estamos (producción o desarrollo) y también para acceder a otros datos que cambian dependiendo del entorno.

Por ejemplo, en producción podemos tener una clave API o una URL de la API, mientras que en desarrollo esas variables pueden cambiar.

Es por ello que las variables del entorno o environment variables de la Vue CLI vienen para ayudarnos, ya que nos permiten definir variables propias y también a conocer el entorno en el que estamos.

Continue reading…

Turnero web – Software para Control de turnos

septiembre 5, 2019 2 php Software y sistemas VueJS web

Un software turnero o de control de turnos sirve para solicitar turnos y hacer citas de usuarios, para que los mismos sean atendidos por profesionales o encargados en un orden.

Hoy vengo a presentar un turnero en PHP, es decir, es un software de control de turnos para la web, que funciona en móviles, computadoras y tabletas.

Este turnero fue encargado por un cliente hace unos meses.

Continue reading…

Directiva v-for en Vue JS

agosto 15, 2019 0 HTML javascript VueJS

Resumen

En este post te mostraré cómo repetir cosas en la vista de una app con Vue.JS usando v-for.

v-for permite iterar arreglos, objetos y también hacer ciclos.

Veremos cómo usar v-for, además de proporcionar la clave con :key y finalmente tomar el índice y el valor por separado.

Nota: a través de los ejemplos usaré Bootstrap 4 para un mejor diseño, aunque esto no va a interferir con el tema principal de v-for y Vue.

Continue reading…

Sistema web de pagos y cooperaciones open source con PHP

julio 1, 2019 0 Bootstrap 4 mysql php Software y sistemas VueJS web

Hoy vengo a presentar un sistema gratuito y open source para el control de pagos y cooperaciones creado con PHP, MySQL, Twig, Bootstrap y Vue

Este sistema de pagos está creado con PHP para el lenguaje del servidor, utiliza Twig para renderizar las plantillas, mismas que tienen un diseño usando Bootstrap. La persistencia de datos es gracias a MySQL.

Del lado del cliente se utiliza Vue para consumir la API y traer los datos.

Entre sus características encontramos:

  • Software para el control de pagos de personas
  • Registro de personas
  • Posibilidad de registrar usuarios para iniciar sesión
  • Impresión de comprobantes de pago en impresora térmica
  • Reporte de totales abonados por personas
  • Responsivo y accesible desde teléfono, tableta o computadora

Con algunas modificaciones, este software podría controlar el sistema de abonos de ventas de productos, cooperaciones de personas, pagos, etcétera.

Puede servir para estudiar un proyecto de PHP o para usarlo directamente en producción (de hecho yo lo estoy usando)

A continuación voy a explicar cómo funciona, además de mostrar el código fuente y otras cosas más.

Continue reading…

Validar formularios en Vue con Vee Validate

junio 2, 2019 0 HTML javascript VueJS web Webpack

Vee Validate es un plugin de Vue.js que sirve para validar formularios de una manera fácil pero poderosa.

Lo que destaca es:

  • Su simplicidad, pues no se tiene que estudiar demasiado para comenzar a usarlo
  • La flexibilidad que ofrece
  • Soporte para otros idiomas (entre ellos el español)
  • Mensajes de error predefinidos
  • Simple sintaxis y validadores por defecto
  • Reglas personalizadas
  • Manejo del evento que desencadena la validación

En este artículo vamos a dar un repaso y explicación de VeeValidate con algunos ejemplos.

Al final tendremos un ejemplo completo que se puede ver aquí, que es como en la imagen:

Validación de formularios con Vue.js, VeeValidate y Bootstrap

Continue reading…

Configurar VSCode y Vetur para programar con Vue

mayo 24, 2019 0 javascript Visual Studio Code VueJS web

Vetur es una extensión para Visual Studio Code y proporciona una caja de herramientas para programar con Vue. Entre sus principales características encontramos:

  • Remarcado de sintaxis
  • Algunos snippets
  • Soporte de Emmet
  • Comprobación de errores
  • Formateado de código
  • Autocompletado
  • Depuración

VSCode o Visual Studio Code se ha convertido en un potente pero ligero editor de código. No es un IDE ni un editor de texto plano, se encuentra entre estos dos y mantiene la sencillez de un editor con muchas características de un IDE.

Al comenzar a programar en Vue (con archivos que tienen la extensión .vue) no se muestra un resaltado de sintaxis ni las herramientas del lenguaje:

1 – Sintaxis no marcada

Veamos entonces cómo instalar Vetur y analicemos las herramientas que proporciona para hacer el desarrollo con Vue más fácil y agradable.

Continue reading…

Primeros pasos con VueRouter: el enrutador de Vue

mayo 23, 2019 0 javascript VueJS web

Una vez que ya hemos creado un proyecto con la CLI de Vue (usando Buefy, por ejemplo) podemos agregarle otros paquetes como un enrutador.

Vue Router es el enrutador oficial para Vue.Js y permite crear Aplicaciones de una sola página o Single Page Applications.

De esta manera tenemos una navegación más fluida sin recargar la página, ahorrando ancho de banda y agregando velocidad.

En este post vamos a ver cómo instalar y configurar el enrutador de Vue usando NPM, además de configurar las rutas para que coincidan con nuestros componentes.

Continue reading…

Aplicación de notas con localStorage, JavaScript, Bootstrap y Vue js

Aplicación web para tomar notas con JavaScript, Vue.js, Bootstrap y localStorage

abril 13, 2019 0 Bootstrap 4 css HTML javascript Software y sistemas VueJS web

Hace algún tiempo creé una aplicación web como un ejercicio para aplicar para un trabajo. Decidí hacerla con Vue.js, Bootstrap y localStorage en conjunto.

Al final resultó en algo como lo de la imagen:

Aplicación de notas con localStorage, JavaScript, Bootstrap y Vue js

Aplicación de notas con localStorage, JavaScript, Bootstrap y Vue js

Es una simple aplicación de notas que puedes crear, eliminar, editar y listar. También se puede cambiar el color de todas las notas (fue un requisito, no cosa mía, así como el idioma).

Continue reading…

Generador de diagramas de clase UML con JavaScript y Canvas

Generador de diagramas de clase UML con JavaScript

marzo 17, 2019 0 Bulma CSS javascript Software y sistemas VueJS web

Introducción

En una de las materias que estoy cursando (o que cursé, dependiendo del momento en el que esto se publique) tuve que presentar todas esas cosas aburridas que conlleva el desarrollo de software.

Me refiero a los diagramas, casos de uso, clases, interfaces y todas esas cosas que al final (desde mi punto de vista) no sirven para nada y solamente hacen perder tiempo.

Continue reading…

Sistema web para cotizaciones y presupuestos

Presentando un sistema web para hacer cotizaciones y presupuestos, gratuito y open source

enero 10, 2019 15 Bootstrap 4 Bulma CSS HTML javascript mysql php Seguridad Software y sistemas sql VueJS web

Hoy vengo a presentar un software para realizar cotizaciones o presupuestos, el cual es totalmente gratuito de usar en la nube; así como open source. Es decir, aparte de que puedes usarlo en mi sitio, puedes descargarlo y modificarlo.

Sistema web para cotizaciones y presupuestos

Sistema web para cotizaciones y presupuestos

Características del software

No es la gran cosa, pero entre sus principales características encontramos las siguientes:

  • Realizar cotizaciones o presupuestos
  • Estimar el costo requerido, el cual se configura por cada servicio
  • Calcular tiempo requerido por cada servicio
  • Describir características y/o condiciones del trabajo
  • Agregar clientes para ligarlos a las cotizaciones
  • Imprimir la cotización o guardarla como PDF (esto depende del navegador la mayoría de veces)
  • Multiusuario: cualquier usuario puede registrarse y usarlo, así de simple. Eso sí, las cotizaciones, servicios y características son separadas por usuario
  • Totalmente open source
  • Escrito con PHP, utiliza PDO para interactuar con la base de datos
  • Base de datos MySQL
  • Lado del cliente con Vue.JS y Bootstrap
  • Mensaje de agradecimiento, presentación y pie totalmente configurables

Se me ocurre que puede servir tanto como para estudiantes que tienen que entregar un proyecto con PHP simple, así como para personas que necesitan un software como estos.

Voy a explicar cómo fue creado, en dónde se puede probar y también dónde se puede leer el código fuente.

Continue reading…

App que explica la conversión hexadecimal a decimal

Explicando la conversión hexadecimal a decimal manualmente usando JavaScript

noviembre 10, 2018 0 Algoritmos javascript Matemáticas discretas VueJS web

App que explica cómo convertir hexadecimal a decimal en JavaScript con Vue.JS 2

Como lo dije en otro post, hice una pequeña app que te explica cómo convertir un número hexadecimal a decimal. No es como cuando vimos conversión entre bases con JS, pues eso se hacía pero el lenguaje se encargaba.

Lo que trato de hacer aquí es explicar el procedimiento para realizar la conversión. Esto es por si estamos en nuestras clases de matemáticas discretas o simplemente algún día necesitamos hacer la conversión hexadecimal-decimal a mano.

Nota: te invito a ver una app que convierte bases.

Continue reading…