{"id":4743,"date":"2021-08-11T10:07:09","date_gmt":"2021-08-11T08:07:09","guid":{"rendered":"https:\/\/tecnocentres.org\/?p=4743"},"modified":"2021-08-11T11:36:46","modified_gmt":"2021-08-11T09:36:46","slug":"utilizar-gas-para-crear-aplicaciones-web-2a-parte","status":"publish","type":"post","link":"https:\/\/tecnocentres.org\/es\/blog\/2021\/08\/11\/utilizar-gas-para-crear-aplicaciones-web-2a-parte\/","title":{"rendered":"Utilizar GAS para crear aplicaciones web (2\u00aa parte)"},"content":{"rendered":"

Despu\u00e9s del primer art\u00edculo<\/a> explicando un poco qu\u00e9 son las web apps hechas con Google Apps Script (GAS) vamos a ver en este segundo art\u00edculo c\u00f3mo crear una sencilla. Y lo har\u00e9 con un ejemplo real, relacionado con la evaluaci\u00f3n de los alumnos. Ya aviso que este art\u00edculo ser\u00e1 mucho m\u00e1s t\u00e9cnico y que se necesitan conocimientos de GAS, de html, de estilos css y de javascript. Como dicen mis amigos del grupo de coordinadores del GEG Spain, ser\u00e1 en lenguaje \u00abballeno<\/em>\u00ab.<\/p>\n

Crearemos una aplicaci\u00f3n para que los alumnos rellenen un KPSI (Knowledge and Prior Study Inventory) al iniciar una unidad o proyecto y lo vuelvan a rellenar en terminarlo. Para los que no conozc\u00e1is el instrumento KPSI no es nada m\u00e1s que unas preguntas sobre el tema, donde los alumnos no<\/strong> tienen que dar la respuesta, sino que deben indicar si conocen la respuesta. Sirve para ser conscientes de los conocimientos previos y para que el alumno se d\u00e9 cuenta del progreso que ha hecho al acabar.<\/p>\n

Para que se pueda seguir mejor, en esta carpeta<\/a> se pueden encontrar los archivos finales, tanto la hoja de c\u00e1lculo como el script con el c\u00f3digo y los html.<\/p>\n

<\/p>\n

Haremos una aplicaci\u00f3n para que los alumnos respondan el siguiente KPSI de 4 preguntas.<\/p>\n

\"\"<\/p>\n

Para empezar, vamos a crear una hoja de c\u00e1lculo (sin ning\u00fan script) para poder guardar los datos. La hoja podr\u00eda ser como la siguiente (se puede encontrar en la carpeta<\/a>):<\/p>\n

\"\"<\/p>\n

A continuaci\u00f3n, vamos a crear un script (este script siempre se crea en mi unidad, pero luego se puede desplazar a la carpeta que queramos).<\/p>\n

\"\"<\/p>\n

El script comenzar\u00e1 con algunas definiciones de variables constantes, la direcci\u00f3n de la hoja, el nombre de las hojas y la direcci\u00f3n del usuario, y, de momento, tendr\u00e1 una sola funci\u00f3n, la funci\u00f3n doGet.<\/p>\n

\"\"<\/p>\n

Como dec\u00eda en el anterior art\u00edculo, para crear web apps hay que saber GAS, html, css y javascript. As\u00ed que no me entretendr\u00e9 demasiado a explicar cada funci\u00f3n, ya que sino, m\u00e1s que un art\u00edculo, esto ser\u00eda un curso completo.<\/p>\n

La funci\u00f3n doGet es la \u00fanica que puede servir p\u00e1ginas html en las web apps. Por tanto, es en esta funci\u00f3n donde pondremos el c\u00f3digo. De entrada, recogeremos todos los datos que haya en la hoja de c\u00e1lculo. Comprobamos que el usuario que contesta est\u00e1 en la lista de los alumnos.<\/p>\n

\/\/URL de la hoja de c\u00e1lculo\r\nconst full_control=\"https:\/\/docs.google.com\/spreadsheets\/d\/1iwl4xEoPuaFovufPr-YktmK0Z3jk8EvUmxQmgrreicE\/edit\";\r\n\r\n\/\/Nombre de la pesta\u00f1a de la hoja de c\u00e1lculo\r\nconst full=\"Hoja 1\";\r\n\r\n\/\/Reogemos la direcci\u00f3n del usuario l'adre\u00e7a de l'usuar\r\nconst usuari=Session.getActiveUser().getEmail();\r\n\r\nfunction doGet(e) {\r\n \/\/Comprobamos si el usuario est\u00e1 en la lista de alumnos\r\n var spreadsheet = SpreadsheetApp.openByUrl(full_control); \r\n var sheet = spreadsheet.getSheetByName(full);\r\n var rang = sheet.getDataRange();\r\n var alumnes = rang.getValues();\r\n var numRows = rang.getNumRows();\r\n let identificacio=0;\r\n for (let i=1;i<numRows;i++){\r\n  if (alumnes[i][1]==usuari){\r\n   identificacio=1;\r\n  }\r\n }\r\n \/\/Si el alumno no est\u00e1 en la llista, se indica con un mensaje emergente\r\n if (identificacio==0){\r\n  return HtmlService.createHtmlOutputFromFile('html_no_autoritzado').setTitle(\"Aplicaci\u00f3n KPSI\")\r\n }else{\r\n\r\n}<\/pre>\n
En caso de que el usuario no est\u00e9 en la lista, devolvemos un html. Este html debemos crearlo en el script. En el c\u00f3digo que he puesto, lo he llamado html_no_autoritzado.<\/p>\n
\"\"<\/p>\n
\"\"<\/p>\n
Aunque la aplicaci\u00f3n ser\u00e1 p\u00fablica en nuestro dominio (para quienes conozcan la URL), ya nos hemos asegurado que solo puedan utilizar la aplicaci\u00f3n nuestros alumnos.<\/p>\n
Ahora nos toca llenar la otra parte del if, el else. Si el usuario es uno de nuestros alumnos, le mostraremos la p\u00e1gina html que debe rellenar. Esta p\u00e1gina la llamaremos KPSI.html<\/p>\n
\/\/Si el alumno no est\u00e1 en la llista, se indica con un mensaje emergente\r\nif (identificacio==0){\r\n  return HtmlService.createHtmlOutputFromFile('html_no_autoritzado').setTitle(\"Aplicaci\u00f3n KPSI\")\r\n}else{\r\n  \/\/Abrimos la pantalla de la aplicaci\u00f3n, pasando los par\u00e1metros necesarios\r\n  plantilla=HtmlService.createTemplateFromFile('KPSI');\r\n  plantilla.usuari=usuari;\r\n  plantilla.alumnes=alumnes;\r\n  return plantilla.evaluate().setTitle(\"Aplicaci\u00f3n KPSI\") \r\n}<\/pre>\n
A diferencia de cuando no era un alumno nuestro, que utiliz\u00e1bamos createHtmlOutputFromFile<\/em> para mostrar la p\u00e1gina html, ahora utilizamos createTemplateFromFile<\/em>, que nos permite pasar par\u00e1metros. Cuando el usuario no es un alumno, basta con mostrar un mensaje. Ahora, habr\u00e1 que mostrar una cabecera con el mail del alumno y, si ya ha contestado el KPSI, habr\u00e1 que mostrar sus respuestas anteriores. Para ello hay que pasar como par\u00e1metros, el usuario y el contenido de la Hoja 1.<\/p>\n
Vamos ahora por el contenido de la p\u00e1gina KPSI. Comenzaremos con dos referencias dentro del head<\/p>\n
<html>\r\n<head>\r\n<title>Aplicaci\u00f3n KPSI<\/title>\r\n<base target=\"_top\">\r\n<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.2\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-EVSTQN3\/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC\" crossorigin=\"anonymous\">\r\n<?!= include('css.html'); ?><\/pre>\n
La primera (<link href = \u00abhttps:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.2\/dist\/css\/bootstrap.min.css\u00bb …) es para poder utilizar los estilos de bootstrap<\/em> para dar formado a nuestra p\u00e1gina. Se podr\u00eda hacer creando nosotros todo el css, pero ser\u00eda m\u00e1s complicado de hacer adaptable a diferentes tama\u00f1os de pantallas. Si no se conocen las clases de bootstrap, en este enlace encontrar\u00e9is la documentaci\u00f3n<\/a>.<\/p>\n
La segunda (<?! = Include ( ‘css.html’);?>) nos permite tener nuestro propio hoja de estilos. Nos tocar\u00e1 crear otro html que lleve por nombre css y poner nuestros estilos.<\/p>\n
<style>\r\n  div.cap\r\n  {\r\n    color:#ffffff;\r\n    background-color: gray;\r\n  }\r\n  div.titol{\r\n    font-weight: bold;\r\n    font-size: 1.4em;\r\n    height: 50px;\r\n  }\r\n<\/style><\/pre>\n
\n
Adem\u00e1s, en el archivo de c\u00f3digo donde est\u00e1 la funci\u00f3n doGet, tendremos que a\u00f1adir una funci\u00f3n nueva, include, que es la que permite incrustar los estilos que creamos en el css.<\/div>\n
function include(filename) {\r\n \u00a0return\u00a0HtmlService.createHtmlOutputFromFile(filename)\r\n \u00a0\u00a0\u00a0\u00a0\u00a0.getContent();\r\n}<\/pre>\n<\/div>\n
Pero no nos distraigamos y seguimos con la p\u00e1gina KPSI.html. Una vez, indicado en el head las referencias, definimos una cabecera ya dentro del body. Aprovechando los estilos de bootstrap, podemos crear como un grid de fondo y colocar los campos donde queramos (en filas y columnas). Adem\u00e1s, a\u00f1adimos css personalizado para dar el aspecto que queremos (como div \u00abcap\u00bb y div \u00abtitol\u00bb, que est\u00e1n definidos en el css.html).<\/p>\n
<html>\r\n <head>\r\n  <title>KPSI<\/title>\r\n  <base target=\"_top\">\r\n  <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.2\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-EVSTQN3\/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC\" crossorigin=\"anonymous\">\r\n  <?!= include('css.html'); ?>\r\n <\/head>\r\n <body>\r\n  <div class=\"container\">\r\n   <div class=\"row cap\">\r\n    <div class=\"col titol\">\r\n      Aplicaci\u00f3 KPSI\r\n    <\/div>\r\n    <div class=\"col-2\">\r\n      Mail del alumno: <?= usuari ?>\r\n    <\/div>\r\n   <\/div>\r\n  <div>\r\n <\/body>\r\n<\/html><\/pre>\n
F\u00edjense que ya hacemos aparecer uno de los par\u00e1metros que hemos pasado, el mail del alumno. Simplemente indicamos que es c\u00f3digo javascript con los s\u00edmbolos <?\u00a0 \u00a0?>.<\/p>\n
Pero probamos que lo que estamos haciendo funciona. Si hemos creado todos los archivos (html_no_autoritzado, KPSI y css), utilizamos el bot\u00f3n Implementar y elegimos la opci\u00f3n de Nueva implementaci\u00f3n.<\/em><\/p>\n
\"\"Elegimos que el tipo sea Aplicaci\u00f3n web.<\/em><\/p>\n
\"\"<\/span><\/p>\n
Indicamos una descripci\u00f3n (como el n\u00famero de versi\u00f3n), que quien ejecute la aplicaci\u00f3n seamos nosotros (que somos los \u00fanicos que tenemos acceso a la hoja de c\u00e1lculo) y que tenga acceso a cualquier usuario de nuestro dominio (ya que ya controlamos por c\u00f3digo que sea un alumno).<\/p>\n
\"\"<\/span><\/p>\n
Como todos los scripts, nos aparecer\u00e1 una pantalla pidiendo acceso y tendremos que otorgar permisos al script. Una vez dados, ya nos aparece la direcci\u00f3n para probarla. Si la direcci\u00f3n de nuestro usuario es uno de los de la lista en la hoja de c\u00e1lculo, nos aparecer\u00e1 la siguiente pantalla.<\/p>\n
\"\"<\/p>\n
El color de fondo lo podemos cambiar f\u00e1cilmente con nuestro css. Si hacemos cambios en el c\u00f3digo y queremos volver a probarlo, en lugar de utilizar la opci\u00f3n de nueva implementaci\u00f3n, es mucho mejor utilizar la opci\u00f3n de implementaciones de pruebas<\/strong>. Cuando ya hayamos hecho todas las pruebas, ya volveremos a hacer una nueva Implementaci\u00f3n para obtener la direcci\u00f3n definitiva que deber\u00e1n utilizar los alumnos.<\/p>\n
Ahora hay que seguir trabajando con la p\u00e1gina KPSI para que aparezcan las cuatro preguntas que los alumnos deben contestar y los desplegables. Doy por supuesto que se sabe html y javascript, as\u00ed que pongo el c\u00f3digo y comento las cosas m\u00e1s importantes.<<\/span><\/p>\n
\n
<html>\r\n <head>\r\n  <title>Apliaci\u00f3n KPSI<\/title>\r\n  <base target=\"_top\">\r\n  <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.2\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-EVSTQN3\/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC\" crossorigin=\"anonymous\">\r\n  <?!= include('css.html'); ?>\r\n <\/head>\r\n <script>\r\n  function habilitar(){\r\n   \/\/Al cambiar algun valor, se habilita el bot\u00f3n guardar\r\n   document.KPSI.btn_desar.disabled=false;\r\n  }\r\n  function guardar(){\r\n   google.script.run.guardar(document.forms[\"KPSI\"]);\u00a0 \/\/ejecuta la funci\u00f3n guardar del c\u00f3digo\r\n   document.KPSI.btn_desar.disabled=true; \/\/Deshabilitamos el bot\u00f3n\r\n   window.alert(\"Se han guardao los cambos correctamente\"); \/\/mostrar un mensage indicando que se ha guardado\r\n  }\r\n <\/script>\r\n <body>\r\n  <div class=\"container\">\r\n   <div class=\"row cap\">\r\n    <div class=\"col titol\">\r\n     Aplicaci\u00f3n KPSI\r\n    <\/div>\r\n   <div class=\"col-2\">\r\n    Mail del alumno: <?= usuari ?>\r\n   <\/div>\r\n  <\/div>\r\n <div>\r\n <div class=\"container separador\"><\/div>\r\n <div class=\"container\">\r\n  <div class=\"row g-3\">\r\n  <div class=\"col-md-4 titol\">\r\n   Alumnos\r\n  <\/div>\r\n  <div class=\"col-md-2 titol\">\r\n   Inicio\r\n  <\/div>\r\n  <div class=\"col-md-2 titol\">\r\n   Final\r\n  <\/div> \r\n <\/div> \r\n <div class=\"container separador\"><\/div> \r\n <div class=\"container\">\r\n  <form name=\"KPSI\" id=\"KPSI\" action=\"javascript:;\">\r\n   <? for (let i=2;i<alumnes.length;i++){ \/\/Miramos en qu\u00e9 fila de la hoja de c\u00e1lculo est\u00e1n los datos del alumno que accede\r\n    if (alumnes[i][1]==usuari){\r\n     var fila=i;\r\n    }\r\n   }\r\n \r\n   for (let i=2;i<alumnes[0].length;i=i+2){ ?>\r\n    <div class=\"row g-3\">\r\n    <div class=\"col-md-4\">\r\n     <label for=\"curs_grup\"><?= alumnes[0][i]?><\/label>\r\n    <\/div>\r\n    <div class=\"col-md-2\">\r\n     <select class=\"form-select\" name=\"inici[]\" onchange=\"habilitar()\">\r\n      <option value=\"\"><\/option>\r\n      <option value=\"1\" <? if (alumnes[fila][i]==1){ ?>selected<? } ?>>No lo s\u00e9<\/option>\r\n      <option value=\"2\" <? if (alumnes[fila][i]==2){ ?>selected<? } ?>>No lo entiendo<\/option>\r\n      <option value=\"3\" <? if (alumnes[fila][i]==3){ ?>selected<? } ?>>Creo que s\u00ed que lo s\u00e9<\/option>\r\n      <option value=\"4\" <? if (alumnes[fila][i]==4){ ?>selected<? } ?>>Lo podr\u00eda explicar a mis compa\u00f1eros\/as sin dificultad<\/option>\r\n     <\/select>\r\n    <\/div>\r\n   <div class=\"col-md-2\">\r\n    <select class=\"form-select\" name=\"final[]\" onchange=\"habilitar()\">\r\n     <option value=\"\"><\/option>\r\n     <option value=\"1\" <? if (alumnes[fila][i]==1){ ?>selected<? } ?>>No lo s\u00e9<\/option>\r\n     <option value=\"2\" <? if (alumnes[fila][i]==2){ ?>selected<? } ?>>No lo entiendo<\/option>\r\n     <option value=\"3\" <? if (alumnes[fila][i]==3){ ?>selected<? } ?>>Creo que s\u00ed que lo s\u00e9<\/option>\r\n     <option value=\"4\" <? if (alumnes[fila][i]==4){ ?>selected<? } ?>>Lo podr\u00eda explicar a mis compa\u00f1eros\/as sin dificultad<\/option>\r\n   <\/select>\r\n  <\/div> \r\n <\/div>\r\n <div class=\"container separador2\"><\/div> \r\n <? } ?>\r\n<\/div>\r\n<div class=\"container separador2\"><\/div>\r\n<div class=\"container\">\r\n  <div class=\"row g-3\">\r\n   <div class=\"col-md-4\"><\/div>\r\n   <div class=\"col-md-4\"><\/div>\r\n    <input type=\"text\" class=\"form-control\" value=\"<?= fila ?>\" id=\"fila\" name=\"fila\" hidden>\r\n   <div class=\"col-md-2\"><button class=\"btn btn-primary\" name=\"btn_desar\" id=\"btn_desar\" disabled onclick=\"guardar()\">Guardar<\/button><\/div>\r\n <\/div>\r\n<\/body>\r\n<\/html><\/pre>\n<\/div>\n
B\u00e1sicamente, hemos a\u00f1adido un formulario y, con la instrucci\u00f3n for, tantas preguntas como se han indicado en la hoja de c\u00e1lculo. Como en la hoja de c\u00e1lculo tenemos columnas combinadas para poder tener las respotes del inicio y del final juntas, el for lo hacemos con un incremento de 2 de i (i = i + 2).<\/p>\n
Antes, hemos mirado en qu\u00e9 fila estaban los datos del usuario para poder mostrar sus respuestas anteriores, si hab\u00eda hecho. Para no volver a calcularlo despu\u00e9s, hemos a\u00f1adido un campo oculto en el formulario con este n\u00famero de fila. As\u00ed lo podremos pasar al c\u00f3digo para poderlo utilizar.<\/p>\n
Adem\u00e1s, hemos a\u00f1adido un par de funciones en javascript. Una en los select, onChange, para que el bot\u00f3n guardar s\u00f3lo se active cuando se haga alg\u00fan cambio.<\/p>\n
La segunda funci\u00f3n, guardar, que se activa al pulsar el bot\u00f3n, onclick, es la que nos devolver\u00e1 a la hoja de c\u00f3digo, pasando como par\u00e1metros todos los valores que se ha introducido en los desplegables. la funci\u00f3n es muy sencilla:<\/p>\n
google.script.run.guardar(document.forms[\"KPSI\"]);\u00a0 \/\/ejecuta la funci\u00f3n guardar del c\u00f3digo\r\nwindow.alert(\"Se han guardao los cambios correctamente\"); \/\/mostrar un mensage indicando que se ha guardado<\/pre>\n
\u00bfQu\u00e9 nos faltar\u00eda? Definir la funci\u00f3n guardar en el c\u00f3digo. Esta funci\u00f3n es la que guardar\u00e1 en la hoja de c\u00e1lculo los datos.<\/p>\n
\n
function guardar(KPSI){\r\n \/\/Recuperamos los valores del formulario\r\n var inici=KPSI[\"inici[]\"];\r\n var final=KPSI[\"final[]\"];\r\n var fila=parseInt(KPSI[\"fila\"]);\r\n\r\n \/\/Creamos una matriz con los valores inicio y final intercalados, igual que en la hoja de c\u00e1lculo\r\n var valors=[];\r\n valors[0]=[];\r\n let j=0;\r\n for (let i=0; i<(inici.length+final.length);i=i+2){\r\n  valors[0][i]=inici[j];\r\n  valors[0][i+1]=final[j];\r\n  j++;\r\n }\r\n \/\/Guardoamos los valores en la hoja de c\u00e1lculo\r\n var spreadsheet = SpreadsheetApp.openByUrl(full_control); \r\n var sheet = spreadsheet.getSheetByName(full);\r\n sheet.getRange(fila+1,3,1,valors[0].length).setValues(valors);\r\n}<\/pre>\n<\/div>\n
Y ya hemos llegado al final. Hemos creado una peque\u00f1a aplicaci\u00f3n web donde los alumnos acceden, ven las respuestas anteriores y pueden modificarlas.<\/p>\n
El aspecto ser\u00eda el siguiente.<\/p>\n
\"\"<\/p>\n
Para acabar de pulirla, estar\u00eda bien controlar cuando los alumnos pueden modificar las respuestas. No tiene mucho sentido que al final de la unidad puedan cambiar las respuestas del inicio. Podr\u00edamos a\u00f1adir en la hoja de c\u00e1lculo alg\u00fan checkbox para decir si est\u00e1 activada la posibilidad de respuesta de los alumnos para la columna inicila y otro para la columna final. Recoger\u00edamos este valor y en los selects a\u00f1adir\u00edamos un condicional. Si no se permite, en el c\u00f3digo html a\u00f1adir\u00eda disable. Algo as\u00ed:<\/p>\n
<select class = \u00abform-select\u00bb name = \u00abinicio []\u00bb onChange = \u00abhabilitar ()\u00bb <? if (permitido_inicio == false) {?> disabled <? }?><\/p>\n
Pero ya os lo dejo para vosotros. Una vez el script estuviera terminado y probado, deber\u00eda volver a implementarlo. hay que tener en cuenta que si se realiza una implementaci\u00f3n nueva, la URL cambia. Si ya se ha enviado la URL a los alumnos, ser\u00e1 bastante problem\u00e1tico, ya que los alumnos se har\u00e1n un l\u00edo. Si se desea hacer una nueva implementaci\u00f3n sin que cambie la URL, en lugar de usar la opci\u00f3n nueva implementaci\u00f3n, debe usarse la opci\u00f3n Gestionar implementaciones, editar la versi\u00f3n y eligir nueva versi\u00f3n. De esta manera, la implementaci\u00f3n no cambia y, por tanto, la URL tampoco.<\/p>\n
\"\"<\/p>\n
Espero que el art\u00edculo haya sido suficientemente entendedor y que se vea la manera de crear Web apps con Google apps script. Dejo pendiente una 3\u00aa parte para explicar c\u00f3mo trabajar con diferentes pantallas. Como he dicho al principio, la \u00fanica funci\u00f3n que puede mostrar html es la funci\u00f3n doGet. Por ejemplo, la funci\u00f3n guardar que hemos creado, no puede mostrar ninguna p\u00e1gina html. Por lo tanto, para hacer aplicaciones donde queramos m\u00e1s de una pantalla (que al pulsar un bot\u00f3n se’ muestre una pantalla diferente), tendremos que hacer alg\u00fan truco. Lo cuento en el siguiente art\u00edculo, que ser\u00e1 m\u00e1s corto y cerrar\u00e1 la trilog\u00eda.<\/p>\n","protected":false},"excerpt":{"rendered":"
Despu\u00e9s del primer art\u00edculo explicando un poco qu\u00e9 son las web apps hechas con Google Apps Script (GAS) vamos a ver en este segundo art\u00edculo c\u00f3mo crear una sencilla. Y lo har\u00e9 con un ejemplo real, relacionado con la evaluaci\u00f3n…<\/p>\n","protected":false},"author":1,"featured_media":4680,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[56],"tags":[],"class_list":["post-4743","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-google-apps-script-es","post-archive"],"yoast_head":"\nUtilizar GAS para crear aplicaciones web (2\u00aa parte) - Tecnocentres<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/tecnocentres.org\/es\/blog\/2021\/08\/11\/utilizar-gas-para-crear-aplicaciones-web-2a-parte\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Utilizar GAS para crear aplicaciones web (2\u00aa parte) - Tecnocentres\" \/>\n<meta property=\"og:description\" content=\"Despu\u00e9s del primer art\u00edculo explicando un poco qu\u00e9 son las web apps hechas con Google Apps Script (GAS) vamos a ver en este segundo art\u00edculo c\u00f3mo crear una sencilla. Y lo har\u00e9 con un ejemplo real, relacionado con la evaluaci\u00f3n...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/tecnocentres.org\/es\/blog\/2021\/08\/11\/utilizar-gas-para-crear-aplicaciones-web-2a-parte\/\" \/>\n<meta property=\"og:site_name\" content=\"Tecnocentres\" \/>\n<meta property=\"article:published_time\" content=\"2021-08-11T08:07:09+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-08-11T09:36:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/tecnocentres.org\/wp-content\/uploads\/2021\/08\/gas.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"748\" \/>\n\t<meta property=\"og:image:height\" content=\"221\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Jaume Feliu\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@jfeliua\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jaume Feliu\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/tecnocentres.org\\\/es\\\/blog\\\/2021\\\/08\\\/11\\\/utilizar-gas-para-crear-aplicaciones-web-2a-parte\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/tecnocentres.org\\\/es\\\/blog\\\/2021\\\/08\\\/11\\\/utilizar-gas-para-crear-aplicaciones-web-2a-parte\\\/\"},\"author\":{\"name\":\"Jaume Feliu\",\"@id\":\"https:\\\/\\\/tecnocentres.org\\\/es\\\/#\\\/schema\\\/person\\\/b2eb569e95072dedf967f0036be08adf\"},\"headline\":\"Utilizar GAS para crear aplicaciones web (2\u00aa parte)\",\"datePublished\":\"2021-08-11T08:07:09+00:00\",\"dateModified\":\"2021-08-11T09:36:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/tecnocentres.org\\\/es\\\/blog\\\/2021\\\/08\\\/11\\\/utilizar-gas-para-crear-aplicaciones-web-2a-parte\\\/\"},\"wordCount\":1721,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/tecnocentres.org\\\/es\\\/blog\\\/2021\\\/08\\\/11\\\/utilizar-gas-para-crear-aplicaciones-web-2a-parte\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/tecnocentres.org\\\/wp-content\\\/uploads\\\/2021\\\/08\\\/gas.jpg\",\"articleSection\":[\"Google apps script\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/tecnocentres.org\\\/es\\\/blog\\\/2021\\\/08\\\/11\\\/utilizar-gas-para-crear-aplicaciones-web-2a-parte\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/tecnocentres.org\\\/es\\\/blog\\\/2021\\\/08\\\/11\\\/utilizar-gas-para-crear-aplicaciones-web-2a-parte\\\/\",\"url\":\"https:\\\/\\\/tecnocentres.org\\\/es\\\/blog\\\/2021\\\/08\\\/11\\\/utilizar-gas-para-crear-aplicaciones-web-2a-parte\\\/\",\"name\":\"Utilizar GAS para crear aplicaciones web (2\u00aa parte) - Tecnocentres\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/tecnocentres.org\\\/es\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/tecnocentres.org\\\/es\\\/blog\\\/2021\\\/08\\\/11\\\/utilizar-gas-para-crear-aplicaciones-web-2a-parte\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/tecnocentres.org\\\/es\\\/blog\\\/2021\\\/08\\\/11\\\/utilizar-gas-para-crear-aplicaciones-web-2a-parte\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/tecnocentres.org\\\/wp-content\\\/uploads\\\/2021\\\/08\\\/gas.jpg\",\"datePublished\":\"2021-08-11T08:07:09+00:00\",\"dateModified\":\"2021-08-11T09:36:46+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/tecnocentres.org\\\/es\\\/#\\\/schema\\\/person\\\/b2eb569e95072dedf967f0036be08adf\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/tecnocentres.org\\\/es\\\/blog\\\/2021\\\/08\\\/11\\\/utilizar-gas-para-crear-aplicaciones-web-2a-parte\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/tecnocentres.org\\\/es\\\/blog\\\/2021\\\/08\\\/11\\\/utilizar-gas-para-crear-aplicaciones-web-2a-parte\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/tecnocentres.org\\\/es\\\/blog\\\/2021\\\/08\\\/11\\\/utilizar-gas-para-crear-aplicaciones-web-2a-parte\\\/#primaryimage\",\"url\":\"https:\\\/\\\/tecnocentres.org\\\/wp-content\\\/uploads\\\/2021\\\/08\\\/gas.jpg\",\"contentUrl\":\"https:\\\/\\\/tecnocentres.org\\\/wp-content\\\/uploads\\\/2021\\\/08\\\/gas.jpg\",\"width\":748,\"height\":221},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/tecnocentres.org\\\/es\\\/blog\\\/2021\\\/08\\\/11\\\/utilizar-gas-para-crear-aplicaciones-web-2a-parte\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Inici\",\"item\":\"https:\\\/\\\/tecnocentres.org\\\/es\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Utilizar GAS para crear aplicaciones web (2\u00aa parte)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/tecnocentres.org\\\/es\\\/#website\",\"url\":\"https:\\\/\\\/tecnocentres.org\\\/es\\\/\",\"name\":\"Tecnocentres\",\"description\":\"Blog de Jaume Feliu\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/tecnocentres.org\\\/es\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/tecnocentres.org\\\/es\\\/#\\\/schema\\\/person\\\/b2eb569e95072dedf967f0036be08adf\",\"name\":\"Jaume Feliu\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/04319ca8610bfe2a04fca8f0d7d42c7e87e4bbe1c687e39a0192f567098d464e?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/04319ca8610bfe2a04fca8f0d7d42c7e87e4bbe1c687e39a0192f567098d464e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/04319ca8610bfe2a04fca8f0d7d42c7e87e4bbe1c687e39a0192f567098d464e?s=96&d=mm&r=g\",\"caption\":\"Jaume Feliu\"},\"sameAs\":[\"https:\\\/\\\/tecnocentres.org\",\"https:\\\/\\\/x.com\\\/jfeliua\"],\"url\":\"https:\\\/\\\/tecnocentres.org\\\/es\\\/blog\\\/author\\\/admin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Utilizar GAS para crear aplicaciones web (2\u00aa parte) - Tecnocentres","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/tecnocentres.org\/es\/blog\/2021\/08\/11\/utilizar-gas-para-crear-aplicaciones-web-2a-parte\/","og_locale":"es_ES","og_type":"article","og_title":"Utilizar GAS para crear aplicaciones web (2\u00aa parte) - Tecnocentres","og_description":"Despu\u00e9s del primer art\u00edculo explicando un poco qu\u00e9 son las web apps hechas con Google Apps Script (GAS) vamos a ver en este segundo art\u00edculo c\u00f3mo crear una sencilla. Y lo har\u00e9 con un ejemplo real, relacionado con la evaluaci\u00f3n...","og_url":"https:\/\/tecnocentres.org\/es\/blog\/2021\/08\/11\/utilizar-gas-para-crear-aplicaciones-web-2a-parte\/","og_site_name":"Tecnocentres","article_published_time":"2021-08-11T08:07:09+00:00","article_modified_time":"2021-08-11T09:36:46+00:00","og_image":[{"width":748,"height":221,"url":"https:\/\/tecnocentres.org\/wp-content\/uploads\/2021\/08\/gas.jpg","type":"image\/jpeg"}],"author":"Jaume Feliu","twitter_card":"summary_large_image","twitter_creator":"@jfeliua","twitter_misc":{"Escrito por":"Jaume Feliu","Tiempo de lectura":"12 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/tecnocentres.org\/es\/blog\/2021\/08\/11\/utilizar-gas-para-crear-aplicaciones-web-2a-parte\/#article","isPartOf":{"@id":"https:\/\/tecnocentres.org\/es\/blog\/2021\/08\/11\/utilizar-gas-para-crear-aplicaciones-web-2a-parte\/"},"author":{"name":"Jaume Feliu","@id":"https:\/\/tecnocentres.org\/es\/#\/schema\/person\/b2eb569e95072dedf967f0036be08adf"},"headline":"Utilizar GAS para crear aplicaciones web (2\u00aa parte)","datePublished":"2021-08-11T08:07:09+00:00","dateModified":"2021-08-11T09:36:46+00:00","mainEntityOfPage":{"@id":"https:\/\/tecnocentres.org\/es\/blog\/2021\/08\/11\/utilizar-gas-para-crear-aplicaciones-web-2a-parte\/"},"wordCount":1721,"commentCount":0,"image":{"@id":"https:\/\/tecnocentres.org\/es\/blog\/2021\/08\/11\/utilizar-gas-para-crear-aplicaciones-web-2a-parte\/#primaryimage"},"thumbnailUrl":"https:\/\/tecnocentres.org\/wp-content\/uploads\/2021\/08\/gas.jpg","articleSection":["Google apps script"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/tecnocentres.org\/es\/blog\/2021\/08\/11\/utilizar-gas-para-crear-aplicaciones-web-2a-parte\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/tecnocentres.org\/es\/blog\/2021\/08\/11\/utilizar-gas-para-crear-aplicaciones-web-2a-parte\/","url":"https:\/\/tecnocentres.org\/es\/blog\/2021\/08\/11\/utilizar-gas-para-crear-aplicaciones-web-2a-parte\/","name":"Utilizar GAS para crear aplicaciones web (2\u00aa parte) - Tecnocentres","isPartOf":{"@id":"https:\/\/tecnocentres.org\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/tecnocentres.org\/es\/blog\/2021\/08\/11\/utilizar-gas-para-crear-aplicaciones-web-2a-parte\/#primaryimage"},"image":{"@id":"https:\/\/tecnocentres.org\/es\/blog\/2021\/08\/11\/utilizar-gas-para-crear-aplicaciones-web-2a-parte\/#primaryimage"},"thumbnailUrl":"https:\/\/tecnocentres.org\/wp-content\/uploads\/2021\/08\/gas.jpg","datePublished":"2021-08-11T08:07:09+00:00","dateModified":"2021-08-11T09:36:46+00:00","author":{"@id":"https:\/\/tecnocentres.org\/es\/#\/schema\/person\/b2eb569e95072dedf967f0036be08adf"},"breadcrumb":{"@id":"https:\/\/tecnocentres.org\/es\/blog\/2021\/08\/11\/utilizar-gas-para-crear-aplicaciones-web-2a-parte\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/tecnocentres.org\/es\/blog\/2021\/08\/11\/utilizar-gas-para-crear-aplicaciones-web-2a-parte\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/tecnocentres.org\/es\/blog\/2021\/08\/11\/utilizar-gas-para-crear-aplicaciones-web-2a-parte\/#primaryimage","url":"https:\/\/tecnocentres.org\/wp-content\/uploads\/2021\/08\/gas.jpg","contentUrl":"https:\/\/tecnocentres.org\/wp-content\/uploads\/2021\/08\/gas.jpg","width":748,"height":221},{"@type":"BreadcrumbList","@id":"https:\/\/tecnocentres.org\/es\/blog\/2021\/08\/11\/utilizar-gas-para-crear-aplicaciones-web-2a-parte\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Inici","item":"https:\/\/tecnocentres.org\/es\/"},{"@type":"ListItem","position":2,"name":"Utilizar GAS para crear aplicaciones web (2\u00aa parte)"}]},{"@type":"WebSite","@id":"https:\/\/tecnocentres.org\/es\/#website","url":"https:\/\/tecnocentres.org\/es\/","name":"Tecnocentres","description":"Blog de Jaume Feliu","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/tecnocentres.org\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/tecnocentres.org\/es\/#\/schema\/person\/b2eb569e95072dedf967f0036be08adf","name":"Jaume Feliu","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/secure.gravatar.com\/avatar\/04319ca8610bfe2a04fca8f0d7d42c7e87e4bbe1c687e39a0192f567098d464e?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/04319ca8610bfe2a04fca8f0d7d42c7e87e4bbe1c687e39a0192f567098d464e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/04319ca8610bfe2a04fca8f0d7d42c7e87e4bbe1c687e39a0192f567098d464e?s=96&d=mm&r=g","caption":"Jaume Feliu"},"sameAs":["https:\/\/tecnocentres.org","https:\/\/x.com\/jfeliua"],"url":"https:\/\/tecnocentres.org\/es\/blog\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/tecnocentres.org\/es\/wp-json\/wp\/v2\/posts\/4743","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tecnocentres.org\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tecnocentres.org\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tecnocentres.org\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tecnocentres.org\/es\/wp-json\/wp\/v2\/comments?post=4743"}],"version-history":[{"count":0,"href":"https:\/\/tecnocentres.org\/es\/wp-json\/wp\/v2\/posts\/4743\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tecnocentres.org\/es\/wp-json\/wp\/v2\/media\/4680"}],"wp:attachment":[{"href":"https:\/\/tecnocentres.org\/es\/wp-json\/wp\/v2\/media?parent=4743"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tecnocentres.org\/es\/wp-json\/wp\/v2\/categories?post=4743"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tecnocentres.org\/es\/wp-json\/wp\/v2\/tags?post=4743"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}