Ubah big data Anda menjadi insight menggunakan Google Spreadsheet dan Slide

1. Dari analisis big data hingga presentasi slide

Ada banyak alat bagi data scientist untuk melakukan analisis big data, tetapi pada akhirnya analis tetap harus membenarkan hasil kepada manajemen. Banyak angka di kertas atau dalam database hampir tidak dapat dipresentasikan kepada pemangku kepentingan utama. Codelab Google Apps Script tingkat menengah ini menggunakan 2 platform developer Google (Google Workspace dan Google Cloud Console) untuk membantu Anda mengotomatiskan langkah terakhir tersebut.

Alat developer Google Cloud memungkinkan Anda melakukan analisis data mendalam. Kemudian, Anda dapat mengambil hasilnya, memasukkannya ke dalam spreadsheet, dan membuat presentasi slide dengan data tersebut. Cara ini menawarkan cara yang lebih tepat untuk menyampaikan data kepada manajemen. Codelab ini membahas BigQuery API di Konsol Cloud (sebagai layanan tingkat lanjut Apps Script) dan layanan Apps Script bawaan untuk Google Spreadsheet dan Google Slide.

Motivasi

Aplikasi contoh dalam codelab ini terinspirasi oleh contoh kode lainnya berikut:

Meskipun aplikasi contoh codelab Slides API juga menampilkan BigQuery dan Slide, aplikasi ini berbeda dengan aplikasi contoh codelab ini dalam beberapa hal:

  • Aplikasi Node.js mereka vs. aplikasi Apps Script kami.
  • Mereka menggunakan REST API, sedangkan kita menggunakan layanan Apps Script.
  • Mereka menggunakan Google Drive, tetapi tidak menggunakan Google Spreadsheet, sedangkan aplikasi ini menggunakan Spreadsheet, tetapi tidak menggunakan Drive.

Untuk codelab ini, kami ingin menggabungkan beberapa teknologi ke dalam satu aplikasi sambil menampilkan fitur dan API dari seluruh Google Cloud dengan cara yang menyerupai kasus penggunaan di dunia nyata. Tujuannya adalah untuk menginspirasi Anda menggunakan imajinasi dan mempertimbangkan penggunaan Konsol Cloud dan Google Workspace untuk memecahkan masalah yang sulit bagi organisasi dan pelanggan Anda.

Yang akan Anda pelajari

  • Cara menggunakan Google Apps Script dengan beberapa layanan Google
  • Cara menggunakan Google BigQuery untuk menganalisis big data
  • Cara membuat Spreadsheet Google dan memasukkan data ke dalamnya
  • Cara membuat diagram di Spreadsheet
  • Cara mentransfer data dan diagram dari Spreadsheet ke presentasi Google Slide

Yang Anda butuhkan

  • Browser web dengan akses ke internet
  • Akun Google (akun Google Workspace mungkin memerlukan persetujuan administrator)
  • Pemahaman dasar tentang Google Spreadsheet
  • Kemampuan untuk membaca Notasi A1 Spreadsheet
  • Keterampilan JavaScript dasar
  • Pengetahuan tentang pengembangan Apps Script akan sangat membantu, tetapi tidak wajib

2. Survei

Bagaimana Anda akan menggunakan codelab/tutorial ini?

Membacanya untuk tujuan informasi, mungkin meneruskannya ke rekan kerja teknis Mempelajarinya sejauh yang saya bisa dan mencoba sebanyak mungkin latihan yang ada Apa pun yang terjadi, saya akan menyelesaikan seluruh codelab

Bagaimana penilaian Anda terhadap pengalaman menggunakan alat & API developer Google Workspace?

Pemula Menengah Mahir

Bagaimana penilaian Anda terhadap pengalaman Anda dengan Apps Script secara khusus?

Pemula Menengah Mahir

Bagaimana penilaian Anda terhadap pengalaman menggunakan alat developer & API Konsol Cloud?

Pemula Menengah Mahir

3. Ringkasan

Sekarang setelah Anda mengetahui isi codelab ini, berikut hal-hal yang akan Anda lakukan:

  1. Gunakan contoh Apps Script-BigQuery yang ada dan buat agar berfungsi.
  2. Dari contoh, pelajari cara mengirim kueri ke BigQuery dan mendapatkan hasilnya.
  3. Buat Spreadsheet Google dan masukkan hasil dari BigQuery ke dalamnya.
  4. Ubah kode untuk sedikit mengubah data yang ditampilkan dan dimasukkan ke dalam Spreadsheet.
  5. Gunakan layanan Spreadsheet di Apps Script untuk membuat diagram data BigQuery.
  6. Gunakan layanan Slide untuk membuat presentasi Google Slide.
  7. Tambahkan judul dan subjudul ke slide judul default.
  8. Buat slide dengan tabel data dan ekspor sel data Spreadsheet ke dalamnya.
  9. Buat slide lain dan sisipkan diagram spreadsheet ke dalamnya.

Mari kita mulai dengan beberapa informasi latar belakang tentang Apps Script, BigQuery, Spreadsheet, dan Slide.

Google Apps Script dan BigQuery

Google Apps Script adalah platform pengembangan Google Workspace yang beroperasi pada tingkat yang lebih tinggi daripada REST API Google. Platform ini merupakan lingkungan pengembangan serverless dan hosting aplikasi yang dapat diakses oleh semua tingkat keahlian developer. Pada dasarnya, Apps Script adalah runtime JavaScript serverless untuk otomatisasi, ekstensi, dan integrasi Google Workspace.

Apps Script menggunakan JavaScript sisi server, mirip dengan Node.js, tetapi mengutamakan integrasi yang erat dengan Google Workspace dan layanan Google lainnya, bukan hosting aplikasi berbasis peristiwa asinkron yang cepat. Selain itu, Apps Script memiliki lingkungan pengembangan yang mungkin berbeda dari yang biasa Anda gunakan. Dengan Apps Script, Anda:

  • Mengembangkan skrip menggunakan editor kode berbasis browser, tetapi juga dapat mengembangkan secara lokal saat menggunakan clasp, alat deployment command line untuk Apps Script.
  • Menulis kode dalam versi JavaScript khusus yang disesuaikan untuk mengakses Google Workspace dan layanan Google atau eksternal lainnya (menggunakan layanan URL Fetch atau JDBC Apps Script).
  • Dapat menghindari penulisan kode otorisasi karena Apps Script sudah menanganinya.
  • Tidak perlu menghosting aplikasi Anda karena aplikasi tersebut dihosting dan berjalan di server Google di cloud.

Apps Script berinteraksi dengan teknologi Google lain dalam 2 cara:

  • Sebagai layanan bawaan
  • Sebagai layanan tingkat lanjut

Layanan bawaan memiliki metode tingkat tinggi untuk berinteraksi dengan data pengguna, sistem Google lainnya, dan sistem eksternal. Layanan tingkat lanjut pada dasarnya adalah wrapper ringan yang melengkapi Google Workspace API atau REST API Google. Layanan tingkat lanjut mencakup REST API lengkap dan sering kali memiliki kemampuan yang melebihi fungsi layanan bawaan, tetapi melibatkan kode yang lebih rumit (meskipun tetap lebih mudah digunakan daripada REST API lengkap). Sebelum digunakan, layanan tingkat lanjut juga harus diaktifkan untuk project skrip.

Jika memungkinkan, developer harus menggunakan layanan bawaan karena lebih mudah digunakan dan melakukan lebih banyak hal daripada layanan tingkat lanjut. Namun, beberapa Google API tidak memiliki layanan bawaan, sehingga layanan tingkat lanjut mungkin menjadi satu-satunya opsi. Misalnya, Google BigQuery tidak memiliki layanan bawaan, tetapi BigQuery Service tersedia. Layanan BigQuery adalah layanan Konsol Cloud yang memungkinkan Anda menggunakan Google BigQuery API untuk menjalankan kueri pada kumpulan data besar (misalnya, beberapa terabyte), tetapi masih dapat memberikan hasil dalam hitungan detik.

Mengakses Spreadsheet & Slide dari Apps Script

Tidak seperti BigQuery, Spreadsheet dan Slide memiliki layanan bawaan. Aplikasi ini juga memiliki layanan lanjutan untuk mengakses fitur yang hanya ada di API. Lihat dokumentasi untuk layanan Spreadsheet dan Slide bawaan sebelum mempelajari kode. Perhatikan bahwa ada juga dokumentasi untuk layanan lanjutan Spreadsheet dan Slide.

4. Tugas 1: Menjalankan BigQuery dan mencatat hasilnya ke Spreadsheet

Pengantar

Kita akan mengerjakan sebagian besar codelab ini dalam tugas pertama ini. Bahkan, setelah selesai, Anda akan menyelesaikan sekitar setengah dari keseluruhan codelab. Yang dibagi menjadi beberapa subbagian, Anda akan:

  • Buat project Google Apps Script dan project Konsol Cloud.
  • Aktifkan akses ke layanan tingkat lanjut BigQuery.
  • Buka editor skrip dan masukkan kode sumber aplikasi.
  • Menavigasi proses otorisasi aplikasi (OAuth2).
  • Jalankan aplikasi yang mengirimkan permintaan ke BigQuery.
  • Tinjau Spreadsheet Google baru yang dibuat menggunakan hasil BigQuery.

Penyiapan

  1. Untuk membuat project Apps Script, buka script.google.com, lalu klik New project.
  2. Untuk mengganti nama project Apps Script, klik Project tanpa judul, masukkan judul untuk project Anda, lalu klik Ganti nama.

Selanjutnya, Anda harus membuat project Cloud Console untuk membuat kueri data di BigQuery.

  1. Untuk membuat project Konsol Cloud, gunakan link pintasan ini untuk membuat project, beri nama project, lalu klik Buat.
  1. Saat pembuatan project selesai, notifikasi akan muncul di halaman. Pastikan project baru Anda dipilih dalam daftar project di bagian atas halaman.
  2. Klik Menu f5fbd278915eb7aa.png, lalu buka APIs & Services > OAuth consent screen (link langsung).
  3. Klik Internal > Buat untuk membuat aplikasi bagi pengguna Google Workspace dalam organisasi Anda.
  4. Di kolom App name, masukkan "Big Data Codelab".
  5. Masukkan email kontak untuk kolom Dukungan pengguna dan Informasi kontak developer.
  6. Klik Simpan dan lanjutkan > Simpan dan lanjutkan.
  7. Klik Lainnya 50fa7e30ed2d1b1c.png di menu navigasi, lalu pilih Setelan project (link langsung).
  8. Salin nilai yang tercantum di bagian Project number. (Kolom Project ID terpisah akan digunakan nanti dalam codelab.)

Selanjutnya, Anda akan menghubungkan project Apps Script ke project Cloud Console.

  1. Beralih ke editor App Script, lalu klik Project Settings settings-gear.
  2. Di bagian Project Google Cloud Platform (GCP), klik Ubah project.
  3. Masukkan nomor project, lalu klik Set project.
  4. Selanjutnya, klik Editor code-editor untuk mulai menambahkan layanan tingkat lanjut BigQuery.
  5. Di samping Layanan, klik Tambahkan layanan Menambahkan layanan.
  6. Di dialog Tambahkan layanan, pilih BigQuery API, lalu klik Tambahkan.

Langkah terakhir adalah mengaktifkan BigQuery API di Konsol Cloud.

  1. Untuk melakukannya, beralihlah ke Konsol Cloud, lalu klik APIs & Services > Dashboard. (Pastikan Anda masih berada di project yang sama dengan yang Anda buat di Langkah 3.)
  2. Klik Aktifkan API dan Layanan.
  3. Telusuri "big query", pilih BigQuery API (bukan BigQuery Data Transfer API), lalu klik Aktifkan untuk mengaktifkannya.

a0e07fa159de9367.png

Sekarang, Anda siap memasukkan kode aplikasi, melakukan proses otorisasi, dan menjalankan iterasi pertama aplikasi ini.

Upload aplikasi dan jalankan

  1. Di editor skrip, ganti blok kode myFunction() default dengan kode berikut:
// File name for data results
var QUERY_NAME = "Most common words in all of Shakespeare's works";
// Replace this value with your Google Cloud Console Project ID
var PROJECT_ID = '';
if (!PROJECT_ID) throw Error('Project ID is required in setup');

/**
 * Runs a BigQuery query; puts results into a Sheet. You must turn on
 * the BigQuery advanced service before you can run this code.
 * @see https://developers.google.com/apps-script/advanced/bigquery#run_query
 * @see https://github.com/googleworkspace/apps-script-samples/blob/master/advanced/bigquery.gs
 *
 * @returns {Spreadsheet} Returns a spreadsheet with BigQuery results
 * @see https://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 BigQuery 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 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());
}
  1. Klik Simpan simpan.
  2. Di samping Code.gs, klik Lainnya 50fa7e30ed2d1b1c.png > Ganti nama. Ubah judul dari Code.gs menjadi bq-sheets-slides.js.
  3. Selanjutnya, mari kita tinjau kode yang menjalankan kueri di BigQuery dan menuliskan hasilnya ke Spreadsheet Google. Anda dapat melihatnya di dekat bagian atas 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

Kueri ini menelusuri karya Shakespeare, yang merupakan bagian dari set data publik BigQuery, dan menghasilkan 10 kata yang paling sering muncul di semua karyanya, yang diurutkan mulai dari yang paling populer. Anda akan mendapatkan gambaran tentang kegunaan BigQuery saat membayangkan betapa sulitnya melakukan kompilasi ini secara manual.

Fungsi ini juga mendeklarasikan variabel PROJECT_ID yang memerlukan project ID Konsol Cloud yang valid. Pernyataan if di bawah variabel ada untuk mencegah aplikasi melanjutkan tanpa project ID.

  1. Beralihlah ke project Konsol Cloud Anda, klik Lainnya 50fa7e30ed2d1b1c.png di menu navigasi, lalu pilih Setelan project.
  2. Salin nilai yang tercantum di bagian Project ID.
  3. Beralih kembali ke editor App Script, temukan variabel PROJECT_ID di bq-sheets-slides.js, lalu tambahkan nilai.
  4. Klik Save simpan > Run.
  5. Klik Tinjau izin untuk melanjutkan.
  1. Setelah skrip mulai berjalan, log eksekusi bawaan akan terbuka dan mencatat tindakan skrip secara real time.
  1. Setelah log eksekusi menampilkan "Execution completed", buka Google Drive Anda (drive.google.com) dan temukan Spreadsheet Google yang berjudul "Most common words in all of Shakespeare's works" (atau judul yang Anda tetapkan ke variabel QUERY_NAME, jika Anda memperbaruinya):
  2. Buka spreadsheet untuk melihat 10 kata yang paling umum dan jumlah totalnya diurutkan menurun:

afe500ad43f8cdf8.png

Ringkasan Tugas 1

Untuk meninjau, Anda menjalankan beberapa kode yang mengkueri semua karya Shakespeare dengan melihat setiap kata dalam setiap drama. Fitur ini menghitung kata dan mengurutkannya dalam urutan penampilan menurun. Anda juga menggunakan layanan bawaan Apps Script untuk Google Spreadsheet guna menampilkan data ini.

Kode yang Anda gunakan untuk bq-sheets-slides.js juga dapat ditemukan di folder step1 repositori GitHub codelab ini di github.com/googlecodelabs/bigquery-sheets-slides. Kode ini terinspirasi oleh contoh asli di halaman layanan lanjutan BigQuery yang menjalankan kueri yang sedikit berbeda untuk mengambil kata-kata paling populer dengan 10 karakter atau lebih yang digunakan oleh Shakespeare. Anda juga dapat melihat contoh di repositori GitHub-nya.

Jika Anda tertarik dengan kueri lain yang dapat dibuat dengan karya Shakespeare, atau tabel data publik lainnya, buka Cara Mengkueri Tabel Contoh BigQuery dan repositori GitHub ini.

Anda juga dapat menjalankan kueri menggunakan halaman BigQuery di Konsol Cloud sebelum menjalankannya di Apps Script. Untuk menemukannya, klik Menu f5fbd278915eb7aa.png, lalu buka BigQuery UI > SQL workspace (link langsung). Misalnya, berikut tampilan kueri kita di antarmuka grafis BigQuery:

BigQueryUI

5. Tugas 2: Buat diagram di Google Spreadsheet

Tujuan runQuery() adalah menggunakan BigQuery dan mengirimkan hasil datanya ke Google Spreadsheet. Selanjutnya, kita perlu membuat diagram menggunakan data tersebut. Mari kita buat fungsi baru bernama createColumnChart() yang memanggil metode newChart() Spreadsheet.

  1. Di editor Apps Script, tambahkan fungsi createColumnChart() ke bq-sheets-slides.js setelah runQuery(). Kode ini mengambil spreadsheet dan meminta diagram kolom yang menampilkan semua data. Rentang data dimulai di sel A2 karena baris pertama berisi header kolom.
/**
 * Uses spreadsheet data to create a column chart.
 * @param {Spreadsheet} Spreadsheet containing results data
 * @returns {EmbeddedChart} Visualizes the results
 * @see https://developers.google.com/apps-script/reference/spreadsheet/embedded-chart
 */
function createColumnChart(spreadsheet) {
  // Retrieve the populated (first) 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 values.
  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. Fungsi createColumnChart() memerlukan parameter objek spreadsheet, jadi kita perlu memperbarui runQuery() untuk menampilkan objek spreadsheet yang dapat kita teruskan ke createColumnChart(). Di akhir runQuery(), tampilkan objek spreadsheet setelah mencatat keberhasilan pembuatan sheet:
  Logger.log('Results spreadsheet created: %s', spreadsheet.getUrl());

  // NEW: Return the spreadsheet object for later use.
  return spreadsheet;
}
  1. Buat fungsi createBigQueryPresentation() untuk memanggil runQuery() dan createColumnChart(). Memisahkan fungsi BigQuery dan pembuatan diagram secara logis adalah praktik terbaik:
/**
 * Runs the query, adds data and a chart to a spreadsheet.
 */
function createBigQueryPresentation() {
  var spreadsheet = runQuery();
  createColumnChart(spreadsheet);
}
  1. Anda telah melakukan 2 langkah penting di atas, yaitu menghasilkan objek spreadsheet dan membuat fungsi entri. Agar runQuery() lebih mudah digunakan, kita perlu memindahkan baris log dari runQuery() ke createBigQueryPresentation(). Metode Anda sekarang akan terlihat seperti ini:
/**
 * Runs a BigQuery query, adds data and a chart to a spreadsheet.
 */
function createBigQueryPresentation() {
  var spreadsheet = runQuery();
  Logger.log('Results spreadsheet created: %s', spreadsheet.getUrl()); // MOVED HERE
  createColumnChart(spreadsheet);
}

Dengan perubahan di atas (kecuali untuk PROJECT_ID), bq-sheets-slides.js Anda sekarang akan terlihat seperti berikut. Kode ini juga dapat ditemukan di step2 repositori GitHub.

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

/**
 * Runs a BigQuery query; puts results into a sheet. You must turn on
 * the BigQuery advanced service before you can run this code.
 * @see https://developers.google.com/apps-script/advanced/bigquery#run_query
 * @see https://github.com/googleworkspace/apps-script-samples/blob/master/advanced/bigquery.gs
 *
 * @returns {Spreadsheet} Returns a spreadsheet with BigQuery results
 * @see https://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 BigQuery 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 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 a columnar chart.
 * @param {Spreadsheet} Spreadsheet containing results data
 * @returns {EmbeddedChart} Visualizes the results
 * @see https://developers.google.com/apps-script/reference/spreadsheet/embedded-chart
 */
function createColumnChart(spreadsheet) {
  // Retrieve the populated (first) 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 values.
  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 to a spreadsheet.
 */
function createBigQueryPresentation() {
  var spreadsheet = runQuery();
  Logger.log('Results spreadsheet created: %s', spreadsheet.getUrl());
  createColumnChart(spreadsheet);
}

Di editor skrip, simpan project skrip Anda. Kemudian, pilih createBigQueryPresentation dari daftar fungsi, lalu klik Jalankan. Setelah selesai, spreadsheet lain akan dibuat di Google Drive Anda, tetapi kali ini diagram disertakan dalam sheet di samping data:

Sheet dengan diagram

6. Tugas 3: Memasukkan data hasil ke presentasi slide

Di bagian terakhir codelab ini, Anda akan membuat presentasi Google Slide, menambahkan judul dan subjudul ke slide judul, lalu membuat slide untuk sel data dan diagram.

  1. Di editor Apps Script, tambahkan fungsi createSlidePresentation() ke bq-sheets-slides.js setelah createColumnChart(). Semua pekerjaan pada slide dilakukan dalam fungsi ini. Mulai dengan membuat presentasi slide, lalu tambahkan judul dan subjudul ke slide judul default.
/**
 * Create presentation with spreadsheet data and a chart
 * @param {Spreadsheet} Spreadsheet containing results data
 * @param {EmbeddedChart} Sheets chart to embed on a slide
 * @returns {Presentation} Slide deck with the results
  * @see https://developers.google.com/apps-script/reference/slides/presentation
 */
function createSlidePresentation(spreadsheet, chart) {
  // Create the 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('using Google Cloud Console and Google Workspace APIs:\n' +
    'Google Apps Script, BigQuery, Sheets, Slides');
  1. Langkah berikutnya dalam createSlidePresentation() adalah mengimpor data sel dari Spreadsheet Google ke presentasi slide baru. Tambahkan cuplikan kode ini ke fungsi:
  // 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 with
  // the dimensions of the data range; fails if the sheet is 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. Langkah terakhir dalam createSlidePresentation() adalah menambahkan satu slide lagi, mengimpor diagram dari spreadsheet, dan menampilkan objek Presentation. Tambahkan cuplikan kode ini ke fungsi:
  // 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. Sekarang setelah fungsi selesai, lihat kembali detailnya. createSlidePresentation() memerlukan parameter objek spreadsheet dan diagram. Kita telah menyesuaikan runQuery() untuk menghasilkan objek Spreadsheet, tetapi kita perlu melakukan perubahan serupa pada createColumnChart() agar menghasilkan objek diagram (EmbeddedChart). Kembali ke createColumnChart() dan tambahkan cuplikan kode berikut di akhir fungsi:
  // NEW: Return the chart object for later use.
  return chart;
}
  1. Karena createColumnChart() sekarang menampilkan objek diagram, kita perlu menyimpan diagram ke variabel. Kemudian, kita meneruskan kedua variabel spreadsheet dan diagram ke createSlidePresentation(). Selain itu, karena kita mencatat URL spreadsheet yang baru dibuat, mari kita catat juga URL presentasi slide baru. Perbarui createBigQueryPresentation() Anda agar terlihat seperti ini:
/**
 * Runs a BigQuery query, adds data and a chart to a spreadsheet,
 * 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. Simpan dan jalankan createBigQueryPresentation() lagi. Namun, sebelum kode dijalankan, aplikasi Anda memerlukan satu set izin lagi dari pengguna untuk melihat dan mengelola presentasi Google Slide. Setelah Anda meninjau dan mengizinkan izin ini, aplikasi akan berjalan seperti sebelumnya.
  2. Sekarang, selain spreadsheet yang dibuat, Anda juga akan mendapatkan presentasi Slide baru yang berisi 3 slide (judul, tabel data, diagram data), seperti yang ditunjukkan di bawah ini:

f6896f22cc3cd50d.png

59960803e62f7c69.png

5549f0ea81514360.png

7. Kesimpulan

Selamat, Anda telah membuat aplikasi yang menggunakan kedua sisi Google Cloud. Aplikasi ini melakukan permintaan Google BigQuery yang mengkueri salah satu set data publiknya, membuat spreadsheet Google Spreadsheet untuk menyimpan hasilnya, menambahkan diagram berdasarkan data, dan terakhir membuat presentasi Google Slide yang menampilkan hasil data dan diagram dari spreadsheet.

Langkah-langkah ini adalah yang Anda lakukan secara teknis. Secara umum, Anda telah menganalisis data besar sampai mendapatkan hasil yang dapat disajikan kepada pemangku kepentingan—semuanya otomatis menggunakan kode. Kami harap contoh ini menginspirasi Anda untuk menyesuaikannya dengan project Anda sendiri. Di akhir codelab ini, kami akan memberikan beberapa saran tentang cara lebih meningkatkan aplikasi contoh ini.

Dengan perubahan dari tugas terakhir (kecuali PROJECT_ID), bq-sheets-slides.js Anda sekarang akan terlihat seperti berikut:

/**
 * 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.
 */

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

/**
 * Runs a BigQuery query; puts results into a spreadsheet. You must turn on
 * the BigQuery advanced service before you can run this code.
 * @see https://developers.google.com/apps-script/advanced/bigquery#run_query
 * @see https://github.com/googleworkspace/apps-script-samples/blob/master/advanced/bigquery.gs
 *
 * @returns {Spreadsheet} Returns a spreadsheet with BigQuery results
 * @see https://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 BigQuery 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 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 a column chart.
 * @param {Spreadsheet} Spreadsheet containing results data
 * @returns {EmbeddedChart} Visualizes the results
 * @see https://developers.google.com/apps-script/reference/spreadsheet/embedded-chart
 */
function createColumnChart(spreadsheet) {
  // Retrieve the populated (first) 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 values.
  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 and a chart
 * @param {Spreadsheet} Spreadsheet containing results data
 * @param {EmbeddedChart} Sheets chart to embed on a slide
 * @returns {Presentation} Slide deck with the results
 * @see https://developers.google.com/apps-script/reference/slides/presentation
 */
function createSlidePresentation(spreadsheet, chart) {
  // Create the 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('using Google Cloud Console and Google Workspace 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 with
  // the dimensions of the data range; fails if the sheet is 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 to a spreadsheet,
 * 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());
}

Contoh kode ini juga dapat ditemukan di folder final dalam repositori GitHub.

8. Referensi lainnya

Berikut adalah referensi lainnya untuk membantu Anda mempelajari lebih dalam materi yang dibahas dalam codelab ini dan mengeksplorasi cara lain untuk mengakses alat developer Google secara terprogram.

Referensi untuk aplikasi ini

Dokumentasi

Video

Berita & info terbaru

Codelab lainnya

Pengantar

Menengah

9. Langkah berikutnya: tantangan kode

Di bawah ini tercantum berbagai cara untuk meningkatkan atau memperluas contoh yang kita buat dalam codelab ini. Daftar ini tidak lengkap, tetapi memberikan beberapa ide inspiratif tentang cara Anda dapat mengambil langkah berikutnya.

  • Aplikasi—Tidak ingin dibatasi untuk menggunakan JavaScript atau oleh batasan yang diberlakukan oleh Apps Script? Porting aplikasi ini ke bahasa pemrograman favorit Anda yang menggunakan REST API untuk Google BigQuery, Spreadsheet, dan Slide.
  • BigQuery—Bereksperimenlah dengan kueri berbeda untuk set data Shakespeare yang menarik bagi Anda. Contoh kueri lainnya dapat ditemukan di aplikasi contoh BigQuery Apps Script asli.
  • BigQuery—Bereksperimenlah dengan beberapa set data publik BigQuery lainnya untuk menemukan set data yang lebih bermakna bagi Anda.
  • BigQuery—Sebelumnya, kami menyebutkan kueri lain yang dapat Anda buat dengan karya Shakespeare, atau tabel data publik lainnya. Anda dapat menemukannya di halaman web ini dan repo GitHub ini.
  • Spreadsheet—Bereksperimenlah dengan jenis diagram lain di Galeri Diagram.
  • Spreadsheet & BigQuery—Gunakan set data spreadsheet besar Anda sendiri. Pada tahun 2016, tim BigQuery memperkenalkan fitur yang memungkinkan developer menggunakan Spreadsheet sebagai sumber data. Untuk mengetahui informasi selengkapnya, buka (Google BigQuery terintegrasi dengan Google Drive.
  • Slide—Tambahkan slide lain ke presentasi yang dibuat, seperti gambar atau aset lain yang terkait dengan analisis big data Anda. Berikut adalah dokumentasi referensi untuk layanan bawaan Slides.
  • Google Workspace—Gunakan layanan bawaan Google atau Google Workspace lainnya dari Apps Script. Misalnya, Gmail, Kalender, Dokumen, Drive, Maps, Analytics, YouTube, dll., serta layanan lanjutan lainnya. Untuk mengetahui informasi selengkapnya, buka ringkasan referensi untuk layanan bawaan dan lanjutan.