Ubah big data Anda menjadi insight menggunakan Google Spreadsheet dan Slide

Ada banyak alat yang tersedia bagi data scientist untuk melakukan analisis big data, tetapi pada akhirnya, bukankah Anda tetap harus membenarkan hasil tersebut kepada manajemen? Banyak angka di kertas atau dalam database hampir tidak dapat dipresentasikan kepada pemangku kepentingan utama. Codelab Google Apps Script tingkat menengah ini memanfaatkan sepasang platform developer Google, G Suite dan Google Cloud Platform (GCP), untuk membantu Anda menyelesaikan tahap akhir.

Alat developer Google Cloud memungkinkan Anda melakukan analisis data mendalam, lalu mengambil hasil tersebut, memasukkannya ke dalam spreadsheet, dan membuat presentasi slide dengan data tersebut, sehingga memberikan tahap yang lebih sesuai untuk menyampaikan hasil kepada manajemen. Codelab ini membahas API BigQuery GCP (sebagai layanan lanjutan Apps Script) dan layanan Apps Script bawaan untuk Google Spreadsheet dan Google Slide.

Motivasi/karya pendahulu

Aplikasi contoh dalam codelab ini terinspirasi oleh contoh kode lainnya...

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 vs. aplikasi Apps Script kami
  • Menggunakan REST API saat kita menggunakan layanan Apps Script
  • Menggunakan Google Drive, tetapi tidak menggunakan Google Spreadsheet, sedangkan aplikasi ini menggunakan Spreadsheet, tetapi tidak menggunakan Drive

Untuk codelab ini, kami ingin menggabungkan sebanyak mungkin teknologi ke dalam satu aplikasi sambil menampilkan fitur dan API dari seluruh Google Cloud dengan cara yang lebih menyerupai kasus penggunaan di dunia nyata. Tujuannya adalah untuk menginspirasi Anda menggunakan imajinasi dan mempertimbangkan untuk memanfaatkan GCP & G Suite guna memecahkan masalah sulit bagi organisasi atau pelanggan Anda.

Yang akan Anda pelajari

  • Cara menggunakan Google Apps Script dengan beberapa layanan Google (GCP & G Suite)
  • Cara menggunakan Google BigQuery untuk melakukan analisis big data
  • Cara membuat Spreadsheet Google dan mengisi data ke dalamnya
  • Cara membuat diagram baru di Spreadsheet
  • Cara mentransfer diagram dan data dari Spreadsheet ke dalam presentasi Google Slide

Yang Anda butuhkan

  • Akses ke internet dan browser web
  • Akun Google (akun G Suite mungkin memerlukan persetujuan administrator)
  • Keterampilan JavaScript dasar
  • Pengetahuan tentang pengembangan Apps Script mungkin akan membantu, tetapi tidak wajib

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 ini

Bagaimana penilaian Anda terhadap pengalaman menggunakan alat & API developer G Suite?

Pemula Menengah Mahir

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

Pemula Menengah Mahir

Bagaimana penilaian Anda terhadap pengalaman Anda menggunakan alat & API developer GCP?

Pemula Menengah Mahir

Sekarang setelah Anda mengetahui isi codelab ini, apa yang akan Anda lakukan?

  1. Gunakan sampel Apps Script-BigQuery yang ada dan buat agar berfungsi
  2. Dari contoh tersebut, pelajari cara mengirim kueri ke BigQuery dan mendapatkan hasilnya
  3. Buat Spreadsheet Google dan isi hasilnya dari BigQuery ke dalamnya
  4. Ubah sedikit kode untuk mengubah sedikit data yang ditampilkan dan ditambahkan ke Spreadsheet
  5. Gunakan layanan Spreadsheet di Apps Script untuk membuat diagram data dari BigQuery
  6. Menggunakan layanan Slide untuk membuat presentasi slide baru
  7. Menambahkan judul dan subjudul ke slide judul default yang dibuat secara otomatis untuk semua set slide baru
  8. Buat slide baru dengan tabel data, lalu impor sel data Spreadsheet ke dalamnya
  9. Tambahkan slide baru lainnya dan tambahkan diagram spreadsheet ke slide tersebut

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 G Suite yang beroperasi pada tingkat yang lebih tinggi daripada menggunakan Google REST API. Lingkungan ini adalah lingkungan pengembangan dan hosting aplikasi serverless yang dapat diakses oleh berbagai tingkat keterampilan developer. Dalam satu kalimat, "Apps Script adalah runtime JavaScript serverless untuk otomatisasi, ekstensi, dan integrasi G Suite."

JavaScript ini adalah JavaScript sisi server, mirip dengan Node.js, tetapi berfokus pada integrasi yang erat dengan G Suite dan layanan Google lainnya, bukan hosting aplikasi berbasis peristiwa asinkron yang cepat. Lingkungan ini juga memiliki lingkungan pengembangan yang mungkin sangat berbeda dari yang biasa Anda gunakan. Dengan Apps Script, Anda dapat:

  • Mengembangkan di editor kode berbasis browser, tetapi dapat memilih untuk mengembangkan secara lokal jika menggunakan clasp, alat deployment command line untuk Apps Script
  • Kode dalam versi JavaScript khusus yang disesuaikan untuk mengakses G Suite, dan layanan Google atau eksternal lainnya (melalui layanan URLfetch atau Jdbc Apps Script)
  • Dapat menghindari penulisan kode otorisasi karena Apps Script menanganinya untuk Anda
  • Tidak perlu menghosting aplikasi—aplikasi berjalan di server Google di cloud

CATATAN: Sebagian besar, pengajaran Apps Script tidak termasuk dalam cakupan codelab ini. Ada banyak referensi online yang dapat membantu Anda melakukannya. Dokumentasi resmi menampilkan ringkasan dengan panduan memulai, tutorial, dan video juga. Terakhir, jangan lupakan codelab pengantar Apps Script, yang harus diselesaikan sebelum memulai codelab ini.

Apps Script berinteraksi dengan teknologi Google lainnya dalam dua cara yang berbeda:

  • layanan bawaan/asli
  • layanan lanjutan

Layanan bawaan menyediakan metode tingkat tinggi yang dapat Anda gunakan untuk mengakses data produk Google atau G Suite, atau metode utilitas berguna lainnya. Layanan lanjutan hanyalah wrapper tipis di sekitar G Suite atau Google REST API. Layanan lanjutan memberikan cakupan penuh REST API dan sering kali dapat melakukan lebih banyak hal daripada layanan bawaan, tetapi memerlukan kompleksitas kode yang lebih tinggi (sekaligus lebih mudah digunakan daripada REST API itu sendiri). Layanan lanjutan juga harus diaktifkan untuk project skrip sebelum menggunakannya.

Jika memungkinkan, developer harus memilih layanan bawaan karena lebih mudah digunakan dan melakukan lebih banyak tugas berat daripada layanan lanjutan. Namun, beberapa API Google tidak memiliki layanan bawaan, sehingga layanan lanjutan mungkin menjadi satu-satunya opsi. Google BigQuery adalah salah satu contohnya... tidak ada layanan bawaan yang tersedia, tetapi layanan lanjutan BigQuery ada. (Lebih baik daripada tidak ada layanan, bukan?) Jika Anda baru menggunakan BigQuery, layanan GCP ini memungkinkan Anda menjalankan kueri sederhana (atau kompleks) pada korpus data yang sangat besar, misalnya dalam urutan beberapa terabyte, tetapi tetap dapat memberikan hasil dalam hitungan detik.

Mengakses Google Spreadsheet & Slide dari Apps Script

Tidak seperti BigQuery, Google Spreadsheet dan Slide memiliki layanan bawaan (serta layanan lanjutan, yang hanya akan Anda gunakan untuk mengakses fitur yang hanya ada di API). Lihat dokumentasi untuk layanan Spreadsheet dan Slide bawaan sebelum mulai membuat kode. Tentu saja ada juga dokumen untuk layanan lanjutan; berikut dokumennya untuk Spreadsheet dan Slide.

Pengantar

Kita akan menyelesaikan sebagian besar codelab ini dengan tugas pertama ini. Faktanya, setelah selesai di sini, Anda akan menyelesaikan sekitar setengah dari seluruh codelab. Yang dibagi menjadi beberapa subbagian, Anda akan melakukan semua hal berikut:

  • Memulai project Google Apps Script baru
  • Mengaktifkan akses ke layanan lanjutan BigQuery
  • Buka editor pengembangan dan masukkan kode sumber aplikasi
  • Menjalani proses otorisasi aplikasi (OAuth2)
  • Jalankan aplikasi yang mengirim permintaan ke BigQuery
  • Melihat Spreadsheet Google baru yang dibuat dengan hasil dari BigQuery

Penyiapan

  1. a) Buat project Apps Script baru dengan membuka script.google.com . Ada berbagai lini produk G Suite, dan cara Anda membuat project baru dapat berbeda-beda bergantung pada versi yang Anda gunakan. Jika Anda hanya menggunakan akun Gmail dan baru dalam mengembangkan project, Anda akan melihat layar kosong beserta tombol untuk membuat project pertama Anda:


b) Jika tidak, Anda dapat melihat semua project dan tombol +Baru yang besar di kiri atas, jadi klik tombol tersebut.



c) Jika tidak ada di atas, layar Anda mungkin terlihat seperti di bawah. Jika ya, cari ikon menu tiga garis di sudut kiri atas, lalu pilih +Skrip baru.



d) Bagi Anda yang lebih suka menggunakan command line. Alat Anda adalah clasp, khususnya, Anda akan menjalankan perintah clasp create.

e) Cara terakhir untuk membuat project skrip baru adalah dengan membuka link pintasan: https://script.google.com/create.

  1. Terlepas dari teknik yang Anda gunakan untuk memulai project baru, intinya Anda akan diarahkan ke editor kode Apps Script, layar yang terlihat seperti ini:


  2. Klik File > Save dan beri nama project Anda.
  3. Selanjutnya, Anda harus membuat project Konsol Google Cloud untuk menjalankan kueri BigQuery.
  1. Buat project baru, beri nama, pilih Akun Penagihan, lalu klik BUAT.
  1. Saat pembuatan project selesai, sebuah notifikasi akan muncul di kanan atas halaman. Klik entri Create Project: <Project Name> untuk membuka project.
  2. Klik ikon menu di kiri atas, lalu buka APIs & Services > Credentials. Klik tab OAuth consent screen (link langsung).
  3. Di kolom Application name, masukkan "Big Data Codelab" dan klik tombol Save di bagian bawah.
  4. Klik ikon tiga titikdi kanan atas untuk meluaskan menu, lalu pilih Setelan project (link langsung).
  5. Salin nilai yang tercantum di bagian Project number. (Ada kolom terpisah ID Produk yang akan kita gunakan nanti dalam codelab.)
  6. Kembali di Editor App Script, klik Resources > Cloud Platform project.
  7. Masukkan nomor project ke dalam kotak teks, lalu klik Set Project. Saat diminta, klik Konfirmasi.
  8. Setelah selesai, klik tombol Tutup untuk menutup dialog.
  9. Setelah menyiapkan project baru, Anda perlu mengaktifkan layanan lanjutan BigQuery. Jadi, tarik Resources -> Advanced Google Services dan aktifkan bit untuk BigQuery API.


  10. Catatan di bagian bawah menyatakan, "Layanan ini juga harus diaktifkan di "Dasbor Google Cloud Platform API", jadi klik link tersebut yang akan membuka tab browser lain ke konsol developer atau "devconsole" singkatnya.
  11. Di devconsole, klik tombol +Enable APIs and Services di bagian atas, cari "bigquery", pilih BigQuery API (bukan BigQuery Data Transfer API), lalu klik enable untuk mengaktifkannya. Biarkan tab browser ini tetap terbuka.

    CATATAN: setelah API diaktifkan, Anda mungkin melihat catatan di halaman ini yang mengatakan sesuatu seperti, "Untuk menggunakan API ini, Anda perlu membuat kredensial...," tetapi jangan khawatir tentang hal itu untuk saat ini—Apps Script akan menangani langkah ini untuk Anda.


  12. Kembali di tab browser editor kode, Anda masih berada di menu Advanced Google Services, jadi klik OK untuk menutup dialog, sehingga Anda tetap berada di editor kode. Klik nama project di bagian atas, dan beri nama apa pun yang Anda inginkan, "BigQuery demo" atau yang serupa—kami menamainya "final mile".

Sekarang Anda siap memasukkan kode aplikasi, menjalani proses otorisasi, dan membuat inkarnasi pertama aplikasi ini berfungsi.

Upload aplikasi dan jalankan

  1. Salin kode di kotak di bawah dan tempelkan ke seluruh kode di editor kode:
// 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());
}


Sekarang simpan file yang baru saja Anda buat, tetapi ganti namanya dari Code.gs menjadi bq-sheets-slides.js. Jadi, apa fungsi kode ini? Kami sudah memberi tahu Anda bahwa kueri ini mengkueri BigQuery dan menulis hasilnya ke Spreadsheet Google baru, tetapi apa kueri ini? 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 teratas yang paling sering muncul di semua karyanya, yang diurutkan dalam urutan popularitas menurun. Bayangkan betapa (tidak) menyenangkannya melakukan hal ini secara manual, dan Anda akan memiliki sedikit gambaran tentang betapa bermanfaatnya BigQuery.

  1. Kita hampir siap, tetapi belum sepenuhnya siap untuk mencobanya. Seperti yang Anda lihat di dekat bagian atas cuplikan kode ini, project ID yang valid diperlukan, jadi kita perlu menambahkan project ID Anda ke kode aplikasi. Untuk mendapatkannya, kembali ke jendela atau tab browser yang memiliki halaman konsol developer. (Kami menyuruh Anda membiarkannya terbuka, ingat?)
  2. Di bagian atas di sebelah kiri avatar akun Google Anda terdapat pemilih menu pull-down (). Klik dan pilih Setelan project. Anda akan melihat nama, ID, dan nomor project. Salin project ID dan tetapkan variabel PROJECT_ID di bagian atas bq-sheets-slides.js ke nilai yang Anda dapatkan dari konsol developer. CATATAN: Jika pemilih menu menjadi tetap dan tidak dapat dioperasikan, muat ulang halaman.
  3. Pernyataan if ada untuk mencegah aplikasi berjalan lebih jauh tanpa adanya project ID. Setelah menambahkan milik Anda, simpan file, dan jalankan kode dengan membuka menubar dan memilih Run > Run function > runQuery, klik dialog Review Permissions , Aplikasi ini belum diverifikasi, dan di bawah ini adalah GIF animasi (untuk aplikasi lain) yang menggambarkan beberapa langkah berikutnya:
  4. Setelah Anda meminta untuk meninjau izin, Anda akan melihat dialog baru, seperti yang ditunjukkan di atas. Pilih Akun Google yang benar yang akan menjalankan skrip, pilih Lanjutan, scroll ke bawah, lalu klik "Buka <NAMA PROJECT ANDA> (tidak aman)" untuk membuka layar otorisasi aplikasi OAuth2. (Baca selengkapnya tentang proses verifikasi untuk mempelajari alasan layar ini berada di antara Anda dan dialog otorisasi OAuth2 di bawah.)


    CATATAN: Setelah Anda mengizinkan aplikasi, Anda tidak perlu mengulangi proses ini setiap kali menjalankan aplikasi. Anda baru akan melihat layar dialog ini lagi di Tugas 3 dalam tutorial ini, yang meminta izin pengguna untuk membuat dan mengelola presentasi Google Slide.
  5. Setelah Anda mengklik Izinkan di jendela dialog OAuth2, skrip akan mulai berjalan... Anda akan melihat dialog berwarna kuning pastel di bagian atas. Proses ini berjalan cukup cepat, sehingga Anda mungkin tidak menyadari bahwa proses sedang berjalan atau eksekusi telah selesai.

  6. Dialog tersebut akan hilang setelah selesai, jadi jika Anda tidak melihatnya, kemungkinan prosesnya sudah selesai. Buka Google Drive Anda (drive.google.com) dan cari Spreadsheet Google baru yang bernama "Most common words in all of Shakespeare's works" atau apa pun yang Anda tetapkan ke variabel QUERY_NAME:


  7. Buka spreadsheet, dan Anda akan melihat 10 baris kata dan jumlah totalnya yang diurutkan dalam urutan menurun:

Ringkasan Tugas 1

Perhatikan apa yang baru saja terjadi... Anda menjalankan beberapa kode yang mengkueri semua karya Shakespeare (bukan data dalam jumlah BESAR, tetapi tentu saja lebih banyak teks daripada yang dapat Anda pindai dengan mudah sendiri dengan melihat setiap kata dalam setiap drama, mengelola jumlah kata tersebut, lalu mengurutkannya dalam urutan menurun berdasarkan kemunculannya. Anda tidak hanya meminta BigQuery untuk melakukannya atas nama Anda, tetapi Anda juga dapat menggunakan layanan bawaan di Apps Script untuk Google Spreadsheet guna memasukkan data ini ke sana agar mudah digunakan.

Kode untuk bq-sheets-slides.js (nama file yang kita pilih) yang Anda tempel di atas (selain PROJECT_ID yang harus memiliki ID project yang sebenarnya) juga dapat ditemukan di folder step1 di repo GitHub codelab ini di github.com/googlecodelabs/bigquery-sheets-slides. Kode ini terinspirasi dari contoh asli di halaman layanan lanjutan BigQuery yang menjalankan kueri yang sedikit berbeda... apa saja kata-kata paling populer yang digunakan oleh Shakespeare dengan 10 karakter atau lebih. Anda juga dapat melihat contoh tersebut di repositori GitHub-nya.

Jika Anda tertarik dengan kueri lain yang dapat dicoba terhadap karya Shakespeare atau tabel data publik lainnya, lihat halaman web ini dan halaman ini. Apa pun kueri yang Anda gunakan, Anda selalu dapat menguji kueri di konsol BigQuery sebelum menjalankannya di Apps Script. Antarmuka pengguna BigQuery tersedia bagi developer di bigquery.cloud.google.com. Misalnya, berikut tampilan kueri kita menggunakan UI BigQuery:

Meskipun langkah-langkah di atas memanfaatkan editor kode Apps Script, Anda juga dapat memilih untuk mengembangkan secara lokal melalui command line. Jika Anda mau, buat skrip bernama bq-sheets-slides.js, tempelkan kode di atas ke dalamnya, lalu upload ke Google dengan perintah clasp push. (Jika Anda melewatkannya sebelumnya, berikut link ke clasp dan cara menggunakannya.)

Tujuan runQuery() adalah untuk berkomunikasi dengan BigQuery dan mengirimkan hasilnya ke Spreadsheet. Sekarang kita perlu membuat diagram dengan data tersebut. Mari kita buat fungsi baru bernama createColumnChart() yang memanggil metode newChart() Sheet untuk melakukannya.

  1. Buat diagram. Tambahkan isi createColumnChart() yang ditampilkan di bawah ke bq-sheets-slides.js tepat setelah runQuery(). Skrip ini akan mendapatkan sheet dengan data dan meminta diagram kolom dengan semua data. Rentang data dimulai di sel A2 karena baris pertama berisi header kolom, bukan data.
/**
 * 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. Mengembalikan spreadsheet. Di atas, createColumnChart() memerlukan objek spreadsheet, jadi kita perlu memperbarui runQuery() untuk menampilkan objek spreadsheet agar dapat meneruskannya ke createColumnChart(). Setelah mencatat keberhasilan pembuatan Spreadsheet Google, kembalikan objek spreadsheet di akhir runQuery(), tepat setelah baris log:
  Logger.log('Results spreadsheet created: %s', spreadsheet.getUrl());

  // NEW: Return the spreadsheet object for later use.
  return spreadsheet;
}
  1. Mengemudi createBigQueryPresentation() function. Memisahkan fungsi BigQuery dan pembuatan diagram secara logis adalah ide yang bagus. Sekarang, mari kita buat fungsi createBigQueryPresentation() untuk menjalankan aplikasi, dengan memanggil runQuery() dan createColumnChart(). Kode yang Anda tambahkan akan terlihat seperti ini:
/**
 * Runs a BigQuery query, adds data and a chart in a Sheet.
 */
function createBigQueryPresentation() {
  var spreadsheet = runQuery();
  createColumnChart(spreadsheet);
}
  1. Membuat kode lebih bisa digunakan kembali. Anda telah melakukan 2 langkah penting di atas: menampilkan objek spreadsheet dan membuat fungsi penggerak. Bagaimana jika rekan kerja ingin menggunakan kembali runQuery() dan tidak ingin URL dicatat? Agar runQuery() lebih mudah dipahami untuk penggunaan umum, kita perlu memindahkan baris log tersebut. Tempat terbaik untuk memindahkannya? Jika Anda menebak createBigQueryPresentation(), Anda benar. Setelah memindahkan baris log, tampilannya akan terlihat seperti ini:
/**
 * 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);
}

Dengan perubahan ini di atas (sekali lagi kecuali untuk PROJECT_ID), bq-sheets-slides.js Anda sekarang akan terlihat seperti berikut (dan juga ditemukan di folder step2 repositori 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);
}

Simpan file, lalu buka bagian atas editor kode dan beralih untuk mengeksekusi createBigQueryPresentation(), bukan runQuery(). Setelah menjalankannya, Anda akan mendapatkan Spreadsheet Google lain, tetapi kali ini, diagram akan muncul di Spreadsheet di samping data:

Bagian terakhir codelab ini melibatkan pembuatan presentasi Google Slide baru, pengisian judul dan subjudul pada slide judul, lalu penambahan 2 slide baru, satu untuk setiap sel data dan satu lagi untuk diagram.

  1. Buat slide deck. Semua pekerjaan pada slide akan dilakukan di createSlidePresentation() yang akan kita tambahkan ke bq-sheets-slides.js tepat setelah createColumnChart(). Mari kita mulai dengan membuat presentasi baru, lalu menambahkan judul dan subjudul ke slide judul default yang kita dapatkan dengan semua presentasi baru.
/**
 * 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. Tambahkan tabel data. Langkah berikutnya dalam createSlidePresentation() adalah mengimpor data sel dari Spreadsheet Google ke dalam presentasi baru kita. Cuplikan kode ini, jadi tambahkan 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 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. Impor diagram. Langkah terakhir dalam createSlidePresentation() adalah membuat satu slide lagi, mengimpor diagram dari spreadsheet, dan menampilkan objek Presentation. Tambahkan cuplikan terakhir 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. Diagram pengembalian. Setelah fungsi akhir kita selesai, lihat kembali tanda tangannya. Ya, createSlidePresentation() memerlukan objek spreadsheet dan diagram. Kita telah menyesuaikan runQuery() untuk menampilkan objek Spreadsheet, tetapi sekarang kita perlu melakukan perubahan serupa pada createColumnChart() untuk menampilkan objek diagram (EmbeddedChart). Kembali ke kode di aplikasi Anda untuk menambahkan satu baris terakhir di akhir createColumnChart() untuk melakukannya:
  // NEW: Return chart object for later use
  return chart;
}
  1. Perbarui createBigQueryPresentation(). Karena createColumnChart() menampilkan diagram, kita perlu menyimpan diagram tersebut ke dalam variabel, lalu meneruskan spreadsheet dan diagram ke createSlidePresentation(). 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 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. Simpan dan jalankan createBigQueryPresentation() lagi. Namun, sebelum dieksekusi, ketahui bahwa aplikasi Anda kini memerlukan satu set izin lagi dari pengguna untuk melihat dan mengelola presentasi Google Slide Anda. Setelah Anda mengizinkan izin ini, izin akan berjalan seperti sebelumnya.
  2. Selain Spreadsheet yang dibuat, Anda juga akan mendapatkan presentasi Slide baru dengan 3 slide (judul, tabel data, diagram data), seperti yang ditunjukkan di bawah:

Selamat! Sekarang Anda telah membuat aplikasi yang memanfaatkan kedua sisi Google Cloud dengan melakukan permintaan Google BigQuery yang mengkueri salah satu set data publiknya, membuat Spreadsheet Google baru untuk menyimpan hasilnya, menambahkan diagram berdasarkan data yang baru saja diambil tersebut, dan terakhir membuat presentasi Google Slide yang menampilkan hasil serta diagram dalam spreadsheet.

Itulah yang Anda lakukan secara teknis. Secara umum, Anda beralih dari analisis big data ke sesuatu yang dapat Anda presentasikan kepada pemangku kepentingan, semuanya dalam kode, semuanya otomatis. Kami harap contoh ini menginspirasi Anda untuk menggunakannya dan menyesuaikannya untuk project Anda sendiri. Di akhir codelab ini, kami akan memberikan beberapa saran tentang cara lebih meningkatkan aplikasi contoh ini.

Dengan perubahan di atas dari tugas akhir (sekali lagi kecuali PROJECT_ID), bq-sheets-slides.js Anda sekarang akan terlihat seperti berikut (dan juga ditemukan di folder final di repositori 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());
}

"File kedua" dalam codelab ini, yang merupakan file manifes Apps Script, appsscript.json, tidak berperan dalam codelab ini. Anda dapat mengaksesnya dengan membuka tab browser editor kode dan memilih View > Show manifest file dari menu di bagian atas. Kontennya kurang lebih akan seperti ini:

appsscript.json

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

File manifes adalah file konfigurasi tingkat sistem yang digunakan Apps Script untuk mengetahui lingkungan eksekusi yang tersedia untuk aplikasi Anda. Mencakup konten file manifes berada di luar cakupan codelab ini, tetapi Anda bisa mendapatkan gambaran tentang fungsinya.

Berikut adalah referensi tambahan untuk membantu Anda mempelajari lebih dalam materi yang dibahas dalam codelab ini serta mempelajari cara lain untuk mengakses alat developer Google secara terprogram. Kami berupaya menjaga codelab ini tetap sinkron dengan repo.

Referensi untuk aplikasi ini

Dokumentasi

Codelab lainnya

Pengantar

Menengah

Aplikasi referensi

Di bawah ini adalah berbagai "tantangan kode", berbagai cara untuk meningkatkan atau memperluas contoh yang kita buat dalam codelab ini. Daftar ini tentu saja tidak lengkap, tetapi akan memberikan beberapa ide inspiratif tentang langkah selanjutnya yang dapat Anda lakukan.

  • Aplikasi. Tidak ingin dibatasi dengan menggunakan JavaScript atau 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 yang berbeda untuk set data Shakespeare... mungkin temukan kueri 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... mungkin Anda akan menemukan set data yang lebih bermakna bagi Anda.
  • BigQuery. Sebelumnya, kami menyebutkan kueri lain yang dapat Anda coba terhadap karya Shakespeare atau tabel data publik lainnya, dan ingin membagikan ulang halaman web ini serta halaman ini lagi.
  • Spreadsheet. Bereksperimenlah dengan jenis Diagram lainnya.
  • Spreadsheet & BigQuery. Balikkan situasinya... mungkin Anda memiliki set data besar dalam spreadsheet di suatu tempat. Pada tahun 2016, tim BigQuery memperkenalkan fitur yang memungkinkan developer menggunakan Spreadsheet sebagai sumber data (lihat postingan blog satu dan dua untuk mengetahui informasi selengkapnya).
  • Slide. Tambahkan slide lain ke presentasi yang dibuat, seperti gambar atau aset lain yang terkait dengan analisis big data Anda. Berikut panduan untuk layanan bawaan Slide untuk membantu Anda memulai.
  • G Suite. Menemukan penggunaan untuk layanan bawaan Google atau G Suite lainnya dari Apps Script, yaitu, Gmail, Google Drive, Kalender, Dokumen, Maps, Analytics, YouTube, dll., serta layanan lanjutan lainnya. Lihat ringkasan referensi untuk layanan bawaan dan lanjutan guna mengetahui informasi selengkapnya.