Classroom eklentisi oluşturma

Bu, Classroom eklentilerindeki ilk adım adım açıklamalı kılavuzdur. size yol gösterir.

Bu adım adım açıklamalı kılavuzda, web uygulaması geliştirmek için zemin hazırlayacak Classroom eklentisi olarak yayınlayabilirsiniz. Gelecekteki adım adım açıklamalı adımlar bu uygulamayı genişlet.

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

• Eklentiniz için yeni bir Google Cloud projesi oluşturun.
• Yer tutucu oturum açma düğmeleriyle iskelet bir web uygulaması oluşturun.
• Eklentiniz için bir Google Workspace Marketplace Mağaza Girişi yayınlayın.

İşiniz bittiğinde eklentinizi yükleyebilir ve Classroom eklentileri iframe'i.

Önemli: Bu adım adım açıklamalı kılavuzlara başvurmadan önce proje yapılandırmasını okuyun rehberine göz atın ve geliştirici yolculuğunun ilk katılım adımlarını tamamlayın. Öde uygulamanın görünürlük ayarına özellikle dikkat etmelisiniz, daha sonra değiştirilmiştir.

Ön koşullar

Uygun ön koşulları görmek için bir dil seçin:

Python

Python örneğimiz, Flask çerçevesini kullanır. Belgenin tamamını kaynak kodunu inceleyin. Bunun kodu bu adım adım açıklamalı kılavuzu /flask/01-basic-app/ dizininde bulabilirsiniz.

Gerekirse Python 3.7+ yükleyin ve pip sürümünün kullanılabilir olduğundan emin olun.

python -m ensurepip --upgrade

Ayrıca yeni bir Python sanal makinesi kurup etkinleştirmenizi öneririz. bahsedeceğim.

python3 -m venv .classroom-addon-env
source .classroom-addon-env/bin/activate

İndirilen örneklerdeki her bir adım adım açıklamalı alt dizin bir requirements.txt Gerekli kitaplıkları hızlı bir şekilde yüklemek için pip Bu uygulama için gerekli kitaplıkları yüklemek amacıyla aşağıdakileri kullanın: adım adım açıklamalı kılavuzu inceleyin.

cd flask/01-basic-app
pip install -r requirements.txt

Node.js

Node.js örneğimiz, Express çerçevesini kullanır. Chrome web sitesini Genel bakış sayfasındaki tüm adım adım açıklamalı kılavuzlar için kaynak kodu tamamlayın.

Gerekirse NodeJS v16.13+ sürümünü yükleyin.

npm kullanarak gerekli düğüm modüllerini yükleyin.

npm install

Java

Java örneğimiz, Spring Boot çerçevesini kullanır. Şunları indirebilirsiniz: Genel bakış sayfasındaki tüm adım adım açıklamalı kılavuzlar için eksiksiz kaynak kodu.

Makinenize henüz yüklemediyseniz Java 11+'yi yükleyin.

Spring Boot uygulamaları, derlemeleri işlemek ve yönetmek için Gradle veya Maven'ı kullanabilir ve bildirmeyi konuştuk. Bu örnekte, Google'ın API'lerini kullanarak bir Maven'in kendisini yüklemenize gerek kalmadan başarılı bir derleme çalıştırıyor.

Sağladığımız örneği çalıştırabilmek için dosyayı indirdiğinizden emin olmak için projeyi indirdiğiniz dizin ön koşullarını göz önünde bulundurmak da önemlidir.

java --version
./mvnw --version

Alternatif olarak Windows'da:

java -version
mvnw.cmd --version

Google Cloud projesi oluşturun

Classroom API'ye ve gerekli kimlik doğrulama yöntemlerine erişim Google Cloud projeleri tarafından kontrol edilir. Aşağıdaki talimatlar size yeni bir proje oluşturmak ve yapılandırmak için gereken minimum adımları ekleyebilirsiniz.

Projeyi oluşturma

Proje oluşturma sayfasını ziyaret ederek yeni bir Google Cloud projesi oluşturun. Şunları yapabilirsiniz: herhangi bir isim verebilirsiniz. Oluştur'u tıklayın.

Yeni projenin tamamen oluşturulması birkaç dakika sürer. Tamamladığınızda projeyi seçtiğinizden emin olun; proje seçiciden bunu seçebilirsiniz açılır menüsünü kullanabilir veya listeden PROJE SEÇ'i bildirimler menüsünü kullanın.

Önemli: Devam etmeden önce doğru projeyi seçtiğinizden emin olun.

Google Workspace Marketplace SDK'sını Google Cloud projesine ekleme

API Kitaplığı tarayıcısına gidin. Şunu ara: Google Workspace Marketplace SDK SDK'yı sonuç.

Google Workspace Marketplace SDK kartını seçip Etkinleştir'i tıklayın.

Google Workspace Marketplace SDK'sını yapılandırma

Google Workspace Marketplace, kullanıcıların ve yöneticileri tarafından yüklenir. Şunu yapılandır: Marketplace SDK'sının Uygulama Yapılandırması ve Mağazası Giriş'i ve OAuth İzin Ekranı'nı inceleyin.

Uygulama Yapılandırması

Marketplace SDK'sının Uygulama Yapılandırması sayfasına gidin. Aşağıdaki bilgileri sağlayın:

• Uygulama Görünürlüğü'nü Public veya Private olarak ayarlayın.

  • Herkese açık ayar, ileride yayınlanacak uygulamalar için tasarlanmıştır. son kullanıcılara sunuyoruz. Herkese açık bir uygulama, kullanıma sunulmadan önce onay sürecinden geçmelidir son kullanıcılara yayınlanır, ancak her şeyi yükleme ve Taslak olarak test edebilirsiniz. Bu, yayın öncesi bir durum olup önce test edip geliştirmenizi öneririz.
  • Gizli ayar, dahili test ve geliştirme için uygundur. CEVAP Özel uygulama yalnızca nasıl oluşturulduğunu göstereceğim. Bu nedenle, görünürlüğü "gizli" olarak ayarlamanız yalnızca proje Google Workspace for Education kullanılan bir alanda oluşturulduysa aboneliği devre dışı bırakabilir. Aksi takdirde, test kullanıcılarınız Classroom eklentileri.
  Uyarı: Öncesinde Uygulama Görünürlüğü ayarınızın doğru olup olmadığını kontrol edin kaydedin. Uygulama Görünürlüğünü ayarladıktan sonra değiştiremezsiniz. Siz farklı bir Uygulama Görünürlüğü ayarlamak için yeni bir Google Cloud projesi oluşturmalısınız.

• istiyorsanız Yükleme Ayarları'nı Admin Only install olarak ayarlayın alan adı yöneticileriyle sınırlı olmasını sağlar.

• Uygulama Entegrasyonu bölümünde, Classroom eklentisi'ni seçin. Artık Güvenli Ek Kurulumu URI'si istenir; bu, kullandığınız URL'dir. kullanıcı eklentinizi açtığında yüklenmeyi bekler. Bu Sözleşme'nin amaçları doğrultusunda, Adım adım açıklamalı kılavuza, https://<your domain>/addon-discovery olmalıdır.

• İzin Verilen Ek URI Ön Ekleri, AddOnAttachment: courses.*.addOnAttachments.create ve courses.*.addOnAttachments.patch yöntemini de kullanabilirsiniz. Doğrulama bir değişmez değerdir dize ön eki eşleşmesidir ve bu aşamada joker karakterlerin kullanılmasına izin verilmez gerekir. İçerik sunucunuzun en azından kök alanını ekleyin. Örneğin: https://localhost:5000/ veya https://cdn.myedtech.com/.

• OAuth izin ekranınızda sağlanan OAuth kapsamlarının aynısını geri dönüp bakarsınız.

  Önemli: Uygulama Yapılandırması'nda belirtilen OAuth kapsamları listesi OAuth izin ekranınızdakilerle eşleşmelidir.

• Geliştirici bölümünün altındaki alanları kuruluşunuza uygun şekilde doldurun Bağlantılar başlıklı makaleyi inceleyin.

Mağaza Girişi

Marketplace SDK'sının Mağaza Girişi sayfasına gidin. Aşağıdaki bilgileri sağlayın:

• Uygulama Ayrıntıları altında bir dil ekleyin veya dil zaten listelenmiştir. Bir Uygulama Adı ve açıklamalar girin; bu eklentinizin Google Workspace Marketplace mağaza girişi sayfasında görünür. Kaydetmek için Bitti'yi tıklayın.
• Eklentiniz için bir Kategori seçin.
• Grafik Öğeleri altında, zorunlu alanlar için resim sağlayın. Bunlar daha sonra değiştirilebilir ve şimdilik yer tutucu olarak kullanılabilir.
• Destek Bağlantıları altında, istenen URL'leri sağlayın. Bunlar, Uygulama Görünürlüğü'nü önceki seçenekte Gizli olarak ayarlarsanız yer tutucular adımına geçelim.

Önceki adımda Uygulama Görünürlüğü'nü Gizli olarak ayarladıysanız PUBLISH; uygulamanız hemen yüklenebilir. Örneğin Uygulama Görünürlüğü Herkese Açık olarak değiştirildi, Taslak Test Kullanıcıları alanına e-posta adresleri ekleyin Taslağı Kaydet'i tıklayın.

Önemli Nokta: Görünürlüğü Herkese Açık olan bir uygulama için YAYINLA seçildiğinde ve Marketplace ekibi tarafından incelenmek üzere hemen gönderilir. İlgili içeriği oluşturmak için kullanılan bir uygulamanın eklenebilmesi için inceleme ekibinin uygulamayı test edip onaylaması gerekir. pazar yeri. Projenin taslaklarını kaydederek inceleme yapılmadan test kullanıcılarınız tarafından yüklenebilir. TASLAĞI YAYINLA'yı seçebilirsiniz hazır olduğunuzda, e-postayı onaylayın.

OAuth İzin Ekranı

OAuth İzin Ekranı, kullanıcılar uygulamanızı ilk kez yetkilendirdiğinde görünür. Komut uygulamanızın kişisel ve hesap bilgilerine erişmesine izin vermek için etkinleştirdiğiniz kapsamlar tarafından belirlenir.

OAuth izin ekranı oluşturma sayfasına gidin. Aşağıdaki bilgileri sağlayın: bilgi:

• User Type (Kullanıcı Türü) seçeneğini External (Harici) olarak ayarlayın. Create'i (Oluştur) tıklayın.
• Sonraki sayfada, gerekli uygulama ayrıntılarını ve iletişim bilgilerini girin. Yetkili Alanlar altında, uygulamanızı barındıran tüm alanları belirtin. Sonraki slayta geçin KAYDET VE DEVAM ET

• Web uygulamanızın gerektirdiği tüm OAuth kapsamlarını ekleyin. Bkz. OAuth yapılandırma kılavuzuna göz atın.

  Google'ın şunları yapması için aşağıdaki kapsamlardan en az birini istemeniz gerekir: login_hint sorgu parametresini gönderebilirsiniz. Bunun daha ayrıntılı bir açıklaması davranışını OAuth yapılandırma kılavuzumuzda bulabilirsiniz:

  • https://www.googleapis.com/auth/userinfo.email (zaten dahil)
  • https://www.googleapis.com/auth/userinfo.profile (zaten dahil)

  Aşağıdaki kapsamlar Classroom eklentilerine özeldir:

  • https://www.googleapis.com/auth/classroom.addons.teacher
  • https://www.googleapis.com/auth/classroom.addons.student

  Uygulamanızın gerektirdiği diğer Google API kapsamlarını da dahil edin yardımcı olur.

  KAYDET VE DEVAM ET'i tıklayın

• Test kullanıcıları sayfasında test hesaplarının e-posta adreslerini listeleyin. KAYDET VE DEVAM ET'i tıklayın

Ayarlarınızın doğru olduğunu onaylayın ve ardından kontrol paneline dönün.

Eklentiyi yükle

Artık eklentinizi şu sayfanın üst kısmındaki bağlantıyı kullanarak yükleyebilirsiniz: Marketplace SDK'sının Mağaza Girişi sayfası. Uygulama URL'yi tıklayın, ardından girişi görmek için sayfanın üst kısmındaki Yükle'yi seçin.

Not: Şu an için yalnızca belirli kullanıcılar eklentiyi yükleyebilir. Eğer eklentiniz herkese açık görünürlüğe sahip. Bunlar yalnızca Taslak olarak listelenen kullanıcılardır Test kullanıcıları. Eklentinizin gizli görünürlüğü varsa bunlar Cloud projesiyle aynı alanda bulunmalıdır.

Temel bir web uygulaması geliştirme

İki rota ile iskelet web uygulaması kurma. Gelecekteki adım adım açıklamalı adımlar Bu uygulamayı genişletin. Şimdilik eklenti için bir açılış sayfası /addon-discovery ve "şirket sitemiz" için bir örnek dizin sayfası /.

Bu iki uç noktayı uygulayın:

• /: Bir karşılama mesajı ve geçerli sekmeyi kapatmak için bir düğme gösterir ve eklenti iframe'i.
• /addon-discovery: Bir karşılama mesajı ve biri kapatmak için olmak üzere iki düğme görüntüler eklenti iframe'i ve diğeri, web sitesini yeni sekmede açmak için kullanılır.

Pencereleri veya iframe'i oluşturmak ve kapatmak için düğmeler eklediğimizi unutmayın. Bu kullanıcıyı güvenli bir şekilde yeni sekmeye yönlendiren bir yöntem gösterebilecek, yetkilendireceğiz.

Yardımcı program komut dosyası oluşturma

Bir static/scripts dizini oluşturun. addon-utils.js adlı yeni bir dosya oluşturun. URL'yi iki işlevden bahsedeceğiz.

/**
 *   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',
  }, '*');
};

Rota oluşturma

/addon-discovery ve / uç noktalarını uygulayın.

Python

Uygulama dizinini kurma

Bu örneğin amacı doğrultusunda, uygulama mantığını Python modülünde bulabilirsiniz. Bu, sağladığımız örnekte webapp dizinidir.

Sunucu modülü için bir dizin oluşturun (ör. webapp). Taşıma static dizininden modül dizinine. template dizini oluşturun ekleyebilirim. burada görünür.

Sunucu modülünü oluşturma*

Modül dizininizde __init__.py dosyasını oluşturun ve aşağıdakini ekleyin beyanlar vardır.

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

Ardından, web uygulamasının rotalarını işlemek için bir dosya oluşturun. Bu webapp/routes.py konusunu ele alalım. Bu iki rotayı uygulayın: dosyası olarak kaydedebilirsiniz.

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

Her iki rotamızın da ilgili URL'ye message değişkeni aktardığını unutmayın Jinja şablonları. Bu, kullanıcının hangi sayfaya ulaştığını belirlemek için yararlıdır.

Yapılandırma oluşturma ve dosyaları başlatma

Uygulamanızın kök dizininde main.py ve config.py oluşturun dosyası olarak da kaydedebilir. config.py ürününde gizli anahtarınızı yapılandırın.

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 dosyanıza, modülünüzü içe aktarın ve Flask sunucusunu başlatın.

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

Rotalar app.js dosyasına aşağıdaki satırlarla kaydedilir.

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 uygulamasını açın ve kodu inceleyin. Bu rota son kullanıcı şirket web sitesini ziyaret ettiğinde ulaşılır. Rota yanıtı index Gidiş Çubukları şablonunu kullanarak alır ve şablonu title ve message değişkenleri içeren veri nesnesi.

router.get('/', function (req, res, next) {
  res.render('index', {
    title: 'Education Technology',
    message: 'Welcome to our website!'
  });
});

/01-basic-app/routes/classroom-addon.js. ikinci rotayı açıp inceleyin kod. Bu rota, son kullanıcı ziyareti eklenti olduğunda ulaşılır. Bildirim Bu rotada discovery Gidon Çubuğu şablonunu ve ek olarak Sayfayı şirketten farklı bir şekilde oluşturmak için addon.hbs düzenini kullanma web sitesi.

router.get('/', function (req, res, next) {
  res.render('discovery', {
    layout: 'addon.hbs',
    title: 'Education Technology Classroom add-on',
    message: `Welcome.`
  });
});

Java

Java kodu örneği, sıralı kılavuzu paketlemek için modüller kullanır adım. Bu ilk adım adım açıklamalı ilk kılavuz olduğundan, kod step_01_basic_app modülünü kullanabilirsiniz. bu şirketle aynı geliştirmeleri projeleri kapatma sürecine tek bir proje üzerine oluşturmanızı öneririz. takip edin.

Bu örnek projede Controller.java adlı denetleyici sınıfı oluşturarak şunları yapabilirsiniz: uç noktaları tanımlayın. Bu dosyada, @GetMapping ek açıklamasını şuradan içe aktarın: spring-boot-starter-web bağımlılığı.

import org.springframework.web.bind.annotation.GetMapping;

Sınıfın üzerine Spring çerçevesi denetleyicisi ek açıklamasını ekle kodunu ekleyin.

@org.springframework.stereotype.Controller
public class Controller {

Ardından bu iki yolu ve hata işlemeye yönelik ek bir yolu uygulayın.

/** 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";
}

Eklentiyi test etme

Önemli: Uygulamanızı doğrudan bir web tarayıcısı kullanarak test edebilirsiniz öncelikle Classroom eklentileri iframe'lerinde test etmesi gerekir. Yükleniyor web uygulamanızın bir iframe'e yerleştirilmesi bazı olağandışı davranışlara neden olabilir. iframe'i inceleyin ve sorgu parametreleri kılavuz sayfasında bulabilirsiniz. Tümü bu adım adım açıklamalı kılavuzdaki talimatlarda, eklentinin emin olun.

Sunucunuzu başlatın. Ardından, kişisel hesabınızla Google Classroom'da oturum açın Öğretmen test kullanıcıları. Sınıf Çalışmaları sekmesine giderek yeni bir sekme oluşturun Devir. Eklentiler seçiciden eklentinizi seçin. iframe açılır Eklenti, Marketplace SDK'sının Uygulama Yapılandırması sayfası

Tebrikler! Sonraki adıma geçmeye hazırsınız: Kullanıcıların oturum açma Google TOA ile iletişim kurun.