İçerik türü ekler

Bu, Classroom eklentilerindeki adım adım açıklamalı dördüncü adımdır. size yol gösterir.

Bu adım adım açıklamalı kılavuzda, Google Classroom API ile etkileşime geçerek ekler. Kullanıcıların ek içeriğini görüntülemeleri için rotalar sağlarsınız. İlgili içeriği oluşturmak için kullanılan görünümleri, kullanıcının sınıftaki rolüne göre farklılık gösterir. Bu adım adım açıklamalı kılavuzda Öğrencinin göndermesi gerekmeyen içerik türü ekler.

Bu adım adım açıklamalı kılavuz kapsamında aşağıdaki işlemleri tamamlayacaksınız:

  • Aşağıdaki eklenti sorgu parametrelerini alın ve kullanın:
    • addOnToken: Ek Keşfi'ne iletilen bir yetkilendirme jetonu Görüntüleme.
    • itemId: CourseWork, CourseWorkMaterial veya Eklenti ekini alan duyuru.
    • itemType: Ya "courseWork", "courseWorkMaterials" arasında veya "duyuru".
    • courseId: Şu konumdaki Google Classroom dersi için benzersiz bir tanımlayıcı: ödevin oluşturulmakta olduğunu gösterir.
    • attachmentId: Google Classroom tarafından eklenti ekini oluşturmanız gerekir.
  • İçerik türündeki ekler için kalıcı depolama alanı uygulayın.
  • Ek oluşturmak, Öğretmen Görünümü ve Öğrenci Görünümü iframe'leri.
  • Google Classroom eklentileri API'sine aşağıdaki istekleri gönderin:
    • Yeni bir ek oluşturun.
    • Eklenti bağlamını alın. Bu bağlam, giriş yapan kullanıcının öğrenci veya öğretmen.

Ödevleri tamamladıktan sonra, Öğretmen olarak giriş yapıldığında Google Classroom kullanıcı arayüzü. Şuradaki öğretmenler ve öğrenciler: Böylece sınıf, içeriği görüntüleyebilir.

Classroom API'yi etkinleştirme

Bu adımdan başlayarak Classroom API'ye çağrı yapın. API, çağrı yapmadan önce Google Cloud projeniz için etkinleştirilmiş olmalıdır. Rota izle Classroom API kitaplık girişine gidip Etkinleştir'i seçin.

Ek Bulma Görünümü sorgu parametrelerini işleme

Daha önce de belirtildiği gibi, Google Classroom, aşağıdaki durumlarda sorgu parametrelerini iletir: iframe'de Ek Bulma Görünümü yükleniyor:

  • courseId: Geçerli Classroom dersinin kimliği.
  • itemId: CourseWork, CourseWorkMaterial veya Eklenti ekini alan duyuru.
  • itemType: Ya "courseWork", "courseWorkMaterials" arasında veya "duyuru".
  • addOnToken: Belirli bilgileri yetkilendirmek için kullanılan jeton Classroom eklentisi işlemleri.
  • login_hint: Geçerli kullanıcının Google kimliği.

Bu adım adım açıklamalı kılavuzda courseId, itemId, itemType ve addOnToken ele alınmaktadır. Classroom API'ye çağrı yayınlarken bunları saklayın ve iletin.

Önceki adım adım açıklamalı kılavuz adımında olduğu gibi, iletilen sorgu parametresi değerlerini bahsedeceğiz. Bunu, Ek Keşif Görünümü yalnızca ve bu sayede Classroom'un geliştirebileceği tek fırsat olduğu için, bu sorgu parametrelerini iletmenizi öneririz.

Python

Ek için rotaları sağlayan Flask sunucusu dosyanıza gidin. Keşif Görünümü (attachment-discovery-routes.py verilen örnek üzerinden) inceleyin. Eklenti açılış rotanızın üst kısmında (sağladığımız örneğimizde /classroom-addon) kullanarak, courseId, itemId, itemType ve addOnToken sorgu parametreleri.

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

Bu değerleri yalnızca varsa oturuma yazın. değil Kullanıcı Ek Bulma Görünümü'ne dönerse tekrar iletir izlemelerini sağlar.

İçerik türü ekler için kalıcı depolama alanı ekleme

Oluşturulan eklerin yerel kaydına ihtiyacınız vardır. Bu şekilde, aradığınız tarafından sağlanan tanımlayıcıları kullanarak öğretmenin seçtiği içerik Classroom.

Attachment için veritabanı şeması oluşturun. Sağladığımız örneğimizde bir resim ve başlık gösteren ekler. Attachment, şu özellikleri kullanın:

  • attachment_id: Eklerin benzersiz tanımlayıcısıdır. Atayan: Classroom ve ekleyebilirsiniz.
  • image_filename: Görüntülenecek resmin yerel dosya adı.
  • image_caption: Resimle birlikte gösterilecek başlıktır.
ziyaret edin.

Python

Önceki adımlarda açıklanan SQLite ve flask_sqlalchemy uygulamasını genişletin.

Kullanıcı tablonuzu tanımladığınız dosyaya gidin (models.py (verdiğimiz örneği takip etmeniz durumunda) ekleyebilirsiniz. Aşağıdakileri sayfanın alt kısmına ekleyin User sınıfının altındaki bir dosyadır.

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

Yeni Ek sınıfını ekinizle birlikte sunucu dosyasına aktarın göz atabilirsiniz.

Yeni rotalar oluşturun

Uygulamamızda yeni sayfalar oluşturarak bu adım adım açıklamalı kılavuza başlayın. Bunlar, kullanıcıların eklentimiz aracılığıyla içerik oluşturmasına ve görüntülemesine olanak tanır.

Ek oluşturma rotası ekleme

Öğretmenin içerik seçebileceği ve ek oluşturabileceği sayfalara ihtiyacınız var kabul edersiniz. İçerik seçeneklerini görüntülemek için /attachment-options rotasını uygulayın öğretmenin seçmesi için bir fırsattır. Ayrıca içerik seçimi için şablonlara ihtiyacınız vardır ve oluşturma onayı sayfaları. Sağladığımız örnekler, bunlar için şablonlar içerir. Ayrıca, web seminerinden istekleri ve yanıtları da Classroom API.

Alternatif olarak, mevcut Ek Keşif Görünümünüzü de değiştirebilirsiniz. açılış sayfasında yeni bir içerik oluşturmak yerine içerik seçeneklerini /attachment-options sayfa. Şu amaçlar için yeni bir sayfa oluşturmanızı öneririz: bu alıştırmayı kullanabilirsiniz, böylece saniye adım adım açıklamalı adım (ör. uygulama izinlerinin iptali). Bunlar, projenin ve test ederken işinize yarayacaktır.

Öğretmen, sağladığımız resimli küçük resimler arasından seçim yapabilir. örneğine bakalım. Ünlü önemli noktaların başlıklarını gösteren dört resim türetilir.

Python

Sağlanan örneğimizde bu, webapp/attachment_routes.py dosyasındadır.

@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,
    )

Bu komut "Ek Oluştur" oluşturur. aşağıdakine benzeyen bir sayfa görürsünüz:

Python örnek içerik seçimi görünümü

Öğretmen birden fazla resim seçebilir. Her resim için bir ek oluşturun öğretmenin create_attachments yönteminde seçtiği verilerdir.

Ek oluşturma isteklerinde sorun

Artık öğretmenin hangi içerik parçalarını eklemek istediğini bildiğinize göre şurada eklerin oluşturulması için Classroom API'ye yönelik istekte bulunma atama. Bu dosyayı aldıktan sonra ek ayrıntılarını veritabanınızda depolayın Classroom API'sinden yanıt alabilir.

Classroom hizmetinin bir örneğini alarak başlayın:

Python

Sağlanan örneğimizde bu, webapp/attachment_routes.py dosyasındadır.

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 için bir CREATE isteği gönderin uç nokta. Öğretmen tarafından seçilen her resim için önce bir AddOnAttachment nesne:

Python

Sağladığımız örneğimizde bu, create_attachments öğesinin devamıdır. yöntemidir.

# 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}",
    }

En azından teacherViewUri, studentViewUri ve title alanları şu özelliklere sahip olmalıdır: sağlanır. teacherViewUri ve studentViewUri temsil eder. Burada, ek, ilgili kullanıcı türünü seçin.

İsteğin gövdesindeki AddOnAttachment nesnesini uygun reklamcıya gönderin addOnAttachments uç nokta. courseId, itemId, itemType ve Her istekte addOnToken tanımlayıcı.

Python

Sağladığımız örneğimizde bu, create_attachments öğesinin devamıdır. yöntemidir.

# 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()

Daha sonra yapabilmek amacıyla bu ek için yerel veritabanınızda bir giriş oluşturun. doğru içeriği yükleyin. Classroom benzersiz bir id değeri döndürür. oluşturma isteğine yanıt olarak kullanın. Bu nedenle, Ayrıca Classroom'un attachmentId notlarını da onayladığını unutmayın. Öğretmen ve Öğrenci Görünümlerini açarken sorgu parametresi:

Python

Sağladığımız örneğimizde bu, create_attachments öğesinin devamıdır. yöntemidir.

# 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()

Bu noktada kullanıcıyı bir onay sayfasına yönlendirmeyi düşünün. eklerini başarılı bir şekilde oluşturduklarını belirtmelidir.

Eklentinizden eklere izin verin

Şu an uygun adresleri İzin Verilen Ek'e eklemenin tam zamanı Google Workspace Marketplace SDK'sının Uygulama Yapılandırması'ndaki URI Önekleri alanı sayfasını ziyaret edin. Eklentiniz yalnızca URI ön eklerinin birinden ek oluşturabilir bu sayfada listeleniyor. Bu, olası satışları azaltmaya yardımcı olan bir güvenlik önlemidir ortadaki adam saldırılarından bahsetmiştik.

En basit yaklaşım, URL'nizin üst düzey alanını belirtmek için bu alanda örnek https://example.com. https://localhost:<your port number>/ web sunucusu olarak yerel makinenizi kullanıyorsanız çalışır.

Öğretmen ve Öğrenci Görünümleri için rota ekleme

Google Classroom eklentilerinin yüklenebileceği dört iframe vardır. Yalnızca Ek Keşif Görünümü iframe'ini sunan rotalar oluşturdunuz fark ettim. Ardından, Öğretmen ve Öğrenci Görünümü iframe'lerini de sunmak için rota ekleyin.

Öğrencinin önizlemesini göstermek için Öğretmen Görünümü iframe'i gereklidir bilgi verebilir ancak dilerseniz ek bilgi veya düzenleme ekleyebilir özellikleri.

Öğrenci Görünümü, öğrenciler sayfasını açtıklarında açılan sayfadır. e-posta gönderebilirsiniz.

Bu alıştırma için tek bir /load-content-attachment oluşturun hem Öğretmen hem de Öğrenci Görünümüne hizmet veren rotadır. Classroom API'yi kullanma Sayfa açıldığında kullanıcının öğretmen mi yoksa öğrenci mi olduğunu yükler.

Python

Sağlanan örneğimizde bu, webapp/attachment_routes.py dosyasındadır.

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

Bu noktada kullanıcının kimliğini de doğrulamanız gerektiğini unutmayın. Siz buradaki login_hint sorgu parametresini de işlemeli ve kullanıcıyı gerektiği durumlarda otomatik olarak onaylayabilirsiniz. Bahsedilen giriş kılavuzu ayrıntılarına göz atın. inceleyin.

Ardından, öğeyle eşleşen getAddOnContext uç noktasına bir istek gönderin türü.

Python

Sağladığımız örneğimizde bu, load_content_attachment yöntemini çağırın.

# Create an instance of the Classroom service.
classroom_service = googleapiclient.discovery.build(
    serviceName="classroom"
    version="v1",
    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()

Bu yöntem, geçerli kullanıcının sınıftaki rolüyle ilgili bilgileri döndürür. Kullanıcıya sunulan görünümü, rolüne bağlı olarak değiştirin. Tam olarak Yanıtta studentContext veya teacherContext alanları doldurulur nesne kullanarak gönderin. Kullanıcıya nasıl hitap edeceğinizi belirlemek için bunları inceleyin.

Her durumda, attachmentId sorgu parametresi değerini kullanarak hangi e-posta ekleyeceğimizden emin olabilirsiniz. Bu sorgu parametresi, Öğretmen veya Öğrenci Görünümü URI'lerini açın.

Python

Sağladığımız örneğimizde bu, load_content_attachment yöntemini çağırın.

# 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)

Eklentiyi test etme

Ek oluşturmayı test etmek için aşağıdaki adımları uygulayın:

  • [Google Classroom]'da oturum açın ve Öğretmen test kullanıcıları.
  • Sınıf Çalışmaları sekmesine gidin ve yeni bir Ödev oluşturun.
  • Metin alanının altındaki Eklentiler düğmesini tıklayın ve ardından eklentinizi seçin. iframe açılır ve eklenti, yüklediğiniz Ek Kurulumu URI'sını Google Workspace Marketplace SDK'sının Uygulama Yapılandırması sayfasında belirtilir.
  • Ödeve eklemek istediğiniz içeriği seçin.
  • Ek oluşturma akışı tamamlandıktan sonra iframe'i kapatın.

Google'daki ödev oluşturma kullanıcı arayüzünde bir ek kartı göreceksiniz. Google Classroom Öğretmen Görünümü iframe'ini açmak için kartı tıklayın ve onaylayın emin olun. Ata düğmesini tıklayın.

Öğrenci deneyimini test etmek için aşağıdaki adımları tamamlayın:

  • Ardından, aynı sınıfını kullanarak öğretmen test kullanıcısı olarak kabul edin.
  • Sınıf Çalışmaları sekmesinde test ödevini bulun.
  • Ödevi genişletin ve ek kartını tıklayarak Öğrenci Görünümü'nü açın. iframe'dir.

Öğrenci için doğru ekin görüntülendiğini onaylayın.

Tebrikler! Sonraki adıma geçmeye hazırsınız: etkinlik türündeki ekler'de de bulabilirsiniz.