Google Classroom-Add-ons sind jetzt allgemein für Entwickler verfügbar. Weitere Informationen finden Sie in der Dokumentation zu Add-ons.

Diese Seite wurde von der Cloud Translation API übersetzt.

Schritt-für-Schritt-Anleitungen

In dieser Reihe von Schritt-für-Schritt-Anleitungen werden alle beweglichen Teile einer funktionierenden Classroom-Add-on. In jeder Schritt-für-Schritt-Anleitung werden bestimmte und diese in einer einzelnen Webanwendung zu implementieren. Das Ziel ist es, Ihnen zu helfen, beim Einrichten, Konfigurieren und Starten eines funktionalen Add-ons.

Das Add-on muss mit einem Google Cloud-Projekt interagieren. Wenn Sie nicht mit Google Cloud empfehlen wir Ihnen, die Startleitfäden zu lesen. Von dir verwaltet Anmeldedaten, API-Zugriff und das Google Workspace Marketplace SDK in der Google Cloud Console Weitere Informationen zur Marketplace SDK erhalten, besuchen Sie den Google Workspace Marketplace Leitfaden für Store-Einträge.

In dieser Anleitung werden folgende Themen behandelt:

Mit Google Cloud eine Seite erstellen, die in einem iFrame in Google Classroom:
Fügen Sie die Einmalanmeldung (SSO) von Google hinzu und erlauben Sie Nutzern, sich anzumelden.
Führen Sie API-Aufrufe aus, um Ihr Add-on an eine Aufgabe anzuhängen.
Erläutern Sie die Anforderungen für das Einreichen von Add-ons und die erforderlichen Funktionen.

In diesem Leitfaden wird vorausgesetzt, dass Sie mit der Programmierung und den Grundlagen Entwicklungskonzepte. Wir empfehlen Ihnen dringend, die Projektkonfiguration , bevor Sie mit den Schritt-für-Schritt-Anleitungen beginnen. Diese Seite enthält wichtige Konfigurationsdetails, die in den Schritt-für-Schritt-Anleitungen nicht vollständig behandelt werden.

Beispielimplementierungen

Ein vollständiges Referenzbeispiel finden Sie in Python. Teilweise Implementierungen sind auch in Java und Node.js verfügbar. Diese Implementierungen sind die Quellen des Beispielcodes, die auf den nachfolgenden Seiten gefunden wurden.

Hier herunterladen

Die Beispiele für Python und Java sind in GitHub-Repositories verfügbar:

Das Node.js-Beispiel kann als ZIP-Datei heruntergeladen werden:

Node.js-Archiv

Vorbereitung

Lesen Sie die folgenden Abschnitte, um ein neues Add-on-Projekt vorzubereiten.

HTTPS-Zertifikat

Sie können Ihre Anwendung zwar in jeder Entwicklungsumgebung hosten, Das Classroom-Add-on ist nur über https:// verfügbar. Dementsprechend wird benötigen Sie einen Server mit SSL-Verschlüsselung, um Ihre Anwendung bereitzustellen oder im den iFrame des Add-ons an.

Sie können localhost mit einem SSL-Zertifikat verwenden. Ziehen Sie mkcert in Betracht, wenn müssen Sie ein Zertifikat für die lokale Entwicklung erstellen.

Google Cloud-Projekt

Sie müssen ein Google Cloud-Projekt für diese Beispiele konfigurieren. Siehe Leitfaden zur Google Cloud-Projekterstellung mit einem Überblick über die erforderlichen die ersten Schritte. Das Dialogfeld Google Cloud-Projekt einrichten in der ersten Schritt-für-Schritt-Anleitung auch die spezifische Konfiguration zu ergreifen.

Laden Sie anschließend Ihre OAuth 2.0-Client-ID als JSON-Datei herunter. müssen Sie noch diese Anmeldedatendatei in das entpackte Beispielverzeichnis. Weitere Informationen finden Sie unter Überblick über die für bestimmte Speicherorte.

OAuth-Anmeldedaten

So erstellen Sie neue OAuth-Anmeldedaten:

Rufen Sie die Seite Google Cloud-Anmeldedaten auf. Achten Sie darauf, ob Sie oben auf dem Bildschirm das richtige Projekt ausgewählt haben.
Klicken Sie auf ANMELDEDATEN ERSTELLEN und wählen Sie OAuth-Client-ID aus der aus.
Gehen Sie auf der nächsten Seite folgendermaßen vor:
- Legen Sie Anwendungstyp auf Webanwendung fest.
- Klicken Sie unter Autorisierte Weiterleitungs-URIs auf URI HINZUFÜGEN. Fügen Sie die vollständige Pfad für eine Callback-Route für Ihre Anwendung. Beispiel: https://my.domain.com/auth-callback oder https://localhost:5000/callback. Sie erstellen und verwalten diese Route. weiter unten in dieser Schritt-für-Schritt-Anleitung. Sie können solche Routen jederzeit bearbeiten oder weitere hinzufügen.
- Klicken Sie auf Erstellen.
Es wird ein Dialogfeld mit Ihren neu erstellten Anmeldedaten angezeigt. Wählen Sie die Option JSON HERUNTERLADEN auswählen. Kopieren Sie die heruntergeladene JSON-Datei auf Ihren Server. -Verzeichnis.

Sprachspezifische Voraussetzungen

In der README-Datei in den einzelnen Repositories finden Sie die aktuelle Liste der Voraussetzungen.

Python

In unserem Python-Beispiel wird das Flask-Framework verwendet. Sie können die vollständigen Quellcode über die bereitgestellten Links.

Installieren Sie bei Bedarf Python 3.7+ und achten Sie darauf, dass pip verfügbar ist.

python3 -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

In jedem Schritt-für-Schritt-Unterverzeichnis imrequirements.txt heruntergeladene Beispiele. Sie können die erforderlichen Bibliotheken schnell mit pip Verwenden Sie die folgenden Befehle, um die erforderlichen Bibliotheken für den ersten 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. Du kannst Folgendes herunterladen: den vollständigen Quellcode aus den bereitgestellten Links.

Für dieses Beispiel ist Node.js v16.13 oder höher erforderlich.

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 aus den bereitgestellten Links.

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.

Führen Sie in dem Verzeichnis, in das Sie das Projekt heruntergeladen oder geklont haben, den Befehl folgenden Befehlen, um sicherzustellen, dass Sie die Voraussetzungen zum Ausführen des Projekts erfüllen.

java --version
./mvnw --version

Auf Windows:

java -version
mvnw.cmd --version

Informationen zu den Dateien

In den folgenden Abschnitten wird das Layout der Beispielverzeichnisse beschrieben.

Verzeichnisnamen

Jedes Repository enthält mehrere Verzeichnisse, deren Namen mit einer Zahl beginnen. wie /01-basic-app/. Die Nummern beziehen sich auf die einzelnen Schritt-für-Schritt-Anleitungen. Jedes Verzeichnis enthält eine voll funktionsfähige Webanwendung, die die Funktionen implementiert. in einer Schritt-für-Schritt-Anleitung beschrieben. Beispiel: /01-basic-app/ enthält die endgültige Implementierung für die Funktion Add-on erstellen. Schritt-für-Schritt-Anleitung.

Verzeichnisinhalt

Der Verzeichnisinhalt unterscheidet sich je nach Implementierungssprache:

Python

Das Stammverzeichnis enthält die folgenden Dateien:
- main.py ist der Einstiegspunkt der Python-Anwendung. Server angeben die Sie in dieser Datei verwenden möchten, und führen Sie sie aus, um den Server zu starten.
- requirements.txt: Die zum Ausführen der Webanwendung erforderlichen Python-Module. Diese können automatisch mit pip install -r requirements.txt installiert werden.
- client_secret.json: die von Google heruntergeladene Clientschlüsseldatei Cloud Beachten Sie, dass diese nicht im Beispielarchiv enthalten sind. ich Ihre heruntergeladene Datei mit den Anmeldedaten umbenennen und in jede Datei des Stammverzeichnisses.
  
  Wichtig: Sie müssen die Clientschlüsseldatei aus Ihrer Google Cloud-Projekt, bevor Sie die Beispiele ausführen können.
config.py: Konfigurationsoptionen für den Flask-Server.
Das Verzeichnis webapp enthält den Inhalt für die Webanwendung. Folgende Angaben sind enthalten:
Das Verzeichnis /templates/ mit Jinja-Vorlagen für verschiedene Seiten
Das Verzeichnis /static/ mit Bildern, CSS und zusätzlichem JavaScript Dateien.
routes.py: Die Handler-Methoden für die Routen der Webanwendung.
__init__.py: der Initialisierer für das Modul webapp. Dieses Initialisierer startet den Flask-Server und lädt die Konfigurationsoptionen. festgelegt in config.py.
Zusätzliche Dateien, die für einen bestimmten Schritt der Anleitung erforderlich sind.

Node.js

Jeder Schritt der Schritt-für-Schritt-Anleitung ist in einem eigenen <step> zu finden Unterordner. Jeder Schritt enthält Folgendes:

Statische Dateien wie JavaScript, CSS und Bilder befinden sich in der Ordner „./<step>/public“.
Express-Router befinden sich in den ./<step>/routes-Ordnern.
HTML-Vorlagen befinden sich in den Ordnern „./<step>/views“.
Die Serveranwendung ist ./<step>/app.js.

Java

Das Projektverzeichnis enthält Folgendes:

Das Verzeichnis src.main enthält den Quellcode und die auszuführende Konfiguration App erfolgreich abgeschlossen haben. Dieses Verzeichnis enthält Folgendes: + java.com.addons.spring-Verzeichnis enthält die Application.java- und Controller.java-Dateien. Die In der Datei Application.java wird Folgendes ausgeführt: Anwendungsserver verarbeitet, während die Datei Controller.java Endpunktlogik. + Das Verzeichnis resources enthält das Verzeichnis templates mit HTML- und JavaScript-Dateien. Sie enthält auch die application.properties-Datei, die den Port für die Ausführung des Server, den Pfad zur Schlüsselspeicherdatei und den Pfad zur templates-Verzeichnis. Dieses Beispiel enthält die Schlüsselspeicherdatei im Verzeichnis resources. Sie können sie an einem beliebigen die Sie bevorzugen, aber stellen Sie sicher, dass Sie die application.properties mit dem entsprechenden Pfad.
- pom.xml enthält die Informationen, die zum Erstellen des Projekts und die erforderlichen Abhängigkeiten zu definieren.
- .gitignore enthält Dateinamen, die nicht in Git hochgeladen werden sollten. Achten Sie darauf, dass Sie den Pfad zu Ihrem Schlüsselspeicher in diesem .gitignore hinzufügen. Im Beispiel ist dies secrets/*.p12 (Zweck des keystore wird im folgenden Abschnitt behandelt). Für Schritt-für-Schritt-Anleitung 2 und sollten Sie auch den Pfad zu Ihrer client_secret.json-Datei, damit Sie Ihre in einem Remote-Repository zu speichern. Für Schritt 3 und mehr sollte den Pfad zur H2-Datenbankdatei und zum Dateidatenspeicher hinzufügen. Factory. Weitere Informationen zur Einrichtung dieser Datenspeicher finden Sie in der dritten Schritt-für-Schritt-Anleitung zum Umgang mit wiederholten Besuchen.
- mvnw und mvnw.cmd sind die ausführbaren Maven-Wrapper für Unix und Windows. Wenn Sie beispielsweise ./mvnw --version auf Unix gibt unter anderem die Apache Maven-Version aus.
- Das Verzeichnis .mvn enthält die Konfiguration für den Maven-Wrapper.

Beispielserver ausführen

Sie müssen Ihren Server starten, um ihn zu testen. Folgen Sie dieser Anleitung, um Führen Sie den Beispielserver in der Sprache Ihrer Wahl aus:

Python

OAuth-Anmeldedaten

Erstellen Sie Ihre OAuth-Anmeldedaten wie oben beschrieben und laden Sie sie herunter. Ort Die JSON-Datei im Stammverzeichnis neben dem Anwendungsserver Startdatei.

Server konfigurieren

Sie haben mehrere Möglichkeiten, den Webserver auszuführen. Am Ende des Python-Datei enthält, fügen Sie eines der folgenden Elemente hinzu:

localhost ungesichert. Dieser eignet sich zum direkten Testen nur in einem Browserfenster; ungesicherte Domains können nicht im iFrame für Classroom-Add-on.

if __name__ == "__main__":
  # Disable OAuthlib's HTTPs verification.
  os.environ["OAUTHLIB_INSECURE_TRANSPORT"] = "1"

  # Run the web app at http://localhost:5000.
  app.run(debug=True)

localhost sichern. Sie müssen ein Tupel von SSL-Schlüsseldateien für die ssl_context-Argument.

if __name__ == "__main__":
  # Run the web app at https://localhost:5000.
  app.run(host="localhost",
          ssl_context=("localhost.pem", "localhost-key.pem"),
          debug=True)

Gunicorn-Server. Sie eignet sich für produktionsreife Server oder in der Cloud bereitstellen. Es wird empfohlen, eine PORT-Umgebungsvariable für mit dieser Startoption verwenden können.

if __name__ == "__main__":
  # Run the web app at https://<your domain>:<server_port>.
  # Defaults to https://<your domain>:8080.
  server_port = os.environ.get("PORT", "8080")
  app.run(debug=True, port=server_port, host="0.0.0.0")

Server starten

Führen Sie Ihre Python-Anwendung aus, um den Server wie in der vorherigen Schritt.

python main.py

Klicken Sie auf die angezeigte URL, um Ihre Webanwendung in einem Browser aufzurufen, um zu bestätigen, dass ob sie korrekt ausgeführt wird.

Node.js

Server konfigurieren

Wenn Sie den Server über HTTPS ausführen möchten, müssen Sie ein Selbstzertifikat erstellen mit dem die Anwendung über HTTPS ausgeführt wird. Diese Anmeldedaten sollten als sslcert/cert.pem und sslcert/key.pem im Repository-Stammverzeichnis gespeichert Ordner. Möglicherweise müssen Sie diese Schlüssel dem Schlüsselbund Ihres Betriebssystems hinzufügen, damit um sie zu akzeptieren.

Achten Sie darauf, dass sich *.pem in der Datei .gitignore befindet. um die Datei per Commit an Git zu übergeben.

Server starten

Sie können die Anwendung mit dem folgenden Befehl ausführen und dabei step01 ersetzen für den richtigen Schritt, den Sie als Server ausführen möchten (z. B. step01) für 01-basic-app und step02 für 02-Anmeldung).

npm run step01

oder

npm run step02

Dadurch wird der Webserver unter https://localhost:5000 gestartet.

Du kannst den Server mit Control + C in deinem Terminal beenden.

Java

Server konfigurieren

Wenn Sie den Server über HTTPS ausführen möchten, müssen Sie ein Selbstzertifikat erstellen mit dem die Anwendung über HTTPS ausgeführt wird.

Sie können mkcert für die lokale Entwicklung verwenden. Wenn Sie mkcert installiert haben, generieren die folgenden Befehle ein lokal gespeichertes Zertifikat, das über HTTPS

mkcert -install
mkcert -pkcs12 -p12-file <path_to_keystore> <domain_name>

In diesem Beispiel ist die Schlüsselspeicherdatei im Ressourcenverzeichnis enthalten. Sie können speichern Sie sie an einem beliebigen Ort. Aktualisieren Sie die application.properties mit dem entsprechenden Pfad. Der Domainname lautet Die Domain, auf der Sie das Projekt ausführen (z. B. localhost).

Achten Sie darauf, dass sich *.p12 in der Datei .gitignore befindet. um die Datei per Commit an Git zu übergeben.

Server starten

Starten Sie den Server, indem Sie die Methode main in der Datei Application.java ausführen. -Datei. In IntelliJ können Sie entweder mit der rechten Maustaste Application.java > Run 'Application' im Verzeichnis src/main/java/com/addons/spring oder öffnen Sie das Verzeichnis Application.java Datei, um auf den grünen Pfeil links neben main(String[] args) zu klicken Methodensignatur. Alternativ können Sie das Projekt in einem Terminal ausführen Fenster:

./mvnw spring-boot:run

Unter Windows:

mvnw.cmd spring-boot:run

Dadurch wird der Server unter https://localhost:5000 oder an dem Port gestartet, den Sie in application.properties angegeben.