Dies ist die erste Schritt-für-Schritt-Anleitung für Classroom-Add-ons Schritt-für-Schritt-Anleitung.
In dieser Schritt-für-Schritt-Anleitung legen Sie den Grundstein für die Entwicklung einer Webanwendung als Classroom-Add-on veröffentlichen. Zukünftige Schritt-für-Schritt-Anleitung um diese App zu maximieren.
Im Verlauf dieser Schritt-für-Schritt-Anleitung führen Sie folgende Schritte aus:
- Erstellen Sie ein neues Google Cloud-Projekt für Ihr Add-on.
- Gerüstbasierte Web-App mit Platzhalterschaltflächen für die Anmeldung erstellen.
- Veröffentlichen Sie einen Google Workspace Marketplace-Store-Eintrag für Ihr Add-on.
Anschließend können Sie das Add-on installieren und in den iFrame für Classroom-Add-ons.
Vorbereitung
Wählen Sie eine Sprache aus, um die entsprechenden Voraussetzungen zu sehen:
Python
In unserem Python-Beispiel wird das Flask-Framework verwendet. Sie können die komplette
Quellcode für alle Schritt-für-Schritt-Anleitungen auf der Übersichtsseite zu finden. Der Code für diese
finden Sie im Verzeichnis /flask/01-basic-app/
.
Installieren Sie bei Bedarf Python 3.7+ und achten Sie darauf, dass pip
verfügbar ist.
python -m ensurepip --upgrade
Wir empfehlen Ihnen auch, eine neue virtuelle Python-Instanz einzurichten und zu aktivieren. zu verbessern.
python3 -m venv .classroom-addon-env
source .classroom-addon-env/bin/activate
Jedes Schritt-für-Schritt-Unterverzeichnis in den heruntergeladenen Beispielen enthält ein
requirements.txt
Sie können die erforderlichen Bibliotheken schnell mit
pip
Mit dem folgenden Befehl können Sie die erforderlichen Bibliotheken installieren:
Schritt-für-Schritt-Anleitung.
cd flask/01-basic-app
pip install -r requirements.txt
Node.js
In unserem Node.js-Beispiel wird das Express-Framework verwendet. Sie können die vollständigen Quellcode für alle Schritt-für-Schritt-Anleitungen auf der Übersichtsseite.
Installieren Sie bei Bedarf NodeJS Version 16.13 oder höher.
Installieren Sie die erforderlichen Knotenmodule mit npm
.
npm install
Java
In unserem Java-Beispiel wird das Spring Boot-Framework verwendet. Du kannst Folgendes herunterladen: Den vollständigen Quellcode für alle Schritt-für-Schritt-Anleitungen auf der Übersichtsseite
Installieren Sie Java 11 oder höher, falls dies noch nicht auf Ihrem Computer installiert ist.
Spring Boot-Anwendungen können Gradle oder Maven nutzen, um Builds zu verarbeiten und Abhängigkeiten. Dieses Beispiel enthält den Maven-Wrapper, der dafür sorgt, ohne dass Maven installiert werden muss.
Um das bereitgestellte Beispiel ausführen zu können, führen Sie die folgenden Befehle im in das Sie das Projekt heruntergeladen haben, um sicherzustellen, um das Projekt auszuführen.
java --version
./mvnw --version
Auf Windows:
java -version
mvnw.cmd --version
Google Cloud-Projekt einrichten
Zugriff auf die Classroom API und die erforderlichen Authentifizierungsmethoden von Google Cloud-Projekten gesteuert. Die folgende Anleitung führt Sie durch die die minimalen Schritte zum Erstellen und Konfigurieren eines neuen Projekts zur Verwendung mit Ihrem Add-on.
Projekt erstellen
Erstellen Sie ein neues Google Cloud-Projekt. Rufen Sie dazu die Seite zur Projekterstellung auf. Sie können einen beliebigen Namen für das neue Projekt ein. Klicken Sie auf Erstellen.
Es dauert einen Moment, bis das neue Projekt vollständig erstellt ist. Wenn Sie fertig sind, Wählen Sie das Projekt aus. können Sie es in der Projektauswahl Drop-down-Menü oben auf dem Bildschirm ein oder klicken Sie im Menü Projekt auswählen Benachrichtigungen.
Google Workspace Marketplace SDK an das Google Cloud-Projekt anhängen
Rufen Sie den Browser der API-Bibliothek auf. Suchen nach
Google Workspace Marketplace SDK
Das SDK sollte in der Liste der
Ergebnisse.
Wählen Sie die Google Workspace Marketplace SDK-Karte aus und klicken Sie auf Aktivieren.
Google Workspace Marketplace SDK konfigurieren
Im Google Workspace Marketplace sehen Sie, über welche Nutzer und Administratoren das Add-on installieren. Konfigurieren Sie die App-Konfiguration und Speicher des Marketplace SDK Liste und den OAuth-Zustimmungsbildschirm an, um fortzufahren.
Anwendungskonfiguration
Rufen Sie im Marketplace SDK die Seite App-Konfiguration auf. Gib folgende Informationen an:
Legen Sie die Sichtbarkeit der App auf
Public
oderPrivate
fest.- Die öffentliche Einstellung ist für Apps vorgesehen, die erst später veröffentlicht werden. für die Endanwendenden. Eine öffentliche App muss einen Genehmigungsprozess durchlaufen, bevor sie für Endnutzer veröffentlicht. Sie können aber auch Nutzer angeben, und testen Sie es als Entwurf. Dies ist ein Status vor der Veröffentlichung, der um Ihr Add-on zu testen und zu entwickeln, bevor Sie es zur Genehmigung einreichen.
- Die Einstellung „Privat“ eignet sich für interne Tests und die Entwicklung. A Die private App kann nur von Nutzern in derselben Domain installiert werden wie die Projekt erstellt wurde. Legen Sie daher die Sichtbarkeit auf „Privat“ fest. nur, wenn das Projekt in einer Domain mit einem Google Workspace for Education-Konto erstellt wurde. Abo. Andernfalls können die Testnutzer Add-ons für Classroom.
Legen Sie die Installationseinstellungen auf
Admin Only install
fest, wenn Sie die Installation auf Domainadministratoren beschränken.Wählen Sie unter App-Integration die Option Classroom-Add-on aus. Sie sind Sie werden zur Eingabe des URI für die Einrichtung des Anhangs secure aufgefordert. Dies ist die URL, die Sie geladen werden, wenn ein Nutzer Ihr Add-on öffnet. Für die Zwecke dieser Schritt-für-Schritt-Anleitung ansehen, sollte dies
https://<your domain>/addon-discovery
sein.Die zulässigen URI-Präfixe für Anhänge werden verwendet, um die URIs zu validieren, die in
AddOnAttachment
mitcourses.*.addOnAttachments.create
und demcourses.*.addOnAttachments.patch
-Methoden. Die Validierung ist ein Literal Stringpräfix übereinstimmt. Die Verwendung von Platzhaltern ist hier nicht möglich. . Fügen Sie mindestens die Stammdomain Ihres Content Servers hinzu, z. B.https://localhost:5000/
oderhttps://cdn.myedtech.com/
.Fügen Sie dieselben OAuth-Bereiche wie in Ihrem OAuth-Zustimmungsbildschirm aus dem vorherigen Schritt.
Füllen Sie die für Ihre Organisation entsprechenden Felder unter Entwickler aus. Links:
Store-Eintrag
Gehen Sie im Marketplace SDK zur Seite Store-Eintrag. Gib folgende Informationen an:
- Fügen Sie unter App-Details eine Sprache hinzu oder maximieren Sie das Drop-down-Menü neben dem Sprache ist bereits aufgeführt. Geben Sie einen Namen und Beschreibungen für die Anwendung an. diese werden auf der Seite des Store-Eintrags im Google Workspace Marketplace Ihres Add-ons angezeigt. Klicken Sie zum Speichern auf Fertig.
- Wählen Sie eine Kategorie für das Add-on aus.
- Stellen Sie unter Grafikinhalte Bilder für die Pflichtfelder bereit. Diese können später geändert werden und vorerst Platzhalter sein.
- Geben Sie unter Supportlinks die erforderlichen URLs an. Diese können Platzhalter, wenn Sie die Sichtbarkeit der App im vorherigen Schritt auf Privat Schritt.
Wenn Sie die Sichtbarkeit der App im vorherigen Schritt auf Privat gesetzt haben, klicken Sie auf VERÖFFENTLICHEN; kann Ihre App sofort installiert werden. Wenn Sie die App-Sichtbarkeit auf Öffentlich, fügen Sie im Bereich Entwurftester E-Mail-Adressen hinzu. für die Testnutzer und klicken Sie auf Entwurf speichern.
OAuth-Zustimmungsbildschirm
Der OAuth-Zustimmungsbildschirm wird angezeigt, wenn Nutzer Ihre App zum ersten Mal autorisieren. Sie werden aufgefordert, damit Ihre App auf ihre personenbezogenen Daten und Kontoinformationen zugreifen kann, die durch die aktivierten Bereiche vorgegeben werden.
Rufen Sie die Seite zum Erstellen des OAuth-Zustimmungsbildschirms auf. Geben Sie Folgendes an: Informationen:
- Setzen Sie Nutzertyp auf Extern. Klicken Sie auf Erstellen.
- Geben Sie auf der nächsten Seite die erforderlichen App-Details und Kontaktdaten an. Geben Sie unter Autorisierte Domains alle Domains an, auf denen Ihre Anwendung gehostet wird. Klicken Sie auf SPEICHERN UND FORTFAHREN
Fügen Sie alle OAuth-Bereiche hinzu, die für Ihre Webanwendung erforderlich sind. In der Dokumentation OAuth Konfigurationsanleitung finden Sie eine ausführliche Erläuterung der Bereiche und ihres Zwecks.
Sie müssen mindestens einen der folgenden Bereiche anfordern, damit Google
login_hint
-Abfrageparameter senden. Eine genauere Erklärung Informationen zum Verhalten finden Sie in unserem OAuth-Konfigurationsleitfaden:https://www.googleapis.com/auth/userinfo.email
(bereits eingeschlossen)https://www.googleapis.com/auth/userinfo.profile
(bereits eingeschlossen)
Die folgenden Bereiche gelten nur für Classroom-Add-ons:
https://www.googleapis.com/auth/classroom.addons.teacher
https://www.googleapis.com/auth/classroom.addons.student
Schließen Sie auch alle anderen Google API-Bereiche ein, die Ihre App vom Ende der Nutzenden.
Klicken Sie auf SPEICHERN UND FORTFAHREN.
Listen Sie die E-Mail-Adressen aller Testkonten auf der Seite Testnutzer auf. Klicken Sie auf SPEICHERN UND FORTFAHREN.
Bestätigen Sie, dass Ihre Einstellungen korrekt sind, und kehren Sie dann zum Dashboard zurück.
Add-on installieren
Sie können das Add-on jetzt über den Link oben auf der Seite Store-Eintrag des Marketplace SDK aufrufen. Klicken Sie auf die App URL oben auf der Seite, um den Eintrag zu sehen, und wählen Sie dann Installieren aus.
Einfache Webanwendung erstellen
Gebaute Webanwendung mit zwei Routen einrichten Zukünftige Schritt-für-Schritt-Anleitung
um diese Anwendung zu erweitern. Erstellen Sie zunächst nur eine Landingpage für das Add-on.
/addon-discovery
und die simulierte Indexseite /
für unsere „Unternehmenswebsite“.
Implementieren Sie diese beiden Endpunkte:
/
: Es werden eine Willkommensnachricht und eine Schaltfläche zum Schließen des aktuellen Tabs angezeigt. und den iFrame des Add-ons./addon-discovery
: Zeigt eine Willkommensnachricht und zwei Schaltflächen an: eine zum Schließen den iFrame des Add-ons und einen zum Öffnen einer Website in einem neuen Tab.
Beachten Sie, dass wir Schaltflächen zum Erstellen und Schließen von Fenstern oder dem iFrame hinzufügen. Diese eine Methode aufzeigen, wie Nutzende sicher in einen neuen Tab für erhalten Sie in der nächsten Schritt-für-Schritt-Anleitung.
Dienstprogrammskript erstellen
Erstellen Sie ein static/scripts
-Verzeichnis. Erstellen Sie eine neue Datei addon-utils.js
. Fügen Sie den
Funktionen folgen.
/**
* 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',
}, '*');
};
Routen erstellen
Implementieren Sie die Endpunkte /addon-discovery
und /
.
Python
Anwendungsverzeichnis einrichten
Strukturieren Sie für dieses Beispiel die Anwendungslogik als
Python-Modul. In unserem Beispiel ist dies das Verzeichnis webapp
.
Erstellen Sie ein Verzeichnis für das Servermodul, z. B. webapp
. Verschieben Sie die
static
in das Modulverzeichnis. template
-Verzeichnis erstellen
auch im Modulverzeichnis. Ihre HTML-Dateien hier ablegen.
Servermodul erstellen*
Erstellen Sie die Datei __init__.py
in Ihrem Modulverzeichnis und fügen Sie Folgendes hinzu:
Importe und Deklarationen.
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
Erstellen Sie dann eine Datei, um die Routen der Webanwendung zu verarbeiten. Dies ist
webapp/routes.py
in unserem Beispiel. Implementieren Sie die beiden Routen in diesem
-Datei.
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.")
Beachten Sie, dass unsere Routen beide eine message
-Variable an ihre jeweilige
Jinja-Vorlagen. Damit lässt sich ermitteln, auf welche Seite der Nutzer gelangt ist.
Konfigurationsdateien erstellen und starten
Erstellen Sie im Stammverzeichnis Ihrer Anwendung main.py
und config.py
.
Dateien. Konfigurieren Sie Ihren geheimen Schlüssel in config.py
.
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."
Importieren Sie das Modul in die Datei main.py
und starten Sie den Flask-Server.
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
Routen werden in der Datei app.js
mit den folgenden Zeilen registriert.
const websiteRouter = require('./routes/index');
const addonRouter = require('./routes/classroom-addon');
app.use('/', websiteRouter);
app.use('/addon-discovery', addonRouter);
Öffnen Sie /01-basic-app/routes/index.js
und prüfen Sie den Code. Diese Route ist
erreicht werden, wenn der Endnutzer die Unternehmenswebsite besucht. Die Route rendert eine
Antwort mit der index
-Handlebars-Vorlage und übergibt die Vorlage
Datenobjekt, das die Variablen title
und message
enthält.
router.get('/', function (req, res, next) {
res.render('index', {
title: 'Education Technology',
message: 'Welcome to our website!'
});
});
Zweite Route /01-basic-app/routes/classroom-addon.js
öffnen und prüfen
den Code. Diese Route wird erreicht, wenn der Endnutzer das Add-on aufruft. Hinweis
dass diese Route die discovery
-Handlebars-Vorlage verwendet und zusätzlich
Das addon.hbs
-Layout, um die Seite anders als das Unternehmen zu rendern
Website.
router.get('/', function (req, res, next) {
res.render('discovery', {
layout: 'addon.hbs',
title: 'Education Technology Classroom add-on',
message: `Welcome.`
});
});
Java
Im Java-Codebeispiel werden Module verwendet, um die sequenzielle Schritt-für-Schritt-Anleitung zu verpacken.
Schritte. Da dies die erste Schritt-für-Schritt-Anleitung ist, befindet sich der Code unter dem
Modul step_01_basic_app
. wird nicht erwartet, dass Sie Ihre
mithilfe von Modulen, sollten Sie auf einem einzigen Projekt
wenn Sie die einzelnen Schritte
in der Schritt-für-Schritt-Anleitung ausführen.
Erstellen Sie die Controllerklasse Controller.java
in diesem Beispielprojekt, um
die Endpunkte definieren. Importieren Sie in dieser Datei die Annotation @GetMapping
aus
Die spring-boot-starter-web
-Abhängigkeit.
import org.springframework.web.bind.annotation.GetMapping;
Fügen Sie die Annotation „Spring Framework Controller“ oberhalb der Klasse ein Definition des Zwecks der Klasse.
@org.springframework.stereotype.Controller
public class Controller {
Implementieren Sie dann die beiden Routen und eine zusätzliche Route für die Fehlerbehandlung.
/** 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";
}
Add-on testen
Starten Sie den Server. Dann melden Sie sich als eins in Google Classroom an Ihrer Nutzer von Lehrkräften Gehen Sie zum Tab Kursaufgaben und erstellen Sie einen neuen Kurs. Übertragung. Wählen Sie das Add-on in der Auswahl Add-ons aus. Der iFrame öffnet sich und das Add-on lädt den Einrichtungs-URI für Anhänge, den Sie in den Seite App-Konfiguration des Marketplace SDK
Glückwunsch! Sie können nun mit dem nächsten Schritt fortfahren: Nutzer anmelden mit der Einmalanmeldung (SSO) von Google.