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

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

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

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

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

เมื่อดำเนินการเสร็จแล้ว คุณจะติดตั้งส่วนเสริมและโหลดส่วนเสริมได้ใน iframe ของส่วนเสริมของ Classroom

ข้อกำหนดเบื้องต้น

เลือกภาษาเพื่อดูข้อกำหนดเบื้องต้นที่เหมาะสม

python -m ensurepip --upgrade

python3 -m venv .classroom-addon-env
source .classroom-addon-env/bin/activate

cd flask/01-basic-app
pip install -r requirements.txt

npm install

java --version
./mvnw --version

java -version
mvnw.cmd --version

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

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

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

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

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

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

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

เลือกการ์ด 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 ที่เว็บแอปต้องใช้ โปรดดู 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 และหน้าดัชนีจำลอง / สำหรับ "เว็บไซต์บริษัท" ของเรา

ใช้ปลายทาง 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 และ /

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

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

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

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)

const websiteRouter = require('./routes/index');
const addonRouter = require('./routes/classroom-addon');

app.use('/', websiteRouter);
app.use('/addon-discovery', addonRouter);

router.get('/', function (req, res, next) {
  res.render('index', {
    title: 'Education Technology',
    message: 'Welcome to our website!'
  });
});

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

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

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

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

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

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