Classroom-Add-on erstellen

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 sie 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.

Wichtig: Lesen Sie vor dem Ausführen dieser Schritt-für-Schritt-Anleitungen die Projektkonfiguration und führen Sie die Onboarding-Schritte für Entwickler aus. Bezahlen auf die Sichtbarkeitseinstellung der Anwendung achten, geändert.

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.

Wichtig: Achten Sie darauf, dass Sie das richtige Projekt ausgewählt haben, bevor Sie fortfahren.

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 oder Private 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.
  Warnung: Prüfen Sie vor dem Speichern, ob die Einstellung für die Sichtbarkeit von Apps korrekt ist. wird gespeichert. Du kannst die Sichtbarkeit der App nicht mehr ändern, nachdem sie festgelegt wurde. Ich muss ein neues Google Cloud-Projekt erstellen, um eine andere App-Sichtbarkeit festzulegen.

• 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 mit courses.*.addOnAttachments.create und dem courses.*.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/ oder https://cdn.myedtech.com/.

• Fügen Sie dieselben OAuth-Bereiche wie in Ihrem OAuth-Zustimmungsbildschirm aus dem vorherigen Schritt.

  Wichtig: Die in der App-Konfiguration angegebene Liste der OAuth-Bereiche muss mit denen auf Ihrem OAuth-Zustimmungsbildschirm übereinstimmen.

• 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 PUBLISH; 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.

Wichtig: Wenn Sie für eine App mit Sichtbarkeit VERÖFFENTLICHEN auswählen, und sofort zur Überprüfung an das Marketplace-Team. Die muss das Prüfteam die App testen und genehmigen, bevor sie zum Marktplatz. Speichere Entwürfe des Projekts, die von Testnutzern ohne Prüfung installiert werden können. Sie können VERÖFFENTLICHEN ENTWURF auswählen. wenn Sie bereit sind, damit das Marketplace-Team genehmigen.

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.

Hinweis :Das Add-on kann derzeit nur von bestimmten Nutzern installiert werden. Wenn die Sichtbarkeit Ihres Add-ons öffentlich hat, sind diese Nutzer nur als Entwurf aufgeführt Tester: Wenn Ihr Add-on die Sichtbarkeit Privat hat, sind das alle Nutzer in der in derselben Domain wie das Cloud-Projekt.

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

Wichtig: Sie können Ihre Anwendung zwar direkt über einen Webbrowser testen, in den iFrames für Classroom-Add-ons testen. Wird geladen... Ihrer Webanwendung in einem iFrame zu atypischen Verhaltensweisen führen kann. Lesen Sie unseren iFrame und Suchparameter durch. Dort finden Sie eine Beschreibung der einzelnen iFrames. Alle in dieser Schritt-für-Schritt-Anleitung gehen davon aus, dass das Add-on im Kontext eines iFrames betrachtet.

Starten Sie den Server. Dann melden Sie sich als eins in Google Classroom 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 des Anhangs, 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.