Kết nối và trình bày trực quan mọi dữ liệu của bạn trong Looker Studio

1. Giới thiệu

Looker Studio giúp bạn tạo các trang tổng quan trực tiếp, có tính tương tác với hình ảnh dữ liệu đẹp mắt, hoàn toàn miễn phí. Lấy dữ liệu từ nhiều nguồn và tạo không giới hạn báo cáo trong Looker Studio, với đầy đủ các chức năng chỉnh sửa và chia sẻ. Ảnh chụp màn hình sau đây là ví dụ về trang tổng quan Looker Studio:

( Nhấp vào đây để xem báo cáo mẫu này trong Looker Studio)

Trình kết nối cộng đồng là một tính năng của Looker Studio, cho phép bạn sử dụng Apps Script để tạo trình kết nối cho mọi nguồn dữ liệu có thể truy cập qua Internet. Trình kết nối cộng đồng do cộng đồng Looker Studio tạo ra. Điều đó có nghĩa là bất kỳ ai cũng có thể tạo Trình kết nối cộng đồng. Bạn cũng có thể chia sẻ Trình kết nối cộng đồng với người khác để họ có thể truy cập vào dữ liệu của riêng mình trong Looker Studio.

Bạn có thể sử dụng Trình kết nối cộng đồng trong nhiều trường hợp sử dụng:

Bạn đang trực quan hoá dữ liệu từ một nền tảng thương mại (ví dụ: mạng xã hội, tiếp thị, phân tích, v.v.)
Bạn đang trực quan hoá dữ liệu doanh nghiệp tại chỗ (ví dụ: dữ liệu bán hàng từ cơ sở dữ liệu MySQL tại chỗ)
Bạn đang cung cấp cho khách hàng một cách để hình dung dữ liệu của họ từ dịch vụ của bạn
Bạn đang tạo một nền tảng báo cáo bằng nút nhấn
Bạn đang trực quan hoá dữ liệu của riêng mình từ một nguồn trên web (ví dụ: tạo trang tổng quan Google Fit)

Kiến thức bạn sẽ học được

Cách hoạt động của Trình kết nối cộng đồng Looker Studio
Cách sử dụng Google Apps Script để tạo một Trình kết nối cộng đồng
Cách sử dụng Trình kết nối cộng đồng trong Looker Studio

Bạn cần có

Có quyền truy cập vào Internet và trình duyệt web
Tài khoản Google
Làm quen với Javascript cơ bản và Web API

2. Khảo sát nhanh

Tại sao bạn chọn lớp học lập trình này?

Tôi quan tâm đến việc trực quan hoá dữ liệu nói chung.

Tôi muốn tìm hiểu thêm về Looker Studio

Tôi muốn tạo Trình kết nối cộng đồng của riêng mình.

Tôi đang cố gắng tích hợp Looker Studio với một nền tảng khác.

Tôi quan tâm đến các giải pháp của Google Cloud.

Bạn dự định sử dụng lớp học lập trình/hướng dẫn này như thế nào?

Chỉ đọc lướt qua

Đọc và hoàn thành bài tập

Bạn đánh giá mức độ quen thuộc của mình với Looker Studio như thế nào?

Chưa từng nghe nói đến

Tôi biết nhưng không sử dụng.

Tôi thường xuyên sử dụng.

Tôi là người dùng thành thạo.

Câu nào mô tả đúng nhất về nền tảng của bạn?

Nhà phát triển

Nhà phân tích kinh doanh / tài chính / dữ liệu

Nhà khoa học dữ liệu / Kỹ sư dữ liệu

Chuyên gia về tiếp thị / mạng xã hội / phân tích kỹ thuật số

Nhà thiết kế

Khác

Bạn có thể chuyển sang trang tiếp theo để gửi thông tin khảo sát.

3. Tổng quan về Trình kết nối cộng đồng

Trình kết nối cộng đồng của Looker Studio cho phép kết nối trực tiếp từ Looker Studio đến mọi nguồn dữ liệu có thể truy cập qua Internet. Bạn có thể kết nối với các nền tảng thương mại, tập dữ liệu công khai hoặc dữ liệu riêng tư tại chỗ của riêng bạn. Community Connectors có thể tìm nạp dữ liệu thông qua Web API, JDBC API, tệp phẳng (CSV, JSON, XML) và Dịch vụ Apps Script.

Hãy xem xét một trường hợp mà bạn đã xuất bản một gói trên npm và bạn muốn theo dõi số lượt tải xuống gói theo thời gian trong ngày. Trong lớp học lập trình này, bạn sẽ tạo một Trình kết nối cộng đồng để tìm nạp dữ liệu bằng API số lượt tải gói npm. Sau đó, bạn có thể dùng Trình kết nối cộng đồng trong Looker Studio để tạo một trang tổng quan nhằm trực quan hoá số lượt tải xuống.

4. Quy trình làm việc của trình kết nối cộng đồng

Trong một Trình kết nối cộng đồng cơ bản, bạn sẽ xác định 4 hàm:

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

Tuỳ thuộc vào bước hiện tại của quy trình làm việc, Looker Studio sẽ thực thi các hàm trình kết nối này và sử dụng phản hồi trong các bước tiếp theo. Video dưới đây cung cấp thông tin tổng quan về:

Cách hoạt động của Trình kết nối cộng đồng
Các bước khác nhau trong quy trình công việc
Khi các hàm khác nhau được gọi
Khi Looker Studio hiển thị các giao diện người dùng khác nhau
Hành động dự kiến của người dùng ở các bước khác nhau

Bạn có thể tiếp tục làm lớp học lập trình sau khi xem video.

Bạn không cần phải ghi nhớ quy trình này, chỉ cần xem qua để nắm được những gì xảy ra trong một trình kết nối. Bạn luôn có thể quay lại sơ đồ này.

Ở bước tiếp theo, bạn sẽ bắt đầu tạo trình kết nối trong Google Apps Script. Bạn sẽ phải chuyển đổi qua lại giữa giao diện người dùng Apps Script và lớp học lập trình này.

5. Thiết lập dự án Apps Script

Bước 1: Truy cập vào Google Apps Script.

Bước 2: Tạo một dự án tập lệnh ứng dụng mới bằng cách nhấp vào "+ Dự án mới" ở phần trên cùng bên trái.

Bạn sẽ thấy một dự án shell có hàm myFunction trống trong tệp Code.gs.

Bước 3: Xoá hàm myFunction.

Bước 4: Đặt tên cho dự án:

Nhấp vào biểu tượng Untitled project ở trên cùng bên trái của trang
Nhập tiêu đề dự án.

Bắt đầu viết mã trình kết nối trong tệp Code.gs.

6. Xác định getAuthType()

Looker Studio sẽ gọi hàm getAuthType() khi cần biết phương thức xác thực mà trình kết nối sử dụng. Hàm này sẽ trả về phương thức xác thực mà trình kết nối yêu cầu để uỷ quyền cho dịch vụ bên thứ ba.

Đối với trình kết nối tải xuống npm mà bạn đang tạo, bạn không cần xác thực bằng bất kỳ dịch vụ nào của bên thứ ba vì API mà bạn đang sử dụng không yêu cầu xác thực. Sao chép đoạn mã sau rồi thêm vào tệp Code.gs:

Code.gs

var cc = DataStudioApp.createCommunityConnector();

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

Ở đây, bạn cho biết rằng trình kết nối của bạn không yêu cầu bất kỳ phương thức xác thực nào của bên thứ ba (AuthTypes.NONE). Để xem tất cả các phương thức xác thực được hỗ trợ, hãy xem tài liệu tham khảo về AuthType().

7. Xác định getConfig()

Người dùng trình kết nối của bạn sẽ cần phải định cấu hình trình kết nối thì mới có thể bắt đầu sử dụng. Phản hồi của hàm getConfig() xác định các lựa chọn cấu hình mà người dùng sẽ thấy. Looker Studio gọi hàm getConfig() để lấy thông tin chi tiết về cấu hình của trình kết nối. Dựa trên phản hồi do getConfig() cung cấp, Looker Studio sẽ hiển thị màn hình cấu hình trình kết nối và thay đổi một số hành vi của trình kết nối.

Trong màn hình cấu hình, bạn có thể cung cấp thông tin hoặc nhận hoạt động đầu vào của người dùng bằng cách sử dụng các phần tử biểu mẫu sau:

`TEXTINPUT`	Phần tử đầu vào	Một hộp văn bản một dòng.
`TEXTAREA`	Phần tử đầu vào	Một hộp vùng văn bản có nhiều dòng.
`SELECT_SINGLE`	Phần tử đầu vào	Trình đơn thả xuống cho các lựa chọn chọn một.
`SELECT_MULTIPLE`	Phần tử đầu vào	Trình đơn thả xuống cho các lựa chọn chọn nhiều.
`CHECKBOX`	Phần tử đầu vào	Một hộp đánh dấu duy nhất có thể dùng để ghi lại các giá trị boolean.
`INFO`	Hiển thị phần tử	Một hộp văn bản tĩnh có thể dùng để cung cấp hướng dẫn hoặc thông tin cho người dùng.

Sử dụng phần tử INFO để cung cấp hướng dẫn cho người dùng và phần tử TEXTINPUT để lấy tên gói đầu vào từ người dùng. Trong phản hồi getConfig(), bạn sẽ nhóm các phần tử biểu mẫu này theo khoá configParams.

Vì API mà bạn đang kết nối yêu cầu ngày làm tham số, hãy đặt dateRangeRequired thành true trong phản hồi getConfig(). Lệnh này yêu cầu Looker Studio cung cấp phạm vi ngày cho tất cả các yêu cầu dữ liệu. Nếu nguồn dữ liệu của bạn không yêu cầu ngày làm tham số, bạn có thể bỏ qua tham số này.

Thêm mã getConfig() sau vào tệp Code.gs, bên dưới mã hiện có cho 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();
}

Dựa trên các configParams này, khi sử dụng trình kết nối trong Looker Studio, bạn có thể thấy một màn hình cấu hình như sau. Nhưng chúng ta sẽ nói thêm về điều này ở phần sau.

Hãy chuyển sang hàm tiếp theo – getSchema().

8. Xác định getSchema()

Looker Studio gọi hàm getSchema() để lấy giản đồ được liên kết với cấu hình do người dùng chọn cho trình kết nối. Dựa trên phản hồi do getSchema() cung cấp, Looker Studio sẽ cho người dùng thấy màn hình trường, liệt kê tất cả các trường trong trình kết nối.

Đối với mọi cấu hình cụ thể của trình kết nối, giản đồ là danh sách tất cả các trường mà trình kết nối có thể cung cấp dữ liệu. Trình kết nối có thể trả về một giản đồ khác với các trường khác nhau dựa trên nhiều cấu hình. Lược đồ có thể chứa các trường mà bạn tìm nạp từ nguồn API, các trường mà bạn tính toán trong Apps Script và các trường được tính toán trong Looker Studio bằng công thức trường đã tính. Trình kết nối của bạn cung cấp siêu dữ liệu về từng trường trong giản đồ, bao gồm:

Tên trường
Loại dữ liệu cho trường
Thông tin ngữ nghĩa

Hãy xem tài liệu tham khảo về getSchema() và Field sau để tìm hiểu thêm.

Tuỳ thuộc vào cách trình kết nối tìm nạp, lược đồ có thể được cố định hoặc tính toán linh hoạt khi getSchema() được gọi. Các tham số cấu hình từ getConfig() do người dùng xác định sẽ được cung cấp trong đối số request cho hàm getSchema().

Trong lớp học lập trình này, bạn không cần truy cập vào đối số request. Bạn sẽ tìm hiểu thêm về đối số request khi viết mã cho hàm getData() trong đoạn tiếp theo.

Đối với trình kết nối của bạn, giản đồ này là cố định và chứa 3 trường sau:

`packageName`	Tên của gói npm mà người dùng cung cấp
`downloads`	Số lượt tải gói npm xuống
`day`	Ngày tính số lượt tải xuống

Dưới đây là mã getSchema() cho trình kết nối của bạn. Hàm trợ giúp getFields() sẽ trừu tượng hoá việc tạo các trường vì cả getSchema() và getData() đều cần chức năng này. Thêm đoạn mã sau vào tệp 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 };
}

Dựa trên giản đồ này, bạn có thể thấy các trường sau trong màn hình trường của Looker Studio khi sử dụng trình kết nối trong Looker Studio. Nhưng bạn sẽ biết thêm về vấn đề này khi kiểm tra giắc cắm.

Hãy chuyển sang hàm cuối cùng của chúng ta – getData().

9. Xác định getData() : Phần 1

Looker Studio gọi hàm getData() bất cứ khi nào cần tìm nạp dữ liệu. Dựa trên câu trả lời do getData() cung cấp, Looker Studio sẽ hiển thị và cập nhật biểu đồ trong trang tổng quan. getData() có thể được gọi trong các sự kiện sau:

Người dùng thêm biểu đồ vào trang tổng quan
Người dùng chỉnh sửa biểu đồ
Người dùng xem trang tổng quan
Người dùng chỉnh sửa một bộ lọc hoặc một chế độ kiểm soát dữ liệu được liên kết
Looker Studio cần có một mẫu dữ liệu

Bạn không cần sao chép mã nào trên trang này vì bạn sẽ sao chép mã đã hoàn tất

getData()

mã ở bước sau.

Tìm hiểu về đối tượng `request`

Looker Studio truyền đối tượng request với mỗi lệnh gọi getData(). Xem cấu trúc của đối tượng request bên dưới. Điều này sẽ giúp bạn viết mã cho hàm getData().

Cấu trúc đối tượng `request`

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

Đối tượng configParams sẽ chứa các giá trị cấu hình cho các thông số được xác định trong getConfig() và do người dùng định cấu hình.
Đối tượng scriptParams sẽ chứa thông tin liên quan đến việc thực thi trình kết nối. Bạn không cần sử dụng tính năng này trong lớp học lập trình này.
dateRange sẽ chứa phạm vi ngày được yêu cầu nếu được yêu cầu trong phản hồi getConfig().
fields sẽ chứa danh sách tên của các trường mà dữ liệu được yêu cầu.

Đối với trình kết nối của bạn, một ví dụ về request từ hàm getData() có thể có dạng như sau:

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

Đối với lệnh gọi getData() trong request ở trên, chỉ có 2 trường được yêu cầu mặc dù giản đồ trình kết nối có thêm các trường. Trang tiếp theo sẽ chứa phản hồi mẫu cho lệnh gọi getData() này và cấu trúc phản hồi getData() chung.

10. Xác định getData() : Phần 2

Trong phản hồi getData(), bạn sẽ cần cung cấp cả giản đồ và dữ liệu cho các trường được yêu cầu. Bạn sẽ chia mã thành 3 đoạn:

Tạo giản đồ cho các trường được yêu cầu.
Tìm nạp và phân tích cú pháp dữ liệu từ API.
Chuyển đổi dữ liệu đã phân tích cú pháp và lọc các trường được yêu cầu.

Bạn không cần sao chép mã nào trên trang này vì bạn sẽ sao chép mã đã hoàn tất

getData()

mã ở trang tiếp theo.

Đây là cấu trúc của getData() cho trình kết nối của bạn.

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

Tạo giản đồ cho các trường được yêu cầu

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

Tìm nạp và phân tích cú pháp dữ liệu từ API

URL API npm sẽ có định dạng như sau:

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

Tạo URL cho API bằng request.dateRange.startDate, request.dateRange.endDate và request.configParams.package do Looker Studio cung cấp. Sau đó, hãy tìm nạp dữ liệu từ API bằng cách sử dụng UrlFetchApp(Apps Script Class: reference). Sau đó, hãy phân tích cú pháp phản hồi đã tìm nạp.

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

Chuyển đổi dữ liệu đã phân tích cú pháp và lọc các trường được yêu cầu

Phản hồi từ API npm sẽ có định dạng sau:

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

Chuyển đổi phản hồi từ API npm và cung cấp phản hồi getData() theo định dạng sau. Nếu bạn chưa hiểu rõ định dạng này, hãy xem phản hồi mẫu trong đoạn văn sau.

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

Trong phản hồi, hãy chỉ trả về giản đồ cho các trường được yêu cầu bằng cách sử dụng thuộc tính schema. Bạn sẽ trả về dữ liệu bằng cách sử dụng thuộc tính rows dưới dạng danh sách các hàng. Đối với mỗi hàng, trình tự các trường trong values phải khớp với trình tự các trường trong schema. Dựa trên ví dụ trước đó về request, đây là phản hồi cho getData():

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

Bạn đã tạo một phần nhỏ của giản đồ. Sử dụng hàm sau để chuyển đổi dữ liệu đã phân tích cú pháp và lọc dữ liệu đó cho các trường được yêu cầu.

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. Xác định getData() : Phần 3

Mã getData() kết hợp sẽ có dạng như mã dưới đây. Thêm đoạn mã sau vào tệp 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
  };
}

Bạn đã hoàn tất tệp Code.gs! Tiếp theo, hãy cập nhật tệp kê khai.

12. Cập nhật tệp kê khai

Trong trình chỉnh sửa Apps Script, hãy chọn Project Settings (Cài đặt dự án) > Show "appsscript.json" manifest file in editor (Hiển thị tệp kê khai "appsscript.json" trong trình chỉnh sửa).

Thao tác này sẽ tạo một tệp kê khai appsscript.json mới.

Thay thế tệp appscript.json bằng nội dung sau:

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

Lưu dự án Apps Script.

Xin chúc mừng! Bạn đã tạo trình kết nối cộng đồng đầu tiên và trình kết nối này đã sẵn sàng để dùng thử!

13. Kiểm thử trình kết nối trong Looker Studio

Sử dụng quy trình triển khai

Bước 1: Trong môi trường phát triển Apps Script, hãy nhấp vào Triển khai > Triển khai thử nghiệm để mở hộp thoại Triển khai thử nghiệm.

Chế độ triển khai mặc định, Triển khai đầu, sẽ xuất hiện trong danh sách.

Bước 2: Nhấp vào Sao chép để sao chép Mã nhận dạng triển khai tiêu đề.

Bước 3: Để tải trình kết nối trong Looker Studio, hãy thay thế phần giữ chỗ <HEAD_DEPLOYMENT_ID> trong đường liên kết sau bằng Head Deployment ID (Mã nhận dạng triển khai chính) của trình kết nối rồi truy cập vào đường liên kết đó trong trình duyệt:

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

Uỷ quyền cho trình kết nối

Người dùng Looker Studio lần đầu: Nếu chưa từng sử dụng Looker Studio, bạn sẽ được yêu cầu uỷ quyền cho Looker Studio và đồng ý với các điều khoản và điều kiện. Hoàn tất quy trình uỷ quyền. Khi sử dụng Looker Studio lần đầu tiên, bạn cũng có thể thấy một hộp thoại để cập nhật lựa chọn ưu tiên về hoạt động tiếp thị. Đăng ký nhận Thông báo về sản phẩm nếu bạn muốn nhận thông tin cập nhật về các tính năng mới nhất, bản cập nhật và thông báo về sản phẩm qua email.

Sau khi tải xong, bạn sẽ thấy lời nhắc uỷ quyền cho trình kết nối.

Nhấp vào Uỷ quyền và cung cấp thông tin uỷ quyền bắt buộc cho trình kết nối.

Định cấu hình trình kết nối

Sau khi quá trình uỷ quyền hoàn tất, màn hình cấu hình sẽ xuất hiện. Nhập "lighthouse" vào vùng nhập văn bản rồi nhấp vào Kết nối ở trên cùng bên phải.

Xác nhận giản đồ

Bạn sẽ thấy màn hình các trường. Nhấp vào Tạo báo cáo ở trên cùng bên phải.

Tạo trang tổng quan của bạn

Bạn sẽ ở trong môi trường trang tổng quan của Looker Studio. Nhấp vào Thêm vào báo cáo.

Trong Looker Studio, mỗi khi người dùng truy cập vào một trình kết nối và thêm một cấu hình mới, một nguồn dữ liệu mới sẽ được tạo trong tài khoản Looker Studio của người dùng. Bạn có thể coi nguồn dữ liệu là một phiên bản của trình kết nối dựa trên một cấu hình cụ thể. Dựa trên trình kết nối và cấu hình mà người dùng đã chọn, nguồn dữ liệu sẽ trả về một bảng dữ liệu có một nhóm trường cụ thể. Người dùng có thể tạo nhiều nguồn dữ liệu từ cùng một trình kết nối. Bạn có thể sử dụng một nguồn dữ liệu trong nhiều báo cáo và cùng một báo cáo có thể sử dụng nhiều nguồn dữ liệu.

Bây giờ, hãy thêm Biểu đồ chuỗi thời gian! Trong trình đơn, hãy nhấp vào Chèn > Chuỗi thời gian. Sau đó, hãy đặt chuỗi thời gian vào canvas. Bạn sẽ thấy biểu đồ chuỗi thời gian về số lượt tải xuống npm cho gói đã chọn. Thêm chế độ kiểm soát bộ lọc ngày và xem trang tổng quan như minh hoạ bên dưới.

Vậy là xong! Bạn vừa tạo trình kết nối cộng đồng đầu tiên! Thao tác này sẽ đưa bạn đến phần cuối của lớp học lập trình này. Bây giờ, hãy xem những bước tiếp theo mà bạn có thể thực hiện.

14. Các bước tiếp theo

Cải thiện trình kết nối mà bạn đã tạo

Cải thiện trình kết nối mà bạn vừa tạo:

Trong Looker Studio, nếu không cung cấp tên gói trong màn hình cấu hình cho trình kết nối, bạn sẽ thấy thông báo lỗi khi vẽ biểu đồ chuỗi thời gian. Hãy thử thêm tính năng xác thực dữ liệu đầu vào hoặc một lựa chọn mặc định vào cấu hình trình kết nối.
Hãy thử thêm tính năng hỗ trợ truy vấn nhiều tên gói cùng lúc trong cấu hình trình kết nối. Lưu ý: API số lượt tải gói npm xuống hỗ trợ việc nhập nhiều tên gói được phân tách bằng dấu phẩy.
Bạn có thể tìm thấy giải pháp cho cả hai vấn đề này trong mã trình kết nối npm của chúng tôi.

Làm được nhiều việc hơn nhờ Trình kết nối cộng đồng

Xem tài liệu tham khảo cho API trình kết nối và tệp kê khai.
Khám phá mã trình kết nối mẫu trong Kho lưu trữ mã nguồn mở của chúng tôi để nắm rõ các phương pháp hay nhất.
Hoàn tất lớp học lập trình clasp để có thể phát triển Trình kết nối cộng đồng trong môi trường cục bộ.
Sau khi bạn tạo xong một Trình kết nối cộng đồng hoàn chỉnh, hãy cân nhắc các lựa chọn xuất bản hiện có.
Tạo một hình ảnh dữ liệu cộng đồng cho Looker Studio.

Tài nguyên khác

Dưới đây là nhiều tài nguyên mà bạn có thể truy cập để tìm hiểu thêm về nội dung được đề cập trong lớp học lập trình này.

Loại tài nguyên	Tính năng người dùng	Các tính năng dành cho nhà phát triển
Tài liệu	Trung tâm trợ giúp	Tài liệu dành cho nhà phát triển
Tin tức và thông tin cập nhật	Đăng ký trong Looker Studio > Cài đặt người dùng	Danh sách gửi thư cho nhà phát triển
Đặt câu hỏi	Diễn đàn người dùng	Stack Overflow [looker-studio]
Video	DataVis DevTalk
Ví dụ	Thư viện báo cáo Thư viện trình kết nối	Kho lưu trữ nguồn mở

Kết nối và trình bày trực quan mọi dữ liệu của bạn trong Looker Studio

1. Giới thiệu

Kiến thức bạn sẽ học được

Bạn cần có

2. Khảo sát nhanh

Tại sao bạn chọn lớp học lập trình này?

Bạn dự định sử dụng lớp học lập trình/hướng dẫn này như thế nào?

Bạn đánh giá mức độ quen thuộc của mình với Looker Studio như thế nào?

Câu nào mô tả đúng nhất về nền tảng của bạn?

3. Tổng quan về Trình kết nối cộng đồng

4. Quy trình làm việc của trình kết nối cộng đồng

5. Thiết lập dự án Apps Script

6. Xác định getAuthType()

Code.gs

7. Xác định getConfig()

Code.gs

8. Xác định getSchema()

Code.gs

9. Xác định getData() : Phần 1

Tìm hiểu về đối tượng request

Cấu trúc đối tượng request

10. Xác định getData() : Phần 2

Tạo giản đồ cho các trường được yêu cầu

Tìm nạp và phân tích cú pháp dữ liệu từ API

Chuyển đổi dữ liệu đã phân tích cú pháp và lọc các trường được yêu cầu

11. Xác định getData() : Phần 3

Code.gs

12. Cập nhật tệp kê khai

appsscript.json

13. Kiểm thử trình kết nối trong Looker Studio

Sử dụng quy trình triển khai

Uỷ quyền cho trình kết nối

Định cấu hình trình kết nối

Xác nhận giản đồ

Tạo trang tổng quan của bạn

14. Các bước tiếp theo

Cải thiện trình kết nối mà bạn đã tạo

Làm được nhiều việc hơn nhờ Trình kết nối cộng đồng

Tài nguyên khác

Tìm hiểu về đối tượng `request`

Cấu trúc đối tượng `request`