2024年3月18日 星期一

Google Apps Script (GAS) 學習筆記 (三) : 使用者介面元件 (上)

本篇要來測試 Google Apps 的常用 UI 元件. 


UI 元件是用來與 Google Apps 互動的介面, 本測試主要是以試算表為例, 其實每一種 Google Apps (文件, 試算表, 表單等) 上都可以放 UI 元件. 


一. 按鈕與訊息盒 : 

在 Google Apps 上放置按鈕主要是用來觸發執行一個函式. 首先如前一篇測試所示, 在雲端硬碟的自訂資料夾 GAS 下新增一個試算表, 並更名為 ui_test : 




然後點選 "擴充功能" 再選 "Apps Script" : 




 將產生的未命名 GAS 專案名稱與預設函式 myFunction() 都改為 hello :




然後在 hello() 函式中輸入下列程式碼 : 

Browser.MsgBox('Hello World!');

此處 Browser 為 GAS 的瀏覽器物件, 可在網頁中顯示按鈕, 訊息框與輸入框等元件. 其實在輸入函式的第一個字元時就會顯示下拉式選單讓我們點選物件或方法名稱, 輸入方法的括號時也會顯示參數說明 :






按 "儲存專案" 鈕存檔後, 右邊的 "執行" 鈕才會變成可按 :




按 "執行" 鈕先測試程式碼效果, 這時會彈出一個 "需要授權" 視窗, 請按 "審查權限" 鈕 : 




然後會彈出 Google 帳戶選擇視窗, 點選自己的 Google 帳戶 :




接著會彈出 "這個應用程式未經 Google 驗證" 的警告, 按左下角的 "進階" :



這時底下會出現一段若不信任開發人員 (就是自己啦) 勿繼續操作警語, 請按底下的 "前往 hello 」 (不安全)" 超連結進行授權 :



在彈出視窗中按右下角的 "允許" 鈕即完成執行此程式之授權 :




這時再次按下專案視窗中的 "執行" 鈕, 就會在試算表視窗中彈出一個訊息框 (注意, 執行結果不是顯示在 GAS 專案視窗, 而是它寄生的試算表視窗) : 





按下 "確定" 鈕即可關閉訊息框, 此按鈕為 msgBox() 方法第二參數所控制, 如果沒有傳入第二參數, 預設為 Browser.Buttons.OK (確定), 其他可傳入值如下 :
  • Browser.Buttons.OK_CANCEL
  • Browser.Buttons.YES_NO
  • Browser.Buttons.YES_NO_CANCEL
以上只是測試此 GAS 專案程式碼是否可順利執行 (並授予該帳戶執行權), 但這次目的不是要在 GAS 專案視窗上直接按執行鈕來執行程式碼, 而是要在試算表 App 上放一個按鈕, 讓使用者按下按鈕時執行 hello(), 所以接下來要在試算表視窗上繪製一個按鈕. 

回到試算表 App 視窗, 點選上方的 "插入" 選單, 再點選 "繪圖" :




這樣會彈出一個繪圖板視窗, 點選圖案按鈕, 選擇 "圖案" 第一排適合做按鈕的圖形, 在繪圖板上畫出一個按鈕圖形 : 





點選此按鈕, 按滑鼠右鍵, 點選 "編輯文字", 輸入按鈕上的文字例如 "按我執行" :




按上方的 "儲存並關閉鈕" : 關閉繪圖板視窗 : 




這時試算表上就會出現一個浮動的按鈕 (可拖曳到任何位置, 不屬於任一儲存格) :




接下來是要將此按鈕綁定按下動作 (click) 要執行的函式, 重點來了, 先點選此按鈕, 這時按鈕右上發會出現三個垂直小點, 按它會彈出一個選單, 點選其中的 "指派指令碼" :




這時會彈出一個視窗, 請在輸入框中輸入欲執行的函式名稱 (不要加括號) 即完成指派 : 




這時按下試算表上的 "按我執行" 鈕就會直接執行 hello() 了 : 




以上雖然只是簡單的功能, 但實際應用時函式可能會很複雜, 但只要按一個按鈕就可以執行此函式, 而不需要開啟 GAS 專案視窗來執行. 

參考 : 


GAS 的 UI 除了輸入外也可以用 Browser 物件的 InputBox() 方法來取得使用者輸入, 我們修改上面的 hello 專案, 將 hello() 函式改成如下 :

function hello() {
  var name=Browser.inputBox('請輸入名字');
  Browser.msgBox('Hello, ' + name);
}




此處 Browser.InputBox() 的傳入參數為輸入框的提示語 (prompt) 或標題, 其傳回值為輸入框內的字串, 我們先將其存在 name 變數中, 然後傳入 msgBox() 的組合字串中輸出. 將此專案存檔後, 切回試算表視窗, 按下 "按我執行" 鈕, 這時會彈出一個輸入框, 填入名字按確定, 就會在談出的訊息框李顯示名字了 :




市圖還書 1 本 (特洛伊木馬病毒程式設計)

本周市圖還書 1 本 (被預約) : 
此書有出加強版 (電子書), 參考 :


另外, 我在 Medium 找到一篇此書的評論, 很值得參考 :


2024年3月17日 星期日

2024 年第 11 周記事 (掃墓)

本周周日為家族掃墓日, 早上是衙門對面山上的家祠, 下午則是田中央的來台祖, 早上貼紅紙時, 嬸嬸看見我拿的是五福臨門, 她說應該買祖德流芳才對, 跟金香店講即可. 這要列入掃墓 SOP, 明年要改買這種. 其次是張數, 家祠要帶 12 張 (內門不用貼), 來台祖是 6 張. 另外防風蠟燭, 家祠帶 3 對, 來台祖帶 4 對. 

本想放個鋁梯在家祠門內, 週三去振宇五金看三尺鋁梯是 780, 小北與上元都賣 990, 週六本想去買載回鄉下, 但時間不夠沒買, 但幸好沒買, 因為今天看到堂兄用的是五尺的, 覺得這個要貼紅紙高度才夠, 下周要去振宇買一個五尺的. 

今年有新生代參加掃墓, 堂姪們帶了小朋友來, 讓我晉身為叔公級, 我是既高興又感到畏懼, 每日作學問不知老之將至也. 另彥倫堂妹的女兒讀雄女資工班, 非常優秀, 難得掃墓還有人能與我談 C++, Python 與 AI. 

下午來台祖掃墓, 大家兩點半已擺好祭品, 但堂弟卻弄錯時間以為是 3 點, 惹得堂哥似乎有些不快, 說家族群組要做個表格, 提醒大家掃墓時間. 有空我來做個機器人自動提醒大家唄. 

停了一個多月後, 本周恢復 Hahow 企業版課程學習, 上完兩堂 AI 人人學與一堂韓語基礎發音, 發現韓語拼音確實很符合語言學的規則耶! 有打算帶爸去韓國玩 (自由行), 想先學點韓語.

2024年3月16日 星期六

Google Apps Script (GAS) 學習筆記 (二) : 用 Logger.log() 輸出訊息

這篇筆記是我在 2020-01-31 寫的, 寫了一半卻停下來. 3/4 日在臉書看到 Line 群組謝昌勳老師要講 GAS 的課, 所以又把之前買的 "Google Apps Script 雲端自動化與動態網頁系統實戰" 這本書拿出來啃 (此書已出第二版), 順便把這篇筆記寫完.   

本系列之前的文章參考 :


Google 雲端硬碟的試算表 (SpreadsheetApp) 除了可以取代 Excel 外, 最強的功能是有免費額度可用來製作網路爬蟲, 然後將結果儲存在試算表中; 而且還能透過觸發器來達成自動化 (類似 Linux 的 Crontab 功能). 但與 Excel 不同的是, SpreadsheetApp 使用的程式語言是源自 Javascript 的 GAS, 它相當於是 Javascript + Google 自訂物件.

在程式開發時經常需要輸出變數值以便能進行偵錯, 最常用來輸出資訊的的 UI 元件是訊息盒 (Message Box), 在網頁開發時通常使用 Javascript 的 window.alert() 將變數輸出到彈出視窗中, 或者用 document.write() 將變數輸出到網頁. 雖然都是 Javascript 執行環境, 但在 GAS 中這兩種方法都無法使用, 而是要改用 Logger.log() 方法. 


一. 建立資料夾與試算表 :    

首先在 Google 雲端硬碟下建立一個資料夾 GAS 來存放測試檔案與資料, 避免雜亂無章, 先按左上角的 "+ 新增" 按鈕 :




選擇 "新資料夾" : 




於彈出視窗中輸入資料夾名稱, 例如 GAS, 然後按 "建立" : 




這樣雲端硬碟根目錄下就產生了一個名為 GAS 的空資料夾 : 




點此 GAS 空資料夾進去 : 




再次按左上角的 "+ 新增" 按鈕, 這回點選 "" :




這時會彈出一個類似 Excel 介面的未命名試算表新視窗 :




點選左上角的 "未命名的試算表", 在輸入框中輸入試算表的新名稱, 例如 output_test :




此時切回雲端硬碟視窗就會看到此試算表檔案 :




這樣便將 GAS 要寄生的運算平台搭建好了. 


二. 使用 Logger.log() 輸出訊息 :    

GAS 程式可以單獨存在於雲端硬碟中 (副檔名為 .gs) 或者寄生於 Google Apps 例如文件, 試算表, 或表單之中, 下面是 GAS 寄生在試算表的範例 :

在上面所建立的試算表 output_test 中, 點選 "擴充功能/Apps Script" :




這樣會彈出一個未命名的 Apps Script 專案新視窗, 裡面已經預設好一個空的函式 myFunction() : 




點選上方的 "未命名專案", 給它取個新名稱, 例如 output_test, 按 "重新命名" 鈕 :



 
這樣上方的 Apps Script 專案名稱就變成 output_test 了, 接著在 myFunction() 中輸入程式碼, 這裡使用 Logger 物件的 log() 方法輸出 "Hello World!" 字串, 然後按上方的 "儲存專案" 鈕 : 




儲存完畢後上方的 "執行" 鍵才會變成可按, 按此按鈕即可執行程式碼, 結果會顯示於下方的 "執行記錄" 窗格內 : 





如果將要輸出檢視的變數傳給 Logger.log() 便能看到變數值, 可協助程式偵錯. 

注意, 如果切回雲端硬碟底下的 GAS 資料夾, 會發現根本不存在這個 "程式碼.gs" 檔案, 因為此 Script 專案是寄生在試算表 "output_test" 裡面. 

我們也可以建立獨立 (standalone) 於 App 外的 GAS 程式檔, 按雲端硬碟左上角的 "+ 新增" 按鈕, 然後點選選單底下的 "更多", 再點選 "Google Apps Script" :




這時會彈出一個視窗, 提醒用這方式建立的程式碼所有協作者均可執行, 按 "建立指令碼" :




這時會產生一個未命名的 Apps Script 專案新視窗 : 




雖然與上面試算表中建立的 Script 專案介面一模一樣, 但不同之處是此處所建立的專案會在雲端硬碟底下建立一個 .gs 檔案 (未命名的專案) : 




回到此獨立的專案視窗, 按左上角的 "未命名專案" 更改名稱為 output_test_standalone : 




這時再回到雲端硬碟視窗, 就會看到專案名稱已經改成 output_test_standalone.gs 了 :




回到專案視窗, 於 myFunction() 中同樣輸入與上面相同的程式碼 Logger.log('Hello World!'), 按上方 "儲存檔案" 後, 再按 "執行" 鈕 : 





可見結果與上面寄生於試算表 App 的程式是一樣的.