Questa serie di procedure dettagliate illustra tutte le parti mobili di un Componente aggiuntivo di Classroom. Ogni passaggio della procedura dettagliata affronta di lavoro, implementandoli in un'unica applicazione web. L'obiettivo è aiutarti durante l'impostazione, la configurazione e l'avvio di un componente aggiuntivo funzionale.
Il componente aggiuntivo deve interagire con un progetto Google Cloud. Se non hai dimestichezza con Google Cloud, ti consigliamo di leggere le guide introduttive. Gestisci tu le credenziali, l'accesso API e l'SDK di Google Workspace Marketplace nella console Google Cloud. Per ulteriori informazioni SDK Marketplace, visita Google Workspace Marketplace della guida.
Questa guida tratta i seguenti argomenti:
- Usa Google Cloud per creare una pagina da mostrare in un iframe in di Classroom.
- Aggiungi il servizio Single Sign-On (SSO) di Google e consenti agli utenti di accedere.
- Effettua chiamate API per collegare il componente aggiuntivo a un compito.
- Soddisfa i principali requisiti di invio dei componenti aggiuntivi e le funzionalità richieste.
Questa guida presuppone che tu abbia familiarità con la programmazione e le nozioni di base di sviluppo e sviluppo. Consigliamo vivamente di leggere l'articolo sulla configurazione del progetto prima di iniziare le procedure dettagliate. Questa pagina contiene importanti della configurazione di deployment che non sono trattati completamente nelle procedure dettagliate.
Esempi di implementazioni
Un esempio di riferimento completo è disponibile in Python. Implementazioni parziali sono disponibili anche in Java e Node.js. Queste implementazioni sono del codice di esempio presenti nelle pagine successive.
Dove eseguire il download
Gli esempi Python e Java sono disponibili nei repository GitHub:
L'esempio di Node.js può essere scaricato come file ZIP:
Prerequisiti
Consulta le sezioni seguenti per preparare un nuovo progetto di componenti aggiuntivi.
Certificato HTTPS
Puoi ospitare la tua app in qualsiasi ambiente di sviluppo, ma i tuoi
Il componente aggiuntivo di Classroom è disponibile solo tramite https://
. Pertanto,
ti serve un server con crittografia SSL per eseguire il deployment della tua app o per testarla
l'iframe del componente aggiuntivo.
È possibile utilizzare localhost
con un certificato SSL; prendi in considerazione mkcert se
devi creare un certificato per lo sviluppo locale.
Progetto Google Cloud
Devi configurare un progetto Google Cloud da utilizzare con questi esempi. Consulta Guida alla creazione di progetti Google Cloud per una panoramica delle passaggi per iniziare. La sezione Configurare un progetto Google Cloud nella prima procedura dettagliata illustra anche la configurazione azioni da intraprendere.
Al termine, scarica il tuo ID client OAuth 2.0 come file JSON. devi aggiungere il file delle credenziali nella directory di esempio decompressa. Consulta la sezione Informazioni file per sedi specifiche.
Credenziali OAuth
Per creare nuove credenziali OAuth, segui questi passaggi:
- Vai alla pagina Credenziali Google Cloud. Assicurati di aver selezionato il progetto corretto nella parte superiore dello schermo.
- Fai clic su CREA CREDENZIALI e scegli ID client OAuth dalla menu a discesa.
- Nella pagina successiva:
- Imposta Tipo di applicazione su Applicazione web.
- In URI di reindirizzamento autorizzati, fai clic su AGGIUNGI URI. Aggiungi il
per una route di callback per la tua applicazione. Ad esempio:
https://my.domain.com/auth-callback
ohttps://localhost:5000/callback
. Questa route viene creata e gestita da te più avanti in questa procedura dettagliata. Puoi modificare o aggiungere altri percorsi di questo tipo in qualsiasi momento. - Fai clic su CREA.
- Si aprirà una finestra di dialogo con le credenziali appena create. Scegli il tipo Opzione SCARICA JSON. Copia il file JSON scaricato sul server .
Prerequisiti specifici dei linguaggi
Visualizza il file README in ogni repository per l'elenco più aggiornato di e i prerequisiti necessari.
Python
Il nostro esempio Python utilizza il framework Flask. Puoi scaricare codice sorgente completo dai link forniti.
Se necessario, installa Python 3.7 o versioni successive e assicurati che pip
sia disponibile.
python3 -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
È presente un requirements.txt
in ogni sottodirectory della procedura dettagliata nella
esempi scaricati. Puoi installare rapidamente le librerie necessarie utilizzando
pip
. Usa i comandi seguenti per installare le librerie richieste per
la prima procedura dettagliata.
cd flask/01-basic-app
pip install -r requirements.txt
Node.js
Il nostro esempio di Node.js utilizza il framework Express. Puoi scaricare Il codice sorgente completo dai link forniti.
Questo esempio richiede Node.js v16.13 o versioni successive.
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 dai link forniti.
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.
Nella directory in cui hai scaricato o clonato il progetto, esegui seguenti per assicurarti di disporre dei prerequisiti per eseguire il progetto.
java --version
./mvnw --version
Su Windows:
java -version
mvnw.cmd --version
Comprendere i file
Le seguenti sezioni descrivono il layout delle directory di esempio.
Nomi directory
Ogni repository contiene diverse directory i cui nomi iniziano con un numero,
ad esempio /01-basic-app/
. I numeri corrispondono ai passaggi della procedura dettagliata specifici.
Ogni directory contiene un'app web completamente funzionale che implementa le funzionalità
descritti in una determinata procedura dettagliata. Ad esempio, /01-basic-app/
contiene l'implementazione finale per il modulo Create an add-on
la procedura dettagliata.
Contenuti della directory
I contenuti della directory variano a seconda del linguaggio di implementazione:
Python
La directory root contiene i seguenti file:
main.py
: il punto di ingresso dell'applicazione Python. Specifica il server configurazione che vuoi utilizzare in questo file, quindi eseguilo avviare il server.requirements.txt
: i moduli Python necessari per eseguire l'app web. Possono essere installati automaticamente utilizzandopip install -r requirements.txt
.client_secret.json
: il file del client secret scaricato da Google Google Cloud. Tieni presente che non è incluso nell'archivio di esempio. tu rinomina e copia il file delle credenziali scaricato della directory radice.
config.py
: opzioni di configurazione per il server Flask.La directory
webapp
include i contenuti dell'applicazione web. Include i seguenti contenuti:La directory
/templates/
con i modelli Jinja per varie pagine.La directory
/static/
con immagini, CSS e JavaScript aggiuntivo .routes.py
: i metodi dei gestori per le route dell'applicazione web.__init__.py
: l'inizializzatore del modulowebapp
. Questo l'inizializzatore avvia il server Flask e carica le opzioni di configurazione impostato inconfig.py
.File aggiuntivi come richiesto da un determinato passaggio della procedura dettagliata.
Node.js
Ogni passaggio della procedura dettagliata può essere individuato in <step>
sottocartella. Ogni passaggio contiene:
- I file statici come JavaScript, CSS e immagini si trovano nella
./<step>/public
cartella. - I router Express si trovano nelle cartelle
./<step>/routes
. - I modelli HTML sono disponibili nelle cartelle
./<step>/views
. - L'applicazione server è
./<step>/app.js
.
Java
La directory del progetto include quanto segue:
- La directory
src.main
contiene il codice sorgente e la configurazione da eseguire correttamente l'applicazione. Questa directory include: +java.com.addons.spring
directory contieneApplication.java
eController.java
file. La Il fileApplication.java
è responsabile dell'esecuzione server delle applicazioni, mentre il fileController.java
gestisce dalla logica dell'endpoint. +resources
la directory contiene la directorytemplates
con HTML e JavaScript. Contiene ancheapplication.properties
che specifica la porta su cui eseguire il server, il percorso del file dell'archivio chiavi e il percorso Directorytemplates
. Questo esempio include il file dell'archivio chiavi nella directoryresources
. Puoi archiviarlo dove vuoi preferisci, ma aggiornaapplication.properties
con il percorso corrispondente.pom.xml
contiene le informazioni necessarie per creare il progetto e e definire le dipendenze richieste..gitignore
contiene nomi di file che non devono essere caricati su Git. Assicurati di aggiungere il percorso all'archivio chiavi in questo campo.gitignore
. Nell'esempio fornito, questo èsecrets/*.p12
(lo scopo del l'archivio chiavi è discusso nella sezione di seguito). Per la procedura dettagliata 2 e oltre, devi includere anche il percorsoclient_secret.json
per assicurarti di non includere i tuoi i secret in un repository remoto. Per la procedura dettagliata 3 e oltre, deve aggiungere il percorso al datastore del file e del database H2 fabbrica. Per ulteriori informazioni sull'impostazione di questi datastore, che trovi nella terza procedura dettagliata sulla gestione di visite ripetute.mvnw
emvnw.cmd
sono gli eseguibili del wrapper Maven per Unix e Windows. Ad esempio, l'esecuzione di./mvnw --version
su Unix restituisce la versione di Apache Maven, tra le altre informazioni.- La directory
.mvn
contiene la configurazione del wrapper Maven.
Esegui il server di esempio
Devi avviare il server per testarlo. Segui queste istruzioni per esegui il server di esempio nella lingua che preferisci:
Python
Credenziali OAuth
Crea e scarica le tue credenziali OAuth come descritto in precedenza. Luogo il file JSON nella directory radice accanto al server dell'applicazione avviare il file.
Configura il server
Sono disponibili diverse opzioni per l'esecuzione del server web. Alla fine Python, aggiungi uno dei seguenti elementi:
localhost
non protetto. È adatto per i test diretti solo in una finestra del browser; i domini non sicuri non possono essere caricati nella L'iframe del componente aggiuntivo di Classroom.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)
Proteggi
localhost
. Devi specificare una tupla di file di chiavi SSL perssl_context
argomento.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. È adatto a un server pronto per la produzione deployment nel cloud. Ti consigliamo di impostare una variabile di ambiente
PORT
per da utilizzare con questa opzione di avvio.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")
Avvia il server
Esegui l'applicazione Python per avviare il server come configurato nell' passaggio precedente.
python main.py
Fai clic sull'URL visualizzato per visualizzare la tua app web in un browser e verificare che funzioni correttamente.
Node.js
Configura il server
Per eseguire il server tramite HTTPS, devi creare un auto-certificato
utilizzato per eseguire l'applicazione su HTTPS. Le credenziali devono essere
salvato come sslcert/cert.pem
e sslcert/key.pem
nella radice del repository
. Potrebbe essere necessario aggiungere queste chiavi al portachiavi del sistema operativo per
browser per accettarli.
Assicurati che *.pem
sia nel file .gitignore
perché non vuoi
per eseguire il commit del file in git.
Avvia il server
Puoi eseguire l'applicazione con il seguente comando, sostituendo step01
il passaggio corretto che vuoi eseguire come server (ad esempio, step01
per 01-basic-app e step02
per 02-sign-in).
npm run step01
o
npm run step02
Viene avviato il server web all'indirizzo https://localhost:5000
.
Puoi terminare il server con Control + C
nel tuo terminale.
Java
Configura il server
Per eseguire il server tramite HTTPS, devi creare un auto-certificato utilizzato per eseguire l'applicazione su HTTPS.
Potresti usare mkcert per lo sviluppo locale. Dopo aver installato mkcert
,
i comandi seguenti generano un certificato archiviato localmente da eseguire
HTTPS.
mkcert -install
mkcert -pkcs12 -p12-file <path_to_keystore> <domain_name>
Questo esempio include il file dell'archivio chiavi nella directory delle risorse. Puoi
archivialo dove preferisci, ma assicurati di aggiornare il
application.properties
con il percorso corrispondente. Il nome di dominio è
il dominio su cui esegui il progetto (ad esempio, localhost
).
Assicurati che *.p12
sia nel file .gitignore
perché non vuoi
per eseguire il commit del file in git.
Avvia il server
Avvia il server eseguendo il metodo main
in Application.java
. In IntelliJ, ad esempio, puoi fare clic con il tasto destro del mouse
Application.java
> Run 'Application'
nel
src/main/java/com/addons/spring
o apri la directory Application.java
per fare clic sulla freccia verde a sinistra di main(String[] args)
la firma del metodo. In alternativa, puoi eseguire il progetto in un terminale
finestra:
./mvnw spring-boot:run
o su Windows:
mvnw.cmd spring-boot:run
Il server viene avviato all'indirizzo https://localhost:5000
o alla porta
specificato in application.properties
.