Explicaciones

En esta serie de instructivos, se ilustran todas las partes móviles de un complemento de Classroom que funciona. Cada paso de la explicación aborda conceptos específicos y los implementa en una sola aplicación web. El objetivo es ayudarte a configurar, configurar y lanzar un complemento funcional.

El complemento debe interactuar con un proyecto de Google Cloud. Si no conoces Google Cloud, te recomendamos que leas las guías de introducción. Administras las 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 la página de la guía de la ficha de Google Workspace Marketplace.

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

• Usa Google Cloud para crear una página que se muestre en un iframe en Classroom.
• Agrega el inicio de sesión único (SSO) de Google y permite 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 obligatorias.

En esta guía, se supone que conoces los conceptos básicos de programación y desarrollo web. Te recomendamos que leas la Guía de configuración del proyecto antes de comenzar con las explicaciones. En esta página, se incluyen detalles importantes de la configuración que no se abordan por completo en las explicaciones paso a paso.

Implementaciones de ejemplo

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

Dónde descargar

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

• Repositorio de Python

• Repositorio de Java

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, tu complemento de Classroom solo está disponible a través de https://. Por lo tanto, necesitas un servidor con encriptación SSL para implementar tu app o probarla dentro del iframe del complemento.

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

Proyecto de Google Cloud

Debes configurar un proyecto de Google Cloud para usarlo con estos ejemplos. Consulta la guía de creación de proyectos de Google Cloud para obtener una descripción general de los pasos necesarios para comenzar. En la sección Configura un proyecto de Google Cloud de la primera explicación, también se describen las acciones de configuración específicas que debes realizar.

Cuando termines, descarga tu ID de cliente OAuth 2.0 como un archivo JSON. Debes agregar este archivo de credenciales al directorio de ejemplo descomprimido. Consulta Cómo interpretar los archivos para ver ubicaciones específicas.

Credenciales de OAuth

Punto clave: Tu app web debe usar credenciales de OAuth 2.0 administradas en Google Cloud.

Sigue estos pasos para crear credenciales de OAuth nuevas:

• Navega a la página Credenciales de Google Cloud. Asegúrate de tener seleccionado el proyecto correcto en la parte superior de la pantalla.
• Haz clic en CREATE CREDENTIALS y elige OAuth client ID en el menú desplegable.
• En la siguiente página, haz lo siguiente:
  • Establece el Tipo de aplicación en Aplicación web.
  • En URI de redireccionamiento autorizados, haz clic en AGREGAR URI. Agrega la ruta completa para una ruta de devolución de llamada de tu aplicación. Por ejemplo, https://my.domain.com/auth-callback o https://localhost:5000/callback. Crearás y controlarás 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 las credenciales que acabas de crear. Elige la opción DOWNLOAD JSON. Copia el archivo JSON descargado en el directorio del servidor.

Requisitos previos específicos del idioma

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

Python

En nuestro ejemplo de Python, se usa el framework de Flask. Puedes descargar el código fuente completo desde los vínculos proporcionados.

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

python3 -m ensurepip --upgrade

También te recomendamos que configures y actives un nuevo entorno virtual de Python.

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

Hay un requirements.txt en cada subdirectorio de la explicación en los 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 de Express. Puedes descargar el código fuente completo desde los vínculos proporcionados.

Este ejemplo requiere Node.js 16.13 o versiones posteriores.

Instala los módulos de nodo necesarios con npm.

npm install

Java

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

Instala Java 11 o versiones posteriores 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 una compilación correcta sin necesidad de instalar Maven.

En el directorio en el que tienes el proyecto descargado o clonado, ejecuta los siguientes comandos para asegurarte de tener los requisitos previos para ejecutarlo.

java --version
./mvnw --version

O en Windows:

java -version
mvnw.cmd --version

Comprende 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 completamente funcional que implementa las funciones descritas en una explicación particular. Por ejemplo, el directorio /01-basic-app/ contiene la implementación final de la explicación para crear un complemento.

Contenido del directorio

El contenido del directorio difiere 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 la configuración del servidor que deseas usar en este archivo y, luego, ejecútalo para iniciar el servidor.
  • requirements.txt: Son los módulos de Python necesarios para ejecutar la app web. Estos se pueden instalar automáticamente con pip install -r requirements.txt.

  • client_secret.json: Es el archivo del secreto del cliente que se descargó de Google Cloud. Ten en cuenta que esto no se incluye en el archivo de ejemplo. Debes cambiar el nombre del archivo de credenciales que descargaste y copiarlo en cada raíz de directorio.

    Importante: Debes proporcionar el archivo de secreto de cliente de tu proyecto de Google Cloud para poder ejecutar los ejemplos.

• config.py: Son opciones de configuración para el servidor de Flask.

• El directorio webapp contiene 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 archivos JavaScript secundarios

• routes.py: Son los métodos del controlador para las rutas de la aplicación web.

• __init__.py: Es el inicializador del módulo webapp. Este inicializador inicia el servidor de Flask y carga las opciones de configuración establecidas en config.py.

• Archivos adicionales según lo requiera un paso específico de la explicación.

Node.js

Cada paso de la explicación se puede encontrar en su propia subcarpeta <step>. Cada paso contiene lo siguiente:

• Los archivos estáticos, como JavaScript, CSS y las imágenes, se encuentran en la carpeta ./<step>/public.
• 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 correctamente. Este directorio incluye lo siguiente: + El directorio java.com.addons.spring contiene los archivos Application.java y Controller.java. El archivo Application.java es responsable de ejecutar el servidor de aplicaciones, mientras que el archivo Controller.java controla la lógica del extremo. + El directorio resources contiene el directorio templates con archivos HTML y JavaScript. También contiene el archivo application.properties que especifica el puerto para ejecutar el servidor, la ruta de acceso al archivo del almacén de claves y la ruta de acceso al directorio templates. En este ejemplo, se incluye el archivo de almacén de claves en el directorio resources. Puedes almacenarlo donde prefieras, pero asegúrate de actualizar el archivo 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 requeridas.
  • .gitignore contiene nombres de archivos que no se deben subir a git. Asegúrate de agregar la ruta de acceso al almacén de claves en esta .gitignore. En el ejemplo proporcionado, es secrets/*.p12 (el propósito del almacén de claves se analiza en la siguiente sección). Para la explicación paso a paso 2 y las posteriores, también debes incluir la ruta de acceso a tu archivo client_secret.json para asegurarte de no incluir tus secretos en un repositorio remoto. Para la explicación paso a paso 3 y las siguientes, debes agregar la ruta de acceso al archivo de la base de datos H2 y a la fábrica de almacenes de archivos. Puedes encontrar más información sobre la configuración de estos almacenes de datos en la tercera explicación sobre cómo controlar las visitas repetidas.
  • mvnw y mvnw.cmd son los ejecutables del wrapper de Maven para Unix y Windows, respectivamente. Por ejemplo, ejecutar ./mvnw --version en Unix muestra la versión de Apache Maven, entre otra información.
  • El directorio .mvn contiene la configuración del wrapper de Maven.

Ejecuta el servidor de ejemplo

Punto clave: Tu aplicación web solo se puede abrir en Google Classroom a través de HTTPS. Consulta la sección Certificado HTTPS para obtener más detalles.

Debes iniciar el servidor para probarlo. Sigue estas instrucciones para ejecutar el servidor de ejemplo en el idioma que elijas:

Python

Credenciales de OAuth

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

Configura el servidor

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

1. localhost no seguro. Ten en cuenta que esto es adecuado solo para realizar pruebas directamente en una ventana del navegador. Los dominios no seguros no se pueden cargar en el 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)
   

2. Proteger localhost. Debes especificar una tupla de archivos de claves SSL para el argumento 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. Servidor Gunicorn Esto es adecuado para un servidor listo para producción o una implementación en la nube. Recomendamos configurar una variable de entorno PORT para usarla con esta opción de inicio.

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

Cómo iniciar el servidor

Advertencia: Antes de iniciar el servidor, debes configurar un proyecto de Google Cloud para acceder a la API de Classroom y a las credenciales requeridas.

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

python main.py

Haz clic en la URL que aparece para ver tu app web en un navegador y confirmar que se ejecuta correctamente.

Node.js

Configura el servidor

Para ejecutar el servidor a través de HTTPS, debes crear un certificado autofirmado que se use para ejecutar la aplicación a través de HTTPS. Estas credenciales se deben guardar como sslcert/cert.pem y sslcert/key.pem en la carpeta raíz del repositorio. Es posible que debas agregar estas claves al llavero del SO para que el navegador las acepte.

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

Cómo iniciar el servidor

Advertencia: Antes de iniciar el servidor, debes configurar un proyecto de Google Cloud para acceder a la API de Classroom y a las credenciales requeridas.

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

npm run step01

o

npm run step02

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

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

Java

Configura el servidor

Para ejecutar el servidor a través de HTTPS, debes crear un certificado autofirmado que se use 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 generarán un certificado almacenado de forma local para ejecutarse a través de HTTPS.

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

En este ejemplo, se incluye el archivo del almacén de claves en el directorio de recursos. Puedes almacenarlo donde quieras, pero asegúrate de actualizar el archivo 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 confirmar el archivo en git.

Cómo iniciar el servidor

Advertencia: Antes de iniciar el servidor, debes configurar un proyecto de Google Cloud para acceder a la API de Classroom y a las credenciales requeridas.

Para iniciar el servidor, ejecuta el método main en el archivo Application.java. En IntelliJ, por ejemplo, puedes hacer clic con el botón derecho en Application.java > Run 'Application' en el directorio src/main/java/com/addons/spring o abrir el archivo Application.java para hacer clic en la flecha verde a la izquierda de la firma del método main(String[] args). Como alternativa, puedes ejecutar el proyecto en una ventana de terminal:

./mvnw spring-boot:run

o en Windows:

mvnw.cmd spring-boot:run

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