Tarjeta Profesional con Código QR
Pasos a seguir para poder crear nuestras tarjetas de visita donde añadimos un código QR
Comenzamos con un nuevo artículo, donde vamos a aprender a crear tarjetas de negocio con un código QR.
Para poder añadir el link vamos a usar el código QR, que aparte de quedar más profesional, va a hacer que nuestra tarjeta quede más limpia.
Para crear la tarjeta vamos a usar la librería html-pdf, que es una librería que permite crear documentos PDF de una manera muy fácil desde HTML + CSS. Tengo un artículo relacionado al aprendizaje de esta librería en el que os enseño los tips básicos para poder crear nuestros documentos PDF personalizables de una manera muy fácil.
Para crear la imagen del código QR, vamos a usar la librería qrcode que nos va a permitir crear códigos QR en un fichero, en texto para mostrarlo en una imagen,…Nos da unas cuantas opciones y nosotros usaremos una de ellas que vamos a ver a continuación.
Lo que vamos a conseguir al final del artículo es algo similar a esto:
Ahora que ya tenemos claro cuales son los puntos a tratar, vamos a hacer todo el proceso paso a paso y de manera detallada.
1.- Inicio del proyecto
Crear el directorio del proyecto y accedemos a el
mkdir qr-code-pro-card && cd qr-code-pro-cardCreamos el fichero package.json sin el asistente:
npm init -yNos dará un fichero con este contenido (cambiarlo):
2.- Instalar los paquetes necesarios
Vamos a instalar:
Una vez instalado, vamos a comenzar trabajando con la librería qrcode, para aprender lo básico que necesitamos para poder crear códigos QR de una manera muy sencilla.
3.- Crear códigos QR usando la librería
Vamos a aprender dos maneras de crear códigos QR siguiendo la API:
- Creando fichero de imagen de salida.
- Obteniendo los datos de la URL para añadirlos en el atributo src del tag “img”.
En la propia API tenéis más información para optimizar los códigos QR con el nivel de corrección del error, capacidad del código QR y otros ajustes que encontraremos en el README de la librería
3.1.- Creando el fichero de la imagen
Creamos el ficheros index.js y añadimos lo siguiente:
Ahora explico lo que hace esto:
- Línea 1: Importamos el módulo “qrcode”
- Líneas 3–9: Función donde le pasamos el texto que queremos introducir dentro del código QR y el nombre del fichero de salida que conseguiremos al ejecutar esa función.
- Línea 11: Ejecutar la función con los datos del texto que queremos guardar en el código QR y el nombre del fichero.
En este caso conseguiremos un resultado parecido al siguiente:
Os animo que usando el mismo código, pongáis vuestra información y veáis el resultado.
Si queréis comprobar el contenido del código QR, existe este servicio:
3.2.- Creando la URL de la imagen
En este caso, vamos a ejecutar la función “toDataUrl” para poder generar un string que será la URL de la imagen para que podamos asignarla posteriormente en la plantilla HTML que vamos a usar como base para nuestra tarjeta profesional.
Lo que vamos a hacer es lo siguiente para crear esa URL de la imagen:
Ahora explico lo que hace esto:
- Línea 1: Importamos el módulo “qrcode”
- Líneas 2–8: Función donde le pasamos el texto que queremos introducir dentro del código QR al ejecutar esa función.
- Línea 11: Ejecutar la función con los datos del texto que queremos guardar en el código QR para obtener la URL de la imagen y usarlo posteriormente para incrustarlo en el PDF.
Como os he comentado antes, probad con vuestros datos para hacerlo más personalizado.
Ahora que ya hemos visto dos maneras diferentes que necesitamos para crear códigos QR, vamos a centrarnos en la plantilla HTML donde vamos a crear la tarjeta y vamos a incorporar el código QR a partir de la URL de la imagen (lo que hemos hecho ahora mismo).
4.- Añadir la tarjeta de negocios
4.1.- Creamos la plantilla donde se almacena la información
Creamos un fichero llamado card.html y añadimos el siguiente contenido
Ahora explico lo que hace esto:
- Línea 5–73: Estilos de la tarjeta
- Líneas 75-Final: Estructura con los datos de nuestra tarjeta.
- Línea 78: Añadimos un valor “{{image}}” que usaremos para insertar la URL de la imagen y así mostrar dentro de la tarjeta.
4.2.- Definimos el script para generar tarjeta con código QR
Ahora que ya tenemos todas las bases asentadas, hacemos uso de la librería html-pdf para poder crear una tarjeta, haciendo uso del tamaño de papel A7 en las opciones de salida con otros aspectos tratados anteriormente. Creamos el fichero llamado qr-code-pro-card.js
Lo que hace este fichero es lo siguiente:
- Líneas 1–3: Los módulos que importamos para usarlos, fs (File System para leer el contenido del fichero HTML), qrcode (para crear el código QR con su URL de la imagen) y html-pdf (que usaremos para generar la tarjeta final).
- Línea 6: Leemos el contenido del “card.html” y lo almacenamos para añadirle posteriormente la URL de la imagen con el código QR e insertarlo en la tarjeta.
- Línea 7–13: Para crear la URL de la imagen con el contenido del código QR.
- Línea 16–28: Donde creamos la tarjeta.
- Línea 17: Obtenemos la URL de la imagen del código QR generado.
- Línea 19: Reemplazamos {{image}} con lo almacenado en la línea 17.
- Línea 22: Añadimos el tamaño de configuración para dar de salida un A7.
- Línea 24–27: Función donde creamos la tarjeta con el nombre “anartz-card.pdf” con el contenido del HTML con el código QR.
Una vez que tengamos todo correctamente configurado (hacer pasando vuestros datos) ejecutamos el siguiente comando:
node qr-code-pro-card.jsCon esta acción se ejecuta el script y deberíamos de tener disponible al mismo nivel de estos fichero un fichero con extensión PDF con el nombre que hemos especificado en la línea 24, en mi caso anartz-card.pdf, en el vuestro el que asignéis.
Llegados a este punto, obtendremos un resultado similar a lo siguiente:
Es evidente que el resultado es mejorable, donde habrá que dedicarle más tiempo a los estilos y a la estructura del contenido, pero esto ya es trabajo individual que debéis de hacer.
Ya sabéis la base de como crear la tarjeta con un código QR amoldandonos a los nuevos tiempos, por lo que os animo a que hagáis diferentes plantillas y contribuyan a mejorar el repositorio
5.- Repositorio final del proyecto
Os dejo el repositorio, para que tengáis disponible el código y espero que hagáis contribuciones para añadir diferentes plantillas de ejemplo de tarjetas, usando la base creada en este artículo.
6.- Invitame a un café
Si este contenido o cualquier artículo de los que puedes encontrar aquí te resulta útil, si queréis ir obteniendo artículos de calidad, me gustaría vuestro apoyo ya que sin ese apoyo no podré dedicarle el tiempo necesario a crear este contenido de calidad.
Podéis apoyarme desde aquí:
7.- Presencia en redes sociales.
Podéis encontrarme en las siguientes redes.
