Los complementos de Google Classroom ya están en fase de disponibilidad general para desarrolladores. Consulta la documentación sobre complementos para obtener más información.

Se usó la API de Cloud Translation para traducir esta página.

Explicaciones

Esta serie de explicaciones ilustran todas las partes móviles de un complemento de Classroom. Cada paso de la explicación aborda aspectos específicos de Terraform, implementarlos en una sola aplicación web. El objetivo es ayudarte configurar y lanzar un complemento funcional.

Tu complemento debe interactuar con un proyecto de Google Cloud. Si no estás familiarizado con Google Cloud, te recomendamos que leas las guías de introducción. Tú administras credenciales, el acceso a la API y el SDK de Google Workspace Marketplace en la Consola de Google Cloud Para obtener más información sobre el SDK de Marketplace, visita Google Workspace Marketplace ficha de Play Store.

En esta guía, se abarcan los siguientes temas:

Usa Google Cloud para crear una página que se mostrará en un iframe en en Classroom.
Agregar el inicio de sesión único (SSO) de Google y permitir que los usuarios accedan
Realiza llamadas a la API para adjuntar tu complemento a una tarea.
Aborda los requisitos clave de envío de complementos y las funciones requeridas.

En esta guía, se presupone que estás familiarizado con la programación y los conceptos básicos de desarrollo de software. Te recomendamos que leas la Configuración del proyecto manual antes de comenzar con las explicaciones. Esta página contiene información importante que no se tratan en su totalidad en las explicaciones.

Implementaciones de ejemplo

Hay un ejemplo de referencia completo disponible en Python. Implementaciones parciales también están disponibles en Java y Node.js. Estas implementaciones son las fuentes del código de ejemplo que se encuentran en páginas posteriores.

Dónde descargar

Los ejemplos de Python y Java están disponibles en repositorios de GitHub:

La muestra de Node.js se puede descargar como un archivo ZIP:

Archivo de Node.js

Requisitos previos

Revisa las siguientes secciones para preparar un nuevo proyecto de complementos.

Certificado HTTPS

Si bien puedes alojar tu app en cualquier entorno de desarrollo, El complemento de Classroom solo está disponible hasta https://. Por lo tanto, necesitas un servidor con encriptación SSL para implementar tu app o probarla en el iframe del complemento.

Es posible usar localhost con un certificado SSL. considera mkcert si debes crear un certificado para el desarrollo local.

Proyecto de Google Cloud

Debes configurar un proyecto de Google Cloud para usarlo con estos ejemplos. Consulta el de creación de proyectos de Google Cloud para obtener una descripción general de los recursos pasos para comenzar. La guía Configura un proyecto de Google Cloud de la primera explicación, también se explica la configuración específica acciones que realizar.

Cuando termines, descarga tu ID de cliente de OAuth 2.0 como un archivo JSON. debes agregar este archivo de credenciales en el directorio de ejemplo descomprimido. Consulta Comprende el archivos de ubicaciones específicas.

Credenciales de OAuth

Sigue estos pasos para crear credenciales de OAuth nuevas:

Navega a la página Credenciales de Google Cloud. Asegúrate de que que seleccionaste el proyecto correcto en la parte superior de la pantalla.
Haz clic en CREAR CREDENCIALES y elige el ID de cliente de OAuth en el menú desplegable.
En la siguiente página, sigue estos pasos:
- Configura el Tipo de aplicación como Aplicación web.
- En URI de redireccionamiento autorizados, haz clic en AGREGAR URI. Agreguen lo completo. path para una ruta de devolución de llamada para tu aplicación. Por ejemplo: https://my.domain.com/auth-callback o https://localhost:5000/callback Tú creas y manejas esta ruta más adelante en esta explicación. Puedes editar o agregar más rutas de este tipo en cualquier momento.
- Haz clic en CREAR.
Luego, recibirás un diálogo con tus credenciales recién creadas. Elige el DESCARGAR JSON. Copia el archivo JSON descargado en tu servidor .

Requisitos previos específicos para cada idioma

Consulta el archivo README en cada repositorio para obtener la lista más actualizada requisitos previos.

Python

Nuestro ejemplo de Python utiliza el framework de Flask. Puedes descargar el código fuente completo a través de los vínculos proporcionados.

Si es necesario, instala Python 3.7+ y asegúrate de que pip esté disponible.

python3 -m ensurepip --upgrade

También te recomendamos configurar y activar una nueva instancia en un entorno de nube.

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

Hay un requirements.txt en cada subdirectorio de la explicación en el ejemplos descargados. Puedes instalar rápidamente las bibliotecas requeridas con pip Usa los siguientes comandos para instalar las bibliotecas necesarias para la primera explicación.

cd flask/01-basic-app
pip install -r requirements.txt

Node.js

Nuestro ejemplo de Node.js usa el framework Express. Puedes descargar el código fuente completo de los vínculos proporcionados.

Este ejemplo requiere Node.js 16.13 o versiones posteriores.

Instala los módulos de nodo obligatorios con npm.

npm install

Java

Nuestro ejemplo de Java usa el framework de Spring Boot. Puedes descargar el código fuente completo de los vínculos proporcionados.

Instala Java 11+ si aún no lo tienes instalado en tu máquina.

Las aplicaciones de Spring Boot pueden usar Gradle o Maven para controlar compilaciones y administrar dependencias. Este ejemplo incluye el wrapper de Maven, que garantiza que se una compilación exitosa sin necesidad de instalar Maven.

En el directorio en el que descargaste o clonaste el proyecto, ejecuta el comando siguientes comandos para asegurarte de que tienes los requisitos previos para ejecutar el proyecto.

java --version
./mvnw --version

O en Windows:

java -version
mvnw.cmd --version

Cómo interpretar los archivos

En las siguientes secciones, se describe el diseño de los directorios de ejemplo.

Nombres de directorios

Cada repositorio contiene varios directorios cuyos nombres comienzan con un número, como /01-basic-app/. Los números corresponden a pasos específicos de la explicación. Cada directorio contiene una app web totalmente funcional que implementa las funciones como se describe en una explicación en particular. Por ejemplo, /01-basic-app/. contiene la implementación final de Cómo crear un complemento explicación.

Contenido del directorio

Los contenidos del directorio difieren según el lenguaje de implementación:

Python

La raíz del directorio contiene los siguientes archivos:
- main.py: Es el punto de entrada de la aplicación de Python. Especifica el servidor configuración que quieras usar en este archivo y, luego, ejecútala para iniciar el servidor.
- requirements.txt: Son los módulos de Python necesarios para ejecutar la aplicación web. Se pueden instalar automáticamente con pip install -r requirements.txt.
- client_secret.json: El archivo de secretos del cliente que se descarga de Google Google Cloud. Ten en cuenta que esto no se incluye en el archivo de ejemplo. tú debe cambiar el nombre del archivo de credenciales descargado y copiarlo en cada raíz del directorio.
  
  Importante: Debes proporcionar el archivo de secretos del cliente desde tu proyecto de Google Cloud antes de ejecutar los ejemplos.
config.py: Son las opciones de configuración para el servidor de Flask.
El directorio webapp incluye el contenido de la aplicación web. incluye lo siguiente:
El directorio /templates/ con plantillas de Jinja para varias páginas
El directorio /static/ con imágenes, CSS y JavaScript auxiliar archivos.
routes.py: Son los métodos de controlador de las rutas de la aplicación web.
__init__.py: El inicializador para el módulo webapp. Esta el inicializador inicia el servidor Flask y carga las opciones de configuración establecido en config.py.
Archivos adicionales según sea necesario para un paso de explicación en particular.

Node.js

Cada paso del recorrido se puede encontrar en su propio <step> subcarpeta. Cada paso contiene lo siguiente:

Los archivos estáticos, como JavaScript, CSS e imágenes, se encuentran en el ./<step>/public carpeta.
Los routers Express se encuentran en las carpetas ./<step>/routes.
Las plantillas HTML se encuentran en las carpetas ./<step>/views.
La aplicación del servidor es ./<step>/app.js.

Java

El directorio del proyecto incluye lo siguiente:

El directorio src.main contiene el código fuente y la configuración para ejecutar. la aplicación con éxito. Este directorio incluye lo siguiente: + java.com.addons.spring contiene las Archivos Application.java y Controller.java. El Application.java es responsable de ejecutar el del servidor de aplicaciones, mientras que el archivo Controller.java controla la lógica del extremo. + resources contiene el directorio templates con Archivos HTML y JavaScript. También contiene las application.properties que especifica el puerto para ejecutar la servidor, la ruta de acceso al archivo de almacén de claves y la ruta de acceso templates. En este ejemplo, se incluye el archivo de almacén de claves en el directorio resources. Puede almacenarla donde quiera que prefieras, pero asegúrate de actualizar application.properties con la ruta de acceso según corresponda.
- pom.xml contiene la información necesaria para compilar el proyecto y definir las dependencias necesarias.
- .gitignore contiene nombres de archivo que no deben subirse a Git. Asegúrate de agregar la ruta de acceso al almacén de claves en este .gitignore. En el ejemplo proporcionado, es secrets/*.p12 (el propósito de la se analiza el almacén de claves en la sección a continuación). Para la explicación 2 y también debes incluir la ruta hacia tu client_secret.json para asegurarte de no incluir tu de Secrets en un repositorio remoto. Para la Explicación 3 y posteriores, Debes agregar la ruta de acceso al archivo de la base de datos de H2 y al almacén de datos de archivos de producción. Puedes encontrar más información sobre la configuración de estos almacenes de datos que se encuentra en la tercera explicación sobre cómo manejar las visitas repetidas.
- mvnw y mvnw.cmd son los ejecutables wrapper de Maven para Unix y Windows, respectivamente. Por ejemplo, si ejecutas ./mvnw --version en Unix genera la versión de Maven de Apache, entre más información.
- El directorio .mvn contiene la configuración del wrapper de Maven.

Ejecuta el servidor de muestra

Debes iniciar tu servidor para probarlo. Sigue estas instrucciones para ejecuta el servidor de ejemplo en tu lenguaje preferido:

Python

Credenciales de OAuth

Crea y descarga tus credenciales de OAuth como se describió anteriormente. Lugar el archivo JSON en el directorio raíz junto con el servidor de tu aplicación iniciar archivo.

Configura el servidor

Tienes varias opciones para ejecutar el servidor web. Al final de tu Python, agrega una de las siguientes opciones:

localhost no seguro. Ten en cuenta que esto es adecuado para probar directamente solo en una ventana del navegador; los dominios no seguros no se pueden cargar en la iframe del complemento de 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)
```

Protege localhost. Debes especificar una tupla de archivos de claves SSL para la 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)

Gunicorn. Esto es adecuado para un servidor listo para la producción o la implementación en la nube. Recomendamos configurar una variable de entorno PORT para usar con esta opción de lanzamiento.

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")

Inicia el servidor

Ejecuta tu aplicación de Python para iniciar el servidor como se configuró en paso anterior.

python main.py

Haz clic en la URL que aparece para ver tu aplicación web en un navegador y confirmar lo siguiente: se esté ejecutando correctamente.

Node.js

Configura el servidor

Para ejecutar el servidor a través de HTTPS, debes crear un autocertificación que se usa para ejecutar la aplicación a través de HTTPS. Estas credenciales deben estar se guarda como sslcert/cert.pem y sslcert/key.pem en la raíz del repositorio carpeta. Es posible que debas agregar estas claves a tu cadena de claves del SO tu navegador para aceptarlas.

Asegúrate de que *.pem esté en tu archivo .gitignore porque no quieres para confirmar el archivo en Git.

Inicia el servidor

Puedes ejecutar la aplicación con el siguiente comando sustituyendo step01. para el paso correcto que deseas ejecutar como servidor (por ejemplo, step01 para 01-basic-app y step02 para el acceso de 02).

npm run step01

npm run step02

Esto inicia el servidor web en https://localhost:5000.

Puedes finalizar el servidor con Control + C en tu terminal.

Java

Configura el servidor

Para ejecutar el servidor a través de HTTPS, debes crear un autocertificación que se usa para ejecutar la aplicación a través de HTTPS.

Considera usar mkcert para el desarrollo local. Una vez que instales mkcert, los siguientes comandos generan un certificado almacenado localmente para ejecutar HTTPS

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

En este ejemplo, se incluye el archivo de almacén de claves en el directorio de recursos. Puedes guárdala donde prefieras, pero asegúrate de actualizar el application.properties con la ruta de acceso correspondiente. El nombre de dominio es el dominio en el que ejecutas el proyecto (por ejemplo, localhost)

Asegúrate de que *.p12 esté en tu archivo .gitignore porque no quieres para confirmar el archivo en Git.

Inicia el servidor

Inicia el servidor ejecutando el método main en Application.java . En IntelliJ, por ejemplo, puedes hacer clic con el botón derecho en Application.java Run 'Application' en la src/main/java/com/addons/spring o abre Application.java para hacer clic en la flecha verde que se encuentra a la izquierda de main(String[] args) método de firma de método. Como alternativa, puedes ejecutar el proyecto en una terminal ventana:

./mvnw spring-boot:run

o en Windows:

mvnw.cmd spring-boot:run

Esto inicia el servidor en https://localhost:5000 o en el puerto especificadas en application.properties.