Como Crear Códigos QR con jQuery

Nube Colectiva

hace 2 años

En esta página:

Demo Github

Antes de hacer en este Post estuve leyendo sobre cual es el estado de jQuery en 2023 y hay opiniones que dicen que jQuery es usado porque hay página que están creadas con esta librería y también que jQuery cuenta con diferentes plugins que permiten desarrollar funcionalidades rápidamente. Pero también hay desarrolladores que dicen que React puede hacer todo lo que jQuery hace y hoy por hoy no es necesario. Entonces creo que mientras la librería jQuery siga siendo útil podemos aprovecharla para crear funcionalidades que terminan siendo útiles. En este Post te enseñaré a Como Crear Códigos QR con jQuery, vamos con ello.

Los Códigos QR con jQuery permiten compartir contenido rápido

Antes de continuar te invito a leer los siguiente artículos:

Asimismo te invito a escuchar el Podcast: “Las Buenas Prácticas Un Hábito Importante en la Programación” y “5 Habilidades que Debe Tener un Desarrollador Backend (Anchor Podcast)”:

Spotify:	Sound Cloud:	Apple Podcasts	Anchor Podcasts

Bien ahora continuemos con el Post: Como Crear Códigos QR con jQuery.

Como Crear Códigos QR con jQuery

Para mostrar el código QR, creo un archivo llamado index.html y en el creo un contenedor en donde se mostrará el código QR, asimismo antes de la etiqueta de cierre </body> instanciamos a la librería jQuery, debajo de ella el plugin jquery.qrcode.js. Por último debajo llamamos a nuestro archivo app.js en donde escribiremos nuestro código jQuery más adelante:


    <!-- Contenedor Para Mostrar el Código QR --> 
    <div id="qrcodeholder"></div> 

    <footer class="footer mt-auto py-3 bg-light">
      <div class="container">
        <span class="text-muted">Mi Proyecto © <script>document.write(new Date().getFullYear())</script> </span>
      </div>
    </footer>

    <!-- jQuery y el plugin jquery.qrcode.js -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.qrcode.min.js"></script>
    
    <!-- Archivo JS Personalizado -->  
    <script type="text/javascript" src="js/app.js"></script>
      
  </body>
</html>

<span class="text-muted">Mi Proyecto © <script>document.write(new Date().getFullYear())</script> </span>

</div>

</footer>

</body>

</html>

El archivo jquery.qrcode.js lo puedes descargar desde el repositorio de su creador. También puedes encontrar este archivo en el repositorio GitHub de este tutorial.

Ahora creo un archivo llamado app.js y dentro de el agrego lo siguiente (he colocado comentarios para explicar que hace cada línea del código):


$(document).ready(function(){

    $('#contenedorqr').qrcode({
        text    : "https://nubecolectiva.com", // URL a enlazar
        render  : "canvas", // Elemento en donde se mostrará el código QR. También puedes usar la opción 'table' 
        background : "#ffffff", // Color de fondo
        foreground : "#000000", // Color de los fragmentos del código QR 
        width : 300, // Ancho
        height: 300 // Alto 
    });
    
});

$(document).ready(function(){

$('#contenedorqr').qrcode({

text : "https://nubecolectiva.com", // URL a enlazar

render : "canvas", // Elemento en donde se mostrará el código QR. También puedes usar la opción 'table'

background : "#ffffff", // Color de fondo

foreground : "#000000", // Color de los fragmentos del código QR

width : 300, // Ancho

height: 300 // Alto

});

Entonces si abrimos nuestro archivo index.html en el navegador, podemos ver el código QR sin problemas.

Como puedes ver crear un código QR con jQuery es muy fácil.

Al inicio de este tutorial he colocado una Demo para que veas el proyecto en acción, asimismo he colocado un enlace a un repositorio de GitHub en donde puedes encontrar todo el código del proyecto.

Conclusión

En este tutorial has aprendido a como crear un código QR con la librería jQuery y te servirá como base para crear códigos QR en tus proyectos. Existen otros plugins para jQuery te pueden ayudar a crear códigos QR más complejos.

Nota(s)

No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo.

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.