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

Consumo de una API REST con Vue.js y JavaScript

En este artículo te voy a enseñar a consumir una API REST usando JavaScript y el framework Vue.js, además de utilizar Bootstrap para el diseño.

Al final vamos a tener una aplicación web que va a gestionar datos y hacer las 4 operaciones básicas: crear, actualizar, eliminar y obtener.

Todo esto lo vamos a hacer sin tocar el código del servidor, pues simplemente nos vamos a enfocar en la programación del lado del cliente, así que solo veremos HTML, JavaScript y un poco de CSS.

(más…)

Sistema de registro de asistencia con tarjetas RFID

Hoy te mostraré un software que acabo de programar usando PHP, MySQL, tarjetas RFID y una tarjeta ESP8266. Este programa es totalmente gratuito y open source.

Se trata de un sistema de registro de asistencia de empleados en PHP, basado en otro sistema que recién publiqué, pero ahora con una característica adicional: la asistencia también puede ser tomada usando tarjetas RFID.

De este modo se pueden asignar tarjetas RFID a los empleados (incluido totalmente en el sistema) y también pasar la asistencia de manera automática al usar estas tarjetas.

Con ligeras modificaciones incluso se podría hacer un sistema para el registro del tiempo, entradas y salidas a determinado lugar, etcétera.

A través del post te mostraré cómo usar el sistema, descargarlo, y sobre todo cómo está programado.

(más…)

El ahorcado (juego) en JavaScript

En este post te mostraré un juego que he programado recientemente. Se trata de El ahorcado o hangman, en su versión web programado con JavaScript; totalmente gratuito y open source.

El ahorcado en JavaScript – Programación de juego

El juego está escrito con el lenguaje JavaScript, usando Vue.js y Bootstrap. Cuenta con:

  • Gestión de palabras. Puedes agregar y eliminar palabras para jugar al ahorcado
  • Elección de palabra aleatoria: cada vez que juegas se selecciona una palabra aleatoria del banco de palabras que el usuario ha registrado
  • Botones con letras para adivinar la palabra, mismos que se deshabilitan una vez que se ha intentado esa letra
  • Imagen del ahorcado, misma que cambia con el número de intentos
  • Juego totalmente responsivo (adaptable a teléfonos, tabletas, etcétera)

A continuación te mostraré cómo está hecho, en dónde puedes descargarlo, etcétera. Pues es un juego open source y gratuito que puedes modificar sin problemas.

(más…)

Conecta 4 en JavaScript y HTML

En este post te mostraré el juego de Conecta 4 programado en JavaScript con HTML y Vue, con estilos de Bootstrap.

Conecta 4 en JavaScript, HTML – Versión web

Es el juego de Conecta 4 pero versión web con opción jugador contra jugador, así como jugador contra CPU que usa una pequeña inteligencia artificial.

A lo largo del post te mostraré cómo funciona el juego, qué tecnologías he usado, estilos, etcétera. También te mostraré cómo descargar el código fuente, pues el juego es totalmente gratuito y open source. Finalmente te dejaré una demostración para jugar conecta 4 en línea.

(más…)

Autocompletado con Bootstrap, Vue y API

En este post  te mostraré cómo hacer un autocompletado, autocomplete, auto completado o como le llames usando Bootstrap, Vue y una API.

De modo que al final (por si no sabes lo que es un autocompletado) se cuente con una caja en donde se complete mientras el usuario escribe, así como la búsqueda de Google.

Te mostraré dos ejemplos, uno en donde los resultados se completan localmente, y otro en donde se hace una búsqueda para traer los resultados de la API en tiempo real. Voy a dejar el código completo al final.

Nota: si buscas un autocompletado con JavaScript puro, mira Awesomplete.

(más…)

DatePicker de Buefy en español

Buefy es un paquete de componentes que combinan BulmaCSS y Vue.js. Entre esos componentes encontramos el b-datepicker que no es más que un seleccionador de fechas, calendario o datepicker.

Por defecto viene en inglés, pero provee la manera de especificar los meses y días en español, cosa que te enseñaré hoy: cómo poner el datepicker de Buefy en español.

(más…)

Vue: eliminar referencias de arreglos

En posts anteriores mostré la manera de eliminar las referencias de arreglos en JavaScript usando slice o el operador de propagación. Sin embargo, con el framework Vue las cosas son un poco distintas debido a su reactividad.

Hoy te mostraré cómo eliminar la referencia de un arreglo en Vue o, en otras palabras, cómo realizar una copia de un arreglo en Vue.

Este error me dio bastantes dolores de cabeza, y siempre me los ha dado. Al fin encontré la solución y vengo a compartirla.

(más…)