3번째 예제

function doGet(e) {
  Logger.log(e);
  return HtmlService.createHtmlOutputFromFile('page');
}

function userClicked(name){
	//스프레드 시트의 url 그대로 사용
  var url = '<https://docs.google.com/spreadsheets/d/1kxYWuU7DKuCACpklifgq_t53EGx2dY9nByXSREoo61c/edit#gid=0>'
  var ss = SpreadsheetApp.openByUrl(url);
  var ws = ss.getSheetByName("data");

  ws.appendRow([name]);

  Logger.log(name + 'hello world!');
}
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <h1>hello</h1>

    <label for="username">name : </label>
    <input type="text" id="username">
    <button id="btn">Run</button>

    <script>
      document.getElementById('btn').addEventListener('click', doStuff);

      function doStuff(){
        var uname = document.getElementById('username').value;
        google.script.run.userClicked(uname);
        document.getElementById('username').value = '';
      }
    </script>

  </body>
</html>

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/8b83c372-b367-4515-977e-c223da90f95e/Untitled.png

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/c6ecf93d-8365-4356-9088-bfca690a2a9e/Untitled.png


css와 js 파일 분리

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/de47b871-7306-457c-8152-ca7869838814/Untitled.png

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/a2d7313b-81fc-443a-9cfb-4dde84752b86/Untitled.png

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/d5651770-77ae-4ad9-a1aa-0c94c0c72b58/Untitled.png