Menyimpan data ke Spreadsheet Airtable Kodular

Pada kesempatan kali ini, saya akan membuat aplikasi yang dapat menyimpan data ke spreadsheet airtable Kodular. Spreadsheet adalah jenis database atau penyimpanan data yang paling sering digunakan oleh banyak pengembang aplikasi untuk menyimpan data-data aplikasi secara gratis. Jenis data yang dapat disimpan di spreadsheet bisa berupa text, angka, ataupun tautan.

Menyimpan data ke Spreadsheet Airtable Kodular
Menyimpan data ke Spreadsheet Airtable Kodular

Pada airtable menyediakan paket gratis untuk membuat database spreadsheet dengan penggunaan base yang tidak terbatas, maksimal records per base 1,200 dan juga Attachment space per base 2GB. Fitur ini sudah cukup bagus bagi pengembang aplikasi yang ingin mempunyai penyimpanan data gratis.

Cara membuat aplikasi yang dapat menyimpan data ke Spreadsheet Airtable Kodular

Aplikasi yang dibuat akan menyimpan data-data item yang ada di dalam gudang supermarket, yang nantinya akan berguna untuk memantau jumlah stok dari suatu barang yang ada di dalam gudang. Aplikasi ini juga menggunakan konsep CRUD yang dapat menyimpan data, merubah data, menghapus data, dan menampilkan data yang tersimpan di database.

Baca juga : CRUD Firebase App Inventor Kodular

Buat Database di Airtable

Hal pertama yang dilakukan yaitu membuat database untuk menyimpan data aplikasi, kamu dapat membuat database spreadsheet di Airtable. Masuk ke Airtable lalu login menggunakan email google dan jangan lupa setelah itu masukkan nama workspace.

Halaman utama Airtable
Halaman utama Airtable

Klik “Add base” untuk membuat database baru, kemudian pilih “Start from scratch” dan kamu akan disuruh untuk memasukkan nama database dan juga diberikan pilihan warna serta logo untuk database yang sedang kamu buat. Setelah itu kamu harus masuk ke halaman database untuk membuat tabel dengan cara klik pada kotak database yang sudah kamu buat, dan nanti kamu akan masuk ke halaman serperti dibawah ini.

Setting tabel database
Setting tabel database

Setelah kamu masuk ke halaman seperti gambar diatas, kamu harus mengatur tabel yang nantinya digunakan untuk menyimpan data. Rubah nama tabel sesuai dengan keinginan kamu dan juga jangan lupa untuk merubah nama field heading pada tabel dan ganti jenis inputannya menjadi “single line text”.

Kemudian hapus record yang kosong dengan cara seperti dibawah ini.

Hapus record tabel database
Hapus record tabel database

Tujuan menghapus record yang kosong ini supaya data yang di input pertama kali dari aplikasi, dapat disimpan di record paling pertama. Hapus semua record yang kosong hingga tersisa field heading-nya saja.

Buat Desain Aplikasi di Kodular

Untuk membuat aplikasi ini, saya membuatnya di Kodular karena Kodular sudah menyediakan komponen spreadsheet yang bisa langsung di tambahkan ke aplikasi yang akan dibuat. Pada desain yang saya buat kali ini sederhana, kamu dapat mendesain ulang tampilan aplikasinya agar lebih menarik.

Desain aplikasi simpan data ke Spreadsheet Airtable Kodular
Desain aplikasi simpan data ke Spreadsheet Airtable Kodular

pada desain kali ini saya menggunakan komponen “TextBox”, komponen in digunakan untuk form input data dan juga untuk input pencarian data. Selanjutnya komponen “Button” yang berjumlah 6 masing-masing memiliki fungsi program untuk menyimpan, menghapus, merubah, mencari, dan menampilkan data.

Adapun komponen “Notifier” yang berguna sebagai notifikasi dari setiap aksi yang telah dilakukan. Komponen “ListView” berguna untuk menampilkan data dari database ke dalam bentuk list. Dan yang terakhir yaitu komponen paling utama “Spreadsheet” dimana komponen ini dapat menghubungkan aplikasi dengan database dengan menggunakan API key, Base ID dan nama tabel.

Jangan lupa masukkan API key, Base ID dan juga nama tabel pada komponen Spreadsheet di bagian properties pada saat kamu masih masuk di halaman desain aplikasi. Untuk mengetahui API key, Base ID dan nama tabel, kamu dapat masuk ke halaman database Airtable.

Mencari API Key dan Base ID database Airtable
Mencari API Key dan Base ID database Airtable

Untuk mencari API Key kamu dapat klik “Account” lalu ketika sudah masuk ke halaman akun, scroll ke bawah kamu akan melihat API key milikmu. Kemudian untuk mendapatkan base id kamu dapat klik “API documentation” setelah masuk ke halaman dokumentasi API kamu bisa salin kode Base ID di url nya lihat seperti gambar diatas.

Baca juga : CRUD MySQL App Inventor Kodular

Kode program aplikasi menyimpan data ke spreadsheet airtable

Setelah proses desain selesai maka tahap selanjutnya adalah membuat kode programnya agar aplikasi dapat menjalankan tugasnya sesuai dengan harapan.

Kode program awalan

kode program awalan menyimpan data ke spreadsheet airtable kodular
kode program awalan menyimpan data ke spreadsheet airtable kodular

Berikut adalah penjelasan dari program diatas, pada kode program awalan diatas hal pertama yang dilakukan yaitu dapatkan data dari database terlebih dahulu, kemudian dilakukan ekstrasi data agar data yang didapat dari database spreadsheet airtable dapat di tampilkan di ListView. Karena data yang diambil langsung dari Spreadsheet airtable ini masih kotor, banyak karakter yang perlu di hapus agar mendapatkan data yang bersih.

Prosedur “clear” digunakan untuk membersihkan data yang ada di TextBox ketika selesai menginput data, selanjutnya yaitu variabel “database” yang mana akan menyimpan data yang sudah didapatkan dari database kemudian data tersebut akan digunakan untuk proses pencarian data.

Variabel “index” digunakan untuk menampung nilai index dan variabel “row” untuk menampung nilai baris yang ada di tabel database. Untuk Button “Cancel” digunakan untuk membatalkan aksi pada saat akan merubah data ataupun menghapus data. Button “GetAllData” berfungsi untuk menampilkan semua data.

Kode program save, update, delete data Spreadsheet Airtable

Kode program save, update, delete data Spreadsheet Airtable
Kode program save, update, delete data Spreadsheet Airtable

kode program pada button “save” berfungsi untuk menyimpan data ke spreadsheet airtable, dengan memasukkan data berupa id, nama, dan stok. Selanjutnya kode progam pada komponen button “update” berfungsi untuk merubah data apabila data yang sudah dimasukkan ke database terdapat kesalahan dan juga kode program pada komponen button “delete” berfungsi untuk menghapus data.

Kode program mencari data dan menampilkan data listview ke TexBox

Kode program mencari data dan menampilkan data listview ke TexBox
Kode program mencari data dan menampilkan data listview ke TexBox

Build Project

Setelah selesai membuat kode program aplikasi maka selanjutnya adalah merubah projectnya dalam bentuk aplikasi untuk menguji apakah aplikasi yang dibuat dapat berjalan sesuai harapan pengembang atau tidak.

Kesimpulan

Disini saya akan mencoba untuk menarik kesimpulan, untuk menyimpan data ke spreadsheet airtable dengan kodular ini memang sangat cocok bagi pengembang aplikasi yang tidak ingin mengeluarkan banyak modal, karena pada Airtable menyediakan paket gratis untuk menyimpan data aplikasi.

Perlu diketahui bahwa spreadsheet aritable hanya bisa menyimpan data dalam bentuk string atau text, jadi kamu tidak dapat menginput gambar secara langsung ke spreadsheet airtable melalui aplikasi, kamu bisa memberi tautan jika ingin menginput gambar.

Untuk proses pengambilan data dari spreadsheet airtable cukup rumit ketika menampilkan datanya ke listview, karena banyak sekali karakter yang perlu dihapus, data yang diambil dari spreadsheet airtable perlu dilakukan banyak preprocessing.

Tentunya proses pengambilan datanya tidak semudah dengan menggunakanan database MySQL, TinyDB ataupun Firebase. Karena 3 jenis database tersebut tidak terlalu banyak melakukan preprocessing ketika ingin menampilkan datanya.

Sekian dari postingan kali ini, semoga bermanfaat dan apabila ada yang ingin di tanyakan dapat memberikan komentar dibawah. Terima kasih…

8 comments

  1. Assalamualaikum wr wb. Mas saya mau tanya, punya saya Airtablenya belum bisa terhubung dengan kodularnya, padahal saya sduah masuka API key, Mase ID, dan table, dan mengikuti block kode diatas tapi tetap tidak bisa menampilkan data dr Airtable, kira2 kesalahannya dr mana ya? Terima kasih

  2. mas saya itu punya kendala untuk upload gambar dan memasukan gambar hasil tangkapan kamera kedalam airtabel..kira-kiri ada perunjuknya beserta ilustrasinya. ini salah satu tugas kelompok saya. moohn arahannya mas. terima kasih

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.