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.
Hoy vengo a presentar un sistema que recién he terminado de programar. Se trata de un software open source escrito en PHP con MySQL y Bootstrap, mismo que es un acortador de enlaces similar a los acortadores como bit.ly.
En este caso este programa se encarga de acortar enlaces, redireccionar a los usuarios y registrar cuando se hace clic. Aunque su funcionamiento está inspirado en los acortadores de enlaces, no tiene todas las funciones idénticas.
Este software gratuito que he creado con PHP tiene las siguientes características:
Login y gestión de usuarios
Creación de enlaces
Enlaces sin redireccionamiento instantáneo: en este caso, antes de redireccionar al usuario, se presenta una plantilla en donde se puede poner publicidad, avisos, redes sociales etcétera.
Links con redireccionamiento instantáneo: simplemente redireccionan al usuario de manera transparente, registrando el clic o visita.
Reporte general de clics en rango de fecha, con gráfica y descripción de los enlaces más populares
Como siempre te digo, este software se puede personalizar, tomar como base, etcétera. Por cierto, hace un tiempo hice un software parecido pero ese acorta enlaces para ganar dinero, usando a su vez acortadores como ouo, adfly, etcétera.
En este post de programación en JavaScript y fechas te mostraré cómo obtener la fecha de inicio del mes actual, y cómo obtener la fecha del fin del mes actual.
Por ejemplo, el mes en el que escribo este post es diciembre, así que te mostraré cómo obtener la fecha del 1 de diciembre del 2020 y cómo obtener el 31 de diciembre del 2020, independientemente del número de días que tiene cada mes.
Adicionalmente te mostraré cómo formatear esa fecha en formato de YYYY-MM-DD, pero recuerda que puedes formatearlo como tú prefieras, pues tendrás el objeto de la clase Date al final.
Por cierto, este código de JavaScript funciona tanto en el navegador como en el servidor usando Node.
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.
En este post te mostraré un sistema que acabo de programar en PHP y MySQL, además de usar Bootstrap para framework de diseño. Este software que te presento es totalmente gratuito para descargar, y open source.
El sistema en PHP que he creado se encarga de llevar el registro de asistencia de empleados. Por cada empleado, el sistema guarda si ha asistido o no en determinada fecha.
Un módulo con el que este sistema cuenta es con el de registro y gestión de empleados. El segundo módulo se encarga de tomar la asistencia en una fecha concreta (se puede elegir entre asistencia o falta).
Finalmente el tercer módulo muestra el reporte de asistencia de empleados en donde muestra a partir de un rango de fechas la cantidad de faltas y asistencia que tuvo cada empleado.
Como lo dije, este software es totalmente open source y gratuito. La base de datos que usa es MySQL, con el lenguaje de programación PHP, un poco de JavaScript con Vue y finalmente con Bootstrap para el diseño.
A lo largo de este post te mostraré cómo es que fue creado este sistema así como detallar sus módulos, y te dejaré un enlace de descarga como suelo hacer.
En este post de programación con el framework Vue te mostraré cómo mostrar notificaciones, avisos o toasts usando la librería llamada vue-toasted que nos permitirá mostrar pequeños cuadros como notificaciones.
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.
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.
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.
Hoy te voy a presentar un software web programado con Laravel (en el lenguaje PHP, usando un poco de JavaScript) y Vue.js que gestiona un inventario de artículos; permite tomar fotos de los mismos, agregar áreas, etcétera.
No es un software terminado ni listo para usarse en producción, de hecho sirve más para aprender sobre los conceptos de Laravel o para tomarlo como punto de partida.
Al final del post dejaré la historia del mismo, que se resume a que era un software que ya no terminé pero que no me gustaría dejarlo en el olvido siendo que puede servirle a alguien más.
Nota: en el post expongo los fragmentos de código más importantes, pero al final del post también dejaré el enlace al repositorio de GitHub en donde puedes explorar o descargar el código como tú gustes.
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.
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.
Como sabemos, las plantillas de Vue no permiten colocar contenido HTML, y cualquier cadena HTML que se coloque será saneada para evitar posibles ataques, XSS entre ellos.
Sin embargo Vue provee una manera fácil y sencilla de inyectar HTML “inseguro” en un componente o vista, y justamente es lo que veremos en este post.
Los servicios o services de una aplicación web son aquellos que proveen funcionalidades de una entidad en específico; tuvieron una popularidad con AngularJS y Angular, pero en Vue tal cosa no existe.
En este post te mostraré un ejemplo de un servicio de Vue, que si bien no es obligatorio, es totalmente válido.
