ส่วนเสริมของ Google Classroom พร้อมให้บริการแก่นักพัฒนาซอฟต์แวร์แล้ว โปรดดูข้อมูลเพิ่มเติมในเอกสารส่วนเสริม

หน้านี้ได้รับการแปลโดย Cloud Translation API

สร้างส่วนเสริมของ Classroom

นี่คือคำแนะนำแบบทีละขั้นตอนชุดแรกในชุดคำแนะนำแบบทีละขั้นตอนเกี่ยวกับส่วนเสริมของ Classroom

ในคำแนะนำแบบทีละขั้นนี้ คุณจะได้วางรากฐานสำหรับการพัฒนาเว็บแอปพลิเคชันและ เผยแพร่เป็นส่วนเสริมของ Classroom ขั้นตอนการแนะนำในอนาคต จะขยายแอปนี้

ในวิดีโอแนะนำนี้ คุณจะทำสิ่งต่อไปนี้

สร้างโปรเจ็กต์ Google Cloud ใหม่สำหรับส่วนเสริม
สร้างเว็บแอปโครงร่างที่มีปุ่มลงชื่อเข้าใช้ตัวยึดตำแหน่ง
เผยแพร่ข้อมูลใน Store ของ Google Workspace Marketplace สำหรับส่วนเสริม

เมื่อเสร็จแล้ว คุณจะติดตั้งส่วนเสริมและโหลดใน iframe ของส่วนเสริม 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 Wrapper ซึ่งช่วยให้มั่นใจได้ว่าการสร้างจะสำเร็จโดยไม่ต้องติดตั้ง Maven เอง

หากต้องการเรียกใช้ตัวอย่างที่เราให้ไว้ ให้เรียกใช้คำสั่งต่อไปนี้ในไดเรกทอรีที่คุณดาวน์โหลดโปรเจ็กต์เพื่อให้แน่ใจว่าคุณมีข้อกำหนดเบื้องต้นในการเรียกใช้โปรเจ็กต์

java --version
./mvnw --version

หรือใน Windows ให้ทำดังนี้

java -version
mvnw.cmd --version

ตั้งค่าโปรเจ็กต์ Google Cloud

โปรเจ็กต์ Google Cloud จะเป็นตัวควบคุมสิทธิ์เข้าถึง Classroom API และวิธีการตรวจสอบสิทธิ์ที่จำเป็น วิธีการต่อไปนี้จะแนะนำขั้นตอนขั้นต่ำในการสร้างและกำหนดค่าโปรเจ็กต์ใหม่เพื่อใช้กับ ส่วนเสริม

สร้างโปรเจ็กต์

สร้างโปรเจ็กต์ Google Cloud ใหม่โดยไปที่หน้าการสร้างโปรเจ็กต์ คุณ ตั้งชื่อโปรเจ็กต์ใหม่เป็นอะไรก็ได้ คลิกสร้าง

ระบบจะใช้เวลาสักครู่ในการสร้างโปรเจ็กต์ใหม่ให้เสร็จสมบูรณ์ เมื่อเสร็จแล้ว ให้เลือกโปรเจ็กต์ คุณเลือกได้ในเมนูแบบเลื่อนลงของตัวเลือกโปรเจ็กต์ที่ด้านบนของหน้าจอ หรือคลิกเลือกโปรเจ็กต์ในเมนูการแจ้งเตือนที่ด้านขวาบน

เลือกโปรเจ็กต์ใน Google Cloud
Console

แนบ SDK ของ Google Workspace Marketplace กับโปรเจ็กต์ Google Cloud

ไปที่เบราว์เซอร์ไลบรารี API ค้นหา Google Workspace Marketplace SDK คุณควรเห็น SDK ปรากฏในรายการผลลัพธ์

การ์ด SDK ของ Google Workspace Marketplace

เลือกการ์ด SDK ของ Google Workspace Marketplace แล้วคลิกเปิดใช้

กำหนดค่า SDK ของ Google Workspace Marketplace

Google Workspace Marketplace แสดงข้อมูลที่ผู้ใช้และผู้ดูแลระบบใช้ติดตั้งส่วนเสริมของคุณ กำหนดค่าการกำหนดค่าแอปและข้อมูลใน Store ของ Marketplace SDK รวมถึงหน้าจอขอความยินยอม OAuth เพื่อดำเนินการต่อ

การกำหนดค่าแอป

ไปที่หน้าการกำหนดค่าแอปของ Marketplace SDK ระบุข้อมูลต่อไปนี้

ตั้งค่าระดับการมองเห็นแอปเป็น Public หรือ Private
- การตั้งค่าสาธารณะมีไว้สำหรับแอปที่จะเผยแพร่ต่อผู้ใช้ปลายทางในที่สุด แอปสาธารณะต้องผ่านกระบวนการอนุมัติก่อนจึงจะเผยแพร่ต่อผู้ใช้ปลายทางได้ แต่คุณสามารถระบุผู้ใช้ที่ติดตั้งและทดสอบแอปเป็นฉบับร่างได้ นี่คือสถานะก่อนเผยแพร่ที่จะช่วยให้คุณทดสอบและพัฒนาส่วนเสริมก่อนส่งเพื่อขอรับการอนุมัติ
- การตั้งค่าส่วนตัวเหมาะสำหรับการทดสอบและการพัฒนาภายใน ผู้ใช้ในโดเมนเดียวกับที่สร้างโปรเจ็กต์เท่านั้นที่จะติดตั้งแอปส่วนตัวได้ ดังนั้น คุณควรตั้งค่าระดับการมองเห็นเป็นส่วนตัว เฉพาะในกรณีที่สร้างโปรเจ็กต์ในโดเมนที่มีการสมัครใช้บริการ Google Workspace for Education ไม่เช่นนั้นผู้ใช้ทดสอบจะเปิดใช้ส่วนเสริมของ Classroom ไม่ได้
คำเตือน: ตรวจสอบว่าการตั้งค่าระดับการมองเห็นแอปถูกต้องก่อน บันทึก คุณจะเปลี่ยนระดับการมองเห็นแอปไม่ได้เมื่อตั้งค่าแล้ว คุณต้องสร้างโปรเจ็กต์ Google Cloud ใหม่เพื่อตั้งค่าระดับการมองเห็นแอปที่แตกต่างกัน
ตั้งค่าการตั้งค่าการติดตั้งเป็น Admin Only install หากต้องการ จำกัดการติดตั้งไว้สำหรับผู้ดูแลระบบโดเมน
ในส่วนการผสานรวมแอป ให้เลือกส่วนเสริมของ Classroom ระบบจะแจ้งให้คุณระบุ URI การตั้งค่าไฟล์แนบที่ปลอดภัย ซึ่งเป็น URL ที่คุณ คาดว่าจะโหลดเมื่อผู้ใช้เปิดส่วนเสริม สำหรับวัตถุประสงค์ของคำแนะนำแบบทีละขั้นนี้ ค่าควรเป็น https://<your domain>/addon-discovery
คำนำหน้า URI ของไฟล์แนบที่อนุญาตใช้เพื่อตรวจสอบ URI ที่ตั้งค่าไว้ใน AddOnAttachment โดยใช้เมธอด courses.*.addOnAttachments.create และ courses.*.addOnAttachments.patch การตรวจสอบคือการจับคู่คำนำหน้าสตริงแบบตรงตัว และไม่อนุญาตให้ใช้ไวลด์การ์ดในขณะนี้ เพิ่มอย่างน้อยโดเมนรูทของเซิร์ฟเวอร์เนื้อหา เช่น https://localhost:5000/ หรือ https://cdn.myedtech.com/
เพิ่มขอบเขต OAuth เดียวกันกับที่ระบุไว้ในหน้าจอขอความยินยอม OAuth ใน ขั้นตอนก่อนหน้า

สำคัญ: รายการขอบเขต OAuth ที่ระบุในการกำหนดค่าแอปต้องตรงกับรายการที่แสดงในหน้าจอขอความยินยอม OAuth
กรอกข้อมูลในช่องตามความเหมาะสมสำหรับองค์กรของคุณในส่วนลิงก์ นักพัฒนาแอป

ข้อมูลผลิตภัณฑ์ใน Store

ไปที่หน้าข้อมูลผลิตภัณฑ์ใน Store ของ Marketplace SDK ระบุข้อมูลต่อไปนี้

ในส่วนรายละเอียดแอป ให้เพิ่มภาษาหรือขยายเมนูแบบเลื่อนลงข้างภาษาที่แสดงอยู่แล้ว ระบุชื่อแอปพลิเคชันและคำอธิบาย ซึ่งจะปรากฏในหน้าข้อมูลร้านค้าของส่วนเสริมใน Google Workspace Marketplace คลิกเสร็จสิ้นเพื่อบันทึก
เลือกหมวดหมู่สำหรับส่วนเสริม
ในส่วนชิ้นงานกราฟิก ให้ระบุรูปภาพสำหรับช่องที่ต้องระบุ คุณเปลี่ยนข้อมูลเหล่านี้ได้ในภายหลัง และใช้เป็นตัวยึดตำแหน่งได้ในตอนนี้
ในส่วนลิงก์สนับสนุน ให้ระบุ URL ที่ขอ ซึ่งอาจเป็นตัวยึดตำแหน่งหากคุณตั้งค่าระดับการเข้าถึงแอปเป็นส่วนตัวในขั้นตอนก่อนหน้า

หากตั้งค่าระดับการเข้าถึงแอปเป็นส่วนตัวในขั้นตอนก่อนหน้า ให้คลิกเผยแพร่ แล้วผู้ใช้จะติดตั้งแอปได้ทันที หากตั้งค่า ระดับการมองเห็นแอปเป็นสาธารณะ ให้เพิ่มอีเมลในส่วนผู้ทดสอบฉบับร่าง สำหรับผู้ใช้ทดสอบ แล้วคลิกบันทึกฉบับร่าง

ประเด็นสำคัญ: การเลือกเผยแพร่สำหรับแอปที่มีระดับการเข้าถึงเป็นสาธารณะจะส่งแอป ทันทีเพื่อให้ทีมมาร์เก็ตเพลสตรวจสอบ ทีมตรวจสอบต้องทดสอบและอนุมัติแอปก่อนจึงจะเพิ่มลงใน มาร์เก็ตเพลสได้ บันทึกฉบับร่างของโปรเจ็กต์เพื่อให้ผู้ใช้ทดสอบติดตั้งได้โดยไม่ต้องมีการตรวจสอบ คุณเลือกเผยแพร่ฉบับร่าง ในภายหลังได้เมื่อพร้อมให้ทีม Marketplace อนุมัติ

หน้าจอคำยินยอม OAuth

หน้าจอคำยินยอม OAuth จะปรากฏขึ้นเมื่อผู้ใช้ให้สิทธิ์แอปของคุณเป็นครั้งแรก โดยจะแจ้งให้ผู้ใช้ยินยอมให้แอปเข้าถึงข้อมูลส่วนบุคคลและข้อมูลบัญชีตามที่ขอบเขตที่คุณเปิดใช้กำหนด

ไปที่หน้าสร้างหน้าจอขอความยินยอม OAuth ระบุข้อมูลต่อไปนี้

ตั้งค่าประเภทผู้ใช้เป็นภายนอก คลิกสร้าง
ในหน้าถัดไป ให้กรอกรายละเอียดแอปและข้อมูลติดต่อที่จำเป็น ระบุโดเมนที่โฮสต์แอปของคุณในส่วนโดเมนที่ได้รับอนุญาต คลิกบันทึกและดำเนินการต่อ
เพิ่มขอบเขต OAuth ที่เว็บแอปของคุณต้องการ โปรดดูคำแนะนำในการกำหนดค่า OAuth เพื่อดูการอภิปรายโดยละเอียดเกี่ยวกับขอบเขตและวัตถุประสงค์ของขอบเขต

คุณต้องขอขอบเขตต่อไปนี้อย่างน้อย 1 รายการเพื่อให้ Google ส่งพารามิเตอร์การค้นหา login_hint คำอธิบายโดยละเอียดเพิ่มเติมเกี่ยวกับลักษณะการทำงานนี้ มีอยู่ในคู่มือการกำหนดค่า OAuth
- https://www.googleapis.com/auth/userinfo.email (รวมอยู่แล้ว)
- https://www.googleapis.com/auth/userinfo.profile (รวมอยู่แล้ว)
ขอบเขตต่อไปนี้มีไว้สำหรับส่วนเสริมของ Classroom โดยเฉพาะ
- https://www.googleapis.com/auth/classroom.addons.teacher
- https://www.googleapis.com/auth/classroom.addons.student
รวมถึงขอบเขต Google API อื่นๆ ที่แอปของคุณต้องการจากผู้ใช้ปลายทางด้วย

คลิกบันทึกและต่อไป
ระบุอีเมลของบัญชีทดสอบในหน้าผู้ใช้ทดสอบ คลิกบันทึกและดำเนินการต่อ

ยืนยันว่าการตั้งค่าถูกต้อง แล้วกลับไปที่แดชบอร์ด

ติดตั้งส่วนเสริม

ตอนนี้คุณติดตั้งส่วนเสริมได้โดยใช้ลิงก์ที่ด้านบนของหน้าข้อมูลผลิตภัณฑ์ใน Store ของ Marketplace SDK คลิกดูใน Marketplace ที่ด้านบนของหน้าเพื่อดูข้อมูล แล้วเลือกติดตั้ง

สร้างเว็บแอปพื้นฐาน

ตั้งค่าโครงสร้างเว็บแอปพลิเคชันที่มี 2 เส้นทาง ขั้นตอนการแนะนำในอนาคต จะขยายแอปพลิเคชันนี้ ดังนั้นตอนนี้เพียงสร้างหน้า Landing Page สำหรับส่วนเสริม /addon-discovery และหน้าดัชนีจำลอง / สำหรับ "เว็บไซต์ของบริษัท"

ตัวอย่างเว็บแอปใน iframe

ใช้ 2 ปลายทางต่อไปนี้

/: แสดงข้อความต้อนรับและปุ่มเพื่อปิดทั้งแท็บปัจจุบัน และ iframe ของส่วนเสริม
/addon-discovery: แสดงข้อความต้อนรับและปุ่ม 2 ปุ่ม ได้แก่ ปุ่มปิด iframe ของส่วนเสริมและปุ่มเปิดเว็บไซต์ในแท็บใหม่

โปรดทราบว่าเราจะเพิ่มปุ่มเพื่อสร้างและปิดหน้าต่างหรือ iframe ซึ่งแสดงให้เห็นวิธีการเปิดแท็บใหม่ให้ผู้ใช้อย่างปลอดภัยเพื่อ การให้สิทธิ์ในคำแนะนำแบบทีละขั้นตอนถัดไป

สร้างสคริปต์ยูทิลิตี

สร้างไดเรกทอรี static/scripts สร้างไฟล์ใหม่ addon-utils.js เพิ่มฟังก์ชัน 2 รายการต่อไปนี้

/**
 *   Opens a given destination route in a new window. This function uses
 *   window.open() so as to force window.opener to retain a reference to the
 *   iframe from which it was called.
 *   @param {string} destinationURL The endpoint to open, or "/" if none is
 *   provided.
 */
function openWebsiteInNewTab(destinationURL = '/') {
  window.open(destinationURL, '_blank');
}

/**
 *   Close the iframe by calling postMessage() in the host Classroom page. This
 *   function can be called directly when in a Classroom add-on iframe.
 *
 *   Alternatively, it can be used to close an add-on iframe in another window.
 *   For example, if an add-on iframe in Window 1 opens a link in a new Window 2
 *   using the openWebsiteInNewTab function, you can call
 *   window.opener.closeAddonIframe() from Window 2 to close the iframe in Window
 *   1.
 */
function closeAddonIframe() {
  window.parent.postMessage({
    type: 'Classroom',
    action: 'closeIframe',
  }, '*');
};

สร้างเส้นทาง

ใช้ปลายทาง /addon-discovery และ /

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 เส้นทางและเส้นทางเพิ่มเติมสำหรับการจัดการข้อผิดพลาด

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

ทดสอบส่วนเสริม

สำคัญ: แม้ว่าคุณจะทดสอบแอปพลิเคชันได้โดยตรงโดยใช้เว็บเบราว์เซอร์ แต่คุณควรทดสอบใน iframe ของส่วนเสริม Classroom เป็นหลัก การโหลด เว็บแอปใน iframe อาจทำให้เกิดลักษณะการทำงานที่ผิดปกติ อ่านคำอธิบายของแต่ละ iframe ในหน้าคำแนะนำเกี่ยวกับพารามิเตอร์ iframe และพารามิเตอร์การค้นหา คำสั่งทั้งหมดที่ระบุไว้ในคำแนะนำแบบทีละขั้นนี้ถือว่าส่วนเสริมสามารถใช้งานได้ใน บริบทของ iframe

เปิดใช้เซิร์ฟเวอร์ จากนั้นลงชื่อเข้าใช้ Google Classroom ในฐานะผู้ใช้ทดสอบที่เป็นครูคนหนึ่ง ไปที่แท็บงานของชั้นเรียน แล้วสร้างงานใหม่ เลือกส่วนเสริมจากเครื่องมือเลือกส่วนเสริม iframe จะเปิดขึ้น และส่วนเสริมจะโหลด Attachment Setup URI ที่คุณระบุในหน้าการกำหนดค่าแอปของ Marketplace SDK

ยินดีด้วย คุณพร้อมที่จะไปยังขั้นตอนถัดไปแล้ว นั่นคือการลงชื่อเข้าใช้ของผู้ใช้ ด้วย SSO ของ Google