建立 Classroom 外掛程式

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 握把範本回應，並將一個 包含 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 握把範本，另外還有 addon.hbs 版面配置，以不同於公司的方式顯示網頁 網站。

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

Java

Java 程式碼範例會使用模組封裝依序逐步操作說明 100 萬步的訓練由於這是第一段逐步操作說明，程式碼位於 step_01_basic_app 模組。因此不一定要將 透過模組建構專案因此建議您在單一專案中建構產品 也可以按步驟操作

在本範例專案中，建立控制器類別 Controller.java，以便達到以下目的： 並定義端點在此檔案中匯入 @GetMapping 註解： spring-boot-starter-web 依附元件。

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";
}