Procedure dettagliate

Questa serie di procedure dettagliate illustra tutte le parti mobili di un componente aggiuntivo di Classroom funzionante. Ogni passaggio della procedura dettagliata affronta concetti specifici, implementandoli in una singola applicazione web. L'obiettivo è aiutarti a configurare e avviare un componente aggiuntivo funzionale.

Il componente aggiuntivo deve interagire con un progetto Google Cloud. Se non hai familiarità con Google Cloud, ti consigliamo di leggere le guide introduttive. Nella console Google Cloud puoi gestire le credenziali, l'accesso alle API e l'SDK di Google Workspace Marketplace. Per ulteriori informazioni sull' SDK di Marketplace, visita la pagina della guida all'elenco di Google Workspace Marketplace.

Questa guida tratta i seguenti argomenti:

  • Utilizzare Google Cloud per creare una pagina da mostrare in un iframe in Classroom.
  • Aggiungere il Single Sign-On (SSO) di Google e consentire agli utenti di accedere.
  • Effettuare chiamate API per collegare il componente aggiuntivo a un compito.
  • Affrontare i requisiti chiave per l'invio dei componenti aggiuntivi e le funzionalità richieste.

Questa guida presuppone che tu abbia familiarità con la programmazione e i concetti fondamentali di sviluppo web. Ti consigliamo vivamente di leggere la guida alla configurazione del progetto prima di iniziare le procedure dettagliate. Questa pagina contiene dettagli di configurazione importanti che non sono trattati completamente nelle procedure dettagliate.

Esempi di implementazioni

Un esempio di riferimento completo è disponibile in Python. Sono disponibili anche implementazioni parziali in Java e Node.js. Queste implementazioni sono le origini del codice di esempio che si trova nelle pagine successive.

Dove scaricare

Gli esempi di Python e Java sono disponibili nei repository GitHub:

L'esempio di Node.js può essere scaricato come file ZIP:

Prerequisiti

Esamina le seguenti sezioni per preparare un nuovo progetto di componenti aggiuntivi.

Certificato HTTPS

Sebbene tu possa ospitare la tua app in qualsiasi ambiente di sviluppo, il componente aggiuntivo di Classroom è disponibile solo tramite https://. Pertanto, devi disporre di un server con crittografia SSL per eseguire il deployment dell'app o per testarla all'interno dell'iframe del componente aggiuntivo.

È possibile utilizzare localhost con un certificato SSL. Se devi creare un certificato per lo sviluppo locale, valuta la possibilità di utilizzare mkcert.

Progetto Google Cloud

Devi configurare un progetto Google Cloud da utilizzare con questi esempi. Per una panoramica dei passaggi necessari per iniziare, consulta la guida alla creazione di progetti Google Cloud. La sezione Configurare un progetto Google Cloud della prima procedura dettagliata illustra anche le azioni di configurazione specifiche da intraprendere.

Al termine, scarica l'ID client OAuth 2.0 come file JSON. Devi aggiungere questo file di credenziali alla directory di esempio decompressa. Per le posizioni specifiche, consulta la sezione Informazioni sui file.

Credenziali OAuth

Per creare nuove credenziali OAuth, segui questi passaggi:

  • Vai alla pagina Credenziali di Google Cloud. Assicurati di aver selezionato il progetto corretto nella parte superiore dello schermo.
  • Fai clic su CREA CREDENZIALI e scegli ID client OAuth dal 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 percorso completo per una route di callback per la tua applicazione. Ad esempio, https://my.domain.com/auth-callback o https://localhost:5000/callback. Creerai e gestirai questa route più avanti in questa procedura dettagliata. Puoi modificare o aggiungere altre route di questo tipo in qualsiasi momento.
    • Fai clic su CREA.
  • Viene visualizzata una finestra di dialogo con le credenziali appena create. Scegli l'opzione SCARICA JSON. Copia il file JSON scaricato nella directory del server.

Prerequisiti specifici per lingua

Per l'elenco più aggiornato dei prerequisiti, consulta il file README in ogni repository.

Python

Il nostro esempio di Python utilizza il framework Flask. Puoi scaricare il codice sorgente completo dai link forniti.

Se necessario, installa Python 3.7+ e assicurati che pip sia disponibile.

python3 -m ensurepip --upgrade

Ti consigliamo inoltre di configurare e attivare un nuovo ambiente virtuale Python.

python3 -m venv .classroom-addon-env
source .classroom-addon-env/bin/activate

Nei file di esempio scaricati è presente un file requirements.txt in ogni sottodirectory della procedura dettagliata. Puoi installare rapidamente le librerie richieste utilizzando pip. Utilizza i seguenti comandi 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 dei nodi richiesti utilizzando npm.

npm install

Java

Il nostro esempio di Java utilizza il framework Spring Boot. Puoi scaricare il codice sorgente completo dai link forniti.

Installa Java 11+ se non l'hai già installato sul tuo computer.

Le applicazioni Spring Boot possono utilizzare Gradle o Maven per gestire le build e le dipendenze. Questo esempio include il wrapper Maven che garantisce una build riuscita senza richiedere l'installazione di Maven.

Nella directory in cui hai scaricato o clonato il progetto, esegui i seguenti comandi per assicurarti di disporre dei prerequisiti per eseguire il progetto.

java --version
./mvnw --version

Oppure su Windows:

java -version
mvnw.cmd --version

Informazioni sui file

Le sezioni seguenti descrivono il layout delle directory di esempio.

Nomi delle directory

Ogni repository contiene diverse directory i cui nomi iniziano con un numero, ad esempio /01-basic-app/. I numeri corrispondono a passaggi specifici della procedura dettagliata. Ogni directory contiene un'app web completamente funzionale che implementa le funzionalità descritte in una particolare procedura dettagliata. Ad esempio, la /01-basic-app/ directory contiene l'implementazione finale della procedura dettagliata Creare un componente aggiuntivo.

Contenuti della directory

I contenuti della directory variano a seconda del linguaggio di implementazione:

Python

  • La directory principale contiene i seguenti file:

    • main.py : il punto di ingresso dell'applicazione Python. Specifica la configurazione del server che vuoi utilizzare in questo file, quindi eseguilo per avviare il server.
    • requirements.txt : i moduli Python necessari per eseguire l'app web. Questi possono essere installati automaticamente utilizzando pip install -r requirements.txt.
    • client_secret.json : il file client secret scaricato da Google Cloud. Tieni presente che questo non è incluso nell'archivio di esempio. Devi rinominare e copiare il file delle credenziali scaricato nella directory principale di ogni directory.

  • config.py : opzioni di configurazione per il server Flask.

  • La directory webapp contiene 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 file JavaScript ausiliari.

  • routes.py : i metodi di gestione per le route dell'applicazione web.

  • __init__.py : l'inizializzatore per il modulo webapp. Questo inizializzatore avvia il server Flask e carica le opzioni di configurazione impostate in config.py.

  • File aggiuntivi richiesti da un particolare passaggio della procedura dettagliata.

Node.js

Ogni passaggio della procedura dettagliata è disponibile nella propria <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 si trovano 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 per eseguire correttamente l'applicazione. Questa directory include quanto segue: + La directory java.com.addons.spring contiene i file Application.java e Controller.java. Il file Application.java è responsabile dell'esecuzione del server dell'applicazione, mentre il file Controller.java gestisce la logica dell'endpoint. + La directory resources contiene la directory templates con i file HTML e JavaScript. Contiene anche il application.properties file che specifica la porta su cui eseguire il server, il percorso del file del keystore e il percorso della templates directory. Questo esempio include il file del keystore nella resources directory. Puoi memorizzarlo dove preferisci, ma assicurati di aggiornare il application.properties file con il percorso di conseguenza.
    • pom.xml contiene le informazioni necessarie per creare il progetto e definire le dipendenze richieste.
    • .gitignore contiene i nomi dei file che non devono essere caricati in git. Assicurati di aggiungere il percorso del keystore in questo file .gitignore. Nell'esempio fornito, questo è secrets/*.p12 (lo scopo del keystore è descritto nella sezione seguente). Per la procedura dettagliata 2 e successive, devi includere anche il percorso del file client_secret.json per assicurarti di non includere i tuoi secret in un repository remoto. Per la procedura dettagliata 3 e successive, devi aggiungere il percorso del file del database H2 e della factory del datastore dei file. Ulteriori informazioni sulla configurazione di questi datastore sono disponibili nella terza procedura dettagliata sulla gestione delle visite ripetute.
    • mvnw e mvnw.cmd sono i file eseguibili del wrapper Maven per Unix e Windows, rispettivamente. 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 per il wrapper Maven.

Eseguire il server di esempio

Per testare il server, devi avviarlo. Segui queste istruzioni per eseguire il server di esempio nella lingua che preferisci:

Python

Credenziali OAuth

Crea e scarica le credenziali OAuth come descritto in precedenza. Inserisci il file JSON nella directory principale insieme al file di avvio del server dell'applicazione.

Configurare il server

Sono disponibili diverse opzioni per l'esecuzione del server web. Alla fine del file Python, aggiungi uno dei seguenti:

  1. localhost non protetto. Tieni presente che questa opzione è adatta solo per i test diretti in una finestra del browser. I domini non protetti non possono essere caricati nell'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)
    
  2. localhost protetto. Devi specificare una tupla di file di chiavi SSL per l'argomento ssl_context.

    if __name__ == "__main__":
      # Run the web app at https://localhost:5000.
      app.run(host="localhost",
              ssl_context=("localhost.pem", "localhost-key.pem"),
              debug=True)
    
  3. Server Gunicorn. Questa opzione è adatta per un server pronto per la produzione o per il deployment nel cloud. Ti consigliamo di impostare una variabile di ambiente PORT 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")
    

Avviare il server

Esegui l'applicazione Python per avviare il server come configurato nel passaggio precedente.

python main.py

Fai clic sull'URL visualizzato per visualizzare l'app web in un browser e verificare che sia in esecuzione correttamente.

Node.js

Configurare il server

Per eseguire il server tramite HTTPS, devi creare un certificato autofirmato utilizzato per eseguire l'applicazione tramite HTTPS. Queste credenziali devono essere salvate come sslcert/cert.pem e sslcert/key.pem nella cartella principale del repository. Potresti dover aggiungere queste chiavi al portachiavi del sistema operativo affinché il browser le accetti.

Assicurati che *.pem sia nel file .gitignore perché non vuoi eseguire il commit del file in git.

Avviare il server

Puoi eseguire l'applicazione con il seguente comando sostituendo step01 con il passaggio corretto che vuoi eseguire come server (ad esempio, step01 per 01-basic-app e step02 per 02-sign-in).

npm run step01

oppure

npm run step02

In questo modo viene avviato il server web all'indirizzo https://localhost:5000.

Puoi terminare il server con Control + C nel terminale.

Java

Configurare il server

Per eseguire il server tramite HTTPS, devi creare un certificato autofirmato utilizzato per eseguire l'applicazione tramite HTTPS.

Valuta la possibilità di utilizzare mkcert per lo sviluppo locale. Una volta installato mkcert, i seguenti comandi generano un certificato memorizzato localmente da eseguire tramite HTTPS.

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

Questo esempio include il file del keystore nella directory delle risorse. Puoi memorizzarlo dove preferisci, ma assicurati di aggiornare il file application.properties con il percorso di conseguenza. Il nome di dominio è il dominio su cui esegui il progetto (ad esempio, localhost).

Assicurati che *.p12 sia nel file .gitignore perché non vuoi eseguire il commit del file in git.

Avviare il server

Avvia il server eseguendo il metodo main nel file Application.java. In IntelliJ, ad esempio, puoi fare clic con il tasto destro del mouse su Application.java > Run 'Application' nella directory src/main/java/com/addons/spring oppure aprire il Application.java file per fare clic sulla freccia verde a sinistra della firma del metodomain(String[] args). In alternativa, puoi eseguire il progetto in una finestra del terminale:

./mvnw spring-boot:run

Oppure su Windows:

mvnw.cmd spring-boot:run

In questo modo viene avviato il server all'indirizzo https://localhost:5000 o alla porta specificata in application.properties.