Google Classroom ऐड-ऑन अब आम तौर पर डेवलपर के लिए उपलब्ध हैं! ज़्यादा जानकारी के लिए, कृपया ऐड-ऑन दस्तावेज़ देखें.

इस पेज का अनुवाद Cloud Translation API से किया गया है.

Classroom ऐड-ऑन बनाएं

यह Classroom ऐड-ऑन के बारे में जानकारी देने वाली सीरीज़ का पहला वॉकथ्रू है.

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

इस वॉकट्रू के दौरान, आपको ये काम करने होंगे:

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

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

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

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

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 का इस्तेमाल करके बिल्ड को हैंडल कर सकते हैं और डिपेंडेंसी मैनेज कर सकते हैं. इस उदाहरण में मेवन रैपर शामिल है. इससे यह पक्का होता है कि मेवन को इंस्टॉल किए बिना ही, बिल्ड तैयार हो गया है.

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

java --version
./mvnw --version

इसके अलावा, Windows पर:

java -version
mvnw.cmd --version

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

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

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

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

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

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

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

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

Google Workspace Marketplace SDK कार्ड

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

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

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

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

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

ऐप्लिकेशन दिखने की स्थिति को Public या Private पर सेट करें.
- सार्वजनिक सेटिंग उन ऐप्लिकेशन के लिए होती है जिन्हें आखिर में असली उपयोगकर्ताओं के लिए रिलीज़ किया जाएगा. सार्वजनिक ऐप्लिकेशन को उपयोगकर्ताओं के लिए उपलब्ध कराने से पहले, मंज़ूरी की प्रोसेस से गुज़रना होता है. हालांकि, आपके पास उन उपयोगकर्ताओं को चुनने का विकल्प होता है जो इसे ड्राफ़्ट के तौर पर इंस्टॉल और टेस्ट कर सकते हैं. यह पब्लिश करने से पहले की स्थिति है. इससे आपको मंज़ूरी के लिए भेजने से पहले, अपने ऐड-ऑन को टेस्ट करने और उसे डेवलप करने की अनुमति मिलेगी.
- निजी सेटिंग, इंटरनल टेस्टिंग और डेवलपमेंट के लिए सही है. प्राइवेट ऐप्लिकेशन को सिर्फ़ उसी डोमेन के उपयोगकर्ता इंस्टॉल कर सकते हैं जिसमें प्रोजेक्ट बनाया गया था. इसलिए, आपको प्रोजेक्ट के दिखने की सेटिंग को 'निजी' पर सिर्फ़ तब सेट करना चाहिए, जब प्रोजेक्ट को Google Workspace for Education की सदस्यता वाले डोमेन में बनाया गया हो. ऐसा न करने पर, टेस्ट करने वाले उपयोगकर्ता Classroom ऐड-ऑन लॉन्च नहीं कर पाएंगे.
चेतावनी: सेव करने से पहले, पक्का करें कि ऐप्लिकेशन दिखने की सेटिंग सही हो. ऐप्लिकेशन दिखने की सेटिंग सेट हो जाने के बाद, उसे बदला नहीं जा सकता. ऐप्लिकेशन की दृश्यता को अलग-अलग सेट करने के लिए, आपको एक नया Google Cloud प्रोजेक्ट बनाना होगा.
अगर आपको डोमेन एडमिन के लिए, इंस्टॉल करने की सुविधा को सीमित करना है, तो इंस्टॉल करने की सेटिंग को Admin Only install पर सेट करें.
ऐप्लिकेशन इंटिग्रेशन में जाकर, Classroom ऐड-ऑन को चुनें. आपको सुरक्षित अटैचमेंट सेटअप यूआरआई के लिए कहा जाता है. यह वह यूआरएल है जिसे उपयोगकर्ता के ऐड-ऑन खोलने पर लोड किया जाना चाहिए. इस सिलसिलेवार तरीके से दिए गए निर्देशों के लिए, यह https://<your domain>/addon-discovery पर सेट होना चाहिए.
अटैचमेंट के लिए अनुमति वाले यूआरआई प्रीफ़िक्स का इस्तेमाल, courses.*.addOnAttachments.create और courses.*.addOnAttachments.patch तरीकों का इस्तेमाल करके, AddOnAttachment में सेट किए गए यूआरआई की पुष्टि करने के लिए किया जाता है. पुष्टि करने के लिए, स्ट्रिंग के प्रीफ़िक्स का इस्तेमाल किया जाता है. फ़िलहाल, इसमें वाइल्ड कार्ड का इस्तेमाल नहीं किया जा सकता. अपने कॉन्टेंट सर्वर का कम से कम रूट डोमेन जोड़ें. जैसे, https://localhost:5000/ या https://cdn.myedtech.com/.
पिछले चरण में, OAuth के लिए सहमति देने वाली स्क्रीन में दिए गए OAuth स्कोप जोड़ें.

अहम जानकारी: ऐप्लिकेशन कॉन्फ़िगरेशन में बताए गए OAuth के स्कोप की सूची, OAuth के लिए सहमति देने वाली स्क्रीन में दी गई सूची से मेल खानी चाहिए.
डेवलपर लिंक में जाकर, अपने संगठन के हिसाब से फ़ील्ड भरें.

स्टोर सूची

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

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

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

अहम जानकारी: सार्वजनिक तौर पर दिखने वाले किसी ऐप्लिकेशन के लिए, पब्लिश करें विकल्प चुनने पर, उसे Marketplace की टीम के पास समीक्षा के लिए तुरंत भेज दिया जाएगा. ऐप्लिकेशन को 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 के स्टोर पेज पर सबसे ऊपर दिए गए लिंक का इस्तेमाल करके, ऐड-ऑन इंस्टॉल किया जा सकता है. सूची देखने के लिए, पेज में सबसे ऊपर मौजूद Marketplace में देखें पर क्लिक करें. इसके बाद, इंस्टॉल करें चुनें.

समान डोमेन में होते हैं.

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

दो रास्तों वाला स्केलेटन वेब ऐप्लिकेशन सेट अप करें. आने वाले समय में, हम इस ऐप्लिकेशन को और बेहतर बनाएंगे. इसलिए, फ़िलहाल ऐड-ऑन के लिए सिर्फ़ एक लैंडिंग पेज /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, 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.")

ध्यान दें कि हमारे दोनों रूट, अपने-अपने Jinja टेंप्लेट को 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 फ़ाइल में, मॉड्यूल इंपोर्ट करें और 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 Handlebars टेंप्लेट का इस्तेमाल करके रिस्पॉन्स रेंडर करता है. साथ ही, टेंप्लेट को एक डेटा ऑब्जेक्ट पास करता है, जिसमें 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 Handlebars टेंप्लेट और 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;

क्लास के मकसद के बारे में बताने के लिए, क्लास की परिभाषा के ऊपर Spring फ़्रेमवर्क कंट्रोलर एनोटेशन शामिल करें.

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

ऐड-ऑन की जांच करना

अहम जानकारी: वेब ब्राउज़र का इस्तेमाल करके, सीधे तौर पर अपने ऐप्लिकेशन की जांच की जा सकती है. हालांकि, आपको मुख्य रूप से Classroom ऐड-ऑन के iframe में इसकी जांच करनी चाहिए. अपने वेब ऐप्लिकेशन को iframe में लोड करने से, कुछ असामान्य व्यवहार हो सकते हैं. हर iframe के बारे में जानकारी पाने के लिए, iframe और क्वेरी पैरामीटर के बारे में बताने वाला हमारा गाइड पेज पढ़ें. इस वॉकट्रू में दिए गए सभी निर्देशों में यह माना गया है कि ऐड-ऑन का इस्तेमाल iframe के कॉन्टेक्स्ट में किया जा सकता है.

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

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