D29 - 如何打包 Apps Script 的程序码？（二）包成 HTML 网页与或 API

今日的目标

要怎麽将我们的 GAS 成果打包成别人可以使用的版本？我们已经学了快一个月的 GAS 使用方式，但并不是每个人都熟悉 GAS 的进入与使用。我们要怎麽样让其他人也便於上手运用我们 GAS 的成果？

这个主题分成两个部分——

  1. 包成扩充功能（Add-On）似的 UI 选项
  2. 包成能用於连接的 API / HTML page

昨天我们介绍了第一题，那我们今天会主要介绍第二题背後的「关键问题」——

Q2. 怎麽将我的 GAS 成果包成 HTML 网页或 API 给他人使用？

Input

  • 网页上想呈现的资讯（简易）

Output

  • 一个可让使用者连线的网站

先偷看一下之後的简易结果——

Step 1 从 Google Sheet 进入 GAS

今天我们用 Google Sheet 作为连结 GAS 的管道，让我们借用 D14 的影片。

一样第一次按下 GAS 中的「执行」会有「存取验证」需要大家按一下。这边仍是借用一下 D2 的影片。

接着，我们要进入 GAS 中设定 UI 画面。

Step 2 在 GAS 中新增 html 的范例

在 GAS 中，主要有程序码与 html 页面。而我们一直以来主要都是使用前者，今天要来介绍後者，这一步骤很简单，就是直接按新增即可。

html page 的用途很广，昨天我们在讲包装成 UI 时，其中的 prompt 和 sidebar 中其实就可以放入这 html page。但要怎麽放入呢？主要是要透过 HtmlService.createHtmlOutputFromFile("index"); 来达成，以下搭配网址一起说明。

Step 3 用 doGet 加上部署来取得网站！

基本上，我们要用网址取得我们写好的 html page，在 GAS 中最简单的程序码如下——

function doGet(e){
  return HtmlService.createHtmlOutputFromFile("index");
}

但，我们有了程序码，可是网址呢？这时候就要讲到 GAS 的部署 Deploy 了。部署的意思就是发布到网路上，可以用网址的形式进行存取（可能是回传网页、也可能是回传数值）。而部署的过程同下面影片——

主要就是右上角按 GAS 右上角的「新增部署」即可，第一次执行可能需要再次存取验证。好，部署後我们会拿到一个「网页应用程序网址」，理论上点开就会是我们网页的内容了。我们简单新增一个网页来看结果，理论上会出现「天气测试」的字样。

<!DOCTYPE html>
<html>
  <head></head>
  <body>
  	<h1>天气测试</h1>
  </body>
</html>

跑起来如下，看起来成功！

如果这步骤没有成功，很有可能是 GAS 中还没有加入 doGet。

Step 4 测试与管理部署作业

基本上部署後的内容，是不会即时跟着我们的网页更新的。举例来说，当我在同一个网页中再复制一个「天气测试」的字样。它就不会更新到我刚刚开设的网址中——

这样的话要怎麽看，我们的程序码有没有及时更新呢？我们总不能每次都按一次新部署吧。这时就是「测试部署」派上用场的时候了。测试部署是一个不提供对外连线的部署网址，但是提供即时的更新。进入画面如下——

一个小提醒是，「测试部署」需要我们已经部署第一个「网页应用程序」之後，才能顺利运作。以下我都会主要用「测试部署」来做说明。

那测试完之後，我们要怎麽更新或删除部署？这时就可以到右上角的「管理部署作业」进行删除或更新。这边假设「三个天气测试」版本的网页是我们要更新上去的，这时就要透过「管理部署作业」>点击要更改的网页页面项目 > 按右上角的笔 > 打开下拉选单 > 建立新版本。实作如下图——

好，那当我们会了新增、测试与更新後，接着很重要的是要会「删除」。因为如果我们不去删除 Deployment ，它会一直在网路上跑着，哪天有哪个爬虫扫到之後，可能 Google 会记很可怕的帐单给你。以下我们示范删除的步骤。

删除在部署当中，有另外的名字叫做「封存」。封存的步骤如下图——

经过封存後的网址，再度连结时，就会像我们影片中最後面那样的样子。好，那当了解部署之後，接着就是怎麽跟这部署的网页互动了。

Step 5 在网页中执行 GAS 的程序码，并获得回传值

那我们要怎麽在网站应用程序中取得 GAS 的数据呢？主要是要透过 google.script.run.withSuccessHandler 这个 API。以下程序码为了方便初学者理解，就单纯用 vanilla javascript 的语法并在单页中写完。进阶读者可以用 JQuery 等框架帮助。

先在 GAS 中写一段简易的功能，主要是会回传一个「Hello」的数值。

function getLoginGreeting(){
  let greeting="Hello";
  Logger.log(greeting);
  return greeting;
}

测试一下功能性，确定会回传——

接着就是要将这个功能与 HTML 串连，来看看我们 index.html 的程序码——

  <head>
    <script>
      window.onload = function() {
        google.script.run.withSuccessHandler(
          function(greeting){
            document.getElementById("greeting").innerHTML=greeting;
          }
        ).getLoginGreeting();
      });
    </script>
  </head>
  <body>
    <div>
      <div><span id="greeting"></span></div>
      <h1>天气测试</h1>
    </div>
  </body>

跑起来长这样——

那我们一步步来看程序码。

  1. 首先，透过 window.onload 表示在使用者点入网址後，就会跑後面 function() 内的程序码。
  2. 再来，我们透过 google.script.run.withSuccessHandler() 与後台沟通。其关系如下。

  1. 当我们後台的程序码执行完毕後，再透过 withSuccessHandler() 里面来指派要在这个页面执行的任务
  2. 我在这个页面中，创造一个 id 是 greeting 的 <span> ，并在withSuccessHandler() 中指派说要将里面的字体改为 getLoginGreeting() 的回传值。

进阶一点，我们来看怎麽将数值传入前端。

Step 5-1 在网页中将数值传入 GAS 的程序

先来看看这份 GAS 中的程序码，跟刚刚比，我们多设定了一个变数 name。

function getLoginGreeting(name){
  let greeting="Hello "+ name;
  Logger.log(greeting);
  return greeting;
}

然後修正 html， 主要加入 name 的部分。这边是用比较简单的加法，直接加上 <script> 之上。但也可以是跟网页互动後得到的数值。

  <head>
    <script>
	var user_name = "Brad"
      window.onload = function() {
        google.script.run.withSuccessHandler(
          function(greeting){
            document.getElementById("greeting").innerHTML=greeting;
          }
        ).getLoginGreeting(user_name);
      });
    </script>
    <style>
    </style>
  </head>
  <body>
    <div>
      <div><span id="greeting"></span></div>
      <h1>天气测试</h1>
    </div>
  </body>

跑起来长这样——

好，那当知道怎麽传入数值後，变化就很多元。包括在前端做一个简单的问卷传到後台，或甚至是要将一些前端互动的纪录到後台也没问题。基本上就是扣回之前说的，在 GAS 中运用 setValue 即可达到。更多 HTML 的变化可以参考 官方文件

Step 6 将 GAS 的程序打包成 API

对 API 不熟悉的人，可先理解成，我们输入网址时会回传的资料。而 html 是其中一种资料的格式。我们先来看怎麽样弄一个简单的 API，一样要套用 doGet

function doGet(e){
  let response = 'Hello';
  return ContentService.createTextOutput(response);
}

看一下怎麽样新增 API 并执行——

可以看到，它回传的就是很素很素的文字。但这样其实就可以搭配回传 Google Sheet 里面的值，像是弄一个网址给老板看到底目前剩多少预算、或是到底多少人报名了等等。有蛮多延伸应用的。

好，那今天就到这边。我们今天主要学了——

  1. 如何在 GAS 中创造 html 页面并设定部署与用 doGet 连线
  2. 如何新增、开发、更新与删除部署
  3. 如何让创造的 html 网页与 GAS 程序码互动
  4. 如何创造可以回传单纯资料的 API

那以上就是我们打包系列的两堂课。

那今天就到这边，铁人赛也接近了尾声，下一章是做总整理，让大家知道遇到什麽问题，可以去参考哪一张。希望这些内容对大家有所帮助。如果还有问题，透过留言之外，也可以到 Facebook Group，想开很久这次铁人赛才真的开起来，欢迎来当 Founding Member。如果不想错过可以订阅按赞小铃铛（？），也欢迎留言跟我说你还想知道什麽做法/主题。我们明天见。


<<:  Day 14. Tutorial: Create a scene flow - 10. Challenge Answer

>>:  EP17 - 容器化你的 Django 专案

[Vue2] 从初学到放弃 Day8-绑定Class&&Style

在这个范例里，是用单一方式去验证active是否为true <div v-bind:class...

Day 17 - Remove Duplicates from Sorted List

大家好，我是毛毛。ヾ(´∀ ˋ)ﾉ 废话不多说开始今天的解题Day~ 83. Remove Dupl...

在GCP VM上开发Python

订阅patreon即可看到更多文章 https://www.patreon.com/wade3c ...

自动化 End-End 测试 Nightwatch.js 串接 gitlab CI/CD

既然可以在 local 执行 E2E 了，与其占用一个 terminal 并让电脑跑，不如就交给 g...

Day15-1.Two Sum

今日题目：1.Two Sum(Easy) Given an array of integers nu...