逐步操作說明

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 16.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 目錄包含網頁應用程式的內容。包括：

• 包含各種頁面 Jinja 範本的 /templates/ 目錄。

• 包含圖片、CSS 和輔助 JavaScript 檔案的 /static/ 目錄。

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

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

• 特定逐步解說步驟所需的其他檔案。

Node.js

每個逐步解說步驟都會存放在專屬的子資料夾中。<step> 每個步驟包含：

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

Java

專案目錄包含下列項目：

• src.main 目錄包含原始碼和設定，可順利執行應用程式。這個目錄包含下列項目： + java.com.addons.spring 目錄包含 Application.java 和 Controller.java 檔案。Application.java 檔案負責執行應用程式伺服器，而 Controller.java 檔案則負責處理端點邏輯。+ resources 目錄包含 templates 目錄，其中含有 HTML 和 JavaScript 檔案。其中也包含 application.properties 檔案，用於指定執行伺服器的連接埠、金鑰儲存區檔案的路徑，以及 templates 目錄的路徑。這個範例包含 resources 目錄中的金鑰存放區檔案。您可以將檔案儲存在任何位置，但請務必更新 application.properties 檔案中的路徑。
  • pom.xml 包含建構專案所需的資訊，以及定義必要依附元件。
  • .gitignore 包含不應上傳至 Git 的檔案名稱。 請務必在這個 .gitignore 中加入 KeyStore 的路徑。 在提供的範例中，這是 secrets/*.p12 (金鑰儲存區的用途會在下節中討論)。如要進行第 2 個以上的逐步解說，您也應加入 client_secret.json 檔案的路徑，確保不會在遠端存放區中加入密鑰。在逐步導覽 3 以上，您應新增 H2 資料庫檔案的路徑和檔案資料儲存區出廠設定。如要進一步瞭解如何設定這些資料儲存區，請參閱處理重複造訪的第三個逐步導覽。
  • mvnw 和 mvnw.cmd 分別是 Unix 和 Windows 的 Maven 封裝器可執行檔。舉例來說，在 Unix 上執行 ./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 金鑰鏈中新增這些金鑰，瀏覽器才會接受。

請確認 *.pem 位於 .gitignore 檔案中，因為您不想將檔案提交至 Git。

啟動伺服器

您可以執行下列指令來執行應用程式，並將 step01 替換為要以伺服器形式執行的正確步驟 (例如 01-basic-app 的 step01，以及 02-sign-in 的 step02)。

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>

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

請確認 *.p12 位於 .gitignore 檔案中，因為您不想將檔案提交至 Git。

啟動伺服器

在 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 中指定的通訊埠啟動伺服器。