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

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

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

ในคำแนะนำแบบทีละขั้นนี้ คุณจะต้องทำดังนี้

  • สร้างโปรเจ็กต์ Google Cloud ใหม่สำหรับส่วนเสริม
  • สร้างเว็บแอป Skeleton ที่มีปุ่มลงชื่อเข้าใช้ตัวยึดตำแหน่ง
  • เผยแพร่ข้อมูลผลิตภัณฑ์ใน 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 เพื่อจัดการสร้างและจัดการได้ ทรัพยากร Dependency ตัวอย่างนี้มี Wrapper ของ Maven ที่ช่วยให้ สร้างได้สำเร็จโดยที่คุณไม่ต้องติดตั้ง Maven เอง

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

java --version
./mvnw --version

หรือบน Windows:

java -version
mvnw.cmd --version

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

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

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

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

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

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

แนบ 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
  • กำหนดการตั้งค่าการติดตั้งเป็น 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 ใน ขั้นตอนก่อนหน้า

  • กรอกข้อมูลในช่องต่างๆ ตามความเหมาะสมกับองค์กรของคุณในส่วนนักพัฒนาซอฟต์แวร์ ลิงก์

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

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

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

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

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

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

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

    คุณต้องขอขอบเขตต่อไปนี้อย่างน้อยหนึ่งรายการเพื่อให้ 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 คลิกแอป URL ที่ด้านบนของหน้าเพื่อดูข้อมูล จากนั้นเลือกติดตั้ง

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

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

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

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

  • /: แสดงข้อความต้อนรับและปุ่มเพื่อปิดทั้งแท็บปัจจุบัน และ iframe ของส่วนเสริม
  • /addon-discovery: แสดงข้อความต้อนรับและปุ่ม 2 ปุ่ม โดยปุ่มหนึ่งจะปิด iframe ของส่วนเสริมและอีก 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 และส่งเทมเพลต ที่มีตัวแปร 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 แฮนด์ฟรี และนอกจากนี้ การจัดวาง 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 จาก ทรัพยากร Dependency 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";
}

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

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

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