Praktik langsung dengan Google Apps Script: Mengakses Google Spreadsheet, Maps, dan Gmail dalam 4 baris kode!

1. Pengantar Google Apps Script

Dalam codelab ini, kami akan memperkenalkan salah satu cara termudah untuk menulis kode yang mengakses teknologi developer Google. Semuanya dilakukan dengan menerapkan JavaScript, bahasa pengembangan web utama. Dengan menggunakan Google Apps Script, Anda akan menulis kode untuk mengekstrak alamat jalan dari sel di Spreadsheet Google, membuat Google Maps berdasarkan alamat tersebut, lalu mengirimkan peta sebagai lampiran menggunakan Gmail. Bagian terbaiknya? Hanya akan ada empat baris kode.

Yang akan Anda pelajari

  • Cara menggunakan Google Apps Script dengan berbagai layanan Google, seperti Google Spreadsheet, Google Maps, dan Gmail.
  • Mengembangkan kode menggunakan editor dalam browser untuk Apps Script.

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

2. Survei

Bagaimana Anda akan menggunakan codelab/tutorial ini?

Hanya membacanya Membacanya dan menyelesaikan latihan

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

Pemula Menengah Mahir

3. Ringkasan

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

  1. Pelajari sedikit tentang Apps Script, yang didasarkan pada JavaScript.
  2. Buat spreadsheet Google Spreadsheet.
  3. Masukkan alamat di sel kiri atas spreadsheet (A1).
  4. Pelajari cara membuka editor Apps Script untuk dokumen apa pun.
  5. Edit, simpan, dan jalankan kode Apps Script.
  6. Gunakan Gmail untuk melihat hasilnya.

Mari kita mulai.

Apa itu Google Apps Script?

Google Apps Script adalah platform pengembangan yang mempercepat dan mempermudah pembuatan skrip dan aplikasi kecil yang terintegrasi dengan Google Workspace. Dengan Apps Script, Anda:

  • Menulis kode di JavaScript dan mengakses library bawaan untuk aplikasi Google Workspace seperti Gmail, Kalender, Drive, dll.
  • Tidak perlu menginstal apa pun—kami memberi Anda editor kode langsung di browser, dan skrip Anda berjalan di server Google.
  • Tidak perlu mengkhawatirkan topik yang rumit seperti izin keamanan dan akses data, karena platform menanganinya untuk Anda.

Apps Script dapat digunakan untuk membuat berbagai aplikasi, mulai dari bot chat hingga aplikasi web. Salah satu penggunaan yang paling populer adalah untuk memperluas fungsi spreadsheet Google Spreadsheet. Di bagian selanjutnya dari codelab ini, Anda akan mempelajari cara menggunakan Apps Script untuk mengambil data dari spreadsheet dan menghubungkannya ke layanan Google lainnya.

4. Membuat Spreadsheet Google & memasukkan alamat

Di Spreadsheet Google baru, masukkan alamat yang valid dengan mengikuti petunjuk berikut:

  1. Buat Spreadsheet Google menggunakan link praktis ini (sheets.google.com/create). Atau, buka Google Drive Anda (drive.google.com), lalu klik Baru > Google Spreadsheet > Spreadsheet kosong

413a93e5b2f6b3d4.png

  1. Di spreadsheet kosong, buka sel pertama di sudut kiri atas (A1). yaitu di kolom A dan baris 1. Jika perlu mempelajari kembali, Anda dapat melihat deskripsi notasi A1 ini.
  2. Masukkan alamat jalan yang valid di sel. Pilih alamat di dunia dengan lokasi yang tepat menggunakan alamat jalan, kode pos, atau kombinasi kota dan negara bagian/provinsi. Berikut adalah contoh alamat di New York City:

7077e446455639df.png

Hanya itu yang perlu Anda lakukan di spreadsheet. Mari buka editor dan tulis beberapa kode.

5. Mengedit kode Apps Script

Setelah Anda memiliki Google Spreadsheet baru, saatnya mengedit skrip terikatnya. Ikuti petunjuk berikut:

Membuka editor skrip

Di panel menu, pilih Ekstensi > Apps Script untuk membuka editor kode browser untuk Apps Script.

Di tab browser baru, editor kode akan menampilkan skrip terikat ke penampung default untuk sheet. Fungsi default bernama myFunction() otomatis dibuat dan kursor Anda ditempatkan di dalam fungsi sehingga Anda dapat mulai.

Mengirimkan email berisi Peta Google dari alamat tersebut

Kode "template" yang diberikan kepada Anda kosong, jadi mari kita ganti dengan aplikasi kita.

  1. Di editor skrip, ganti blok kode myFunction() default dengan kode berikut:
/** @OnlyCurrentDoc */
function sendMap() {
  var sheet = SpreadsheetApp.getActiveSheet();
  var address = sheet.getRange('A1').getValue();
  var map = Maps.newStaticMap().addMarker(address);
  GmailApp.sendEmail('YOUR_EMAIL_ADDR', 'Map', 'See below.', {attachments:[map]});
}
  1. Ganti alamat email placeholder ('YOUR_EMAIL_ADDR') dengan alamat email yang valid. Misalnya, friend@example.com.
  2. Untuk menyimpan skrip, klik Simpan simpan.
  3. Untuk mengganti nama project Apps Script, klik Project tanpa judul, masukkan judul untuk project Anda, lalu klik Ganti nama.

Peninjauan kode

Mari kita tinjau 4 baris fungsi sendMap() yang membentuk seluruh aplikasi. Menariknya, kode tersebut mereferensikan 3 produk Google yang berbeda.

Baris pertama adalah komentar anotasi yang memengaruhi otorisasi:

/** @OnlyCurrentDoc */

Sebagian besar skrip meminta beberapa izin pengguna sebelum dapat dijalankan. Izin ini mengontrol tindakan yang diizinkan pengguna untuk dilakukan oleh skrip. Baris pertama adalah komentar yang berisi anotasi opsional yang menginstruksikan Apps Script untuk membatasi akses ke spreadsheet saat ini (bukan semua spreadsheet pengguna). Praktik terbaiknya adalah selalu menyertakan anotasi ini saat Anda hanya menggunakan satu file.

Kode ini menggunakan deklarasi fungsi JavaScript normal untuk sendMap():

function sendMap() {

Baris berikutnya memanggil Spreadsheet Service yang dapat diakses dari Apps Script melalui objek SpreadsheetApp. Spreadsheet yang dihasilkan dikirimkan ke variabel yang bernama sama. Metode getActiveSheet() mendapatkan referensi ke objek sheet saat ini dan menyimpannya dalam variabel sheet.

  var sheet = SpreadsheetApp.getActiveSheet();

Dengan objek sheet, kita mereferensikan rentang sel (untuk satu sel) dalam notasi A1 dengan getRange(). "Rentang" adalah sekelompok sel, termasuk sel tunggal seperti sel A1 (tempat kita memasukkan alamat). Untuk mengambil apa yang ada di dalam rentang, metode getValue() menampilkan nilai sel kiri atas dalam rentang dan menetapkan nilai ke variabel address. Anda juga dapat mencoba menambahkan lebih banyak alamat dan membaca dari sel lain.

  var address = sheet.getRange('A1').getValue();

Baris kode ketiga terhubung ke Maps Service Google menggunakan objek Maps. newStaticMap() membuat objek peta statis dan metode addMarker() menambahkan "pin" ke peta menggunakan alamat di sheet.

  var map = Maps.newStaticMap().addMarker(address);

Terakhir, Gmail Service melalui objek MailApp memanggil metode sendEmail() untuk mengirim email yang menyertakan teks "See below" dan gambar peta sebagai lampiran.

  GmailApp.sendEmail('friend@example.com', 'Map', 'See below.', {attachments:[map]});
}

6. Menjalankan aplikasi Google Spreadsheet, Maps, dan Gmail

Setelah diberi nama dan disimpan, saatnya menjalankan fungsi. Di bagian atas editor, pastikan sendMap() dipilih dari daftar fungsi, lalu klik Run.

Fitur Apps Script yang disukai developer adalah Anda tidak perlu menulis kode otorisasi yang memberikan akses program ke data pengguna. Meskipun Apps Script mengelola hal ini, pengguna aplikasi Anda tetap perlu memberikan izin kepada skrip untuk mengakses spreadsheet mereka dan mengirim email melalui Gmail. Dialog otorisasi pertama terlihat seperti ini:

ba6e1a798e404e0d.png

Klik Tinjau izin untuk melanjutkan.

Selanjutnya, Anda akan mendapatkan jendela dialog OAuth2 yang meminta izin untuk mengakses spreadsheet Anda dan mengirim email atas nama Anda:

9bed7ef1ccbd7569.png

Setelah Anda memberikan izin, skrip akan berjalan hingga selesai.

Periksa akun email tempat Anda mengirim pesan, dan Anda akan menemukan email dengan "Map" sebagai subjek dan pesan yang terlihat seperti ini:

51f61fc51a13d28f.png

Saat Anda membuka lampiran dalam pesan email, Anda akan mendapatkan Google Maps dengan pin di alamat yang Anda masukkan ke dalam spreadsheet:

739bb45b75e3f7c7.png

Hanya dengan empat baris kode, Anda mengakses 3 produk Google yang berbeda dengan cara yang bermakna.

7. Referensi lainnya

Kode yang ditampilkan dalam codelab ini juga tersedia di repo GitHub-nya di github.com/googleworkspace/apps-script-intro-codelab. 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.

Dokumentasi

Video

Berita & info terbaru

Codelab lainnya

Pengantar

Menengah

Aplikasi referensi