Sistema Generador de QR en Línea

Sistema Generador de QR en Línea

Vamos a aprender a implementar un Sistema Generador de QR en Línea implementado en Javascript, utilizando básicamente una api a la que se le envía el requerimiento, con la URL o el texto sobre el que se va a generar la QR relacionada:

https://goqr.me/api/doc/create-qr-code/

Esta aplicación utiliza javascript para enviar las peticiones, por medio de una variable que se sobre pone en la URL del envío, con la medida de la imagen del QR que para este caso es de 200 por 200 pixeles.

El sistema devuelve la imagen QR y la sobre pone en la página dentro del contenedor con la clase wrapper.

Demo del Sistema Generador de QR en Línea

De la aplicación implementé un demo que puedes ver en el siguiente enlace:

https://mauriciosevilla.com/qr/

Explicación del Sistema Generador de QR en Línea

La aplicación consta de dos archivos principales, que son lo que usuario final visualiza, el index.html, otro archivo llamado style.css que es el que gestiona el como se va a visualizar la aplicación y por último el archivo que lleva la lógica de la aplicación es el script.js.

Esta aplicación en el script.js es de donde se envía la URL o el texto que diligencia el usuario final con el evento clic, que es el que impulsa la consulta al API, esta responde con la imagen del QR, parametrizado a 200 por 200 pixeles.

Descarga he implementación del proyecto en JavaScript

El siguiente es el enlace del repositorio donde tengo el proyecto colgado en GitHub:

Sistema Generador de QR en Línea

Como es una página estática, no se requiere utilizar un backend, no debes instalar ningún servidor basta con descargar el proyecto y ejecutar la página index.html

Subida del Sistema Generador de QR en Línea en Javascript a un hosting

En una publicación previa explico como subir un proyecto similar a este a GitHub Pages si deseas subirlo a un hosting como hostinger en el siguiente vídeo explico la forma de hacerlo:

Subir pagina con PHP + Base de datos (MYSQL) a un Hosting

Cualquier duda quedo al pendiente !!

Deja una respuesta

Tu dirección de correo electrónico no será publicada.