Dalam tutorial API untuk pemula ini, Anda akan belajar cara terhubung ke API menggunakan Google Apps Script, untuk mengambil data dari pihak ketiga dan menampilkannya di Google Sheet Anda
Contoh 1 menunjukkan cara menggunakan Google Apps Script untuk terhubung ke API sederhana guna mengambil beberapa data dan menampilkannya di Google Sheets
Dalam Contoh 2, kami akan menggunakan Google Apps Script untuk membuat aplikasi penemuan musik menggunakan iTunes API
Terakhir, dalam contoh 3, saya akan membiarkan Anda mengembangkan aplikasi penjelajah data Star Wars, dengan beberapa petunjuk
Tutorial API untuk pemula. apa itu API?
Anda mungkin pernah mendengar istilah API sebelumnya. Mungkin Anda pernah mendengar bagaimana perusahaan teknologi menggunakannya saat mereka mengirimkan data di antara aplikasi mereka. Atau bagaimana perusahaan membangun sistem yang kompleks dari banyak layanan mikro kecil yang dihubungkan oleh API, dan bukan sebagai satu program monolitik saat ini
API adalah singkatan dari "Application Program Interface", dan istilah ini biasanya mengacu pada URL web yang dapat digunakan untuk mengakses data mentah. Pada dasarnya, API adalah antarmuka yang menyediakan data mentah untuk digunakan publik (walaupun banyak yang memerlukan beberapa bentuk otentikasi)
Sebagai pengembang perangkat lunak pihak ketiga, kami dapat mengakses API organisasi dan menggunakan datanya dalam aplikasi kami sendiri
Kabar baiknya adalah ada banyak API sederhana di luar sana, yang bisa kita hilangkan. Kita akan melihat ketiganya di tutorial api pemula ini
Kami dapat menghubungkan Google Sheets ke API dan mengembalikan data dari API (mis. ITunes) ke Google Sheet kami menggunakan Google Apps Script. Sangat menyenangkan dan sangat memuaskan jika Anda baru mengenal dunia ini
Tutorial API untuk pemula. apa itu Skrip Aplikasi?
Dalam tutorial API untuk pemula ini, kami akan menggunakan Google Apps Script untuk terhubung ke API eksternal
Skrip Google Apps adalah bahasa skrip berbasis Javascript yang dihosting dan dijalankan di server Google, yang memperluas fungsionalitas Google Apps
Jika Anda belum pernah menggunakannya sebelumnya, lihat posting saya. Skrip Google Apps. Panduan Pemula
Contoh 1. Menghubungkan Google Sheets ke Numbers Numbers
Kita akan mulai dengan sesuatu yang sangat sederhana dalam tutorial api pemula ini, sehingga Anda dapat fokus pada data dan tidak tersesat dalam baris dan baris kode
Mari kita menulis program singkat yang memanggil dan meminta fakta matematika dasar
Langkah 1. Buka Lembar baru
Buka Lembar Google kosong baru dan ganti namanya. Contoh API Angka
Langkah 2. Buka editor Skrip Aplikasi
Arahkan ke Tools > Script Editor...
Langkah 3. Beri nama proyek Anda
Tab baru terbuka dan di sinilah kita akan menulis kode kita. Beri nama proyek. Contoh Nomor API
Langkah 4. Tambahkan kode contoh API
Hapus semua kode yang saat ini ada di file Kode. gs, dan ganti dengan ini
function callNumbers () { // Panggil API Angka untuk fakta matematika acak var response = UrlFetchApp.fetch ("//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
Langkah 5. Jalankan fungsi Anda
Jalankan fungsi dengan mengklik tombol putar pada toolbar
Langkah 6. Otorisasi skrip Anda
Ini akan meminta Anda untuk mengonfirmasi skrip Anda untuk terhubung ke layanan eksternal. Klik "Tinjau Izin" dan kemudian "Izinkan" untuk melanjutkan
Langkah 7. Lihat log
Selamat, program Anda sekarang berjalan. Itu mengirimkan permintaan ke pihak ketiga untuk beberapa data (dalam hal ini fakta matematika acak) dan layanan merespons dengan data itu
Tapi tunggu, dimana itu?
Anda akan melihat baris 5 dari kode kami di atas function callNumbers () { // Panggil API Angka untuk fakta matematika acak var response = UrlFetchApp.fetch ("//numbersapi.com/random/math"); Logger.log (response.getContentText ()); var fact = response.getContentText (); var sheet = SpreadsheetApp.getActiveSheet (); sheet.getRange (1,1) .setValue ([fakta]); }0 yang berarti bahwa kami telah mencatat teks tanggapan di file log kami
Jadi mari kita periksa
Buka Lihat > Log
Anda akan melihat jawaban Anda (tentu saja Anda mungkin memiliki fakta yang berbeda)
function callNumbers () { // Panggil API Angka untuk fakta matematika acak var response = UrlFetchApp.fetch ("//numbersapi.com/random/math"); Logger.log (response.getContentText ()); var fact = response.getContentText (); var sheet = SpreadsheetApp.getActiveSheet (); sheet.getRange (1,1) .setValue ([fakta]); }_1
yang terlihat seperti ini di jendela popup
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 di respons
http. // nomor sapi. com/acak/trivia
http. // nomor sapi. com/4/17/tanggal
http. // nomor sapi. com/1729
Anda juga dapat memasukkan ini langsung ke browser Anda jika Anda ingin bermain-main dengannya. Info lebih lanjut di halaman
Lalu bagaimana jika kita ingin mencetak hasilnya ke spreadsheet kita?
Yah, itu cukup mudah
Langkah 8. Tambahkan data ke Lembar
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 ("//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 menugaskan teks tanggapan (data kita) ke variabel bernama _______1_______2, jadi kita bisa merujuknya dengan nama itu
Baris 8 mengambil lembar kami yang sedang aktif (sheetsheet Contoh API Nomor Lembar1) dan menugaskannya ke variabel yang disebut _______1_______3, sehingga kami dapat mengaksesnya menggunakan nama itu
Terakhir di baris 9, kita mendapatkan sel A1 (rentang 1,1) dan menyetel nilai dalam sel tersebut sama dengan variabel function callNumbers () { // Panggil API Angka untuk fakta matematika acak var response = UrlFetchApp.fetch ("//numbersapi.com/random/math"); Logger.log (response.getContentText ()); var fact = response.getContentText (); var sheet = SpreadsheetApp.getActiveSheet (); sheet.getRange (1,1) .setValue ([fakta]); }2, yang menampung teks tanggapan
Langkah 9. Jalankan & otorisasi ulang
Jalankan kembali program Anda. Anda akan diminta untuk mengizinkan skrip Anda melihat dan mengelola spreadsheet Anda di Google Drive, jadi klik Izinkan
Langkah 10. Lihat data eksternal di Lembar Anda
Anda sekarang harus mendapatkan fakta acak yang muncul di Google Sheet Anda
Betapa kerennya itu
Untuk meringkas kemajuan kita sejauh ini dalam Tutorial API untuk Pemula ini. Kami telah meminta data dari layanan pihak ketiga di internet. Layanan merespons dengan data yang kami inginkan dan sekarang kami telah menampilkannya ke Google Sheet kami
Langkah 11. Salin data ke sel baru
Skrip 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, buat perubahan kecil ini pada baris 9 kode Anda (ditampilkan di bawah), untuk menulis jawaban di baris kosong pertama
function callNumbers () { // Panggil API Angka untuk fakta matematika acak var response = UrlFetchApp.fetch ("//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
Satu hal terakhir yang mungkin ingin kami lakukan dengan aplikasi ini adalah menambahkan menu ke Lembar Google kami, sehingga kami dapat menjalankan skrip dari sana dari jendela editor skrip. Baik 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 terakhir Anda untuk skrip Numbers API sekarang harus cocok dengan kode ini di GitHub
Langkah 13. Tambahkan menu khusus
Jalankan fungsi onOpen, yang akan menambahkan menu ke spreadsheet. Kita hanya perlu melakukan langkah ini satu kali
Langkah 14. Jalankan skrip Anda dari menu khusus
Gunakan menu baru untuk menjalankan skrip Anda dari Google Sheet dan saksikan fakta acak muncul di Google Sheet Anda
Oke, siap untuk mencoba sesuatu yang sedikit lebih keras?
Mari buat aplikasi penemuan musik kita sendiri 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 dan mengembalikannya. Ini kemudian menampilkan album, judul trek, karya seni, dan bahkan menambahkan tautan ke sampel trek
Ini sebenarnya tidak sesulit kelihatannya
Memulai dengan iTunes API Explorer
Mulailah dengan Google Sheet kosong, beri nama "iTunes API Explorer" dan buka editor Google Apps Script
Salin kode Google Apps Script yang ada dan tempel kode ini untuk memulai
function calliTunes () { // Panggil API iTunes var response = UrlFetchApp.fetch ("//itunes.apple.com/search?term=coldplay"); Logger.log (response.getContentText ()); }_Jalankan program dan terima izin yang diperlukan. Anda akan mendapatkan output seperti ini
Woah, ada lebih banyak data yang dikembalikan kali ini jadi kami perlu menyaringnya untuk mengekstrak bit yang kami inginkan
Parsing data iTunes
Jadi coba ini. Perbarui kode Anda untuk mengurai data dan mengekstrak bit informasi tertentu
function calliTunes () { // Panggil API iTunes var response = UrlFetchApp.fetch ("//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 mengirimkan permintaan ke API iTunes untuk menemukan data Coldplay. API merespons dengan data itu dan kami menetapkannya ke variabel yang disebut respons, sehingga kami dapat menggunakan nama itu untuk merujuknya
Baris 7 dan 8. Kami mengekstrak teks konteks dari data respons dan kemudian mengurai respons string JSON untuk mendapatkan representasi objek asli. Hal ini memungkinkan kita untuk mengekstrak bit data yang berbeda
Jadi, lihat dulu objek datanya (baris 10)
Anda bisa melihatnya sebagai objek dengan kurung kurawal di awal {
Strukturnya seperti ini
function callNumbers () { // Panggil API Angka untuk fakta matematika acak var response = UrlFetchApp.fetch ("//numbersapi.com/random/math"); Logger.log (response.getContentText ()); var fact = response.getContentText (); var sheet = SpreadsheetApp.getActiveSheet (); sheet.getRange (1,1) .setValue ([fakta]); }_5
Baris 11. kami mengekstrak "hasil", yang merupakan potongan data yang berisi informasi artis dan lagu, menggunakan
function callNumbers () { // Panggil API Angka untuk fakta matematika acak var response = UrlFetchApp.fetch ("//numbersapi.com/random/math"); Logger.log (response.getContentText ()); var fact = response.getContentText (); var sheet = SpreadsheetApp.getActiveSheet (); sheet.getRange (1,1) .setValue ([fakta]); }_6
Baris 12. Ada beberapa album yang dikembalikan untuk artis ini, jadi kami mengambil yang pertama menggunakan referensi [0] karena indeks dimulai dari 0
function callNumbers () { // Panggil API Angka untuk fakta matematika acak var response = UrlFetchApp.fetch ("//numbersapi.com/random/math"); Logger.log (response.getContentText ()); var fact = response.getContentText (); var sheet = SpreadsheetApp.getActiveSheet (); sheet.getRange (1,1) .setValue ([fakta]); }_7
Ini menunjukkan semua informasi yang tersedia dari iTunes API untuk artis dan album ini
Baris 13 – 16. Di bagian data ini, kita dapat mengekstrak detail spesifik yang kita inginkan dengan mengacu pada namanya
misalnya function callNumbers () { // Panggil API Angka untuk fakta matematika acak var response = UrlFetchApp.fetch ("//numbersapi.com/random/math"); Logger.log (response.getContentText ()); var fact = response.getContentText (); var sheet = SpreadsheetApp.getActiveSheet (); sheet.getRange (1,1) .setValue ([fakta]); }_8
untuk memberikan output berikut
Gunakan komentar ("//" di awal baris) untuk menghentikan Logger dari mencatat objek data lengkap jika Anda mau. yaitu, ubah baris 10, 11 dan 12 menjadi
// Pencatat. log (data);
// Pencatat. log(data[“hasil”]);
// Pencatat. log (data [“hasil”] [0]);
Ini akan memudahkan untuk melihat detail yang Anda ekstrak
Tempatkan ini sekaligus dalam sebuah aplikasi
Jika kita ingin membangun aplikasi yang ditampilkan dalam GIF di bagian atas postingan ini, maka ada beberapa langkah yang harus kita lalui
- Siapkan Lembar Google
- Ambil nama artis dari Google Sheet dengan Google Apps Script
- Minta data dari iTunes untuk artis ini dengan Google Apps Script
- Parsing 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 Sheets, bukan editor skrip
Itu selalu merupakan ide yang baik untuk menulis artikel seperti ini sebelum Anda berkomitmen untuk menulis baris kode apa pun
Dengan begitu Anda dapat memikirkan tentang keseluruhan aplikasi dan apa yang akan dilakukannya, yang memungkinkan Anda membuat pilihan yang efisien dalam mengatur kode Anda
Jadi, hal pertama yang harus dilakukan adalah menyiapkan Google Sheet. Saya akan menyerahkannya kepada Anda, tetapi ini adalah tangkapan layar dari pengaturan dasar Google Sheet saya
Hal penting yang harus diperhatikan adalah lokasi sel tempat pengguna mengetik nama artis (baris ke-11, kolom ke-2) seperti yang akan kita lihat di kode kita
Kode iTunes API Explorer
Dan ini adalah kode Google Apps Script 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 ("//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 adalah file skrip iTunes API di GitHub
Bagaimana cara kerjanya
Mari kita bicara tentang beberapa baris kode dalam program ini
Baris 16 – 25 menentukan fungsi yang mengambil nama artis, memanggil API dengan nama artis ini, lalu mengembalikan hasil pencarian dari API. Saya telah merangkum ini sebagai fungsi terpisah sehingga saya berpotensi menggunakannya kembali di tempat lain dalam program saya
Program utama dimulai pada baris 28
Di baris 34, saya mengambil nama artis yang dimasukkan di Google Sheet, dan kami memanggil fungsi API kami dengan nama ini di baris 36
Pada baris 42 – 47, saya mengambil hasil yang dikembalikan oleh API, mengulanginya dan hanya menarik 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 paste data baru mulai dari baris 15
Terakhir, baris 74 – 76 memformat data yang baru ditempelkan, sehingga gambar memiliki ruang untuk ditampilkan dengan benar
Jalankan fungsi _______1________9 dari editor skrip satu kali untuk menambahkan menu khusus ke Google Sheet Anda. Kemudian Anda dapat menjalankan kode iTunes Anda dari Google Sheet
Sekarang Anda dapat menjalankan program untuk menemukan artis favorit Anda
Lebih detail tentang iTunes API
Contoh 3. Penjelajah data Star Wars menggunakan Star Wars API
Yang ini sangat menyenangkan. Pasti contoh paling menyenangkan dalam Tutorial API untuk Pemula ini
API Star Wars adalah basis data dari semua film, orang, planet, ruang angkasa, spesies, dan kendaraan dalam film Star Wars. Ini sangat mudah untuk ditanyakan dan data yang dikembalikan sangat ramah
Ini sedikit lebih mudah daripada iTunes API karena data yang dikembalikan lebih kecil dan lebih mudah dikelola, sehingga lebih mudah diurai saat Anda pertama kali mendapatkannya
Memulai dengan Star Wars API
Seperti dua 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 ("//swapi.co/api/planets/1/"); Logger.log (response.getContentText ()); }Data yang dikembalikan terlihat seperti ini
Jadi relatif mudah untuk mendapatkan bagian data yang diinginkan, 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 ("//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 sudah cukup sebagai petunjuk bagi Anda untuk mencobanya
Beberapa tip lainnya
Selain menu khusus untuk menjalankan skrip dari Google Sheet Anda, Anda dapat menambahkan tombol ke Google Sheet Anda dan menautkannya ke skrip untuk menjalankan skrip saat diklik. Itulah yang saya lakukan dalam contoh ini
Di menu, function callNumbers () { // Panggil API Angka untuk fakta matematika acak var response = UrlFetchApp.fetch ("//numbersapi.com/random/math"); Logger.log (response.getContentText ()); var fact = response.getContentText (); var sheet = SpreadsheetApp.getActiveSheet (); sheet.getRange (sheet.getLastRow () + 1,1) .setValue ([fakta]); }0
Buat kenop menggunakan alat persegi panjang
Terakhir, klik kanan gambar saat ditampilkan di lembar Anda, dan pilih function callNumbers () { // Panggil API Angka untuk fakta matematika acak var response = UrlFetchApp.fetch ("//numbersapi.com/random/math"); Logger.log (response.getContentText ()); var fact = response.getContentText (); var sheet = SpreadsheetApp.getActiveSheet (); sheet.getRange (sheet.getLastRow () + 1,1) .setValue ([fakta]); }1 dan ketikkan nama fungsi yang ingin Anda jalankan
Apa lagi?
Gunakan rumus ini untuk menambahkan bintang ke Lembar Google Anda
function callNumbers () { // Panggil API Angka untuk fakta matematika acak var response = UrlFetchApp.fetch ("//numbersapi.com/random/math"); Logger.log (response.getContentText ()); var fact = response.getContentText (); var sheet = SpreadsheetApp.getActiveSheet (); sheet.getRange (sheet.getLastRow () + 1,1) .setValue ([fakta]); }2
Saya menggunakan font "Orbitron" di seluruh lembar kerja dan, meskipun itu bukan font Star Wars, masih terasa seperti ruang
Logo Star Wars yang besar hanya dibuat dengan menggabungkan sekelompok sel dan menggunakan rumus IMAGE() dengan gambar yang sesuai dari web