Google Classroom 外掛程式現已全面開放開發人員使用！詳情請參閱外掛程式說明文件。

本頁面由 Cloud Translation API 翻譯而成。

逐步操作說明

這系列的逐步操作說明會詳細介紹工作中的所有活動 Classroom 外掛程式。每個逐步操作說明都會列出將概念導入單一網頁應用程式目的是協助你設定、設定及啟動功能性的外掛程式

外掛程式必須與 Google Cloud 專案互動。如果您不熟悉 Google Cloud 建議您閱讀入門指南。由您管理憑證、API 存取權和 Google Workspace Marketplace SDK 存取 Google Cloud 控制台如要進一步瞭解 Marketplace SDK，請前往 Google Workspace Marketplace 指南頁面。

本指南涵蓋下列主題：

使用 Google Cloud 建立要以 iframe 顯示的網頁 Classroom。
新增 Google 單一登入 (SSO) 功能，並允許使用者登入。
發出 API 呼叫，將外掛程式附加到作業中。
符合主要的外掛程式提交規定和必要功能。

本指南假設您已熟悉程式設計和基礎網路開發概念強烈建議您參閱專案設定繼續閱讀。這個網頁含有重要內容設定詳細資料中未完全提及。

實作範例

完整的參考範例請見 Python。部分導入也提供 Java 和 Node.js 版本。這些實作方式在後續網頁中找到的範例程式碼來源。

下載裝置

GitHub 存放區提供 Python 和 Java 範例：

您可以下載 Node.js 範例的 ZIP 檔案：

Node.js 封存

必要條件

請參閱下列章節，準備新的外掛程式專案。

HTTPS 憑證

雖然您可以在任何開發環境中託管應用程式， Classroom 外掛程式僅適用於 https://。因此您需要採用 SSL 加密的伺服器才能部署應用程式或在外掛程式 iframe。

您可以使用 localhost 搭配 SSL 憑證；考慮使用 mkcert 您必須為本機開發建立憑證。

Google Cloud 專案

您必須先設定 Google Cloud 專案，才能使用這些範例。請參閱 Google Cloud 專案建立指南，概略說明必要項目即可開始使用。設定 Google Cloud 專案一節也會逐步解說特定設定可採取的行動

完成後，請將 OAuth 2.0 用戶端 ID 下載為 JSON 檔案。您需要新增並新增到解壓縮的範例目錄。請參閱瞭解檔案。

OAuth 憑證

請按照下列步驟建立新的 OAuth 憑證：

前往 Google Cloud Credentials 頁面。確保您在畫面頂端選取正確的專案。
按一下「CREATE CREDENTIALS」，然後在所需應用程式部分選擇「OAuth client ID」。
在下一頁中：
- 將「應用程式類型」設為「網頁應用程式」。
- 按一下「已授權的重新導向 URI」下方的「新增 URI」。新增完整應用程式回呼路徑的路徑。例如： https://my.domain.com/auth-callback或 https://localhost:5000/callback。建立及處理這條路徑稍後也會說明您可以隨時編輯或新增更多這類路線。
- 按一下 [建立]。
接著，您會收到一封內含新建立憑證的對話方塊。選擇「Download JSON」(下載 JSON) 選項。將下載的 JSON 檔案複製到伺服器目錄。

特定程式語言的必備條件

請查看每個存放區中的 README 檔案，以取得最新的清單前置作業

Python

Python 範例使用 Flask 架構。您可以下載使用所提供連結取得的完整原始碼

如有需要，請安裝 Python 3.7+，並確保 pip 可用。

python3 -m ensurepip --upgrade

我們也建議您設定並啟用新的 Python 虛擬版環境。

python3 -m venv .classroom-addon-env
source .classroom-addon-env/bin/activate

在以下的逐步操作說明子目錄中，都有 requirements.txt 下載樣本您可以使用 pip。使用以下指令為第一是逐步操作說明

cd flask/01-basic-app
pip install -r requirements.txt

Node.js

Node.js 範例使用 Express 架構。您可以下載請參閱所提供連結中的完整原始碼。

這個範例需要 Node.js v16.13 以上版本。

使用 npm 安裝必要節點模組。

npm install

Java

Java 範例使用 Spring Boot 架構。您可以下載請參閱所提供連結中的完整原始碼。

安裝 Java 11+ (如果尚未安裝在機器上)。

Spring Boot 應用程式可以使用 Gradle 或 Maven 處理建構作業和管理作業依附元件這個範例包含 Maven 包裝函式，可確保您完全不需要安裝 Maven

在您下載或複製專案的目錄中，執行，確保具備執行專案的先決條件。

java --version
./mvnw --version

或在 Windows 執行下列指令：

java -version
mvnw.cmd --version

瞭解檔案

以下各節說明範例目錄的版面配置。

目錄名稱

每個存放區都含有多個目錄，這些目錄的名稱開頭為數字例如 /01-basic-app/。這些數字會對應至特定逐步操作說明。每個目錄都包含實作這些功能的完整網頁應用程式可在叢集內說明例如：/01-basic-app/ 目錄包含「建立外掛程式」的最終實作項目

目錄內容

目錄內容會因實作語言而異：

Python

目錄根目錄包含下列檔案：
- main.py：Python 應用程式進入點。指定伺服器您希望在這個檔案中使用的設定，然後將檔案來執行並啟動伺服器
- requirements.txt - 執行網頁應用程式所需的 Python 模組。系統會使用 pip install -r requirements.txt 自動安裝這些軟體。
- client_secret.json：從 Google 下載的用戶端密鑰檔案 Cloud 上精進自己的技能。請注意，封存示例中的檔案並未包含此內容；你您必須重新命名並複製下載的憑證檔案目錄的根目錄
  
  重要事項： 您必須提供您的執行範例之前，請先建立 Google Cloud 專案。
config.py - Flask 伺服器的設定選項。
webapp 目錄包含網頁應用程式的內容。包含的內容如下：
/templates/ 目錄，內含多個網頁的 Jinja 範本。
含有圖片、CSS 和附加 JavaScript 的 /static/ 目錄檔案。
routes.py：網頁應用程式路徑的處理常式方法。
__init__.py：webapp 模組的初始化器。這個 Initializer 會啟動 Flask 伺服器，並載入設定選項已在 config.py 中設定。
特定逐步操作說明步驟所需的其他檔案。

Node.js

步行的每個步驟都可以在專屬的 <step> 中找到子資料夾。每個步驟都包含：

您可以在 ./<step>/public 資料夾。
您可以在 ./<step>/routes 資料夾中找到 Express 路由器。
您可以在 ./<step>/views 資料夾中找到 HTML 範本。
伺服器應用程式為 ./<step>/app.js。

Java

專案目錄包含以下內容：

src.main 目錄包含要執行的原始碼和設定應用程式。此目錄包含以下內容： + java.com.addons.spring 目錄包含 Application.java 和 Controller.java 個檔案。 Application.java 檔案負責執行應用程式伺服器，而 Controller.java 檔案處理端點邏輯 + resources 目錄包含 templates 目錄，其中包含 HTML 和 JavaScript 檔案。此 SDK 也包含 application.properties 檔案，用來指定要執行 KeyStore 檔案路徑和 templates 目錄內。這個範例包括 KeyStore 檔案位於 resources 目錄中。你可以將這些資料存放在自己的任何位置但請務必更新 application.properties 檔案中包含相應的路徑
- pom.xml 包含建構專案所需的資訊，以及定義必要的依附元件
- .gitignore 包含不應上傳至 Git 的檔案名稱。請務必在此 .gitignore 中新增 KeyStore 路徑。在上述範例中為 secrets/*.p12 ( 下節將討論 KeyStore)。如需逐步操作說明，請參閱之外，您也應加入 client_secret.json 檔案，確保未指定複製到遠端存放區如需逐步操作說明 3 應將路徑加入 H2 資料庫檔案和檔案資料儲存庫原廠設定。如要進一步瞭解如何設定這些資料儲存庫，請參閱請參閱處理重複造訪的第三篇逐步操作說明。
- mvnw 和 mvnw.cmd 是 Unix 和 Windows。例如在以下位置執行 ./mvnw --version： Unix 會輸出 Apache Maven 版本和其他資訊。
- .mvn 目錄包含 Maven 包裝函式的設定。

執行範例伺服器

您需要啟動伺服器才能進行測試。請按照這些說明請以您選擇的語言執行範例伺服器：

Python

OAuth 憑證

按照上述說明建立及下載 OAuth 憑證。地點與應用程式伺服器一起位於根目錄中的 JSON 檔案啟動檔

設定伺服器

執行網路伺服器的方法有幾種，在 Python 檔案後，請新增下列其中一種內容：

未受保護的 localhost。請注意，這種做法適合直接測試只會在瀏覽器視窗中顯示不安全的網域無法載入 Classroom 外掛程式 iframe。

if __name__ == "__main__":
  # Disable OAuthlib's HTTPs verification.
  os.environ["OAUTHLIB_INSECURE_TRANSPORT"] = "1"

  # Run the web app at http://localhost:5000.
  app.run(debug=True)

確保 localhost 安全。您必須指定 ssl_context 引數。

if __name__ == "__main__":
  # Run the web app at https://localhost:5000.
  app.run(host="localhost",
          ssl_context=("localhost.pem", "localhost-key.pem"),
          debug=True)

Gunicorn 伺服器。適合可用於正式環境的伺服器，雲端部署建議您設定 PORT 環境變數，與這個啟動選項搭配使用

if __name__ == "__main__":
  # Run the web app at https://<your domain>:<server_port>.
  # Defaults to https://<your domain>:8080.
  server_port = os.environ.get("PORT", "8080")
  app.run(debug=True, port=server_port, host="0.0.0.0")

啟動伺服器

請執行 Python 應用程式，依照上一個步驟

python main.py

按一下顯示的網址，即可在瀏覽器中檢視網頁應用程式看看是否已經正常運作

Node.js

設定伺服器

如要透過 HTTPS 執行伺服器，您必須建立自我憑證用於透過 HTTPS 執行應用程式這些憑證儲存於存放區根目錄中，並儲存為 sslcert/cert.pem 和 sslcert/key.pem 資料夾。您可能需要將這些金鑰新增至 OS 金鑰鏈結，才能瀏覽器可接受這些內容。

請確定 *.pem 在您的 .gitignore 檔案中，因為您不想要將檔案提交至 Git

啟動伺服器

您可以使用替代 step01 的指令執行應用程式在您要做為伺服器執行的正確步驟 (例如 step01) 的情況下， (適用於 01-basic-app 和 step02 代表 02-登入)。

npm run step01

或

npm run step02

這會在 https://localhost:5000 啟動網路伺服器。

你可以在終端機中使用 Control + C 終止伺服器。

Java

設定伺服器

如要透過 HTTPS 執行伺服器，您必須建立自我憑證用於透過 HTTPS 執行應用程式

考慮使用 mkcert 進行本機開發。安裝「mkcert」後，以下指令會產生本機儲存的憑證 HTTPS

mkcert -install
mkcert -pkcs12 -p12-file <path_to_keystore> <domain_name>

這個範例包括資源目錄中的 KeyStore 檔案。您可以將其儲存在您偏好的位置，不過請務必更新 application.properties 檔案取代為相應的路徑。網域名稱是執行專案的網域 (例如 localhost)。

請確定 *.p12 在您的 .gitignore 檔案中，因為您不想要將檔案提交至 Git

啟動伺服器

在 Application.java 中執行 main 方法，即可啟動伺服器檔案。舉例來說，在 IntelliJ 中，您可以按一下滑鼠右鍵 Application.java >Run 'Application' 的 src/main/java/com/addons/spring 目錄，或是開啟 Application.java 檔案上，按一下 main(String[] args) 左邊的綠色箭頭方法簽章或者，您也可以在終端機中執行專案回溯期：

./mvnw spring-boot:run

或在 Windows 中執行下列指令：

mvnw.cmd spring-boot:run

這會在 https://localhost:5000 或您所在的通訊埠啟動伺服器 (在 application.properties 中指定的)。