¿Qué onda cómo estás? en esta ocasión veremos
cómo crear una web app con apps script y bootstrap que muestre card y modals dinámicos. El
tutorial estará dividido en dos en esta primera parte nos concentraremos en los cards mientras
que en la segunda parte nos centraremos en los modals dinámicos y cómo mostrar distinta
información según el modal seleccionado en esta ocasión utilizaremos un folder de google
drive para almacenar las imágenes de los cards estas imágenes o cualquier imagen que vayas a
colocar en una web app deben tener permiso de lectura para que las personas que vayan a
tener acceso a tu aplicación las puedan ver aquí puedes cambiar el permiso de
lectura y obtener el link de cada imagen en el spreadsheet tenemos los registros
ordenados a mostrar el id de cada jugador y la información básica que
aparecerá en cada card.
Las columnas g h e i contienen estadísticas más detalladas que
se muestran en el modal, el que crearemos en la parte 2. Por último la columna j contiene
el url de la imagen de cada registro creamos tres archivos html como siempre
uno para la estructura de la página 1 para la hoja de estilos y el último para
el código javascript del lado del cliente en el archivo código creamos
nuestra función principal de 'doGet()' en la variable template creamos una
plantilla html a partir de un archivo aquí anotamos el nombre del archivo que tiene
toda la estructura. Como la información se debe cargar desde un inicio utilizaremos una plantilla
y un scriptlet para cargar los datos a la página, de lo contrario sería mejor utilizar el método
google.script.run, entonces en el objeto data invocamos la función 'getSheetData()' que definiremos en un momento en la variable output almacenamos la plantilla
html ya evaluada y devolvemos dicha plantilla definimos la función include ésta recuerda que es para poder tener la hoja de estilos
y de javascript en archivos separados de esta función devolveremos el contenido
html del archivo que se indique como parámetro ahora definimos la función 'getSheetData()' en la variable 'SS' obtenemos
el spreadsheet ligado a este script en la variable 'sheetJugadores' obtenemos la hoja
jugadores o como se llame tu hoja con los datos en la variable de 'dataJugadores' obtenemos
todos los datos de la hoja junto con sus valores para quitar los encabezados de
la hoja jugadores utilizamos el método shift el cual elimina el
primer elemento de un array en este caso la primera fila de los datos de
nuestra hoja que son los encabezados hay que realizar un log del array con la información hay que autorizar nuestro script y aquí podemos observar toda la plantilla de
datos del 'sheet'.
En este momento ya podríamos devolver el arreglo con los datos sin embargo
hay un detalle para que las imágenes se puedan mostrar tienen que estar en otro formato no
en el url que tenemos en el sheet, entonces lo que haremos es integrar a través de cada url para
obtener el 'id' de cada imagen, ojo también podrías manualmente obtener el aire de cada imagen que
es el que está después del 'd' y su diagonal a mí me gusta tener el url en los datos para ver
las miniaturas cuando se seleccionó en la celda iteramos por el arreglo con el método
'forEach' y por cada fila de datos o por cada jugador agregaremos el 'id' de
cada imagen en la posición número 10 entonces el elemento 10 del array jugador será
igual al 'id' que contiene la url, que está en la posición 9 y para extraer el 'id' vamos a
utilizar un método que está en esta en stackoverflow aquí podemos encontrar muchas soluciones
a problemas comunes de programación copiamos el método replace y lo
añadimos a la url de la imagen básicamente lo que hace este método
es extraer a partir de expresiones regulares el 'id' y de la imagen, quitando las
cadenas que están antes y después del 'id' realizaremos una prueba imprimiendo la
posición 10 de cada elemento del array corremos el código y aquí podemos ver
que todas las posiciones 10 de cada una de las filas contienen el 'id' de la url
que estaba en la posición 9 que es esta entonces comentamos esta línea
y vamos a realizar un 'console' del arreglo con los datos de los
jugadores el arreglo ya completo y aquí tenemos los datos del 'sheet'
y el 'id' en la última posición entonces ya podríamos devolver
los datos al lado del cliente en el archivo css insertamos el link del framework recuerda que este la encuentras
en la página principal de bootstrap dentro de las etiquetas de estilo seleccionamos
el body y agregaremos un padding de 20 píxeles en el archivo index antes de terminar
el encabezado agregaremos un scriptlet para insertar el código del archivo css y antes de terminar el body utilizamos otro 'force-printing-scriptlet' para insertar el contenido del archivo 'js' para insertar la primera tarjeta
en el archivo index agregamos un 'div' con la clase container, aquí adentro
insertaremos el código del componente en Bootstrap, dentro de la sección
componentes nos dirigimos a los cards este tipo de componente es un contenedor
flexible y extensible que incluye encabezados pies de página y contenido contextual que podemos
reutilizar.
Copiamos el código de este card básico y lo pegamos dentro del contenedor voy a dar un poco
de espaciado para hacer el documento más legible Guardamos, y creamos una nueva implementación de tipo web app dale el nombre que prefieras, implementa y vamos a abrir la implementación de prueba aquí podemos apreciar el kart con el espacio
para una imagen un título un texto y un botón vamos a agregar un loop para recorrer el objeto
data, que se cargará cuando se abra la aplicación insertamos un scriptlet y
utilizamos el método 'forEach' aquí vamos a cerrar el 'scriptlet' para
insertar nuevamente elementos html y en esta parte voy a copiar el
código del card dentro del loop igual voy a acomodar el espaciado
para que se pueda leer más fácil una vez que por cada una de las
filas se haya creado una tarjeta se debe de cerrar el loop entonces aquí
necesitamos nuevamente abrir, para que considere el paréntesis y la llave parte
del código y después cerrar el scriptlet.
Cargamos la página y ya tenemos 11 tarjetas
porque tenemos 11 registros en el hit aquí está cada una de ellas. Por default las tarjetas no
tienen este espaciado ni ni margin aquí están los 11 registros del sheet si agregamos más registros
se agregarán más tarjetas. Entonces ahora vamos a agregar contenido dinámico a cada uno de los card
primero agregaremos un margin a la clase card, para separar los cards unos de otros en la fuente de
la imagen necesitamos un formato específico en este post de stackoverflow se muestra el formato
que debe de tener el url de un archivo de drive hay que copiarlo e insertarlo en nuestro código y aquí en el 'id' voy a insertar un
'id' de cualquier imagen que tenga en mi folder de la aplicación tomaré esta
imagen de muestra, dentro del vínculo voy a copiar solamente el 'id' está aquí después de la
d, ojo la tarjeta es expansible entonces tendrá el tamaño de la imagen por lo que debes de considerar
este tamaño de las imágenes que quieras mostrar guardamos y corremos la implementación : ) ya tenemos los cards con
margin y con imágenes de drive de momento todos presentan la
misma imagen entonces para que la imagen cambia de manera dinámica
necesitamos estar cambiando el 'id' de la etiqueta de manera dinámica y este 'id'
lo tenemos en el array en la posición 10 para eso lo agregamos al array.
Entonces
borramos este 'id' y aquí vamos a insertar un scriptlet para que cada que se itere por
el array se agregue el 'id' de cada imagen el 'id' estará en el arreglo en la posición 10 recargamos la página y aquí tenemos ya nuestra
aplicación con todas las imágenes que tenemos en los registros. De la misma manera voy a agregar
los scriptlets para insertar los datos faltantes y completar el card.
Intenta pulsar el vídeo y
hacerlo o sígueme para ver cómo completar el caldo ya tenemos los cards con información dinámica,
tenemos en la imagen el nombre del jugador y la información básica que teníamos en distintas
celdas ahora sólo falta agruparlos en un grid para que tengan mejor apariencia. Entonces vamos
al archivo del código y dentro del archivo index debajo del deep container vamos a insertar un 'div'
con la clase 'row' esta clase en bootstrap hace que los elementos se agreguen en una misma fila. Aquí
hay que cerrar el 10 después de todo el card recargamos la página para ver
cómo se agrupan los cards una de las ventajas de bootstrap es que sus
elementos se adecuan a los break-points más utilizados por ejemplo si modificamos el ancho de
la página se adecua al grid para mostrar una o dos o tres o dependiendo del ancho de pantalla serán
las imágenes son los karts que se irán mostrando si presionamos el botón ver más nos lleva
a una página en blanco en la segunda parte de este tutorial veremos cómo utilizar
los models para que cuando el usuario presione este botón se despliegue
contenido de manera dinámica si te cierto en el vídeo dale like comparte tíos
suscríbete para seguir creando contenido