कॉन्टेंट-टाइप अटैचमेंट

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

सिलसिलेवार तरीके से निर्देश देने वाले इस वीडियो में, अटैचमेंट बनाने के लिए Google Classroom API का इस्तेमाल किया जा सकता है. आप उपयोगकर्ताओं को अटैचमेंट का कॉन्टेंट देखने के लिए रूट देते हैं. क्लास में उपयोगकर्ता की भूमिका के आधार पर, व्यू अलग-अलग होते हैं. सिलसिलेवार तरीके से दिए गए इन निर्देशों में कॉन्टेंट टाइप के अटैचमेंट के बारे में बताया गया है. इसके लिए, छात्र-छात्राओं को आवेदन सबमिट करने की ज़रूरत नहीं है.

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

  • इन ऐड-ऑन क्वेरी पैरामीटर को वापस पाएं और उनका इस्तेमाल करें:
    • addOnToken: अटैचमेंट डिस्कवरी व्यू को अनुमति देने वाला टोकन पास किया जाता है.
    • itemId: उस courseWork, courseWorkMaterial या सूचना के लिए यूनीक आइडेंटिफ़ायर जिसमें ऐड-ऑन अटैचमेंट मिलता है.
    • itemType: "courseWork", "courseWorkWorkMaterials" या "घोषणा".
    • courseId: Google Classroom कोर्स के लिए एक यूनीक आइडेंटिफ़ायर, जिसमें असाइनमेंट बनाया जा रहा है.
    • attachmentId: यह एक यूनीक आइडेंटिफ़ायर होता है, जिसे Google Classroom किसी ऐड-ऑन अटैचमेंट को बनाने के बाद असाइन करता है.
  • कॉन्टेंट टाइप के अटैचमेंट के लिए स्थायी स्टोरेज की सुविधा लागू करें.
  • अटैचमेंट बनाने और टीचर व्यू और छात्र-छात्राओं के व्यू iframe को दिखाने के लिए रूट बताएं.
  • Google Classroom ऐड-ऑन एपीआई पर, ये अनुरोध करें:
    • कोई नया अटैचमेंट बनाएं.
    • ऐड-ऑन का कॉन्टेक्स्ट पाएं, जिससे यह पता चलता है कि लॉग इन किया हुआ उपयोगकर्ता छात्र/छात्रा है या शिक्षक.

शिक्षक के तौर पर लॉग इन करने के बाद, Google Classroom के यूज़र इंटरफ़ेस (यूआई) से असाइनमेंट पर कॉन्टेंट-टाइप अटैचमेंट बनाए जा सकते हैं. कक्षा के शिक्षक और छात्र भी कॉन्टेंट देख सकते हैं.

Classroom API चालू करना

इस चरण की शुरुआत करते हुए, Classroom API को कॉल करें. आपके Google Cloud प्रोजेक्ट को कॉल करने से पहले, उसके लिए एपीआई चालू होना ज़रूरी है. Google Classroom API की लाइब्रेरी एंट्री पर जाएं और चालू करें को चुनें.

अटैचमेंट डिस्कवरी व्यू के क्वेरी पैरामीटर मैनेज करना

जैसा कि पहले बताया जा चुका है, iframe में अटैचमेंट डिस्कवरी व्यू को लोड करते समय Google Classroom, क्वेरी पैरामीटर पास करता है:

  • courseId: Classroom के मौजूदा कोर्स का आईडी.
  • itemId: उस courseWork, courseWorkMaterial या सूचना के लिए यूनीक आइडेंटिफ़ायर जिसमें ऐड-ऑन अटैचमेंट मिलता है.
  • itemType: "courseWork", "courseWorkWorkMaterials" या "सूचना".
  • addOnToken: ऐसा टोकन जिसका इस्तेमाल, Classroom ऐड-ऑन की कुछ कार्रवाइयों को अनुमति देने के लिए किया जाता है.
  • login_hint: मौजूदा उपयोगकर्ता का Google आईडी.

सिलसिलेवार तरीके से दिए गए निर्देशों का पालन करने के लिए, courseId, itemId, itemType, और addOnToken के बारे में बताया गया है. Classroom API का इस्तेमाल करते समय, कॉल जारी रखते समय, इन्हें बनाए रखें और इन्हें किसी अन्य प्लैटफ़ॉर्म पर भेजें.

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

Python

अपने फ़्लास्क सर्वर फ़ाइल पर जाएं जो अटैचमेंट डिस्कवरी व्यू के लिए रूट बताती है (अगर आप हमारे दिए गए उदाहरण को फ़ॉलो कर रहे हैं, तो attachment-discovery-routes.py). ऐड-ऑन लैंडिंग रूट में सबसे ऊपर (हमारे दिए गए उदाहरण में /classroom-addon), courseId, itemId, itemType, और addOnToken क्वेरी पैरामीटर फिर से पाएं और सेव करें.

# Retrieve the itemId, courseId, and addOnToken query parameters.
if flask.request.args.get("itemId"):
    flask.session["itemId"] = flask.request.args.get("itemId")
if flask.request.args.get("itemType"):
    flask.session["itemType"] = flask.request.args.get("itemType")
if flask.request.args.get("courseId"):
    flask.session["courseId"] = flask.request.args.get("courseId")
if flask.request.args.get("addOnToken"):
    flask.session["addOnToken"] = flask.request.args.get("addOnToken")

इन वैल्यू को सेशन में सिर्फ़ तब ही लिखें, जब वे मौजूद हों. अगर उपयोगकर्ता, iframe को बंद किए बिना बाद में अटैचमेंट डिस्कवरी व्यू पर लौटता है, तो उसे दोबारा पास नहीं किया जाता.

कॉन्टेंट टाइप के अटैचमेंट के लिए स्थायी स्टोरेज जोड़ना

आपको बनाए गए किसी भी अटैचमेंट के स्थानीय रिकॉर्ड की ज़रूरत होगी. इससे वह कॉन्टेंट खोजा जा सकता है जिसे शिक्षक ने Classroom से मिले आइडेंटिफ़ायर का इस्तेमाल करके चुना है.

Attachment के लिए डेटाबेस स्कीमा सेट अप करें. हमारे दिए गए उदाहरण में ऐसे अटैचमेंट हैं जिनमें एक इमेज और कैप्शन दिखाया गया है. Attachment में ये एट्रिब्यूट शामिल होते हैं:

  • attachment_id: अटैचमेंट के लिए एक यूनीक आइडेंटिफ़ायर. Classroom से असाइन किया जाता है और अटैचमेंट बनाते समय जवाब में लौटाया जाता है.
  • image_filename: दिखाई जाने वाली इमेज का फ़ाइल नाम.
  • image_caption: इमेज के साथ दिखाने के लिए कैप्शन.

Python

पिछले चरणों से, SQLite और flask_sqlalchemy लागू करने की प्रक्रिया को बढ़ाएं.

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

class Attachment(db.Model):
    # The attachmentId is the unique identifier for the attachment.
    attachment_id = db.Column(db.String(120), primary_key=True)

    # The image filename to store.
    image_filename = db.Column(db.String(120))

    # The image caption to store.
    image_caption = db.Column(db.String(120))

अपने अटैचमेंट को हैंडल करने वाले रूट की मदद से, सर्वर फ़ाइल में नई अटैचमेंट क्लास इंपोर्ट करें.

नए रास्ते सेट अप करें

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

अटैचमेंट बनाने के रूट जोड़ें

आपको कॉन्टेंट चुनने और अटैचमेंट बनाने का अनुरोध करने के लिए, शिक्षक के पास पेज होने चाहिए. कॉन्टेंट के विकल्प दिखाने के लिए, /attachment-options रूट लागू करें. आपको कॉन्टेंट चुनने और बनाने की पुष्टि करने वाले पेजों के लिए भी टेंप्लेट की ज़रूरत होगी. हमारे दिए गए उदाहरणों में इनके लिए टेंप्लेट हैं. साथ ही, Classroom API से मिले अनुरोध और जवाब भी दिखाए जा सकते हैं.

ध्यान दें कि नया /attachment-options पेज बनाने के बजाय कॉन्टेंट के विकल्प दिखाने के लिए, आपके पास अपने मौजूदा अटैचमेंट डिस्कवरी व्यू लैंडिंग पेज में बदलाव करने का भी विकल्प है. हमारा सुझाव है कि आप इस काम के लिए एक नया पेज बनाएं, ताकि आप सिलसिलेवार तरीके से निर्देश देने वाले दूसरे चरण में लागू किए गए एसएसओ (SSO) व्यवहार को बनाए रख सकें, जैसे कि ऐप्लिकेशन की अनुमतियों को निरस्त करना. ऐड-ऑन बनाने और उसकी जांच करने के दौरान, ये तरीके आपके लिए मददगार होने चाहिए.

शिक्षक हमारे दिए गए उदाहरण में कैप्शन वाली इमेज के छोटे सेट में से कोई इमेज चुन सकते हैं. हमने मशहूर लैंडमार्क की चार इमेज दी हैं जिनके कैप्शन फ़ाइल नामों से लिए जाते हैं.

Python

हमारे दिए गए उदाहरण में, यह webapp/attachment_routes.py फ़ाइल में है.

@app.route("/attachment-options", methods=["GET", "POST"])
def attachment_options():
    """
    Render the attachment options page from the "attachment-options.html"
    template.

    This page displays a grid of images that the user can select using
    checkboxes.
    """

    # A list of the filenames in the static/images directory.
    image_filenames = os.listdir(os.path.join(app.static_folder, "images"))

    # The image_list_form_builder method creates a form that displays a grid
    # of images, checkboxes, and captions with a Submit button. All images
    # passed in image_filenames will be shown, and the captions will be the
    # title-cased filenames.

    # The form must be built dynamically due to limitations in WTForms. The
    # image_list_form_builder method therefore also returns a list of
    # attribute names in the form, which will be used by the HTML template
    # to properly render the form.
    form, var_names = image_list_form_builder(image_filenames)

    # If the form was submitted, validate the input and create the attachments.
    if form.validate_on_submit():

        # Build a dictionary that maps image filenames to captions.
        # There will be one dictionary entry per selected item in the form.
        filename_caption_pairs = construct_filename_caption_dictionary_list(
            form)

        # Check that the user selected at least one image, then proceed to
        # make requests to the Classroom API.
        if len(filename_caption_pairs) > 0:
            return create_attachments(filename_caption_pairs)
        else:
            return flask.render_template(
                "create-attachment.html",
                message="You didn't select any images.",
                form=form,
                var_names=var_names)

    return flask.render_template(
        "attachment-options.html",
        message=("You've reached the attachment options page. "
                "Select one or more images and click 'Create Attachment'."),
        form=form,
        var_names=var_names,
    )

इससे एक "अटैचमेंट बनाएं" पेज बनता है, जो निम्न जैसा दिखता है:

Python कॉन्टेंट चुनने का उदाहरण

शिक्षक एक से ज़्यादा इमेज चुन सकता है. शिक्षक ने create_attachments तरीके से जो इमेज चुनी है उसके लिए एक अटैचमेंट बनाएं.

समस्या वाले अटैचमेंट बनाने के अनुरोध

अब आपको पता है कि शिक्षक किस तरह का कॉन्टेंट अटैच करना चाहता है, तो वह हमारे असाइनमेंट में अटैचमेंट बनाने के लिए, Classroom API को अनुरोध भेजता है. Classroom API से जवाब मिलने के बाद, अटैचमेंट की जानकारी को अपने डेटाबेस में सेव करें.

Classroom सेवा का इंस्टेंस पाने से शुरुआत करें:

Python

हमारे दिए गए उदाहरण में, यह webapp/attachment_routes.py फ़ाइल में है.

def create_attachments(filename_caption_pairs):
    """
    Create attachments and show an acknowledgement page.

    Args:
        filename_caption_pairs: A dictionary that maps image filenames to
            captions.
    """
    # Get the Google Classroom service.
    classroom_service = googleapiclient.discovery.build(
        serviceName="classroom",
        version="v1",
        credentials=credentials)

courses.courseWork.addOnAttachments एंडपॉइंट के लिए, CREATE अनुरोध जारी करें. शिक्षक की चुनी गई हर इमेज के लिए, पहले एक AddOnAttachment ऑब्जेक्ट बनाएं:

Python

यहां दिए गए उदाहरण में, create_attachments तरीके का ही एक उदाहरण है.

# Create a new attachment for each image that was selected.
attachment_count = 0
for key, value in filename_caption_pairs.items():
    attachment_count += 1

    # Create a dictionary with values for the AddOnAttachment object fields.
    attachment = {
        # Specifies the route for a teacher user.
        "teacherViewUri": {
            "uri":
                flask.url_for(
                    "load_content_attachment", _scheme='https', _external=True),
        },
        # Specifies the route for a student user.
        "studentViewUri": {
            "uri":
                flask.url_for(
                    "load_content_attachment", _scheme='https', _external=True)
        },
        # The title of the attachment.
        "title": f"Attachment {attachment_count}",
    }

हर अटैचमेंट के लिए कम से कम teacherViewUri, studentViewUri, और title फ़ील्ड दिए जाने चाहिए. teacherViewUri और studentViewUri उन यूआरएल को दिखाते हैं जो अटैचमेंट को खोलने पर लोड होते हैं.

अनुरोध के मुख्य हिस्से में मौजूद AddOnAttachment ऑब्जेक्ट को सही addOnAttachments एंडपॉइंट पर भेजें. हर अनुरोध के साथ courseId, itemId, itemType, और addOnToken आइडेंटिफ़ायर दें.

Python

यहां दिए गए उदाहरण में, create_attachments तरीके का ही एक उदाहरण है.

# Use the itemType to determine which stream item type the teacher created
match flask.session["itemType"]:
    case "announcements":
        parent = classroom_service.courses().announcements()
    case "courseWorkMaterials":
        parent = classroom_service.courses().courseWorkMaterials()
    case _:
        parent = classroom_service.courses().courseWork()

# Issue a request to create the attachment.
resp = parent.addOnAttachments().create(
    courseId=flask.session["courseId"],
    itemId=flask.session["itemId"],
    addOnToken=flask.session["addOnToken"],
    body=attachment).execute()

अपने लोकल डेटाबेस में इस अटैचमेंट की एंट्री बनाएं, ताकि आप बाद में सही कॉन्टेंट लोड कर सकें. Classroom, बनाए जाने के अनुरोध के जवाब में, id की यूनीक वैल्यू दिखाता है. इसलिए, इसे हमारे डेटाबेस में प्राइमरी कुंजी के तौर पर इस्तेमाल करें. ध्यान दें कि Classroom, Teacher और छात्र/छात्राओं के व्यू खोलते समय, attachmentId क्वेरी पैरामीटर को भी पास करता है:

Python

यहां दिए गए उदाहरण में, create_attachments तरीके का ही एक उदाहरण है.

# Store the value by id.
new_attachment = Attachment(
    # The new attachment's unique ID, returned in the CREATE response.
    attachment_id=resp.get("id"),
    image_filename=key,
    image_caption=value)
db.session.add(new_attachment)
db.session.commit()

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

ऐड-ऑन में मौजूद अटैचमेंट को अनुमति दें

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

इस फ़ील्ड में अपना टॉप लेवल डोमेन देना, सबसे आसान तरीका है, जैसे कि https://example.com. अगर लोकल मशीन का इस्तेमाल वेब सर्वर के तौर पर किया जा रहा है, तो https://localhost:<your port number>/ काम करेगा.

शिक्षक और छात्र/छात्रा व्यू के लिए रूट जोड़ें

चार iframe में, Google Classroom ऐड-ऑन लोड हो सकता है. आपने सिर्फ़ ऐसे रूट बनाए हैं जो अटैचमेंट डिस्कवरी व्यू iframe को इस तरह पेश करते हैं. इसके बाद, शिक्षक और छात्र दृश्य iframe को भी प्रस्तुत करने के लिए रूट जोड़ें.

छात्र-छात्राओं के अनुभव की झलक दिखाने के लिए, टीचर व्यू iframe की ज़रूरत होती है. हालांकि, इसमें अतिरिक्त जानकारी या बदलाव करने की सुविधाएं शामिल की जा सकती हैं.

छात्र-छात्राओं के लिए व्यू, वह पेज है जो हर छात्र/छात्रा को ऐड-ऑन अटैचमेंट खोलने पर दिखता है.

इस अभ्यास के लिए, एक ऐसा /load-content-attachment रूट बनाएं जो Teacher और Student, दोनों को दिखाता हो. Classroom API के तरीकों का इस्तेमाल करके, यह पता लगाएं कि पेज लोड होने पर, उपयोगकर्ता शिक्षक है या छात्र.

Python

हमारे दिए गए उदाहरण में, यह webapp/attachment_routes.py फ़ाइल में है.

@app.route("/load-content-attachment")
def load_content_attachment():
    """
    Load the attachment for the user's role."""

    # Since this is a landing page for the Teacher and Student View iframes, we
    # need to preserve the incoming query parameters.
    if flask.request.args.get("itemId"):
        flask.session["itemId"] = flask.request.args.get("itemId")
    if flask.request.args.get("itemType"):
        flask.session["itemType"] = flask.request.args.get("itemType")
    if flask.request.args.get("courseId"):
        flask.session["courseId"] = flask.request.args.get("courseId")
    if flask.request.args.get("attachmentId"):
        flask.session["attachmentId"] = flask.request.args.get("attachmentId")

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

इसके बाद, आइटम टाइप से मेल खाने वाले getAddOnContext एंडपॉइंट पर अनुरोध भेजें.

Python

यहां दिए गए उदाहरण में, load_content_attachment तरीके का ही एक उदाहरण है.

# Create an instance of the Classroom service.
classroom_service = googleapiclient.discovery.build(
    serviceName="classroom"
    version="v1",
    discoveryServiceUrl=f"https://classroom.googleapis.com/$discovery/rest?labels=ADD_ONS_ALPHA&key={GOOGLE_API_KEY}",
    credentials=credentials)

# Use the itemType to determine which stream item type the teacher created
match flask.session["itemType"]:
    case "announcements":
        parent = classroom_service.courses().announcements()
    case "courseWorkMaterials":
        parent = classroom_service.courses().courseWorkMaterials()
    case _:
        parent = classroom_service.courses().courseWork()

addon_context_response = parent.getAddOnContext(
    courseId=flask.session["courseId"],
    itemId=flask.session["itemId"]).execute()

यह तरीका, क्लास में मौजूदा उपयोगकर्ता की भूमिका के बारे में जानकारी देता है. उपयोगकर्ता को उसकी भूमिका के आधार पर, दिखाई जाने वाले व्यू में बदलाव करना. रिस्पॉन्स ऑब्जेक्ट में, studentContext या teacherContext फ़ील्ड में से कोई एक फ़ील्ड भरा जाता है. इनकी जांच करके पता लगाएं कि लोगों को क्या करना चाहिए.

किसी भी मामले में, attachmentId क्वेरी पैरामीटर वैल्यू का इस्तेमाल करके जानें कि हमारे डेटाबेस से कौनसा अटैचमेंट वापस पाना है. यह क्वेरी पैरामीटर, टीचर या स्टूडेंट व्यू के यूआरआई को खोलते समय उपलब्ध कराया जाता है.

Python

यहां दिए गए उदाहरण में, load_content_attachment तरीके का ही एक उदाहरण है.

# Determine which view we are in by testing the returned context type.
user_context = "student" if addon_context_response.get(
    "studentContext") else "teacher"

# Look up the attachment in the database.
attachment = Attachment.query.get(flask.session["attachmentId"])

# Set the text for the next page depending on the user's role.
message_str = f"I see that you're a {user_context}! "
message_str += (
    f"I've loaded the attachment with ID {attachment.attachment_id}. "
    if user_context == "teacher" else
    "Please enjoy this image of a famous landmark!")

# Show the content with the customized message text.
return flask.render_template(
    "show-content-attachment.html",
    message=message_str,
    image_filename=attachment.image_filename,
    image_caption=attachment.image_caption,
    responses=response_strings)

ऐड-ऑन का परीक्षण करें

अटैचमेंट बनाने की जांच करने के लिए, यह तरीका अपनाएं:

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

Google Classroom में असाइनमेंट बनाने के यूज़र इंटरफ़ेस (यूआई) में आपको एक अटैचमेंट कार्ड दिखेगा. Teacher View iframe खोलने के लिए, कार्ड पर क्लिक करें और पुष्टि करें कि सही अटैचमेंट दिख रहा है. असाइन करें बटन पर क्लिक करें.

छात्र-छात्राओं को मिलने वाले अनुभव की जांच करने के लिए, यह तरीका अपनाएं:

  • इसके बाद, Classroom में साइन इन करें और उसी क्लास के छात्र-छात्राओं के टेस्ट यूज़र के तौर पर साइन करें जिसमें शिक्षक टेस्ट उपयोगकर्ता हैं.
  • 'क्लासवर्क' टैब में टेस्ट असाइनमेंट ढूंढें.
  • असाइनमेंट को बड़ा करें और छात्र-छात्राओं के लिए व्यू वाला iframe खोलने के लिए, अटैचमेंट कार्ड पर क्लिक करें.

पुष्टि करें कि छात्र/छात्रा को सही अटैचमेंट दिख रहा है.

बधाई हो! आप अगले चरण पर जाने के लिए तैयार हैं: गतिविधि-टाइप अटैचमेंट बनाना.