Report: Efficiently Creating Web Apps using a Google Apps Script library

report / Google Apps Script / library
GasTips / library

Gists

This is a sample script for efficiently creating Web Apps using a Google Apps Script library.

When a Google Apps Script library is used for creating Web Apps, the following advantage can be obtained.

  • The script of the client-side can be simpler. Because most scripts for constructing Web Apps are included in the Google Apps Script library.
  • When the script of Web Apps (In this case, the script of Google Apps Script library is modified.) is modified, the latest script is reflected in the Web Apps, immediately. Because when the Google Apps Script library is used as the latest version when the script of the library is modified, the client can use the latest script of the library, immediately. So, the downtime of Web Apps can be reduced.
    • By this, it is not required to manually reflect the latest version of the script to the Web Apps.
  • When you can change the script of Web Apps by changing the deployed version of the library.

The sample script for explaining this is as follows.

Usage

1. Create 2 Google Apps Script projects.

In this sample, please create 2 standalone Google Apps Script projects. Please set those filenames like SampleLib and Client.

2. Prepare sample script.

For Client

In this case, the sample script of Client is very simple as follows.

Code.gs
const doGet = (e) => SampleLib.forDoGet(e);
const wrapper = (f) => SampleLib[f]();

For SampleLib

The sample script of SampleLib as follows.

Code.gs
function sample1() {
  return "ok1";
}

function sample2() {
  return "ok2";
}

function forDoGet(e) {
  return HtmlService.createHtmlOutputFromFile("index");
}
index.html
<input type="button" value="ok1" onclick="main('sample1')" />
<input type="button" value="ok2" onclick="main('sample2')" />
<div id="res"></div>
<script>
  function main(name) {
    google.script.run
      .withSuccessHandler((e) => {
        document.getElementById("res").innerHTML = e;
      })
      .wrapper(name);
  }
</script>

3. Deploy SampleLib as a library.

Please deploy SampleLib as a library. Ref

In this case, please copy the script ID. This script ID is used for installing the library to Client.

4. Install a library.

Please install a library to Client. Ref

5. Testing.

  1. Please open Client, and deploy Web Apps. Ref

    • Here, please copy the Web Apps URL like https://script.google.com/macros/s/###/exec.

    • And, here, the scopes of methods used in the library are authorized. So, when you change the scopes in the library, please authorize the new scopes at Client side. Please be careful about this.

  2. Please open the Web Apps using your browser.

  3. When the Web Apps is run, the following demonstration can be seen.

  • As the additional information, in the above script of SampleLib, for example, when you modify as follows, and save the script, when you click the button, you can confirm that the latest script has already been reflected. This is an important point of this method.

    • From

      function sample1() {
  return "ok1";
}

function sample2() {
  return "ok2";
}

    • To

      function sample1() {
  return "updated ok1";
}

function sample2() {
  return "updated ok2";
}

References

 Share!