Conecta y visualiza todos tus datos en Looker Studio

1. Introducción

Looker Studio te permite crear paneles interactivos y en vivo con visualizaciones de datos atractivas y de forma gratuita. Recupera tus datos de una variedad de fuentes y crea informes ilimitados en Looker Studio, con funciones completas de edición y uso compartido. La siguiente captura de pantalla es un ejemplo de panel de Looker Studio:

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

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

Puedes usar Community Connectors en diferentes casos de uso:

• Estás visualizando datos de una plataforma comercial (p. ej., redes sociales, marketing, estadísticas, etcétera).
• Estás visualizando datos empresariales locales (por ejemplo, datos de ventas de una base de datos MySQL local)
• Les proporciona a sus clientes una forma de visualizar los datos que obtienen de su servicio
• Estás creando una plataforma de informes mediante un botón de activación
• Estás visualizando tus propios datos de una fuente web (p. ej., creando tu panel de Google Fit).

Qué aprenderás

• Cómo funciona un conector de comunidad de Looker Studio
• Cómo usar Google Apps Script para crear un conector de comunidad
• Cómo usar Community Connectors en Looker Studio

Requisitos

• Acceso a Internet y un navegador web
• Una Cuenta de Google
• Conocimientos básicos de JavaScript y 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 Community Connector Estoy intentando integrar Looker Studio con otra plataforma. Me interesan las soluciones de Google Cloud.

¿Cómo planeas usar este codelab/instructivo?

Pasar solo por alto Léelo y completa los ejercicios. .

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

Nunca lo escuché hablar de eso Sé lo que es, pero no lo uso. Lo uso con frecuencia. Soy un usuario experto.

¿Cuál de las siguientes opciones describe mejor tus antecedentes?

Desarrollador Negocios / financieros / analistas de datos Científico de datos / ingeniero de datos Experto en marketing, redes sociales y estadísticas 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 la comunidad

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

Imagina una situación en la que publicaste un paquete en npm y deseas hacer un seguimiento diario del recuento de descargas del paquete a lo largo del tiempo. En este codelab, compilarás un Community Connector que recupera datos con la API de recuentos de descargas de paquetes de npm. El Community Connector se puede usar en Looker Studio para crear un panel y visualizar los recuentos de descargas.

4. Flujo de trabajo del conector de la comunidad

En un Community Connector básico, definirás cuatro funciones:

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

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

• Cómo funciona un Community Connector
• Diferentes pasos en el flujo de trabajo
• Cuando se llama a diferentes funciones
• Cuando Looker Studio muestra diferentes interfaces de usuario
• Acciones esperadas del usuario en pasos diferentes

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

No es necesario memorizar este flujo de trabajo; simplemente echa un vistazo para tener una idea de lo que sucede en un conector. Puedes regresar a este diagrama en cualquier momento.

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 "+ New project" para crear un nuevo proyecto de Apps Script. en la sección superior izquierda.

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: Asígnale 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 debería mostrar el método de autenticación que requiere el conector para autorizar el servicio de terceros.

Para el conector de descarga de npm que estás compilando, no necesitas autenticarte con ningún servicio de terceros, ya que la API que estás usando no requiere ninguna 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 compatibles, 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. En función de la respuesta proporcionada por getConfig(), Looker Studio renderizará la pantalla de configuración del conector y cambiará su comportamiento.

En la pantalla de configuración, puedes proporcionar información u obtener entradas del usuario usando los siguientes elementos del formulario:

TEXTINPUT	Elemento de entrada	Cuadro de texto de una sola línea.
TEXTAREA	Elemento de entrada	Un cuadro de área de texto de varias líneas.
SELECT_SINGLE	Elemento de entrada	Un menú desplegable con opciones de selección única.
SELECT_MULTIPLE	Elemento de entrada	Un menú desplegable para las opciones de selección múltiple.
CHECKBOX	Elemento de entrada	Es una casilla de verificación que se puede usar para capturar valores booleanos.
INFO	Elemento de visualización	Un cuadro de texto sin formato estático que se puede utilizar para proporcionarle 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 getConfig(), agruparás estos elementos de formulario con la clave configParams.

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

Agrega el siguiente código 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();
}

En función de estos configParams, cuando uses el conector en Looker Studio, es posible que veas una pantalla de configuración como la siguiente. Pero hablaremos de eso más adelante.

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

8. Define getSchema()

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

Para cualquier configuración específica de tu conector, el esquema es una lista de todos los campos para los cuales el conector puede proporcionar datos. Un conector puede mostrar un esquema diferente con diferentes campos según varios parámetros de configuración. 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 para el campo
• Información semántica

Revisa la referencia de getSchema() y Field más adelante para obtener más información.

Según la forma en que tu conector recupere, el esquema puede fijarse o calcularse de forma dinámica cuando se llama a getSchema(). Los parámetros de configuración de getConfig() que defina el usuario se proporcionarán en el argumento request de la función getSchema().

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

Para tu conector, el esquema es fijo y contiene los siguientes 3 campos:

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

A continuación, se muestra el código getSchema() del conector. La función auxiliar getFields() abstrae la creación de los campos, ya que getSchema() y 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, podrás ver los siguientes campos en la pantalla de campos de Looker Studio cuando uses el conector en Looker Studio. Pero hablaremos sobre esto más adelante cuando pruebes tu 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 proporcionada por getData(), Looker Studio renderizará y actualizará los gráficos en el panel. Se puede llamar a getData() durante estos eventos:

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

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

getData()

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 para 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 relevante para la ejecución del conector. No es necesario que lo uses para este codelab.
• dateRange contendrá el período solicitado si se solicita en la respuesta de getConfig().
• fields contendrá la lista de nombres de los campos para los que se solicitan datos.

Para tu conector, un request de ejemplo 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',
    }
  ]
}

Para la llamada getData() en el request anterior, solo se solicitan dos campos, aunque el esquema del conector tenga campos adicionales. La página siguiente contendrá la respuesta de ejemplo para esta llamada getData() y la estructura de respuesta getData() general.

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 de getData(), deberás proporcionar el esquema y los datos para los campos solicitados. Dividirás el código en tres segmentos:

• Crea un esquema para los campos solicitados.
• Recupera y analiza datos de la API.
• Transforma los datos analizados y filtra según los campos solicitados.

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

getData()

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á el siguiente formato:

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

Crea la URL de la API con los elementos 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 getData() en el siguiente formato. Si este formato no es claro, consulta la respuesta de ejemplo en el párrafo siguiente.

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

En la respuesta, muestra el esquema solo para los campos solicitados que usan la propiedad schema. Deberás mostrar los datos usando 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, así es como se verá 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 según 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 que se muestra a continuación. 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
  };
}

Completaste el archivo Code.gs. A continuación, actualiza el manifiesto.

12. Actualizar manifiesto

En el editor de Apps Script, selecciona Configuración del proyecto > Mostrar "appsscript.json" archivo de manifiesto 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 de comunidad y está listo para probarlo.

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 > Test Deployments (Implementaciones de prueba) para abrir el diálogo de implementaciones de prueba.

Aparecerá la implementación predeterminada, Head Deployment.

Paso 2: Haz clic en Copy para copiar el Head Deployment ID.

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

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

Autoriza al conector

Usuarios de Looker Studio por primera vez: Si no has usado Looker Studio antes, se te pedirá que autorices Looker Studio y aceptes los Términos y 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 para recibir Anuncios de productos si quieres recibir información sobre las funciones, las actualizaciones y los anuncios de productos más recientes por correo electrónico.

Una vez cargado, verás un mensaje para autorizar tu conector.

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

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

Configura el conector

Una vez completada la autorización, se mostrará la pantalla de configuración. Escribe "faro" en el área de entrada de texto y haz clic en Conectar en la parte 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 nueva configuración, se crea una nueva fuente de datos en la cuenta de Looker Studio del usuario. La fuente de datos puede considerarse como una creación de 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 desde el mismo conector. Una fuente de datos se puede usar en varios informes, y un mismo informe puede usar varias fuentes de datos.

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

Eso es todo. Acabas de crear tu primer conector de la comunidad. Llegaste al final de este codelab. Ahora, veamos los próximos pasos que 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 serie temporal. Intenta agregar 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 tu configuración del conector. Pista: La API de recuentos de descargas de paquetes de npm admite el ingreso de varios nombres de paquetes separados por comas.
• Puedes encontrar soluciones para ambas en nuestro código del conector de npm.

Haz mucho más con Community Connectors

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

Recursos adicionales

A continuación, se muestran varios recursos a los que puedes acceder para ayudarte a profundizar en el material que vimos en este codelab.

Tipo de recurso	Funciones del usuario	Funciones para desarrolladores
Documentación	Centro de ayuda	Documentación para desarrolladores
Noticias y Actualizaciones	Regístrate en Looker Studio > Configuración del usuario	Lista de distribución de 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