En esta cuarta clase del curso de desarrollo de add-ons para Google Workspace vamos a crear nuestras primeras interfaces con cards y widgets a través de Google Apps Script.
En esta lección vamos a continuar viendo la documentación oficial de desarrollo de Google Workspace para ver cómo se diseñan y desarrollan las interfaces o UI de nuestro add-on. Los add-ons de Google Workspace están desarrollados con un lenguaje de programación propio de Google que está basado en Javascript y para escribir nuestro código utilizaremos Apps Script.
Además vamos a ver los tipos de eventos que tenemos en las cards, cómo se compone una card y los widgets que podemos insertar. Finalmente vamos a crear nuestro "hola mundo" con UI creando una pequeña interfaz de prueba e insertando el add-on modo de prueba en Gmail. ¡A por ello!
¡Así de fácil! Como podéis observar crear interfaces con código puede parecer tosco pero gracias al generador online y con algo de práctica, crear interfaces es de lo más sencillo.
La interfaz de nuestro add-on estará escrita a través de Apps Script y no tenemos ningún editor visual para poder crear estas interfaces. la idea es crear todos los objetos a través de código. Por suerte vamos a poder utilizar una web que nos permite generar y modificar libremente la UI de nuestras cards. Además genera el código para poder copiarlo y pegarlo en nuestro proyecto.
Ahora como deberes os animo a que investiguéis información sobre los diferentes widgets y los eventos que tienen internamente. Por ejemplo, podemos manipular el comportamiento de un Datepicker a través de un handler. Todo esto está en la documentación oficial. Pensad que al final todo es Javascript y por tanto podemos gestionar diferentes eventos y sucesos del flujo de nuestro add-on.
Ah! Recordad que si tenéis cualquier duda o comentario no dudéis en escribirnos a través del panel de soporte en boluda.com :)
Todos los capítulos de este curso:
- Curso de desarrollo de add-ons para Google Workspace #1. ¿Qué es un add-on y para qué sirve?
- Curso de desarrollo de add-ons para Google Workspace #2. Manifest, scopes y funcionamiento
- Curso de desarrollo de add-ons para Google Workspace #3. Nuestro primer add-on: Hello world
- Curso de desarrollo de add-ons para Google Workspace #4. Cards y widgets
- Curso de desarrollo de add-ons para Google Workspace #5. Integración con Gmail
- Curso de desarrollo de add-ons para Google Workspace #6. Integración con Calendar
- Curso de desarrollo de add-ons para Google Workspace #7. Integración con Drive
- Curso de desarrollo de add-ons para Google Workspace #8. Integración con Docs
- Curso de desarrollo de add-ons para Google Workspace #9. Add-ons que hacen peticiones API fuera de Google
- Curso de desarrollo de add-ons para Google Workspace #10. Publicación de nuestro add-on