Intro to Mobile - Kodular

Selasa, 23-06-2020

Bersama Kak Fira

 Apa yang akan kita lakukan hari ini?

Belajar membuat Mengenal apa itu UI

1 2
games Maze UX

3 Mengenal Flowchart 4 Mengenal Storyboard

Copyright Clevio Coder Camp

Tidak untuk diperbanyak atau dibagikan tanpa seijin PT Clevio
Let’s Make Apps

Copyright Clevio Coder Camp

Tidak untuk diperbanyak atau dibagikan tanpa seijin PT Clevio
 1. Maze Games

Copyright Clevio Coder Camp

Tidak untuk diperbanyak atau dibagikan tanpa seijin PT Clevio
 Design Challenge
1. Buat Design game dengan menambahkan player, rintangan, dan goal/finish

Balok Maze

Goal/Finish

Player

Copyright Clevio Coder Camp

Tidak untuk diperbanyak atau dibagikan tanpa seijin PT Clevio
 Design Challenge
1. Buatlah design screen menang

Copyright Clevio Coder Camp

Tidak untuk diperbanyak atau dibagikan tanpa seijin PT Clevio
 Design Challenge
1. Buatlah design screen kalah

Copyright Clevio Coder Camp

Tidak untuk diperbanyak atau dibagikan tanpa seijin PT Clevio
 Program challenge
1. Tambahkan komponen clock pada palette sensor
2. Program screen 1 agar bola (player) dapat bergerak Ketika kita menggerakan ponsel
 Program challenge
1. Setting properties Clock dengan Timer Interval menjadi = 1
2. Test games dengan kodular companion untuk mengecek code sebelumnya

Copyright Clevio Coder Camp

Tidak untuk diperbanyak atau dibagikan tanpa seijin PT Clevio
 Program challenge
1. Program jika bola menyentuh dinding akan pindah ke screen kalah, jika bola menyentuh
finish maka player akan menang

Menang

Kalah

*Jika dinding menggunakan banyak sprite, maka semua sprite harus di

program seperti diatas
 Program challenge
1. Program Screen Win & lose jika button Restart atau play again di klik, maka game akan
mulai Kembali

Copyright Clevio Coder Camp

Tidak untuk diperbanyak atau dibagikan tanpa seijin PT Clevio
UI UX
Apa itu UI UX?

UI adalah Desain antarmuka untuk perangkat

lunak dengan fokus pada memaksimalkan
penampilan pada aplikasi.

UX adalah Proses meningkatkan kepuasan

pengguna (pengguna aplikasi) dalam
meningkatkan kegunaan dan kesenangan
yang diberikan dalam interaksi antara
pengguna dan produk.
FlowChart

Copyright Clevio Coder Camp

Tidak untuk diperbanyak atau dibagikan tanpa seijin PT Clevio
 Apa itu Flowchart?

Flowchart adalah adalah suatu bagan dengan

simbol-simbol tertentu yang menggambarkan
urutan proses secara mendetail dan hubungan
antara suatu proses (instruksi) dengan proses
lainnya dalam suatu program.

Copyright Clevio Coder Camp

Tidak untuk diperbanyak atau dibagikan tanpa seijin PT Clevio
Simbol Fungsi Ciri-ciri
Start dan Stop Ada di awal dan di akhir

Proses Terdapat kata kerja

Ada pertanyaan,
Keputusan jawaban : Yes & No

Arah Penyambung setiap shape

 Start

Pergi Ke Dapur

Cari Gelas Contoh:

No

Apakah
Flowchart Minum
ada gelas?

Yes
Ambil Gelas

Cari Air
No
Apakah
ada air?

Yes
Tuang air ke gelas

Minum

Stop
StoryBoard

Copyright Clevio Coder Camp

Tidak untuk diperbanyak atau dibagikan tanpa seijin PT Clevio
Apa itu Storyboard?

Storyboard adalah papan cerita, bentuknya

menyerupai komik, dimana ada gambar-
gambar berurutan yang merangkai cerita,
fungsinya untuk memvisualisasikan naskah /
cerita. Selain memvisualisasikan cerita,
storyboard juga berguna untuk memastikan
sebuah Aplikasi bisa diedit dan tidak
kekurangan screen.
Apa saja yang harus ada di
Storyboard?
Scene 1 Scene 2 Scene 3
Home Screen Main Apps Main Apps

Home Screen: Main apps: Main apps:

Halaman utama dari Fitur dari aplikasi itu Fitur dari aplikasi itu
sebuah aplikasi sendiri sendiri

Copyright Clevio Coder Camp

Tidak untuk diperbanyak atau dibagikan tanpa seijin PT Clevio
 Offline Challenge!

Mandiri 1 Mandiri 2

Membuat flowchart Melakukan

dengan tema bebas, tantangan
dan mencari ide menunjukkan
sebuah aplikasi creativity dan
berbagi dengan
orang tua

Copyright Clevio Coder Camp

Tidak untuk diperbanyak atau dibagikan tanpa seijin PT Clevio