Cara Menampilkan Data Tabel dari Google Sheets di Kodular

Artikel kali ini membahas untuk menampilkan data-data yang diambil dari Google Sheets ke dalam bentuk tabel di Aplikasi Android di dalam Kodular. Untuk membuat tampilan data tabel tersebut, maka kamu membutuhkan file extension dari pihak ketiga (bukan bawaan Kodular).

Jadi, kamu bisa membuat tampilan data-data yang diambil dari Google Sheets ke dalam bentuk tabel supaya enak dilihat oleh pengguna aplikasi Android. Sistem ini biasanya dibuat untuk jumlah total data di suatu sampel, data urutan peringkat dalam suatu penilaian atau poin, data yang terdaftar anggota di suatu sistem, dan sebagainya.

Bahan Extension AIX :

Kamu dapat mengunduh bahan extension AIX untuk membuat data tabel di dalam aplikasi Android dengan menggunakan Kodular yang tertera link di bawah ini.

https://community.appinventor.mit.edu/uploads/short-url/9VZDfzC5XU2uo8kUYQ8uwEdpddi.aix

Penulis memberikan tutorial untuk membuat tampilan data tabel yang diambil dari Google Sheets di dalam Kodular. Pada tutorial ini ada tahap-tahap yang pasti kamu pelajari pelan-pelan sampai paham.

LANGKAH-LANGKAH

A) MEMBUAT SUATU DATA DI DALAM GOOGLE SHEETS

1. Kunjungi situs Google Drive.

2. Lakukan login akun Google Drive seperti biasanya.

3. Klik Baru / New.

4. Klik Google Spreadsheet >>> Pilihlah Spreadsheet kosong / blank a Spreadsheet.

5. Buatlah judul Spreadsheet yang sesuai dengan kebutuhan. Contohnya, penulis membuat judulnya yaitu Data Nilai Matematika dari 5 siswa. Setelah itu, tekan Enter.

6. Buatlah 5 buah data siswa yang berisi nilai Matematika beserta keterangan yang terdapat pada gambar di bawah ini.

7. Klik Bagikan / Share. Hal ini dilakukan agar bisa mengakses link spreadsheet tersebut secara umum.

8. Gantilah opsi bagian Akses umum menjadi Siapa saja yang memiliki link. Setelah itu, klik Salin link dan klik Selesai.

9. Setelah disalin link tersebut, pastekan link tersebut ke dalam notepad atau aplikasi catatan lain.

https://docs.google.com/spreadsheets/d/1gRmC9KoIHIdzH0pOveqTfcxT6WpWnCeqMwWpixLS_3Q/edit?usp=sharing

Keterangan :

• Tulisan berwarna hijau merupakan kode ID Spreadsheet.
• Tulisan berwarna ungu merupakan teks yang perlu dihapuskan ketika implementasi ke dalam Kodular.

Pada bagian ini, kamu telah menyelesaikan dalam pembuatan data-data di Google Spreadsheet untuk menampilkan datanya ke dalam bentuk tabel di aplikasi Android dengan Kodular.

B) MEMBUAT APLIKASI DATA TABEL KE APLIKASI ANDROID

10. Kunjungi situs c.kodular.io

11. Lakukan login secara manual maupun OAtuh System dengan benar.

12. Klik Create Project untuk membuat project baru khusus untuk menampilkan data tabel yang diambil dari Google Spreadsheet.

13. Berikan nama project terserah kamu. Setelah itu, klik Next.

14. Untuk pengaturan tampilan UI aplikasi, Package Name, dan lainnya itu dibiarkan saja dan langsung klik Finish.

15. Rancanglah tampilan aplikasi dengan menambahkan 1 buah label untuk memberikan judul besar tampilan data tabel di dalam aplikasi dan 1 buah layout Vertical atau Horizontal baik itu Arrange maupun Scroll Arrange sehingga bisa ditambahkan layout dengan sesuai kebutuhan.

16. Klik Extension pada bagian Pallete >>> Import Extension.

17.  Klik NO FILE CHOSEN.

18. Pilihlah file Extension AIX yang bernama com.kennicholsandroid.tableview.aix, klik OK.

19. Klik IMPORT FROM FILE.

20. Klik OK.

21. Drag komponen TableView ke Screen.

22. Aturlah bagian RowDelimiter menjadi “;” dan hilangkan centang “ShrinkToFit” pada bagian properties.

Keterangan :

• RowDelimiter berfungsi untuk membuat baris baru jika ditemukan salah satu tanda atau simbol yang telah ditentukan.
• ShrinkToFit berfungsi untuk menampilkan data tabel yang sesuai dengan ukuran data tabel yang ada.

23. Klik Blocks.

24. Buatlah blok program untuk menampung data CSV yang dihasilkan dari Google Sheets yang akan dijadikan data tabel.

25. Buatlah blok program untuk memasukkan alamat situs khusus Google Sheets untuk pengambilan data CSV yang terdapat pada Google Sheets.

https://docs.google.com/spreadsheets/d/1gRmC9KoIHIdzH0pOveqTfcxT6WpWnCeqMwWpixLS_3Q/gviz/tq?tqx=out:csv&sheet=Sheet1&tq=SELECT%20*

Keterangan :

• Tulisan berwarna hijau merupakan kode ID Spreadsheet.
• Tulisan berwarna biru merupakan nama Sheets yang akan diambil data CSV.
• Tulisan berwarna cokelat merupakan Query untuk menampilkan data yang diambil dari CSV pada Google Sheets.

Pada keterangan diatas, kamu bisa menggantikan kode ID Google Spreadsheet, nama sheets, dan / atau Query untuk menampilkan data CSV dengan sesuai kebutuhan.

26. Buatlah blok program untuk mengakses alamat situs Google Sheets untuk mengambil data yang akan dijadikan tabel pada saat membuka aplikasi.

27. Buatlah blok program untuk menampilkan data CSV yang diperoleh dari Google Sheets ke dalam bentuk tabel.

Jika selain menampilkan kode status HTTP ialah 200, maka dianggap error dalam menampilkan data tabel dari Google Sheets dan kamu bisa mengisinya dengan sesuai kreatifitas dalam menyampaikan informasi error dari sistem atau client.

28. Klik Test >>> Connect to Companion.

29. Masukkan kode Companion ke dalam Aplikasi Kodular Companion yang terpasang di Android.

HASIL AKHIR

Pada bagian ini untuk memberikan hasil akhir dalam menampilkan data tabel yang diperoleh dari Google Sheets.

Selesai.

APA ADA FILE .AIA KODULAR?

Penulis telah menerima beberapa chat dari Visitor blog ini. Penulis mengucapkan terima kasih atas request-nya. Tetapi, penulis belum bisa membagikan file .AIA yang berkaitan dengan Data Tabel dari Google Sheets karena masih ada artikel lanjutan setelah artikel ini.

PENUTUP

Kamu bisa menampilkan data tabel yang diperoleh dari Google Sheets dalam bentuk data CSV yang akan dikonversikan menjadi data tabel dengan bantuan Extension TableView dari pihak ketiga dalam aplikasi Android dengan menggunakan Kodular. Metode ini berlaku untuk menampilkan sebagian atau seluruh data tabel dari Google Sheets dengan menggunakan kode perintah Query tertentu.

BACA ARTIKEL LAIN