T U TO R I A L

K O D U L A R ka S T IS TA 2 0 2 3/ 2 0 2 4
ite kn i k Sta tisti
a Ma g a n g P o l
By Mah a sisw
Buka Web Kodular
Buka website “www.kodular.io“ -> Create Apps -> Buat akun
kodular dengan akun google -> Create project -> Masukkan
nama project -> Masukkan nama aplikasi -> Finish

2
 Tampilan
Awal Website
Web kodular terbagi menjadi 4 bagian besar
• Pallete: merupakan Kumpulan fitur yang
dapat dimasukkan dalam aplikasi yang akan
dibuat, cara penggunaannya adalah dengan
pilih fitur klik tahan lalu geser ke layar
handphone di Bagian 2
• Viewer: merupakan tampilan aplikasi pada
layar handphone, untuk memperjelas
• Download aplikasi Companion kodular
pada handphonemelalui drive link:
https://drive.google.com/drive/folders/1
Hc5gOhpff_31QYLRmqpMsvD5PV43b
sFL
• Buka menu Test pada bagian atas website
3. All Component: menampilkan fitur apasaja yang ada dalam 1 layar
kodular aplikasi
• Pilih connect to companion
4. Screen Properties: berguna untuk mengedit tampilan pada setiap fitur,
• Masukkan kode pada layar laptop ke
seperti merubah jenis, warna, ukuran huruf dan lain sebagainya 3
aplikasi Companion
Menu Bar
• Project berguna untuk membuka projek baru, menyimpan, menghapus, mengimpor dan mengekspor projek.
• Test berguna untuk mengetes tampilan projek dengan menyambungkan ke handphone
• Export berguna untuk mengekspor hasil projek
• Help berisi bantuan terkait website kodular
• Screen untuk menunjukkan screen yang sedang diedit
• Add Screen untuk menambah screen
• Copy screen untuk menyalin screen yang dibuka ke screen baru
• Remove Screen untuk menghapus screen yang dibuka
• Ikon berguna untuk mengupload asset yang digunakan dalam aplikasi (berupa ikon, gambar, jenis huruf).
Kumpulan asset dapat di akses melalui link:
https://drive.google.com/drive/folders/1Hc5gOhpff_31QYLRmqpMsvD5PV43bsFL (Download ikon & jenis font
ke laptop -> upload ikon & jenis font dari laptop ke web kodular) *Untuk jenis font harus menggunakan yang ada
pada link drive
• Ikon berguna untuk pengaturan dari projek, salah satuny mengubah nama aplikasi hasil projek
• Designer beguna untuk mengatur tampilan dari projek
• Blocks berguna untuk mengatur kerja dari aplikasi
4
Fitur Yang
Digunakan

• Label, untuk menambahkan text pada aplikasi

• Space, untuk memberi spasi
• Image, untuk menambahkan gambar
• Vertical Arrangement, untuk menyusun data secara vertical
• Horizontal Arrangement, untuk menyusun data secata horizontal
• Card View, untuk background data

5
Penjelasan
Singkat
• Aplikasi ini menampilkan 4 topik data yang berbeda, setiap topik ditampilkan pada screen yang
berbeda (misal: Wilayah, Penduduk, Kesehatan, dll)
• Screen 1 merupakan menu utama dari aplikasi
• Screen 2-5 merupakan tempat untuk menampilkan setiap topik data yang ada
• Tampilan dari screen 2-5 mirip, hanya berbeda pada ikon dan judul dari topik data yang
ditampilkan, sehingga cara membuat screen 3-5 sama dengan cara membuat screen 2
• Editing tampilan aplikasi ada pada bagian Designer dalam menu bar, sedangkan untuk mengatur
kinerja dari aplikasi ada pada bagian Blocks
⚬ Maksud dari mengatur kinerja aplikasi, contoh:
￭ jika kita klik ikon dari sosial di menu utama aplikasi maka layar HP kita akan berpindah
pada screen yang menampilkan topik data terkait sosial
￭ jika dari screen topik data profil kita klik tombol kembali (back button), maka layar HP
akan kembali ke menu utama dari aplikasi.
6
Langkah-
Langkah Designe
r
Tampilan di Website

SCREEN 1
Tampilan di Handphone

7
Langkah-
Langkah
• Klik Screen 1 di bagian All Component, pada bagian Screen 1 Properties atur
• About Screen Background Color diubah menjadi #FFFFFF00
• Background Color diubah menjadi #FFFFFF00
• Background Image diubah sesuai foto Balai Desa atau Kantor Kelurahan yang ukurannya sudah
dicompress menjadi lebih kecil dan opacity dari foto juga sedikit diturunkan
• Navigation Bar Color diubah menjadi #FFFFFF00
• Hilangkan centang pada Title Visible di bagian paling bawah dari Screen 1 Properties
• Masukkan Space dari bagian Pallete ke Viewer, atur
• Height diubah menjadi 5%
• Width diubah menjadi Fill Parent dengan klik ikon
• Masukkan Vertical Arrangement ke bagian bawah Space langkah 2, atur
• Align Horizontal & Align Vertical diubah menjadi Center
• Background Color diubah menjadi #0E8171FE
• Height diubah menjadi 14%
• Width diubah menjadi Fill Parent 8
 • a
• a
Langkah- • a
Langkah • Masukkan 2 Label ke dalam Vertical Arrangement, atur
• Label pertama (atas) atur
￭ Font Size diubah menjadi 38
￭ Width diubah menjadi Fill Parent
￭ Isi bagian Text dengan PROFIL
￭ Text Alignment diubah menjadi Center
￭ Text Color diubah menjadi #FEC007FF
￭ Klik Advanced properties lalu pada Font Type Import pilih
Panton-BlackCaps.otf
• Label kedua (bawah) atur
￭ Centang Font Bold
￭ Font Size diubah menjadi 27
￭ Width diubah menjadi Fill Parent
￭ Isi bagian Text dengan nama desa/kelurahan menggunakan
huruf kapital (Contoh: KELURAHAN PLOSO)
￭ Text Alignment diubah menjadi Center
￭ Text Color diubah menjadi #FEC007FF
￭ Klik Advanced properties lalu pada Font Type Import pilih
Goldplay-Medium.ttf 9
• a • a
• a Langkah- • a
•
•
a
a
Langkah •
•
a
a
• Masukkan Space ke bawah Vertical Arragement langkah 4, • a
atur • a
• Height diubah menjadi 12% • a
• Width diubah menjadi Fill Parent
• Masukkan Vertical Arrangement ke bawah Space langkah 5, • Masukkan Image dari Pallete ke dalam Card View, atur
atur • Picture diisi sesuai ketersediaan data di Desa
• Align Horizontal & Align Vertical diubah menjadi Center • Height dan Width disesuaikan ukuran ikon (Note: ukuran
• Width diubah menjadi Fill Parent persen dalam Height adalah persentase terhadap tinggi layar
• Masukkan Horizontal Arrangement ke dalam Vertical HP dan ukuran persen dalam Width adalah persentase terhadap
Arrangement langkah 6, atur lebar layar HP)
• Align Horizontal & Align Vertical diubah menjadi Center • Masukkan Space ke dalam Card View di bagian bawah Image, Atur
• Height diubah menjadi 23% • Height diubah menjadi 1%
• Width diubah menjadi Fill Parent • Width diubah menjadi Fill Parent
• Masukkan Card View dari Pallete ke dalam Horizontal • Masukkan Label ke dalam Card View di bagian bawah Space, Atur
Arrangement langkah 7, atur • Centang Font Bolt
• Align Horizontal & Align Vertical diubah menjadi Center • Font Size diubah dengan 16
• Background Color diubah menjadi #0E8171FE • Text diubah sesuai ketersediaan data di Desa
• Corner Radius diubah menjadi 10 • Text Alignment diubah menjadi Center
• Centang Full Clickable • Text Color diubah menjadi #FFFFFFFF
• Height diubah menjadi 22% • Klik Advanced properties lalu pada Font Type Import pilih
• Width diubah menjadi 40% Goldplay-Medium.ttf
10
• a • a
• a • a
• a • a
Langkah-
• a • a

Langkah
•
•
a
a
•
•
a
a
• a • a
• Masukkan Space dari Pallete ke samping kanan Card • a
View, atur • a
• Height diubah dengan Fill Parent • a
• Width diubah dengan 2% • a
• Lakukan kembali langkah nomor 8-11 di bagian kanan • a
Space langkah nomor 12
• Masukkan Space dari Pallete ke bagian bawah dari grup • Masukkan Label ke dalam Horizontal Arrangement
Horizontal Arrangement langkah nomor 7, atur langkah 16, atur
• Height diubah dengan 1% • Centang Font Bolt
• Width diubah dengan Fill Parent • Text diisi dengan 2023@Desa_Cantik (Tahun
• Lakukan kembali langkah nomor 7-13 di bagian bawah menyesuaikan)
Space langkah nomor 14 • Text Alignment diubah menjadi Right
• Masukkan Horizontal Arrangement di bagian paling • Text Color diubah menjadi #FFFFFFFF
bawah, atur • Masukkan Space di bagian kanan Label Langkah
• Align Horizontal diubah dengan Right nomor 17, atur
• Align Vertical diubah dengan Bottom • Height diubah dengan Fill Parent
• Height dan width diubah dengan Fill Parent • Width diubah dengan 2% 11
Langkah-
Langkah Designe
r
Tampilan di Website

SCREEN 2
Tampilan di Handphone

12
Langkah-
Langkah
• Klik Screen 2 di bagian All Component, pada bagian Screen 2
Properties atur
• About Screen Background Color diubah menjadi • a
#FFFFFF00 • a
• Background Color diubah menjadi #FFFFFF00 • a
• Background Image diubah sesuai foto Balai Desa atau • Masukkan Space ke dalam Horizontal Arrangement, atur
Kantor Kelurahan yang ukurannya sudah dicompress • Height diubah menjadi Fill Parent
menjadi lebih kecil dan opacity dari foto juga sedikit
• Width diubah menjadi 6%
diturunkan
• Navigation Bar Color diubah menjadi #FFFFFF00 • Masukkan Vertical Arrangement ke samping kanan Space
• Hilangkan centang pada Title Visible di bagian paling langkah 4, atur
bawah dari Screen 2 Properties • Align Horizontal diubah menjadi Left
• Masukkan Space, atur • Align Vertical diubah menjadi Center
• Height diubah menjadi 5% • Height diubah menjadi Fill Parent
• Width diubah menjadi Fill Parent dengan klik ikon • Width diubah menjadi 40%
• Masukkan Horizontal Arrangement dari bagian bawah Space
langkah 2, atur
• Align Horizontal & Align Vertical diubah menjadi Center
• Background Color diubah menjadi #0E8171FE
• Height diubah menjadi 11%
• Width diubah menjadi Fill Parent 13
• a
Langkah-
• a

Langkah • a
• a
• Masukkan 2 Label ke dalam Vertical Arrangement, atur
• a
• Label pertama (atas) atur
￭ Font Size diubah menjadi 22
￭ Isi bagian Text dengan Profil
• Masukkan Space ke samping kanan Vertical Arrangement
￭ Text Color diubah menjadi #FFFFFFFF
langkah 5, atur
￭ Klik Advanced properties lalu pada Font Type
• Height diubah menjadi Fill Parent
Import pilih GoldplayAlt-Black.ttf
• Width diubah menjadi 35%
• Label kedua (bawah) atur
• Masukkan Image ke samping kanan Space langkah 6, atur
￭ Font Size diubah menjadi 18
• Picture diisi sesuai ikon dari data
￭ Width diubah menjadi Fill Parent
• Height dan Width disesuaikan ukuran ikon (Note:
￭ Isi bagian Text dengan nama desa/kelurahan
ukuran persen dalam Height adalah persentase terhadap
menggunakan huruf kapital (Contoh: Kelurahan
tinggi layar handphone dan ukuran persen dalam Width
Ploso)
adalah persentase terhadap lebar layar)
￭ Text Color diubah menjadi #FFFFFFFF
￭ Klik Advanced properties lalu pada Font Type
Import pilih Goldplay-Reguler.ttf

13
• a • a
• a • a
• • a
a
Langkah-
•
•
a
a
•
•
a
aa
Langkah
• aa
•
•
a
aa
• Masukkan Space ke bawah Horizontal Arrangement, atur • a
• Height diubah menjadi 2% • a
• Width diubah menjadi Fill Parent • a
• Masukkan Card View ke bawah Space langkah 9, atur
• Width diubah menjadi Fill Parent • Masukkan Horizontal Arrangement ke dalam Vertical Scroll
• Masukkan Label ke dalam Card View, atur Arangement, atur
• Centang Bold Font • Width diubah menjadi Full Parent
• Font Size diubah menjadi 20 • Masukkan 3 Label ke dalam Horizontal Arrangement
• Width diubah menjadi Fill Parent • Label Pertama, atur
￭ Font Size diubah menjadi 16
• Text diubah sesuai judul dari Kumpulan data yang
￭ Text diubah sesuai nama data
ditampilkan menggunakan huruf kapital ￭ Width diubah sesuai judul data terpanjang (sehingga
• Text Alignment diubah menjadi Center hasil rapi)
• Klik Advanced properties lalu pada Font Type Import pilih • Label Kedua, atur
Goldplay-Medium.ttf ￭ Text diubah dengan tanda “:”
• Masukkan Space ke bawah Label langkah 11, atur • Label Ketiga, atur
• Height diubah menjadi 1% ￭ Font Size diubah menjadi 16
• Width diubah menjadi Fill Parent ￭ Text diubah sesuai data yang ada
• Masukkan Vertical Scroll Arrangement ke bawah Space langkah • Untuk memasukkan data lain yang ditampilkan ulangi
12, atur langkah 15 di bagian bawahnya
• Height & Width diubah menjadi Full Parent 14
 Penjelasan Blocks

Web kodular terbagi menjadi 2 bagian

besar
• Blocks: Kumpulan perintah
untuk kinerja aplikasi, cara
menggunakannya adalah dengan
klik pada fitur yang akan diberi
perintah, lalu klik tahan dan geser
perintah yang sesuai ke bagian
Vierwer (jenis-jenis perintah akan
muncul di bagian kanan Blocks
dan di bawah tulisan Viewer) • Bagian Viewer dapat digeser dengan klik tahan pada bagian kosong di Viewer
dan digeser ke arah yang dimau
• Viewer: merupakan tempat untuk
• Untuk memusatkan kembali, dengan klik ikon di pojok kanan bawah Viewer
menyusun perintah-perintah yang • Ikon + dan – untuk zoom in dan zoom out
digunakan di screen tersebut • Ikon tong sampah untuk menghapus perintah di Viewer, dengan menggeser
perintah dan dimasukkan ke dalam tong sampah 15
Langkah- Bloc
Langkah ks

Tampilan di Website

SCREEN 1

16
 • Klik Card View1 di bagian Blocks, lalu masukkan perintah “when
Card_View1. Click do” ke bagian Viewer
• Klik Control, lalu masukkan perintah “open another screen
screenName Screen1“ ke bagian Viewer tepatnya di dalam perintah • a Langkah-
langkah 1 di samping kanan tulisan do
• Ganti Screen1 pada perintah menyesuaikan Screen yang
•
•
a
a Langkah
• a
menampilkan topik data yang tepat (dengan cara klik kotak screen
• Klik Screen1 di bagian Blocks, lalu
yang berwarna merah)
masukkan perintah “When Screen1
Contoh kasus:
Back Pressed do” ke bagian Viewer
Card_View2 berisi ikon dan label tentang pendidikan dan Screen yang • Klik Control, lalu masukkan perintah
menampilkan data terkait topik pendidikan adalah Screen 3, maka: “close application” ke bagian Viewer
Pada Blocks pilih Card_View2 lalu masukkan perintah ”when tepatnya di dalam perintah langkah 5 di
Card_View2. Click do” ke Viewer. Setelah itu, klik Control di bagian samping kanan tulisan do
⚬ Tujuan dari perintah 5-6 adalah
Blocks, masukkan perintah “open another screen screenName Screen1”
saat di menu utama, lalu kita
ke dalam perintah yang ada di bagian Viewer sebelumnya. Lalu, ganti pencet tombol kembali (back
Screen1
• a berwarna merah dengan cara klik tulisan tersebut lalu ganti button) maka kita akan keluar dari
• a karena data terkait pendidikan ada di Screen 3.
Screen3 aplikasi
• a
• Ulangi langkah 1-3 untuk Card_View2 sampai dengan Card_View4
17
Langkah-
Langkah

Bloc
Tampilan di Website
ks

SCREEN 2

18
Langkah-
Langkah

• Klik Screen2 di bagian Blocks, lalu masukkan perintah ”When Screen2 Back Pressed do” ke bagian Viewer
• Klik Logic, lalu masukkan perintah “open another screen screenName Screen1” ke bagian Viewer tepatnya di
dalam perintah langkah 1 di samping kanan tulisan do
⚬ Tujuan dari perintah 1-2 adalah saat di Screen 2 (atau discreen lain yang menampilkan data sesuai topiknya),
lalu kita pencet tombol kembali (back button) maka kita akan kembali ke menu utama (Screen 1)
• Ulangi langkah 1-2 untuk semua screen 3-5
19
 THANK
Y O U
Template: Olivia Wilson