Esta es la primera explicación en los complementos de Classroom .
En esta explicación, sentarás las bases para desarrollar una aplicación web y lo publicas como complemento de Classroom. Próximos pasos de la explicación expandir esta app.
En esta explicación, completarás lo siguiente:
- Crea un proyecto de Google Cloud nuevo para tu complemento.
- Crea una app web de esqueleto con marcadores de posición de botones de acceso.
- Publica una ficha de Play Store de Google Workspace Marketplace para tu complemento.
Cuando termines, puedes instalar el complemento y cargarlo en la Iframe de complementos de Classroom
Requisitos previos
Elige un idioma para ver los requisitos previos adecuados:
Python
Nuestro ejemplo de Python utiliza el framework de Flask. Puedes descargar la versión completa
código fuente para todas las explicaciones de la página Descripción general. El código de esta
en el directorio /flask/01-basic-app/
.
Si es necesario, instala Python 3.7 y asegúrate de que pip
esté disponible.
python -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
Cada subdirectorio de explicación en los ejemplos descargados contiene un
requirements.txt
Puedes instalar rápidamente las bibliotecas requeridas con
pip
Usa el siguiente comando para instalar las bibliotecas necesarias para esto
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 Completa el código fuente para todas las explicaciones de la página Descripción general.
Si es necesario, instala NodeJS v16.13 .
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 para todas las explicaciones de la página Descripción general.
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.
Para poder ejecutar el ejemplo proporcionado, ejecuta los siguientes comandos en el en el que descargaste el proyecto para asegurarte de que los requisitos previos para ejecutar el proyecto.
java --version
./mvnw --version
O en Windows:
java -version
mvnw.cmd --version
Configura un proyecto de Google Cloud
Acceso a la API de Classroom y los métodos de autenticación requeridos y están controlados por proyectos de Google Cloud. Las siguientes instrucciones te guiarán los pasos mínimos para crear y configurar un proyecto nuevo para usar con tu complemento.
Crea el proyecto
Para crear un proyecto de Google Cloud nuevo, visita la página de creación de proyectos. Puedes proporcionarle cualquier nombre al proyecto nuevo. Haz clic en Crear.
El proyecto nuevo tarda unos minutos en crearse por completo. Cuando termines, asegúrate de seleccionar el proyecto. puedes elegirla en el selector de proyectos menú desplegable en la parte superior de la pantalla o haz clic en SELECCIONAR PROYECTO en el de notificaciones en la esquina superior derecha.
Conecta el SDK de Google Workspace Marketplace al proyecto de Google Cloud
Ve al navegador de la Biblioteca de API. Busca
Google Workspace Marketplace SDK
El SDK debería aparecer en la lista
resultados.
Selecciona la tarjeta del SDK de Google Workspace Marketplace y, luego, haz clic en Habilitar.
Configura el SDK de Google Workspace Marketplace
Google Workspace Marketplace proporciona la ficha a través de la cual los usuarios y los administradores instalan el complemento. Configura el La configuración de la app y el almacenamiento del SDK de Marketplace ficha y la pantalla de consentimiento de OAuth para continuar.
Configuración de la app
Navega a la página Configuración de la app del SDK de Marketplace. Proporcione la siguiente información:
Establece la Visibilidad de la app en
Public
oPrivate
.- La configuración pública está destinada a las apps que se lanzarán con el tiempo. a los usuarios finales. Una aplicación pública debe pasar por un proceso de aprobación antes de para los usuarios finales, pero puedes especificar aquellos que pueden instalar pruébalo como borrador. Este es un estado previo a la publicación que permitirá que pruebes y desarrolles el complemento antes de enviarlo para su aprobación.
- El parámetro de configuración privado es adecuado para pruebas internas y desarrollo. R aplicación privada solo la pueden instalar los usuarios del mismo dominio que se creó el proyecto. Por lo tanto, debes configurar la visibilidad como privada Solo si el proyecto se creó en un dominio con una cuenta de Google Workspace for Education de suscripción. De lo contrario, los usuarios de prueba no podrán iniciar Complementos de Classroom.
Establece Installation Settings en
Admin Only install
si lo deseas restringir la instalación a los administradores del dominio.En Integración de apps, selecciona Complemento de Classroom. Está se solicita el URI de configuración de archivos adjuntos seguro. esta es la URL en la que que se espera que se carguen cuando un usuario abra el complemento. A los efectos de este documento, esto debería ser
https://<your domain>/addon-discovery
.Los prefijos de URI de archivos adjuntos permitidos se usan para validar los URI establecidos en
AddOnAttachment
concourses.*.addOnAttachments.create
ycourses.*.addOnAttachments.patch
. La validación es un literal con el prefijo de la cadena coinciden y no se permite el uso de comodines en esta tiempo. Agregue, al menos, el dominio raíz de su servidor de contenido, comohttps://localhost:5000/
ohttps://cdn.myedtech.com/
.Agrega los mismos alcances de OAuth que los proporcionados en tu pantalla de consentimiento de OAuth. del paso anterior.
Completa los campos según corresponda para tu organización en la sección Desarrollador Vínculos
Ficha de Play Store
Navega a la página Ficha de Play Store del SDK de Marketplace. Proporcione la siguiente información:
- En Detalles de la app, agrega un idioma o expande el menú desplegable junto al idioma ya incluido. Proporcionar un Nombre de la Aplicación y descripciones estas aparecerán en la página de la ficha de Play Store de Google Workspace Marketplace de tu complemento. Haz clic en Listo para guardar los cambios.
- Elige una Categoría para tu complemento.
- En Recursos gráficos, proporciona imágenes para los campos obligatorios. Pueden se pueden cambiar más adelante y, por el momento, pueden ser marcadores de posición.
- En Vínculos de asistencia, proporciona las URLs solicitadas. Estas pueden ser marcadores de posición si estableciste la visibilidad de la aplicación como Privada en la paso.
Si en el paso anterior estableciste la visibilidad de la app como Privada, haz clic en PUBLICAR; Tu app está disponible para su instalación de inmediato. Si estableces Visibilidad Pública de la app, agrega direcciones de correo electrónico en el área Verificadores de borrador para los usuarios de prueba y haz clic en Guardar borrador.
Pantalla de consentimiento de OAuth
La pantalla de consentimiento de OAuth aparece cuando los usuarios autorizan tu app por primera vez. Presenta para que permita que la aplicación acceda a su información personal y de la cuenta, así como dictadas por los alcances que habilites.
Ve a la página de creación de la pantalla de consentimiento de OAuth. Proporciona lo siguiente información:
- Configura el Tipo de usuario como Externo. Haga clic en Crear.
- En la página siguiente, completa los detalles obligatorios de la app y la información de contacto. Proporciona los dominios que alojen la app en Dominios autorizados. Haz clic en GUARDAR Y CONTINUAR.
Agrega los permisos de OAuth que requiera tu aplicación web. Consulta el estándar OAuth de configuración para obtener información detallada sobre los alcances y su propósito.
Debes solicitar al menos uno de los siguientes alcances para que Google pueda envía el parámetro de consulta
login_hint
. Una explicación más detallada de esto está disponible en nuestra guía de configuración de OAuth:https://www.googleapis.com/auth/userinfo.email
(ya incluido)https://www.googleapis.com/auth/userinfo.profile
(ya incluido)
Los siguientes permisos son específicos de los complementos de Classroom:
https://www.googleapis.com/auth/classroom.addons.teacher
https://www.googleapis.com/auth/classroom.addons.student
Incluye también otros permisos de la API de Google que tu app requiera usuarios.
Haz clic en GUARDAR Y CONTINUAR.
Enumera las direcciones de correo electrónico de cualquier cuenta de prueba en la página Usuarios de prueba. Haz clic en GUARDAR Y CONTINUAR.
Confirma que la configuración sea correcta y, luego, regresa al panel.
Instala el complemento
Ahora puedes instalar el complemento con el vínculo que se encuentra en la parte superior de la Página de la ficha de Play Store del SDK de Marketplace. Haz clic en la aplicación URL en la parte superior de la página para ver la ficha y, luego, selecciona Instalar.
Compila una app web básica
Configura una aplicación web de base con dos rutas. Próximos pasos de la explicación
expandir esta aplicación, así que, por ahora, solo crea una página de destino para el complemento
/addon-discovery
y una página de índice simulada /
para nuestro "sitio de la empresa".
Implementa estos dos extremos:
/
: Muestra un mensaje de bienvenida y un botón para cerrar la pestaña actual. y el iframe del complemento./addon-discovery
: Muestra un mensaje de bienvenida y dos botones, uno para cerrar. el iframe del complemento y uno para abrir un sitio web en una pestaña nueva.
Ten en cuenta que agregaremos botones para crear y cerrar ventanas o el iframe. Estos demostrar un método para abrir de manera segura al usuario en una pestaña nueva para autorización en la próxima explicación.
Crea un guion de utilidad
Crea un directorio static/scripts
. Crea un archivo nuevo addon-utils.js
. Agrega el
luego de dos funciones.
/**
* Opens a given destination route in a new window. This function uses
* window.open() so as to force window.opener to retain a reference to the
* iframe from which it was called.
* @param {string} destinationURL The endpoint to open, or "/" if none is
* provided.
*/
function openWebsiteInNewTab(destinationURL = '/') {
window.open(destinationURL, '_blank');
}
/**
* Close the iframe by calling postMessage() in the host Classroom page. This
* function can be called directly when in a Classroom add-on iframe.
*
* Alternatively, it can be used to close an add-on iframe in another window.
* For example, if an add-on iframe in Window 1 opens a link in a new Window 2
* using the openWebsiteInNewTab function, you can call
* window.opener.closeAddonIframe() from Window 2 to close the iframe in Window
* 1.
*/
function closeAddonIframe() {
window.parent.postMessage({
type: 'Classroom',
action: 'closeIframe',
}, '*');
};
Crea rutas
Implementa los extremos /addon-discovery
y /
.
Python
Configura el directorio de la aplicación
Para los fines de este ejemplo, estructura la lógica de la aplicación como una
módulo de Python. Este es el directorio webapp
en el ejemplo que proporcionamos.
Crea un directorio para el módulo de servidor, por ejemplo, webapp
. Mueve el
static
en el directorio del módulo. Crea un directorio template
.
en el directorio del módulo. tus archivos HTML van aquí.
Compila el módulo del servidor*
Crea el archivo __init__.py
en el directorio del módulo y agrega lo siguiente:
y declaraciones de registro.
from flask import Flask
import config
app = Flask(__name__)
app.config.from_object(config.Config)
# Load other module script files. This import statement refers to the
# 'routes.py' file described below.
from webapp import routes
Luego, crea un archivo para controlar las rutas de la app web. Este es
webapp/routes.py
en el ejemplo proporcionado. Implementa las dos rutas en esta
.
from webapp import app
import flask
@app.route("/")
def index():
return flask.render_template("index.html",
message="You've reached the index page.")
@app.route("/classroom-addon")
def classroom_addon():
return flask.render_template(
"addon-discovery.html",
message="You've reached the addon discovery page.")
Ten en cuenta que nuestras rutas pasan una variable message
a su respectivo
de Jinja. Esto es útil para identificar a qué página llegó el usuario.
Crea archivos de configuración y de inicio
En el directorio raíz de tu aplicación, crea main.py
y config.py
.
archivos. Configura tu clave secreta en config.py
.
import os
class Config(object):
# Note: A secret key is included in the sample so that it works.
# If you use this code in your application, replace this with a truly secret
# key. See https://flask.palletsprojects.com/quickstart/#sessions.
SECRET_KEY = os.environ.get(
'SECRET_KEY') or "REPLACE ME - this value is here as a placeholder."
En el archivo main.py
, importa el módulo y, luego, inicia el servidor Flask.
from webapp import app
if __name__ == "__main__":
# Run the application over HTTPs with a locally stored certificate and key.
# Defaults to https://localhost:5000.
app.run(
host="localhost",
ssl_context=("localhost.pem", "localhost-key.pem"),
debug=True)
Node.js
Las rutas se registran en el archivo app.js
con las siguientes líneas.
const websiteRouter = require('./routes/index');
const addonRouter = require('./routes/classroom-addon');
app.use('/', websiteRouter);
app.use('/addon-discovery', addonRouter);
Abre /01-basic-app/routes/index.js
y revisa el código. Esta ruta es
a la que se llega cuando el usuario final visita el sitio web de la empresa. La ruta renderiza un
con la plantilla de Handlebars index
y pasa la plantilla
Un objeto de datos que contiene las variables title
y message
.
router.get('/', function (req, res, next) {
res.render('index', {
title: 'Education Technology',
message: 'Welcome to our website!'
});
});
Abre la segunda ruta /01-basic-app/routes/classroom-addon.js
y revisa la información
el código. Se llega a esta ruta cuando la visita del usuario final usa el complemento. Aviso
que esta ruta utiliza la plantilla de Handlebars de discovery
y, además,
el diseño addon.hbs
para renderizar la página de manera diferente a la de la empresa
sitio web.
router.get('/', function (req, res, next) {
res.render('discovery', {
layout: 'addon.hbs',
title: 'Education Technology Classroom add-on',
message: `Welcome.`
});
});
Java
En el ejemplo de código de Java, se usan módulos para empaquetar la explicación secuencial
pasos. Dado que esta es la primera explicación, el código se encuentra en el
Módulo step_01_basic_app
. no se espera que implementes
proyecto usando módulos; sino que te sugerimos que compiles en un solo proyecto
a medida que sigas cada paso.
Crea una clase de controlador, Controller.java
en este proyecto de ejemplo, para
definir los extremos. En este archivo, importa la anotación @GetMapping
desde
la dependencia spring-boot-starter-web
.
import org.springframework.web.bind.annotation.GetMapping;
Incluye la anotación del controlador del framework de Spring encima de la clase definición para indicar el propósito de la clase.
@org.springframework.stereotype.Controller
public class Controller {
Luego, implementa las dos rutas y una ruta adicional para el manejo de errores.
/** Returns the index page that will be displayed when the add-on opens in a
* new tab.
* @param model the Model interface to pass error information that's
* displayed on the error page.
* @return the index page template if successful, or the onError method to
* handle and display the error message.
*/
@GetMapping(value = {"/"})
public String index(Model model) {
try {
return "index";
} catch (Exception e) {
return onError(e.getMessage(), model);
}
}
/** Returns the add-on discovery page that will be displayed when the iframe
* is first opened in Classroom.
* @param model the Model interface to pass error information that's
* displayed on the error page.
* @return the addon-discovery page.
*/
@GetMapping(value = {"/addon-discovery"})
public String addon_discovery(Model model) {
try {
return "addon-discovery";
} catch (Exception e) {
return onError(e.getMessage(), model);
}
}
/** Handles application errors.
* @param errorMessage message to be displayed on the error page.
* @param model the Model interface to pass error information to display on
* the error page.
* @return the error page.
*/
@GetMapping(value = {"/error"})
public String onError(String errorMessage, Model model) {
model.addAttribute("error", errorMessage);
return "error";
}
Prueba el complemento
Inicia tu servidor. Luego, accede a Google Classroom como tal. de tus Usuarios de prueba profesores. Navega a la pestaña Trabajo en clase y crea una nueva. Cesión. Selecciona tu complemento en el selector Complementos. Se abre el iframe. y el complemento carga el URI de configuración de archivos adjuntos que especificaste en el Página Configuración de la app del SDK de Marketplace
¡Felicitaciones! Ya puedes continuar con el siguiente paso: cómo acceder a los usuarios con el SSO de Google.