使用谷歌应用程序脚本构建实时仪表板 [英] build real time dashboard using google apps script

问题描述

我希望能够不断(实时)更新我的网络应用程序，以便随时更新我的​​ Google 表格(通过使用应用程序脚本的 doGet 函数配置的网络钩子)，同样显示在我构建的 HTML 仪表板中.

我不需要帮助来设置我的工作表、网络钩子或 HTML 仪表板 - 我已经设置了所有这些.

我确实需要关于如何更新我的 HTML 仪表板(网络应用程序)的帮助/建议，无论何时我的 doGet 函数或工作表上有更新(那部分并不重要).

最好的例子是每次有新用户登陆您的网站时，Google Analytics 实时仪表板的变化方式.

附注.我知道我应该分享一些代码，但我所拥有的一切都与我真正想要的无关；希望这很清楚，但如果你们中的任何人需要查看我的代码/表，我很乐意创建一个虚拟版本.

解决方案

您需要使用:

• google.script.run.withSuccessHandler 这是一个 JavaScript，异步，

  浏览器控制台日志可以在这里查看-

  我写了这个几周前的文章概述了迄今为止每个人都在回答/评论的大部分内容，但我希望我在这里的解释也能有所帮助.

  I want to be able to update my web app constantly (in real time) such that anytime there's an update on my Google Sheet (via a webhook configured using apps script's doGet function), the same is shown in the HTML dashboard that I've built.

  I don't need help with setting up my sheet, or the webhook or the HTML dashboard - I have all of that already setup.

  I do need help / advise on how can I update my HTML dashboard (web app) any time there's an update either on my doGet function or on the sheet (that part doesn't really matter).

  The best example would be the way Google Analytics realtime dashboard changes, every time there's a new user who lands on your website.

  PS. I know I'm supposed to share some code but everything I have has nothing to do with what I actually want; hope that's clear but should there be a need for any of you to see my code/sheet, I'd be happy to create a dummy version.

  解决方案

  You'll need to use:

  • google.script.run.withSuccessHandler which is a JavaScript, asynchronous, Client-side API that allows you to interact with server side functions (references could be found here).
  • setInterval function to invoke the aforementioned client-side API at a frequency you see fit
    • 3000/3500 milliseconds is what I've been using so far and the service quotas don't specifically talk about its limitations

  Server side

  This is pretty much the code that gets written in the code.gs part of the script; where all your functions reside that interact perhaps with your Spreadsheets or act as the webhook

  Client side

  That's the code that runs from your *.html file and, post loading, on your web browser. This is where you get to use the "asynchronous" API

  Example

  In my dummy setup, I'm -

  1. Fetching random quotes from thesimpsonsquoteapi
  2. Displaying a timer that changes every second

  Code.gs (server-side code)

  function doGet(e) {
    return HtmlService.createHtmlOutputFromFile('Index').setTitle('Realtime Data');
  }
  
  function randomQuotes() {
    var baseURL = 'https://thesimpsonsquoteapi.glitch.me/quotes';
    var quotesData = UrlFetchApp.fetch(baseURL, { muteHttpExceptions: true });
    var quote;
    var imageURL;
    if (quotesData.getResponseCode() == 200 || quotesData.getResponseCode() == 201) {
      var response = quotesData.getContentText();
      var data = JSON.parse(response)[0];
      quote = data["quote"];
      imageURL = data["image"];
    } else {
      quote = 'Random Quote Generator is broken!';
      imageURL = 'https://cdn.shopify.com/s/files/1/1061/1924/products/Sad_Face_Emoji_large.png?v=1480481055';
    }
    var randomQuote = {
      "quote": quote,
      "imageTag": '<img class="responsive-img" src="' + imageURL + '">'
    }
    return randomQuote;
  }
  
  function getTime() {
    var now = new Date();
    return now;
  }
  

  Index.html (client-side code)

  I'm only highlighting the relevant aspects of the code

  The following fetches random quotes every 10 seconds (10000 ms)

  <script>
      function onSuccess1(quotedata) {
          var quoteactual = document.getElementById('quote');
          quoteactual.innerhtml = quotedata.quote;
          var quoteimg = document.getElementById('quoteImage');
          quoteimg.innerhtml = quotedata.imagetag;
      }
  
      setInterval(function() {
          console.log("getting quote...")
          google.script.run.withSuccessHandler(onsuccess1).randomQuotes();
      }, 10000);
  </script>
  

  This fetches time every 1 second (1000 ms)

  <script>
      function onSuccess2(now) {
          var div = document.getElementById('time');
          var today = new Date();
          var time = today.getHours() + " : " + today.getMinutes() + " : " + today.getSeconds();
          div.innerhtml = time;
      }
  
      setInterval(function() {
          console.log("getting time...")
          google.script.run.withSuccessHandler(onsuccess2).getTime();
      }, 1000);
  </script>
  

  You can access the entire script on my github repository or make a copy from the original script.

  Output

  The image here is supposed to change every 10s and timer, every 1s

  The browser console log can be viewed here -

  I wrote this article a couple weeks ago that outlines most aspects of what everyone has been answering/commenting so far but I'm hoping my explanation here helps as well.

  这篇关于使用谷歌应用程序脚本构建实时仪表板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！