สร้างปลั๊กอินจากชุมชนสำหรับใช้ลิงก์ข้อมูล

ขั้นตอนในการสร้างปลั๊กอินจากชุมชนสำหรับใช้ลิงก์ข้อมูลมีดังนี้

  1. สร้างโปรเจ็กต์ Apps Script ใหม่
  2. เขียนโค้ดเครื่องมือเชื่อมต่อ
  3. ไฟล์ Manifest ของโปรเจ็กต์ให้เสร็จสมบูรณ์

สร้างโปรเจ็กต์ Apps Script ใหม่

ไปที่ Google Apps Script เพื่อสร้างโปรเจ็กต์ใหม่ Apps Script จะสร้าง สคริปต์เริ่มต้นสำหรับคุณ คุณสามารถนำฟังก์ชัน myFunction และเปลี่ยนชื่อออก ให้กับโครงการ (ดูข้อมูลเพิ่มเติมเกี่ยวกับ Apps Script)

เขียนโค้ดเครื่องมือเชื่อมต่อ

เครื่องมือเชื่อมต่อทุกตัวจำเป็นต้องมีชุดฟังก์ชันเฉพาะ แอปพลิเคชันโฮสติ้ง (เช่น Looker Studio) จะเรียกใช้ฟังก์ชันเหล่านี้ บัญชี จะต้องจัดการคำขอที่เข้ามาใหม่ และตอบกลับตามที่อธิบายไว้ใน เอกสารอ้างอิง API ของปลั๊กอินจากชุมชนสำหรับใช้ลิงก์ข้อมูล หากพบปัญหาขณะพัฒนา โปรดอ่านคำแนะนำในการแก้ไขข้อบกพร่องเพื่อรับความช่วยเหลือ

กำหนดประเภทการตรวจสอบสิทธิ์ใน getAuthType()

ฟังก์ชันนี้เรียกใช้เพื่อระบุวิธีการตรวจสอบสิทธิ์ที่ใช้สำหรับพร็อพเพอร์ตี้ บริการของบุคคลที่สาม ดูรายละเอียดได้ที่ข้อมูลอ้างอิง getAuthType() ปัจจุบัน วิธีการตรวจสอบสิทธิ์ที่รองรับแสดงอยู่ในข้อมูลอ้างอิง AuthType

ตัวอย่างเช่น เครื่องมือเชื่อมต่อต่อไปนี้ไม่ต้องมีการตรวจสอบสิทธิ์

npm-downloads/src/auth.js
var cc = DataStudioApp.createCommunityConnector();

// https://developers.google.com/datastudio/connector/reference#getauthtype
function getAuthType() {
  var AuthTypes = cc.AuthType;
  return cc
    .newAuthTypeResponse()
    .setAuthType(AuthTypes.NONE)
    .build();
}

หากแหล่งข้อมูลต้องมีการตรวจสอบสิทธิ์ OAuth 2.0 โปรดดู คู่มือการตรวจสอบสิทธิ์ OAuth 2.0 และเพิ่มฟังก์ชันที่จำเป็นเพิ่มเติมลงใน เครื่องมือเชื่อมต่อของคุณ

กำหนดการกำหนดค่าผ่าน getConfig()

เรียกใช้ฟังก์ชัน getConfig() เพื่อรับการกำหนดค่าสำหรับ รวมถึงค่าที่ผู้ใช้ระบุซึ่งเครื่องมือเชื่อมต่อของคุณต้องใช้ โปรดดู ข้อมูลอ้างอิงของ getConfig() สำหรับรายละเอียด

โดยอิงตามคำตอบจาก getConfig() Looker Studio จะแสดงผล หน้าจอการกำหนดค่าเครื่องมือเชื่อมต่อ มีการแสดงองค์ประกอบการกำหนดค่าที่รองรับ ในการอ้างอิง ConfigType

หากแหล่งข้อมูลของคุณกำหนดให้วันที่เป็นพารามิเตอร์ ให้เรียกใช้ config.setDateRangeRequired(true). หากต้องการถามแบบมีเงื่อนไขหรือแบบไดนามิก โปรดดูคำถามเกี่ยวกับการกำหนดค่าที่หัวข้อการกำหนดค่าแบบทีละขั้น

ต่อไปนี้เป็นตัวอย่างของเครื่องมือเชื่อมต่อที่กำหนดให้ผู้ใช้ป้อน รหัสชื่อแพ็กเกจ npm จะมีการกำหนดข้อมูลและช่องป้อนข้อมูลไว้ในส่วน ฟังก์ชัน getConfig():

npm-downloads/src/main.js
// https://developers.google.com/datastudio/connector/reference#getconfig
function getConfig() {
  var config = cc.getConfig();

  config
    .newInfo()
    .setId('instructions')
    .setText(
      'Enter npm package names to fetch their download count. An invalid or blank entry will revert to the default value.'
    );

  config
    .newTextInput()
    .setId('package')
    .setName(
      'Enter a single package name or multiple names separated by commas (no spaces!)'
    )
    .setHelpText('e.g. "googleapis" or "package,somepackage,anotherpackage"')
    .setPlaceholder(DEFAULT_PACKAGE)
    .setAllowOverride(true);

  config.setDateRangeRequired(true);

  return config.build();
}

กำหนดช่องต่างๆ ด้วย getSchema()

ฟังก์ชันนี้เรียกใช้เพื่อรับสคีมาสำหรับคำขอที่ระบุ ช่วง จะได้รับพารามิเตอร์การกำหนดค่าที่ฟังก์ชัน getConfig() กำหนด ในอาร์กิวเมนต์ request ดูรายละเอียดได้ที่ข้อมูลอ้างอิง getSchema()

ทั้งนี้ขึ้นอยู่กับแหล่งข้อมูลของเครื่องมือเชื่อมต่อและการกำหนดค่าที่ระบุโดย สคีมาอาจได้รับการแก้ไข หรือคุณอาจต้องให้ข้อมูลนี้แบบไดนามิกที่ ขอเวลา

ตัวอย่างเช่น ถ้าเครื่องมือเชื่อมต่อดึงข้อมูลรายงานตามรหัสรายงาน ที่แสดงผลสำหรับรายงานนั้น จึงอาจไม่รู้จักสคีมาล่วงหน้า ในกรณีนี้ getSchema() อาจกำหนดให้มีการดึงข้อมูลและสคีมาจะต้องดำเนินการ มาคำนวณได้

npm-downloads/src/main.js
function getFields() {
  var fields = cc.getFields();
  var types = cc.FieldType;
  var aggregations = cc.AggregationType;

  fields
    .newDimension()
    .setId('packageName')
    .setName('Package')
    .setType(types.TEXT);

  fields
    .newDimension()
    .setId('day')
    .setName('Date')
    .setType(types.YEAR_MONTH_DAY);

  fields
    .newMetric()
    .setId('downloads')
    .setName('Downloads')
    .setType(types.NUMBER)
    .setAggregation(aggregations.SUM);

  return fields;
}

// https://developers.google.com/datastudio/connector/reference#getschema
function getSchema(request) {
  return {schema: getFields().build()};
}

ดึงและส่งคืนข้อมูลด้วย getData()

ฟังก์ชันนี้เรียกใช้เพื่อรับข้อมูลสำหรับคำขอที่ระบุ การกำหนดค่าใดก็ได้ พารามิเตอร์ที่กำหนดโดยฟังก์ชัน getConfig() จะอยู่ใน อาร์กิวเมนต์ request ดูรายละเอียดได้ที่ข้อมูลอ้างอิง getData()

พารามิเตอร์ต่อไปนี้จากคำขอ getData() ต้องการเพิ่มเติม ความสนใจ:

  • lastRefresh
    lastRefresh แสดงการประทับเวลาที่ตรงกับเวลาล่าสุด ส่งคำขอรีเฟรชข้อมูล คุณควรสามารถแยกวิเคราะห์ค่าที่มี new Date(timestampString) หากคุณใช้บริการแคช Apps Script หรือ วิธีการแคชอื่นๆ การประทับเวลา lastRefresh จะช่วยคุณได้ พิจารณาว่าจะสร้างคำขอดึงข้อมูลใหม่ไปยังแหล่งข้อมูลหรือแสดง จากแคช

  • dateRange
    หากตั้งค่า dateRangeRequired เป็น true ใน getConfig() แต่ละ getData() จะมีช่วงวันที่ที่เลือกในคำขอ โปรดดู การใช้ช่วงวันที่สำหรับรายละเอียดเพิ่มเติม

ตัวอย่างต่อไปนี้จะดึงข้อมูลตามคำขอที่เข้ามาและแสดงผล สถิติเกี่ยวกับพัสดุ:

npm-downloads/src/main.js
// https://developers.google.com/datastudio/connector/reference#getdata
function getData(request) {
  request.configParams = validateConfig(request.configParams);

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

  try {
    var apiResponse = fetchDataFromApi(request);
    var normalizedResponse = normalizeResponse(request, apiResponse);
    var data = getFormattedData(normalizedResponse, requestedFields);
  } catch (e) {
    cc.newUserError()
      .setDebugText('Error fetching data from API. Exception details: ' + e)
      .setText(
        'The connector has encountered an unrecoverable error. Please try again later, or file an issue if this error persists.'
      )
      .throwException();
  }

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

/**
 * Gets response for UrlFetchApp.
 *
 * @param {Object} request Data request parameters.
 * @returns {string} Response text for UrlFetchApp.
 */
function fetchDataFromApi(request) {
  var url = [
    'https://api.npmjs.org/downloads/range/',
    request.dateRange.startDate,
    ':',
    request.dateRange.endDate,
    '/',
    request.configParams.package
  ].join('');
  var response = UrlFetchApp.fetch(url);
  return response;
}

/**
 * Parses response string into an object. Also standardizes the object structure
 * for single vs multiple packages.
 *
 * @param {Object} request Data request parameters.
 * @param {string} responseString Response from the API.
 * @return {Object} Contains package names as keys and associated download count
 *     information(object) as values.
 */
function normalizeResponse(request, responseString) {
  var response = JSON.parse(responseString);
  var package_list = request.configParams.package.split(',');
  var mapped_response = {};

  if (package_list.length == 1) {
    mapped_response[package_list[0]] = response;
  } else {
    mapped_response = response;
  }

  return mapped_response;
}

/**
 * Formats the parsed response from external data source into correct tabular
 * format and returns only the requestedFields
 *
 * @param {Object} parsedResponse The response string from external data source
 *     parsed into an object in a standard format.
 * @param {Array} requestedFields The fields requested in the getData request.
 * @returns {Array} Array containing rows of data in key-value pairs for each
 *     field.
 */
function getFormattedData(response, requestedFields) {
  var data = [];
  Object.keys(response).map(function(packageName) {
    var package = response[packageName];
    var downloadData = package.downloads;
    var formattedData = downloadData.map(function(dailyDownload) {
      return formatData(requestedFields, packageName, dailyDownload);
    });
    data = data.concat(formattedData);
  });
  return data;
}

สร้างไฟล์ Manifest ของโปรเจ็กต์ให้เสร็จสมบูรณ์

ไฟล์ Manifest มีข้อมูลเกี่ยวกับปลั๊กอินจากชุมชนสำหรับใช้ลิงก์ข้อมูลซึ่ง เพื่อติดตั้งใช้งานและใช้เครื่องมือเชื่อมต่อใน Looker Studio

หากต้องการแก้ไขไฟล์ Manifest ในสภาพแวดล้อมการพัฒนา Apps Script ให้คลิก ในเมนูมุมมอง แล้วคลิกแสดงไฟล์ Manifest ซึ่งจะเป็นการสร้างองค์ประกอบ appsscript.json ไฟล์ Manifest

อัปเดตไฟล์ Manifest ให้มีข้อมูลต่อไปนี้

npm-downloads/src/appsscript.json
{
  "dependencies": {
    "libraries": []
  },
  "dataStudio": {
    "name": "npm Downloads",
    "logoUrl": "https://raw.githubusercontent.com/npm/logos/master/npm%20square/n-64.png",
    "company": "Google Data Studio Developer Relations",
    "companyUrl": "https://developers.google.com/datastudio/",
    "addonUrl": "https://github.com/googledatastudio/community-connectors/tree/master/npm-downloads#readme",
    "supportUrl": "https://github.com/googledatastudio/community-connectors/issues",
    "description": "Get npm package download counts.",
    "sources": ["npm"],
    "templates": {
      "default": "1twu0sHjqR5dELAPyGJcw4GS3-D0_NTrQ"
    }
  },
  "oauthScopes": [
    "https://www.googleapis.com/auth/script.external_request"
  ]
}

โปรดดูรายละเอียดไฟล์ Manifest ของ Looker Studio ที่ข้อมูลอ้างอิงไฟล์ Manifest

ขั้นตอนถัดไป

ขั้นตอนถัดไปคือการทำให้ปลั๊กอินจากชุมชนสำหรับใช้ลิงก์ข้อมูลใช้งานได้