Conecta y visualiza todos tus datos en Looker Studio

1. Introducción

Looker Studio te permite crear paneles interactivos en vivo con visualizaciones de datos atractivas de forma gratuita. Recopila tus datos de diversas fuentes y crea informes ilimitados en Looker Studio, con capacidades completas de edición y uso compartido. En la siguiente captura de pantalla, se muestra un ejemplo de un panel de Looker Studio:

( Haz clic aquí para ver este informe de ejemplo en Looker Studio)

Community Connectors es una función de Looker Studio que te permite usar Apps Script para crear conectores a cualquier fuente de datos accesible a través de Internet. Los conectores comunitarios son creados por la comunidad de Looker Studio. Esto significa que cualquier persona puede crear conectores de la comunidad. También puedes compartir los conectores de la comunidad con otras personas para que puedan acceder a sus propios datos desde Looker Studio.

Puedes usar los conectores de comunidad en diferentes casos de uso:

• Visualizas datos de una plataforma comercial (p. ej., redes sociales, marketing, análisis, etc.).
• Visualizas datos empresariales locales (p. ej., datos de ventas de una base de datos MySQL local).
• Proporcionas una forma para que tus clientes visualicen sus datos desde tu servicio.
• Estás creando una plataforma de informes con botones
• Visualizas tus propios datos de una fuente web (p. ej., creas tu panel de Google Fit).

Qué aprenderás

• Cómo funciona un conector comunitario de Looker Studio
• Cómo usar Google Apps Script para crear un conector de comunidad
• Cómo usar los conectores de la comunidad en Looker Studio

Requisitos

• Acceso a Internet y un navegador web
• Una Cuenta de Google
• Conocimientos básicos de JavaScript y las APIs web

2. Encuesta rápida

¿Por qué elegiste este codelab?

Me interesa la visualización de datos en general. Quiero obtener más información sobre Looker Studio Quiero crear mi propio conector de comunidad. Estoy intentando integrar Looker Studio con otra plataforma. Me interesan las soluciones de Google Cloud.

¿Cómo planeas usar este codelab o instructivo?

Solo lo leeré Lo leeré y completaré los ejercicios

¿Cómo calificarías tu nivel de familiaridad con Looker Studio?

Nunca lo escuché nombrar Sé lo que es, pero no lo uso. La uso con frecuencia. Soy un usuario experto.

¿Cuál de las siguientes opciones describe mejor tu experiencia?

Desarrollador Analista de negocios, finanzas o datos Científico de datos o ingeniero de datos Especialista en marketing, redes sociales o análisis digitales Diseñador Otro

Puedes pasar a la siguiente página para enviar la información de la encuesta.

3. Descripción general de los conectores de comunidad

Los conectores de comunidad de Looker Studio permiten conexiones directas desde Looker Studio a cualquier fuente de datos accesible a través de Internet. Puedes conectarte a plataformas comerciales, conjuntos de datos públicos o tus propios datos privados locales. Los conectores de la comunidad pueden recuperar datos a través de APIs web, APIs de JDBC, archivos planos (CSV, JSON, XML) y servicios de Apps Script.

Considera una situación en la que publicaste un paquete en npm y deseas hacer un seguimiento de la cantidad de descargas del paquete a lo largo del tiempo por día. En este codelab, compilarás un conector de comunidad que recupera datos con la API de recuento de descargas de paquetes de npm. Luego, se puede usar el conector de comunidad en Looker Studio para crear un panel que visualice los recuentos de descargas.

4. Flujo de trabajo del conector de comunidad

En un conector comunitario básico, definirás cuatro funciones:

• getAuthType()
• getConfig()
• getSchema()
• getData()

Según el paso actual del flujo de trabajo, Looker Studio ejecuta estas funciones del conector y usa la respuesta en los pasos posteriores. En el siguiente video, se proporciona una descripción general de lo siguiente:

• Cómo funciona un conector de comunidad
• Diferentes pasos en el flujo de trabajo
• Cuándo se llaman diferentes funciones
• Cuándo Looker Studio muestra diferentes interfaces de usuario
• Acciones esperadas del usuario en diferentes pasos

Puedes reanudar el codelab después de mirar el video.

No es necesario que memorices este flujo de trabajo, solo échale un vistazo para tener una idea de lo que sucede en un conector. Siempre puedes volver a este diagrama.

En el siguiente paso, comenzarás a crear tu conector en Google Apps Script. Deberás alternar entre la IU de Apps Script y este codelab.

5. Configura tu proyecto de Apps Script

Paso 1: Visita Google Apps Script.

Paso 2: Haz clic en "+ Nuevo proyecto" en la sección superior izquierda para crear un nuevo proyecto de Apps Script.

Verás un proyecto de shell con una función myFunction en blanco en el archivo Code.gs.

Paso 3: Borra la función myFunction.

Paso 4: Asigna un nombre al proyecto:

1. Haz clic en Untitled project en la parte superior izquierda de la página.
2. Ingresa un título para el proyecto.

Comienza a escribir el código del conector en el archivo Code.gs.

6. Define getAuthType()

Looker Studio llamará a la función getAuthType() cuando necesite conocer el método de autenticación que usa el conector. Esta función debe devolver el método de autenticación que requiere el conector para autorizar el servicio de terceros.

Para el conector de descargas de npm que estás creando, no necesitas autenticarte con ningún servicio de terceros, ya que la API que usas no requiere autenticación. Copia el siguiente código y agrégalo a tu archivo Code.gs:

Code.gs

var cc = DataStudioApp.createCommunityConnector();

function getAuthType() {
  var AuthTypes = cc.AuthType;
  return cc
    .newAuthTypeResponse()
    .setAuthType(AuthTypes.NONE)
    .build();
}

Aquí, indicas que tu conector no requiere ninguna autenticación de terceros (AuthTypes.NONE). Para ver todos los métodos de autenticación admitidos, consulta la referencia de AuthType().

7. Define getConfig()

Los usuarios de tu conector deberán configurarlo antes de poder comenzar a usarlo. La respuesta de la función getConfig() define las opciones de configuración que verán los usuarios. Looker Studio llama a la función getConfig() para obtener los detalles de configuración del conector. Según la respuesta proporcionada por getConfig(), Looker Studio renderizará la pantalla de configuración del conector y cambiará cierto comportamiento del conector.

En la pantalla de configuración, puedes proporcionar información o recibir la entrada del usuario con los siguientes elementos del formulario:

TEXTINPUT	Elemento de entrada	Es un cuadro de texto de una sola línea.
TEXTAREA	Elemento de entrada	Es un cuadro de área de texto de varias líneas.
SELECT_SINGLE	Elemento de entrada	Es un menú desplegable para opciones de selección única.
SELECT_MULTIPLE	Elemento de entrada	Es un menú desplegable para opciones de selección múltiple.
CHECKBOX	Elemento de entrada	Es una sola casilla de verificación que se puede usar para capturar valores booleanos.
INFO	Elemento de visualización	Es un cuadro de texto sin formato estático que se puede usar para proporcionar instrucciones o información al usuario.

Usa el elemento INFO para proporcionar instrucciones al usuario y un elemento TEXTINPUT para obtener el nombre del paquete de entrada del usuario. En la respuesta de getConfig(), agruparás estos elementos del formulario bajo la clave configParams.

Dado que la API a la que te conectas requiere la fecha como parámetro, establece dateRangeRequired en true en la respuesta getConfig(). Esto le indica a Looker Studio que proporcione períodos en todas las solicitudes de datos. Si tu fuente de datos no requiere la fecha como parámetro, puedes omitirla.

Agrega el siguiente código de getConfig()a tu archivo Code.gs, debajo del código existente para getAuthType():

Code.gs

function getConfig(request) {
  var config = cc.getConfig();
  
  config.newInfo()
    .setId('instructions')
    .setText('Enter npm package names to fetch their download count.');
  
  config.newTextInput()
    .setId('package')
    .setName('Enter a single package name')
    .setHelpText('e.g. googleapis or lighthouse')
    .setPlaceholder('googleapis');
  
  config.setDateRangeRequired(true);
  
  return config.build();
}

Según estos configParams, cuando uses el conector en Looker Studio, verás una pantalla de configuración como la siguiente. Pero hablaremos de eso más adelante.

Pasemos a la siguiente función: getSchema().

8. Cómo definir getSchema()

Looker Studio llama a la función getSchema() para obtener el esquema asociado con la configuración seleccionada por el usuario para el conector. Según la respuesta proporcionada por getSchema(), Looker Studio mostrará al usuario la pantalla de campos con todos los campos del conector.

Para cualquier configuración específica de tu conector, el esquema es una lista de todos los campos para los que el conector puede proporcionar datos. Un conector puede devolver un esquema diferente con campos diferentes según varias configuraciones. El esquema puede contener campos que recuperas de tu fuente de API, campos que calculas en Apps Script y campos que se calculan en Looker Studio con una fórmula de campo calculado. Tu conector proporciona los metadatos sobre cada campo del esquema, incluidos los siguientes:

• Nombre del campo
• Tipo de datos del campo
• Información semántica

Consulta las referencias de getSchema() y Field más adelante para obtener más información.

Según cómo realice la recuperación tu conector, el esquema puede ser fijo o calcularse de forma dinámica cuando se llama a getSchema(). Los parámetros de configuración de getConfig() definidos por el usuario se proporcionarán en el argumento request para la función getSchema().

Para este codelab, no necesitas acceder al argumento request. Obtendrás más información sobre el argumento request cuando escribas código para la función getData() en el siguiente segmento.

En el caso de tu conector, el esquema es fijo y contiene los siguientes 3 campos:

packageName	Nombre del paquete npm que proporciona el usuario
downloads	Cantidad de descargas del paquete de npm
day	Fecha del recuento de descargas

A continuación, se muestra el código de getSchema() para tu conector. La función de ayuda getFields() abstrae la creación de los campos, ya que tanto getSchema() como getData() necesitan esta funcionalidad. Agrega el siguiente código a tu archivo Code.gs:

Code.gs

function getFields(request) {
  var cc = DataStudioApp.createCommunityConnector();
  var fields = cc.getFields();
  var types = cc.FieldType;
  var aggregations = cc.AggregationType;
  
  fields.newDimension()
    .setId('packageName')
    .setType(types.TEXT);
  
  fields.newMetric()
    .setId('downloads')
    .setType(types.NUMBER)
    .setAggregation(aggregations.SUM);
  
  fields.newDimension()
    .setId('day')
    .setType(types.YEAR_MONTH_DAY);
  
  return fields;
}

function getSchema(request) {
  var fields = getFields(request).build();
  return { schema: fields };
}

Según este esquema, puedes esperar ver los siguientes campos en la pantalla de campos de Looker Studio cuando uses el conector en Looker Studio. Pero hablaremos más sobre eso cuando pruebes el conector.

Pasemos a nuestra última función: getData().

9. Define getData() : Parte 1

Looker Studio llama a la función getData() cada vez que necesita recuperar datos. Según la respuesta que proporcione getData(), Looker Studio renderizará y actualizará los gráficos en el panel. Es posible que se llame a getData() durante los siguientes eventos:

• El usuario agrega un gráfico al panel
• El usuario edita un gráfico
• El usuario visualiza el panel
• El usuario edita un filtro o un control de datos asociado.
• Looker Studio necesita una muestra de datos

No es necesario que copies ningún código de esta página, ya que copiarás el código

getData()

código en un paso posterior.

Información sobre el objeto request

Looker Studio pasa el objeto request con cada llamada a getData(). Revisa la estructura del objeto request a continuación. Esto te ayudará a escribir el código de tu función getData().

Estructura del objeto request

{
  configParams: object,
  scriptParams: object,
  dateRange: {
    startDate: string,
    endDate: string
  },
  fields: [
    {
      name: Field.name
    }
  ]
}

• El objeto configParams contendrá valores de configuración para los parámetros definidos en getConfig() y configurados por el usuario.
• El objeto scriptParams contendrá información pertinente para la ejecución del conector. No es necesario que lo uses para este codelab.
• dateRange contendrá el período solicitado si se solicitó en la respuesta de getConfig().
• fields contendrá la lista de nombres de los campos para los que se solicitan datos.

En el caso de tu conector, un ejemplo de request de la función getData() podría verse de la siguiente manera:

{
  configParams: {
    package: 'jquery'
  },
  dateRange: {
    startDate: '2017-07-16',
    endDate: '2017-07-18'
  },
  fields: [
    {
      name: 'day',
    },
    {
      name: 'downloads',
    }
  ]
}

En la llamada getData() del request anterior, solo se solicitan dos campos, aunque el esquema del conector tiene campos adicionales. En la siguiente página, se incluirá la respuesta de ejemplo para esta llamada a getData() y la estructura general de la respuesta de getData().

Nota

En este codelab, no usamos el parámetro request para getSchema(). Para getSchema(), el parámetro request solo contendrá configParams y scriptParams.

10. Define getData() : Parte 2

En la respuesta getData(), deberás proporcionar el esquema y los datos de los campos solicitados. Dividirás el código en tres segmentos:

• Crea un esquema para los campos solicitados.
• Recuperar y analizar datos de la API
• Transforma los datos analizados y filtra los campos solicitados.

No es necesario que copies ningún código de esta página, ya que copiarás el código

getData()

código en la página siguiente.

Esta es la estructura de getData() para tu conector.

function getData(request) {

  // TODO: Create schema for requested fields.
  
  // TODO: Fetch and parse data from API.
  
  // TODO: Transform parsed data and filter for requested fields.

  return {
    schema: <filtered schema>,
    rows: <transformed and filtered data>
  };
}

Crea un esquema para los campos solicitados

// Create schema for requested fields
  var requestedFieldIds = request.fields.map(function(field) {
    return field.name;
  });
  var requestedFields = getFields().forIds(requestedFieldIds);

Recupera y analiza datos de la API

La URL de la API de npm tendrá este formato:

https://api.npmjs.org/downloads/point/{start_date}:{end_date}/{package}

Crea la URL de la API con los parámetros request.dateRange.startDate, request.dateRange.endDate y request.configParams.package que proporciona Looker Studio. Luego, recupera los datos de la API con UrlFetchApp(clase de Apps Script: referencia). Luego, analiza la respuesta recuperada.

  // Fetch and parse data from API
  var url = [
    'https://api.npmjs.org/downloads/range/',
    request.dateRange.startDate,
    ':',
    request.dateRange.endDate,
    '/',
    request.configParams.package
  ];
  var response = UrlFetchApp.fetch(url.join(''));
  var parsedResponse = JSON.parse(response).downloads;

Transforma los datos analizados y filtra los campos solicitados

La respuesta de la API de npm tendrá el siguiente formato:

{
  downloads: [
    {
    day: '2014-02-27',
    downloads: 1904088
    },
    ..
    {
    day: '2014-03-04',
    downloads: 7904294
    }
  ],
  start: '2014-02-25',
  end: '2014-03-04',
  package: 'somepackage'
}

Transforma la respuesta de la API de npm y proporciona la respuesta de getData() en el siguiente formato. Si este formato no es claro, consulta la respuesta de ejemplo en el siguiente párrafo.

{
  schema: [
    {
      object(Field)
    }
  ],
  rows: [
    {
      values: [string]
    }
  ]
}

En la respuesta, devuelve el esquema solo para los campos solicitados con la propiedad schema. Devolverás los datos con la propiedad rows como una lista de filas. Para cada fila, la secuencia de campos en values debe coincidir con la secuencia de campos en schema. Según nuestro ejemplo anterior de request, esta es la apariencia de la respuesta para getData():

{
  schema: requestedFields.build(),
  rows: [
    {
      values: [ 38949, '20170716']
    },
    {
      values: [ 165314, '20170717']
    },
    {
      values: [ 180124, '20170718']
    },
  ]
}

Ya creaste el subconjunto del esquema. Usa la siguiente función para transformar los datos analizados y filtrarlos para los campos solicitados.

function responseToRows(requestedFields, response, packageName) {
  // Transform parsed data and filter for requested fields
  return response.map(function(dailyDownload) {
    var row = [];
    requestedFields.asArray().forEach(function (field) {
      switch (field.getId()) {
        case 'day':
          return row.push(dailyDownload.day.replace(/-/g, ''));
        case 'downloads':
          return row.push(dailyDownload.downloads);
        case 'packageName':
          return row.push(packageName);
        default:
          return row.push('');
      }
    });
    return { values: row };
  });
}

11. Define getData() : Parte 3

El código getData() combinado se verá como el siguiente. Agrega el siguiente código a tu archivo Code.gs:

Code.gs

function responseToRows(requestedFields, response, packageName) {
  // Transform parsed data and filter for requested fields
  return response.map(function(dailyDownload) {
    var row = [];
    requestedFields.asArray().forEach(function (field) {
      switch (field.getId()) {
        case 'day':
          return row.push(dailyDownload.day.replace(/-/g, ''));
        case 'downloads':
          return row.push(dailyDownload.downloads);
        case 'packageName':
          return row.push(packageName);
        default:
          return row.push('');
      }
    });
    return { values: row };
  });
}

function getData(request) {
  var requestedFieldIds = request.fields.map(function(field) {
    return field.name;
  });
  var requestedFields = getFields().forIds(requestedFieldIds);

  // Fetch and parse data from API
  var url = [
    'https://api.npmjs.org/downloads/range/',
    request.dateRange.startDate,
    ':',
    request.dateRange.endDate,
    '/',
    request.configParams.package
  ];
  var response = UrlFetchApp.fetch(url.join(''));
  var parsedResponse = JSON.parse(response).downloads;
  var rows = responseToRows(requestedFields, parsedResponse, request.configParams.package);

  return {
    schema: requestedFields.build(),
    rows: rows
  };
}

¡Terminaste con el archivo Code.gs! A continuación, actualiza el manifiesto.

12. Actualiza el manifiesto

En el editor de Apps Script, selecciona Configuración del proyecto > Mostrar el archivo de manifiesto "appsscript.json" en el editor.

Esto creará un nuevo archivo de manifiesto appsscript.json.

Reemplaza tu archivo appscript.json por lo siguiente:

appsscript.json

{
  "timeZone": "America/Los_Angeles",
  "exceptionLogging": "STACKDRIVER",
  "runtimeVersion": "V8",

  "dataStudio": {
    "name": "npm Downloads - From Codelab",
    "logoUrl": "https://raw.githubusercontent.com/npm/logos/master/npm%20logo/npm-logo-red.png",
    "company": "Codelab user",
    "companyUrl": "https://developers.google.com/looker-studio/",
    "addonUrl": "https://github.com/googledatastudio/example-connectors/tree/master/npm-downloads",
    "supportUrl": "https://github.com/googledatastudio/community-connectors/issues",
    "description": "Get npm package download counts.",
    "sources": ["npm"]
  }
}

Guarda el proyecto de Apps Script.

¡Felicitaciones! Creaste tu primer conector comunitario y está listo para una prueba de manejo.

13. Prueba tu conector en Looker Studio

Usa la implementación

Paso 1: En el entorno de desarrollo de Apps Script, haz clic en Implementar > Implementaciones de prueba para abrir el diálogo Implementaciones de prueba.

Aparecerá la implementación predeterminada, Head Deployment.

Paso 2: Haz clic en Copiar para copiar el ID de implementación principal.

Paso 3: Para cargar tu conector en Looker Studio, reemplaza el marcador de posición <HEAD_DEPLOYMENT_ID> en el siguiente vínculo por el ID de implementación principal de tu conector y sigue el vínculo en tu navegador:

https://lookerstudio.google.com/datasources/create?connectorId=<HEAD_DEPLOYMENT_ID>

Autoriza el conector

Usuarios de Looker Studio por primera vez: Si nunca usaste Looker Studio, se te pedirá que lo autorices y que aceptes las condiciones. Completa el proceso de autorización. Cuando uses Looker Studio por primera vez, es posible que también veas un diálogo para actualizar tus preferencias de marketing. Regístrate en Anuncios de productos si quieres recibir por correo electrónico información sobre las funciones, las actualizaciones y los anuncios de productos más recientes.

Una vez que se cargue, verás un mensaje para autorizar tu conector.

Haz clic en Autorizar y proporciona la autorización requerida al conector.

Importante: Es posible que veas la siguiente advertencia cuando autorices el conector: "Google no verificó esta app". Como eres el autor del conector, puedes continuar el flujo de autorización haciendo clic en Opciones avanzadas -> Ir a <nombre de tu proyecto> (no seguro) en la parte inferior del diálogo.

Configura el conector

Una vez que se complete la autorización, se mostrará la pantalla de configuración. Escribe "lighthouse" en el área de entrada de texto y haz clic en Connect en la esquina superior derecha.

Confirma el esquema

Verás la pantalla de campos. Haz clic en Crear informe en la esquina superior derecha.

Crea tu panel

Estarás en el entorno del panel de Looker Studio. Haz clic en Agregar al informe.

En Looker Studio, cada vez que un usuario accede a un conector y agrega una configuración nueva, se crea una fuente de datos nueva en su cuenta de Looker Studio. Puedes pensar en una fuente de datos como una instancia del conector basada en una configuración específica. Según el conector y la configuración que haya seleccionado el usuario, una fuente de datos devolverá una tabla de datos con un conjunto específico de campos. Los usuarios pueden crear varias fuentes de datos a partir del mismo conector. Una fuente de datos se puede usar en varios informes, y el mismo informe puede usar varias fuentes de datos.

Ahora agrega un gráfico de serie temporal. En el menú, haz clic en Insertar > Serie temporal. Luego, coloca la serie temporal en el lienzo. Deberías ver un gráfico de series temporales del recuento de descargas de npm para el paquete seleccionado. Agrega un control de filtro de fecha y visualiza el panel como se muestra a continuación.

Eso es todo. Acabas de crear tu primer conector de comunidad. Con esto, llegaste al final de este codelab. Ahora, veamos qué pasos puedes seguir.

14. Próximos pasos

Mejora el conector que creaste

Realiza mejoras en el conector que acabas de compilar:

• En Looker Studio, si no proporcionas un nombre de paquete en la pantalla de configuración de tu conector, verás un mensaje de error cuando dibujes el gráfico de series temporales. Intenta agregar una validación de entrada o una opción predeterminada a la configuración del conector.
• Intenta agregar compatibilidad para consultar varios nombres de paquetes al mismo tiempo en la configuración del conector. Sugerencia: La API de recuentos de descargas de paquetes de npm admite la entrada de varios nombres de paquetes separados por comas.
• Puedes encontrar soluciones para ambos en nuestro código del conector de npm.

Haz más tareas con los conectores de comunidad

• Consulta la referencia de la API del conector y el manifiesto.
• Explora el código de ejemplo del conector en nuestro repositorio de código abierto para comprender las prácticas recomendadas.
• Completa el clasp Codelab para que puedas desarrollar conectores de comunidad en tu entorno local.
• Una vez que hayas creado un conector de comunidad completo, considera las opciones de publicación disponibles.
• Crea una visualización comunitaria para Looker Studio.

Recursos adicionales

A continuación, encontrarás varios recursos a los que puedes acceder para analizar en profundidad el material que vimos en este codelab.

Tipo de recurso	Funciones para el usuario	Funciones para desarrolladores
Documentación	Centro de ayuda	Documentación para desarrolladores
Novedades y actualizaciones	Regístrate en Looker Studio > Configuración del usuario	Lista de distribución para desarrolladores
Haz preguntas	Foro de usuarios	Stack Overflow [looker-studio]
Videos	DataVis DevTalk
Ejemplos	Galería de informes Galería de conectores	Repositorio de código abierto