BELAJAR KODING ONLEN

BIKIN ANIMASI & GAMES

Bersama Kak Ekotete
(BATU CODING ROBOTIC COMMUNITY)
081-252-71-22-74
PENDAHULUAN
KODING
KODING ?
APAAN TUH ??

KODING berasal dari CODING atau to CODE

(artinya membuat kode)
KODE apa ? KODE yang dibuat manusia agar
bekerja sesuai keperluan manusia
Kode itu PROGRAM/APLIKASI KOMPUTER
KODING = membuat
Pembuat program komputer disebut PROGRAMMER
PROGRAM KOMPUTER & ALAT (1)

Saat ini kita hidup bersama PROGRAM

KOMPUTER
Banyak peralatan di sekitar kita bisa
bekerja karena PROGRAM KOMPUTER
 Alat bekerja langkah demi langkah
mengikuti program komputer yang
dibuat oleh PROGRAMMER komputer
PROGRAM KOMPUTER & ALAT (2)

HANDPHONE (HP)
Kode (program) yang dipasang membuat HP
bisa digunakan untuk menelpon atau menerima
telpon, mengirim pesan, mencari nomor telpon,
memfoto, bermain games, memutar lagu atau
film di HP, dan sebagainya
Menginstal aplikasi dari PlayStore/AppStore =
menambah kode (program) yang membuat HP
bisa melakukan hal-hal baru
PROGRAM KOMPUTER & ALAT (3)

KOMPUTER
Komputer bisa digunakan untuk
menjelajah internet (browsing),
mengetik dokumen, memutar lagu
atau film, bermain games, mencetak,
menscan, dsb
Semuanya bisa dilakukan komputer
karena Kode (program komputer) yang
dibuat Programmer
PROGRAM KOMPUTER & ALAT (3)

KONSOL GAMES (PSP / PlayStation, Nitendo,

XBOX dsb)
Konsol games itu bentuk lain komputer
Semua games yang bisa dijalankan pada
konsol itu kode (program komputer)
Semua gambar, suara, dan kendali pada
games ditulis dengan kode (program
komputer)
PROGRAM KOMPUTER & ALAT (4)

 MESIN CUCI
 Terutama mesin cuci satu pintu,
sudah memiliki komputer di dalamnya
 KODE komputernya mengatur
berapa lama putaran saat mencuci,
berapa suhu air yang dipakai, berapa
banyak air untuk mencuci, dsb
PROGRAM KOMPUTER & ALAT (5)

 MOBIL
 Pada mobil baru dan otomatis, telah
memakai komputer
 Program Komputer yang dipasang bisa
mengamati kecepatan, suhu, jumlah
bahan bakar di tangki.
 Bahkan program komputernya mampu
membantu pengereman agar
penumpang tetap selamat
BAHASA PEMROGRAMAN &
ANAK REMAJA
BAHASA PEMROGRAMAN

Untuk membuat KODE

(PROGRAM KOMPUTER) diperlukan
BAHASA KHUSUS yang dipahami komputer
Namanya BAHASA PEMROGRAMAN
Ada buanyyaaak bahasa pemrograman yang ada saat ini
Misalnya : Assembler, Pascal, C, C++, C#, Visual Basic, Java,
Python, Fortan, Cobol, Ada, Ruby, PHP, Perl, JavaScript,
GoLang, dan lain-lain
 BAHASA PEMROGRAMAN UMUM (dulu)

 Dulu, kalo mau buat KODE

PROGRAM KOMPUTER harus
diketik semua kode-kode itu
 Harus hapal kode-kodenya !
Capek ! Sulit ! Kurang 1 huruf bisa
salah programnya
 Gak semua orang mampu :(
BAHASA PEMROGRAMAN UMUM
(sekarang)

 Lalu dikembangkan lagi, agar gak

banyak ngetik, banyak salah, banyak
hafalin kode
 Muncul BAHASA PEMROGRAMAN
VISUAL, ada Visual Basic, Delphi, dsb
 Tinggal klik seret taruh ketik sedikit
KODE program komputernya
 Lebih mudah lebih bisa dipelajari
banyak orang
BAHASA PEMROGRAMAN
untuk ANAK & REMAJA

 Nah, agar anak & remaja bisa belajar

KODING dengan MUDAH ASYIK
APLIKATIF, maka dibuatlah bahasa
pemrograman gaya baru
 yaitu : PEMROGRAMAN BLOK (block
programming)
 Cukup klik taruh jalankan, hampir tidak
perlu mengetik blas
 Bahasa gaya ini contohnya : SCRATCH
KENAPA ANAK & REMAJA
PERLU BELAJAR KODING ?

 Banyak manfaat yang bisa diperoleh anak &

remaja dengan belajar KODING, seperti :
 lebih kreatif
 berani ambil resiko
 berpikir kritis
 Mampu bercerita dg baik
 menyelesaikan masalah
 belajar matematika
 tekun pantang menyerah
 kerja sama tim
 percaya diri
KENALAN SAMA
“SCRATCH”
APA SIAPA ITU SCRATCH ?

 Scratch dibaca “skretc”

 Scratch = bahasa
pemrograman memakai BLOK
KODE untuk membuat animasi,
cerita, instrumen musik, games
dan banyak lagi.
 Memakai Scratch seperti
memakai LEGO
BIKIN CODE GAYA LEGO
“PASANG BONGKAR”
Sejarah Singkat Scratch

 SCRATCH dibuat oleh MIT Media Lab (Massachusetts Institute

of Technology) USA
 Scratch dibuat untuk pembelajaran koding level dasar untuk
usia SD s/d SMP (8 -16 tahunan)
 Scratch ada yang versi Online dan versi Offline, mulai versi
1.0, 2.0 hingga 3.0 saat ini.
 Versi online bisa dibuka di : https://scratch.mit.edu/
 Versi Linux tidak resmi di : scratux.org
SHOW TIME GAES !
TAMPILAN AWAL SCRATCH EDITOR
AGAR MUDAH, UBAH BAHASA SCRATCH
JADI BAHASA INDONESIA

 Cari ikon bergambar

seperti “bola dunia”
 Klik “panah kecil” di
samping ikon bola dunia
 Akan tampil nama2
bahasa
 Pilih “bahasa Indonesia”
 JRENG ... JRENG ...
SCRATCH UDAH PAKE BAHASA INDONESIA :)
 BAGIAN-BAGIAN EDITOR SCRATCH
Tampilan jendela/penuh
Jalan/Stop

Stage (Panggung)

Palet Kode Blok

Area Kode
Sprite Latar
 Tips dan Trik

Setiap blok kode Scratch

dikumpulkan sesuai warna
kelompoknya
Carilah blok kode di
kumpulan blok kode (palet)
yang warnanya sama
PROYEK #1 : Kebun Binatang
Atur Latar (background)

Pilih / atur latar

(background) dari
stage di bagian
Panggung
Blok kode untuk sprite Kucing

Atur ukuran sprite kucing = 50

Lalu buat blok kode untuk sprite
kucing (Sprite 1) seperti di
samping
Arti Blok kode untuk sprite Kucing

 Ketika bendera hijau diklik, kode akan dimulai

 Pengaturan gaya rotasi sprite agar bisa berbalik arah atau
tidak
 Ulangi kode selamanya (sampai tombol Stop diklik)
 Sprite gerak sesuai arah sebanyak 10 langkah
 Kostum sprite ganti yg berikutnya agar ada efek berjalan
 Jika sprite sampai di pinggir layar, maka sprite memantul
geraknya
 Agar gerak sprite tidak terlalu cepat, tunggu 0,5 detik
Blok kode untuk sprite Beruang

Tambahkan sprite Beruang

(Bear walking)
Atur ukuran sprite = 50
Lalu buat blok kode untuk
sprite Beruang itu seperti di
samping
Blok kode untuk Latar (background sound)

 Agar animasi hidup butuh efek suara latar

(background sound)
 Klik bagian Latar untuk mengaktifkannya
 Tambahkan suara (sound) dari tab Suara,
pilih suara/efek yang diinginkan
 Buat blok kode seperti di samping untuk
memutar suara yg dipilih
MODIFIKASI

Coba tambahkan hewan-hewan lain !

PROYEK #2 : PEMBURU BINTANG
 Skenario Game Pemburu Bintang

Seorang Astronot di luar angkasa mendapat misi untuk

mengambil Bintang sebanyak mungkin
Setiap bintang yang diambil akan menambah skor 1.
Kadang2 muncul Apel Surga yang muncul di luar angkasa,
jika diambil Astronot akan mendapat bonus skor 10 langsung.
Awas, ada Monster Kelelawar yang terus mengejar Astronot,
jika Astronot berhasil digigitnya, skor akan berkurang 10.
Jika skor habis (<0, kurang dari 0), maka GAME OVER !
Atur tampilan dan sprite game

 Atur latar (background)

panggung di luar angkasa
 Tambahkan sprite Astronot
(Kiran), ukuran sprite = 30
 Tambahkan sprite Apel
(Apple), ukuran sprite = 50
 Tambahkan sprite Bintang
(Star), ukuran sprite = 50
 Tambahkan sprite
Kelelawar (Bat), ukuran
sprite = 50
 Blok kode untuk latar (panggung)


1. pilih/klik bagian Panggung sehingga
aktif (berwarna biru)
2. Tambahkan Suara “Dance Space” di 

tab Suara  
3. Tambahkan blok kode berikut di
bagian Kode

 Selama game berjalan,
suara “Dance Space”
diulangi diputar terus
Blok kode untuk sprite Astronot (Kiran)

Selama game berjalan, Sprite

Astronot (Kiran) akan
berpindah tempat mengikuti
posisi dari penunjuk tetikus
(pointer mouse)
Blok kode untuk sprite Bintang (Star)

Selama game berjalan,

Sprite Bintang akan
berpindah tempat secara
acak (posisi sembarang)
setiap 1 detik sekali
Blok kode untuk sprite Apel (Apple)

 Sprite Apel akan berpindah tempat

secara acak (posisi sembarang) setiap 10
detik sekali
 Setiap pindah tempat, akan tampak
selama 5 detik saja, setelah itu
menghilang
 Blok kode sembunyikan = menghilangkan
sprite (tidak tampak)
 Blok kode tampilkan = menampakkan
sprite yang menghilang
Blok kode untuk sprite Kelelawar (Bat)

Selama game berjalan, Sprite

Kelelawar akan :
Mengarahkan diri ke arah Sprite
Astronot (Kiran)
Berganti-ganti kostum (a-b-c-d)
dengan waktu ganti kostum 0,2 detik
Bergerak meluncur menuju posisi sprite
Astronot (Kiran) dalam waktu 1 detik
Blok kode untuk skor

Untuk menyimpan skor berapa jumlah

Bintang yang berhasil dikumpulkan
Astronot, kita membutuhkan wadah
yang disebut Variabel
Di palet Variabel, pilih Buat sebuah
variabel dan beri nama variabel
misalnya : jumlah bintang , maka akan
muncul di layar stage nilai variabel
jumlah bintang
MODIFIKASI Blok kode
untuk sprite Astronot (Kiran) - #1
Blok kode sprite Astronot (Kiran) harus
dimodif (ditambah) agar bisa
menangani skor perolehan bintang
Caranya :
Siapkan blok kode baru seperti
gambar di samping
Agar setiap game mulai, skor “jumlah
bintang” mulai dari 0 (direset)
MODIFIKASI Blok kode
untuk sprite Astronot (Kiran) - #2
Tambahkan blok kode di samping :
“jika Astronot berhasil mengambil
(menyentuh) bintang”, maka :
Skor “jumlah bintang” bertambah 1
Katakan “Hore!” selama 1 detik
Bunyikan efek suara “Fairydust”
 tambahkan dulu suara Fairydust ini
MODIFIKASI Blok kode
untuk sprite Astronot (Kiran) - #3
Tambahkan blok kode di samping
“dibawah” blok kode utk bintang:
“jika Astronot berhasil mengambil
(menyentuh) apel”, maka :
Skor “jumlah bintang” bertambah 10
Katakan “Bonus!” selama 1 detik
Bunyikan efek suara “Bite”
 tambahkan dulu suara Bite ini
MODIFIKASI Blok kode
untuk sprite Astronot (Kiran) - #4
Tambahkan blok kode di samping
“dibawah” blok kode utk apel:
“jika Astronot berhasil ditangkap
(disentuh) kelelawar”, maka :
Skor “jumlah bintang” berkurang 10
Katakan “Oh No!” selama 1 detik
Bunyikan efek suara “Bite”
 tambahkan dulu suara Bite ini
MODIFIKASI Blok kode
untuk sprite Astronot (Kiran) - #5
Tambahkan blok kode di samping
“dibawah” blok kode utk kelelawar :
“jika skor ‘jumlah bintang’ kurang
dari 0”, maka :
Katakan “Oh kalah!” selama 1 detik
Bunyikan efek suara “Lose”
 tambahkan dulu suara Lose ini
 Game Over, hentikan program
Modifikasi

Silahkan kembangkan game Pemburu Bintang itu

sesuai ide dan kreatifitas kalian !
Misalnya :
 tambahkan sprite musuh (misal Naga) yang
bergerak ke kanan kiri, jika Astronot terkena Naga,
skor ‘jumlah bintang’ akan berkurang 50 atau lebih
Tambahkan sprite bonus++ (misal donut) yang jika
Astronot berhasil mengambil dapat tambahan bonus
skor 500 bintang
 dan seterusnya ...
WAH, SAYA TERTARIK PENGEN
BELAJAR KODING LAGI NIH ....

CEK SLIDE BERIKUTNYA >>

 INGIN BELAJAR KODING LEBIH MAHIR?

BCRC membuka Kelas Private Belajar

CODING Online Edisi Ramadhan 1442
 Detail Kelas Private Belajar KODING onlen
EDISI RAMADHAN 1442H

5x pertemuan online @1.5 jam

 Waktu : pagi (jam 09.00 – 10.30) atau sore (jam 15.30 – 17.00)
 Jadwal pertemuan
 Pagi : selasa (27/4), rabu (28/4), kamis (29/4), sabtu (1/4), selasa (4/4)
 Sore : selasa (27/4), rabu (28/4), kamis (29/4), sabtu (1/4), selasa (4/4)
dapat e-modul & source code dan e-sertifikat
tiap pertemuan bikin program/animasi/games (praktek)
Biaya hanya Rp 100 ribu per kelas
Minat ikut KELAS PRIVAT Belajar Koding ?

Silahkan hubungi kami untuk bergabung

KELAS PRIVAT Belajar Koding
Daftar di : s.id/privatkoding

L 081 252 71 22 74