เชื่อมต่อและแสดงข้อมูลทั้งหมดของคุณใน Looker Studio

1. บทนำ

Looker Studio ช่วยให้คุณสร้างแดชบอร์ดแบบอินเทอร์แอกทีฟแบบเรียลไทม์ที่มีการแสดงข้อมูลเป็นภาพที่สวยงามได้ฟรี ดึงข้อมูลจากแหล่งที่มาต่างๆ และสร้างรายงานได้ไม่จำกัดใน Looker Studio พร้อมความสามารถในการแก้ไขและแชร์ได้อย่างเต็มที่ ภาพหน้าจอต่อไปนี้เป็นตัวอย่างแดชบอร์ด Looker Studio

( คลิกที่นี่เพื่อดูรายงานตัวอย่างนี้ใน Looker Studio)

ปลั๊กอินจากชุมชนสำหรับใช้ลิงก์ข้อมูลเป็นฟีเจอร์สำหรับ Looker Studio ที่ช่วยให้คุณใช้ Apps Script เพื่อสร้างเครื่องมือเชื่อมต่อกับแหล่งข้อมูลที่เข้าถึงได้บนอินเทอร์เน็ต ปลั๊กอินจากชุมชนสำหรับใช้ลิงก์ข้อมูลสร้างโดยชุมชน Looker Studio ซึ่งหมายความว่าทุกคนสามารถสร้างตัวเชื่อมต่อชุมชนได้ นอกจากนี้ คุณยังแชร์ปลั๊กอินจากชุมชนสำหรับใช้ลิงก์ข้อมูลกับผู้อื่นได้เพื่อให้เข้าถึงข้อมูลของตนเองจากภายใน Looker Studio ได้

คุณใช้ตัวเชื่อมต่อชุมชนในกรณีการใช้งานต่างๆ ได้ดังนี้

คุณกำลังแสดงข้อมูลจากแพลตฟอร์มเชิงพาณิชย์ (เช่น โซเชียลมีเดีย การตลาด ข้อมูลวิเคราะห์ ฯลฯ)
คุณกำลังแสดงข้อมูลระดับองค์กรในองค์กร (เช่น ข้อมูลยอดขายจากฐานข้อมูล MySQL ในองค์กร)
คุณมีวิธีให้ลูกค้าเห็นภาพข้อมูลจากบริการของคุณ
คุณกำลังสร้างแพลตฟอร์มการรายงานแบบปุ่มกด
คุณกำลังแสดงข้อมูลของคุณเองจากแหล่งที่มาบนเว็บ (เช่น การสร้างแดชบอร์ด Google Fit)

สิ่งที่คุณจะได้เรียนรู้

วิธีการทำงานของปลั๊กอินจากชุมชนสำหรับใช้ลิงก์ข้อมูลของ Looker Studio
วิธีใช้ Google Apps Script เพื่อสร้าง Community Connector
วิธีใช้ปลั๊กอินจากชุมชนสำหรับใช้ลิงก์ข้อมูลใน Looker Studio

สิ่งที่คุณต้องมี

สิทธิ์เข้าถึงอินเทอร์เน็ตและเว็บเบราว์เซอร์
บัญชี Google
มีความรู้พื้นฐานเกี่ยวกับ JavaScript และ Web API

2. แบบสำรวจสั้นๆ

ทำไมคุณถึงเลือก Codelab นี้

ฉันสนใจการแสดงข้อมูลด้วยภาพโดยทั่วไป

ฉันต้องการดูข้อมูลเพิ่มเติมเกี่ยวกับ Looker Studio

ฉันต้องการสร้างปลั๊กอินจากชุมชนของตัวเอง

ฉันพยายามผสานรวม Looker Studio กับแพลตฟอร์มอื่น

ฉันสนใจโซลูชันของ Google Cloud

คุณวางแผนที่จะใช้ Codelab/บทแนะนำนี้อย่างไร

อ่านคร่าวๆ เท่านั้น

อ่านและทำแบบฝึกหัด

คุณคุ้นเคยกับ Looker Studio มากน้อยเพียงใด

ไม่เคยได้ยิน

ฉันรู้ว่ามันคืออะไร แต่ไม่ได้ใช้

ฉันใช้เป็นประจำ

ฉันเป็นผู้ใช้ผู้เชี่ยวชาญ

ข้อใดอธิบายถึงพื้นฐานของคุณได้ดีที่สุด

นักพัฒนาซอฟต์แวร์

นักวิเคราะห์ธุรกิจ / การเงิน / ข้อมูล

นักวิทยาศาสตร์ข้อมูล / วิศวกรข้อมูล

ผู้เชี่ยวชาญด้านการตลาด / โซเชียลมีเดีย / การวิเคราะห์ข้อมูลดิจิทัล

นักออกแบบ

อื่นๆ

คุณไปยังหน้าถัดไปเพื่อส่งข้อมูลแบบสำรวจได้

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

ปลั๊กอินจากชุมชนสำหรับใช้ลิงก์ข้อมูลของ Looker Studio ช่วยให้เชื่อมต่อจาก Looker Studio ไปยังแหล่งข้อมูลที่เข้าถึงได้บนอินเทอร์เน็ตได้โดยตรง คุณเชื่อมต่อกับแพลตฟอร์มเชิงพาณิชย์ ชุดข้อมูลสาธารณะ หรือข้อมูลส่วนตัวในองค์กรของคุณเองได้ Community Connector สามารถดึงข้อมูลผ่าน Web API, JDBC API, ไฟล์แบบเรียบ (CSV, JSON, XML) และบริการ Apps Script

พิจารณาสถานการณ์ที่คุณเผยแพร่แพ็กเกจใน npm และต้องการติดตามจำนวนการดาวน์โหลดแพ็กเกจเมื่อเวลาผ่านไปในแต่ละวัน ในโค้ดแล็บนี้ คุณจะได้สร้างเครื่องมือเชื่อมต่อชุมชนที่ดึงข้อมูลโดยใช้ API จำนวนการดาวน์โหลดแพ็กเกจ npm จากนั้นจะใช้เครื่องมือเชื่อมต่อชุมชนใน Looker Studio เพื่อสร้างแดชบอร์ดเพื่อแสดงจำนวนการดาวน์โหลดเป็นภาพได้

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

ในเครื่องมือเชื่อมต่อชุมชนพื้นฐาน คุณจะต้องกำหนดฟังก์ชัน 4 อย่าง ได้แก่

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

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

วิธีการทำงานของ Community Connector
ขั้นตอนต่างๆ ในเวิร์กโฟลว์
เมื่อมีการเรียกใช้ฟังก์ชันต่างๆ
เมื่อ Looker Studio แสดงอินเทอร์เฟซผู้ใช้ที่แตกต่างกัน
การกระทำของผู้ใช้ที่คาดหวังในขั้นตอนต่างๆ

คุณสามารถทำตาม Codelab ต่อได้หลังจากดูวิดีโอ

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

ในขั้นตอนถัดไป คุณจะเริ่มสร้างตัวเชื่อมต่อใน Google Apps Script คุณจะต้องสลับไปมาระหว่าง UI ของ Apps Script กับ Codelab นี้

5. ตั้งค่าโปรเจ็กต์ Apps Script

ขั้นตอนที่ 1: ไปที่ Google Apps Script

ขั้นตอนที่ 2: สร้างโปรเจ็กต์ Apps Script ใหม่โดยคลิก "+ โปรเจ็กต์ใหม่" ในส่วนด้านซ้ายบน

คุณจะเห็นโปรเจ็กต์เปล่าที่มีฟังก์ชัน myFunction ว่างเปล่าในไฟล์ Code.gs

ขั้นตอนที่ 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 ที่คุณเชื่อมต่อต้องใช้พารามิเตอร์วันที่ ให้ตั้งค่า 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 คุณจะเห็นหน้าจอกําหนดค่าที่คล้ายกับหน้าจอต่อไปนี้ตาม ConfigParams เหล่านี้ แต่เราจะมาพูดถึงเรื่องนี้กันในภายหลัง

มาดูฟังก์ชันถัดไปกันเลย นั่นคือ getSchema()

8. กำหนด getSchema()

Looker Studio เรียกใช้ฟังก์ชัน getSchema() เพื่อรับสคีมาที่เชื่อมโยงกับการกำหนดค่าที่ผู้ใช้เลือกสำหรับตัวเชื่อมต่อ Looker Studio จะแสดงหน้าจอช่องต่อผู้ใช้ซึ่งแสดงช่องทั้งหมดในเครื่องมือเชื่อมต่อ โดยอิงตามคำตอบที่ getSchema() ให้ไว้

สำหรับการกำหนดค่าเครื่องมือเชื่อมต่อที่เฉพาะเจาะจง สคีมาคือรายการของช่องทั้งหมดที่เครื่องมือเชื่อมต่อสามารถให้ข้อมูลได้ ตัวเชื่อมต่ออาจแสดงสคีมาที่แตกต่างกันโดยมีฟิลด์ที่แตกต่างกันตามการกำหนดค่าต่างๆ สคีมาอาจมีฟิลด์ที่คุณดึงมาจากแหล่งที่มาของ API, ฟิลด์ที่คุณคำนวณใน Apps Script และฟิลด์ที่คำนวณใน Looker Studio โดยใช้สูตรฟิลด์ที่คำนวณแล้ว ตัวเชื่อมต่อจะให้ข้อมูลเมตาเกี่ยวกับแต่ละฟิลด์ในสคีมา ซึ่งรวมถึง

ชื่อฟิลด์
ประเภทข้อมูลของช่อง
ข้อมูลเชิงความหมาย

โปรดอ่านข้อมูลอ้างอิงของ getSchema() และ Field ในภายหลังเพื่อดูข้อมูลเพิ่มเติม

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

สำหรับ Codelab นี้ คุณไม่จำเป็นต้องเข้าถึงอาร์กิวเมนต์ 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 คุณจะเห็นช่องต่อไปนี้ในหน้าจอช่อง Looker Studio ตามสคีมานี้ แต่เราจะพูดถึงเรื่องนี้ในภายหลังเมื่อคุณทดสอบตัวเชื่อมต่อ

มาดูฟังก์ชันสุดท้ายกัน นั่นคือ getData()

9. กำหนด getData() : ส่วนที่ 1

Looker Studio จะเรียกใช้ฟังก์ชัน getData() ทุกครั้งที่ต้องการดึงข้อมูล Looker Studio จะแสดงผลและอัปเดตแผนภูมิในแดชบอร์ดตามการตอบกลับที่ getData() ให้ 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',
    }
  ]
}

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

10. Define getData() : ตอนที่ 2

ในgetData()คำตอบ คุณจะต้องระบุทั้งสคีมาและข้อมูลสำหรับช่องที่ขอ คุณจะแบ่งโค้ดออกเป็น 3 ส่วน ดังนี้

สร้างสคีมาสำหรับฟิลด์ที่ขอ
ดึงข้อมูลและแยกวิเคราะห์ข้อมูลจาก 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 ของ npm API จะอยู่ในรูปแบบนี้

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: reference) จากนั้นแยกวิเคราะห์การตอบกลับที่ดึงข้อมูลมา

  // 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. Define 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 เสร็จแล้ว จากนั้นอัปเดตไฟล์ Manifest

12. อัปเดตไฟล์ Manifest

ในเครื่องมือแก้ไข Apps Script ให้เลือกการตั้งค่าโปรเจ็กต์ > แสดงไฟล์ Manifest "appsscript.json" ในเครื่องมือแก้ไข

ซึ่งจะสร้างไฟล์ Manifest ใหม่ของ 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

ใช้การทำให้ใช้งานได้

ขั้นตอนที่ 1: ในสภาพแวดล้อมการพัฒนา Apps Script ให้คลิกทำให้ใช้งานได้ > การทำให้ใช้งานได้สำหรับการทดสอบเพื่อเปิดกล่องโต้ตอบการทำให้ใช้งานได้สำหรับการทดสอบ

ระบบจะแสดงการทำให้ใช้งานได้เริ่มต้น ซึ่งก็คือการทำให้ Head ใช้งานได้

ขั้นตอนที่ 2: คลิกคัดลอกเพื่อคัดลอกรหัสการติดตั้งใช้งานส่วนหัว

ขั้นตอนที่ 3: หากต้องการโหลดตัวเชื่อมต่อใน Looker Studio ให้แทนที่ตัวยึดตําแหน่ง <HEAD_DEPLOYMENT_ID> ในลิงก์ต่อไปนี้ด้วยรหัสการติดตั้งใช้งานส่วนหัวของตัวเชื่อมต่อ แล้วคลิกลิงก์ในเบราว์เซอร์

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

ให้สิทธิ์เครื่องมือเชื่อมต่อ

ผู้ใช้ Looker Studio เป็นครั้งแรก: หากคุณไม่เคยใช้ Looker Studio มาก่อน ระบบจะขอให้คุณให้สิทธิ์ Looker Studio และยอมรับข้อกำหนดและเงื่อนไข ทำตามกระบวนการให้สิทธิ์ให้เสร็จสมบูรณ์ เมื่อใช้ Looker Studio เป็นครั้งแรก คุณอาจเห็นกล่องโต้ตอบให้อัปเดตค่ากำหนดทางการตลาดด้วย ลงชื่อสมัครรับประกาศเกี่ยวกับผลิตภัณฑ์หากต้องการทราบข้อมูลเกี่ยวกับฟีเจอร์ล่าสุด การอัปเดต และประกาศเกี่ยวกับผลิตภัณฑ์ทางอีเมล

เมื่อโหลดแล้ว คุณจะเห็นข้อความแจ้งให้ให้สิทธิ์ตัวเชื่อมต่อ

คลิก "ให้สิทธิ์" และให้สิทธิ์ที่จำเป็นแก่ตัวเชื่อมต่อ

กำหนดค่าเครื่องมือเชื่อมต่อ

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

ยืนยันสคีมา

คุณจะเห็นหน้าจอช่อง คลิกสร้างรายงานที่ด้านขวาบน

สร้างหน้าแดชบอร์ด

คุณจะอยู่ในสภาพแวดล้อมแดชบอร์ด Looker Studio คลิกเพิ่มลงในรายงาน

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

ตอนนี้ให้เพิ่มแผนภูมิอนุกรมเวลา ในเมนู ให้คลิกแทรก > อนุกรมเวลา จากนั้นวางอนุกรมเวลาใน Canvas คุณควรเห็นแผนภูมิอนุกรมเวลาของจำนวนการดาวน์โหลด npm สำหรับแพ็กเกจที่เลือก เพิ่มตัวควบคุมตัวกรองวันที่และดูแดชบอร์ดตามที่แสดงด้านล่าง

เท่านี้ก็เรียบร้อย คุณเพิ่งสร้างปลั๊กอินจากชุมชนตัวแรก ซึ่งจะนำคุณไปสู่ตอนท้ายของ Codelab นี้ ตอนนี้มาดูกันว่าคุณจะทำอะไรต่อไปได้บ้าง

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

ปรับปรุงตัวเชื่อมต่อที่คุณสร้าง

ปรับปรุงตัวเชื่อมต่อที่คุณเพิ่งสร้าง

ใน Looker Studio หากไม่ได้ระบุชื่อแพ็กเกจในหน้าจอการกำหนดค่าสำหรับเครื่องมือเชื่อมต่อ คุณจะเห็นข้อความแสดงข้อผิดพลาดเมื่อวาดแผนภูมิอนุกรมเวลา ลองเพิ่มการตรวจสอบอินพุตหรือตัวเลือกเริ่มต้นในการกำหนดค่าเครื่องมือเชื่อมต่อ
ลองเพิ่มการรองรับการค้นหาชื่อแพ็กเกจหลายชื่อพร้อมกันในการกำหนดค่าตัวเชื่อมต่อ เคล็ดลับ: API จำนวนการดาวน์โหลดแพ็กเกจ npm รองรับการป้อนชื่อแพ็กเกจหลายชื่อโดยคั่นด้วยคอมมา
คุณดูวิธีแก้ปัญหาทั้ง 2 อย่างนี้ได้ในโค้ดตัวเชื่อมต่อ npm

ทำสิ่งต่างๆ ได้มากขึ้นด้วยเครื่องมือเชื่อมต่อชุมชน

ดูข้อมูลอ้างอิงสำหรับ API ของเครื่องมือเชื่อมต่อและไฟล์ Manifest
ดูตัวอย่างโค้ดของเครื่องมือเชื่อมต่อในที่เก็บข้อมูลโอเพนซอร์สเพื่อทำความเข้าใจแนวทางปฏิบัติแนะนำ
ทำ Codelab ของ Clasp ให้เสร็จสมบูรณ์เพื่อให้คุณพัฒนา Community Connector ในสภาพแวดล้อมในเครื่องได้
เมื่อสร้าง Community Connector เสร็จสมบูรณ์แล้ว ให้พิจารณาตัวเลือกการเผยแพร่ที่มี
สร้างการแสดงภาพข้อมูลจากชุมชนสำหรับ Looker Studio

แหล่งข้อมูลเพิ่มเติม

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

ประเภททรัพยากร	ฟีเจอร์สำหรับผู้ใช้	ฟีเจอร์สำหรับนักพัฒนาแอป
เอกสารประกอบ	ศูนย์ช่วยเหลือ	เอกสารประกอบสำหรับนักพัฒนาซอฟต์แวร์
ข่าวสารและข้อมูลอัปเดต	ลงชื่อสมัครใช้ใน Looker Studio > การตั้งค่าผู้ใช้	รายชื่ออีเมลของนักพัฒนาแอป
ถามคำถาม	ฟอรัมผู้ใช้	Stack Overflow [looker-studio]
วิดีโอ	DataVis DevTalk
ตัวอย่าง	แกลเลอรีรายงาน แกลเลอรีตัวเชื่อมต่อ	ที่เก็บโอเพนซอร์ส

เชื่อมต่อและแสดงข้อมูลทั้งหมดของคุณใน Looker Studio

1. บทนำ

สิ่งที่คุณจะได้เรียนรู้

สิ่งที่คุณต้องมี

2. แบบสำรวจสั้นๆ

ทำไมคุณถึงเลือก Codelab นี้

คุณวางแผนที่จะใช้ Codelab/บทแนะนำนี้อย่างไร

คุณคุ้นเคยกับ 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. Define getData() : ตอนที่ 2

สร้างสคีมาสำหรับฟิลด์ที่ขอ

ดึงและแยกวิเคราะห์ข้อมูลจาก API

เปลี่ยนรูปแบบข้อมูลที่แยกวิเคราะห์แล้วและกรองฟิลด์ที่ขอ

11. Define getData() : ตอนที่ 3

Code.gs

12. อัปเดตไฟล์ Manifest

appsscript.json

13. ทดสอบเครื่องมือเชื่อมต่อใน Looker Studio

ใช้การทำให้ใช้งานได้

ให้สิทธิ์เครื่องมือเชื่อมต่อ

กำหนดค่าเครื่องมือเชื่อมต่อ

ยืนยันสคีมา

สร้างหน้าแดชบอร์ด

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

ปรับปรุงตัวเชื่อมต่อที่คุณสร้าง

ทำสิ่งต่างๆ ได้มากขึ้นด้วยเครื่องมือเชื่อมต่อชุมชน

แหล่งข้อมูลเพิ่มเติม

ทำความเข้าใจออบเจ็กต์ `request`

โครงสร้างออบเจ็กต์ `request`