Aplicación práctica de Google Apps Script: acceso a Hojas de cálculo de Google, Maps y Gmail con 4 líneas de código

1. Introducción a Google Apps Script

En este codelab, te presentaremos una de las formas más fáciles de escribir código que te brinda acceso a las tecnologías para desarrolladores de Google. Todo se realiza aplicando JavaScript, un lenguaje de desarrollo web convencional. Con Google Apps Script, escribirás código para extraer una dirección de una celda en una hoja de cálculo de Google, generar un mapa de Google Maps basado en la dirección y, luego, enviar el mapa como un archivo adjunto con Gmail. ¿Cuál es la mejor parte? Solo serán cuatro líneas de código.

Qué aprenderás

  • Cómo usar Google Apps Script con varios servicios de Google, como Hojas de cálculo de Google, Google Maps y Gmail
  • Desarrollar código con el editor integrado en el navegador para Apps Script

Requisitos

  • Un navegador web con acceso a Internet
  • Una Cuenta de Google (es posible que las cuentas de Google Workspace requieran la aprobación del administrador)
  • Conocimientos básicos de Hojas de cálculo de Google
  • Capacidad de leer la notación A1 de Hojas de cálculo

2. Encuesta

¿Cómo usarás este codelab o instructivo?

Ler Leer y completar los ejercicios

¿Cómo calificarías tu experiencia con las APIs y las herramientas para desarrolladores de Google Workspace?

Principiante Intermedio Avanzado

3. Descripción general

Ahora que sabes de qué se trata este codelab, ¿qué harás exactamente?

  1. Aprende un poco sobre Apps Script, que se basa en JavaScript.
  2. Crea una hoja de cálculo de Hojas de cálculo de Google.
  3. Ingresa una dirección en la celda superior izquierda de la hoja de cálculo (A1).
  4. Aprende a abrir el editor de Apps Script para cualquier documento.
  5. Editar el código de Apps Script, guardarlo y ejecutarlo
  6. Usa Gmail para ver el resultado.

Empecemos.

¿Qué es Google Apps Script?

Google Apps Script es una plataforma de desarrollo que agiliza y facilita la creación de secuencias de comandos y aplicaciones pequeñas que se integran con Google Workspace. Con Apps Script, puedes realizar las siguientes acciones:

  • Escribe código en JavaScript y accede a bibliotecas integradas para aplicaciones de Google Workspace, como Gmail, Calendario, Drive, etcétera.
  • No tienes que instalar nada, ya que te proporcionamos un editor de código directamente en tu navegador, y tus secuencias de comandos se ejecutan en los servidores de Google.
  • No tienes que preocuparte por temas complejos, como la seguridad y los permisos de acceso a los datos, ya que la plataforma se encarga de todo.

Apps Script se puede usar para crear varias aplicaciones, desde bots de chat hasta apps web. Uno de los usos más populares es extender la funcionalidad de una hoja de cálculo de Google Sheets. En el resto de este codelab, aprenderás a usar Apps Script para tomar datos de una hoja de cálculo y conectarlos a otros servicios de Google.

4. Crea una hoja de cálculo de Google y, luego, ingresa una dirección

En una nueva hoja de cálculo de Google, ingresa una dirección válida siguiendo estas instrucciones:

  1. Crea una hoja de cálculo de Google con este vínculo útil (sheets.google.com/create). Como alternativa, ve a tu Google Drive (drive.google.com) y haz clic en Nuevo > Hojas de cálculo de Google > Hoja de cálculo en blanco.

413a93e5b2f6b3d4.png

  1. En la hoja de cálculo en blanco, ve a la primera celda en la esquina superior izquierda (A1). Estará en la columna A y la fila 1. Si necesitas volver a familiarizarte con ella, puedes consultar esta descripción de la notación A1.
  2. Ingresa una dirección válida en la celda. Elige una dirección en el mundo con una ubicación exacta usando una dirección, un código postal o una combinación de ciudad y estado o provincia. Este es un ejemplo de una dirección en la ciudad de Nueva York:

7077e446455639df.png

Eso es todo lo que tienes que hacer en la hoja de cálculo. Abramos el editor y escribamos algo de código.

5. Edite código de Apps Script

Ahora que tienes una nueva hoja de cálculo de Google, es hora de editar su secuencia de comandos vinculada. Sigue estas instrucciones:

Abre el editor de secuencias de comandos

En la barra de menú, selecciona Extensiones > Apps Script para abrir el editor de código del navegador para Apps Script.

En una pestaña nueva del navegador, el editor de código muestra la secuencia de comandos vinculada al contenedor predeterminada para la hoja. Se crea automáticamente una función predeterminada llamada myFunction() y el cursor se coloca dentro de la función para que puedas comenzar.

Enviar por correo electrónico un mapa de Google de la dirección

El código de "plantilla" que recibiste está vacío, así que reemplacémoslo con nuestra aplicación.

  1. En el editor de secuencias de comandos, reemplaza el bloque de código myFunction() predeterminado por el siguiente código:
/** @OnlyCurrentDoc */
function sendMap() {
  var sheet = SpreadsheetApp.getActiveSheet();
  var address = sheet.getRange('A1').getValue();
  var map = Maps.newStaticMap().addMarker(address);
  GmailApp.sendEmail('YOUR_EMAIL_ADDR', 'Map', 'See below.', {attachments:[map]});
}
  1. Reemplaza la dirección de correo electrónico del marcador de posición ('YOUR_EMAIL_ADDR') por una válida. Por ejemplo, friend@example.com.
  2. Para guardar el script, haz clic en Guardar guardar.
  3. Para cambiar el nombre de tu proyecto de Apps Script, haz clic en Proyecto sin título, ingresa un título para tu proyecto y haz clic en Cambiar nombre.

Revisión de código

Revisemos las 4 líneas de la función sendMap() que componen toda la aplicación. Curiosamente, el código hace referencia a 3 productos diferentes de Google.

La primera línea es un comentario de anotación que afecta la autorización:

/** @OnlyCurrentDoc */

La mayoría de las secuencias de comandos le solicitan al usuario algunos permisos antes de poder ejecutarse. Estos permisos controlan lo que el usuario permite que haga la secuencia de comandos. La primera línea es un comentario que contiene una anotación opcional que le indica a Apps Script que limite el acceso a la hoja de cálculo actual (en lugar de a todas las hojas de cálculo del usuario). Siempre es una práctica recomendada incluir esta anotación cuando solo trabajas con un solo archivo.

El código usa una declaración de función de JavaScript normal para sendMap():

function sendMap() {

La siguiente línea llama al servicio de hoja de cálculo, al que se puede acceder desde Apps Script por medio del objeto SpreadsheetApp. La hoja que se muestra como resultado se asigna a una variable del mismo nombre. El método getActiveSheet() obtiene una referencia al objeto de hoja actual y la almacena en la variable sheet.

  var sheet = SpreadsheetApp.getActiveSheet();

Con el objeto sheet, hacemos referencia al rango de celdas (de una sola celda) en notación A1 con getRange(). Un "rango" es un grupo de celdas, que puede incluir solo una, como la celda A1 (en la que ingresamos la dirección). Para recuperar lo que hay dentro del rango, el método getValue() devuelve el valor de la celda superior izquierda del rango y lo asigna a la variable address. También puedes intentar agregar más direcciones y leer desde diferentes celdas.

  var address = sheet.getRange('A1').getValue();

La tercera línea de código se conecta al servicio de Maps de Google con el objeto Maps. newStaticMap() crea un objeto de mapa estático, y el método addMarker() agrega un "marcador" al mapa con la dirección de la hoja.

  var map = Maps.newStaticMap().addMarker(address);

Por último, el servicio de Gmail a través del objeto MailApp llama al método sendEmail() para enviar el correo electrónico que incluye el texto "See below." y la imagen del mapa como un archivo adjunto.

  GmailApp.sendEmail('friend@example.com', 'Map', 'See below.', {attachments:[map]});
}

6. Ejecuta las aplicaciones de Hojas de cálculo de Google, Maps y Gmail

Una vez que le asignes un nombre y la guardes, es momento de ejecutar la función. En la parte superior del editor, asegúrate de que sendMap() esté seleccionado en la lista de funciones y haz clic en Ejecutar.

Una de las funciones de Apps Script que valoran los desarrolladores es que no es necesario escribir código de autorización que otorgue al programa acceso a los datos del usuario. Aunque Apps Script administra esto, los usuarios de tu app todavía deben otorgar permiso a la secuencia de comandos para que acceda a sus hojas de cálculo y envíe correos electrónicos a través de Gmail. El primer diálogo de autorización se ve de la siguiente manera:

ba6e1a798e404e0d.png

Haz clic en Revisar permisos para continuar.

A continuación, aparecerá la ventana de diálogo de OAuth2, que le solicitará permiso para acceder a su hoja y para enviar correos electrónicos en su nombre:

9bed7ef1ccbd7569.png

Después de que otorgues permiso, la secuencia de comandos se ejecutará hasta su finalización.

Verifica la cuenta de correo electrónico a la que enviaste el mensaje. Deberías encontrar un correo electrónico con el asunto "Map" y un mensaje que se vea así:

51f61fc51a13d28f.png

Cuando abras el archivo adjunto en el mensaje de correo electrónico, deberías ver un mapa de Google Maps con un marcador en la dirección que ingresaste en la hoja:

739bb45b75e3f7c7.png

Con solo cuatro líneas de código, accediste a 3 productos diferentes de Google de manera significativa.

7. Recursos adicionales

El código que aparece en este codelab también está disponible en su repositorio de GitHub en github.com/googleworkspace/apps-script-intro-codelab. A continuación, encontrarás más recursos que te ayudarán a analizar en profundidad el material que vimos en este codelab y a explorar otras formas de acceder a las herramientas para desarrolladores de Google de manera programática.

Documentación

Videos

Novedades y actualizaciones

Otros codelabs

Introductorio

Intermedio

Aplicaciones de referencia