สร้างส่วนเสริมของ 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 ในตัวอย่างที่เราให้ไว้ ใช้ 2 เส้นทางในไฟล์นี้

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

โปรดทราบว่าทั้ง 2 เส้นทางจะส่งตัวแปร 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!'
  });
});

เปิดเส้นทางที่ 2 /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 ในโปรเจ็กต์ตัวอย่างนี้เพื่อกำหนดปลายทาง ในไฟล์นี้ ให้นําเข้าคําอธิบายประกอบ @GetMapping จากข้อกําหนด spring-boot-starter-web

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

ใส่แอตทริบิวต์กำกับคอนโทรลเลอร์ของเฟรมเวิร์ก Spring เหนือคําจํากัดความของคลาสเพื่อระบุวัตถุประสงค์ของคลาส

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

จากนั้นให้ใช้ 2 เส้นทางและอีก 1 เส้นทางสําหรับการจัดการข้อผิดพลาด

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