Mempelajari API Google Untuk Read/Write Spreadsheet

Tujuan dari artikel ini adalah untuk membuat chrome extension yang akan membaca dan menulis data di google spreadsheet. Hal ini akan mempermudah pengguna agar tidak perlu melakukan input manual di spreadsheet.

Pertama membuat project dulu sesuai dokumentasi di https://developers.google.com/workspace/guides/create-project.

• Akses halaman ini untuk membuat project baru: https://console.cloud.google.com/

• Enable API service google spreadsheet

• Langkah selanjutnya adalah membuat Credential sesuai petunjuk di halaman ini: https://developers.google.com/workspace/guides/create-credentials

• Di sini saya hanya bisa memilih User Type External. Untuk field radio yang Internal tidak bisa dipilih karena terdisable. Notifnya "Because you’re not a Google Workspace user, you can only make your app available to external (general audience) users"

• Setelah klik tombol CREATE diarahkan ke halaman ini
• Untuk Scopes, Optional info, Summary tidak saya isi dan langsung next-next saja
   

• Membuat Credential untuk bisa menggunakan API 
• Pada halaman ini saya sudah membuat credential API keys, OAuth 2.0 Client IDs, Service Accounts
•  Saat membuat OAuth Client IDs pastikan sudah menyesuaikan platform apa yang akan digunakan. Di sini saya membuat 2 client id, satu menggunakan chrome extension dan satunya menggunakan web aplication.

 

Setelah client id dan apikey sudah siap kemudian melakukan testing web browser request mengikuti dokumentasi ini: https://developers.google.com/sheets/api/quickstart/js#prereqs. Saya copy contoh code index.html dan mengisi api key serta client id. 

Percobaan pertama saat mengakses url di browser adalah muncul tombol utnuk authorisation. Setelah diklik kemudian muncul popup untuk login. Ternyata email saya harus didaftarkan dulu sebagai user tester di project tersebut agar bisa menggunakan api.

Saya kembali ke halaman google console > OAuth consent screen. Edit dan tambahkan email email saya di field testing user. Alhamdulillah setelah mengulangi proses login saya berhasil menampilkan data di spreadsheet.

Tahap berikutnya saya merubah id spreadsheet sesuai keperluan. Dan terjadi error "Unable to parse range: Class Data!A2:E". Setelah saya pelajari ulang, ternyata "Class Data" adalah nama worksheet. Jadi saya perlu merubah nama Class Data menjadi sesuai worksheet dari data spreadsheet saya.

Testing API bisa dilakukan secara live menggunakan OAuth dan API KEY dari google melalui url ini: https://developers.google.com/sheets/api/reference/rest/v4/spreadsheets.values/get. Klik tombol Try It dan akan muncul form request API. Di halaman ini kita bisa melakukan get dan update data spreadsheet. Untuk melakukan update/write data dengan klik sub menu update di sebelah kiri.

Setelah tau cara untuk membaca dan menulis di spreadsheet selanjutnya kita akan mulai menerapkan google API di chrome extension. Setelah melakukan beberapa percobaan ternyata penerapan google API di web dan di chrome sangat berbeda. Library JS yg ada di google saat ini tidak support jika digunakan di chrome extension.

Pertama kita harus melakukan edit di manifest.json untuk mendapatkan permission identity. Kita akan mengikuti dokumentasi ini https://developer.chrome.com/docs/apps/app_identity/. Setelah menambahkan permission kemudian menambahkan client id dan scope permission. 

Dalam membuat client id di google console ada dua hal penting yang perlu diperhatikan. Pertama pilih tipe alikasi sebagai "Chrome App". Kemudian masukan extension id yang sudah kita buat. Field Application type ini menentukan apakah client id yang kita buat bisa digunakan untuk chrome extension atau tidak. 

Jika settingan sudah benar, seharusnya ketika mengakses script get access tokens maka akan muncul popup baru untuk melakukan login dan menauthorisasi aplikasi google API kita. Jika sudah berhasil maka kamu sukses mendapatkan token untuk mengirimkan request API berikutnya. Untuk melihat apakah settingan client id ada yang error kita bisa membuka developer tool atau klik kanan > inspect element > Console. Akan ada pesan error jika kita melakukan kesalahan setting.

Demikian dulu artikel kali ini. Semoga bermanfaat dan salam semangat. :)