Sunday, January 15, 2017

√ Menciptakan Crud Api Memakai Google Sheets (Bagian 1 Create / Insert Data)

Ok, untuk bahasan yang penulis angkat tidak jauh dari goresan pena mas Tommy pada artikel sebelumnya. Pada goresan pena mas Tommy di situ dijelaskan menciptakan API untuk mode Read, nah kali ini, penulis akan menciptakan untuk semua mode, yang akan dibagi menjadi empat bagian, yaitu



  • Part 1 Create

  • Part 2 Read

  • Part 3 Update

  • Part 4 Delete


Untuk mengerjakan mode read ini, langkah langkahnya yaitu sebagai berikut



  1. Membuat spreadsheet baru

  2. Membuat engine / “Otak” yang mengatur CRUD di Spreadsheet melalui Google Apps Script (GAS)

  3. Testing dengan Postman


Membuat Spreadsheet baru



  • silakan sobat sahabat ketikan Google sheet di url


 untuk bahasan yang penulis angkat tidak jauh dari goresan pena mas Tommy pada artikel  √ Membuat CRUD API Menggunakan Google Sheets (Bagian 1 Create / Insert data)



  • klik tombol go to google sheet

  • Kalau sobat sahabat belum login ke account gmail nanti akan diarahkan untuk login dulu, kalau sudah login akan diarahkan ke dashboard Google Sheet


 untuk bahasan yang penulis angkat tidak jauh dari goresan pena mas Tommy pada artikel  √ Membuat CRUD API Menggunakan Google Sheets (Bagian 1 Create / Insert data)



  • kita buat spreadsheet gres dengan mengklik tanda +, bila tanda + tersebut diklik maka akan muncul spreadsheet baru


 untuk bahasan yang penulis angkat tidak jauh dari goresan pena mas Tommy pada artikel  √ Membuat CRUD API Menggunakan Google Sheets (Bagian 1 Create / Insert data)



  • nah di situ ada goresan pena Untitled Spreadsheet dan Sheet1, aku analogikan menyerupai kita mainan data di MySQl, Untittle Spreadsheet yaitu nama database kita, sementara Sheet1 yaitu nama tabel yang ada dalam database tersebut. Untuk tutorial kali ini, penulis akan memberi nama title Spreadsheetnya Latihan dan nama sheet nya yaitu presensi

  • Untuk baris pertama, yaitu kolom satu, dua dan tiga kita kasih nama nis, nama, status


 untuk bahasan yang penulis angkat tidak jauh dari goresan pena mas Tommy pada artikel  √ Membuat CRUD API Menggunakan Google Sheets (Bagian 1 Create / Insert data)



  • untuk alasan keamanan, maka spreadsheet ini tidak aku share ke publik, jadi aku pertahankan private, he he … lah terus bagaimana mengaksesnya kalau dari luar? nanti aku jelaskan ketika membahas “enginenya” di GAS. Oya simpan baik baik id Spreadsheet ini ya, untuk mendapat id ini dapat dilihat di url spreadsheet tersebut, yaitu huruf di antara d/idSpreadsheet/edit.


Membuat engine / “Otak” yang mengatur CRUD di Spreadsheet melalui Google Apps Script (GAS)



  • Silakan sobat sahabat bikin file Gas nya melalui link ini https://www.google.com/script/start/

  • Klik start script (Kalau belum login akan diarahkan ke untuk login ke Gmail, usahakan account Gmail di Spreadsheet dengan di GAS sama)

  • Selanjutnya sobat sahabat akan di hadapkan pada dashboard berikut ini


 untuk bahasan yang penulis angkat tidak jauh dari goresan pena mas Tommy pada artikel  √ Membuat CRUD API Menggunakan Google Sheets (Bagian 1 Create / Insert data)



  • Untuk title project-nya penulis memberi nama latihan, untuk function-nya kita harus berpegangan pada dua function untuk membikin sebuah webservice, apakah itu? he he … kasih tahu nda yah :p, untuk webservice di GAS, beliau hanya menyediakan dua function yaitu function doGet() dan function doPost() (documentation : https://developers.google.com/apps-script/guides/web)

  • Karena pada part 1 ini yaitu insert data, maka penulis menciptakan code awalnya yaitu sebagai berikut


 untuk bahasan yang penulis angkat tidak jauh dari goresan pena mas Tommy pada artikel  √ Membuat CRUD API Menggunakan Google Sheets (Bagian 1 Create / Insert data)



  • Simbol e, disitu yaitu bentuk request-nya, sobat sahabat dapat melihat keterangan ini di documentation-nya


 untuk bahasan yang penulis angkat tidak jauh dari goresan pena mas Tommy pada artikel  √ Membuat CRUD API Menggunakan Google Sheets (Bagian 1 Create / Insert data)



  • Kemudian buat sebuah var berjulukan ss untuk menampung, spreadsheet yang kita buka menurut id nya (untuk membuka spreadsheet ini dapat melalui id nya atau dapat juga melalui urlnya)


 untuk bahasan yang penulis angkat tidak jauh dari goresan pena mas Tommy pada artikel  √ Membuat CRUD API Menggunakan Google Sheets (Bagian 1 Create / Insert data)


 



  • id ini merupakan id spreadsheet kita yang dibentuk dari step pertama tadi. Pada case ini, id sengaja aku inject-kan ke dalam Apps scriptnya alasannya yaitu duduk perkara keamanan, he he .. jadi biar ga gampang dijebol dari luar (kemungkinan yang  dapat yaitu kalau account Gmail kita terbajak :p)

  • ketika kita membuka dengan method openById, itu artinya kita membuka database yang kita inginkan diantara database yang kita miliki. Setelah database yang sobat sahabat inginkan telah terbuka, selanjutnya  kita akan menentukan tabel mana yang akan di eksekusi. Untuk menentukan tabel ini, kita tinggal buat variabel tabelName untuk menampung nama tabel yang diinginkan


 untuk bahasan yang penulis angkat tidak jauh dari goresan pena mas Tommy pada artikel  √ Membuat CRUD API Menggunakan Google Sheets (Bagian 1 Create / Insert data)



  • perhatikan code e.parameter.tabelName, e yaitu bentuk request, parameter dipakai untuk menangkap field yang dilewatkan melalui url, sementara tabelName yaitu kita mau menangkap nilai dari variabel tabelName yang dikirimkan melalui url.

  • setelah mendapat nama tabel, langkah berikutnya yaitu membuka tabel di dalam database yang kita pilih


 untuk bahasan yang penulis angkat tidak jauh dari goresan pena mas Tommy pada artikel  √ Membuat CRUD API Menggunakan Google Sheets (Bagian 1 Create / Insert data)



  • buat var action untuk menentukan mode yang kita inginkan


 untuk bahasan yang penulis angkat tidak jauh dari goresan pena mas Tommy pada artikel  √ Membuat CRUD API Menggunakan Google Sheets (Bagian 1 Create / Insert data)



  • buat filter untuk mengarahkan method yang sesuai dengan action yang di inginkan


 untuk bahasan yang penulis angkat tidak jauh dari goresan pena mas Tommy pada artikel  √ Membuat CRUD API Menggunakan Google Sheets (Bagian 1 Create / Insert data)


 



  • ketika action yang diinginkan yaitu “insert”, maka fungsi insert_data() akan dipanggil. Fungsi insert_data mempunyai dua parameter, parameter pertama yaitu request, parameter kedua yaitu tabel yang kita buka dalam database. Langkah selanjutnya membuat function insert_data, fungsi ini terletak di luar fungsi doPost.


 untuk bahasan yang penulis angkat tidak jauh dari goresan pena mas Tommy pada artikel  √ Membuat CRUD API Menggunakan Google Sheets (Bagian 1 Create / Insert data)



  • di dalam fungsi insert_data ini kita buat empat variabel yaitu nis, nama, status dan flag.


 untuk bahasan yang penulis angkat tidak jauh dari goresan pena mas Tommy pada artikel  √ Membuat CRUD API Menggunakan Google Sheets (Bagian 1 Create / Insert data)



  • Masuk ke langkah berikutnya yaitu memasukan nis, nama, dan status ke dalam tabel yang kita inginkan


 untuk bahasan yang penulis angkat tidak jauh dari goresan pena mas Tommy pada artikel  √ Membuat CRUD API Menggunakan Google Sheets (Bagian 1 Create / Insert data)



  • appendRow di sini yaitu memasukan data dalam satu baris sekaligus. Tanda [ ] di dalam kurung merupakan penanda bahwa yang dimasukan yaitu object, di dalam spreadsheet satu baris merupakan satu object. Perhatikan urutan variabel dalam kurung kotaknya, yaitu nis, nama, status, hal ini diubahsuaikan dengan urutan kolom di spreadsheet kita, jangan hingga ketukar yah urutannya :p. Variabel hasil di sini dipakai untuk memberi respon ke client. Ok, ke langkah selanjutnya yaitu merubah var hasil menjadi format JSON


 untuk bahasan yang penulis angkat tidak jauh dari goresan pena mas Tommy pada artikel  √ Membuat CRUD API Menggunakan Google Sheets (Bagian 1 Create / Insert data)



  • selanjutnya membuat  variabel hasil tadi dapat di susukan sebagai webservice


 untuk bahasan yang penulis angkat tidak jauh dari goresan pena mas Tommy pada artikel  √ Membuat CRUD API Menggunakan Google Sheets (Bagian 1 Create / Insert data)



  • Selanjutnya yaitu mengaktifkan webservice kita, oya sebelumnya di save dulu yah project-nya :). Untuk mengaktifkan webservice ini caranya yaitu tekan sajian Publish ->Deploy as web app-> (untuk pilihan siapa yang dapat mengakses, pilih Anyone even anonymous)->Deploy->Review permission->pilih account gmailnya (usahakan sama dengan gmail yang spreadsheet)->advanced->go to latiha(unsafe)->allow->akan menghasilkan url webservice-nya (simpan url ini, kita akan memakai ketika testing nanti). Nah dengan kita menentukan anyone even anonymous, setiap orang yang menembak webservice kita, maka akan dianggap oleh server sebagai pemilik account.


Testing dengan Postman



  • Silakan buka app postman, rubah method-nya menjadi POST dan masukan url webservice kita tadi


 untuk bahasan yang penulis angkat tidak jauh dari goresan pena mas Tommy pada artikel  √ Membuat CRUD API Menggunakan Google Sheets (Bagian 1 Create / Insert data)



  • klik tombol Params, dan masukan parameter action, tabelName, nis,nama dan status


 untuk bahasan yang penulis angkat tidak jauh dari goresan pena mas Tommy pada artikel  √ Membuat CRUD API Menggunakan Google Sheets (Bagian 1 Create / Insert data)



  • klik tombol Send, dan lihat hasil output JSON nya, bila berhasil akan keluar menyerupai ini :


 untuk bahasan yang penulis angkat tidak jauh dari goresan pena mas Tommy pada artikel  √ Membuat CRUD API Menggunakan Google Sheets (Bagian 1 Create / Insert data)



  • jika hasil output JSON nya sudah keluar kalimat data berhasil dimasukan, kita cek spreadsheet kita, harusnya datanya sudah masuk


 untuk bahasan yang penulis angkat tidak jauh dari goresan pena mas Tommy pada artikel  √ Membuat CRUD API Menggunakan Google Sheets (Bagian 1 Create / Insert data)


Ok, sekian tutorial dari saya, semoga dapat memberi manfaat bagi sobat sahabat yang membacanya, terima kasih sudah meluangkan waktu untuk membaca coretan aku di sini.


Nb: potongan instruksi diatas sengaja berupa screenshot biar teman-teman dapat memahami kode-nya langkah perlangkah.


 


“saya hanya orang ndeso yang ingin terus belajar”



Sumber aciknadzirah.blogspot.com


EmoticonEmoticon

:)
:(
hihi
:-)
:D
=D
:-d
;(
;-(
@-)
:o
:>)
(o)
:p
:-?
(p)
:-s
8-)
:-t
:-b
b-(
(y)
x-)
(h)