Crear un sistema de registro de asistencia con códigos QR y Google Sheets

Hay muchas formas de pasar lista de asistencia en un grupo, puede ser un salón de clases o una oficina. Las formas más prácticas serán siempre las que permitan que sean las mismas personas quienes registren su asistencia en un sistema y todo se maneje automáticamente, sin complicar este registro. Usar un código QR para lograr este propósito es ideal, ya que simplemente pediremos a las personas que lo escaneen, y así no tendrán que escribir ni validar nada más. Hoy veremos cómo combinar los códigos QR para escribir información automáticamente en una hoja de cálculo de Google Sheets, logrando el objetivo de tener un sistema de registro de asistencia, que es un tutorial que han pedido muchísimo.

Preparar nuestros datos en una hoja de cálculo

Lo primero que haremos será, como siempre, preparar nuestra hoja de cálculo con las columnas necesarias. Para este ejemplo usaremos dos hojas, una con la información de cada persona, por ejemplo un identificador, que puede ser un número, su nombre, y su código QR. Llamamos a esta hoja simplemente QR. Podemos tener tantas columnas como queramos, pero yo sugiero que mantengas al mínimo la información que codificaremos en el código QR.

Luego tendremos otra hoja llamada Asistencia, donde registraremos la información de cada persona asociada a una hora y fecha en la que se realizó el registro de asistencia, así como el correo que registró la asistencia, para llevar un control. Esta es la hoja que se llenará sola cada vez que alguien registre su asistencia escaneando el código QR.

Preparando los parámetros

Las columnas siguientes nos servirán para comprender lo que está ocurriendo en cada registro. Primero tendremos una columna llamada Parámetros, que contendrá la misma información que queremos codificar de las columnas que acabamos de crear, pero en este formato:

?parametro1=valor1&parametro2=valor2

Cada columna será un parámetro y cada valor de la celda corresponderá a ese mismo parámetro. La razón de que esto sea así es que tenemos que darle a una URL la información de las columnas que queremos codificar en cada QR, y esta es la forma estándar de pasar parámetros con sus valores a una URL. Se empieza con un signo de interrogación, se lista el primer parámetro con su valor después del signo de igual, y los parámetros siguientes se separan con un signo de ampersand (&).

Para nuestro ejemplo, será algo así para la columna D:

="?id="&A2&"&nombre="&B2&correo="&C2

Crear una web app con Google Sheets (doGet)

Para poder llenar las columnas siguientes, primero tenemos que explicar una funcionalidad muy útil disponible para nosotros en las Hojas de Cálculo de Google Sheets. Esta funcionalidad es el concepto de las web apps en Google Sheets, y realmente es muy sencillo. Solo necesitamos dos cosas: una URL que reciba la información y la función doGet en código de Apps Script, con la que procesaremos esta información.

Entonces, primero vamos al menú Extensiones – Apps Script

Ahora usaremos un poco de código que hará todo el trabajo por nosotros, entonces reemplazamos el código por default por este:

function doGet(e) {
   // Cambia aquí tu idioma-país y zona horaria
  const fecha = new Date().toLocaleString("es-MX", {timeZone:"America/Mexico_City"});

  // Registramos la asistencia usando el correo y los parámetros que vienen en la URL
  registrarAsistencia(e.parameter.correo, e.parameter.id, e.parameter.nombre);

  // Damos retroalimentación sobre lo que sucedió:
  return HtmlService.createHtmlOutput(`
   Asistencia registrada correctamente. <br><br>
   Correo que registró: ${e.parameter.correo}<br>
   Fecha: ${fecha}<br>
   ID: ${e.parameter.id}<br>
   Nombre: ${e.parameter.nombre}`);
}

function registrarAsistencia(correo, id, nombre) {
  // Debes cambiar este identificador por el de tu documento de hoja de cálculo
  const sheet = SpreadsheetApp.openById("1G-prWyWzgjf9IFtKPryxlMXn0XfOieEhK3P3Sgto");
  const asistencia = sheet.getSheetByName("Asistencia");
  const lastRow = asistencia.getLastRow() + 1;
  asistencia.getRange(lastRow, 1).setValue(correo);
  asistencia.getRange(lastRow, 2).setValue(id);
  asistencia.getRange(lastRow, 3).setValue(nombre);
  asistencia.getRange(lastRow, 4).setValue(new Date());
}Lenguaje del código: JavaScript (javascript)

Como puedes ver, tenemos dos funciones principales: doGet y registrarAsistencia. La función doGet recibe un objeto (e) que contiene los parámetros que vendrán contenidos en la URL codificada en el código QR: el correo, el ID y el nombre. También definimos la fecha con el formato de nuestra zona horaria, idioma y país de preferencia. Después usamos la otra función, registrarAsistencia, pasándole los parámetros, para que se cree un registro nuevo en la hoja de cálculo. Tambien aquí en doGet, generamos el HTML necesario para dar un poco de retroalimentación sobre lo que sucedió:

function doGet(e) {
  // Cambia aquí tu idioma-país y zona horaria
  const fecha = new Date().toLocaleString("es-MX", {timeZone:"America/Mexico_City"});

  // Registramos la asistencia usando el correo y los parámetros que vienen en la URL
  registrarAsistencia(e.parameter.correo, e.parameter.id, e.parameter.nombre);

  // Damos retroalimentación sobre lo que sucedió:
  return HtmlService.createHtmlOutput(`
   Asistencia registrada correctamente. <br><br>
   Correo que registró: ${e.parameter.correo}<br>
   Fecha: ${fecha}<br>
   ID: ${e.parameter.id}<br>
   Nombre: ${e.parameter.nombre}`);
}Lenguaje del código: JavaScript (javascript)

En esta función de registrarAsistencia, primero abrimos la hoja de cálculo correspondiente a través de su identificador. Este lo debemos obtener de la URL de nuestro documento. Es lo que está entre /d/ y /edit:

Después, en la hoja de Asistencia, obtenemos la última fila vacía y en ella escribimos los datos en las columnas correspondientes: el correo, el id de la persona, su nombre y la fecha y hora actual.

function registrarAsistencia(correo, id, nombre) {
  // Debes cambiar este identificador por el de tu documento de hoja de cálculo
  const sheet = SpreadsheetApp.openById("1G-prWyWzgjf9IFtKPpyLryxlMXn0XfOieEhK3P3Sgto");
  const asistencia = sheet.getSheetByName("Asistencia");
  const lastRow = asistencia.getLastRow() + 1;
  asistencia.getRange(lastRow, 1).setValue(correo);
  asistencia.getRange(lastRow, 2).setValue(id);
  asistencia.getRange(lastRow, 3).setValue(nombre);
  asistencia.getRange(lastRow, 4).setValue(new Date());
}Lenguaje del código: JavaScript (javascript)

Publicar web app

Lo siguiente que haremos será publicar nuestra web app para hacer posible que se ejecute este código cada vez que alguien visite la URL de la app. Para lograrlo, primero guardamos nuestro código y vamos al botón de Implementar – Nueva implentación. Y seleccionamos el tipo de implementación como Aplicación web

La descripción que elijas aquí es solo para llevar un control interno, no te preocupes mucho por ella, incluso la puedes dejar como está.

En el apartado de ‘Quién tiene acceso’ nosotros usaremos la opción de ‘Cualquier usuario’, porque queremos que se pueda registrar con cualquier celular.

Al terminar, damos click en el botón de Implementar, y nos pedirá autorizar el acceso a los datos de la hoja de cálculo en nuestra cuenta, entonces, se lo permitimos.

Una vez que eso está terminado, tendremos finalmente la URL de la web app o aplicación web que nos corresponde:

Construir la URL de doGet

Ahora, copiamos esta URL y regresamos a nuestra hoja de cálculo. Aquí, concatenamos la URL de nuestra web app en la columna de URL doGet con la columna de los parámetros, y así para todas las celdas hacia abajo:

="https://script.google.com/macros/s/AKfycbxILqA6gKs9xkqwxkdbOAi21Y2BnoC7LLxuxmImo-bE-yVbzPqJ0ojyA9SvOfp58HwjJALtSg/exec"&D2

Cada una de estas URLs corresponde a una petición que haremos al código que vimos hace unos momentos, que registra en la hoja de Asistencia la información de los parámetros junto con una fecha y una hora exacta. Si probamos copiando y pegando alguna de estas URLs en el navegador, veremos cómo habrá ejecutado correctamente nuestro código y nos habrá dado la retroalimentación correspondiente:

Creando los códigos de QR de asistencia

Bueno, ahora que ya tenemos nuestra URL de doGet lista, lo último que nos queda es construir la URL del código QR, tal como hemos aprendido en guías anteriores, ya sea con la API oficial de Google o con otros servicios que permiten más tipos de códigos.

Recordemos que debemos encapsular la información de la URL doGet en la fórmula ENCODEURL, para no tener problemas si tenemos caracteres especiales como acentos, eñes, etcétera.

="https://api.qrserver.com/v1/create-qr-code/?size=500x500&data="&ENCODEURL(E2)

Actualización 2024: Google retiró el servicio chart.googleapis.com, por lo que se debe usar una alternativa como api.qrserver.com

Y finalmente, usamos la fórmula IMAGE para mostrar el código en pantalla:

=IMAGE(E2)

Estos códigos podemos imprimirlos para que puedan ser escaneados con cualquier celular. Cada vez que alguno sea escaneado, se creará un nuevo registro en la hoja de Asistencia, justo como queríamos. ¿No te parece genial? 🙂

Consideraciones especiales: cambios en el código

Hay algunas cosas que hay que tomar en cuenta. Es importante saber que si por alguna razón tenemos que cambiar el código para que registre otro dato más, tendremos que crear una nueva implementación de nuestra web app y esto necesariamente nos cambiará la URL base, que habrá que actualizar. Esto está diseñado así para poder hacer cambios en el código y hacer pruebas sin tenerlos que publicar antes de tiempo, pero también hace que debamos tener más cuidado con el control de qué código de Apps Script es el que ejecutan nuestros usuarios. Esto es muy relevante con los códigos QR, pues si hacemos esto, tendremos que imprimirlos de nuevo, porque la imagen del código habrá cambiado.

Podemos revisar cada versión de nuestra web app publicada en el botón de Implementar – Gestionar implementaciones

¡Y listo! Ahora ya sabes cómo crear un sistema de registro de asistencia para tomar lista fácil y automáticamente usando Google Sheets y códigos QR. Este ejemplo fue sencillo, pero te recomiendo revisar más sobre la documentación de las web apps y la función doGet para generar HTML propio desde las mismas, ya que las posibilidades son realmente infinitas.

Plantilla terminada para descargar

Plantilla para Sistema de registro de asistencia con códigos QR

Ver más

Guía en video

Si tienes dudas puedes ver esta misma guía explicada en video:

¡Espero que te haya sido útil esta guía! No olvides seguirnos en YouTube para más tips, trucos y guías de productividad.