Questa è la prima procedura dettagliata per i componenti aggiuntivi di Classroom di una serie di procedure dettagliate.
In questa procedura dettagliata, getterai le basi per sviluppare un'applicazione web e pubblicandolo come componente aggiuntivo di Classroom. Passaggi successivi della procedura dettagliata espandi questa app.
Nel corso di questa procedura dettagliata, completerai quanto segue:
- Crea un nuovo progetto Google Cloud per il tuo componente aggiuntivo.
- Crea una bozza di app web con pulsanti di accesso segnaposto.
- Pubblica una scheda dello Store di Google Workspace Marketplace per il tuo componente aggiuntivo.
Al termine, puoi installare il componente aggiuntivo e caricarlo nel iframe dei componenti aggiuntivi di Classroom.
Prerequisiti
Scegli una lingua per visualizzare i prerequisiti appropriati:
Python
Il nostro esempio Python utilizza il framework Flask. Puoi scaricare l'intero
codice sorgente per tutte le procedure dettagliate della pagina Panoramica. Il codice per questo
puoi trovare la procedura dettagliata specifica nella directory /flask/01-basic-app/
.
Se necessario, installa Python 3.7 o versioni successive e assicurati che pip
sia disponibile.
python -m ensurepip --upgrade
Ti consigliamo inoltre di configurare e attivare una nuova completamente gestito di Google Cloud.
python3 -m venv .classroom-addon-env
source .classroom-addon-env/bin/activate
Ogni sottodirectory della procedura dettagliata negli esempi scaricati contiene una
requirements.txt
. Puoi installare rapidamente le librerie necessarie utilizzando
pip
. Usa il codice seguente per installare le librerie richieste per questo
la procedura dettagliata.
cd flask/01-basic-app
pip install -r requirements.txt
Node.js
Il nostro esempio Node.js utilizza il framework Express. Puoi scaricare completare il codice sorgente per tutte le procedure dettagliate della pagina Panoramica.
Se necessario, installa NodeJS v16.13+.
Installa i moduli di nodo richiesti utilizzando npm
.
npm install
Java
Il nostro esempio Java utilizza il framework Spring Boot. Puoi scaricare Il codice sorgente completo per tutte le procedure dettagliate dalla pagina Panoramica.
Installa Java 11+ se non è già installato sulla macchina.
Le applicazioni Spring Boot possono utilizzare Gradle o Maven per gestire le build e delle dipendenze. Questo esempio include il wrapper Maven che garantisce una build riuscita senza la necessità di installare Maven.
Per poter eseguire l'esempio fornito, esegui questi comandi nella directory in cui hai scaricato il progetto, per assicurarti di avere prerequisiti per l'esecuzione del progetto.
java --version
./mvnw --version
Su Windows:
java -version
mvnw.cmd --version
Configura un progetto Google Cloud
Accesso all'API Classroom e ai metodi di autenticazione richiesti sono controllate dai progetti Google Cloud. Segui le istruzioni riportate di seguito i passaggi minimi per creare e configurare un nuovo progetto da utilizzare con come componente aggiuntivo.
Creare il progetto
Crea un nuovo progetto Google Cloud visitando la pagina di creazione del progetto. Puoi assegna un nome qualsiasi al nuovo progetto. Fai clic su Crea.
La creazione completa del nuovo progetto richiede qualche istante. Al termine, assicurati di selezionare il progetto; puoi sceglierlo nel selettore di progetti menu a discesa in alto nello schermo oppure fai clic su SELEZIONA PROGETTO nel menu delle notifiche in alto a destra.
Collega l'SDK di Google Workspace Marketplace al progetto Google Cloud
Vai al browser della libreria API. Cerca
Google Workspace Marketplace SDK
. Dovresti vedere l'SDK nell'elenco di
che consentono di analizzare i dati
e visualizzare i risultati.
Seleziona la scheda dell'SDK Google Workspace Marketplace, quindi fai clic su Abilita.
Configura l'SDK di Google Workspace Marketplace
Google Workspace Marketplace fornisce l'elenco attraverso cui utenti e il componente aggiuntivo non è installato da amministratori. Configura il Configurazione app e Store dell'SDK del Marketplace Scheda e alla schermata per il consenso OAuth per continuare.
Configurazione dell'app
Vai alla pagina Configurazione app dell'SDK Marketplace. Fornisci le seguenti informazioni:
Imposta Visibilità delle app su
Public
oPrivate
.- L'impostazione pubblica è pensata per le app che verranno rilasciate agli utenti finali. Un'app pubblica deve essere sottoposta a un processo di approvazione prima di essere pubblicata per gli utenti finali, ma puoi specificare che gli utenti possono installare testalo come bozza. Si tratta di uno stato di pre-pubblicazione che ti consentirà di testare e sviluppare il componente aggiuntivo prima di inviarlo per l'approvazione.
- L'impostazione privata è adatta per test e sviluppo interni. R l'app privata può essere installata soltanto dagli utenti nello stesso dominio dell'app progetto è stato creato. Di conseguenza, devi impostare la visibilità su privata. solo se il progetto è stato creato in un dominio con un account Google Workspace for Education abbonamento, altrimenti gli utenti di test non riusciranno ad avviare Componenti aggiuntivi di Classroom.
Se vuoi, imposta Impostazioni di installazione su
Admin Only install
. limitare l'installazione agli amministratori di dominio.In Integrazione app, seleziona Componente aggiuntivo di Classroom. Stai richiesto l'URI di configurazione dell'allegato secure; questo è l'URL si aspettano di essere caricati quando un utente apre il tuo componente aggiuntivo. Ai fini del presente documento dovrebbe essere
https://<your domain>/addon-discovery
.I prefissi URI degli allegati consentiti vengono utilizzati per convalidare gli URI impostati
AddOnAttachment
utilizzandocourses.*.addOnAttachments.create
ecourses.*.addOnAttachments.patch
. La convalida è un valore letterale del prefisso della stringa e non consente l'uso di caratteri jolly in questo nel tempo. Aggiungi almeno il dominio principale del server dei contenuti, ad esempiohttps://localhost:5000/
ohttps://cdn.myedtech.com/
.Aggiungi gli stessi ambiti OAuth forniti nella schermata per il consenso OAuth in al passaggio precedente.
Compila i campi appropriati per la tua organizzazione nella sezione Sviluppatore Link.
Scheda dello store
Vai alla pagina Scheda dello Store dell'SDK Marketplace. Fornisci le seguenti informazioni:
- In Dettagli sull'app, aggiungi una lingua o espandi il menu a discesa accanto lingua già presente nell'elenco. fornire un nome dell'applicazione e descrizioni; questi elementi vengono visualizzate nella pagina della scheda dello Store di Google Workspace Marketplace del componente aggiuntivo. Fai clic su Fine per salvare.
- Scegli una Categoria per il componente aggiuntivo.
- In Risorse grafiche, fornisci le immagini per i campi obbligatori. Questi possono essere modificate in un secondo momento e per il momento possono essere segnaposto.
- In Link per l'assistenza, fornisci gli URL richiesti. Questi possono essere segnaposto se imposti Visibilità app su Privato nella precedente passaggio.
Se hai impostato Visibilità app su Privato nel passaggio precedente, fai clic su PUBLISH; sia subito disponibile per l'installazione. Se imposti il parametro Visibilità dell'app come pubblica, aggiungi indirizzi email nell'area Tester di bozze per gli utenti di test e fai clic su Salva bozza.
Schermata consenso OAuth
La schermata per il consenso OAuth viene visualizzata quando gli utenti autorizzano la tua app per la prima volta. Richiede per consentire alla tua app di accedere ai propri dati personali e ai dati dell'account, come dettata dagli ambiti che attivi.
Vai alla pagina di creazione della schermata per il consenso OAuth. Fornisci quanto segue informazioni:
- Imposta Tipo di utente su Esterno. Fai clic su Crea.
- Nella pagina successiva, inserisci i dettagli dell'app e i dati di contatto richiesti. Fornisci tutti i domini che ospitano la tua app in Domini autorizzati. Clic SALVA E CONTINUA.
Aggiungi eventuali ambiti OAuth richiesti dalla tua app web. Consulta la sezione OAuth guida alla configurazione per una discussione approfondita sugli ambiti e sul loro scopo.
Devi richiedere almeno uno dei seguenti ambiti affinché Google invia il parametro di query
login_hint
. Una spiegazione più dettagliata comportamento del protocollo è disponibile nella nostra guida alla configurazione OAuth:https://www.googleapis.com/auth/userinfo.email
(già incluso)https://www.googleapis.com/auth/userinfo.profile
(già incluso)
I seguenti ambiti sono specifici dei componenti aggiuntivi di Classroom:
https://www.googleapis.com/auth/classroom.addons.teacher
https://www.googleapis.com/auth/classroom.addons.student
Includi anche eventuali altri ambiti delle API di Google richiesti dalla tua app utenti.
Fai clic su SALVA E CONTINUA.
Elenca gli indirizzi email di tutti gli account di test nella pagina Utenti di test. Fai clic su SALVA E CONTINUA.
Verifica che le impostazioni siano corrette, poi torna alla dashboard.
Installazione del componente aggiuntivo
Ora puoi installare il componente aggiuntivo utilizzando il link nella parte superiore della Pagina Scheda dello Store dell'SDK Marketplace. Fai clic sul pulsante App URL nella parte superiore della pagina per visualizzare la scheda, quindi seleziona Installa.
Crea un'app web di base
Configura uno scheletro di applicazione web con due route. Passaggi successivi della procedura dettagliata
espandere questa applicazione, quindi per il momento è sufficiente creare una pagina di destinazione per il componente aggiuntivo
/addon-discovery
e una pagina di indice fittizia /
per il nostro "sito aziendale".
Implementa questi due endpoint:
/
: visualizza un messaggio di benvenuto e un pulsante per chiudere la scheda corrente e l'iframe del componente aggiuntivo./addon-discovery
: visualizza un messaggio di benvenuto e due pulsanti: uno per chiudere l'iframe del componente aggiuntivo e uno per aprire un sito web in una nuova scheda.
Tieni presente che stiamo aggiungendo pulsanti per creare e chiudere le finestre o l'iframe. Questi dimostrare un metodo per inserire in modo sicuro l'utente in una nuova scheda per di autorizzazione nella prossima procedura dettagliata.
Crea script di utilità
Crea una directory static/scripts
. Crea un nuovo file addon-utils.js
. Aggiungi il parametro
due funzioni seguenti.
/**
* 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',
}, '*');
};
Crea route
Implementa gli endpoint /addon-discovery
e /
.
Python
Configura la directory delle applicazioni
Ai fini di questo esempio, strutturare la logica dell'applicazione come
nel modulo Python. Questa è la directory webapp
nell'esempio fornito.
Crea una directory per il modulo server, ad esempio webapp
. Sposta il
static
nella directory del modulo. Crea una directory template
anche nella directory del modulo; i tuoi file HTML vanno qui.
Crea il modulo del server*
Crea il file __init__.py
nella directory del modulo e aggiungi quanto segue
importazioni e dichiarazioni.
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
Quindi crea un file per gestire le route dell'app web. Questo è
webapp/routes.py
nell'esempio fornito. Implementa le due route in questo
.
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.")
Tieni presente che entrambe le nostre route passano una variabile message
alle rispettive
Modelli Jinja. È utile per identificare la pagina raggiunta dall'utente.
Creare file di configurazione e avviare i file
Nella directory root dell'applicazione, crea i main.py
e config.py
. Configura la tua chiave segreta 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."
Nel file main.py
, importa il modulo e avvia il server Flask.
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
Le route sono registrate nel file app.js
con le seguenti righe.
const websiteRouter = require('./routes/index');
const addonRouter = require('./routes/classroom-addon');
app.use('/', websiteRouter);
app.use('/addon-discovery', addonRouter);
Apri /01-basic-app/routes/index.js
e rivedi il codice. Questo percorso è
raggiunto quando l'utente finale visita il sito web dell'azienda. La route esegue il rendering
utilizzando il modello di manubri index
e supera il modello
contenente le variabili title
e message
.
router.get('/', function (req, res, next) {
res.render('index', {
title: 'Education Technology',
message: 'Welcome to our website!'
});
});
Apri il secondo percorso /01-basic-app/routes/classroom-addon.js
ed esamina
il codice. Questo percorso viene raggiunto al momento della visita dell'utente finale del componente aggiuntivo. Avvisi
che questo percorso utilizza il modello di manubri discovery
e, inoltre,
il layout addon.hbs
per mostrare la pagina in modo diverso rispetto all'azienda
sito web.
router.get('/', function (req, res, next) {
res.render('discovery', {
layout: 'addon.hbs',
title: 'Education Technology Classroom add-on',
message: `Welcome.`
});
});
Java
L'esempio di codice Java utilizza i moduli per pacchettizzare la procedura dettagliata sequenziale
passaggi. Poiché questa è la prima procedura dettagliata, il codice si trova nella sezione
Modulo step_01_basic_app
. è previsto che tu implementi
utilizzando i moduli; ti suggeriamo invece di basarti su un singolo progetto
man mano che segui ogni passaggio della procedura dettagliata.
Crea una classe controller, Controller.java
in questo progetto di esempio, per
e definire gli endpoint. In questo file, importa l'annotazione @GetMapping
da
la dipendenza spring-boot-starter-web
.
import org.springframework.web.bind.annotation.GetMapping;
Includi l'annotazione del controller framework Spring sopra la classe per indicare lo scopo della classe.
@org.springframework.stereotype.Controller
public class Controller {
Poi implementa le due route e una route aggiuntiva per la gestione degli errori.
/** 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";
}
Testa il componente aggiuntivo
Avvia il server. Quindi, accedi a Google Classroom con i dati di accesso dei tuoi Utenti di test insegnanti. Vai alla scheda Lavori del corso e creane uno nuovo Trasferimento. Seleziona il componente aggiuntivo dal selettore Componenti aggiuntivi. L'iframe viene aperto e il componente aggiuntivo carica l'URI di configurazione dell'allegato che hai specificato nel pagina Configurazione app dell'SDK Marketplace.
Complimenti! Puoi procedere al passaggio successivo: accesso degli utenti con l'accesso SSO di Google.