Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

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

1. บทนำ

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

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

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

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

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

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

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

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

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

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

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

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

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

ฉันต้องการสร้างเครื่องมือเชื่อมต่อชุมชนของตัวเอง

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

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

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

อ่านผ่านๆ เท่านั้น

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

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

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

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

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

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

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

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

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

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

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

นักออกแบบ

อื่นๆ

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

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

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

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

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

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

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

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

วิธีการทำงานของ Community Connector
ขั้นตอนต่างๆ ในเวิร์กโฟลว์
เมื่อมีการเรียกใช้ฟังก์ชันต่างๆ
เมื่อ Data 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()

Data 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() การตอบกลับของฟังก์ชันจะกำหนดตัวเลือกการกำหนดค่าที่ผู้ใช้จะเห็น Data Studio เรียกใช้ฟังก์ชัน getConfig() เพื่อรับรายละเอียดการกำหนดค่าของเครื่องมือเชื่อมต่อ Data Studio จะแสดงหน้าจอการกำหนดค่าเครื่องมือเชื่อมต่อและเปลี่ยนลักษณะการทำงานของเครื่องมือเชื่อมต่อบางอย่างโดยอิงตามการตอบกลับที่ getConfig() ให้ไว้

ในหน้าจอการกำหนดค่า คุณสามารถระบุข้อมูลหรือรับข้อมูลจากผู้ใช้ได้โดยใช้องค์ประกอบแบบฟอร์มต่อไปนี้

`TEXTINPUT`	องค์ประกอบอินพุต	กล่องข้อความบรรทัดเดียว
`TEXTAREA`	องค์ประกอบอินพุต	กล่องข้อความหลายบรรทัด
`SELECT_SINGLE`	องค์ประกอบอินพุต	เมนูแบบเลื่อนลงสำหรับตัวเลือกการเลือกแบบเลือกรายการเดียว
`SELECT_MULTIPLE`	องค์ประกอบอินพุต	เมนูแบบเลื่อนลงสำหรับตัวเลือกการเลือกหลายรายการ
`CHECKBOX`	องค์ประกอบอินพุต	ช่องทำเครื่องหมายเดียวที่ใช้เพื่อบันทึกค่าบูลีนได้
`INFO`	องค์ประกอบที่แสดง	กล่องข้อความธรรมดาแบบคงที่ซึ่งใช้เพื่อแสดงวิธีการหรือข้อมูลแก่ผู้ใช้ได้

ใช้องค์ประกอบ INFO เพื่อให้วิธีการแก่ผู้ใช้ และองค์ประกอบ TEXTINPUT เพื่อรับชื่อแพ็กเกจอินพุตจากผู้ใช้ ในgetConfig()คำตอบ คุณจะจัดกลุ่มองค์ประกอบของแบบฟอร์มเหล่านี้ภายใต้configParamsคีย์

เนื่องจาก API ที่คุณเชื่อมต่อต้องใช้พารามิเตอร์วันที่ ให้ตั้งค่า dateRangeRequired เป็น true ในการตอบกลับ getConfig() ซึ่งจะบอก Data 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();
}

เมื่อใช้เครื่องมือเชื่อมต่อใน Data Studio คุณจะเห็นหน้าจอกําหนดค่าคล้ายกับหน้าจอต่อไปนี้ตาม configParams เหล่านี้ แต่เราจะมาพูดถึงเรื่องนี้กันในภายหลัง

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

8. กำหนด getSchema()

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

สำหรับการกำหนดค่าเฉพาะของตัวเชื่อมต่อ สคีมาคือรายการของช่องทั้งหมดที่ตัวเชื่อมต่อสามารถให้ข้อมูลได้ ตัวเชื่อมต่ออาจแสดงสคีมาที่แตกต่างกันพร้อมช่องที่แตกต่างกันตามการกำหนดค่าต่างๆ สคีมาอาจมีช่องที่คุณดึงจากแหล่งที่มาของ API, ช่องที่คุณคำนวณใน Apps Script และช่องที่คำนวณใน Data 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 };
}

เมื่อใช้เครื่องมือเชื่อมต่อใน Data Studio คุณจะเห็นช่องต่อไปนี้ในหน้าจอช่อง Data Studio ตามสคีมานี้ แต่เราจะพูดถึงเรื่องนี้ในภายหลังเมื่อคุณทดสอบตัวเชื่อมต่อ

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

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

Data Studio จะเรียกใช้ฟังก์ชัน getData() ทุกครั้งที่ต้องการดึงข้อมูล Data Studio จะแสดงผลและอัปเดตแผนภูมิในแดชบอร์ดตามการตอบกลับที่ getData() ให้ getData() อาจได้รับการเรียกใช้ในระหว่างเหตุการณ์ต่อไปนี้

ผู้ใช้เพิ่มแผนภูมิลงในแดชบอร์ด
ผู้ใช้แก้ไขแผนภูมิ
ผู้ใช้ดูแดชบอร์ด
ผู้ใช้แก้ไขตัวกรองหรือการควบคุมข้อมูลที่เชื่อมโยง
Data Studio ต้องการตัวอย่างข้อมูล

คุณไม่จำเป็นต้องคัดลอกโค้ดจากหน้านี้ เนื่องจากคุณจะคัดลอก

getData()

รหัสในขั้นตอนถัดไป

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

Data Studio จะส่งออบเจ็กต์ request พร้อมกับการเรียกใช้ getData() แต่ละครั้ง ตรวจสอบโครงสร้างของออบเจ็กต์ request ด้านล่าง ซึ่งจะช่วยให้คุณเขียนโค้ดสำหรับฟังก์ชัน getData() ได้

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

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

ออบเจ็กต์ configParams จะมีค่าการกำหนดค่าสำหรับพารามิเตอร์ที่กำหนดไว้ใน getConfig() และกำหนดค่าโดยผู้ใช้
ออบเจ็กต์ scriptParams จะมีข้อมูลที่เกี่ยวข้องกับการดำเนินการของตัวเชื่อมต่อ คุณไม่จำเป็นต้องใช้สิ่งนี้สำหรับ Codelab นี้
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. กำหนด 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 ที่ Data 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. ทดสอบเครื่องมือเชื่อมต่อใน Data Studio

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

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

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

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

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

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

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

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

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

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

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

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

ยืนยันสคีมา

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. บทนำ

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

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

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

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

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

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

Code.gs

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

appsscript.json

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

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

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

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

ยืนยันสคีมา

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

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

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

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

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

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

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