MANUAL DE

CREACIÓN DE
CÓDIGOS QR, COMO
HERRAMIENTA
PARA PASE DE
LISTA,
PARTICIPACIONES,
ETC. EN FORMATO
DE CLASES
HÍBRIDAS.

Una alternativa de la mano de herramientas de google.

ING. FRANCISCO DANIEL MARTÍNEZ

MARTÍNEZ.
Una alternativa más para tecnologías en el aula.

Durante la primera conferencia magistral del día sábado 26 de marzo del 2022, El primer congreso
híbrido, TRANSFORMACIÓN EDUCATIVA: RETOS E INNOVACIONES FRENTE A LA NUEVA
NORMALIDAD, de la mano del Dr. José Lorenzo Sánchez Alavés con su conferencia de “El aula
enriquecida con tecnología digital” nos mostró distintas tecnologías que pueden ser empleadas
para mejorar el aula, no obstante, la gran mayoría de “aplicaciones”, estaban solamente
desarrolladas hacia ciertos dispositivos, con ciertas características, no siendo amigable para los
distintos usuarios. Por lo cual me di a la tarea de crear un pequeño manual para crear una
herramienta parecida a esta donde solamente usemos nuestro correo gmail para realizar toda esta
aplicación. Por lo cual vamos a crear un sistema de registro de asistencia con códigos QR y Google
Sheets, el cual puede ser empleado para participaciones, para calificar tareas, o cualquier otra
problemática del aula que pueda ser solucionada con esta herramienta tecno pedagógica.

“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.” Alekz (2022)

Vamos a comenzar, primeramente necesitamos abrir una pestaña en nuestro navegador favorito,
ya sea Google Chrome, Mozila FireFox, Safari, Opera, etc. Iniciamos sesión con nuestro correo en
gmail. Una vez hecho esto, abrimos una Hoja de Cálculo (Google Sheets), en esta hoja de cálculo
pondremos en las columnas necesarias para los datos que usted necesite, podemos poner el
nombre que desee. Por ejemplo: Número de Lista, Apellidos, y Nombre. Yo le recomendaría usar la
menor cantidad de datos, para que nuestro código QR no sea tan grande.

Después vamos a crear otra hoja llamada Asistencia, en la cual vamos a alojar toda la información
de cada persona asociada a una fecha y hora que se realizó el registro de asistencia. Esta Hoja se va
a llenar de manera automática.
Ahora vamos a utilizar los datos que pusimos al principio del tutorial, donde vamos a convertir los
datos en parámetros, dándoles este formato, ya que es necesario mandar los parámetros para que
sean registrados automáticamente. Estos parámetros tendrán el siguiente formato específico:

?parametro1=valor1&parametro2=valor2
Cada columna será un parámetro, y cada valor de la celda pertenece a ese 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
comienza con el 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 (&).

Siguiendo nuestro ejemplo será de esta forma en la columna D:

="?numeroLista="&A2&"&ap="&B2&"&nombre="&C2
Para poder llenar las columnas que siguen, primero tenemos que analizar una función especial
demasiado útil, que son específicamente funcionales para las Hojas de Cálculo de Google Sheets.
Esto está dentro de un concepto de las web apps (Una tecnología que está en auge). De esta app
solamente necesitamos que reciba información y una función que procese esta misma información,
que llevara el nombre de doGet en código Apps Scripts (Java Scripts).

Vamos primero al menú de nuestra hoja de cálculo (Google Sheets) Extensiones – Apps Script.

Ahora vamos a usar código que hará todo el trabajo sucio y repetitivo por nosotros, vamos a
reemplazar el código que viene por default por este:

function doGet(e) {
// Obtenemos el correo de la cuenta ejecutando el registro
const correo = Session.getActiveUser().getEmail();
// Registramos la asistencia usando el correo y los parámetros que vienen en la
URL
registrarAsistencia(correo, e.parameter.numeroLista, e.parameter.ap, e.paramet
er.nombre);

// Damos retroalimentación sobre lo que sucedió:

return HtmlService.createHtmlOutput(`
Asistencia registrada correctamente. <br><br>
Correo que registró: ${correo}<br>
Fecha: ${new Date()}<br>
ID: ${e.parameter.numeroLista}<br>
Apellidos: ${e.parameter.ap}<br>
Nombre: ${e.parameter.nombre}<br>
`);
}

function registrarAsistencia(correo, numeroLista, ap, nombre) {

// Debes cambiar este identificador por el de tu documento de hoja de cálculo
const sheet = SpreadsheetApp.openById("Codigo de a Hoja de Cálculo Aquí ");
const asistencia = sheet.getSheetByName("Asistencia");
const lastRow = asistencia.getLastRow()+1;
asistencia.getRange(lastRow, 1).setValue(numeroLista);
asistencia.getRange(lastRow, 2).setValue(ap);
 asistencia.getRange(lastRow, 3).setValue(nombre);
asistencia.getRange(lastRow, 4).setValue(correo);
asistencia.getRange(lastRow, 5).setValue(new Date());
}

En este código ya tenemos las 2 funciones que mencionamos anteriormente para manipular estos
datos, pero ahora creamos otra más registrarAsistencia donde pasamos los parámetros creados
anteriormente, para crear un nuevo registró en la hoja de cálculo. También aquí generamos un
código HTML para ver cuáles son los parámetros que registramos.

Dentro de esta función registrarAsistencia, necesitamos meterle un código que nos indica que esa
es la hoja de cálculo que se usara, así como el nombre de la hoja donde se escribirán esos datos.
Este identificador está dentro de la URL del documento. Es lo que está entre /d/ y /edit:

Una vez introducidos los datos pertinentes, necesitamos publicar nuestra web app para que pueda
ejecutarse y estar disponible siempre que la necesitemos en la famosa nube. 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.

Ahora para la seguridad y que el único que pueda ecanear los códigos QR necesarios sea una sola
persona, necesitamos aclararlo en esta parte, si desea ser usted, o un grupo de trabajo, o cualquier
persona.
Aquí es donde podemos seleccionar quien puede registrar o no.

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 y será usada en un momento.

En este momento copiamos esta URL y regresamos a nuestra hoja de cálculo, y vamos a crear una
nueva columna llamada doGet con la que le daremos los parámetros para las celdas.

De esta forma.
="https://script.google.com/a/macros/cudeoriente.edu.mx/s/AKfycbxfFXnZpAifnPCLLbxih5zWZuHccsg
woJ4yzJk9ZhOCu9og3H0tR7wMNnEoWvnrTZC65Q/exec"&D2

Cada una de estas URLs esta compuesta sobre los datos de los alumnos, por lo cual, cada alumno
tendrá un código QR diferente, de la misma manera no olviden que los parámetros ya los hicimos
en el apartado de DatosJuntos, estos los vamos a concatenar para introducir los PARÁMETROS
dentro de la URL y el método pueda leer los datos.
Ahora vamos a crear los códigos QR de una fácil y sencilla, ya es el último paso para terminar nuestra
herramienta, por lo cual vamos a usar una API oficial de google para generar este código QR, una
vez más les recuerdo que los DatosJuntos son los Parámetros, y estos serán encapsulados. Pero
recordemos que nuestro idioma tiene caracteres especiales, como lo son los acentos, eñes, etc,
entonces para no tener problemas con estos datos, los vamos a utilizar la formula ENCODEURL, de
esta manera:

="https://chart.googleapis.com/chart?chs=500x5
00&cht=qr&chl="&ENCODEURL(2)
Lo vamos a incrustar en el apartado de ENCODEURL y ahí metemos la formula anterior.

Y ya para generar la imagen, vamos a usar la formula IMAGE para mostrar la imagen del código QR
de nuestro alumno en la última parte. La fórmula a emplear queda de la siguiente forma:

=IMAGE(E2)

Ya en este momento quedo finalizado, ahora vamos a realizar una prueba.

Escaneamos con la propia app integrada por mi navegador del celular el código QR y nos aparece
los datos que son introducidos automáticamente en la hoja de asistencia.
Ahora verificamos los datos en la hoja de ASISTENCIA de nuestra google sheets.

Estos son los datos que se tiene en el celular cuando se escaneo, son automáticamente cargados
dentro de la hoja de ASISTENCIA. Entonces ya está totalmente funcional, no es necesario tener la
hoja abierta, no importa, puede escanear sus códigos y automáticamente se cargan sea donde sea,
este donde este.

De esta forma ya terminamos toda la herramienta lista. Ahora ya sabe conocimientos básicos sobre
programación y una de las maravillas que podemos realizar con las herramientas de google.
Gracias por Acudir a este taller, esperamos que sea de tu agrado, de esta manera puedes seguirme
en mi canal de TWITCH donde hacemos transmisiones donde creamos herramientas de tecnología
no solamente enfocadas a la educación, de todo un poco, también charlamos y hacemos amigos.

https://www.twitch.tv/pakopank97

De la misma manera si gustas apoyarme para seguir haciendo estos talleres para generar
conocimiento de tecnologías, puedes hacerlo a través de paypal.

https://paypal.me/pakopank97?locale.x=es_XC

De la misma manera si gustas invitarme a dar un taller o una conferencia en tu escuela sobre
tecnologías, seguridad informática, y/o programación con gusto puedes invitarme, puedes
contactarme por franiciscodaniel97@gmail.com

GRACIAS

Atentamente su amigo el ISC. Francisco Daniel Martinez Martinez.