LAPORAN

PRODUK KREATIF DAN KEWIRAUSAHAAN

MEMBUAT AKUN KODULAR

DISUSUN OLEH:

YUNIAR S

15155

XII TKJ 3

TEKNIK KOMPUTER DAN JARINGAN

UPT SMKN 1 BONE

TAHUN PELAJARAN 2021/2022

 MEMBUAT APLIKASI ANDROID DENGAN KODULAR

1. Langkah-langkah Membuat Aplikasi (Tampilan Screen)

a. Buka website resmi Kodular yaitu https://www.kodular.io/

b. Setelah muncul tampilan berikut, klik Create Apps!

c. Akan muncul tampilan berikut. Jika belum menggunakan sebelumnya,

klik Create Account.
d. Akan tetapi, jika sudah membuat akun tampilannya sebagai berikut:
e. Setelah itu, klik Create Project.
f. Masukkan nama project baru yang akan dibuat (usahakan tidak
menggunakan spasi) seperti gambar berikut. Lalu klik next.
g. Pada tampilan Configure Your Project, atur Android Version menjadi
Android 7.0 (API 26). Seperti gambar berikut. Kemudian klik Finish.
h. Setelah itu, akan muncul tampilan smartphone virtual seperti berikut.

i. Untuk mengubah header, silahkan ganti namanya sesuai keinginan

pada Screen Properties pada bagian Title.

j. Buatlah Space dengan cara klik Menu Pallete ~ Layout ~ General ~

Space. Drag ikcon space ke bagian All Components tepat di bawah
Screen 1. Pada bagian Space Properties atur seperti pada gambar
berikut.
k. Untuk menambahkan gambar, klik menu Palette ~ User Interface ~
Image. Drag icon image ke bagian All Components tepat di bawah
space. Pada bagian Image Properties atur gambar seperti berikut.
Pada bagian Picture klik icon Awan bertanda panah ke atas untuk
mengaupload gambar yang di inginkan. Setelah itu gambar akan
muncul.

l. Untuk menambahkan Text, klik menu Palette~ User Interface ~

label. Drag icon Label ke bagian All Components tepat di bawah
Image. Pada bagian label properties atur dan tulis kalimat sesuai
keinginan seperti gambar berikut.
m. Untuk menambahkan text selanjutnya, ikuti langkah seperti
sebelumnya. Dengan mendrag icon label ke dalam screen dan atur
sesuai keinginan.
n. Untuk membuat tombol, klik menu Pallete ~ User Interface ~
Button. Drag icon button ke bagian All Components tepat di bawah
Label. Pada bagian Button properties atur sesuai keinginan seperti
gambar berikut.

o. Tambahkan notifier sebagaimana fungsinya untuk memberikan

pernyataan pilihan apakah tetap ingin di aplikasi atau ingin keluar
ketika menekan tombol Close nantinya. Klik menu Pallete ~ User ~
Interface ~ Notifier. Drag icon tersebut ke bagian All Components
tepat di bawah Button yang telah dibuat. Seperti gambar berikut.
p. Untuk membuat Screen berikutnya, klik icon Add Screen seperti
seperti tampilan berikut:

q. Kemudian akan muncul tampilan seperti berikut, dan klik Create.

r. Buatlah Space dengan cara klik menu Palette ~ Layout ~ General ~

Space. Drag icon ke bagian All Components tepat di bawah Screen 1.
Pada bagian Space Properties atur seperti pada gambar berikut:
s. Untuk menambahkan text, klik menu Pallete ~ User Interface ~
Label. Drag icon label ke bagian All Components tepat di bawah
Image. Pada bagian Label Properties atur dan tulis kalimat sesuai
keinginan seperti gambar berikut.

t. Tambahkan Space kembali dengan cara yang sama seperti

sebelumnya. Kemudian buat label untuk menambahkan text dengan
cara yang sama seperti sebelumnya kemudian pada bagian Label
Properties atur sesuai keinginan.
2. Menambahkan Fungsi Logika
a. Untuk fungsi bagaimana pindah dari screen 1 ke screen berikutnya kita
sebelumnya telah membuat tombol. Tombol tersebut berfungsi untuk
menampilkan screen berikutnya yang telah dibuat. Kita akan membuat
logika pada tombol dengan cara kembali ke tampilan screen 1 dan klik
icon Blocks pada bagian sudut kanan lalu akan muncul tampilan
seperti berikut.

b. Pada bagian Blocks ~ Profil, drag fungsi yang di tunjukkan seperti

berikut ke layer putih.
c. Untuk mengisi kekosongan fungsi di bagian do, pada menu Blocks,
klik icon Control kemudian drag fungsi yang bertuliskan “open
another screen screenName”.

d. Untuk mengarahkan ke screen berikutnya yaitu screen 2 mana akan

pindah, maka kita menambahkan fungsi text seperti gambar berikut.
Ingat penulisan nama screen2 harus sama.
e. Pada menu Blocks ~ Screen 1, drag fungsi seperti yang ditunjuk pada
gambar berikut layer. Kemudian pada bagian Blocks ~ Notifier, drag
fungsi seperti yang ditunjukkan gambar berikut untuk
memasangkannya pada fungsi di Screen1.

f. Maka hasilnya seperti berikut. Tambahkan fungsi text seperti

sebelumnya kemudian isi text yang diinginkan seperti berikut.
g. Klik Blocks~Notifier, kemudian drag fungsi berikut ini.

h. Klik Blocks ~ Control, kemudian drag fungsi ini.

i. Klik Blocks ~ Logic, kemudian drag fungsi berikut.

j. Pada bagian “=” pilih Get Choice. Kemudian

k. Klik Blocks ~ Screen2 kemudian drag fungsi berikut.

l. Klik Blocks ~ Control, kemudian drag fungsi berikut.

m. Klik Blocks ~ Logic dan pilih fungsi “True”. Maka hasil fungsi
seperti berikut.
3. Mengexport Aplikasi
a. Setelah semua langkah-langkah diikuti, sekarang kita akan
mengeksport aplikasi agar bisa digunakan di android dengan cara klik
icon Export seperti gambar berikut dan pilih Android App (.apk.).
Setelah itu maka akan muncul proses loading dan aplikasi export bisa
di download.

b. Pindahkan file aplikasi ke smartphone untuk menjalankan aplikasi

android.

PENUTUP
 A. Kesimpulan

Kodular adalah situs web yang menyediakan tools yang menyerupai MIT APP
Inventor untuk membuat aplikasi Android dengan menggunakan Block
Programming. Dengan kata lain, Anda tidak perlu mengetik kode program secara
manual untuk membuat aplikasi android. Kodular inilah yang menyediakan
kelebihan fitur yakni kodular store dan kodular extension (IDE) yang bisa
memudahkan developer melakukan unggah (upload) aplikasi android ke dalam
kodular store, melakukan dalam pembuatan blok program extension IDE sesuai
dengan keinginan developer.

B. Saran

Semoga laporan ini dapat dimanfaatkan dalam hal pembelajaran di sekolah.