Подключите и визуализируйте все свои данные в Looker Studio.

1. Введение

Looker Studio позволяет бесплатно создавать интерактивные панели мониторинга с красивыми визуализациями данных. Получайте данные из различных источников и создавайте неограниченное количество отчетов в Looker Studio с полными возможностями редактирования и обмена. На следующем скриншоте показан пример панели мониторинга Looker Studio:

2f296fddf6af7393.png

( Нажмите здесь, чтобы просмотреть этот пример отчета в Looker Studio )

Функция Community Connectors в Looker Studio позволяет использовать Apps Script для создания коннекторов к любому доступному через Интернет источнику данных. Коннекторы Community Connectors создаются сообществом Looker Studio. Это означает, что любой может создавать коннекторы Community Connectors. Вы также можете делиться коннекторами Community Connectors с другими пользователями, чтобы они могли получать доступ к своим данным из Looker Studio.

Вы можете использовать коннекторы сообщества в различных сценариях:

  • Вы визуализируете данные с коммерческой платформы (например, социальных сетей, маркетинга, аналитики и т. д.).
  • Вы визуализируете локальные корпоративные данные (например, данные о продажах из локальной базы данных MySQL).
  • Вы предоставляете своим клиентам возможность визуализировать данные, полученные с помощью вашего сервиса.
  • Вы создаёте платформу для создания отчётов, работающую по принципу «нажатия кнопки».
  • Вы визуализируете собственные данные из веб-источника (например, создаете панель мониторинга Google Fit).

Что вы узнаете

  • Как работает интерфейс сообщества Looker Studio
  • Как использовать Google Apps Script для создания коннектора для сообщества
  • Как использовать коннекторы сообщества в Looker Studio

Что вам понадобится

  • Доступ к интернету и веб-браузеру.
  • Аккаунт Google
  • Знание основ JavaScript и веб-API.

2. Краткий опрос

Почему вы выбрали именно этот учебный семинар?

Меня интересует визуализация данных в целом. Я хочу узнать больше о Looker Studio. Я хочу создать свой собственный инструмент для взаимодействия с сообществом. Я пытаюсь интегрировать Looker Studio с другой платформой. Меня интересуют решения Google Cloud.

Как вы планируете использовать этот практический пример/учебное пособие?

Просматривать только бегло Прочитайте текст и выполните упражнения.

Как бы вы оценили свою осведомленность о Looker Studio?

Никогда о нём не слышал. Я знаю, что это такое, но я этим не пользуюсь. Я им регулярно пользуюсь. Я опытный пользователь.

Что лучше всего описывает ваше прошлое?

Разработчик Бизнес / Финансовый / Аналитик данных Специалист по анализу данных / Инженер по анализу данных Эксперт по маркетингу / социальным сетям / цифровой аналитике Дизайнер Другой

Вы можете перейти на следующую страницу, чтобы отправить информацию для опроса.

3. Обзор координаторов сообщества

Сообщественные коннекторы Looker Studio позволяют напрямую подключаться из Looker Studio к любому доступному через Интернет источнику данных. Вы можете подключаться к коммерческим платформам, общедоступным наборам данных или собственным локальным частным данным. Сообщественные коннекторы могут получать данные через веб-API, JDBC API, плоские файлы (CSV, JSON, XML) и службы Apps Script.

b25b8d6bea6da54b.png

Рассмотрим ситуацию, когда вы опубликовали пакет на npm и хотите отслеживать количество загрузок этого пакета по дням с течением времени. В этом практическом задании вы создадите Community Connector, который будет получать данные с помощью API подсчета загрузок пакетов npm . Затем Community Connector можно будет использовать в Looker Studio для создания панели мониторинга, позволяющей визуализировать количество загрузок.

4. Рабочий процесс взаимодействия с сообществом

В базовом компоненте Community Connector вы определяете четыре функции:

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

В зависимости от текущего этапа рабочего процесса Looker Studio выполняет эти функции коннектора и использует полученный ответ на последующих этапах. Видео ниже дает общий обзор:

  • Как работает координатор сообщества
  • Различные этапы рабочего процесса
  • Когда вызываются различные функции
  • Когда Looker Studio отображает различные пользовательские интерфейсы
  • Ожидаемые действия пользователя на разных этапах

После просмотра видео вы можете продолжить выполнение заданий в рамках практического курса.

Запоминать этот рабочий процесс не нужно, просто взгляните, чтобы понять, что происходит внутри коннектора. Вы всегда можете вернуться к этой схеме.

cc6688bf38749e5.png

На следующем шаге вы начнете создавать свой коннектор в Google Apps Script. Вам придется переключаться между пользовательским интерфейсом Apps Script и этим практическим заданием.

5. Настройте свой проект Apps Script.

Шаг 1: Перейдите в Google Apps Script .

Шаг 2: Создайте новый проект Apps Script, нажав кнопку « + Новый проект » в верхнем левом углу.

fb12d7318d0946cf.png

В файле Code.gs вы увидите шаблон проекта с пустой функцией myFunction .

b245ce5eb3dd2ee2.png

Шаг 3: Удалите функцию myFunction .

Шаг 4: Дайте проекту название:

  1. Нажмите на Untitled project в верхнем левом углу страницы.
  2. Введите название проекта.

7172aebc181c91d4.png

Начните писать код коннектора в файле Code.gs

6. Определите метод getAuthType().

Looker Studio вызовет функцию getAuthType() когда ей потребуется узнать метод аутентификации, используемый коннектором. Эта функция должна возвращать метод аутентификации, необходимый коннектору для авторизации стороннего сервиса.

Для создаваемого вами коннектора для загрузки npm вам не потребуется аутентификация в каких-либо сторонних сервисах, поскольку используемый вами API не требует аутентификации. Скопируйте следующий код и добавьте его в файл Code.gs :

Code.gs 

var cc = DataStudioApp.createCommunityConnector();

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

Здесь вы указываете, что вашему коннектору не требуется аутентификация сторонних сервисов ( AuthTypes.NONE ). Чтобы увидеть все поддерживаемые методы аутентификации, обратитесь к справочнику AuthType() .

7. Определите метод getConfig().

Пользователям вашего коннектора потребуется настроить его, прежде чем они смогут начать им пользоваться. Ответ функции getConfig() определяет параметры конфигурации, которые будут видны пользователям. Looker Studio вызывает функцию getConfig() для получения сведений о конфигурации коннектора. На основе ответа, предоставленного функцией getConfig() , Looker Studio отобразит экран конфигурации коннектора и изменит определенное поведение коннектора.

На экране настроек вы можете предоставить информацию или получить ввод данных от пользователя, используя следующие элементы формы:

TEXTINPUT

Входной элемент

Текстовое поле, занимающее одну строку.

TEXTAREA

Входной элемент

Многострочное текстовое поле.

SELECT_SINGLE

Входной элемент

Выпадающее меню для выбора одного варианта.

SELECT_MULTIPLE

Входной элемент

Выпадающий список для выбора нескольких вариантов.

CHECKBOX

Входной элемент

Один флажок, который можно использовать для ввода логических значений.

INFO

Отображаемый элемент

Статическое текстовое поле, которое можно использовать для предоставления инструкций или информации пользователю.

Используйте элемент INFO для предоставления инструкций пользователю, а элемент TEXTINPUT для получения имени входного пакета от пользователя. В ответе функции getConfig() сгруппируйте эти элементы формы по ключу configParams .

Поскольку API, к которому вы подключаетесь, требует указания даты в качестве параметра, установите dateRangeRequired в true в ответе getConfig() . Это указывает Looker Studio предоставлять диапазоны дат во всех запросах данных. Если ваш источник данных не требует указания даты в качестве параметра, вы можете опустить этот параметр.

Добавьте следующий код getConfig() в файл Code.gs , ниже существующего кода 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();
}

Исходя из этих параметров конфигурации, при использовании коннектора в Looker Studio вы увидите экран конфигурации, подобный следующему. Но об этом позже.

7de872f17e59e92.png

Перейдём к следующей функции — getSchema() .

8. Определите метод getSchema().

Looker Studio вызывает функцию getSchema() для получения схемы, связанной с выбранной пользователем конфигурацией коннектора. На основе ответа, полученного от функции getSchema() , Looker Studio отобразит пользователю экран с полями, содержащий список всех полей коннектора.

Для любой конкретной конфигурации вашего коннектора схема представляет собой список всех полей, для которых коннектор может предоставлять данные. В зависимости от конфигурации коннектор может возвращать различную схему с разными полями. Схема может содержать поля, которые вы получаете из источника API, поля, которые вы вычисляете в Apps Script, и поля, которые вычисляются в Looker Studio с использованием формулы вычисляемого поля. Ваш коннектор предоставляет метаданные о каждом поле в схеме, включая:

  • Название поля
  • Тип данных для поля
  • Семантическая информация

Для получения более подробной информации ознакомьтесь с описанием функций getSchema() и справочником Field позже.

В зависимости от способа получения данных вашим коннектором, схема может быть фиксированной или динамически вычисляться при вызове функции getSchema() . Параметры конфигурации из функции getConfig() , определенные пользователем, будут переданы в качестве аргумента request для функции getSchema () .

Для выполнения этого практического задания вам не потребуется обращаться к аргументу request . Подробнее об аргументе request вы узнаете, когда будете писать код для функции getData() в следующем разделе.

Для вашего коннектора схема фиксирована и содержит следующие 3 поля:

packageName

Название npm-пакета, предоставленного пользователем.

downloads

Количество загрузок npm-пакета

day

Дата подсчета загрузок

Ниже приведён код функции getSchema() для вашего коннектора. Вспомогательная функция getFields() абстрагирует создание полей, поскольку эта функциональность необходима как для getSchema() , так и getData() . Добавьте следующий код в файл 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 };
}

Исходя из этой схемы, при использовании коннектора в Looker Studio на экране полей вы увидите следующие поля. Но об этом подробнее позже, при тестировании коннектора.

c7cd7057b202be59.png

Перейдём к нашей последней функции — getData() .

9. Определение функции getData(): Часть 1

Looker Studio вызывает функцию getData() всякий раз, когда ей необходимо получить данные. На основе ответа, предоставленного функцией getData() , Looker Studio отобразит и обновит диаграммы на панели мониторинга. getData() может быть вызвана во время следующих событий:

  • Пользователь добавляет диаграмму на панель управления.
  • Пользователь редактирует диаграмму
  • Пользователь просматривает панель управления.
  • Пользователь редактирует связанный с ним фильтр или элемент управления данными.
  • Looker Studio требуется образец данных.

Нет необходимости копировать какой-либо код с этой страницы, поскольку вы скопируете готовый код.

getData()

код будет добавлен на следующем этапе.

Понимание объекта request

Looker Studio передает объект request при каждом вызове функции getData() . Ознакомьтесь со структурой объекта request ниже. Это поможет вам написать код для вашей функции getData() .

структура объекта request 

{
  configParams: object,
  scriptParams: object,
  dateRange: {
    startDate: string,
    endDate: string
  },
  fields: [
    {
      name: Field.name
    }
  ]
}
  • Объект configParams будет содержать значения параметров, определенных в getConfig() и настроенных пользователем.
  • Объект scriptParams будет содержать информацию, относящуюся к выполнению коннектора. В рамках данного практического задания использовать его не нужно.
  • dateRange будет содержать запрошенный диапазон дат, если он указан в ответе функции getConfig() .
  • fields будет содержать список названий полей, для которых запрашиваются данные.

Для вашего коннектора пример request из функции getData() может выглядеть следующим образом:

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

В приведенном выше request при вызове функции getData() запрашиваются только два поля, хотя схема коннектора содержит дополнительные поля. На следующей странице будет приведен пример ответа на этот вызов getData() и общая структура ответа getData() .

10. Определение функции getData(): Часть 2

В ответе функции getData() вам потребуется указать как схему, так и данные для запрошенных полей. Код следует разделить на три части:

  • Создайте схему для запрошенных полей.
  • Получение и анализ данных из API.
  • Преобразовать проанализированные данные и отфильтровать их по запрошенным полям.

Нет необходимости копировать какой-либо код с этой страницы, поскольку вы скопируете готовый код.

getData()

Код на следующей странице.

Вот структура функции getData() для вашего коннектора.

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>
  };
}

Создайте схему для запрошенных полей. 

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

Получение и анализ данных из API.

URL-адрес API npm будет иметь следующий формат:

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

Создайте URL-адрес для API, используя параметры request.dateRange.startDate , request.dateRange.endDate и request.configParams.package , предоставляемые Looker Studio. Затем получите данные из API с помощью UrlFetchApp (класс Apps Script: ссылка ). После этого проанализируйте полученный ответ.

  // 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;

Преобразовать обработанные данные и отфильтровать их по запрошенным полям.

Ответ от API npm будет иметь следующий формат: 

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

Преобразуйте ответ от API npm и предоставьте ответ функции getData() в следующем формате. Если этот формат непонятен, ознакомьтесь с примером ответа в следующем абзаце. 

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

В ответе верните схему только для запрошенных полей, используя свойство schema . Данные будут возвращены в виде списка rows , используя свойство `rows`. Для каждой строки последовательность полей в values должна соответствовать последовательности полей в schema . Исходя из нашего предыдущего примера request , ответ для getData() будет выглядеть следующим образом: 

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

Вы уже создали подмножество схемы. Используйте следующую функцию для преобразования проанализированных данных и фильтрации по запрошенным полям. 

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. Определение функции getData(): Часть 3

Объединенный код функции getData() будет выглядеть следующим образом. Добавьте следующий код в файл 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
  };
}

Работа с файлом Code.gs завершена! Далее обновите манифест.

12. Обновить манифест

В редакторе Apps Script выберите «Настройки проекта» > «Показать файл манифеста "appsscript.json" в редакторе» .

90a68a58bbbb63c4.png

Это создаст новый файл манифеста appsscript.json .

1081c738d5d577a6.png

Замените файл appscript.json следующим содержимым:

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"]
  }
}

Сохраните проект Apps Script.

5701ece1c89415c.png

Поздравляем! Вы создали свой первый инструмент для взаимодействия с сообществом, и он готов к тестированию!

13. Проверьте работу коннектора в Looker Studio.

Используйте развертывание

Шаг 1: В среде разработки Apps Script щелкните «Развернуть» > «Тестовые развертывания» , чтобы открыть диалоговое окно «Тестовые развертывания».

3f57ea0feceb2596.png

Будет указан вариант развертывания по умолчанию — Head Deployment .

Шаг 2: Нажмите «Копировать» , чтобы скопировать идентификатор развертывания головной системы .

Шаг 3: Чтобы загрузить ваш коннектор в Looker Studio, замените заполнитель <HEAD_DEPLOYMENT_ID> по следующей ссылке на идентификатор развертывания вашего коннектора (Head Deployment ID) и перейдите по ссылке в браузере: 

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

Авторизуйте соединитель

Для новых пользователей Looker Studio: если вы ранее не использовали Looker Studio, вам будет предложено авторизовать Looker Studio и согласиться с условиями использования. Завершите процесс авторизации. При первом использовании Looker Studio вы также можете увидеть диалоговое окно для обновления ваших маркетинговых предпочтений. Подпишитесь на уведомления о новых продуктах , чтобы получать информацию о последних функциях, обновлениях и анонсах по электронной почте.

После загрузки появится запрос на авторизацию вашего коннектора.

d7e66726a1e64c05.png

Нажмите «Авторизовать» и предоставьте коннектору необходимые права доступа.

Настройте коннектор

После завершения авторизации отобразится экран конфигурации. Введите « lighthouse » в текстовое поле и нажмите «Подключиться» в правом верхнем углу.

ec7416d6dbeabc8f.png

Подтвердите схему

Вы увидите экран с полями. Нажмите «Создать отчет» в правом верхнем углу.

4a9084bd51d2fbb8.png

Создайте свою панель управления

Вы окажетесь в среде панели управления Looker Studio. Нажмите «Добавить в отчет» .

1ca21e327308237c.png

В Looker Studio каждый раз, когда пользователь обращается к коннектору и добавляет новую конфигурацию, в учетной записи пользователя в Looker Studio создается новый источник данных. Источник данных можно рассматривать как экземпляр коннектора, созданный на основе определенной конфигурации. В зависимости от коннектора и выбранной пользователем конфигурации источник данных будет возвращать таблицу данных с определенным набором полей. Пользователи могут создавать несколько источников данных из одного и того же коннектора. Источник данных может использоваться в нескольких отчетах, и один и тот же отчет может использовать несколько источников данных.

Теперь добавьте диаграмму временного ряда! В меню выберите Вставка > Временной ряд . Затем разместите временной ряд на холсте. Вы должны увидеть диаграмму временного ряда, отображающую количество загрузок npm для выбранного пакета. Добавьте элемент управления фильтром по дате и просмотрите панель мониторинга, как показано ниже.

4c076e07665f57aa.gif

Вот и всё! Вы только что создали свой первый коннектор сообщества! На этом выполнение этого практического задания завершается. Теперь давайте посмотрим, какие следующие шаги вы можете предпринять.

14. Дальнейшие шаги

Улучшите созданный вами разъем.

Внесите улучшения в только что созданный вами коннектор:

  • В Looker Studio, если вы не укажете имя пакета на экране конфигурации коннектора, при построении графика временных рядов вы увидите сообщение об ошибке. Попробуйте добавить проверку входных данных или параметр по умолчанию в конфигурацию коннектора.
  • Попробуйте добавить поддержку запроса нескольких имен пакетов одновременно в конфигурацию коннектора. Подсказка: API подсчета загрузок пакетов npm поддерживает ввод нескольких имен пакетов, разделенных запятой.
  • Решения обеих этих проблем вы найдете в коде нашего npm-коннектора .

Расширьте возможности использования связей с сообществом.

Дополнительные ресурсы

Ниже представлены различные ресурсы, которые помогут вам глубже изучить материал, рассматриваемый в этом практическом занятии.

Тип ресурса

Пользовательские функции

Функции для разработчиков

Документация

Центр поддержки

Документация для разработчиков

Новости и обновления

Зарегистрируйтесь в Looker Studio > Настройки пользователя

Список рассылки для разработчиков

Задавайте вопросы

Пользовательский форум

Stack Overflow [looker-studio]

Видео

DataVis DevTalk

Примеры

Репозиторий открытого исходного кода