PENDIDIKAN
GURU
PENGGERAK
Asesmen Digital Berbasis Android
Modul ini dirancang khusus untuk membantu peserta dalam memahami konsep-
konsep dasar dalam pengembangan aplikasi Android, mulai dari langkah pertama
dalam membuat dan mendaftar di platform Kodular.io, hingga proses mendesain
tampilan aplikasi dan membangun kode blok yang efektif dalam projek aplikasi
Android.
Disusun Oleh :
Noval Abdillah, Guntur Saleksa, Christina Renci Mahardika, Dede Rijalinur Latief, Eko
Hadi Purwanto, Devy Agus Krisna Yunita
KATA PENGANTAR
Puji syukur kehadirat Allah SWT atas segala rahmat dan hidayahnya yang telah
diberikan kepada kami. Dengan senang hati kami mempersembahkan modul
pelatihan ini tentang Asesmen Digital Berbasis Android (SIDIA) yang membahas
langkah-langkah penting dalam pengembangan aplikasi Android menggunakan
platform Kodular.io. Sebagai tim penyusun modul, kami telah merancang materi
ini dengan tujuan untuk memberikan pemahaman yang komprehensif tentang
proses pembuatan aplikasi Android melalui pendekatan praktis dan terarah.
Modul ini dirancang khusus untuk membantu peserta dalam memahami
konsep-konsep dasar dalam pengembangan aplikasi Android, mulai dari langkah
pertama dalam membuat dan mendaftar di platform Kodular.io, hingga proses
mendesain tampilan aplikasi dan membangun kode blok yang efektif dalam
projek aplikasi Android.
Kami berharap modul ini dapat memberikan panduan yang jelas dan mudah
dipahami bagi para peserta untuk mengembangkan keterampilan dalam
pengembangan aplikasi Android. Kami juga berterima kasih kepada BBGP
Provinsi Jawa Timur yang telah memungkinkan kami untuk menyusun modul
pelatihan ini.
Semoga modul ini memberikan manfaat yang besar bagi para pembaca dan
membantu mereka dalam mengembangkan keahlian di bidang pengembangan
aplikasi Android. Atas kontribusi dan partisipasi aktif dari seluruh pihak kami
ucapkan terima kasih.
Kota Batu, 29 Maret 2024
Hormat kami,
ttd
Tim Penyusun Modul SIDIA
BBGP Jawa Timur
DAFTAR ISI
KATA PENGANTAR i
DAFTAR ISI ii
A. Mengenal Platform Kodular.io 1
B. Mendaftar di Platform Kodular.io 1
C. Membuat Projek Kosong di Platform Kodular.io 3
D. Mengatur Tampilan Projek Android di Platform Kodular.io 4
E. Mendesain Halaman User Login 5
F. Mendesain Halaman Dashboard 7
G. Mendesain Halaman Pilihan Asesmen 9
H. Mendesain Halaman Web Viewer 10
I. Membuat Kode Blok Antar Komponen di Kodular
yang Terhubung Ke Database Spreadsheet 11
A. Mengenal Platform Kodular.io
Kodular merupakan aplikasi berbasis web based yang dapat membantu
para pengembang dalam membangun aplikasi berbasis android. Dengan
menggunakan konsep 'drag and drop' yang memungkinkan pengguna untuk
membuat aplikasi mobile tanpa menulis kode. Kodular menjadi aplikasi yang
sangat populer dan gratis untuk dimanfaatkan untuk berbagai kepentingan
membuat aplikasi android. Sebelum memulai pengembangan aplikasi,
pengembang harus melakukan analisis kebutuhan pengguna terlebih dahulu. Hal
ini akan membantu pengembang dalam memahami kebutuhan dan harapan
pengguna sehingga aplikasi yang dibuat dapat lebih efektif dan efisien.
Dalam modul ini, direncanakan untuk membuat aplikasi android dengan
konten asesmen adapun langkah-langkah membuat aplikasi mobile android.
1. Membuat Konsep Aplikasi.
2. Melakukan Riset Mendalam.
3. Membuat Project Baru di Android Studio.
4. Mengatur Konfigurasi Project.
5. Menulis Kode Back End dan Wireframe.
6. Membuat Interface / Tampilan Aplikasi.
7. Integrasi Interface dengan Back End.
8. Uji Coba Aplikasi.
B. Mendaftar di Platform Kodular.io
Untuk memulai membuat apliasi android di kodular, maka perlu
mendaftar dahulu di laman https://kodular.io untuk lebih jelasnya dapat
mengikuti langkah pada gambar berikut.
Gambar 1. Langkah mendaftar di kodular
1
Gambar 2. Mendaftar kodular dengan akun Google
Gambar 3. Pilih email yang akan didaftarkan
Gambar 4. Beri ijin agar dapat melanjutkan
2
Gambar 5. Membuat project baru di kodular
C. Membuat Projek Kosong di Platform Kodular.io
Setelah berhasil membuat akun di kodular.io langkah selanjutnya
adalah membuat projek kosong. Hal ini dimulai dengan membuat nama
aplikasi, memilih tema dan SDK android yang akan digunakan. Agar lebih
paham, bisa mengikuti langkah berikut ini.
Gambar 6. Buat nama aplikasi android di kodular
Gambar 7. Pilihan tema dan SDK Android yang sesuai
3
D. Mengatur Tampilan Projek Android di Platform Kodular.io
Setelah berhasil membuat projek kosong di kodular.io langkah
selanjutnya adalah mendesain projek android dengan melakukan pengaturan
tampilan yang disesuaikan dengan kebutuhan pengembang.
Gambar 8. Mengatur tampilan screen pada projek
Gambar 9. Mengatur tampilan screen pada projek
Gambar 10. Membuat halaman user login
4
E.Mendesain Halaman User Login
Setelah berhasil membuat latar belakang pada projek kosong di
kodular.io langkah selanjutnya adalah mendesain halaman user login sebagai
desain awal aplikasi android yang akan dibuat.
Gambar 11. Mendesain tampilan halaman user login
Gambar 12. Komponen halaman user login
Gambar 13. Komponen halaman user login
5
Gambar 14. Ubah nama komponen di halaman user login
Gambar 15. Ubah nama komponen di halaman user login
Setelah berhasil membuat halaman user login pada projek aplikasi
android yang dibuat, berikut video tutorial lengkapnya bagaimana cara
membuat halaman user login yang sesuai dengan kebutuhan aplikasi android
yang dirancang.
Video 1. Tutorial mendesain halaman user login
6
F. Mendesain Halaman Dashboard
Setelah berhasil membuat halaman user login sebagai halaman awal
dalam aplikasi yang akan dikembangkan, selanjutnya akan dibuat halaman
dashboard sebagai lanjutan jika user berhasil login.
Gambar 16. Membuat halaman pilihan mata pelajaran (dashboard)
Gambar 17. Mendesain tampilan halaman dashboard
Gambar 18. Mendesain tampilan grup tombol halaman dashboard
7
Lakukan duplikat pada
36 Hosrizontal
Arrangement untuk
37 membuat grup tombol
baru
Buat grup
tombol dengan
menggunakan
Card View
Gambar 19. Mendesain tampilan grup tombol halaman dashboard
Gambar 20. Ubah nama komponen di halaman dashboard
Setelah berhasil membuat halaman dashboard pada projek aplikasi
android yang dibuat, berikut video tutorial lengkapnya bagaimana cara
membuat halaman dashboard yang sesuai dengan kebutuhan aplikasi android
yang dirancang.
Video 2. Tutorial mendesain tampilan dashboard
8
G. Mendesain Halaman Pilihan Asesmen
Setelah berhasil membuat halaman user login sebagai halaman awal
dalam aplikasi yang akan dikembangkan, selanjutnya akan dibuat halaman
dashboard sebagai lanjutan jika user berhasil login. Berikut
langkah-langkanya.
Gambar 20. Duplikat dashboard untuk membuat halaman asesmen
Gambar 21. Menampilkan halaman pilihan asesmen
Gambar 22. Ubah nama komponen dan menyesuaikan tombol
9
H. Mendesain Halaman Web Viewer
Setelah berhasil membuat halaman dashboard dalam aplikasi yang
akan dikembangkan, selanjutnya akan dibuat halaman web viewer agar dapat
menampilkan pilihan asesmen yang di jalankan. Berikut langkah-langkanya.
Gambar 23. Membuat halaman web viewer
Gambar 24. Membuat halaman web viewer
Gambar 25. Ubah nama komponen di halaman web viewer
10
I. Membuat Kode Blok Antar Komponen di Kodular
yang Terhubung Ke Database Spreadsheet
Setelah berhasil membuat membuat tampilan aplikasi android di
kodular, selanjutnya adalah membuat database di google Spreadsheet dan
menyusun kode blok antar komponen di Kodular yang terhubung ke database
Spreadsheet. Berikut langkah-langkahnya.
Gambar 26. Membuat database tabel user login
Gambar 27. Membuat database tabel asesmen permapel perkelas
Gambar 28. Share link database dengan akses anyone can view
11
Untuk menyusun kode blok yang menghubungkan setiap komponen
di kodular pada database spreadsheet, perlu terlebih dahulu memahami
flowchart berikut ini.
Dengan flowchart sederhana di atas, dapat disusun kode blok aplikasi
android yang dikembangkan sebagai berikut.
Logika Kode : Jika
Screen 1 di
jalankan maka
jalankan dekorasi
username &
password
(background color dan
border color)
berwarna putih
Gambar 29. Mengatur kode blok untuk tampilan username & password
12
Selanjutnya menyusun kode blok user login dengan mengambil data
NISN sebagai username dari data spreadsheet.
Gambar 30. Membuat kode blok untuk tombol login
Kode blok lanjutan dari
fungsi tombol login.
Logika yang dibangun
sebagai berikut.
1. Jika berhasil
login maka ambil
data
tabel database baris
1 kolom ke 5 yakni
kolom kelas
2. Jika data kelas
sudah di ambil tutup
halaman login, pilih
asesmen, webviewer
dan buka halaman
dashboard (pilihan
mapel)
3. Ambil kode
sheet sesuai kelas
mulai dari kelas 1-6
sesuai ID yang ada
di spreadsheet.
Contoh :
Tujuan dari kode ini untuk
mengambil data tabel
asesmen sesuai dengan
kelas
Gambar 31. Kode blok lanjutan untuk tombol login
13
Untuk lebih memahami alur dari penyusunan kode blok pada halaman
login, berikut video tutorial beserta penjelasannya.
Video 3. Tutorial membuat kode blok untuk halaman login
Jika sudah berhasil membuat kode blok untuk halaman login
selanjutnya, membuat kode blok untuk pilihan mapel (dashboard). Berikut
kode bloknya.
Gambar 32. Kode blok setiap tombol mata pelajaran di dashboard
14
Untuk lebih memahami alur dari penyusunan kode blok pada halaman
login, berikut panduan kode blok beserta penjelasannya.
Logika Kode : mengakses link asesmen sesuai dengan pilihan asesmen yang ada di database
spreadsheet. Hal ini ditunjukkan dengan mengatur index baris.
Gambar 33. Kode blok setiap tombol pilihan asesmen
Logika Kode : mengeksekusi
link asesmen sesuai tabel
kelas dan memilih mapel
(index kolom) dan memilih
asesmen (index baris) untuk
mendapatkan link nya. Jika
sudah didapat baris dan
kolomnya yang berisi link
maka buka url tersebut dalam
tampilan web viewer.
Gambar 34. Kode blok lanjutan untuk tombol pilihan asesmen
15
Untuk lebih memahami alur dari penyusunan kode blok pada halaman
dashboard dan pilihan asesmen, berikut video tutorial beserta penjelasannya.
Video 3. Tutorial membuat kode blok untuk halaman login
16
