เปลี่ยนข้อมูลขนาดใหญ่ให้กลายเป็นข้อมูลเชิงลึกโดยใช้ Google ชีตและสไลด์

มีเครื่องมือมากมายสำหรับนักวิทยาศาสตร์ข้อมูลในการวิเคราะห์บิ๊กดาต้า แต่ท้ายที่สุดแล้ว คุณก็ยังต้องอธิบายผลลัพธ์เหล่านั้นให้ผู้จัดการทราบอยู่ดีใช่ไหม การแสดงตัวเลขจำนวนมากบนกระดาษหรือในฐานข้อมูลต่อผู้มีส่วนเกี่ยวข้องหลักแทบจะเป็นไปไม่ได้ Codelab Google Apps Script ระดับกลางนี้ใช้แพลตฟอร์มสำหรับนักพัฒนาซอฟต์แวร์ 2 แพลตฟอร์มของ Google ได้แก่ G Suite และ Google Cloud Platform (GCP) เพื่อช่วยให้คุณทำขั้นตอนสุดท้ายให้เสร็จสมบูรณ์

เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของ Google Cloud ช่วยให้คุณวิเคราะห์ข้อมูลเชิงลึก จากนั้นนำผลลัพธ์เหล่านั้นไปใส่ในสเปรดชีต และสร้างงานนำเสนอสไลด์ด้วยข้อมูลดังกล่าว ซึ่งจะช่วยให้มีขั้นตอนที่เหมาะสมยิ่งขึ้นในการส่งผลลัพธ์ให้แก่ฝ่ายจัดการ Codelab นี้ครอบคลุม API ของ BigQuery ใน GCP (ในรูปแบบบริการขั้นสูงของ Apps Script) และบริการ Apps Script ในตัวสำหรับ Google ชีตและ Google สไลด์

แรงจูงใจ/งานที่ปรากฏอยู่ก่อน

แอปตัวอย่างใน Codelab นี้ได้รับแรงบันดาลใจจากตัวอย่างโค้ดอื่นๆ เหล่านี้...

แม้ว่าแอปตัวอย่างใน Codelab ของ Slides API จะมี BigQuery และสไลด์ด้วย แต่ก็แตกต่างจากแอปตัวอย่างของ Codelab นี้ในหลายๆ ด้าน ดังนี้

  • แอป Node.js กับแอป Apps Script ของเรา
  • ใช้ REST API ขณะที่เราใช้บริการ Apps Script
  • ใช้ Google ไดรฟ์แต่ไม่ได้ใช้ Google ชีต ในขณะที่แอปนี้ใช้ชีตแต่ไม่ได้ใช้ไดรฟ์

สำหรับ Codelab นี้ เราต้องการรวมเทคโนโลยีต่างๆ ไว้ในแอปเดียวให้ได้มากที่สุด พร้อมทั้งแสดงฟีเจอร์และ API จาก Google Cloud ในลักษณะที่คล้ายกับ Use Case ในชีวิตจริงมากขึ้น เป้าหมายคือการสร้างแรงบันดาลใจให้คุณใช้จินตนาการและพิจารณาใช้ประโยชน์จากทั้ง GCP และ G Suite เพื่อแก้ปัญหาที่ท้าทายสำหรับองค์กรหรือลูกค้าของคุณ

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

  • วิธีใช้ Google Apps Script กับบริการต่างๆ ของ Google (GCP และ G Suite)
  • วิธีใช้ Google BigQuery เพื่อทำการวิเคราะห์บิ๊กดาต้า
  • วิธีสร้าง Google ชีตและป้อนข้อมูลลงในชีต
  • วิธีสร้างแผนภูมิใหม่ในชีต
  • วิธีโอนแผนภูมิและข้อมูลจากชีตไปยังงานนำเสนอใน Google สไลด์

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

  • การเข้าถึงอินเทอร์เน็ตและเว็บเบราว์เซอร์
  • บัญชี Google (บัญชี G Suite อาจต้องได้รับการอนุมัติจากผู้ดูแลระบบ)
  • ทักษะ JavaScript ขั้นพื้นฐาน
  • ความรู้ด้านการพัฒนา Apps Script อาจเป็นประโยชน์ แต่ไม่จำเป็นต้องมี

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

อ่านเพื่อรับข้อมูลและอาจส่งต่อให้เพื่อนร่วมงานด้านเทคนิค อ่านให้จบและลองทำแบบฝึกหัดให้ได้มากที่สุด ไม่ว่าจะเกิดอะไรขึ้น ฉันจะทำ Codelab นี้ให้เสร็จ

คุณจะให้คะแนนประสบการณ์การใช้งานเครื่องมือและ API สำหรับนักพัฒนาแอป G Suite เท่าใด

ผู้ฝึกหัด ขั้นกลาง ผู้ชำนาญ

คุณจะให้คะแนนประสบการณ์การใช้งาน Apps Script โดยเฉพาะเท่าไร

ผู้ฝึกหัด ขั้นกลาง ผู้ชำนาญ

คุณจะให้คะแนนประสบการณ์การใช้งานเครื่องมือและ API สำหรับนักพัฒนาซอฟต์แวร์ของ GCP เท่าใด

ผู้เริ่มต้น ระดับกลาง ผู้ชำนาญ

ตอนนี้คุณทราบแล้วว่า Codelab นี้เกี่ยวกับอะไร คุณจะทำอะไรต่อไป

  1. ใช้ตัวอย่าง Apps Script-BigQuery ที่มีอยู่และทำให้ใช้งานได้
  2. จากตัวอย่างดังกล่าว ให้ดูวิธีส่งคำค้นหาไปยัง BigQuery และรับผลลัพธ์
  3. สร้าง Google ชีตและป้อนผลลัพธ์จาก BigQuery ลงในชีต
  4. แก้ไขโค้ดเล็กน้อยเพื่อเปลี่ยนข้อมูลที่ส่งคืนและเพิ่มลงในชีต
  5. ใช้บริการชีตใน Apps Script เพื่อสร้างแผนภูมิสำหรับข้อมูลจาก BigQuery
  6. ใช้บริการสไลด์เพื่อสร้างงานนำเสนอใหม่
  7. เพิ่มชื่อและชื่อรองลงในสไลด์ชื่อเริ่มต้นที่สร้างขึ้นโดยอัตโนมัติสำหรับสไลด์ใหม่ทั้งหมด
  8. สร้างสไลด์ใหม่ที่มีตารางข้อมูล แล้วนำเข้าเซลล์ข้อมูลของชีตลงในสไลด์
  9. เพิ่มสไลด์ใหม่และเพิ่มแผนภูมิสเปรดชีตลงในสไลด์

มาเริ่มกันด้วยข้อมูลพื้นฐานเกี่ยวกับ Apps Script, BigQuery, ชีต และสไลด์

Google Apps Script และ BigQuery

Google Apps Script เป็นแพลตฟอร์มการพัฒนา G Suite ที่ทำงานในระดับที่สูงกว่าการใช้ Google REST API ซึ่งเป็นสภาพแวดล้อมการพัฒนาแบบไร้เซิร์ฟเวอร์และการโฮสต์แอปพลิเคชันที่เข้าถึงได้สำหรับนักพัฒนาแอปที่มีทักษะหลากหลายระดับ กล่าวโดยสรุปคือ "Apps Script เป็นรันไทม์ JavaScript แบบไร้เซิร์ฟเวอร์สำหรับการทำงานอัตโนมัติ การขยาย และการผสานรวม G Suite"

เป็น JavaScript ฝั่งเซิร์ฟเวอร์ที่คล้ายกับ Node.js แต่เน้นการผสานรวมอย่างใกล้ชิดกับ G Suite และบริการอื่นๆ ของ Google มากกว่าการโฮสต์แอปพลิเคชันแบบอิงเหตุการณ์แบบอะซิงโครนัสที่รวดเร็ว นอกจากนี้ยังมีสภาพแวดล้อมในการพัฒนาที่อาจแตกต่างจากสิ่งที่คุณคุ้นเคยโดยสิ้นเชิง คุณจะทำสิ่งต่อไปนี้ได้ด้วย Apps Script

  • พัฒนาในตัวแก้ไขโค้ดที่ใช้เบราว์เซอร์ แต่สามารถเลือกพัฒนาในเครื่องได้หากใช้ clasp ซึ่งเป็นเครื่องมือการติดตั้งใช้งานบรรทัดคำสั่งสำหรับ Apps Script
  • โค้ดใน JavaScript เวอร์ชันเฉพาะที่ปรับแต่งเพื่อเข้าถึง G Suite และบริการอื่นๆ ของ Google หรือบริการภายนอก (ผ่านบริการ URLfetch หรือ Jdbc ของ Apps Script)
  • ไม่ต้องเขียนโค้ดการให้สิทธิ์เนื่องจาก Apps Script จะจัดการให้คุณ
  • ไม่ต้องโฮสต์แอป เนื่องจากแอปจะทำงานบนเซิร์ฟเวอร์ของ Google ในระบบคลาวด์

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

Apps Script ทำงานร่วมกับเทคโนโลยีอื่นๆ ของ Google ได้ 2 วิธีดังนี้

  • บริการในตัว/เนทีฟ
  • บริการขั้นสูง

บริการในตัวมีเมธอดระดับสูงที่คุณใช้เพื่อเข้าถึงข้อมูล G Suite หรือผลิตภัณฑ์ของ Google หรือเมธอดยูทิลิตีอื่นๆ ที่มีประโยชน์ได้ บริการขั้นสูงเป็นเพียง Wrapper แบบบางรอบ G Suite หรือ Google REST API บริการขั้นสูงครอบคลุม REST API ทั้งหมด และมักจะทำได้มากกว่าบริการในตัว แต่ต้องใช้โค้ดที่ซับซ้อนกว่า (แต่ยังคงใช้งานง่ายกว่า REST API เอง) นอกจากนี้ คุณยังต้องเปิดใช้บริการขั้นสูงสำหรับโปรเจ็กต์สคริปต์ก่อนจึงจะใช้งานได้

เมื่อเป็นไปได้ นักพัฒนาแอปควรเลือกใช้บริการในตัวเนื่องจากใช้งานง่ายกว่าและทำงานหนักกว่าบริการขั้นสูง อย่างไรก็ตาม Google API บางรายการไม่มีบริการในตัว ดังนั้นบริการขั้นสูงอาจเป็นตัวเลือกเดียว Google BigQuery เป็นตัวอย่างหนึ่งของกรณีนี้... ไม่มีบริการในตัว แต่มีบริการขั้นสูงของ BigQuery อยู่ (ดีกว่าไม่มีสัญญาณใช่ไหม) หากคุณเพิ่งเริ่มใช้ BigQuery ซึ่งเป็นบริการของ GCP ที่ช่วยให้คุณทำการค้นหาอย่างง่าย (หรือซับซ้อน) ในคลังข้อมูลขนาดใหญ่มากได้ เช่น ในระดับหลายเทราไบต์ แต่ยังคงให้ผลลัพธ์ได้ในไม่กี่วินาที

การเข้าถึง Google ชีตและสไลด์จาก Apps Script

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

บทนำ

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

  • เริ่มโปรเจ็กต์ Google Apps Script ใหม่
  • เปิดใช้สิทธิ์เข้าถึงบริการขั้นสูงของ BigQuery
  • ไปที่ตัวแก้ไขการพัฒนาและป้อนซอร์สโค้ดของแอปพลิเคชัน
  • ทำตามกระบวนการให้สิทธิ์แอป (OAuth2)
  • เรียกใช้แอปพลิเคชันที่ส่งคำขอไปยัง BigQuery
  • ดูสเปรดชีต Google ใหม่ที่สร้างขึ้นด้วยผลลัพธ์จาก BigQuery

ตั้งค่า

  1. ก) สร้างโปรเจ็กต์ Apps Script ใหม่โดยไปที่ script.google.com กลุ่มผลิตภัณฑ์ G Suite มีหลายกลุ่ม และวิธีสร้างโปรเจ็กต์ใหม่อาจแตกต่างกันไปตามเวอร์ชันที่คุณใช้ หากคุณใช้เพียงบัญชี Gmail และเพิ่งเริ่มพัฒนาโปรเจ็กต์ คุณจะเห็นหน้าจอว่างพร้อมปุ่มเพื่อสร้างโปรเจ็กต์แรก


ข) หรือคุณอาจเห็นโปรเจ็กต์ทั้งหมดและปุ่ม +ใหม่ ขนาดใหญ่ที่ด้านซ้ายบน ให้คลิกปุ่มดังกล่าว



ค) หากไม่เห็นทั้ง 2 อย่างข้างต้น หน้าจอของคุณอาจมีลักษณะดังด้านล่าง หากมี ให้มองหาไอคอนเมนูแฮมเบอร์เกอร์ที่มุมซ้ายบน แล้วเลือก +สคริปต์ใหม่



ง) สำหรับผู้ที่ต้องการใช้บรรทัดคำสั่ง เครื่องมือของคุณคือ clasp โดยคุณจะเรียกใช้คำสั่ง clasp create

จ) วิธีสุดท้ายในการสร้างโปรเจ็กต์สคริปต์ใหม่คือไปที่ลิงก์ทางลัด https://script.google.com/create

  1. ไม่ว่าคุณจะใช้เทคนิคใดในการเริ่มต้นโปรเจ็กต์ใหม่ สิ่งสำคัญคือคุณควรเข้าสู่ตัวแก้ไขโค้ดของ Apps Script ซึ่งเป็นหน้าจอที่มีลักษณะดังนี้


  2. คลิกไฟล์ > บันทึก แล้วตั้งชื่อโปรเจ็กต์
  3. จากนั้นคุณจะต้องสร้างโปรเจ็กต์ Google Cloud Console เพื่อเรียกใช้คำค้นหา BigQuery
  1. สร้างโปรเจ็กต์ใหม่ ตั้งชื่อ เลือกบัญชีสำหรับการเรียกเก็บเงิน แล้วคลิกสร้าง
  1. เมื่อสร้างโปรเจ็กต์เสร็จแล้ว การแจ้งเตือนจะปรากฏที่ด้านขวาบนของหน้า คลิกรายการสร้างโปรเจ็กต์: <ชื่อโปรเจ็กต์> เพื่อเปิดโปรเจ็กต์
  2. คลิกไอคอนเมนู ที่ด้านซ้ายบน แล้วไปที่ API และบริการ > ข้อมูลเข้าสู่ระบบ คลิกแท็บหน้าจอขอความยินยอม OAuth (ลิงก์โดยตรง)
  3. ในช่องชื่อแอปพลิเคชัน ให้ป้อน "Big Data Codelab" แล้วคลิกปุ่มบันทึกที่ด้านล่าง
  4. คลิกไอคอน 3 จุดที่ด้านขวาบนเพื่อขยายเมนู แล้วเลือกการตั้งค่าโปรเจ็กต์ (ลิงก์โดยตรง)
  5. คัดลอกค่าที่แสดงในส่วนหมายเลขโปรเจ็กต์ (มีฟิลด์ Product ID แยกต่างหากซึ่งเราจะใช้ในภายหลังใน Codelab)
  6. กลับไปที่โปรแกรมแก้ไข App Script แล้วคลิกทรัพยากร > โปรเจ็กต์ Cloud Platform
  7. ป้อนหมายเลขโปรเจ็กต์ลงในกล่องข้อความ แล้วคลิกตั้งค่าโปรเจ็กต์ เมื่อได้รับข้อความแจ้ง ให้คลิกยืนยัน
  8. เมื่อเสร็จแล้ว ให้คลิกปุ่มปิดเพื่อปิดกล่องโต้ตอบ
  9. เมื่อตั้งค่าโปรเจ็กต์ใหม่แล้ว คุณต้องเปิดใช้บริการขั้นสูงของ BigQuery โดยดึงทรัพยากร -> บริการขั้นสูงของ Google ลงมา แล้วเปิดใช้ BigQuery API


  10. หมายเหตุที่ด้านล่างระบุว่า "ต้องเปิดใช้บริการเหล่านี้ใน "แดชบอร์ด Google Cloud Platform API" ด้วย ดังนั้นให้คลิกลิงก์ดังกล่าวซึ่งจะเปิดแท็บเบราว์เซอร์อื่นไปยังคอนโซลนักพัฒนาแอปหรือ "devconsole" โดยย่อ
  11. ใน DevConsole ให้คลิกปุ่ม +เปิดใช้ API และบริการที่ด้านบน ค้นหา "bigquery" เลือก BigQuery API (ไม่ใช่ Data Transfer API ของ BigQuery) แล้วคลิกเปิดใช้เพื่อเปิด เปิดแท็บเบราว์เซอร์นี้ไว้

    หมายเหตุ: หลังจากเปิดใช้ API แล้ว คุณอาจเห็นหมายเหตุในหน้านี้ที่ระบุว่า "หากต้องการใช้ API นี้ คุณต้องสร้างข้อมูลเข้าสู่ระบบ..." แต่ไม่ต้องกังวลเกี่ยวกับเรื่องนี้ในตอนนี้ เนื่องจาก Apps Script จะจัดการขั้นตอนนี้ให้คุณ


  12. กลับไปที่แท็บเบราว์เซอร์ของเครื่องมือแก้ไขโค้ด คุณจะยังอยู่ในเมนูบริการขั้นสูงของ Google ให้คลิกตกลงเพื่อปิดกล่องโต้ตอบ แล้วคุณจะอยู่ในเครื่องมือแก้ไขโค้ด คลิกชื่อโปรเจ็กต์ที่ด้านบน แล้วตั้งชื่อตามที่ต้องการ เช่น "การสาธิต BigQuery" หรือชื่อที่คล้ายกัน เราตั้งชื่อโปรเจ็กต์ว่า "final mile"

ตอนนี้คุณพร้อมที่จะป้อนรหัสแอปพลิเคชัน ดำเนินการตามกระบวนการให้สิทธิ์ และทำให้แอปพลิเคชันเวอร์ชันแรกนี้ทำงานได้แล้ว

อัปโหลดแอปพลิเคชันและเรียกใช้

  1. คัดลอกโค้ดในช่องด้านล่าง แล้ววางทับทุกอย่างในตัวแก้ไขโค้ดด้วยโค้ดดังกล่าว
// Filename for data results
var QUERY_NAME = "Most common words in all of Shakespeare's works";
// Replace this value with your Google Cloud API project ID
var PROJECT_ID = '';
if (!PROJECT_ID) throw Error('Project ID is required in setup');

/**
 * Runs a BigQuery query; puts results into Sheet. You must enable
 * the BigQuery advanced service before you can run this code.
 * @see http://developers.google.com/apps-script/advanced/bigquery#run_query
 * @see http://github.com/googleworkspace/apps-script-samples/blob/main/advanced/bigquery.gs
 *
 * @returns {Spreadsheet} Returns a spreadsheet with BigQuery results
 * @see http://developers.google.com/apps-script/reference/spreadsheet/spreadsheet
 */
function runQuery() {
  // Replace sample with your own BigQuery query.
  var request = {
    query:
        'SELECT ' +
            'LOWER(word) AS word, ' +
            'SUM(word_count) AS count ' +
        'FROM [bigquery-public-data:samples.shakespeare] ' +
        'GROUP BY word ' +
        'ORDER BY count ' +
        'DESC LIMIT 10'
  };
  var queryResults = BigQuery.Jobs.query(request, PROJECT_ID);
  var jobId = queryResults.jobReference.jobId;

  // Wait for BQ job completion (with exponential backoff).
  var sleepTimeMs = 500;
  while (!queryResults.jobComplete) {
    Utilities.sleep(sleepTimeMs);
    sleepTimeMs *= 2;
    queryResults = BigQuery.Jobs.getQueryResults(PROJECT_ID, jobId);
  }

  // Get all results from BigQuery.
  var rows = queryResults.rows;
  while (queryResults.pageToken) {
    queryResults = BigQuery.Jobs.getQueryResults(PROJECT_ID, jobId, {
      pageToken: queryResults.pageToken
    });
    rows = rows.concat(queryResults.rows);
  }

  // Return null if no data returned.
  if (!rows) {
    return Logger.log('No rows returned.');
  }

  // Create the new results spreadsheet.
  var spreadsheet = SpreadsheetApp.create(QUERY_NAME);
  var sheet = spreadsheet.getActiveSheet();

  // Add headers to Sheet.
  var headers = queryResults.schema.fields.map(function(field) {
    return field.name.toUpperCase();
  });
  sheet.appendRow(headers);

  // Append the results.
  var data = new Array(rows.length);
  for (var i = 0; i < rows.length; i++) {
    var cols = rows[i].f;
    data[i] = new Array(cols.length);
    for (var j = 0; j < cols.length; j++) {
      data[i][j] = cols[j].v;
    }
  }

  // Start storing data in row 2, col 1
  var START_ROW = 2;      // skip header row
  var START_COL = 1;
  sheet.getRange(START_ROW, START_COL, rows.length, headers.length).setValues(data);

  Logger.log('Results spreadsheet created: %s', spreadsheet.getUrl());
}


ตอนนี้ให้บันทึกไฟล์ที่เพิ่งสร้าง แต่เปลี่ยนชื่อจาก Code.gs เป็น bq-sheets-slides.js แล้วโค้ดนี้ทำอะไรได้บ้าง เราได้บอกคุณไปแล้วว่าฟังก์ชันนี้จะค้นหา BigQuery และเขียนผลลัพธ์ลงใน Google ชีตใหม่ แต่การค้นหานี้คืออะไร คุณจะเห็นปุ่มนี้ที่ด้านบนของ runQuery():

SELECT
    LOWER(word) AS word,
    SUM(word_count) AS count
FROM [bigquery-public-data:samples.shakespeare]
GROUP BY word
ORDER BY count
DESC LIMIT 10


การค้นหานี้จะดูผลงานของเชกสเปียร์ ซึ่งเป็นส่วนหนึ่งของชุดข้อมูลสาธารณะของ BigQuery และสร้างคำ 10 อันดับแรกที่ปรากฏบ่อยที่สุดในผลงานทั้งหมดของเขา โดยจัดเรียงตามลำดับความนิยมจากมากไปน้อย ลองนึกดูว่าการทำเช่นนี้ด้วยตนเองจะสนุก (หรือไม่สนุก) แค่ไหน แล้วคุณจะเริ่มเห็นภาพว่า BigQuery มีประโยชน์เพียงใด

  1. เราเกือบพร้อมแล้วที่จะให้คุณลองใช้ฟีเจอร์นี้ ดังที่คุณเห็นที่ด้านบนของข้อมูลโค้ดนี้ คุณต้องมีรหัสโปรเจ็กต์ที่ถูกต้อง ดังนั้นเราจึงต้องเพิ่มรหัสของคุณลงในโค้ดแอปพลิเคชัน หากต้องการรับข้อมูลนี้ ให้กลับไปที่หน้าต่างหรือแท็บเบราว์เซอร์ที่มีหน้าคอนโซลนักพัฒนาแอป (เราบอกให้คุณเปิดไว้ จำได้ไหม)
  2. ที่ด้านบนซ้ายของรูปโปรไฟล์บัญชี Google จะมีตัวเลือกเมนูแบบเลื่อนลง () คลิกตัวเลือกนี้ แล้วเลือกการตั้งค่าโปรเจ็กต์ คุณจะเห็นชื่อ รหัส และหมายเลขโปรเจ็กต์ คัดลอกรหัสโปรเจ็กต์และตั้งค่าตัวแปร PROJECT_ID ที่ด้านบนของ bq-sheets-slides.js เป็นค่าที่คุณได้รับจากคอนโซลนักพัฒนาแอป หมายเหตุ: หากตัวเลือกเมนูค้างและใช้งานไม่ได้ ให้โหลดหน้าเว็บซ้ำ
  3. คำสั่ง if มีไว้เพื่อป้องกันไม่ให้แอปพลิเคชันดำเนินการต่อโดยไม่มีรหัสโปรเจ็กต์ เมื่อเพิ่มแล้ว ให้บันทึกไฟล์และเรียกใช้โค้ดโดยไปที่แถบเมนูแล้วเลือกเรียกใช้ > เรียกใช้ฟังก์ชัน > runQuery คลิกกล่องโต้ตอบตรวจสอบสิทธิ์ แอปนี้ไม่ได้รับการยืนยัน และด้านล่างคือ GIF แบบเคลื่อนไหว (สำหรับแอปอื่น) ที่แสดงขั้นตอนถัดไป
  4. เมื่อขอตรวจสอบสิทธิ์แล้ว คุณจะเห็นกล่องโต้ตอบใหม่ดังที่แสดงด้านบน เลือกบัญชี Google ที่ถูกต้องซึ่งจะเรียกใช้สคริปต์ เลือกขั้นสูง เลื่อนลง แล้วคลิก "ไปที่ <ชื่อโปรเจ็กต์ของคุณ> (ไม่ปลอดภัย)" เพื่อไปยังหน้าจอการให้สิทธิ์แอปพลิเคชัน OAuth2 (อ่านเพิ่มเติมเกี่ยวกับกระบวนการยืนยันเพื่อดูว่าเหตุใดหน้าจอนี้จึงอยู่ระหว่างคุณกับกล่องโต้ตอบการให้สิทธิ์ OAuth2 ด้านล่าง)


    หมายเหตุ: เมื่อให้สิทธิ์แอปแล้ว คุณไม่จำเป็นต้องทำกระบวนการนี้ซ้ำทุกครั้งที่เรียกใช้ คุณจะเห็นหน้าจอกล่องโต้ตอบนี้อีกครั้งในงานที่ 3 ของบทแนะนำนี้ ซึ่งจะขอสิทธิ์จากผู้ใช้ในการสร้างและจัดการงานนำเสนอ Google สไลด์
  5. เมื่อคลิกอนุญาตในกล่องโต้ตอบ OAuth2 สคริปต์จะเริ่มทำงาน และคุณจะเห็นกล่องโต้ตอบสีเหลืองพาสเทลที่ด้านบน โดยจะทำงานค่อนข้างเร็ว คุณจึงอาจไม่สังเกตว่าสคริปต์กำลังทำงานอยู่หรือทำงานเสร็จแล้ว

  6. กล่องโต้ตอบจะหายไปเมื่อดำเนินการเสร็จแล้ว ดังนั้นหากไม่เห็นกล่องโต้ตอบดังกล่าว แสดงว่าระบบอาจดำเนินการเสร็จแล้ว ให้ไปที่ Google ไดรฟ์ (drive.google.com) แล้วมองหา Google ชีตใหม่ชื่อ "คำที่พบบ่อยที่สุดในผลงานทั้งหมดของเชกสเปียร์" หรือชื่อที่คุณกำหนดให้กับตัวแปร QUERY_NAME:


  7. เปิดสเปรดชีต แล้วคุณจะเห็นคำ 10 แถวและจำนวนรวมของคำเหล่านั้นที่จัดเรียงตามลำดับจากมากไปน้อย

สรุปงานที่ 1

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

โค้ดสำหรับ bq-sheets-slides.js (ชื่อไฟล์ที่เราเลือก) ที่คุณวางไว้ด้านบน (นอกเหนือจาก PROJECT_ID ซึ่งควรมีรหัสโปรเจ็กต์จริง) ยังอยู่ในโฟลเดอร์ step1 ในที่เก็บ GitHub ของ Codelab นี้ที่ github.com/googlecodelabs/bigquery-sheets-slides โค้ดนี้ได้แรงบันดาลใจจากตัวอย่างเดิมในหน้าบริการขั้นสูงของ BigQuery ซึ่งเรียกใช้การค้นหาที่แตกต่างกันเล็กน้อย... คำที่เชกสเปียร์ใช้มากที่สุดซึ่งมีความยาว 10 อักขระขึ้นไปคือคำใด คุณยังดูตัวอย่างดังกล่าวได้ในที่เก็บ GitHub

หากสนใจคำค้นหาอื่นๆ ที่คุณลองใช้กับผลงานของเชกสเปียร์หรือตารางข้อมูลสาธารณะอื่นๆ ได้ โปรดดูหน้าเว็บนี้และหน้านี้ ไม่ว่าคุณจะใช้การค้นหาใด คุณก็ทดสอบการค้นหาในคอนโซล BigQuery ก่อนเรียกใช้ใน Apps Script ได้เสมอ อินเทอร์เฟซผู้ใช้ของ BigQuery พร้อมให้บริการแก่นักพัฒนาซอฟต์แวร์ที่ bigquery.cloud.google.com ตัวอย่างเช่น นี่คือลักษณะการค้นหาของเราเมื่อใช้ UI ของ BigQuery

แม้ว่าขั้นตอนข้างต้นจะใช้ประโยชน์จากเครื่องมือแก้ไขโค้ดของ Apps Script แต่คุณก็เลือกที่จะพัฒนาในเครื่องผ่านบรรทัดคำสั่งได้เช่นกัน หากต้องการ คุณสามารถสร้างสคริปต์ชื่อ bq-sheets-slides.js วางโค้ดด้านบนลงในสคริปต์นั้น แล้วอัปโหลดไปยัง Google ด้วยคำสั่ง clasp push (หากคุณพลาดลิงก์ไปก่อนหน้านี้ เราได้ใส่ลิงก์ไปยัง clasp และวิธีใช้งานไว้ที่นี่อีกครั้ง)

runQuery() มีไว้เพื่อสื่อสารกับ BigQuery และส่งผลลัพธ์ไปยังชีต ตอนนี้เราต้องสร้างแผนภูมิด้วยข้อมูล มาสร้างฟังก์ชันใหม่ชื่อ createColumnChart() ที่เรียกใช้เมธอด newChart() ของชีตเพื่อดำเนินการนี้กัน

  1. สร้างแผนภูมิ เพิ่มเนื้อหาของ createColumnChart() ที่แสดงด้านล่างไปยัง bq-sheets-slides.js ทันทีหลังจาก runQuery() โดยจะรับชีตที่มีข้อมูลและขอแผนภูมิคอลัมน์ที่มีข้อมูลทั้งหมด ช่วงข้อมูลเริ่มต้นที่เซลล์ A2 เนื่องจากแถวแรกมีส่วนหัวของคอลัมน์ ไม่ใช่ข้อมูล
/**
 * Uses spreadsheet data to create columnar chart.
 * @param {Spreadsheet} Spreadsheet containing results data
 * @returns {EmbeddedChart} visualizing the results
 * @see http://developers.google.com/apps-script/reference/spreadsheet/embedded-chart
 */
function createColumnChart(spreadsheet) {
  // Retrieve the populated (first and only) Sheet.
  var sheet = spreadsheet.getSheets()[0];
  // Data range in Sheet is from cell A2 to B11
  var START_CELL = 'A2';  // skip header row
  var END_CELL = 'B11';
  // Place chart on Sheet starting on cell E5.
  var START_ROW = 5;      // row 5
  var START_COL = 5;      // col E
  var OFFSET = 0;

  // Create & place chart on the Sheet using above params.
  var chart = sheet.newChart()
     .setChartType(Charts.ChartType.COLUMN)
     .addRange(sheet.getRange(START_CELL + ':' + END_CELL))
     .setPosition(START_ROW, START_COL, OFFSET, OFFSET)
     .build();
  sheet.insertChart(chart);
}
  1. ส่งคืนสเปรดชีต ในส่วนด้านบน createColumnChart() ต้องการออบเจ็กต์สเปรดชีต ดังนั้นเราจึงต้องอัปเดต runQuery() เพื่อส่งคืนออบเจ็กต์ spreadsheet เพื่อให้เราส่งไปยัง createColumnChart() ได้ หลังจากบันทึกการสร้าง Google ชีตสำเร็จแล้ว ให้ส่งคืนออบเจ็กต์ spreadsheet ที่ส่วนท้ายของ runQuery() ทันทีหลังจากบรรทัดบันทึก
  Logger.log('Results spreadsheet created: %s', spreadsheet.getUrl());

  // NEW: Return the spreadsheet object for later use.
  return spreadsheet;
}
  1. ฟังก์ชันcreateBigQueryPresentation()การขับขี่ การแยกฟังก์ชันการทำงานของ BigQuery และการสร้างแผนภูมิออกเป็นส่วนๆ อย่างมีตรรกะเป็นความคิดที่ดี ตอนนี้เรามาสร้างฟังก์ชัน createBigQueryPresentation() เพื่อขับเคลื่อนแอปโดยเรียกใช้ทั้ง runQuery() และ createColumnChart() กัน โค้ดที่คุณเพิ่มควรมีลักษณะดังนี้
/**
 * Runs a BigQuery query, adds data and a chart in a Sheet.
 */
function createBigQueryPresentation() {
  var spreadsheet = runQuery();
  createColumnChart(spreadsheet);
}
  1. ทำให้โค้ดนำกลับมาใช้ใหม่ได้มากขึ้น คุณได้ทำตาม 2 ขั้นตอนสำคัญข้างต้นแล้ว ได้แก่ การส่งคืนออบเจ็กต์สเปรดชีตและการสร้างฟังก์ชันขับเคลื่อน จะเกิดอะไรขึ้นหากเพื่อนร่วมงานต้องการใช้ runQuery() ซ้ำและไม่ต้องการให้ระบบบันทึก URL เราจึงต้องย้ายบรรทัดบันทึกนั้นเพื่อให้ runQuery() เข้าใจได้ง่ายขึ้นสำหรับการใช้งานทั่วไป สถานที่ที่ดีที่สุดในการย้ายคือที่ใด หากคุณเดาว่า createBigQueryPresentation() คุณก็ตอบถูกแล้ว หลังจากย้ายบรรทัดบันทึกแล้ว บรรทัดบันทึกควรมีลักษณะดังนี้
/**
 * Runs a BigQuery query, adds data and a chart in a Sheet.
 */
function createBigQueryPresentation() {
  var spreadsheet = runQuery();
  Logger.log('Results spreadsheet created: %s', spreadsheet.getUrl()); // MOVED HERE
  createColumnChart(spreadsheet);
}

เมื่อใช้การเปลี่ยนแปลงเหล่านี้ข้างต้น (ยกเว้น PROJECT_ID อีกครั้ง) bq-sheets-slides.js ของคุณควรมีลักษณะดังต่อไปนี้ (และยังอยู่ในโฟลเดอร์ step2 ของที่เก็บ GitHub ด้วย)

// Filename for data results
var QUERY_NAME = "Most common words in all of Shakespeare's works";
// Replace this value with your Google Cloud API project ID
var PROJECT_ID = '';
if (!PROJECT_ID) throw Error('Project ID is required in setup');

/**
 * Runs a BigQuery query; puts results into Sheet. You must enable
 * the BigQuery advanced service before you can run this code.
 * @see http://developers.google.com/apps-script/advanced/bigquery#run_query
 * @see http://github.com/googleworkspace/apps-script-samples/blob/main/advanced/bigquery.gs
 *
 * @returns {Sheet} Returns a sheet with results
 * @see http://developers.google.com/apps-script/reference/spreadsheet/sheet
 */
function runQuery() {
  // Replace sample with your own BigQuery query.
  var request = {
    query:
        'SELECT ' +
            'LOWER(word) AS word, ' +
            'SUM(word_count) AS count ' +
        'FROM [bigquery-public-data:samples.shakespeare] ' +
        'GROUP BY word ' +
        'ORDER BY count ' +
        'DESC LIMIT 10'
  };
  var queryResults = BigQuery.Jobs.query(request, PROJECT_ID);
  var jobId = queryResults.jobReference.jobId;

  // Wait for BQ job completion (with exponential backoff).
  var sleepTimeMs = 500;
  while (!queryResults.jobComplete) {
    Utilities.sleep(sleepTimeMs);
    sleepTimeMs *= 2;
    queryResults = BigQuery.Jobs.getQueryResults(PROJECT_ID, jobId);
  }

  // Get all results from BigQuery.
  var rows = queryResults.rows;
  while (queryResults.pageToken) {
    queryResults = BigQuery.Jobs.getQueryResults(PROJECT_ID, jobId, {
      pageToken: queryResults.pageToken
    });
    rows = rows.concat(queryResults.rows);
  }

  // Return null if no data returned.
  if (!rows) {
    return Logger.log('No rows returned.');
  }

  // Create the new results spreadsheet.
  var spreadsheet = SpreadsheetApp.create(QUERY_NAME);
  var sheet = spreadsheet.getActiveSheet();

  // Add headers to Sheet.
  var headers = queryResults.schema.fields.map(function(field) {
    return field.name.toUpperCase();
  });
  sheet.appendRow(headers);

  // Append the results.
  var data = new Array(rows.length);
  for (var i = 0; i < rows.length; i++) {
    var cols = rows[i].f;
    data[i] = new Array(cols.length);
    for (var j = 0; j < cols.length; j++) {
      data[i][j] = cols[j].v;
    }
  }

  // Start storing data in row 2, col 1
  var START_ROW = 2;      // skip header row
  var START_COL = 1;
  sheet.getRange(START_ROW, START_COL, rows.length, headers.length).setValues(data);

  // Return the spreadsheet object for later use.
  return spreadsheet;
}

/**
 * Uses spreadsheet data to create columnar chart.
 * @param {Spreadsheet} Spreadsheet containing results data
 * @returns {EmbeddedChart} visualizing the results
 * @see http://developers.google.com/apps-script/reference/spreadsheet/embedded-chart
 */
function createColumnChart(spreadsheet) {
  // Retrieve the populated (first and only) Sheet.
  var sheet = spreadsheet.getSheets()[0];
  // Data range in Sheet is from cell A2 to B11
  var START_CELL = 'A2';  // skip header row
  var END_CELL = 'B11';
  // Place chart on Sheet starting on cell E5.
  var START_ROW = 5;      // row 5
  var START_COL = 5;      // col E
  var OFFSET = 0;

  // Create & place chart on the Sheet using above params.
  var chart = sheet.newChart()
     .setChartType(Charts.ChartType.COLUMN)
     .addRange(sheet.getRange(START_CELL + ':' + END_CELL))
     .setPosition(START_ROW, START_COL, OFFSET, OFFSET)
     .build();
  sheet.insertChart(chart);
}

/**
 * Runs a BigQuery query, adds data and a chart in a Sheet.
 */
function createBigQueryPresentation() {
  var spreadsheet = runQuery();
  Logger.log('Results spreadsheet created: %s', spreadsheet.getUrl());
  createColumnChart(spreadsheet);
}

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

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

  1. สร้างชุดสไลด์ การทำงานทั้งหมดในสไลด์จะเกิดขึ้นใน createSlidePresentation() ซึ่งเราจะเพิ่มลงใน bq-sheets-slides.js ทันทีหลังจาก createColumnChart() มาเริ่มด้วยการสร้างชุดสไลด์ใหม่ จากนั้นเพิ่มชื่อและคำบรรยายแทนชื่อลงในสไลด์ชื่อเริ่มต้นที่เราได้รับเมื่อสร้างงานนำเสนอใหม่
/**
 * Create presentation with spreadsheet data & chart
 * @param {Spreadsheet} Spreadsheet with results data
 * @param {EmbeddedChart} Sheets chart to embed on slide
 * @returns {Presentation} Slide deck with results
 */
function createSlidePresentation(spreadsheet, chart) {
  // Create the new presentation.
  var deck = SlidesApp.create(QUERY_NAME);

  // Populate the title slide.
  var [title, subtitle] = deck.getSlides()[0].getPageElements();
  title.asShape().getText().setText(QUERY_NAME);
  subtitle.asShape().getText().setText('via GCP and G Suite APIs:\n' +
    'Google Apps Script, BigQuery, Sheets, Slides');
  1. เพิ่มตารางข้อมูล ขั้นตอนถัดไปใน createSlidePresentation() คือการนำเข้าข้อมูลเซลล์จาก Google ชีตไปยังสไลด์เด็คใหม่ ข้อมูลโค้ดนี้ ดังนั้นให้เพิ่มลงในฟังก์ชัน
  // Data range to copy is from cell A1 to B11
  var START_CELL = 'A1';  // include header row
  var END_CELL = 'B11';
  // Add the table slide and insert an empty table on it of
  // the dimensions of the data range; fails if Sheet empty.
  var tableSlide = deck.appendSlide(SlidesApp.PredefinedLayout.BLANK);
  var sheetValues = spreadsheet.getSheets()[0].getRange(
      START_CELL + ':' + END_CELL).getValues();
  var table = tableSlide.insertTable(sheetValues.length, sheetValues[0].length);

  // Populate the table with spreadsheet data.
  for (var i = 0; i < sheetValues.length; i++) {
    for (var j = 0; j < sheetValues[0].length; j++) {
      table.getCell(i, j).getText().setText(String(sheetValues[i][j]));
    }
  }
  1. นำเข้าแผนภูมิ ขั้นตอนสุดท้ายใน createSlidePresentation() คือการสร้างสไลด์อีก 1 สไลด์ นำเข้าแผนภูมิจากสเปรดชีตของเรา และส่งคืนออบเจ็กต์ Presentation เพิ่มข้อมูลโค้ดสุดท้ายนี้ลงในฟังก์ชัน
  // Add a chart slide and insert the chart on it.
  var chartSlide = deck.appendSlide(SlidesApp.PredefinedLayout.BLANK);
  chartSlide.insertSheetsChart(chart);

  // Return the presentation object for later use.
  return deck;
}
  1. แผนภูมิผลตอบแทน ตอนนี้ฟังก์ชันสุดท้ายของเราเสร็จสมบูรณ์แล้ว ลองดูที่ลายเซ็นของฟังก์ชันอีกครั้ง ได้ createSlidePresentation() ต้องมีทั้งสเปรดชีตและออบเจ็กต์แผนภูมิ เราได้ปรับ runQuery() เพื่อแสดงผลออบเจ็กต์ Spreadsheet แล้ว แต่ตอนนี้เราต้องทำการเปลี่ยนแปลงที่คล้ายกันกับ createColumnChart() เพื่อแสดงผลออบเจ็กต์แผนภูมิ (EmbeddedChart) กลับไปที่แอปพลิเคชันเพื่อเขียนโค้ดเพื่อเพิ่มบรรทัดสุดท้ายที่ส่วนท้ายของ createColumnChart() โดยทำดังนี้
  // NEW: Return chart object for later use
  return chart;
}
  1. อัปเดต createBigQueryPresentation() เนื่องจาก createColumnChart() แสดงแผนภูมิ เราจึงต้องบันทึกแผนภูมินั้นลงในตัวแปร จากนั้นส่งทั้งสเปรดชีตและแผนภูมิไปยัง createSlidePresentation() เนื่องจากเราบันทึก URL ของสเปรดชีตที่สร้างขึ้นใหม่แล้ว เราจึงควรบันทึก URL ของงานนำเสนอสไลด์ใหม่ด้วย อัปเดต createBigQueryPresentation() ให้มีลักษณะดังนี้
/**
 * Runs a BigQuery query, adds data and a chart in a Sheet,
 * and adds the data and chart to a new slide presentation.
 */
function createBigQueryPresentation() {
  var spreadsheet = runQuery();
  Logger.log('Results spreadsheet created: %s', spreadsheet.getUrl());
  var chart = createColumnChart(spreadsheet); // UPDATED
  var deck = createSlidePresentation(spreadsheet, chart); // NEW
  Logger.log('Results slide deck created: %s', deck.getUrl()); // NEW
}
  1. บันทึกและเรียกใช้ createBigQueryPresentation() อีกครั้ง อย่างไรก็ตาม ก่อนที่จะดำเนินการ คุณต้องทราบว่าตอนนี้แอปของคุณต้องได้รับสิทธิ์อีกชุดจากผู้ใช้เพื่อดูและจัดการงานนำเสนอ Google สไลด์ เมื่อคุณอนุญาตสิทธิ์นี้แล้ว แอปจะทำงานได้ตามปกติ
  2. ตอนนี้คุณควรได้รับงานนำเสนอของสไลด์ใหม่ที่มี 3 สไลด์ (ชื่อ ตารางข้อมูล แผนภูมิข้อมูล) นอกเหนือจากชีตที่สร้างขึ้น ดังที่แสดงด้านล่าง

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

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

เมื่อทำการเปลี่ยนแปลงข้างต้นจากงานสุดท้าย (ยกเว้น PROJECT_ID อีกครั้ง) bq-sheets-slides.js ของคุณควรมีลักษณะดังต่อไปนี้ (และยังอยู่ในโฟลเดอร์ final ในที่เก็บ GitHub ด้วย)

bq-sheets-slides.js

/**
 * Copyright 2018 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at apache.org/licenses/LICENSE-2.0.
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

// Filename for data results
var QUERY_NAME = "Most common words in all of Shakespeare's works";
// Replace this value with your Google Cloud API project ID
var PROJECT_ID = '';
if (!PROJECT_ID) throw Error('Project ID is required in setup');

/**
 * Runs a BigQuery query; puts results into Sheet. You must enable
 * the BigQuery advanced service before you can run this code.
 * @see http://developers.google.com/apps-script/advanced/bigquery#run_query
 * @see http://github.com/googleworkspace/apps-script-samples/blob/main/advanced/bigquery.gs
 *
 * @returns {Spreadsheet} Returns a spreadsheet with BigQuery results
 * @see http://developers.google.com/apps-script/reference/spreadsheet/spreadsheet
 */
function runQuery() {
  // Replace sample with your own BigQuery query.
  var request = {
    query:
        'SELECT ' +
            'LOWER(word) AS word, ' +
            'SUM(word_count) AS count ' +
        'FROM [bigquery-public-data:samples.shakespeare] ' +
        'GROUP BY word ' +
        'ORDER BY count ' +
        'DESC LIMIT 10'
  };
  var queryResults = BigQuery.Jobs.query(request, PROJECT_ID);
  var jobId = queryResults.jobReference.jobId;

  // Wait for BQ job completion (with exponential backoff).
  var sleepTimeMs = 500;
  while (!queryResults.jobComplete) {
    Utilities.sleep(sleepTimeMs);
    sleepTimeMs *= 2;
    queryResults = BigQuery.Jobs.getQueryResults(PROJECT_ID, jobId);
  }

  // Get all results from BigQuery.
  var rows = queryResults.rows;
  while (queryResults.pageToken) {
    queryResults = BigQuery.Jobs.getQueryResults(PROJECT_ID, jobId, {
      pageToken: queryResults.pageToken
    });
    rows = rows.concat(queryResults.rows);
  }

  // Return null if no data returned.
  if (!rows) {
    return Logger.log('No rows returned.');
  }

  // Create the new results spreadsheet.
  var spreadsheet = SpreadsheetApp.create(QUERY_NAME);
  var sheet = spreadsheet.getActiveSheet();

  // Add headers to Sheet.
  var headers = queryResults.schema.fields.map(function(field) {
    return field.name.toUpperCase();
  });
  sheet.appendRow(headers);

  // Append the results.
  var data = new Array(rows.length);
  for (var i = 0; i < rows.length; i++) {
    var cols = rows[i].f;
    data[i] = new Array(cols.length);
    for (var j = 0; j < cols.length; j++) {
      data[i][j] = cols[j].v;
    }
  }

  // Start storing data in row 2, col 1
  var START_ROW = 2;      // skip header row
  var START_COL = 1;
  sheet.getRange(START_ROW, START_COL, rows.length, headers.length).setValues(data);

  // Return the spreadsheet object for later use.
  return spreadsheet;
}

/**
 * Uses spreadsheet data to create columnar chart.
 * @param {Spreadsheet} Spreadsheet containing results data
 * @returns {EmbeddedChart} visualizing the results
 * @see http://developers.google.com/apps-script/reference/spreadsheet/embedded-chart
 */
function createColumnChart(spreadsheet) {
  // Retrieve the populated (first and only) Sheet.
  var sheet = spreadsheet.getSheets()[0];
  // Data range in Sheet is from cell A2 to B11
  var START_CELL = 'A2';  // skip header row
  var END_CELL = 'B11';
  // Place chart on Sheet starting on cell E5.
  var START_ROW = 5;      // row 5
  var START_COL = 5;      // col E
  var OFFSET = 0;

  // Create & place chart on the Sheet using above params.
  var chart = sheet.newChart()
     .setChartType(Charts.ChartType.COLUMN)
     .addRange(sheet.getRange(START_CELL + ':' + END_CELL))
     .setPosition(START_ROW, START_COL, OFFSET, OFFSET)
     .build();
  sheet.insertChart(chart);

  // Return the chart object for later use.
  return chart;
}

/**
 * Create presentation with spreadsheet data & chart
 * @param {Spreadsheet} Spreadsheet with results data
 * @param {EmbeddedChart} Sheets chart to embed on slide
 * @returns {Presentation} Returns a slide deck with results
 * @see http://developers.google.com/apps-script/reference/slides/presentation
 */
function createSlidePresentation(spreadsheet, chart) {
  // Create the new presentation.
  var deck = SlidesApp.create(QUERY_NAME);

  // Populate the title slide.
  var [title, subtitle] = deck.getSlides()[0].getPageElements();
  title.asShape().getText().setText(QUERY_NAME);
  subtitle.asShape().getText().setText('via GCP and G Suite APIs:\n' +
    'Google Apps Script, BigQuery, Sheets, Slides');

  // Data range to copy is from cell A1 to B11
  var START_CELL = 'A1';  // include header row
  var END_CELL = 'B11';
  // Add the table slide and insert an empty table on it of
  // the dimensions of the data range; fails if Sheet empty.
  var tableSlide = deck.appendSlide(SlidesApp.PredefinedLayout.BLANK);
  var sheetValues = spreadsheet.getSheets()[0].getRange(
      START_CELL + ':' + END_CELL).getValues();
  var table = tableSlide.insertTable(sheetValues.length, sheetValues[0].length);

  // Populate the table with spreadsheet data.
  for (var i = 0; i < sheetValues.length; i++) {
    for (var j = 0; j < sheetValues[0].length; j++) {
      table.getCell(i, j).getText().setText(String(sheetValues[i][j]));
    }
  }

  // Add a chart slide and insert the chart on it.
  var chartSlide = deck.appendSlide(SlidesApp.PredefinedLayout.BLANK);
  chartSlide.insertSheetsChart(chart);

  // Return the presentation object for later use.
  return deck;
}

/**
 * Runs a BigQuery query, adds data and a chart in a Sheet,
 * and adds the data and chart to a new slide presentation.
 */
function createBigQueryPresentation() {
  var spreadsheet = runQuery();
  Logger.log('Results spreadsheet created: %s', spreadsheet.getUrl());
  var chart = createColumnChart(spreadsheet);
  var deck = createSlidePresentation(spreadsheet, chart);
  Logger.log('Results slide deck created: %s', deck.getUrl());
}

"ไฟล์ที่ 2" ในโค้ดแล็บนี้ซึ่งก็คือไฟล์ Manifest ของ Apps Script appsscript.json ไม่ได้มีบทบาทใดๆ ในโค้ดแล็บนี้ คุณเข้าถึงได้โดยไปที่แท็บเบราว์เซอร์ของตัวแก้ไขโค้ด แล้วเลือกดู > แสดงไฟล์ Manifest จากเมนูด้านบน เนื้อหาควรมีลักษณะดังนี้

appsscript.json

{
  "timeZone": "America/Los_Angeles",
  "dependencies": {
    "enabledAdvancedServices": [{
      "userSymbol": "BigQuery",
      "serviceId": "bigquery",
      "version": "v2"
    }]
  },
  "exceptionLogging": "STACKDRIVER"
}

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

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

แหล่งข้อมูลสำหรับแอปพลิเคชันนี้

เอกสารประกอบ

Codelab อื่นๆ

ระดับเริ่มต้น

ระดับกลาง

แอปอ้างอิง

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

  • แอปพลิเคชัน หากไม่ต้องการถูกจำกัดด้วยการใช้ JavaScript หรือข้อจำกัดที่ Apps Script กำหนด พอร์ตแอปพลิเคชันนี้ไปยังภาษาโปรแกรมที่คุณชื่นชอบซึ่งใช้ REST API สำหรับ Google BigQuery, ชีต และสไลด์
  • BigQuery ลองใช้คำค้นหาอื่นสำหรับชุดข้อมูลเชกสเปียร์... อาจจะค้นหาคำค้นหาที่น่าสนใจ ดูตัวอย่างการค้นหาอื่นๆ ได้ในแอปตัวอย่าง Apps Script BigQuery ต้นฉบับ
  • BigQuery ทดลองใช้ชุดข้อมูลสาธารณะอื่นๆ ของ BigQuery... คุณอาจพบชุดข้อมูลที่มีความหมายมากขึ้นสำหรับคุณ
  • BigQuery ก่อนหน้านี้ เราได้กล่าวถึงคำค้นหาอื่นๆ ที่คุณลองใช้กับผลงานของเชกสเปียร์หรือตารางข้อมูลสาธารณะอื่นๆ ได้ และเราต้องการแชร์หน้าเว็บนี้อีกครั้ง รวมถึงหน้าเว็บนี้ด้วย
  • ชีต ทดลองใช้แผนภูมิประเภทอื่นๆ
  • ชีตและ BigQuery พลิกแพลงตาราง... บางทีคุณอาจมีชุดข้อมูลขนาดใหญ่ในสเปรดชีตที่ไหนสักแห่ง ในปี 2016 ทีม BigQuery ได้เปิดตัวฟีเจอร์ที่ช่วยให้นักพัฒนาซอฟต์แวร์ใช้ชีตเป็นแหล่งข้อมูลได้ (ดูข้อมูลเพิ่มเติมได้ที่บล็อกโพสต์หนึ่งและสอง)
  • สไลด์ เพิ่มสไลด์อื่นๆ ลงในงานนำเสนอที่สร้างขึ้น เช่น รูปภาพหรือชิ้นงานอื่นๆ ที่เชื่อมโยงกับการวิเคราะห์บิ๊กดาต้า คำแนะนำเกี่ยวกับบริการในตัวของสไลด์จะช่วยให้คุณเริ่มต้นใช้งานได้
  • G Suite ค้นหาวิธีใช้บริการอื่นๆ ของ G Suite หรือบริการในตัวของ Google จาก Apps Script เช่น Gmail, Google ไดรฟ์, ปฏิทิน, เอกสาร, Maps, Analytics, YouTube ฯลฯ รวมถึงบริการขั้นสูงอื่นๆ ดูข้อมูลเพิ่มเติมเกี่ยวกับทั้งบริการในตัวและบริการขั้นสูงได้ที่ภาพรวมการอ้างอิง