Halaman ini diterjemahkan oleh Cloud Translation API.

Mengubah data besar Anda menjadi insight menggunakan Google Spreadsheet dan Slide

Ada banyak alat di luar sana yang dapat digunakan oleh data scientist untuk melakukan analisis big data, tetapi pada akhirnya, Anda masih harus membenarkan hasil tersebut untuk manajemen? Ada banyak angka di kertas atau di database yang sulit ditampilkan kepada pemangku kepentingan utama. Codelab Google Apps Script menengah ini memanfaatkan sepasang platform developer Google, G Suite dan Google Cloud Platform (GCP), untuk membantu Anda menyelesaikan tahap terakhir.

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

Motivasi/seni sebelumnya

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

Aplikasi contoh Layanan BigQuery Google Apps Script dan open source di GitHub
Aplikasi contoh yang ditampilkan di video developer Membuat slide dari data spreadsheet dan dipublikasikan di postingan blog ini
Aplikasi contoh yang ditampilkan dalam codelab Google Slide API

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

Aplikasi Node.js vs. aplikasi Apps Script
Menggunakan REST API selagi menggunakan layanan Apps Script
Menggunakan Google Drive, bukan Google Spreadsheet, sedangkan aplikasi ini menggunakan Spreadsheet, bukan Drive

Untuk codelab ini, kami ingin menyatukan sebanyak mungkin teknologi ke dalam satu aplikasi sekaligus menampilkan fitur dan API dari seluruh Google Cloud dengan cara yang lebih mirip dengan kasus penggunaan di dunia nyata. Tujuannya adalah menginspirasi Anda untuk menggunakan imajinasi dan pertimbangkan untuk memanfaatkan GCP &G Suuite untuk memecahkan masalah yang menantang 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 data besar
Cara membuat Spreadsheet Google dan mengisi data ke dalamnya
Cara membuat diagram baru di Spreadsheet
Cara mentransfer diagram dan data dari Spreadsheet ke 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 berguna, tetapi tidak diwajibkan

Bagaimana Anda akan menggunakan codelab/tutorial ini?

Baca untuk tujuan informasi, mungkin teruskan ke rekan teknis

Pelajari sebanyak mungkin dan coba sebanyak mungkin latihan

Hadir atau bekerja sangat keras, saya akan menyelesaikan seluruh codelab

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

Pemula

Menengah

Mahir

Bagaimana Anda menilai pengalaman terkait Apps Script secara khusus?

Pemula

Menengah

Mahir

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

Pemula

Menengah

Mahir

Setelah Anda mengetahui isi codelab ini, apa yang akan Anda lakukan dengan tepat?

Mengambil sampel Apps Script-BigQuery yang ada dan membuatnya berfungsi
Dari contoh tersebut, pelajari cara mengirim kueri ke BigQuery dan mendapatkan hasilnya
Membuat Spreadsheet Google dan mengisi hasil dari BigQuery ke dalamnya
Mengubah kode sedikit untuk mengubah data yang ditampilkan dan ditambahkan ke Spreadsheet
Gunakan layanan Spreadsheet dalam Apps Script untuk membuat diagram bagi data dari BigQuery
Menggunakan layanan Slide untuk membuat presentasi slide baru
Tambahkan judul dan subjudul ke slide judul default yang dibuat otomatis untuk semua slide deck baru
Buat slide baru dengan tabel data, lalu impor sel data Spreadsheet ke dalamnya
Menambahkan slide baru lain dan menambahkan diagram spreadsheet ke slide tersebut

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

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

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 Apps Script URLfetch atau Jdbc services)
Dapat menghindari penulisan kode otorisasi karena Apps Script menanganinya untuk Anda
Tidak harus menghosting aplikasi Anda—aplikasi aktif dan berjalan di server Google di cloud

CATATAN: Umumnya, ini berada di luar cakupan codelab ini untuk mengajari Anda Apps Script. Ada banyak referensi online untuk membantu Anda dalam hal ini. Dokumentasi resmi ini juga menampilkan ringkasan dengan panduan memulai, tutorial, dan video. Dan terakhir, jangan lupakan codelab pengantar Apps Script, yang harus diselesaikan sebelum memulai codelab ini.

Antarmuka Apps Script dengan teknologi Google lainnya dengan dua cara:

layanan bawaan/native
layanan lanjutan

Layanan bawaan menyediakan metode tingkat tinggi yang dapat Anda gunakan untuk mengakses data produk G Suite atau Google, atau metode utilitas lain yang bermanfaat. Layanan lanjutan hanyalah pembungkus tipis di sekitar G Suite atau Google REST API. Layanan lanjutan menyediakan cakupan penuh REST API dan sering kali dapat melakukan lebih dari sekadar layanan bawaan, tetapi memerlukan lebih banyak kerumitan kode (sekaligus tetap lebih mudah digunakan daripada REST API itu sendiri). Layanan lanjutan juga harus diaktifkan untuk project skrip sebelum digunakan.

Jika memungkinkan, developer harus memilih layanan bawaan karena lebih mudah digunakan dan melakukan tugas yang lebih berat daripada layanan lanjutan. Namun, beberapa Google API tidak memiliki layanan bawaan, jadi layanan lanjutan mungkin menjadi satu-satunya pilihan. Google BigQuery adalah salah satu contohnya... tidak ada layanan bawaan yang tersedia, namun layanan lanjutan BigQuery ada. (Lebih baik tidak dari satu layanan, bukan?) Jika Anda baru menggunakan BigQuery, ini adalah layanan GCP yang memungkinkan Anda melakukan kueri sederhana (atau kompleks) pada korpus data yang sangat besar, katakanlah dalam urutan beberapa terabyte, tetapi masih 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 ditemukan di API). Lihat dokumen untuk layanan Spreadsheet dan Slide bawaan sebelum mempelajari kode. Tentu saja ada juga dokumen untuk layanan lanjutan; di sini masing-masing untuk Spreadsheet dan Slide.

Pengantar

Kita akan menghilangkan codelab ini dengan tugas pertama ini. Bahkan, setelah Anda selesai di sini, Anda akan selesai hampir setengah dari seluruh codelab. Dibagi menjadi beberapa subbagian, Anda akan melakukan semua hal berikut:

Mulai project Google Apps Script baru
Mengaktifkan akses ke layanan lanjutan BigQuery
Buka editor pengembangan dan masukkan kode sumber aplikasi
Ikuti proses otorisasi aplikasi (OAuth2)
Menjalankan aplikasi yang mengirimkan permintaan ke BigQuery
Lihat Google Spreadsheet baru yang dibuat dengan hasil dari BigQuery

Penyiapan

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

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

c) Jika tidak satu pun di atas, layar Anda akan terlihat seperti di bawah. Jika ya, cari ikon menu hamburger di sudut kiri atas dan pilih +Skrip baru.

d) Bagi Anda yang lebih menyukai command line. Alat Anda, secara khusus adalah clasp, akan menjalankan perintah clasp create.

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

Apa pun teknik yang Anda gunakan untuk memulai project baru, intinya adalah Anda harus diarahkan ke editor kode Apps Script, layar yang terlihat seperti ini:
Klik File > Simpan dan beri nama project Anda.
Berikutnya, Anda perlu membuat project Google Cloud Console untuk menjalankan kueri BigQuery.

Buat project baru, beri nama, pilih Akun Penagihan, dan klik BUAT.

Saat pembuatan project selesai, notifikasi akan muncul di kanan atas halaman. Klik entri Create Project: <Project Name> untuk membuka project.
Klik ikon menu di kiri atas dan buka API & Services > Credentials. Klik tab Layar persetujuan OAuth (link langsung).
Di kolom Application name, masukkan "Big Data Codelab" lalu klik tombol Simpan di bagian bawah.
Klik ikon tiga titik di kanan atas untuk meluaskan menu dan pilih Setelan project (link langsung).
Salin nilai yang tercantum di bagian Nomor project. (Ada kolom ID Produk terpisah yang akan kita gunakan nanti di codelab.)
Kembali ke App Script Editor, klik Resource > Cloud Platform project.
Masukkan nomor project ke dalam kotak teks, lalu klik Tetapkan Project. Saat diminta, klik Konfirmasi.
Setelah selesai, klik tombol Tutup untuk menutup dialog.
Setelah memiliki penyiapan project baru, Anda harus mengaktifkan layanan lanjutan BigQuery, jadi tarik Resource -> Advanced Google Services dan alihkan ke bit untuk BigQuery API.
Catatan di bagian bawah status, "Layanan ini juga harus diaktifkan di "Dasbor API Google Cloud Platform", jadi klik link tersebut yang akan membuka tab browser lain ke konsol developer atau "devconsole" singkatnya.
Di devconsole, klik tombol +Enable APIs and Services di bagian atas, telusuri "bigquery", pilih BigQuery API (bukan BigQuery Data Transfer API), dan klik aktifkan untuk mengaktifkannya. Biarkan tab browser ini 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.
Kembali ke tab browser editor kode, Anda masih berada di menu Advanced Google Services, jadi klik OK untuk menutup dialog, tanpa mengubah Anda di editor kode. Klik nama project di bagian atas, dan beri nama apa pun yang Anda suka, "demo BigQuery" atau yang serupa—kami menamainya "mil terakhir".

Sekarang Anda siap untuk memasukkan kode aplikasi, menjalani proses otorisasi, dan mendapatkan inkarnasi pertama untuk aplikasi ini.

Mengupload aplikasi dan menjalankannya

Salin kode dalam kotak di bawah ini dan tempelkan semua yang ada di editor kode dengan kode tersebut:

// 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 kegunaan kode ini? Kami telah memberi tahu Anda bahwa alat tersebut membuat kueri BigQuery dan menulis hasilnya ke dalam Spreadsheet Google baru, tetapi apa ini kueri? 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, bagian dari set data publik BigQuery, dan membuat 10 kata teratas yang paling sering muncul di semua karyanya, yang diurutkan dalam urutan popularitas menurun. Bayangkan betapa (tidak) menyenangkannya melakukan ini dengan tangan, dan Anda harus memiliki ide tentang seberapa bermanfaat BigQuery.

Kami hampir siap tetapi belum siap untuk mencobanya. Seperti yang Anda lihat di dekat bagian atas cuplikan kode ini, diperlukan project ID yang valid sehingga kita harus menambahkan project Anda ke kode aplikasi. Untuk melakukannya, kembali ke jendela browser atau tab yang memiliki halaman konsol developer. (Kami meminta Anda membiarkannya terbuka, ingat?)
Di bagian atas di sebelah kiri avatar akun Google, terdapat pemilih menu pull-down (). Klik ikon tersebut 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 melekat dan tidak dapat dioperasikan, muat ulang halaman.
Pernyataan if tersedia untuk mencegah aplikasi bertindak lebih jauh tanpa menerapkan project ID. Setelah menambahkan milik Anda, menyimpan file, dan menjalankan kode dengan membuka panel menu 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:
Setelah meminta untuk meninjau izin, Anda akan melihat dialog baru, seperti yang ditunjukkan di atas. Pilih akun Google yang tepat 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 mengapa layar ini berada di antara Anda dan dialog otorisasi OAuth2 di bawah.)

CATATAN: Setelah Anda memberi otorisasi aplikasi, setelah tidak perlu mengulangi proses ini dengan setiap eksekusi. Tidak sampai Anda ke Tugas 3 lebih lanjut dalam tutorial ini, Anda melihat layar dialog ini lagi, yang meminta izin pengguna untuk membuat dan mengelola presentasi Google Slide.
Setelah mengklik Allow di jendela dialog OAuth2, skrip akan mulai berjalan... Anda akan melihat dialog kuning pastel di bagian atas. Aplikasi ini berjalan cukup cepat, sehingga Anda mungkin tidak menyadari bahwa iklan tersebut berjalan atau eksekusinya telah selesai.
Dialog itu akan menghilang setelah selesai. Jadi, jika Anda tidak melihatnya, dialog tersebut mungkin sudah selesai, jadi buka Google Drive (drive.google.com) dan cari Spreadsheet Google baru bernama "Kata-kata paling umum di semua karya Shakespeare" atau apa pun yang Anda tetapkan ke variabel QUERY_NAME:
Buka spreadsheet, dan Anda akan melihat 10 baris kata dan jumlah totalnya diurutkan dalam urutan menurun:

Ringkasan Tugas 1

Kenali apa yang baru saja terjadi... Anda menjalankan beberapa kode yang mengkueri semua karya Shakespeare (bukan jumlah data BESAR, tetapi tentu saja lebih banyak teks daripada yang dapat Anda pindai sendiri dengan mudah melihat setiap kata dalam setiap permainan, mengelola sejumlah kata seperti itu, lalu mengurutkannya dalam urutan menurun. Anda tidak hanya meminta BigQuery untuk melakukan hal ini atas nama Anda, tetapi Anda juga dapat menggunakan layanan bawaan di Apps Script untuk Google Spreadsheet guna menempatkan data ini di sana agar dapat digunakan dengan mudah.

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

Jika tertarik dengan kueri lain, Anda dapat mencoba karya Shakespeare atau tabel data publik lainnya, lihat halaman web ini dan halaman ini. Terlepas dari 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 kami 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 lebih awal, berikut link ke clasp dan cara menggunakannya.)

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

Buat diagram. Tambahkan isi createColumnChart() yang ditampilkan di bawah ke bq-sheets-slides.js tepat setelah runQuery(). Mengambil sheet berisi data dan meminta diagram kolom yang berisi 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);
}

Kembalikan 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, tampilkan 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;
}

Mengemudi fungsi createBigQueryPresentation(). Memisahkan fungsi BigQuery dan pembuatan diagram secara logis adalah ide bagus. Sekarang mari kita buat fungsi createBigQueryPresentation() untuk mendorong aplikasi, 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);
}

Menjadikan kode lebih dapat digunakan kembali. Anda melakukan 2 langkah penting di atas: mengembalikan objek spreadsheet dan membuat fungsi mengemudi. Bagaimana jika seorang kolega ingin menggunakan kembali runQuery() dan tidak ingin URL tersebut dicatat dalam log? Agar runQuery() lebih mudah dipahami untuk penggunaan umum, kita harus memindahkan baris log tersebut. Tempat terbaik untuk memindahkannya? Jika Anda menebak createBigQueryPresentation(), Anda benar! Setelah memindahkan baris log, 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 seharusnya terlihat seperti berikut (dan juga ditemukan di folder step2 repo 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 naik di 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 mencakup pembuatan presentasi Google Slide baru, mengisi judul dan subtitel pada slide judul, lalu menambahkan 2 slide baru, satu untuk setiap sel data dan satu lagi untuk diagram.

Buat dek slide. Semua pekerjaan di dek slide akan berlangsung di createSlidePresentation() yang akan kita tambahkan ke bq-sheets-slides.js tepat setelah createColumnChart(). Mari mulai dengan pembuatan deretan slide baru, lalu tambahkan 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');

Tambahkan tabel data. Langkah berikutnya di createSlidePresentation() adalah mengimpor data sel dari Spreadsheet Google ke dek slide 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]));
    }
  }

Impor diagram. Langkah terakhir dalam createSlidePresentation() adalah membuat satu slide lagi, mengimpor diagram dari spreadsheet, dan menampilkan objek Presentation. Tambahkan cuplikan final 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;
}

Diagram kembali. Setelah fungsi akhir kita selesai, lihat kembali tanda tangannya. Ya, createSlidePresentation() memerlukan spreadsheet dan objek diagram. Kita telah menyesuaikan runQuery() untuk menampilkan objek Spreadsheet, tetapi sekarang kita perlu membuat perubahan serupa pada createColumnChart() untuk menampilkan objek diagram (EmbeddedChart). Kembali ke aplikasi Anda untuk memasukkan kode guna menambahkan satu baris terakhir di akhir createColumnChart() untuk melakukannya:

  // NEW: Return chart object for later use
  return chart;
}

Perbarui createBigQueryPresentation(). Karena createColumnChart() menampilkan diagram, kita harus menyimpan diagram tersebut ke variabel, lalu meneruskan spreadsheet dan diagram ke createSlidePresentation(). Karena kita mencatat log spreadsheet yang baru saja dibuat, kita juga akan mencatat URL presentasi slide baru ke dalam log. 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
}

Simpan dan jalankan createBigQueryPresentation() lagi. Sebelum dijalankan, kenali bahwa aplikasi Anda sekarang memerlukan satu set izin lagi dari pengguna untuk melihat dan mengelola presentasi Google Slide. Setelah Anda memberikan izin ini, izin tersebut akan berjalan seperti sebelumnya.
Sekarang 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! Anda kini telah membuat aplikasi yang memanfaatkan kedua sisi Google Cloud dengan melakukan permintaan Google BigQuery yang membuat kueri salah satu set data publiknya, membuat Spreadsheet Google baru untuk menyimpan hasilnya, menambahkan diagram berdasarkan data yang baru diambil, dan terakhir membuat presentasi Google Slide yang menampilkan hasil serta diagram di spreadsheet.

Itulah yang Anda lakukan secara teknis. Secara garis besar, Anda telah beralih dari analisis data besar ke hal-hal yang dapat dipresentasikan kepada pemangku kepentingan, semuanya dalam kode, semuanya otomatis. Kami harap contoh ini dapat menginspirasi Anda untuk mempelajarinya dan menyesuaikannya untuk project Anda sendiri. Di akhir codelab ini, kami akan memberikan beberapa saran tentang cara meningkatkan kualitas aplikasi contoh ini.

Dengan perubahan di atas dari tugas akhir (sekali lagi kecuali untuk PROJECT_ID), bq-sheets-slides.js Anda sekarang seharusnya terlihat seperti berikut (dan juga ditemukan di folder final dalam repo GitHub):

bq-sheet-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());
}

Tidak ada peran dalam codelab ini adalah file "file kedua" dalam codelab ini, yang merupakan file manifes Apps Script, appsscript.json. Anda dapat mengaksesnya dengan membuka tab browser editor kode dan memilih Lihat > Tampilkan file manifes dari menu di bagian atas. Konten akan terlihat seperti ini:

aplikasiskrip.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 dapat memahami fungsinya.

Di bawah ini adalah referensi tambahan untuk membantu Anda menggali lebih dalam materi yang dibahas dalam codelab ini serta mengeksplorasi cara lain untuk mengakses alat developer Google secara terprogram. Kami bertujuan agar codelab ini tetap sinkron dengan repo.

Referensi untuk aplikasi ini

Link codelab ini: g.co/codelabs/bigquery-sheets-slides
Kode sumber repo
Postingan blog video (dan) developer
sesi Google Cloud NEXT '18

Dokumentasi

Situs dokumentasi Apps Script Google
Layanan spreadsheet Apps Script
Layanan Slide Apps Script
Layanan lanjutan BigQuery Apps Script

Rahasia Google (Aplikasi) lain? (Video pengantar Apps Script)
Mengakses Google Maps dari spreadsheet?!? (video)
Koleksi video Google Apps Script
Seri video Launchpad Online (pendahulu dari...)
serial video G Suite Dev Show

Konektor data Google Spreadsheet untuk BigQuery (pengumuman)
Google BigQuery terintegrasi dengan Google Drive (link1, link2)
Blog Developer Google
Blog Google Cloud Platform
Blog Big Data & Machine Learning
Google Twitter Twitter (@GoogleDevs)
Blog developer G Suite
Developer G Suite Twitter (@googleworkspace)
Newsletter bulanan developer G Suite

Codelab lainnya

Pengantar

[REST API] G Suite & Google API (Drive API)
[App Maker] Membuat aplikasi web Database di App Maker

Menengah

[Apps Script] Alat command line CLASP Apps Script
[Apps Script] Add-on Gmail
[Apps Script] Add-on Dokumen & GCP Natural Language API
[Apps Script] Framework bot Hangouts Chat
[REST API] Alat pelaporan kustom (Spreadsheet API)
[REST API] Generator slide kustom untuk penganalisis BigQuery lisensi GitHub (Slide+BigQuery API)

Aplikasi referensi

Pengonversi Markdown-ke-Google Slides (Slide API)

Di bawah ini adalah berbagai "tantangan kode," berbagai cara untuk menyempurnakan atau meningkatkan kualitas sampel yang kami buat di codelab ini. Daftar ini tentu saja tidak lengkap tetapi harus memberikan beberapa ide inspiratif tentang tempat Anda dapat mengambil langkah berikutnya.

Aplikasi. Tidak ingin dibatasi dengan menggunakan JavaScript atau pembatasan yang diberlakukan oleh Apps Script? Transfer aplikasi ini ke bahasa pemrograman favorit Anda yang menggunakan REST API untuk Google BigQuery, Spreadsheet, dan Slide.
BigQuery. Bereksperimen dengan kueri yang berbeda untuk set data Shakespeare... mungkin menemukan kueri yang menarik bagi Anda. Contoh kueri lainnya dapat ditemukan di aplikasi contoh BigQuery Apps Script asli.
BigQuery. Lakukan eksperimen dengan beberapa set data publik BigQuery lainnya... mungkin temukan set data yang mungkin 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 yang satu ini lagi.
Spreadsheet. Lakukan eksperimen dengan jenis Diagram lainnya.
Spreadsheet &BigQuery. Memutar tabel... mungkin Anda memiliki set data dalam jumlah besar di 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 informasi selengkapnya).
Slide. Tambahkan slide lain ke presentasi yang dibuat, seperti gambar atau aset lain yang terkait dengan analisis big data Anda. Berikut panduan layanan bawaan Slide untuk membantu Anda memulai.
G Suite. Temukan penggunaan untuk layanan G Suite atau layanan bawaan Google 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 untuk informasi selengkapnya.

Mengubah data besar Anda menjadi insight menggunakan Google Spreadsheet dan Slide Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.

Motivasi/seni sebelumnya

Yang akan Anda pelajari

Yang Anda butuhkan

Bagaimana Anda akan menggunakan codelab/tutorial ini?

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

Bagaimana Anda menilai pengalaman terkait Apps Script secara khusus?

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

Google Apps Script dan BigQuery

Mengakses Google Spreadsheet & Slide dari Apps Script

Pengantar

Penyiapan

Mengupload aplikasi dan menjalankannya

Ringkasan Tugas 1

bq-sheet-slides.js

aplikasiskrip.json

Referensi untuk aplikasi ini

Dokumentasi

Video terkait dan umum

Pembaruan terkait &umum berita &

Codelab lainnya

Pengantar

Menengah

Aplikasi referensi

Mengubah data besar Anda menjadi insight menggunakan Google Spreadsheet dan Slide