GSP235

總覽

在本實驗室中，您將瞭解如何使用主流網頁開發語言 JavaScript，以最簡單的方式編寫程式碼來存取 Google 開發人員技術。您可以使用 Google Apps Script 編寫程式碼，從 Google 試算表儲存格擷取地址、根據該地址產生 Google 地圖，並透過 Gmail 將地圖連結傳送給自己或朋友。最棒的是，只需要 4 行程式碼就能辦到！

目標

• 概略學習 Apps Script，以便達成下列目標：
• 建立新的 Google 試算表
• 瞭解如何開啟文件的指令碼編輯器
• 編輯、儲存及執行 Apps Script 程式碼
• 透過 Gmail 查看成果！

建議具備的技能

具備以下技能可提升學習體驗：

• 基本 JavaScript 技能 (有幫助，但非必要)
• 基本試算表技能

設定和需求

瞭解以下事項後，再點選「Start Lab」按鈕

請詳閱以下操作說明。實驗室活動會計時，且中途無法暫停。點選「Start Lab」後就會開始計時，顯示可使用 Google Cloud 資源的時間。

您將在真正的雲端環境完成實作實驗室活動，而不是模擬或示範環境。為此，我們會提供新的暫時憑證，供您在實驗室活動期間登入及存取 Google Cloud。

為了順利完成這個實驗室，請先確認：

• 可以使用標準的網際網路瀏覽器 (Chrome 瀏覽器為佳)。

注意事項：請使用無痕模式 (建議選項) 或私密瀏覽視窗執行此實驗室，這可以防止個人帳戶和學員帳戶之間的衝突，避免個人帳戶產生額外費用。

• 是時候完成實驗室活動了！別忘了，活動一旦開始將無法暫停。

注意事項：務必使用實驗室專用的學員帳戶。如果使用其他 Google Cloud 帳戶，可能會產生額外費用。

開始進行實驗室

1. 準備就緒後，請點按「Start Lab」。

   「Lab Details」窗格會顯示在本實驗室中登入 Gmail 時，必須使用的暫時憑證。

   如果實驗室會產生費用，畫面中會出現選擇付款方式的彈出式視窗。

2. 點按「Open Google Sheets」。

   接著，實驗室會啟動相關資源，並開啟另一個分頁顯示「登入」頁面。

   提示：您可以在不同的視窗並排開啟分頁。

3. 如有必要，請將下方的 Username 貼到「登入」對話方塊：

   {{{user_0.username | "Username"}}}

4. 點按「Next」。

5. 複製下方的 Password，並貼到「歡迎使用」對話方塊：

   {{{user_0.password | "Password"}}}

6. 點按「Next」。

7. 顯示提示時，請同意所有條款及細則。

Google 試算表隨即開啟，您會登入學員 Google 帳戶。

什麼是 Google Apps Script？

Google Apps Script 的開發環境可能與您慣用的環境不同。使用 Apps Script 可以：

• 透過瀏覽器上的程式碼編輯器開發；如果使用 clasp (Apps Script 的指令列部署工具)，可選擇在本機開發
• 以量身打造的 JavaScript 專用版本編寫程式碼，可存取 Workspace 和其他 Google 或外部服務 (URLfetch、Jdbc 等)
• 放心略過編寫授權碼，Apps Script 會自動處理
• 不必託管應用程式，應用程式會存放在雲端的 Google 伺服器並在其中執行

注意：本實驗室未涵蓋 Apps Script 的使用教學。網路上有許多資源可供參考，官方說明文件也提供快速入門導覽課程總覽、教學課程和影片。本實驗室的目的是介紹 Apps Script 開發環境，讓您熟悉如何建立程式碼，並思考可使用該環境建構哪些類型的應用程式。

Apps Script 應用程式有兩種形式：

1. 繫結：指令碼會永久繫結至單一 Google 文件 (文件、試算表、簡報、協作平台或表單)。
2. 獨立：屬於獨立指令碼，未繫結至 Google 試算表、文件、簡報或表單檔案，或 Google 協作平台。

您可以發布繫結和獨立應用程式，開放更多人使用：

• 不發布：維持私人狀態，僅限專案擁有者存取
• 發布為外掛程式：使用者可從外掛程式商店安裝應用程式
• 發布為網頁應用程式：應用程式會處理 HTTP 要求，並具備網頁 UI 元件
• 嵌入 Google 協作平台：發布的網頁應用程式可嵌入新版或傳統版協作平台頁面
• 發布為 API 執行檔：使用者可透過 Execution API 存取應用程式
• 上述方式的任意有效組合

您的第一個 Apps Script 應用程式應繫結至 Google 試算表。現在就來建立新試算表吧！

工作 1：建立新的 Google 試算表並輸入街道地址

按照下列操作說明，在新的 Google 試算表中輸入街道地址：

1. 開啟 Google 試算表，建立新工作表。
2. 點按空白試算表左上角的第一個儲存格 (A1)。應位於 A 欄第 1 列。
3. 在儲存格中輸入世界上任一個有效的街道地址，並指定地區，例如郵遞區號或城市和州/省，範例：紐約第 9 大道 76 號。

這樣便完成了需要在 Google 試算表執行的所有操作，接著即可進入編輯器，開始編寫程式碼！

點選「Check my progress」，確認上述工作已完成。

建立新的 Google 試算表並輸入街道地址

工作 2：開啟 Apps Script

Apps Script 提供程式碼編輯器，可用來建立試算表繫結指令碼。

• 在頂端選單列中，依序選取「擴充功能」>「Apps Script」。

Apps Script 會隨即開啟。請注意右側的程式碼編輯器視窗：

系統會自動為您建立預設函式 myFunction()，並顯示在編輯器中。這樣就完成了，現在可以開始撰寫應用程式。

工作 3：編輯 (範本) 程式碼

1. Code.gs 檔案提供「範本」程式碼，但功能有限。請複製下方程式碼並貼到編輯器視窗，取代範本程式碼，然後將 <YOUR_EMAIL> 更新為實驗室提供的使用者電子郵件地址：

function sendMap() { var sheet = SpreadsheetApp.getActiveSheet(); var address = sheet.getRange("A1").getValue(); var map = Maps.newStaticMap().addMarker(address); GmailApp.sendEmail("<YOUR_EMAIL>", "Map", 'See below.', {attachments:[map]}); }

2. 新增以下註解做為檔案層級備註，限制這個應用程式只能存取您正在使用的試算表 (而非使用者的所有試算表)，讓使用者放心：

/** * @OnlyCurrentDoc */

大功告成！如果不算選用註解，您剛才只用 4 行程式碼就建立了 sendMap() 應用程式。

記得將 <YOUR_EMAIL> 替換成本實驗室提供的使用者電子郵件，以便在實驗室中檢查電子郵件。

在編輯器中取代程式碼時，您有注意到檔案名稱左側顯示了紅色圓圈嗎？

這表示檔案經過編輯，現在需要儲存。只要有未儲存的編輯內容，就會看到這個圖示。

3. 儲存並命名專案，名稱可自訂，例如「Hello Maps!」。點按「儲存專案」圖示，即可儲存檔案。

也可以按下 Ctrl+S 鍵 (PC、Linux) 或 Command+S 鍵 (Mac) 來儲存。進行下一步前，必須先為專案命名。

工作 4：執行 Google 試算表、地圖和 Gmail 應用程式

請按照下列步驟，執行您建立的應用程式：

1. 由於函式已重新命名為 sendMap()，請選取要以 sendMap 執行的函式：

2. 在程式碼編輯器選單列中點按「執行」，執行 sendMap() 函式。

Apps Script 會代管授權碼，因此您不必自行編寫。不過，應用程式使用者仍須向指令碼授予 Google 試算表存取權，並允許指令碼代表您透過 Gmail 傳送電子郵件。第一個授權對話方塊如下所示：

3. 點按「查看權限」。
4. 如果出現提示訊息，請選擇您的帳戶 (即實驗室「Lab Details」面板中的使用者名稱)。

5. 在下一個對話方塊中，系統會詢問是否允許應用程式存取 Google 帳戶，請點按「允許」。

授予權限後，指令碼會自動完成執行。

6. 將游標懸停在左側，然後點選「執行作業」，即可查看列出的 sendMap。如果出現提示訊息，請點選「查看資訊主頁」。

7. 點選實驗室面板左側的「Open Gmail」按鈕。

8. 在「選擇帳戶」對話方塊中，輸入學員使用者名稱，然後點按「下一步」。

9. 輸入實驗室提供的密碼，然後點按「下一步」。

10. 點按「接受」來接受條款。

現在應該會進入 Gmail，請查看收件匣。您會看到主旨為「Map」的郵件，內文如下：

點選「Check my progress」，確認上述工作已完成。

執行 Google 試算表、地圖和 Gmail 應用程式

想想看，這四行程式碼雖不是完整的應用程式，但已能實際存取三種不同的 Google 產品！即使您不熟悉 JavaScript 或 Apps Script，應該也能讀懂程式碼並大致瞭解運作方式，甚至發掘 Apps Script 還能實現哪些用途。

工作 5：應用程式 - 詳細說明

本節將更深入探究程式碼。

這個應用程式很短，因此不需要討論整體程式碼結構。本節將逐行檢視這個應用程式，其中涉及三項不同的 Google 產品！

下列是 sendMap() 的一般 JavaScript 函式宣告：

function sendMap() {

第一行程式碼會存取 Apps Script 的 SpreadsheetApp 物件，以呼叫試算表服務。傳回的工作表會指派給同名的變數。

getActiveSheet() 方法恰如其名，就是傳回使用者介面 (UI) 目前開啟的工作表「控制代碼」：

var sheet = SpreadsheetApp.getActiveSheet();

使用 sheet 物件，透過 getRange() 參照以 A1 標記的儲存格範圍 (單一儲存格)。「範圍」是一組儲存格，包括您輸入地址的儲存格 A1。

現在使用 getValue() 呼叫擷取該儲存格範圍「內」的項目，並在傳回時指派給地址變數。嘗試新增更多地址，並從不同儲存格讀取資料。

var address = sheet.getRange("A1").getValue();

第 3 行會透過 Maps 物件連線至 Google 地圖服務。取得地圖服務的存取權後，請透過 newStaticMap() 要求建立新的靜態地圖。

接著可以使用 addMarker() 方法，在從試算表提取的地址放上「圖釘」：

var map = Maps.newStaticMap().addMarker(address);

最後一行透過 GmailApp 物件，使用郵件服務呼叫 sendEmail() 方法來傳送電子郵件，其中包含「See below.」文字和做為附件的地圖圖片：

GmailApp.sendEmail("friend@example.com", "Map", 'See below.', {attachments:[map]}); }

恭喜！

您已學會使用 Google Apps Script 編寫程式碼來存取 Google 開發人員技術，從 Google 試算表擷取地址、根據地址產生 Google 地圖，並將地圖傳送給電子郵件收件者。

後續步驟/瞭解詳情

• 參閱 Google Sheets API 開發人員說明文件。
• 在 Stack Overflow 使用 google-sheets-api 標籤來發問及尋找答案。

其他資源

本實驗室的程式碼也會放在 GitHub 存放區 (GitHub.com/googlecodelabs/apps-script-intro)，並與本實驗室內容同步更新。您也可以參考下方的額外資源，深入瞭解本實驗室涵蓋的內容，以及透過程式存取 Google 開發人員工具的其他方法。

說明文件

• Google Apps Script 說明文件網站
• Apps Script Gmail 服務
• Apps Script 試算表服務
• Apps Script 地圖服務

相關和一般影片

• Google Apps Script 影片庫的其他影片
• 《Workspace Dev Show》系列影片

新聞與最新動態

• Workspace 開發人員網誌
• Workspace 開發人員 Twitter (@GSuiteDevs)
• Workspace 開發人員每月電子報
• Google Workspace 學習中心

Google Cloud 教育訓練與認證

協助您瞭解如何充分運用 Google Cloud 的技術。我們的課程會介紹專業技能和最佳做法，讓您可以快速掌握要領並持續進修。我們提供從基本到進階等級的訓練課程，並有隨選、線上和虛擬課程等選項，方便您抽空參加。認證可協助您驗證及證明自己在 Google Cloud 技術方面的技能和專業知識。

使用手冊上次更新日期：2024 年 11 月 5 日

實驗室上次測試日期：2023 年 11 月 5 日

Copyright 2026 Google LLC 保留所有權利。Google 和 Google 標誌是 Google LLC 的商標，其他公司和產品名稱則有可能是其關聯公司的商標。