Cómo crear una barra de progreso simple con Google Apps Script


Artículo relacionado con la optimización de código de Google Apps Script
Artículo relacionado con la programación web mediante Google Apps Script

Uno de los problemas más importantes a los que nos enfrentamos al hacer una web dinámica con google apps script es el tiempo de respuesta de algunas operaciones.

No es descabellado que según que cálculos u operaciones nos generen unos tiempos de espera de decenas de segundos. El problema es que de cara al usuario más de 2 segundos de espera significa que la aplicación se ha muerto.La solución a esto es implementar una barra de carga. El tiempo de espera será el mismo pero al menos el usuario tendrá la ilusión de que no se ha muerto la web dado que algo se está pintando.

En artículos futuros hablaré de como hacer la barra de progreso real  (necesario para funcionalidades con tiempos muy variables), pero aquí y ahora hablaremos de una barra de progreso muy sencilla que nos simulará un proceso de carga. Realmente lo único que haremos será pintar una barra de carga que se acabará de pintar en el tiempo de espera estimado. (para funciones no demasiado lentas de 10,15 segundos va fenomenal)

Con css podéis mejorar la parte gráfica todo lo que queráis, la versión simple la podéis ver aquí:

El código es el siguiente:
Código .gs:
function doGet()
{
  return HtmlService.createHtmlOutputFromFile('index');
}

function Init()
{
  for (var i = 0 ;  i < 10; ++i)
  {
    var f = DriveApp.createFile("slow","");
    f.setTrashed(true);
  }

  return "Carga finalizada";
}


Index.html
<html>
<head>
<script>
    var tiempo = 0;
    function Response(string)
    {
       tiempo = -1;
       document.getElementsByName("ejemplo")[0].innerHTML = string;
    }
  
    function Reloj()
    {
        if(tiempo < 0)
          return;
        
       tiempo -= 1;
      
        if( tiempo == 0 )
        {
            document.getElementsByName("ejemplo")[0].innerHTML = "Finalizando carga, espere por favor";
        }
        else
        {
           document.getElementsByName("ejemplo")[0].innerHTML = "<progress value=" + (9-tiempo) + " max='9'></progress>";
           setTimeout("Reloj()", 1000);
        }
    }
  
    function InitWeb()
    {
       google.script.run.withSuccessHandler(Response).Init();
       tiempo = 9;
       Reloj();
    }
</script>
</head>

<body>
<h1>
    Ejemplo de barra de carga simple
</h1>

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

</body>

</html>


Espero que os sirva y que vuestro proyectos queden ,más amigables con esta solución.

Nos vemos

4 comentarios:

  1. Respuestas
    1. Me alegra q te sirva. Si haces algo con ella y quieres compartirlo , aqui me tienes

      Eliminar
  2. Hola, sabes como crear un reloj que se actualice solo? Me podrías ayudar porfis

    ResponderEliminar
    Respuestas
    1. Lo más fácil es que lo hagas a nivel de javascript. Este link the puede ir bien ; https://desarrolloweb.com/articulos/549.php

      Eliminar

Tal vez te interese