使用Google Apps脚本构建实时仪表板 [英] build real time dashboard using google apps script

问题描述

我希望能够不断(实时)更新我的网络应用程序，这样，只要我的Google表格上有更新(通过使用应用程序脚本的doGet函数配置的webhook)，HTML就会显示相同的内容.我建立的仪表板.

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.

我不需要设置工作表，webhook或HTML仪表板的帮助-我已经设置了所有这些东西.

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

我确实需要帮助/建议，无论何时我的doGet函数或工作表上有更新(该部分没有更新)时，如何更新我的HTML仪表板(Web应用程序)真的很重要).

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).

最好的例子是每次有新用户登陆您的网站时Google Analytics(分析)实时仪表板的更改方式.

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.我知道我应该共享一些代码，但是我所拥有的一切都与我的实际需求无关.希望很清楚，但是如果您有需要看到我的代码/工作表的话，我很乐意创建一个虚拟版本.

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.

推荐答案

您将需要使用:

• google.script.run.withSuccessHandler，它是JavaScript，异步的客户端API 允许您与服务器端功能进行交互(可以在此处找到引用).
• setInterval函数以您认为合适的频率调用上述客户端API
  到目前为止，我一直在使用
  • 3000/3500毫秒，而服务配额没有具体讨论其局限性
  • 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

    这几乎是在脚本的 code.gs 部分中编写的代码；所有功能都驻留在其中的位置，这些功能可能与电子表格交互或充当Webhook

    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

    这是从您的 *.html 文件运行并在加载后在您的Web浏览器上运行的代码.这是您使用异步" API的地方

    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

    在我的虚拟设置中，我-

    1. 从 thesimpsonsquoteapi
    中获取随机报价
    2. 显示每秒钟更改一次的计时器
    1. Fetching random quotes from thesimpsonsquoteapi
    2. Displaying a timer that changes every second

    Code.gs(服务器端代码)

    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(客户端代码)

    我只强调代码的相关方面

    以下代码每10秒(10000毫秒)获取随机引用

    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>
    

    这每1秒钟(1000毫秒)获取一次时间

    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>
    

    您可以在我的github存储库上访问整个脚本或从原始脚本中复制副本.

    这里的图像应该每10秒更改一次，计时器每1秒更改一次

    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.

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