Cómo hacer un chat con Google Apps Script


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

En muchas ocasiones  si tenemos un esqueleto que funciona nos resulta más fácil implementar nuestros proyectos.Es por ello que hoy os posteo como implementar vuestro propio chat con unas pocas lineas de código en google apps script.

El código no es complejo, yo os lo copio, si alguien tiene problemas que me lo diga y explico lo necesario.

Que nadie espere una gran aplicación gráfica.. solo es un ejemplo de la lógica más sencilla posible para un chat.

El proyecto ha partido del proyecto de login web que implementé hace un tiempo. Para entrar en el chat podeis usar cualquier de los passwords que se explican en el post del login web.

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

var archivo_login      = 'https://docs.google.com/spreadsheets/d/1fKu-sk2Tl7K3OD_6vGA-OaDUJ96_tw0NpR433_a8cwo/edit#gid=0';

//Gestiona el login del usuario y nos dice si la contraseña es correcta o no.
function Login(user,password)
{
  var spreadsheet = SpreadsheetApp.openByUrl(archivo_login);
  var sheet = spreadsheet.getSheetByName("Usuarios");
  var rows = sheet.getDataRange();
  var numRows = rows.getNumRows();
  var values = rows.getValues();
  var passwordMD5 = Utilities.base64Encode(Utilities.computeDigest(Utilities.DigestAlgorithm.MD5,password));

  Logger.log('user:' + user + ' password:' + password);
 
  for (var i = 1; i <= numRows - 1; i++)
  {
    var row = values[i];
 
    if (row[0] == user )
    {
      if(row[1] ==  passwordMD5)
      {
         sheet.getRange(i+1,3).setValue(row[2]+1);
         return true;
      }
    }
  }
  return false;
}

function SendChat(msg)
{
    var spreadsheet = SpreadsheetApp.openByUrl(archivo_login);
    var sheet = spreadsheet.getSheetByName("Chat");
    sheet.insertRowBefore(1);
    sheet.getRange(1, 1).setValue(msg);
    var rows = sheet.getRange(1, 1, 10);
    var numRows = rows.getNumRows();
    var values = rows.getValues();
 
   var string = "";
   for(var i = values.length-1 ;i >= 0; --i)
   {
     string += "<p>" + values[i][0] + "</p>";
   }
   string += "<p><input type='text' name='msg' value='' placeholder='Mensaje'></p>";
   string += "<button onclick='SendMessage();'> ENVIAR <button>";
   return string;
}

index.html
<!DOCTYPE html>
<html>
  <head>
    <script>
    function DrawInfo(string)
    {
       if(string != "" )
       {
             document.body.innerHTML = string;
       }
    }
  
    function SendMessage()
    {
       google.script.run.withSuccessHandler(DrawInfo).SendChat( document.getElementsByName("msg")[0].value);
    }
  
    function IrAPaginaPrincipal()
    {
           document.body.innerHTML = "<h1> Bienvenido al chat para usuarios registrados</h1>" +
           "<button onclick='Iniciar()'> INICIAR CHAT </button>";
    }
  
    function Iniciar()
    {
       google.script.run.withSuccessHandler(DrawInfo).SendChat("Inicio de sesion de nuevo usuario");
    }
  
    function HaEntrado(enter)
    {
        if(enter)
        {
            IrAPaginaPrincipal();
        }
        else
        {
          document.getElementsByName("mensajebienvenida")[0].innerHTML = "Usuario o password incorrecto";
        }
  
    }
  
    function tryLogin()
    {
        var user=document.getElementsByName("login")[0].value;
        var password=document.getElementsByName("password")[0].value;
        google.script.run.withSuccessHandler(HaEntrado).Login(user,password);
    }
    </script>
  
  </head>

  <body onLoad="setInterval('refresher()',5000);">
  <label name="mensajebienvenida">  Usuari no registrado   </label>
   <section class="container" >
    <div class="login" name="LoginPage">
      <h1>Zona privada para lectores del blog</h1>
      <form method="post" action="index.html">
        <p><input type="text" name="login" value="" placeholder="User"></p>
        <p><input type="password" name="password" value="" placeholder="Password"></p>
        <p class="submit"><input type="submit" name="commit" value="Login" onclick="tryLogin()"></p>
      </form>
    </div>
  </section>

  </body>
</html>


Si quereis probar el chat implementado podeis mirarlo en la siguiente dirección :  https://sites.google.com/site/chatimplementadoconscript/home

Si todo ha ido bien ,después de logearos, debería apareceros una pantalla de chat como esta:
Cualquier cosa ya lo sabéis

7 comentarios:

  1. hi,

    I tried your example using your code on my account or your link
    https://sites.google.com/site/chatimplementadoconscript/home?previewAsViewer=1

    but I always end up with the same error:

    Refused to display 'https://accounts.google.com/ServiceLogin?service=wise&passive=1209600&conti…qsqiumgkggyybxdus25giac3o3ta-0lu-script.googleusercontent.com%2Findex.html' in a frame because it set 'X-Frame-Options' to 'DENY'.

    https://accounts.google.com/ServiceLogin?service=wise&passive=1209600&conti…qsqiumgkggyybxdus25giac3o3ta-0lu-script.googleusercontent.com%2Findex.html Failed to load resource: the server responded with a status of 400 ()

    any idea ??
    thanks

    Jeanlouis

    ResponderEliminar
    Respuestas
    1. Ummm... can u make me a screenshoot of ur code? Its seems that is a problem with permissions, but is the first time that i see it.

      Are u trying, maybe, to use my document with the passwords?

      Show me ur exactly code u r using and i will try to say u more.

      cya

      Eliminar
    2. es muy interesante pero no me deja

      Eliminar
  2. he cogido el codigo lo he pègado y me da muchos errores

    ResponderEliminar
    Respuestas
    1. Hola,

      Este código lo hice hace bastantes años. Es muy posible que Google haya tocado algo en la gestión del html que ahora haga que no funcione.

      Voy bastante liado, pero intentaré algún dia volver a hacer el proyecto desde 0 para que quede funcional.

      Gracias por avisar!

      Eliminar
  3. he me gustaria hacerlo pero no se nada soy principienta porfavor pon el nuevo ya que da solo unos errores (pocos asi que ayudame no te ocupara mucho tiempo)

    ResponderEliminar
  4. existe alguna manera de enviar un mensaje a google chat desde google sheets?
    Lo que intento hacer es enviara un mensaje prederteminado a un contacto, tengo una tabla nonmbres y apellidos, email, numero pin(random), quiero enviar el numero pin por medio de google chat.
    Epero puedan ayudarme.
    Gracias

    ResponderEliminar

Tal vez te interese