本頁面由 Cloud Translation API 翻譯而成。

連結 Looker Studio 中的所有資料，並以圖表呈現

1. 簡介

Looker Studio 可讓您免費建立互動式資訊主頁，並利用精美的資料視覺化呈現功能。您可以從各種來源擷取資料，在 Looker Studio 中製作數量不限的報表，還能使用完整的編輯和共用功能。以下螢幕截圖為 Looker Studio 資訊主頁範例：

( 按這裡即可在 Looker Studio 中查看這個範例報表)

社群連接器是 Looker Studio 的一項功能，可讓您使用 Apps Script 建構連接器，然後連結至任何可連上網際網路的資料來源。Community Connectors 是由 Looker Studio 社群所建構。這代表任何人都能建立「社群連接器」。您也可以與其他使用者共用社群連接器，讓他們透過 Looker Studio 存取自己的資料。

社群連接器的用途不同：

您正在以視覺化方式呈現商業平台 (例如社群媒體、行銷、數據分析等) 的資料
以視覺化方式呈現內部企業資料 (例如內部部署 MySQL 資料庫的銷售資料)
客戶可透過圖表呈現自家服務中的資料
您正在建立按鈕報表平台
您正在從網頁來源 (例如建立 Google Fit 資訊主頁) 以視覺化方式呈現資料

課程內容

Looker Studio Community Connector 的運作方式
如何使用 Google Apps Script 建立社群連接器
如何在 Looker Studio 中使用社群連接器

軟硬體需求

網際網路和網路瀏覽器的存取權
Google 帳戶
熟悉基本的 JavaScript 和 Web API

2. 快速調查

為什麼選擇這個程式碼研究室？

我對資料圖表大致感興趣，

我想進一步瞭解 Looker Studio

我想建立自己的社群連接器。

我想將 Looker Studio 與其他平台整合。

我對 Google Cloud 解決方案感興趣。

您打算如何使用這個程式碼研究室/教學課程？

只能滑入

閱讀並完成練習

您對 Looker Studio 瞭解程度的滿意度為何？

從沒聽過

我知道是什麼功能，但我並未使用。

我經常使用

我是專家

下列哪一項敘述最符合你的背景？

開發人員

業務 / 財務 / 資料分析師

數據資料學家 / 資料工程師

行銷 / 社群媒體 / 數位分析專家

設計人員

其他

您可以移至下一頁提交問卷調查資訊。

3. 社群連接器總覽

Looker Studio 社群連接器可讓 Looker Studio 直接連線至任何可透過網際網路存取的資料來源。您可以連結至商業平台、公開資料集或自己的內部部署私人資料。社群連接器可透過 Web API、JDBC API、一般檔案 (CSV、JSON、XML) 和 Apps Script 服務擷取資料。

假設您已在 npm 發布套件，並想按一天追蹤套件的下載次數。在本程式碼研究室中，您將建構一個社群連接器，以使用 npm 套件下載計數 API 擷取資料。屆時，您可以在 Looker Studio 中使用社群連接器建立資訊主頁，以圖表呈現下載次數。

4. 社群連接器工作流程

在基本的社群連接器中，您定義了四種功能：

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

視工作流程目前的步驟而定，Looker Studio 會執行這些連接器函式，並在後續步驟中使用回應。以下影片會概略說明：

社群連接器的運作方式
工作流程中的不同步驟
呼叫不同函式時
Looker Studio 顯示不同使用者介面的時機
各步驟預期的使用者動作

觀看影片後，您可以繼續程式碼研究室。

您不需要記住這個工作流程，只要看一眼瞭解連接器的運作方式即可。您隨時可以返回此圖表。

在下一個步驟中，您將開始在 Google Apps Script 中建立連接器。您需要在 Apps Script UI 和本程式碼研究室之間來回切換。

5. 設定 Apps Script 專案

步驟 1：前往 Google Apps Script。

步驟 2：按一下「+ 新增專案」，建立新的 Apps Script 專案設定選項

您會在 Code.gs 檔案中看見擁有空白 myFunction 函式的殼層專案。

步驟 3：刪除 myFunction 函式。

步驟 4：為專案命名：

按一下頁面左上方的 Untitled project
輸入專案名稱。

開始在 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() 函式，取得連接器的設定詳細資料。Looker Studio 會根據 getConfig() 提供的回應顯示連接器設定畫面，並變更特定連接器行為。

在設定畫面中，您可以使用下列表單元素來提供資訊或取得使用者輸入內容：

`TEXTINPUT`	輸入元素	單行文字方塊。
`TEXTAREA`	輸入元素	多行文字方塊。
`SELECT_SINGLE`	輸入元素	單選選項的下拉式選單。
`SELECT_MULTIPLE`	輸入元素	複選選項的下拉式選單。
`CHECKBOX`	輸入元素	一個核取方塊，用於擷取布林值。
`INFO`	顯示元素	靜態的純文字方塊，可用來向使用者提供操作說明或資訊。

使用 INFO 元素提供使用者操作說明，並使用 TEXTINPUT 元素向使用者取得輸入套件名稱。在 getConfig() 回應中，您將這些表單元素分組至 configParams 鍵底下。

由於要連結的 API 需要日期做為參數，因此請將 getConfig() 回應中的 dateRangeRequired 設為 true。這樣一來，Looker Studio 就會將所有資料要求提供給 Looker。如果資料來源不需要以日期做為參數，則可跳過此步驟。

將下列 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();
}

根據這些 configParam，在 Looker Studio 中使用連接器時，您會看到如下的設定畫面。稍後會再詳細討論。

接著來看下一個函式：getSchema()。

8. 定義 getSchema()

Looker Studio 會呼叫 getSchema() 函式，取得使用者所選連接器設定的相關結構定義。根據 getSchema() 提供的回應，Looker Studio 會顯示使用者清單，列出連接器中的所有欄位。

針對連接器的任何特定設定，結構定義都是列出連接器可提供資料的所有欄位。連接器可能會根據不同的設定，傳回包含不同欄位的不同結構。結構定義可能包含從 API 來源擷取的欄位、使用 Apps Script 計算的欄位，以及在 Looker Studio 中使用計算結果欄位公式計算的欄位。連接器會提供結構定義中每個欄位的中繼資料，包括：

欄位名稱
欄位的資料類型
語意資訊

請稍後查看 getSchema() 和 Field 參考資料以瞭解詳情。

結構定義可能會在呼叫 getSchema() 時固定，或以動態方式計算，視連接器擷取的方式而定。使用者定義的 getConfig() 中，會在 getSchema() 函式的 request 引數中提供。

在本程式碼研究室中，您不需要存取 request 引數。在下一個區段中，編寫 getData() 函式的程式碼時，您將進一步瞭解 request 引數。

連接器的結構定義是固定的，並包含下列 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 中使用連接器時，Looker Studio 的欄位畫面會顯示下列欄位。但稍後測試連接器時，我們會再詳細說明。

接著來看看最後一個函式：getData()。

9. 定義 getData()：第 1 部分

每當 Looker Studio 需要擷取資料時，就會呼叫 getData() 函式。Looker Studio 會根據 getData() 提供的回覆，在資訊主頁上算繪及更新圖表。getData() 可能會在下列活動期間呼叫：

使用者將圖表新增至資訊主頁
使用者編輯圖表
使用者查看資訊主頁
使用者編輯了相關聯的篩選器或資料控制項
Looker Studio 需要資料樣本

所有程式碼都會複製完成，因此不必複製本頁任何程式碼

getData()

程式碼的程式碼

瞭解 `request` 物件

Looker Studio 會透過每次 getData() 呼叫傳遞 request 物件。請查看下方 request 物件的結構。這可協助您編寫 getData() 函式的程式碼。

`request` 物件結構

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

configParams 物件會包含 getConfig() 中定義的參數設定值，並由使用者設定。
scriptParams 物件會包含與連接器執行相關的資訊。您不需要在本程式碼研究室中使用此功能。
如果 getConfig() 回應中要求，dateRange 會包含所要求的日期範圍。
fields 包含要求其資料的欄位名稱清單。

以連接器來說，getData() 函式中的 request 範例可能如下所示：

{
  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 擷取及剖析資料

npm API 網址格式如下：

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

使用 Looker Studio 提供的 request.dateRange.startDate、request.dateRange.endDate 和 request.configParams.package 建立 API 網址。然後使用 UrlFetchApp(Apps Script 類別：參考資料) 從 API 擷取資料。然後剖析擷取的回應。

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

轉換剖析的資料並篩選要求欄位

npm API 的回應將採用以下格式：

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

轉換 npm API 的回應，並以下列格式提供 getData() 回應。如果無法確定這種格式，請查看下段中的回應範例。

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

在回應中，使用 schema 屬性僅傳回所要求欄位的結構定義。您將使用 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 編輯器中，選取「Project Settings」>顯示「appsscript.json」資訊清單檔案

這會建立新的 appsscript.json 資訊清單檔案。

將 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 專案。

恭喜！您已成功建立第一個社群連接器，可以進行試用！

13. 在 Looker Studio 中測試連接器

使用 Deployment

步驟 1：在 Apps Script 開發環境中，按一下「部署」>測試部署作業，開啟「測試部署作業」對話方塊。

系統會列出預設的部署作業「主要部署」。

步驟 2：按一下「Copy」複製「Head Deployment ID」。

步驟 3：如要在 Looker Studio 中載入連接器，請替換 <HEAD_DEPLOYMENT_ID>預留位置，然後替換成連接器的標頭部署 ID，然後在瀏覽器中前往連結：

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

授權連接器

第一次使用 Looker Studio 的使用者：如果您未曾使用過 Looker Studio，系統會請您授權 Looker Studio，並同意條款及細則。完成授權程序。首次使用 Looker Studio 時，系統也可能會顯示更新行銷偏好設定的對話方塊。訂閱產品公告，即可透過電子郵件掌握最新功能、最新消息和產品公告。

載入後，您會看到授權連接器的提示。

按一下 [授權]，並提供連接器所需的授權。

設定連接器

授權完成後會顯示設定畫面。輸入「lighthouse」然後按一下右上角的「連線」。

確認結構定義

系統隨即會顯示欄位畫面。按一下右上角的「Create Report」(建立報表)。

建立資訊主頁

您將進入 Looker Studio 資訊主頁環境。按一下 [Add to Report] (加入報表)。

在 Looker Studio 中，每當使用者存取連接器並新增設定時，系統就會在使用者的 Looker Studio 帳戶中建立新的資料來源。您可以將資料來源視為根據特定設定，建立連接器例項。依據連接器和使用者所選設定而定，資料來源會傳回含有一組特定欄位的資料表。使用者可以在同一個連接器中建立多個資料來源。一個資料來源可用於多份報表中，一份報表則可使用多個資料來源。

現在新增時間序列圖表！在選單中按一下「插入」>時間序列。然後將時間序列放入畫布中。畫面上應該會顯示所選套件 npm 下載次數的時間序列圖表。新增日期篩選器控制項並查看資訊主頁，如下所示。

大功告成！您剛剛建立了第一個社群連接器！本程式碼研究室將到此結束。現在，讓我們來看看您可以採取的後續步驟。

14. 後續步驟

改善建構的連接器

改進您剛建立的連接器：

在 Looker Studio 中，如果您沒有在連接器的設定畫面中提供套件名稱，則在繪製時間序列圖表時，系統將會顯示錯誤訊息。請嘗試在連接器設定中加入輸入驗證或預設選項。
請嘗試在連接器設定中，新增同時查詢多個套件名稱的支援功能。提示：npm package downloadCount API 支援輸入多個套件名稱 (以半形逗號分隔)。
您可以在 npm 連接器程式碼中找到這兩項解決方案。

充分運用社群連接器

查看連接器 API 和資訊清單的參考資料。
瀏覽 Google 開放原始碼存放區中的連接器程式碼範例，瞭解最佳做法。
完成 clasp Codelab，即可在本機環境中開發社群連接器。
建立完備的社群連接器後，請考慮使用發布選項。
為 Looker Studio 打造社群視覺呈現。

其他資源

以下提供多項資源，協助您深入瞭解本程式碼研究室涵蓋的內容。

資源類型	使用者功能	開發人員功能
說明文件	說明中心	開發人員說明文件
新聞與更新	前往 Looker Studio 註冊 >使用者設定	開發人員郵寄清單
提問	使用者論壇	Stack Overflow [looker-studio]
影片	DataVis DevTalk
範例	報表庫連接器圖片庫	開放原始碼存放區

連結 Looker Studio 中的所有資料，並以圖表呈現

1. 簡介

課程內容

軟硬體需求

2. 快速調查

為什麼選擇這個程式碼研究室？

您打算如何使用這個程式碼研究室/教學課程？

您對 Looker Studio 瞭解程度的滿意度為何？

下列哪一項敘述最符合你的背景？

3. 社群連接器總覽

4. 社群連接器工作流程

5. 設定 Apps Script 專案

6. 定義 getAuthType()

Code.gs

7. 定義 getConfig()

Code.gs

8. 定義 getSchema()

Code.gs

9. 定義 getData()：第 1 部分

瞭解 request 物件

request 物件結構

10. 定義 getData()：第 2 部分

為要求的欄位建立結構定義

從 API 擷取及剖析資料

轉換剖析的資料並篩選要求欄位

11. 定義 getData()：第 3 部分

Code.gs

12. 更新資訊清單

appsscript.json

13. 在 Looker Studio 中測試連接器

使用 Deployment

授權連接器

設定連接器

確認結構定義

建立資訊主頁

14. 後續步驟

改善建構的連接器

充分運用社群連接器

其他資源

瞭解 `request` 物件

`request` 物件結構