Classroom ऐड-ऑन बनाएं

Classroom ऐड-ऑन के लिए सिलसिलेवार तरीके से निर्देश देने वाली सीरीज़ की यह पहला कदम है.

सिलसिलेवार तरीके से दिए गए इस वीडियो में, आपने वेब ऐप्लिकेशन डेवलप करने और उसे Classroom ऐड-ऑन के तौर पर पब्लिश करने का बुनियादी काम किया. आने वाले समय में, सिलसिलेवार तरीके से इस ऐप्लिकेशन के बारे में ज़्यादा जानकारी दी जा सकती है.

सिलसिलेवार तरीके से निर्देशों का पालन करते हुए, आपने ये काम किए हैं:

• ऐड-ऑन के लिए नया Google Cloud प्रोजेक्ट बनाएं.
• प्लेसहोल्डर साइन-इन बटन के साथ एक स्केलेटन वेब ऐप्लिकेशन बनाएं.
• अपने ऐड-ऑन के लिए, Google Workspace Marketplace के स्टोर पेज की सूची पब्लिश करें.

काम पूरा होने के बाद, ऐड-ऑन इंस्टॉल किया जा सकता है और उसे Classroom ऐड-ऑन iframe में लोड किया जा सकता है.

ज़रूरी शर्तें

ज़रूरी शर्तें देखने के लिए कोई भाषा चुनें:

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 प्रोजेक्ट बनाएं. आपके पास नए प्रोजेक्ट को कोई भी नाम देने का विकल्प होता है. बनाएं पर क्लिक करें.

नए प्रोजेक्ट को पूरी तरह से बनने में कुछ समय लगता है. इसके बाद, प्रोजेक्ट चुनना न भूलें. स्क्रीन पर सबसे ऊपर मौजूद, प्रोजेक्ट सिलेक्टर ड्रॉप-डाउन मेन्यू से इसे चुना जा सकता है या सबसे ऊपर दाईं ओर मौजूद सूचना मेन्यू में प्रोजेक्ट चुनें पर क्लिक किया जा सकता है.

Google Workspace Marketplace SDK टूल को Google Cloud प्रोजेक्ट से अटैच करना

एपीआई लाइब्रेरी ब्राउज़र पर जाएं. Google Workspace Marketplace SDK खोजें. आपको नतीजों की सूची में SDK टूल दिखेगा.

Google Workspace Marketplace SDK टूल कार्ड चुनें. इसके बाद, चालू करें पर क्लिक करें.

Google Workspace Marketplace SDK टूल कॉन्फ़िगर करना

Google Workspace Marketplace, वह लिस्टिंग उपलब्ध कराता है जिसकी मदद से उपयोगकर्ता और एडमिन आपके ऐड-ऑन को इंस्टॉल करते हैं. आगे बढ़ने के लिए, Marketplace SDK टूल के ऐप्लिकेशन कॉन्फ़िगरेशन, स्टोर लिस्टिंग, और OAuth की सहमति वाली स्क्रीन को कॉन्फ़िगर करें.

ऐप्लिकेशन का कॉन्फ़िगरेशन

Marketplace SDK टूल के ऐप्लिकेशन कॉन्फ़िगरेशन पेज पर जाएं. ये जानकारी दें:

• ऐप्लिकेशन किसको दिखे को Public या Private पर सेट करें.

  • सार्वजनिक सेटिंग उन ऐप्लिकेशन के लिए है जिन्हें आने वाले समय में असली उपयोगकर्ताओं के लिए रिलीज़ कर दिया जाएगा. किसी सार्वजनिक ऐप्लिकेशन को असली उपयोगकर्ताओं के लिए पब्लिश करने से पहले, अनुमति की प्रक्रिया से गुज़रना ज़रूरी है. हालांकि, आपके पास यह तय करने का विकल्प है कि कौनसे उपयोगकर्ता उसे ड्राफ़्ट के तौर पर इंस्टॉल और टेस्ट कर सकते हैं. यह पब्लिश होने से पहले की ऐसी स्थिति है जिसमें ऐड-ऑन को मंज़ूरी के लिए भेजने से पहले, उसकी जांच की जा सकती है और उसे डेवलप किया जा सकता है.
  • निजी सेटिंग, इंंटरनल टेस्टिंग और डेवलपमेंट के लिए सही है. निजी ऐप्लिकेशन को सिर्फ़ उसी डोमेन के उपयोगकर्ता इंस्टॉल कर सकते हैं जिस डोमेन में प्रोजेक्ट बनाया गया था. इसलिए, अगर प्रोजेक्ट को Google Workspace for Education की सदस्यता वाले डोमेन में बनाया गया है, तो ही आपको 'किसको दिखे' सेटिंग को 'निजी' के तौर पर सेट करना चाहिए. ऐसा न करने पर, टेस्ट के उपयोगकर्ता Classroom ऐड-ऑन लॉन्च नहीं कर पाएंगे.

• अगर आपको डोमेन एडमिन तक इंस्टॉलेशन सीमित करना है, तो इंस्टॉलेशन सेटिंग को Admin Only install पर सेट करें.

• ऐप्लिकेशन इंटिग्रेशन में, Classroom ऐड-ऑन चुनें. आपको सुरक्षित अटैचमेंट सेटअप यूआरआई के लिए प्रॉम्प्ट किया जाता है. यह वह यूआरएल है जिसकी उम्मीद किसी उपयोगकर्ता के आपका ऐड-ऑन खोलने पर होती है. सिलसिलेवार तरीके से निर्देश देने के लिए, यह https://<your domain>/addon-discovery होना चाहिए.

• अनुमति वाले अटैचमेंट के यूआरआई का इस्तेमाल AddOnAttachment में सेट किए गए यूआरआई की पुष्टि करने के लिए किया जाता है. इसके लिए, courses.*.addOnAttachments.create और courses.*.addOnAttachments.patch तरीकों का इस्तेमाल किया जाता है. पुष्टि करने की प्रोसेस, स्ट्रिंग प्रीफ़िक्स लिटरल होती है. साथ ही, इस समय वाइल्ड कार्ड का इस्तेमाल नहीं किया जा सकता है. अपने कॉन्टेंट सर्वर का कम से कम रूट डोमेन जोड़ें, जैसे कि https://localhost:5000/ या https://cdn.myedtech.com/.

• वही OAuth के दायरे जोड़ें जो पिछले चरण में OAuth के लिए सहमति वाली स्क्रीन पर दिए गए थे.

• डेवलपर लिंक में जाकर, अपने संगठन के हिसाब से फ़ील्ड में जानकारी भरें.

स्टोर सूची

Marketplace SDK टूल के स्टोर पेज पर जाएं. ये जानकारी दें:

• ऐप्लिकेशन की जानकारी में, कोई भाषा जोड़ें या पहले से मौजूद भाषा के आगे बने ड्रॉप-डाउन को बड़ा करें. ऐप्लिकेशन का नाम और उसका ब्यौरा दें. ये आपके ऐड-ऑन के Google Workspace Marketplace के स्टोर पेज पर दिखेंगे. सेव करने के लिए, हो गया पर क्लिक करें.
• अपने ऐड-ऑन के लिए कोई कैटगरी चुनें.
• ग्राफ़िक ऐसेट में, ज़रूरी फ़ील्ड के लिए इमेज दें. इन्हें बाद में बदला जा सकता है और फ़िलहाल ये प्लेसहोल्डर हो सकते हैं.
• सहायता लिंक में, अनुरोध किए गए यूआरएल उपलब्ध कराएं. ये प्लेसहोल्डर हो सकते हैं. ऐसा तब होगा, जब आपने पिछले चरण में ऐप्लिकेशन के दिखने की सेटिंग को निजी पर सेट किया हो.

अगर आपने पिछले चरण में, ऐप्लिकेशन के दिखने की सेटिंग को निजी पर सेट किया है, तो पब्लिश करें पर क्लिक करें. आपका ऐप्लिकेशन तुरंत इंस्टॉल करने के लिए उपलब्ध हो जाएगा. अगर आपने ऐप्लिकेशन दिखने की सेटिंग को सार्वजनिक पर सेट किया है, तो टेस्ट उपयोगकर्ताओं के लिए ड्राफ़्ट टेस्टर में ईमेल पते जोड़ें. इसके बाद, ड्राफ़्ट सेव करें पर क्लिक करें.

ऐसी स्क्रीन जहां 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 के उन अन्य दायरों को भी शामिल करें जिनकी ज़रूरत आपके ऐप्लिकेशन के लिए असली उपयोगकर्ताओं से होती है.

  सहेजें और जारी रखें पर क्लिक करें.

• जांच करने वाले उपयोगकर्ता पेज पर, जांच के लिए इस्तेमाल होने वाले खातों के ईमेल पतों की सूची बनाएं. सेव करें और जारी रखें पर क्लिक करें.

पुष्टि करें कि आपकी सेटिंग सही हैं. इसके बाद, डैशबोर्ड पर वापस जाएं.

ऐड-ऑन इंस्टॉल करें

अब आपके पास अपना ऐड-ऑन इंस्टॉल करने का विकल्प है. इसके लिए, Marketplace SDK टूल के स्टोर पेज पेज पर सबसे ऊपर मौजूद लिंक का इस्तेमाल करें. लिस्टिंग देखने के लिए, पेज पर सबसे ऊपर मौजूद ऐप्लिकेशन यूआरएल पर क्लिक करें. इसके बाद, इंस्टॉल करें चुनें.

एक बेसिक वेब ऐप्लिकेशन बनाएं

दो रूट वाला स्केलेट वेब ऐप्लिकेशन सेट अप करें. आने वाले समय में, इस ऐप्लिकेशन के लिए सिलसिलेवार तरीके से निर्देश दिए जाएंगे. इसलिए, फ़िलहाल ऐड-ऑन /addon-discovery के लिए सिर्फ़ एक लैंडिंग पेज और हमारी "कंपनी की साइट" के लिए एक मॉक इंडेक्स पेज / बनाएं.

ये दो एंडपॉइंट लागू करें:

• /: इसमें वेलकम मैसेज और मौजूदा टैब और ऐड-ऑन iframe, दोनों को बंद करने का बटन दिखता है.
• /addon-discovery: इसमें वेलकम मैसेज और दो बटन दिखते हैं: पहला, ऐड-ऑन iframe को बंद करने के लिए और दूसरा, किसी वेबसाइट को नए टैब में खोलने के लिए.

ध्यान दें कि हम विंडो या iframe बनाने और बंद करने के लिए बटन जोड़ रहे हैं. ये दिशा-निर्देश, उपयोगकर्ता को सुरक्षित तरीके से नए टैब में पॉप-अप करने का तरीका दिखाते हैं, ताकि आप आगे के सिलसिलेवार निर्देशों में उपयोगकर्ता की अनुमति ले सकें.

यूटिलिटी स्क्रिप्ट बनाएं

static/scripts डायरेक्ट्री बनाएं. एक नई फ़ाइल बनाएं addon-utils.js. नीचे दिए गए दो फ़ंक्शन जोड़ें.

/**
 *   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 खुल जाता है और ऐड-ऑन उस अटैचमेंट सेटअप यूआरआई को लोड कर देता है, जिसे आपने Marketplace SDK टूल के ऐप्लिकेशन कॉन्फ़िगरेशन पेज में तय किया है.

बधाई हो! आप अगले चरण पर जाने के लिए तैयार हैं: Google एसएसओ (SSO) की मदद से उपयोगकर्ताओं में साइन इन करना.