Cette série de procédures pas à pas illustre tous les éléments d'un module complémentaire Classroom fonctionnel. Chaque étape du tutoriel aborde des concepts spécifiques et les implémente dans une seule application Web. L'objectif est de vous aider à configurer et à lancer un module complémentaire fonctionnel.
Votre module complémentaire doit interagir avec un projet Google Cloud. Si vous ne connaissez pas Google Cloud, nous vous recommandons de lire les guides de démarrage. Vous gérez les identifiants, l'accès aux API et le SDK Google Workspace Marketplace dans la console Google Cloud. Pour en savoir plus sur le SDK Marketplace, consultez la page du guide Fiche Google Workspace Marketplace.
Ce guide couvre les sujets suivants :
- Utilisez Google Cloud pour créer une page à afficher dans un iFrame dans Classroom.
- Ajoutez l'authentification unique (SSO) Google et autorisez les utilisateurs à se connecter.
- Effectuez des appels d'API pour associer votre module complémentaire à un devoir.
- Respectez les principales exigences concernant l'envoi de modules complémentaires et les fonctionnalités requises.
Ce guide part du principe que vous maîtrisez la programmation et les concepts fondamentaux du développement Web. Nous vous recommandons vivement de lire le guide de configuration du projet avant de commencer les procédures pas à pas. Cette page contient des informations de configuration importantes qui ne sont pas entièrement abordées dans les procédures pas à pas.
Exemples de mise en œuvre
Un exemple de référence complet est disponible en Python. Des implémentations partielles sont également disponibles en Java et Node.js. Ces implémentations sont les sources de l'exemple de code figurant sur les pages suivantes.
Où télécharger
Les exemples Python et Java sont disponibles dans les dépôts GitHub suivants :
L'exemple Node.js peut être téléchargé en tant que fichier zip :
Prérequis
Consultez les sections suivantes pour préparer un nouveau projet de modules complémentaires.
Certificat HTTPS
Bien que vous puissiez héberger votre application sur n'importe quel environnement de développement, votre module complémentaire Classroom n'est disponible que via https://
. Par conséquent, vous avez besoin d'un serveur avec chiffrement SSL pour déployer votre application ou la tester dans l'iframe du module complémentaire.
Il est possible d'utiliser localhost
avec un certificat SSL. Pensez à mkcert si vous devez créer un certificat pour le développement local.
Projet Google Cloud
Vous devez configurer un projet Google Cloud pour l'utiliser avec ces exemples. Consultez le guide Créer un projet Google Cloud pour obtenir une vue d'ensemble des étapes nécessaires pour commencer. La section Configurer un projet Google Cloud du premier tutoriel décrit également les actions de configuration spécifiques à effectuer.
Une fois terminé, téléchargez votre ID client OAuth 2.0 au format JSON. Vous devez ajouter ce fichier d'identifiants au répertoire d'exemple décompressé. Pour connaître les emplacements spécifiques, consultez Comprendre les fichiers.
Identifiants OAuth
Pour créer des identifiants OAuth, procédez comme suit :
- Accédez à la page Identifiants Google Cloud. Assurez-vous d'avoir sélectionné le bon projet en haut de l'écran.
- Cliquez sur CRÉER DES IDENTIFIANTS, puis sélectionnez ID client OAuth dans le menu déroulant.
- Sur la page suivante :
- Définissez le type d'application sur Application Web.
- Sous URI de redirection autorisés, cliquez sur AJOUTER UN URI. Ajoutez le chemin d'accès complet pour une route de rappel pour votre application. Par exemple,
https://my.domain.com/auth-callback
ouhttps://localhost:5000/callback
. Vous allez créer et gérer cette route plus tard dans ce tutoriel. Vous pouvez modifier ou ajouter d'autres itinéraires à tout moment. - Cliquez sur CRÉER.
- Vous recevez ensuite une boîte de dialogue contenant les identifiants que vous venez de créer. Sélectionnez l'option TÉLÉCHARGER LE JSON. Copiez le fichier JSON téléchargé dans le répertoire de votre serveur.
Conditions préalables spécifiques à une langue
Consultez le fichier README de chaque dépôt pour obtenir la liste la plus récente des prérequis.
Python
Notre exemple Python utilise le framework Flask. Vous pouvez télécharger le code source complet à partir des liens fournis.
Si nécessaire, installez Python 3.7 ou version ultérieure et assurez-vous que pip
est disponible.
python3 -m ensurepip --upgrade
Nous vous recommandons également de configurer et d'activer un nouvel environnement virtuel Python.
python3 -m venv .classroom-addon-env
source .classroom-addon-env/bin/activate
Un fichier requirements.txt
se trouve dans chaque sous-répertoire de procédure pas à pas des exemples téléchargés. Vous pouvez installer rapidement les bibliothèques requises à l'aide de pip
. Utilisez les commandes suivantes pour installer les bibliothèques requises pour le premier tutoriel.
cd flask/01-basic-app
pip install -r requirements.txt
Node.js
Notre exemple Node.js utilise le framework Express. Vous pouvez télécharger le code source complet à partir des liens fournis.
Cet exemple nécessite Node.js v16.13 ou version ultérieure.
Installez les modules de nœuds requis à l'aide de npm
.
npm install
Java
Notre exemple Java utilise le framework Spring Boot. Vous pouvez télécharger le code source complet à partir des liens fournis.
Installez Java 11 ou version ultérieure si ce n'est pas déjà fait sur votre ordinateur.
Les applications Spring Boot peuvent utiliser Gradle ou Maven pour gérer les compilations et les dépendances. Cet exemple inclut le wrapper Maven qui garantit une compilation réussie sans que vous ayez à installer Maven lui-même.
Dans le répertoire où vous avez téléchargé ou cloné le projet, exécutez les commandes suivantes pour vous assurer que vous disposez des prérequis pour exécuter le projet.
java --version
./mvnw --version
Ou sous Windows :
java -version
mvnw.cmd --version
Comprendre les fichiers
Les sections suivantes décrivent la mise en page des répertoires d'exemples.
Noms des répertoires
Chaque dépôt contient plusieurs répertoires dont le nom commence par un chiffre, comme /01-basic-app/
. Les numéros correspondent à des étapes spécifiques de la procédure.
Chaque répertoire contient une application Web entièrement fonctionnelle qui implémente les fonctionnalités décrites dans un tutoriel spécifique. Par exemple, le répertoire /01-basic-app/
contient l'implémentation finale de la procédure pas à pas Créer un module complémentaire.
Contenu du répertoire
Le contenu du répertoire diffère selon le langage d'implémentation :
Python
La racine du répertoire contient les fichiers suivants :
main.py
: point d'entrée de l'application Python. Spécifiez la configuration du serveur que vous souhaitez utiliser dans ce fichier, puis exécutez-le pour démarrer le serveur.requirements.txt
: modules Python requis pour exécuter l'application Web. Vous pouvez les installer automatiquement à l'aide depip install -r requirements.txt
.client_secret.json
: fichier de code secret du client téléchargé depuis Google Cloud. Notez que ce fichier n'est pas inclus dans l'archive d'exemple. Vous devez renommer et copier le fichier d'identifiants que vous avez téléchargé dans la racine de chaque répertoire.
config.py
: options de configuration du serveur Flask.Le répertoire
webapp
contient le contenu de l'application Web. Elle comprend les éléments suivants :Le répertoire
/templates/
avec les modèles Jinja pour différentes pages.Répertoire
/static/
contenant les images, les fichiers CSS et les fichiers JavaScript auxiliaires.routes.py
: méthodes de gestionnaire pour les routes de l'application Web.__init__.py
: initialiseur du modulewebapp
. Cet initialiseur démarre le serveur Flask et charge les options de configuration définies dansconfig.py
.Fichiers supplémentaires requis pour une étape spécifique du tutoriel.
Node.js
Chaque étape du tutoriel se trouve dans son propre sous-dossier <step>
. Chaque étape contient les éléments suivants :
- Les fichiers statiques tels que JavaScript, CSS et les images se trouvent dans le dossier
./<step>/public
. - Les routeurs Express se trouvent dans les dossiers
./<step>/routes
. - Les modèles HTML se trouvent dans les dossiers
./<step>/views
. - L'application de serveur est
./<step>/app.js
.
Java
Le répertoire du projet comprend les éléments suivants :
- Le répertoire
src.main
contient le code source et la configuration permettant d'exécuter l'application correctement. Ce répertoire inclut les éléments suivants : + Le répertoirejava.com.addons.spring
contient les fichiersApplication.java
etController.java
. Le fichierApplication.java
est responsable de l'exécution du serveur d'applications, tandis que le fichierController.java
gère la logique du point de terminaison. + Le répertoireresources
contient le répertoiretemplates
avec les fichiers HTML et JavaScript. Il contient également le fichierapplication.properties
qui spécifie le port sur lequel exécuter le serveur, le chemin d'accès au fichier keystore et le chemin d'accès au répertoiretemplates
. Cet exemple inclut le fichier keystore dans le répertoireresources
. Vous pouvez le stocker où vous le souhaitez, mais assurez-vous de mettre à jour le fichierapplication.properties
avec le chemin d'accès correspondant.pom.xml
contient les informations nécessaires pour compiler le projet et définir les dépendances requises..gitignore
contient des noms de fichiers qui ne doivent pas être importés dans Git. Veillez à ajouter le chemin d'accès à votre keystore dans ce.gitignore
. Dans l'exemple fourni, il s'agit desecrets/*.p12
(l'objectif du keystore est abordé dans la section ci-dessous). Pour le tutoriel 2 et les suivants, vous devez également inclure le chemin d'accès à votre fichierclient_secret.json
pour vous assurer de ne pas inclure vos secrets dans un dépôt distant. Pour les procédures pas à pas 3 et suivantes, vous devez ajouter le chemin d'accès au fichier de base de données H2 et à la fabrique de data store de fichier. Pour en savoir plus sur la configuration de ces magasins de données, consultez le troisième tutoriel sur la gestion des visites répétées.mvnw
etmvnw.cmd
sont les exécutables du wrapper Maven pour Unix et Windows, respectivement. Par exemple, l'exécution de./mvnw --version
sur Unix génère la version d'Apache Maven, entre autres informations.- Le répertoire
.mvn
contient la configuration du wrapper Maven.
Exécuter le serveur d'exemple
Vous devez lancer votre serveur pour le tester. Suivez ces instructions pour exécuter l'exemple de serveur dans la langue de votre choix :
Python
Identifiants OAuth
Créez et téléchargez vos identifiants OAuth comme décrit précédemment. Placez le fichier JSON dans le répertoire racine, à côté du fichier de lancement du serveur de votre application.
Configurer le serveur
Plusieurs options s'offrent à vous pour exécuter le serveur Web. À la fin de votre fichier Python, ajoutez l'un des éléments suivants :
localhost
non sécurisé. Notez que cette méthode ne convient que pour les tests directs dans une fenêtre de navigateur. Les domaines non sécurisés ne peuvent pas être chargés dans l'iFrame du module complémentaire 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)
Sécuriser
localhost
Vous devez spécifier un tuple de fichiers de clé SSL pour l'argumentssl_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)
Serveur Gunicorn. Cette option convient à un déploiement de serveur ou de cloud prêt pour la production. Nous vous recommandons de définir une variable d'environnement
PORT
à utiliser avec cette option de lancement.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")
Lancer le serveur
Exécutez votre application Python pour lancer le serveur tel qu'il a été configuré à l'étape précédente.
python main.py
Cliquez sur l'URL qui s'affiche pour afficher votre application Web dans un navigateur et vérifier qu'elle s'exécute correctement.
Node.js
Configurer le serveur
Pour exécuter le serveur via HTTPS, vous devez créer un certificat autosigné qui sera utilisé pour exécuter l'application via HTTPS. Ces identifiants doivent être enregistrés sous les noms sslcert/cert.pem
et sslcert/key.pem
dans le dossier racine du dépôt. Vous devrez peut-être ajouter ces clés à la chaîne de clés de votre OS pour que votre navigateur les accepte.
Assurez-vous que *.pem
se trouve dans votre fichier .gitignore
, car vous ne souhaitez pas valider le fichier dans Git.
Lancer le serveur
Vous pouvez exécuter l'application avec la commande suivante en remplaçant step01
par l'étape correcte que vous souhaitez exécuter en tant que serveur (par exemple, step01
pour 01-basic-app et step02
pour 02-sign-in).
npm run step01
ou
npm run step02
Le serveur Web est lancé sur https://localhost:5000
.
Vous pouvez arrêter le serveur avec Control + C
dans votre terminal.
Java
Configurer le serveur
Pour exécuter le serveur via HTTPS, vous devez créer un certificat autosigné qui sera utilisé pour exécuter l'application via HTTPS.
Envisagez d'utiliser mkcert pour le développement local. Une fois mkcert
installé, les commandes suivantes génèrent un certificat stocké localement pour s'exécuter sur HTTPS.
mkcert -install
mkcert -pkcs12 -p12-file <path_to_keystore> <domain_name>
Cet exemple inclut le fichier keystore dans le répertoire des ressources. Vous pouvez le stocker où vous le souhaitez, mais veillez à mettre à jour le fichier application.properties
avec le chemin d'accès correspondant. Le nom de domaine est celui sur lequel vous exécutez le projet (par exemple, localhost
).
Assurez-vous que *.p12
se trouve dans votre fichier .gitignore
, car vous ne souhaitez pas valider le fichier dans Git.
Lancer le serveur
Lancez le serveur en exécutant la méthode main
dans le fichier Application.java
. Dans IntelliJ, par exemple, vous pouvez effectuer un clic droit sur Application.java
> Run 'Application'
dans le répertoire src/main/java/com/addons/spring
ou ouvrir le fichier Application.java
pour cliquer sur la flèche verte à gauche de la signature de la méthode main(String[] args)
. Vous pouvez également exécuter le projet dans une fenêtre de terminal :
./mvnw spring-boot:run
Ou sous Windows :
mvnw.cmd spring-boot:run
Le serveur est alors lancé sur https://localhost:5000
ou sur le port que vous avez spécifié dans application.properties
.