建立 Classroom 外掛程式

Python

我們的 Python 範例使用 Flask 架構。您可以從總覽頁面下載所有逐步操作說明的完整原始碼。您可以在 /flask/01-basic-app/ 目錄中找到這項特定操作說明的程式碼。

如有需要，請安裝 Python 3.7 以上版本，並確認 pip 可用。

python -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 架構。您可以從總覽頁面下載所有逐步操作說明的完整原始碼。

視需要安裝 NodeJS 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

設定應用程式目錄

為配合本範例的目的，請將應用程式邏輯結構化為 Python 模組。這是我們提供範例中的 webapp 目錄。

建立伺服器模組的目錄，例如 webapp。將 static 目錄移至模組目錄。在模組目錄中建立 template 目錄，HTML 檔案會放在這個目錄中。

建構伺服器模組*

在模組目錄中建立 __init__.py 檔案，然後新增下列匯入和宣告。

from flask import Flask
import config

app = Flask(__name__)
app.config.from_object(config.Config)

# Load other module script files. This import statement refers to the
# 'routes.py' file described below.
from webapp import routes

接著，建立檔案來處理網頁應用程式的路由。在我們提供的範例中，這個值為 webapp/routes.py。在這個檔案中實作兩個路徑。

from webapp import app
import flask

@app.route("/")
def index():
    return flask.render_template("index.html",
                                message="You've reached the index page.")

@app.route("/classroom-addon")
def classroom_addon():
    return flask.render_template(
        "addon-discovery.html",
        message="You've reached the addon discovery page.")

請注意，我們的路由都會將 message 變數傳遞至各自的 Jinja 範本。這有助於找出使用者造訪的網頁。

建立設定和啟動檔案

在應用程式的根目錄中建立 main.py 和 config.py 檔案。在 config.py 中設定密鑰。

import os

class Config(object):
    # Note: A secret key is included in the sample so that it works.
    # If you use this code in your application, replace this with a truly secret
    # key. See https://flask.palletsprojects.com/quickstart/#sessions.
    SECRET_KEY = os.environ.get(
        'SECRET_KEY') or "REPLACE ME - this value is here as a placeholder."

在 main.py 檔案中匯入模組，並啟動 Flask 伺服器。

from webapp import app

if __name__ == "__main__":
    # Run the application over HTTPs with a locally stored certificate and key.
    # Defaults to https://localhost:5000.
    app.run(
        host="localhost",
        ssl_context=("localhost.pem", "localhost-key.pem"),
        debug=True)

Node.js

路線會在 app.js 檔案中註冊，並包含下列行。

const websiteRouter = require('./routes/index');
const addonRouter = require('./routes/classroom-addon');

app.use('/', websiteRouter);
app.use('/addon-discovery', addonRouter);

開啟 /01-basic-app/routes/index.js 並查看程式碼。使用者造訪公司網站時，就會觸發這個路徑。路由會使用 index Handlebars 範本轉譯回應，並將包含 title 和 message 變數的資料物件傳遞至範本。

router.get('/', function (req, res, next) {
  res.render('index', {
    title: 'Education Technology',
    message: 'Welcome to our website!'
  });
});

開啟第二個路徑 /01-basic-app/routes/classroom-addon.js 並查看程式碼。使用者造訪外掛程式時，系統會執行這個路徑。請注意，此路徑會使用 discovery Handlebars 範本，並搭配 addon.hbs 版面配置，以不同於公司網站的方式轉譯網頁。

router.get('/', function (req, res, next) {
  res.render('discovery', {
    layout: 'addon.hbs',
    title: 'Education Technology Classroom add-on',
    message: `Welcome.`
  });
});

Java

Java 程式碼範例會使用模組來封裝逐步操作說明的步驟。由於這是第一次逐步操作，程式碼位於 step_01_basic_app 模組下方。您不必使用模組實作專案；我們建議您在逐步操作的每個步驟中，以單一專案為基礎。

請建立控制器類別 (在本範例專案中為 Controller.java)，以便定義端點。在這個檔案中，從 spring-boot-starter-web 依附元件匯入 @GetMapping 註解。

import org.springframework.web.bind.annotation.GetMapping;

在類別定義上方加入 Spring 架構控制器註解，以表示類別的用途。

@org.springframework.stereotype.Controller
public class Controller {

接著，實作兩個路徑和額外的路徑，用於處理錯誤。

/** Returns the index page that will be displayed when the add-on opens in a
*   new tab.
*   @param model the Model interface to pass error information that's
*   displayed on the error page.
*   @return the index page template if successful, or the onError method to
*   handle and display the error message.
*/
@GetMapping(value = {"/"})
public String index(Model model) {
  try {
    return "index";
  } catch (Exception e) {
    return onError(e.getMessage(), model);
  }
}

/** Returns the add-on discovery page that will be displayed when the iframe
*   is first opened in Classroom.
*   @param model the Model interface to pass error information that's
*   displayed on the error page.
*   @return the addon-discovery page.
*/
@GetMapping(value = {"/addon-discovery"})
public String addon_discovery(Model model) {
  try {
    return "addon-discovery";
  } catch (Exception e) {
    return onError(e.getMessage(), model);
  }
}

/** Handles application errors.
*   @param errorMessage message to be displayed on the error page.
*   @param model the Model interface to pass error information to display on
*   the error page.
*   @return the error page.
*/
@GetMapping(value = {"/error"})
public String onError(String errorMessage, Model model) {
  model.addAttribute("error", errorMessage);
  return "error";
}