Pendahuluan

Dalam tutorial ini, kita akan membahas secara mendalam bagaimana membuat aplikasi berbasis Google Sheets menggunakan AppSheet. Kita juga akan mengintegrasikan fitur Webview serta mengatasi berbagai kendala teknis yang muncul selama proses pengembangan. Panduan ini dibuat berdasarkan pengalaman nyata dalam menyusun aplikasi pendaftaran berbasis SKTTK dengan hierarki data yang kompleks.

---

1. Persiapan Awal

1.1 Membuat Google Sheets sebagai Database

Langkah pertama adalah menyusun Google Sheets yang akan menjadi sumber data utama.

1. Buka Google Sheets dan buat spreadsheet baru.
2. Buat beberapa sheet/tab, yaitu:
   • Pendaftar → Menyimpan data peserta.
   • Bidang → Daftar bidang yang tersedia.
   • SubBidang → Sub-kategori dari Bidang.
   • SubSubBidang → Kategori lebih spesifik dari SubBidang.
   • Level → Level kompetensi yang tersedia.
   • Jabatan → Jabatan yang tersedia untuk setiap Level.
   • UnitKompetensi → Daftar unit kompetensi yang terkait dengan Jabatan.

1.2 Struktur Data di Google Sheets

Berikut adalah contoh struktur tabel di Google Sheets:

Tabel Pendaftar

Nama Kolom	Deskripsi
Nama	Nama peserta
Alamat	Alamat peserta
Telepon	Nomor telepon peserta
Email	Email peserta
Upload_KTP	Upload dokumen identitas
Bidang	Ref ke tabel Bidang
SubBidang	Ref ke tabel SubBidang
SubSubBidang	Ref ke tabel SubSubBidang
Level	Ref ke tabel Level
Jabatan	Ref ke tabel Jabatan
Unit Kompetensi	Ref ke tabel UnitKompetensi

---

2. Membuat Aplikasi di AppSheet

2.1 Menghubungkan Google Sheets ke AppSheet

1. Buka AppSheet (https://www.appsheet.com/).
2. Klik “Make a new app” dan pilih “Start with your own data”.
3. Pilih Google Sheets yang sudah dibuat.
4. AppSheet akan secara otomatis membaca struktur tabel dan membuat model awal aplikasi.

2.2 Menyesuaikan Data Types dan Relations

• Pastikan kolom yang bersifat “referensi” (Ref) sudah dikonfigurasi dengan benar.
• Aktifkan dependent dropdown untuk menyesuaikan filter data berdasarkan hierarki (Bidang → SubBidang → SubSubBidang → Level → Jabatan → Unit Kompetensi).

---

3. Menampilkan Data di Webview

3.1 Membuat Tampilan Webview di AppSheet

1. Buka “UX” di menu AppSheet.
2. Klik “Add View” dan pilih tipe “Detail” atau “Table”.
3. Pastikan data yang ditampilkan sesuai dengan kebutuhan aplikasi.

3.2 Embed AppSheet ke dalam Website

• AppSheet menyediakan opsi embed melalui “Publish”.
• Anda bisa menyisipkan iframe pada website dengan kode:

---

4. Kendala dan Solusi dalam Pengembangan

Berikut beberapa kendala yang muncul beserta solusinya:

4.1 Dropdown Bertingkat Tidak Muncul

Penyebab:

• Kolom Ref tidak dikonfigurasi dengan benar.
• Data tidak memiliki relasi yang jelas.

Solusi:

• Periksa apakah kolom Ref di Google Sheets sudah benar.
• Cek formula validasi pada AppSheet.

4.2 Unit Kompetensi Tidak Muncul di Formulir

Penyebab:

• Kolom “Unit Kompetensi” tidak memiliki referensi ke tabel UnitKompetensi.
• Data di tabel UnitKompetensi belum terhubung dengan Jabatan yang benar.

Solusi:

• Pastikan kolom “Unit Kompetensi” memiliki Ref ke tabel “UnitKompetensi”.
• Gunakan formula berikut untuk menampilkan nama unit:

4.3 Data Tidak Muncul di View AppSheet

Penyebab:

• Kolom ditandai sebagai “Hidden”.
• Data tidak memiliki referensi yang valid.

Solusi:

• Buka “Data” > “Columns” dan pastikan kolom yang relevan tidak disembunyikan.
• Gunakan “Show?” untuk menampilkan kolom yang diperlukan.

4.4 Error “Column Name ‘Unit_Nama’ was set to be unsearchable because it is ‘Hidden'”

Solusi:

• Pastikan kolom “Unit_Nama” tidak dalam keadaan “Hidden”.
• Cek di menu “Data” > “Columns” > “Show?”, lalu centang opsi tersebut.
• Jika masih error, gunakan alternatif kolom yang tidak tersembunyi seperti “UnitKompetensi_Label”.

---

5. Deployment dan Testing

5.1 Mencoba Aplikasi di Perangkat

1. Gunakan “Preview App” di AppSheet untuk melihat tampilan aplikasi.
2. Coba input beberapa data baru untuk memastikan fungsionalitasnya berjalan dengan baik.
3. Periksa apakah dropdown bertingkat berjalan dengan benar.

5.2 Mempublikasikan Aplikasi

• Menggunakan AppSheet:
  1. Buka “Manage” > “Deploy”.
  2. Pastikan aplikasi sudah sesuai sebelum dipublikasikan.
  3. Dapatkan link publik atau undang pengguna ke dalam aplikasi.
• Menggunakan Webview di Website:
  1. Gunakan kode embed AppSheet ke dalam website.
  2. Pastikan iframe ditampilkan dengan ukuran yang responsif.

---

Kesimpulan

Dengan mengikuti tutorial ini, Anda dapat membuat aplikasi berbasis Google Sheets dan AppSheet yang interaktif dan berfungsi dengan baik. Semua kendala yang muncul telah diatasi dengan solusi yang sesuai, memastikan bahwa aplikasi berjalan lancar.

Ringkasan Hasil Akhir:

✅ Aplikasi berbasis Google Sheets dan AppSheet telah dibuat. ✅ Dropdown bertingkat (Bidang → SubBidang → SubSubBidang → Level → Jabatan → Unit Kompetensi) berfungsi. ✅ Webview berhasil ditampilkan di website. ✅ Kendala teknis telah diatasi.

Semoga tutorial ini bermanfaat bagi Anda yang ingin mengembangkan aplikasi serupa! 🚀