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.
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
Table of Contents
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.
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 “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.
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.
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.
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.
lalu akan muncul jendela baru, dan pilih kotak “Dapatkan link” dan klik “ganti”. Lalu atur seperti gambar di bawah ini.
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.
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”.
coba perhatikan pada prosedur “koneksi”, didalamnya terdapat komponen web yang di isi dengan gabungan beberapa kode.
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.
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 edit data dan delete data spreadsheet kodular
Kode blok program ini digunakan di Screen “EditDelete”.
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.
Ya mungkin sampai sini saja pembahasan bagaimana menyimpan data ke google spreadsheet kodular. Apabila ada yang kurang dimengerti kamu bisa memberikan komentar di bawah.
Min..boleh minta file mentahannya
ikuti saja tutorial di atas mas, saya sudah membahasnya dengan lengkap. Jika ada sesuatu yang tidak paham silahkan tulis di komentar
Gan, apakah bisa menyimpan file gambar ke spreadsheet?
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
Ijin tanya bang, klw ingin input data tapi di sheet yg berbeda apa harus buat script yg baru atw buat spreadsheet yg baru, krn saya bikin di kodular dengan dua screen yg beda utk inputan yg berbeda. Mohon pencerahan ny bang?terimakasih
biar gampang buat script dan spreadsheet baru
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
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?
Screen1
Select list item: Attempt to get item number 2 of a list of length 1: ()
sekarang muncul gini bng…
muncul pesan ini ketika sedang melakukan apa?
kalau mau nyimpan datanya berbeda sheet gimana caranya ya ?
misal sheet1 untuk januari, sheet2 februbruari, dan seterusnya
ada kode tambahan lagi di javascriptnya mas, untuk mengatur itu.
kalau cuma di ganti bagian “var sheet” di isi dengan “Sheet1” dan lainnya
bisa tidak ya ?
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
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
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.
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?
saya belum buat tutorialnya, tapi ada beberapa teman saya yang membuat tutorial tentang apps script ini di youtube, kamu bisa cek channelnya SALOOM RD dan channelnya Ezra Petra
Gan, bisa gak klo kita ketikan ID nya nama barangnya otomatis keluar sendiri tanpa kita ketikan?, Atau punya tutorial yg itu gan?
bisa aja mas, itu pakai extension search. Coba cari aja di deephost atau di cominity kodularnya
Semua sudah sesuai script dan block juga sudah diatur sama persis. Untuk fungsi block semua lancar. Tapi untuk input data selalu gagal. Selalu muncul notif :
Info : Salahbody {background-color: #fff; margin: 0; padding: 0;} errorMessage {font-family: Arial,sans-serif; font-size: 12pt; font-weight: bold; line-height: 150%; padding-top: 25px;}
ReferenceError: id is not defined (baris 33, file “Kode”)
Padahal script cuma copy-paste. Cara publish juga sudah sesuai ke web app. Bagikan sheet sudah sesuai juga. Drive API sudah ON juga.
Jadi sedih kalau sudah sesuai tapi gagal 🙁
itu ada kesalahannya “id is not defined” coba di cek lagi di baris ke 33, ini kesalahannya di Google AppsScriptnya
Mas gimana cara biar kalau input ga perlu memasukkan id, jadi id secara otomatis dibuat sistem, tapi di view data nanti bisa muncul, jika mau edit atau update tinggal panggil id tersebut? terima kasih
bisa aja tinggal hitung panjang list data yang didapat, baru tambah 1
kak…itu “global_cari” nama apa yah mas? button atau text box atau apakah?
saya ngga ada nama “globarl_cari” padahal ngikutin sesuai kakak.
sama bagian call “data_web”, saya juga ngga nemu. itu ada dibagian mana ya kak?
makasih
“global_cari” itu variable jadi harus buat variable baru dulu di initialize. Kalo call “data_web” itu fungsi, sama harus buat fungsinya dulu. Coba liat lagi block yang saya kasih disitu udh ada lengkap.
Bang bisa minta tolong di buatkan tutorial CRUD, get coordinat dari marker map yang dragable lalu latitude dan longitude nya tersimpan di spreadsheet dan di tampilkan lagi di app yg kita buat.makasih sebelumnya
punya saya listnya kok tidak muncul ya kak, padahal visible
Minta bantuannya gan
12.04.25 Error
TypeError: Cannot read property ‘parameter’ of undefined
doGet @ Kode.gs:5
kalau di tambah input data tanggal, bagaimana cara menyimpan picker date (blok nya), soalnya data tanggal masih menyatu dengan data lain di spreadsheet
pakai when date picker lalu ambil nilai day, month, dan year. Kemudian disatukan lalu dimasukkan ke text box
https://imgur.com/a/WrmaSc9
block OR nya dapat dari mana? sama masukin image di search list view?
Mas terimakasih tutornya, maaf kalau saya mau ambil data namanya disheet google sheet yang berbeda apakah bisa (lookup berdasarkan “id” untuk ditampilkan di text box nama setelah kita input ID nya)?
kira kira script di google scripts dan app inventor apanya yang dirubah ya?
Bisa lookup by id tambahin lagi kode google app scriptnya, saya krg familiar dengan app script coba baca dokumentasinya aja tentang appscript google.
Tulisannya koneksi gagal trus bang, mohon pencerahannya
mungkin ada yg salah di url koneksinya coba dicek lagi
link kode ny tidak dapat dibuka. mohon bantuannya
bisa kok
blom juga nyoba udah puyeng gan
Kalau pilihan ganda bagaimana Gan?
Maaf mau tanya mas,
untuk menampilkan Call nofilter1 show alert pada block itu dmn ya?
karena saya tidak bisa mencari nya mas..
thankyou
pada block di bagian web1, kenapa kode “call data_web respon_konten” tidak ada ya,? saya cari cari untuk menambahkannya?
mohon bimbingannya..
terima kasih…..
pada komponen web1 Got Text, ada tulisan response Content.
Arahkan cursor ke tulisan tersebut nanti akan
muncul block “response Content” tinggal keluarkan
block tersebut lalu pasang pada block lainnya
kenapa menu publish tidak muncul ya