Tutorial API Untuk Pemula Dengan Skrip Google Sheets & Apps

Dalam tutorial API ini untuk pemula, Anda akan belajar cara menyambung ke API menggunakan Google Apps Script, untuk mengambil data dari pihak ketiga dan menampilkannya di Google Sheet Anda.

Contoh 1 menunjukkan kepada Anda cara menggunakan Google Apps Script untuk terhubung ke API sederhana untuk mengambil beberapa data dan menunjukkannya di Google Sheets:

Tutorial API untuk pemula: Fakta matematika acak dari Numbers API di Google Sheet

Dalam Contoh 2, kami akan menggunakan Google Apps Script untuk membuat aplikasi penemuan musik menggunakan iTunes API:

API iTunes dengan Google Sheets

Akhirnya, dalam contoh 3, saya akan meninggalkan Anda untuk membangun aplikasi penjelajah data Star Wars, dengan beberapa petunjuk:

Penjelajah Star Wars API di Google Sheets menggunakan Google Apps Script

Tutorial API untuk pemula: apa itu API?

Anda mungkin pernah mendengar istilah API sebelumnya. Mungkin Anda pernah mendengar bagaimana perusahaan teknologi menggunakannya ketika mereka menyalurkan data di antara aplikasi mereka. Atau bagaimana perusahaan membangun sistem kompleks dari banyak layanan mikro kecil yang dihubungkan oleh API, dan bukan sebagai program monolitik tunggal saat ini.

API adalah singkatan dari “Application Program Interface”, dan istilah ini biasanya merujuk pada URL web yang dapat digunakan untuk mengakses data mentah. Pada dasarnya, API adalah antarmuka yang menyediakan data mentah bagi publik untuk digunakan (walaupun banyak yang memerlukan beberapa bentuk otentikasi).

Sebagai pengembang perangkat lunak pihak ketiga, kita dapat mengakses API organisasi dan menggunakan datanya dalam aplikasi kita sendiri.

Berita baiknya adalah ada banyak API sederhana di luar sana, yang bisa kita hilangkan. Kita akan melihat mereka bertiga di tutorial api pemula ini.

Kami dapat menghubungkan Google Sheet ke API dan membawa data kembali dari API tersebut (mis. ITunes) ke Google Sheet kami menggunakan Google Apps Script. Sangat menyenangkan dan sangat memuaskan jika Anda baru di dunia ini.

Tutorial API untuk pemula: apa itu Script Aplikasi?

Dalam tutorial API ini untuk pemula, kami akan menggunakan Google Apps Script untuk terhubung ke API eksternal.

Google Apps Script adalah bahasa scripting berbasis Javascript yang di-host dan dijalankan di server Google, yang memperluas fungsionalitas Google Apps.

Jika Anda belum pernah menggunakannya sebelumnya, lihat posting saya: Google Apps Script: A Beginner’s Guide

Contoh 1: Menghubungkan Google Sheets ke Numbers Numbers

Kita akan mulai dengan sesuatu yang super sederhana dalam tutorial api pemula ini, sehingga Anda dapat fokus pada data dan tidak tersesat dalam garis dan garis kode.

Mari kita menulis sebuah program pendek yang memanggil API Angkadan meminta fakta matematika dasar.

Langkah 1: Buka Lembar baru

Buka Google Sheet kosong baru dan ganti namanya: Numbers API Example

Langkah 2: Buka editor Skrip Aplikasi

Navigasi ke Tools > Script Editor...

Akses editor skrip melalui bilah alat

Langkah 3: Beri nama proyek Anda

Tab baru terbuka dan di sinilah kami akan menulis kode kami. Beri nama proyek: Nomor API Contoh

Langkah 4: Tambahkan kode contoh API

Hapus semua kode yang saat ini ada dalam file Code.gs, dan ganti dengan ini:

function callNumbers () {
  
  // Panggil API Angka untuk fakta matematika acak
  var response = UrlFetchApp.fetch ("http://numbersapi.com/random/math");
  Logger.log (response.getContentText ());
  
}

Kami menggunakan kelas UrlFetchApp untuk berkomunikasi dengan aplikasi lain di internet untuk mengakses sumber daya, untuk mengambil URL.

Sekarang jendela kode Anda akan terlihat seperti ini:

Kode API Angka Google Apps Script

Langkah 5: Jalankan fungsi Anda

Jalankan fungsi dengan mengeklik tombol putar di bilah alat:

Jalankan tombol Aplikasi Script

Langkah 6: Otorisasi skrip Anda

Ini akan meminta Anda untuk mengesahkan skrip Anda untuk terhubung ke layanan eksternal. Klik “Tinjau Izin” dan kemudian “Izinkan” untuk melanjutkan.

Izin Tinjauan Skrip Aplikasi
Otorisasi Script Aplikasi

Langkah 7: Lihat log

Selamat, program Anda sekarang telah berjalan. Ini mengirim permintaan ke pihak ketiga untuk beberapa data (dalam hal ini fakta matematika acak) dan layanan itu telah merespons dengan data itu.

Tapi tunggu, dimana itu? Bagaimana kita melihat data itu?

Anda akan melihat baris 5 dari kode kami di atas Logger.log(....)yang berarti bahwa kami telah mencatat teks respons dalam file log kami.

Jadi mari kita periksa.

Pergi ke Lihat> Log:

Lihat log skrip aplikasi

Anda akan melihat jawaban Anda (tentu saja Anda mungkin memiliki fakta yang berbeda):

[17-02-03 08:52:41:236 PST] 1158 is the maximum number of pieces a torus can be cut into with 18 cuts.

yang terlihat seperti ini di jendela sembulan:

Output logger skrip aplikasi

Bagus! Coba jalankan beberapa kali, periksa log dan Anda akan melihat fakta yang berbeda.

Selanjutnya, coba ubah URL ke contoh ini untuk melihat beberapa data berbeda dalam respons:

http://numbersapi.com/random/trivia

http://numbersapi.com/4/17/date

http://numbersapi.com/1729

Anda juga dapat menjatuhkan ini langsung ke browser Anda jika Anda ingin bermain-main dengannya. Info lebih lanjut di halaman Numbers API .

Jadi, bagaimana jika kita ingin mencetak hasilnya ke spreadsheet kita?

Yah, itu cukup mudah.

Langkah 8: Tambahkan data ke Sheet

Tambahkan beberapa baris kode ini (baris 7, 8 dan 9) di bawah kode yang ada:

function callNumbers () {
  
  // Panggil API Angka untuk fakta matematika acak
  var response = UrlFetchApp.fetch ("http://numbersapi.com/random/math");
  Logger.log (response.getContentText ());
  
  var fact = response.getContentText ();
  var sheet = SpreadsheetApp.getActiveSheet ();
  sheet.getRange (1,1) .setValue ([fakta]);
  
}

Baris 7 hanya menetapkan teks respons (data kami) ke variabel yang dipanggil fact, sehingga kami dapat merujuknya menggunakan nama itu.

Baris 8 mengambil lembar aktif kami saat ini (Lembar1 Angka API spreadsheet Contoh) dan menetapkannya ke variabel yang dipanggil sheet, sehingga kami dapat mengaksesnya menggunakan nama itu.

Akhirnya di baris 9 , kita mendapatkan sel A1 (kisaran 1,1) dan mengatur nilai dalam sel itu sama dengan variabel fact, yang menampung teks respons.

Langkah 9: Jalankan & otorisasi ulang

Jalankan program Anda lagi. Anda akan diminta untuk mengizinkan skrip Anda melihat dan mengelola spreadsheet Anda di Google Drive, jadi klik Izinkan:

Izin Tinjauan Skrip Aplikasi
Otorisasi spreadsheet skrip aplikasi

Langkah 10: Lihat data eksternal di Lembar Anda

Anda sekarang seharusnya mendapatkan fakta acak muncul di Google Sheet Anda:

Fakta matematika acak dari Numbers API di Google Sheet

Betapa kerennya itu!

Untuk merangkum kemajuan kami sejauh ini dalam Tutorial API untuk Pemula ini: Kami telah meminta data dari layanan pihak ketiga di internet. Layanan itu telah menjawab dengan data yang kami inginkan dan sekarang kami telah menampilkannya ke dalam Lembar Google kami!

Langkah 11: Menyalin data ke sel baru

Script seperti yang tertulis akan selalu menimpa sel A1 dengan fakta baru Anda setiap kali Anda menjalankan program. Jika Anda ingin membuat daftar dan terus menambahkan fakta baru di bawah yang sudah ada, maka buat perubahan kecil ini ke baris 9 dari kode Anda (diperlihatkan di bawah), untuk menulis jawabannya di baris kosong pertama:

function callNumbers () {
  
  // Panggil API Angka untuk fakta matematika acak
  var response = UrlFetchApp.fetch ("http://numbersapi.com/random/math");
  Logger.log (response.getContentText ());
  
  var fact = response.getContentText ();
  var sheet = SpreadsheetApp.getActiveSheet ();
  sheet.getRange (sheet.getLastRow () + 1,1) .setValue ([fakta]);
  
}

Output Anda sekarang akan terlihat seperti ini:

Fakta matematika acak dari Numbers API di Google Sheet

Satu hal terakhir yang mungkin ingin kita lakukan dengan aplikasi ini adalah menambahkan menu ke Google Sheet kita, sehingga kita dapat menjalankan skrip dari sana daripada jendela editor skrip. Bagus dan mudah!

Langkah 12: Tambahkan kode untuk menu khusus

Tambahkan kode berikut di editor skrip Anda:

function onOpen () {
  var ui = SpreadsheetApp.getUi ();
  ui.createMenu ('Menu API Angka Khusus')
      .addItem ('Tampilkan fakta nomor acak', 'nomor panggilan')
      .addToUi ();
}

Kode akhir Anda untuk skrip API Angka sekarang harus cocok dengan kode ini di GitHub .

Langkah 13: Tambahkan menu kustom

Jalankan fungsi onOpen, yang akan menambahkan menu ke spreadsheet. Kita hanya perlu melakukan langkah ini sekali saja.

Tambahkan menu skrip aplikasi khusus

Langkah 14: Jalankan skrip Anda dari menu khusus

Gunakan menu baru untuk menjalankan skrip Anda dari Google Sheet dan saksikan sembulan fakta acak di Google Sheet Anda!

Gunakan menu skrip aplikasi khusus

Baiklah, siap mencoba sesuatu yang sedikit lebih keras?

Mari kita buat sendiri aplikasi penemuan musik di Google Sheets.

Contoh 2: Aplikasi Music Discovery menggunakan iTunes API

Aplikasi ini mengambil nama artis dari Google Sheet, mengirimkan permintaan ke iTunes API untuk mengambil informasi tentang artis itu dan mengembalikannya. Ini kemudian menampilkan album, judul lagu, karya seni dan bahkan menambahkan tautan ke sampel trek itu:

Google Sheets dan iTunes API menggunakan Apps Script

Ini sebenarnya tidak sesulit kelihatannya.

Memulai dengan iTunes API Explorer

Mulai dengan Google Sheet kosong, beri nama “iTunes API Explorer” dan buka editor Google Apps Script.

Kosongkan kode Skrip Google Apps yang ada dan tempelkan dalam kode ini untuk memulai dengan:

function calliTunes () {
  
  // Panggil API iTunes
  var response = UrlFetchApp.fetch ("https://itunes.apple.com/search?term=coldplay");
  Logger.log (response.getContentText ());
}

Jalankan program dan terima izin yang diperlukan. Anda akan mendapatkan output seperti ini:

Output iTunes API

Woah, ada lebih banyak data yang dikembalikan kali ini sehingga kita perlu menyaringnya untuk mengekstrak bit yang kita inginkan.

Parsing data iTunes

Jadi coba ini. Perbarui kode Anda untuk mengurai data dan mengeluarkan bit informasi tertentu:

function calliTunes () {
  
  // Panggil API iTunes
  var response = UrlFetchApp.fetch ("https://itunes.apple.com/search?term=coldplay");
  
  // Pisahkan balasan JSON
  var json = response.getContentText ();
  var data = JSON.parse (json);
  
  Logger.log (data);
  Logger.log (data ["hasil"]);
  Logger.log (data ["hasil"] [0]);
  Logger.log (data ["hasil"] [0] ["artistName"]);
  Logger.log (data ["hasil"] [0] ["collectionName"]);
  Logger.log (data ["hasil"] [0] ["artworkUrl60"]);
  Logger.log (data ["hasil"] [0] ["previewUrl"]);
  
}

Baris 4: Kami mengirim permintaan ke iTunes API untuk mencari data Coldplay. API merespons dengan data itu dan kami menugaskannya ke variabel yang disebut respons, sehingga kami dapat menggunakan nama itu untuk merujuknya.

Baris 7 dan 8: Kami mengeluarkan teks konteks dari data respons dan kemudian menguraikan respons string JSON untuk mendapatkan representasi objek asli. Ini memungkinkan kita untuk mengekstrak bit data yang berbeda.

Jadi, pertama-tama melihat objek data ( baris 10 ):

Paket data api iTunes

Anda dapat melihatnya sebagai objek dengan kurung kurawal di awal {

Strukturnya seperti ini:

{
resultCount = 50,
results = [ ....the data we're after... ]
}

Paket data api iTunes

Baris 11: kami mengekstrak “hasil”, yang merupakan potongan data yang berisi informasi artis dan lagu, menggunakan:

data["results"]

Baris 12: Ada beberapa album yang dikembalikan untuk artis ini, jadi kami ambil yang pertama menggunakan referensi [0] karena indeks dimulai dari 0:

data["results"][0]

Ini menunjukkan semua informasi yang tersedia dari iTunes API untuk artis dan album ini:

Hasil iTunes api data

Baris 13 – 16 : Di dalam bagian data ini, kita dapat mengekstrak detail spesifik yang kita inginkan dengan merujuk pada namanya:

misalnya data["results"][0]["collectionName"]

untuk memberikan output berikut:

Detail iTunes api

Gunakan komentar (“//” di awal baris) untuk menghentikan Logger agar tidak mencatat objek data lengkap jika Anda mau. yaitu mengubah baris 10, 11 dan 12 menjadi:

// Logger.log (data); 
// Logger.log (data [“hasil”]); 
// Logger.log (data [“hasil”] [0]);

Ini akan membuatnya lebih mudah untuk melihat detail yang Anda ekstrak.

Menempatkan ini sekaligus dalam suatu aplikasi

Jika kita ingin membangun aplikasi yang ditampilkan di GIF di bagian atas pos ini, maka ada beberapa langkah yang perlu kita lalui:

  • Siapkan Google Sheet
  • Ambil nama artis dari Google Sheet dengan Google Apps Script
  • Minta data dari iTunes untuk artis ini dengan Google Apps Script
  • Parsir respons untuk mengekstrak objek data yang relevan dengan Google Apps Script
  • Ekstrak detail spesifik yang kita inginkan (nama album, judul lagu, sampul album, url pratinjau)
  • Hapus semua hasil sebelumnya di Google Sheet sebelum menampilkan hasil baru
  • Tampilkan hasil baru di Google Sheet kami
  • Tambahkan menu khusus untuk menjalankan program dari Google Sheet, bukan editor skrip

Itu selalu merupakan ide yang baik untuk menulis rencana seperti ini sebelum Anda berkomitmen untuk menulis baris kode apa pun.

Dengan begitu Anda dapat memikirkan seluruh aplikasi dan apa yang akan dilakukan, yang memungkinkan Anda untuk membuat pilihan yang efisien dengan cara Anda mengatur kode Anda.

Jadi, hal pertama yang harus dilakukan adalah menyiapkan Google Sheet. Saya akan menyerahkan ini kepada Anda, tetapi ini adalah tangkapan layar pengaturan dasar Google Sheet saya:

iTunes Google Sheet

Hal penting yang perlu diperhatikan adalah lokasi sel tempat pengguna mengetikkan nama artis (baris ke-11, kolom ke-2) seperti yang akan kita lihat di kode kita.

Kode iTunes API Explorer

Dan inilah kode Skrip Google Apps untuk aplikasi kita:

// ------------------------------------------------ --------------------------------------------------
//
// Aplikasi Discovery Musik iTunes di Google Sheets
//
// ------------------------------------------------ --------------------------------------------------

// menu khusus
function onOpen () {
  var ui = SpreadsheetApp.getUi ();
  ui.createMenu ('Menu iTunes Kustom')
      .addItem ('Dapatkan Data Artis', 'displayArtistData')
      .addToUi ();
}

// berfungsi untuk memanggil iTunes API
function calliTunesAPI (artis) {
  
  // Panggil API iTunes
  var response = UrlFetchApp.fetch ("https://itunes.apple.com/search?term=" + artis + "& limit = 200");
  
  // Pisahkan balasan JSON
  var json = response.getContentText ();
  return JSON.parse (json);
  
}


function displayArtistData () {
  
  // ambil istilah pencarian dari Google Sheet
  var ss = SpreadsheetApp.getActiveSpreadsheet ();
  var sheet = ss.getActiveSheet ();
  
  var artist = sheet.getRange (11,2) .getValue ();
  
  var track = calliTunesAPI (artis);
  
  var results = track ["results"];
  
  var output = []
  
  results.forEach (fungsi (elem, i) {
    var image = '= image ("' + elem [" artworkUrl60 "] + '", 4,60,60)';
    var hyperlink = '= hyperlink ("' + elem [" previewUrl "] + '", "Dengarkan pratinjau")';
    output.push ([elem ["artistName"], elem ["collectionName"], elem ["trackName"], image, hyperlink]);
    sheet.setRowHeight (i + 15,65);
  });
  
  // urutkan berdasarkan album
  var sortedOutput = output.sort (fungsi (a, b) {
    
    var albumA = (a [1])? a [1]: 'Tidak dikenal'; // jika nama album tidak ditentukan
    var albumB = (b [1])? b [1]: 'Tidak dikenal'; // jika nama album tidak ditentukan
    
    if (albumA <albumB) {return -1; } lain jika (albumA> albumB) {
      return 1;
    }
    // nama sama
    return 0;
  });
  
  // menambahkan nomor indeks ke array
  sortOutput.forEach (fungsi (elem, i) {
    elem.unshift (i +1);
  });
  
  var len = sortirOutput.length;
  
  // hapus semua konten sebelumnya
  sheet.getRange (15,1.500,6) .clearContent ();
  
  // tempel di nilai
  sheet.getRange (15,1, len, 6) .setValues ​​(sortOutput);
  
  // pemformatan
  sheet.getRange (15,1.500,6) .setVerticalAlignment ("tengah");
  sheet.getRange (15.5.500,1) .setHorizontalAlignment ("center");
  sheet.getRange (15,2, len, 3) .setWrap (true);
  
}

Ini file skrip iTunes API di GitHub .

Bagaimana itu bekerja:

Mari kita bicara tentang beberapa baris kode dalam program ini:

Baris 16 – 25 menjelaskan fungsi yang mengambil nama artis, memanggil API dengan nama artis ini dan kemudian mengembalikan hasil pencarian dari API. Saya telah mengenkapsulasi ini sebagai fungsi terpisah sehingga saya dapat berpotensi menggunakannya kembali di tempat lain dalam program saya.

Program utama dimulai pada baris 28 .

Pada baris 34 , saya mengambil nama artis yang telah dimasukkan pada Google Sheet, dan kami memanggil fungsi API kami dengan nama ini pada baris 36 .

Pada baris 42 – 47 , saya mengambil hasil yang dikembalikan oleh API, mengulanginya dan menarik hanya detail yang saya inginkan (nama artis, nama album, judul lagu, sampul album, dan lagu pratinjau). Saya mendorong semua ini ke dalam array baru yang disebut output.

Selanjutnya saya mengurutkan dan menambahkan indeks ke array, meskipun keduanya bukan langkah wajib.

Pada baris 68 , saya menghapus konten sebelumnya di lembar saya.

Kemudian pada baris 71 , saya menempelkan data baru, mulai dari baris 15.

Akhirnya, baris 74 – 76 memformat data yang baru ditempelkan, sehingga gambar memiliki ruang untuk ditampilkan dengan benar.

Jalankan onOpen()fungsi dari editor skrip sekali untuk menambahkan menu khusus ke Google Sheet Anda. Kemudian Anda dapat menjalankan kode iTunes Anda dari Google Sheet:

Menu iTunes API khusus

Sekarang Anda dapat menjalankan program untuk mencari artis favorit Anda!

Lebih detail tentang iTunes API:

Dokumentasi untuk mencari di iTunes Store .

Dokumentasi menunjukkan hasil pencarian paket JSON .

Contoh 3: Penjelajah data Star Wars menggunakan Star Wars API

Yang ini sangat menyenangkan! Pasti contoh paling menyenangkan dalam Tutorial API untuk Pemula ini.

The Star Wars API adalah database dari semua film, orang, planet, angkasa, spesies dan kendaraan di film Star Wars. Ini sangat mudah untuk di-query dan data yang dikembalikan sangat ramah.

API Star Wars di Google Sheet

Ini sedikit lebih mudah daripada iTunes API karena data yang dikembalikan lebih kecil dan lebih mudah dikelola, dan karena itu lebih mudah untuk diuraikan ketika Anda pertama kali mendapatkannya.

Memulai dengan Star Wars API

Seperti halnya kedua API sebelumnya, mulailah dengan panggilan sederhana untuk melihat apa yang dikembalikan API:

/ *
 * Langkah 1:
 * Panggilan paling dasar ke API 
 * /
function swapi () {
  
  // Panggil API Star Wars
  var response = UrlFetchApp.fetch ("http://swapi.co/api/planets/1/");
  Logger.log (response.getContentText ());
}

Data yang dikembalikan terlihat seperti ini:

Tutorial API untuk Pemula: Data API Star Wars

Jadi, relatif mudah untuk mendapatkan bagian data yang Anda inginkan, dengan kode seperti ini:

/ *
 * Langkah 2:
 * Panggilan dasar yang sama ke API 
 * Parsing jawaban JSON
 * /
function swapi () {
  
  // Panggil API Star Wars
  var response = UrlFetchApp.fetch ("http://swapi.co/api/planets/1/");
  
  // Pisahkan balasan JSON
  var json = response.getContentText ();
  var data = JSON.parse (json);
  Logger.log (data);
  Logger.log (data.name);
  Logger.log (data.population);
  Logger.log (data.terrain);
}

Nah, itu seharusnya cukup petunjuk bagi Anda untuk mencobanya!

Beberapa tips lainnya

Selain menu khusus untuk menjalankan skrip dari Google Sheet Anda, Anda dapat menambahkan tombol ke Google Sheet Anda dan menghubungkannya ke skrip untuk menjalankan skrip ketika diklik. Itulah yang saya lakukan dalam contoh ini.

Di menu, Insert > Drawing...

Google Sheets menyisipkan gambar

Buat tombol menggunakan alat persegi panjang:

Alat menggambar Lembar Google

Terakhir, klik kanan gambar ketika itu ditampilkan di lembar Anda, dan pilih Assign Scriptdan ketik nama fungsi yang ingin Anda jalankan:

Skrip penetapan gambar Lembar Google

Apa lagi?

Gunakan rumus ini untuk menambahkan bintang ke Google Sheet Anda:

=char(9734)

Saya menggunakan font “Orbitron” di seluruh lembar kerja dan, sementara itu bukan font Star Wars, masih memiliki ruang-merasakan itu.

Logo Star Wars besar hanya dibuat dengan menggabungkan sekelompok sel dan menggunakan rumus IMAGE () dengan gambar yang sesuai dari web.

Sumber: https://www.benlcollins.com/apps-script/api-tutorial-for-beginners/

Leave a Reply

Your email address will not be published. Required fields are marked *