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 sabeis

2 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

Related Posts Plugin for WordPress, Blogger...