Menyimpan data ke Google Spreadsheet Kodular

Pada tutorial kali ini saya akan membahas tentang bagaimana cara menyimpan data ke Google Spreadsheet Kodular. Google Spreadsheet selain digunakan untuk mengolah data dalam bentuk tabel, bisa juga digunakan sebagai tempat penyimpanan data/database. Tutorial kali ini akan menggunakan Google Spreadsheet sebagai database pada aplikasi android, ini mirip dengan postingan sebelumnya yang menggunakan spreadsheet airtable sebagai tempat menyimpan datanya.

Menyimpan data ke Google Spreadsheed Kodular
Menyimpan data ke Google Spreadsheed Kodular

Berbeda dengan database MySQL, untuk menyimpan datanya tidak memerlukan kode PHP ataupun SQL. Agar aplikasi dapat terhubung dengan database google spreadsheet, maka diperlukan kode Google Apps Script yang menggunakan bahasa pemrograman javascript untuk proses simpan data, rubah data, hapus data, dan baca data dari google spreadsheet. Lalu untuk pembuatan aplikasinya dibuat dengan menggunakan Kodular.

Tutorial membuat aplikasi menyimpan data ke Google Spreadsheet Kodular

Login ke Kodular

Masuk ke Kodular untuk membuat project aplikasinya. Kamu bisa login menggunakan email ataupun dengan akun google. Jika kamu belum mempunyai akun, silahkan daftar terlebih dahulu. Buat project baru dan tulis nama project sesuai tutorial kali ini yaitu “Kodular Google Spreadsheet”.

Bagi yang baru dan belum tahu apa itu Kodular. Kodular adalah tools untuk membuat aplikasi android berbasis web yang merupakan perkembangan dari App Inventor. Bahasa pemrograman yang dipakai di kodular berbasis visual blok programming sama dengan App Inventor. Jadi kamu bisa juga membuat aplikasinya menggunakan tools App Inventor.

Buat database aplikasi

Untuk membuat database aplikasi menggunakan Google Spreadheet, pertama yaitu masuk ke Google Spreadsheet, lalu buat spreadsheet baru dan berikan judul pada spreadsheet. Karena pada tutorial kali ini aplikasi yang dibuat menyimpan data barang toko, maka tulis “id, nama barang, dan stok” pada baris pertama di tabel spreadsheet. Lihat gambar dibawah ini.

Setting tabel google spreadsheet
Setting tabel google spreadsheet

setelah menulis heading pada tabel data, kemudian buka Editor skrip di bagian menu “Alat” lalu klik “editor skrip”. Editor Skrip merupakan tempat untuk menulis kode Google Apps Script, agar proses menyimpan data ke google spreadsheet berjalan dengan baik maka kamu dapat memasukkan kode Google Apps Script ke Editor Skrip. Kamu dapat unduh kodenya disini.

Setelah kamu mengunduh kode yang sudah saya berikan, selanjutnya Copy dan paste kodenya ke Editor Skrip. Setelah itu jangan lupa untuk merubah url di “var ss” pada kode google apps script yang sudah dicopy tadi. Lihat gambar dibawah ini!

Rubah url pada variabel ss
Rubah url pada variabel ss

rubah “var ss” pada kode google apps script dengan url pada google spreadsheet kamu. Kemudian untuk “var sheet” di isi dengan “Sheet1” menyesuaikan dengan Sheet yang saat ini digunakan.

Menerapkan kode google apps script sebagai aplikasi web

setelah itu jangan lupa untuk menerapkan kode google apps script sebagai aplikasi web, Klik menu “Publikasikan” lalu klik “Terapkan sebagai aplikasi web”. Tunggu sebentar hingga muncul tampilan seperti dibawah ini.

Terapkan kode google apps script sebagai aplikasi web
Terapkan kode google apps script sebagai aplikasi web

rubah bagian yang saya tandai dengan kotak merah dengan “Anyone, even anonymous” maksudnya yaitu mengizinkan siapa saja dapat mengakses spreadsheet yang kamu buat. Lalu klik “Deploy”. Maka akan muncul jendela baru Authorization required lalu klik “Review Permissions”.

Kemudian pilih akun Gmail yang digunakan, lalu akan muncul jendela baru dengan tulisan “Aplikasi ini tidak diverifikasi” kemudan klik “Lanjutan” selanjutnya klik “Buka KodeSpreadsheet (tidak aman)”. Setelah itu akan muncul jendela baru, scroll ke bawah dan klik “Izinkan”. Maka akan muncul jendela baru disertai dengan URL web app. Kamu bisa lihat pada gambar dibawah ini.

Proses perizinan google spreadsheet
Proses perizinan google spreadsheet

Setelah muncul URL seperti gambar diatas. Kamu harus simpan URL tersebut ke Notepad, karena URL ini nantinya akan digunakan pada komponen web di Kodular atau App Inventor. URL ini digunakan untuk input data, edit data dan hapus data ke google spreadsheet

Selanjutnya jangan lupa untuk megaktifkan layanan google “Drive API” dengan cara klik menu “sumber daya” pada halaman Editor Skrip lalu klik “Layanan lanjutan google” scroll ke bawah cari tulisan “Drive API” dan klik “On” lalu kllik “Ok”. Lihat gambar dibawah ini.

Aktifkan layanan google Drive API
Aktifkan layanan google Drive API

Bagikan halaman Google Spreadsheet

Terakhir jangan lupa untuk membagikan google spreadsheet agar siapapun dapat menginput data, merubah data, menghapus data, dan membaca data. Tentunya kamu dapat membatasi dan memilih pengguna mana saja yang dapat melakukan aksi tersebut.

klik bagikan pada saat kamu berada di halaman google spreadsheet.

membagikan google spreadsheet
membagikan google spreadsheet

lalu akan muncul jendela baru, dan pilih kotak “Dapatkan link” dan klik “ganti”. Lalu atur seperti gambar di bawah ini.

Atur siapa saja yang dapat menjadi editor
Atur siapa saja yang dapat menjadi editor

Desain aplikasi

Setelah selesai membuat database dengan google spreadsheet, maka tahap selanjutnya adalah membuat desain dari aplikasi yang akan dibuat. Disini pembuatan aplikasi dan juga proses desainnya di lakukan dengan bantuan Kodular.

Desain yang dibuat terdiri dari 3 Screen yaitu “Screen1, Input, EditDelete”. Screen1 adalah halaman utama aplikasi yang berfungsi untuk menampilkan data yang ada di database google spreadsheet, Input adalah halaman yang digunakan untuk memasukkan data atau menyimpan data ke database google spreadsheet dan EditDelete halaman yang digunakan untuk merubah data atau menghapus data yang sudah ada di database.

Berikut adalah desain sederhana yang saya buat.

Desain aplikasi simpan data ke google spreadsheet
Desain aplikasi simpan data ke google spreadsheet

Adapun komponen utama yang digunakan di Kodular yaitu Button, Web, Notifier, TextBox, dan List View Image. Bagi yang belum tahu komponen web dapat di temukan di palete bagian “connectivity”. Komponen web digunakan untuk menghubungkan aplikasi dengan database google spreadsheet melalui sebuah URL.

Komponen List View Image digunakan untuk menampilkan data dari database google spreadsheet ke layar aplikasi. Komponen Notifier digunakan untuk menampilkan notifikasi dari setiap aksi yang dilakukan oleh pegguna. Komponen Button digunakan untuk menjalankan program baik menyimpan data, mencari data, menghapus data, dan mengedit data. Kemudian untuk komponen TextBox digunakan untuk form input data, edit data dan delete data.

Kode blok program Kodular

Setelah proses pembuatan desain aplikasi selesai langkah selanjutnya adalah membuat progam, agar proses menyimpan data ke google spreadsheet dapat berjalan sesuai harapan. Berikut adalah kode blok programnya.

Blok program membaca data dari google spreadsheet kodular

Blok program dibawahi ini di gunakan di “Screen1”.

Baca data google spreadsheet ke list view
Baca data google spreadsheet ke list view

coba perhatikan pada prosedur “koneksi”, didalamnya terdapat komponen web yang di isi dengan gabungan beberapa kode.

prosedur koneksi ke spreadsheet untuk ambil data atau baca data
prosedur koneksi ke spreadsheet untuk ambil data atau baca data

Untuk join pertama dimasukkan URL google spreadsheet, kamu dapat copy paste link google spreadsheet dibawah ini untuk mengambil data atau baca data dari google spreadsheet.

https://spreadsheet.google.com/tq?tqx=out:csv&key=

copy paste URL diatas dan ikuti seperti gambar diatas untuk diiterapkan pada komponen web. Kemudian pada Join baris ke dua di isi dengan ID spreadsheet kamu, kamu dapat menemukannya ID spreadsheet di halaman google spreadsheet mu.

ID spreadsheet
ID spreadsheet

Kemudian untuk format join pada baris ke selanjutnya dapat kamu ikuti sama seperti pada gambar prosedur koneksi.

Kode blok program save data ke spreadsheet kodular

blok program ini di gunakan di Screen “Input”.

kode blok program input data atau save data
kode blok program input data atau save data

Kode blok program edit data dan delete data spreadsheet kodular

Kode blok program ini digunakan di Screen “EditDelete”.

Kode blok program edit dan delete data
Kode blok program edit dan delete data

untuk URL pada komponen web di Screen “Input” dan “EditDelete” dapat kamu isikan dari URL yang sebelumnya sudah kamu simpan ke Notepad, pada saat proses perizinan google spreadsheet. Scroll ke atas jika kamu lupa caranya.

Build aplikasi

Setelah proses pengkodean selesai selanjutnya adalah build aplikasi, untuk mengetahui dan menguji apakah aplikasi sudah berjalan sesuai dengan yang diharapkan atau tidak. Berikut adalah hasil aplikasi yang telah dibuat.

Hasil aplikasi simpan data ke google spreadsheet yang dibuat
Hasil aplikasi simpan data ke google spreadsheet yang dibuat

Ya mungkin sampai sini saja pembahasan bagaimana menyimpan data ke google spreadsheet kodular. Apabila ada yang kurang dimengerti kamu bisa memberikan komentar di bawah.

17 comments

    1. Perlu diketahui bahwa google spreadsheet hanya bisa menyimpan data dalam bentuk text, jadi tidak mungkin untuk menyimpan file gambar secara langsung dari aplikasi ke google spreadsheet.

      Adapun alternatifnya yaitu kamu bisa upload gambar ke google drive atau ke hosting kemudian ambil url gambarnya dan masukkan ke google spreadsheet

  1. Kenapa punya saya muncul error “Select list item: Attempt to get item number 2 of a list of length 1: (key spreadsheet saya). Note : you will not see another error reported for 5 second

    1. Jika dilihat dari pesan kesalahannya, mas ini mencoba mendapatkan data list pada index ke2 namun list yang didapat hanya memiliki 1 data saja dengan kata lain panjang data dalam list hanya 1, maka munculah pesan seperti ini. Coba diperhatikan lagi blok programnya mungkin ada kesalahan ketika menambahkan item ke list.

      Untuk program yang saya berikan pada tutorial ini, saya rasa tidak ada yang bermasalah dan bisa dilihat dari dokumentasi aplikasi yang ditampilkan pada postingan ini, aplikasi dapat berjalan dengan baik.

      kalo boleh tahu kesalahan mas ini didapat ketika mas berada pada screen berapa?

        1. bisa saja tapi kurang bagus, saya cuma kasih logika aja misal setiap data yang dikirim diberikan parameter bulan, lalu dibuat program if bulan = februari maka var sheet = Sheet2 else if bulan = maret maka var sheet = Sheet3 …. dan seterusnya

  2. penulisannya program if itu harusnya setelah atau sebelum doGet(e) ?

    ============================================
    kalau angka2 di baris program ini untuk seting apa ya ?
    function Edit(e){
    var id = e.parameter.idbrg;
    var values = sheet.getRange(2,1,sheet.getLastRow(),3).getValues();

    koreksi jika salah
    angka 1 = untuk column
    angka 2 = untuk row
    angka 3 = untuk jumlah column

    maaf banyak nanya baru belajar, terimakasih sebelumnya

    1. Urutannya begini getRange(row, column, numRows, numColumns). Saya baca di Class Sheet Apps Script, ini penjelasannya akan “Mengembalikan rentang dengan sel kiri atas pada koordinat yang ditentukan dengan jumlah baris dan kolom yang ditentukan.”
      Jadi singkatnya itu kayak ngeblock bagian mana nih yang mau di edit atau di hapus.

  3. Mohon ijin bertanya, kalau membaca data di spread sheet melalui kata kunci NIS misalnya kemudian data terbaca…kemudian menampilkan rapot pdf kemudian di download sudahkah ada tutorial nya kak?

Leave a Reply

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