创建 Google 课堂插件

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 来处理 build 和管理依赖项。此示例包含 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

然后，创建一个文件来处理 Web 应用的路由。在我们提供的示例中，此值为 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";
}