逐步操作說明

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 範例使用快速架構。您可以從上方連結下載完整的原始碼。

本範例需要 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

Python

• 目錄根目錄包含下列檔案：

  • main.py：Python 應用程式進入點。指定您要在這個檔案中使用的伺服器設定，然後執行該設定以啟動伺服器。
  • requirements.txt：執行網頁應用程式所需的 Python 模組。可以使用 pip install -r requirements.txt 自動安裝這些模組。

  • client_secret.json：從 Google Cloud 下載的用戶端密鑰檔案。請注意，這個範例封存並未包含這項作業；您應重新命名下載的憑證檔案，並複製到每個目錄根目錄。

• config.py：Flask 伺服器的設定選項。

• webapp 目錄包含網頁應用程式的內容。 包含的內容如下：

• /templates/ 目錄，其中包含不同頁面的 Jinja 範本。

• 內含圖片、CSS 和附加 JavaScript 檔案的 /static/ 目錄。

• routes.py：網頁應用程式路徑的處理常式方法。

• __init__.py：webapp 模組的初始化工具。這個初始化工具會啟動 Flask 伺服器，並載入 config.py 中設定的設定選項。

• 特定逐步操作說明程序所需的額外檔案。

Node.js

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

• JavaScript、CSS 和圖片等靜態檔案位於 ./<step>/public 資料夾中。
• Express 路由器位於 ./<step>/routes 資料夾中。
• 您可在 ./<step>/views 資料夾中找到 HTML 範本。
• 伺服器應用程式為 ./<step>/app.js。

Java

專案目錄包含下列項目：

• src.main 目錄包含原始碼和設定，可成功執行應用程式。此目錄包含以下內容： + java.com.addons.spring 目錄包含 Application.java 和 Controller.java 檔案。Application.java 檔案負責執行應用程式伺服器，而 Controller.java 檔案會處理端點邏輯。+ resources 目錄包含帶有 HTML 和 JavaScript 檔案的 templates 目錄。其中包含 application.properties 檔案，用於指定執行伺服器的通訊埠、KeyStore 檔案的路徑，以及 templates 目錄的路徑。這個範例包含 resources 目錄中的 KeyStore 檔案。您可以將這個檔案儲存在偏好的任何位置，但請務必使用相應路徑更新 application.properties 檔案。
  • pom.xml 包含建構專案及定義必要依附元件所需的資訊。
  • .gitignore 包含不應上傳至 Git 的檔案名稱。請務必在這個 .gitignore 中新增 KeyStore 的路徑。在提供的範例中，這個屬性為 secrets/*.p12 (下文會討論 KeyStore 的用途)。對於逐步操作說明 2 及之後的逐步操作說明，您也必須包含 client_secret.json 檔案的路徑，確保您不會在遠端存放區中加入密鑰。針對逐步操作說明 3 以上版本，應新增 H2 資料庫檔案和檔案資料儲存庫工廠的路徑。關於設定這些資料儲存庫的詳細資訊，請參閱處理重複造訪的第三逐步操作說明。
  • mvnw 和 mvnw.cmd 分別是 Unix 和 Windows 的 Maven 包裝函式執行檔。例如，在 Unx 上執行 ./mvnw --version 會輸出 Apache Maven 版本以及其他資訊。
  • .mvn 目錄包含 Maven 包裝函式的設定。

Python

OAuth 憑證

按照上述說明建立及下載 OAuth 憑證。將 .json 檔案與應用程式的伺服器啟動檔案一起放在根目錄中。

設定伺服器

有多種執行網路伺服器的選項可以選擇。在 Python 檔案結尾，新增下列其中一個選項：

1. 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)
   

2. 確保 localhost 安全。您必須為 ssl_context 引數指定 SSL 金鑰檔案元組。

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

3. 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 金鑰鏈結，瀏覽器才能接受這些金鑰。

您不想將檔案提交至 Git，因此請確保 .gitignore 檔案中有 *.pem。

啟動伺服器

您可以使用下列指令將 step01 替換成您要做為伺服器執行的正確步驟 (例如將 step01 替換成 01-basic-app，step02 則代表 02 登入)。

npm run step01

或

npm run step02

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

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

Java

設定伺服器

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

考慮使用 mkcert 進行本機開發作業。安裝 mkcert 後，下列指令會產生儲存在本機的憑證，並透過 HTTPS 執行。

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

這個範例包含資源目錄中的 KeyStore 檔案。您可以將這個檔案儲存在偏好的任何位置，但請務必使用相應路徑更新 application.properties 檔案。網域名稱就是您執行專案的網域 (例如 localhost)。

您不想將檔案提交至 Git，因此請確保 .gitignore 檔案中有 *.p12。

啟動伺服器

在 Application.java 檔案中執行 main 方法，啟動伺服器。例如，在 IntelliJ 中，您可以用滑鼠右鍵按一下 src/main/java/com/addons/spring 目錄中的 Application.java > Run 'Application'，或開啟 Application.java 檔案，按一下 main(String[] args) 方法簽名左側的綠色箭頭。您也可以在終端機視窗中執行專案：

./mvnw spring-boot:run

或在 Windows 中執行下列指令：

mvnw.cmd spring-boot:run

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