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.
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:
Öğ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.