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.
Ö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.
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
veyaPrivate
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 kullanıma sunamaz, aksi takdirde test kullanıcılarınız Classroom eklentileri.
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
vecourses.*.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/
veyahttps://cdn.myedtech.com/
.OAuth izin ekranınızda sağlanan OAuth kapsamlarının aynısını geri dönüp bakarsınız.
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 belirlenir, Taslak Test Kullanıcıları alanına e-posta adresleri ekleyin Taslağı Kaydet'i tıklayı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ükleme
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.
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 yararlanır.
/**
* 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ımları. 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
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.