Classroom ऐड-ऑन बनाएं

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

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

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

  • अपने वेब ऐप्लिकेशन के लिए, नया Google Cloud प्रोजेक्ट बनाएं.
  • प्लेसहोल्डर साइन-इन बटन की मदद से, स्केलेटन वेब ऐप्लिकेशन बनाएं.
  • अपने वेब ऐप्लिकेशन के लिए, Google Workspace Marketplace (GWM) का निजी स्टोर पेज पब्लिश करें.

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

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

उचित आवश्यकताएं देखने के लिए, नीचे दी गई भाषा चुनें:

Python

Python के हमारे उदाहरण में, फ़्लेस्क फ़्रेमवर्क का इस्तेमाल किया गया है. सभी सिलसिलेवार निर्देशों के लिए, खास जानकारी देने वाले पेज से पूरा सोर्स कोड डाउनलोड किया जा सकता है. सिलसिलेवार तरीके से दिए गए इस निर्देश का कोड, /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 के उदाहरण में एक्सप्रेशन फ़्रेमवर्क का इस्तेमाल किया गया है. खास जानकारी देने वाले पेज से, सिलसिलेवार तरीके से दिए गए सभी निर्देशों के लिए पूरा सोर्स कोड डाउनलोड किया जा सकता है.

अगर ज़रूरी हो, तो NodeJS v16.13+ को इंस्टॉल करें.

npm का इस्तेमाल करके ज़रूरी नोड मॉड्यूल इंस्टॉल करें.

npm install

Java

Java के हमारे उदाहरण में, Spring बूट फ़्रेमवर्क का इस्तेमाल किया गया है. खास जानकारी देने वाले पेज से, सभी कदम-दर-कदम निर्देशों के लिए पूरा सोर्स कोड डाउनलोड किया जा सकता है.

अगर आपने Java 11+ को अपनी मशीन पर इंस्टॉल नहीं किया है, तो उसे इंस्टॉल करें.

स्प्रिंग बूट ऐप्लिकेशन, बिल्ड और डिपेंडेंसी मैनेज करने के लिए Gradle या Maven का इस्तेमाल कर सकते हैं. इस उदाहरण में Maven का रैपर शामिल है, जो पूरा बिल्ड बनाता है. इसके लिए, आपको Maven को इंस्टॉल करने की ज़रूरत नहीं होती.

हमारे दिए गए उदाहरण को चलाने के लिए, उस डायरेक्ट्री में नीचे दिए गए निर्देशों का पालन करें जहाँ से आपने प्रोजेक्ट डाउनलोड किया था. इससे यह पक्का हो जाएगा कि आपके पास प्रोजेक्ट चलाने से जुड़ी ज़रूरी शर्तें हैं.

java --version
./mvnw --version

या Windows पर:

java -version
mvnw.cmd --version

Google Cloud प्रोजेक्ट सेट अप करना

Classroom एपीआई और पुष्टि करने के ज़रूरी तरीकों के ऐक्सेस को Google Cloud प्रोजेक्ट से कंट्रोल किया जाता है. यहां दिए गए निर्देशों की मदद से, ऐड-ऑन के साथ इस्तेमाल करने के लिए नया प्रोजेक्ट बनाने और उसे कॉन्फ़िगर करने के कम से कम तरीके बताए गए हैं.

प्रोजेक्ट बनाएं

प्रोजेक्ट बनाने वाले पेज पर जाकर, नया Google Cloud प्रोजेक्ट बनाएं. आपके पास नए प्रोजेक्ट को कोई भी नाम देने का विकल्प होता है. बनाएं पर क्लिक करें.

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

Google Cloud Console में,
प्रोजेक्ट को चुनें और

GWM SDK टूल को Google Cloud प्रोजेक्ट से अटैच करें

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

Google Workspace Marketplace SDK टूल
कार्ड

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

GWM SDK टूल को कॉन्फ़िगर करें

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

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

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

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

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

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

GWM SDK के ऐप्लिकेशन कॉन्फ़िगरेशन पेज पर जाएं. नीचे दी गई जानकारी दें:

  • ऐप्लिकेशन किसको दिखे को Private पर सेट करें. यह सेटिंग जांच और डेवलपमेंट के लिए सही है. साथ ही, कदम-दर-कदम निर्देश के लिए यह सबसे सही है. Public को सिर्फ़ तब चुनें, जब आप आम लोगों के लिए अपने ऐड-ऑन का इस्तेमाल करने के लिए तैयार हों.

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

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

  • अनुमति वाले अटैचमेंट यूआरआई प्रीफ़िक्स का इस्तेमाल, AddOnAttachment में सेट किए गए यूआरआई की पुष्टि करने के लिए किया जाता है. इसके लिए, courses.*.addOnAttachments.create और courses.*.addOnAttachments.patch तरीकों का इस्तेमाल किया जाता है. पुष्टि, लिटरल स्ट्रिंग प्रीफ़िक्स मैच है. इस समय वाइल्ड कार्ड का इस्तेमाल करने की अनुमति नहीं दी जाती है. फ़िलहाल, इन्हें खाली छोड़ा जा सकता है.

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

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

स्टोर सूची

GWM SDK के स्टोर पेज पर जाएं. नीचे दी गई जानकारी दें:

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

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

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

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

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

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

iframe में वेब ऐप्लिकेशन का उदाहरण

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

  • /: मौजूदा टैब और ऐड-ऑन 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 above, 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 डायरेक्ट्री बनाएं. आपकी एचटीएमएल फ़ाइलें यहां दिखेंगी.

सर्वर मॉड्यूल बनाएं*

अपनी मॉड्यूल डायरेक्ट्री में __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 है. इस फ़ाइल में दिए गए दोनों रूट लागू करें.

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

ध्यान दें कि हमारे दोनों रूट, अपने जिंजा टेंप्लेट के लिए message वैरिएबल पास करते हैं. इससे पता चलता है कि उपयोगकर्ता किस पेज पर पहुंचा है.

कॉन्फ़िगरेशन बनाना और फ़ाइलें लॉन्च करना

अपने ऐप्लिकेशन की रूट डायरेक्ट्री में, 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 फ़ाइल में, अपना मॉड्यूल इंपोर्ट करें और फ़्लास्क सर्वर शुरू करें.

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!'
  });
});

दूसरा रास्ता /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 बनाएं. इस फ़ाइल में, spring-boot-starter-web डिपेंडेंसी से @GetMapping एनोटेशन इंपोर्ट करें.

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

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