Tutoriales Google Apps Scripts: creación de web con google apps script

Mostrando entradas con la etiqueta creación de web con google apps script. Mostrar todas las entradas

Como formatear HTML con Google Apps Script

Una aplicación muy útil de Google Apps Script es formatear automáticamente texto en formato HTML. En mi caso particular he montado este sistema para escribir textos en japonés (nunca es fácil escribir esos símbolos endemoniados :D ), pero vosotros podéis modificarlo como necesitáis para formatear vuestros htmls como querais: introducir links, poner negritas, cambiar tamaños , aplicar cursivas, etc.. Con esta base podéis montar como queráis vuestro formateador html con Google Apps Script.

En nuestro caso completo hemos montado una web configurable en el que tenemos todos los símbolos japoneses con sus respectivos links, como os he dicho lo podéis adaptar a lo que necesitéis poniéndole más columnas para configurarle más condicionantes a vuestro formateo.

Dado que el producto final es una web que nos pedirá el texto que queremos formatear, tenemos parte de html y parte de gs. Aquí tenéis el código de ambos:

index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    
    <script>
    function Response(string)
    {
       document.getElementById("converted").innerHTML = string;
    }
  
    function Convert()
    {
       var text = document.getElementById("text").value;
       google.script.run.withSuccessHandler(Response).Convert(text);
    }
    </script>

  </head>
  <body>
 
<div>
    <h2> Romaji -> Hiragana </h2> 
    <p><textarea id="text"> </textarea></p>
    <p><button onclick="Convert()"> CONVERTIR </button></p>
    <p><div id="converted"> </div></p>
</div>

  </body>
</html>

Code.gs

function doGet()
{
    return HtmlService.createTemplateFromFile('index')
        .evaluate() // El evaluate siempre debe estar antes del FrameOptions
        .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

function Convert(txt)
{
  txt = String(txt.trim());

  //Obtenemos la lista de conversiones de texto
  var values = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet().getDataRange().getDisplayValues();

  var out = "<p>";

  //Miramos de todas las posibles conversiones cual cuadra con nuestro texto.
  for(var i = 1 ; i < values.length ; i++)
  {
    var tag = values[i][0].trim();
    var len = tag.length;
    var sub = txt.substring(0,len).trim();

    if ( tag == sub )
    {
        var char =  values[i][1];
        var url  =  values[i][2];
        
        //Este código es especfico del ejemplo. En vuestro caso concreto puede necesitar cambios.
        if( char.length < 2 )
        {
          out += "<a target='_blank' href='"+ url +"'>" + char + "</a>";
        }
        else
        {
          out += "<a target='_blank' href='"+ url +"'>" + char.charAt(0) + "<small>" + char.charAt(1) + "</small>" + "</a>";
        }

        //Nos quedamos con el texto todavía no  procesado
        txt = txt.substring(len);

        //Volvemos a mirar desde el principio
        i=1; 
    }
  }
  out += "</p>";

  return out;
}

Si queréis verlo funcionando lo tengo implementado en esta web de japonés

Cualquier duda , no vaciléis en hacerme llegar. Este proyecto es un poco más complejo de lo que os tengo acostumbrados.

Espero que os haya servido.

Nos vemos

Como usar templates web con Google Apps Script

Ya he escrito varios posts sobre como implementar webs con Google Apps Script (por ejemplo: webs y webs dinamicas o como hacer logins o usar iframes) pero nunca he hablado de como usar templates web con Google Apps Script.

Primero de todo hemos de explicar que son los templates web. Básicamente un template es una web parametrizada. Parte de su código, de sus variables, dependen de "algo" que nosotros le pasamos al html en el momento de servir la web.

Para que sirve un template web? La potencia que tiene es brutal y sirve para muchísimas cosas pero para lo que más lo uso yo personalmente es para que el html tenga identificadores que permitan relacionar la parte web con la parte más de servidor. Es decir, si necesito que una web introduzca o extraiga información de un spreadsheet puede resultar muy práctico indicarle al html de que spreadsheet debe pillar la información o de que sheet o bien en que fila esta la información de dicho usuario. Esto es solo para poner ejemplos, los usos son múltiples.

Ahora os dejaré un pequeño ejemplo para que podáis probar como funciona:

Index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script>
    function Click()
    {
       var cosa1 = <?= cosa1 ?>;
       var cosa2 = <?= cosa2 ?>;
       var cosa3 = <?= cosa3 ?>;
       alert(cosa1  + "-" + cosa2 + "-" + cosa3 );
    }
    </script>
  </head>
  <body>
    <h1>
        Gran ejemplo sobre web templates con Google Apps Script
    </h1>
     <button onclick="Click()">Dale</button>
  </body>
</html>

Code.gs

function doGet(e)
{
   var output = HtmlService.createTemplateFromFile('index');
   output.cosa1  = "texto";
   output.cosa2  = "otro texto";       
   output.cosa3  = "y otro mas";
   return output.evaluate();
 }

Como nota adicional tengo que explicar que el uso de templates html con Google Apps Script es increiblemente poderoso cuando lo usamos para enviar plantillas html por correo.

Espero que os haya servido. No vaciléis en hacerme llegar vuestras dudas

Nos vemos

NOTA: Muy relacionado con este tema también tengo un artículo que puede interesarte sobre como como hacer un iframe de un google apps script

Como crear una web dinámica con Google Apps Script

Google Apps Script Web

Artículo relacionado con la programación web mediante Google Apps Script

Hace poco descubrimos como se podía servir una página web estática con Google Apps Script, pero realmente la potencia de este lenguaje se revela cuando podemos hacer que el contenido de la web cambie en función de nuestras necesidades.

El caso más claro de esto es cuando queremos mostrar en una web contenido que tengamos en una hoja de cálculo de Drive. Si somos capaces de hacer esto, la hoja de cálculo se transforma en una BBDD que nos permitirá hacer webs de una potencia inimaginable.

Para realizar nuestras páginas dinámicas nos hará falta que el javascript de nuestra página nos pida a la parte del servidor ( google apps script ) que nos dé la información y esta información cuando se devuelve se ha de insertar de alguna manera dentro de la web.

La implementación es sencilla. Basándonos en el ejemplo anterior y en el ejemplo que explicaba como leer información de una hoja de cálculo de Google, solo tenemos que modificar un poco el código para que haga lo que necesitamos ( es tan sencillo que ni tan siquiera vale la pena explicarlo, revisad el código y lo veréis rápidamente como funciona )

Codigo.gs:

function Init()
{
  var spreadsheet  = SpreadsheetApp.openByUrl("https://docs.google.com/spreadsheets/d/1NA63mUiiG_ce3crX3PU_ISp8HwuwyKGRslqn2kyEYQM/edit#gid=0");  //Esta ruta será la que tengas a tu fichero que uses como BBDD
  var sheet        = spreadsheet.getActiveSheet();
  var rows         = sheet.getDataRange();
  var numRows      = rows.getNumRows();
  var values       = rows.getValues();
  var string = "";

  for(var i = 0 ; i < numRows ; ++i)
  {
    var row = values[i];
  
    string += "<p>" + row[0] + "</p>";
  
  }

  return string;
}

//Retorna la página principal
function doGet()
{
  return HtmlService.createHtmlOutputFromFile('index');
}

index.html:

<html>
<head>
<script>
    function Response(string)
    {
       document.getElementsByName("ejemplo")[0].innerHTML = string;
    }
  
    function InitWeb()
    {
       google.script.run.withSuccessHandler(Response).Init();
    }
</script>
</head>

<body>
<h1>
    Titulo de web de ejemplo
</h1>

    <script>
        InitWeb();
    </script>
  
<div name='ejemplo'>
    <p> Loading.... wait</p>
</div>

</body>

</html>

Si refrescáis la web veréis que os sale una pantalla que dice que hacen falta permisos de ejecución (esto es debido a que ahora nuestro script maneja ficheros dentro de drive y le hemos de dar el consentimiento para que realice esta actividad)

Para darle permisos de ejecución solo hemos de darle a Ejecutar > doGet. Esto forzará que salga la siguiente ventana pidiedonos los permisos pertinentes.

Una vez hayaís autorizado la aplicación en la web aparecerá todo el contenido de la primera columna de una hoja de cálculo cualquiera que le hayas puesto para trabajar.

Este ejemplo tan tonto, permite poner las bases para hacer juegos multijugador, webs multiidiomas, contenido dinàmico, refrescos automáticos de contenido,etc....

Poco a poco iremos abordando estas cuestiones

Nos vemos

NOTA: Si quieres insertar la web que generes en otro sitio tal vez te valga la pena mirar como hacer un iframe de un google apps script

NOTA: Si te ha gustado este post tal vez también te interese este otro sobre templates web

NOTA: Si ya controlas la creación de webs con Google Apps Script tal vez te interese como comunicar javascript con Google Apps Script

Como formatear HTML con Google Apps Script

Como usar templates web con Google Apps Script

Como crear una web dinámica con Google Apps Script

Tal vez te interese