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

นี่เป็นบทแนะนำแรกในชุดบทแนะนำส่วนเสริมของ Classroom

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

ในระหว่างการแนะนำนี้ คุณจะทำสิ่งต่อไปนี้

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

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

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

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

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

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

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

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

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

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 การตรวจสอบเป็นการจับคู่สตริงคำนำหน้าตามตัวอักษรและยังไม่อนุญาตให้ใช้ไวลด์การ์ดในขณะนี้ เพิ่มโดเมนรูทของเซิร์ฟเวอร์เนื้อหาอย่างน้อย 1 รายการ เช่น https://localhost:5000/ หรือ https://cdn.myedtech.com/

• เพิ่มขอบเขต OAuth เดียวกันกับที่ระบุไว้ในหน้าจอขอความยินยอม OAuth ในขั้นตอนก่อนหน้า

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

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

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

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

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

/**
 *   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',
  }, '*');
};

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