Pendahuluan 2

Latar Belakang 2

Deskripsi Pelatihan 3

Tujuan Pembelajaran 3

Kompetensi Dasar 4

Indikator Hasil Belajar 4

Informasi Pelatihan 5

Informasi Pembelajaran 6
I. Pendahuluan 7
1. Algoritma 7
2. Sequence 8
3. App Inventor 8
4. Variabel. 12
5. Tipe Data 13
6. Event-based 14
7.Conditional 15
8. Operator 18
9. Coordinate 19
10. Nested Conditional 20
11. Function/Procedure 20
12. Offline Database (TinyDB) 21
13. Multiple Screen 22

II. Exercise 24
III. Tutorial Project 26
1. Translator App 26
Design Component 26
Coding Component 27
2. Doodle App 29
Design Component 29
Coding Component 30
3. To-do List App 32
Design Component 32
Coding Component 33
4. Stopwatch App 34
Design Component 34
Coding Component 35
5. Countdown Timer 37
Design Component 37
Coding Component 38
6. Media Player 40
Design Component 40
Coding Component 46

1
 Pendahuluan

Unit kompetensi ini berhubungan dengan Pelatihan Pengenalan Coding

A. Tujuan Umum
Setelah mempelajari modul ini peserta latih diharapkan mampu untuk;
- Meningkatkan literasi digital peserta pelatihan.
- Mendorong minat peserta pelatihan pada teknologi dan pengembangan
perangkat lunak.
- Meningkatkan kemampuan peserta pelatihan untuk memahami dan
berpartisipasi dalam revolusi industri 4.0.

B. Tujuan Khusus
Adapun tujuan mempelajari unit kompetensi melalui buku informasi Pelatihan
Pengenalan Coding adalah ;
- Meningkatkan pemahaman peserta pelatihan tentang cara kerja komputer dan
teknologi terkait.
- Meningkatkan keterampilan pemecahan masalah dan logika peserta pelatihan.
- Meningkatkan keterampilan kreatif dan inovatif peserta pelatihan dalam
membuat program sederhana.
- Meningkatkan keterampilan kolaboratif dan komunikatif peserta pelatihan
dalam pengembangan perangkat lunak.
- Memperkenalkan peserta pelatihan pada berbagai bahasa pemrograman,
platform, dan alat yang dapat digunakan untuk mengembangkan program.
- Mendorong minat peserta pelatihan untuk terlibat dalam pengembangan
perangkat lunak dan teknologi lainnya.
- Mempersiapkan peserta pelatihan untuk mempelajari konsep pemrograman
yang lebih kompleks di masa depan.

Latar belakang

Pelatihan pengenalan coding untuk sekolah dasar dan menengah didasarkan pada
kenyataan bahwa teknologi semakin terintegrasi dalam kehidupan sehari-hari dan
semakin banyak profesi yang membutuhkan pengetahuan dan keterampilan teknologi.
Pembelajaran coding sejak dini dapat membantu siswa mengembangkan pemikiran
kritis, pemecahan masalah, dan kreativitas, serta mempersiapkan mereka untuk masa
depan yang semakin dipengaruhi oleh teknologi.

Selain itu, pelatihan pengenalan coding untuk sekolah dasar dan menengah juga dapat
membantu mengurangi kesenjangan digital di antara siswa, yang terutama terlihat di

2
 negara-negara berkembang di mana akses ke teknologi masih terbatas. Dengan
memberikan kesempatan bagi siswa dari berbagai latar belakang untuk mempelajari
coding, pelatihan ini dapat membantu memperkuat keterampilan teknologi dan
meningkatkan peluang karir di masa depan.

Dengan latar belakang ini, pelatihan pengenalan coding untuk sekolah dasar dan
menengah dapat memberikan manfaat besar bagi siswa, termasuk membantu mereka
membangun keterampilan dan minat dalam teknologi dan mempersiapkan mereka
untuk masa depan yang semakin tergantung pada teknologi.

Deskripsi Pelatihan

Materi ini berisi penjelasan mengenai Pengenalan Coding untuk sekolah dasar dan
menengah yang dirancang untuk memberikan pengenalan dasar tentang pemrograman
komputer, menggunakan bahasa pemrograman sederhana yang mudah dipahami oleh
siswa. Beberapa contoh bahasa pemrograman yang digunakan untuk pelatihan ini
adalah Scratch dan App Inventor

Pelatihan akan berfokus pada konsep dasar pemrograman, seperti variabel,

kondisional, loop, fungsi, dan struktur data. Siswa akan mempelajari bagaimana
menggunakan kode untuk membuat program sederhana, seperti permainan atau
animasi, dan peserta akan diberikan kesempatan untuk mencoba membuat
programnya sendiri.

Pelatihan pengenalan coding disesuaikan dengan usia siswa, dengan menggunakan

permainan dan aktivitas yang menarik perhatian peserta, serta menggunakan bahasa
pemrograman yang mudah dipahami dan dipraktikkan. Biasanya, pelatihan akan
disesuaikan dengan tingkat pemahaman dan kecepatan belajar siswa, sehingga setiap
siswa dapat mempelajari dan menguasai materi dengan baik.

Pelatihan pengenalan coding untuk sekolah dasar dan menengah tidak hanya
memberikan keterampilan teknis dalam pemrograman, tetapi juga membantu
mengembangkan keterampilan lain, seperti kreativitas, kolaborasi, komunikasi, dan
pemecahan masalah. Selain itu, pelatihan ini juga dapat membantu siswa meningkatkan
minat mereka pada teknologi dan mempersiapkan mereka untuk karir di masa depan
yang semakin dipengaruhi oleh teknologi.

Tujuan Pembelajaran

A. Tujuan Umum
Setelah mempelajari modul ini peserta latih diharapkan mampu untuk;
- Meningkatkan literasi digital peserta pelatihan.

3
 - Mendorong minat peserta pelatihan pada teknologi dan pengembangan
perangkat lunak.
- Meningkatkan kemampuan peserta pelatihan untuk memahami dan
berpartisipasi dalam revolusi industri 4.0.

B. Tujuan Khusus
Adapun tujuan mempelajari unit kompetensi melalui buku informasi Pelatihan
Pengenalan Coding adalah ;
- Meningkatkan pemahaman peserta pelatihan tentang cara kerja komputer dan
teknologi terkait.
- Meningkatkan keterampilan pemecahan masalah dan logika peserta pelatihan.
- Meningkatkan keterampilan kreatif dan inovatif peserta pelatihan dalam
membuat program sederhana.
- Meningkatkan keterampilan kolaboratif dan komunikatif peserta pelatihan
dalam pengembangan perangkat lunak.
- Memperkenalkan peserta pelatihan pada berbagai bahasa pemrograman,
platform, dan alat yang dapat digunakan untuk mengembangkan program.
- Mendorong minat peserta pelatihan untuk terlibat dalam pengembangan
perangkat lunak dan teknologi lainnya.
- Mempersiapkan peserta pelatihan untuk mempelajari konsep pemrograman
yang lebih kompleks di masa depan.

Kompetensi Dasar

I. Memahami konsep dasar pemrograman seperti variabel, kondisional, loop, fungsi dan
struktur data.
II. Mampu menggunakan bahasa pemrograman seperti App Inventor untuk membuat
program sederhana.
III. Mampu memecahkan masalah dan merancang algoritma untuk menyelesaikan tugas
tertentu menggunakan kode.
IV. Memahami konsep dasar pengembangan aplikasi, seperti desain antarmuka pengguna
dan pengujian aplikasi.
V. Mampu menganalisis kode dan melakukan debugging untuk menemukan dan
memperbaiki kesalahan.
VI. Memahami prinsip-prinsip digital citizenship dan etika dalam pengembangan
perangkat lunak.

4
 Indikator Hasil Belajar

1. Peserta dapat memahami konsep dasar pemrograman, seperti variabel,

kondisional, loop, fungsi, dan struktur data.
2. Peserta mampu mengidentifikasi masalah yang dapat dipecahkan dengan
menggunakan pemrograman dan merancang solusi untuk masalah tersebut.
3. Peserta mampu menggunakan bahasa pemrograman yang diajarkan dengan
baik dan benar, serta mampu menguji program yang dibuat dan memperbaiki
kesalahan.
4. Peserta mampu merancang dan membuat program sederhana, seperti
permainan atau animasi, dengan menggunakan bahasa pemrograman yang
diajarkan.
5. Peserta mampu mempresentasikan program yang dibuat secara efektif dan jelas
kepada audiens yang ditentukan.
6. Peserta memiliki keterampilan dasar dalam menganalisis dan menyelesaikan
masalah menggunakan teknologi.

INFORMASI PELATIHAN

Akademi Thematic Academy

Mitra Pelatihan Coding Bee Academy

Tema Pelatihan Pelatihan Pengenalan Coding untuk anak SD dan

SMP/Sederajat

Sertifikasi -

Persyaratan Sarana Peserta/spesifikasi device - Laptop/Komputer

Tools/media ajar yang akan digunakan - Prosesor : Minimal Intel Core i3 atau
yang setara
- Ram : Minimal 4GB
- Penyimpanan : minimal 128GB SSD
- Sistem Operasi : Windows 10, MacOS
- Smartphone
- Minimal versi Android 4.1 - Jelly Bean
- Modul Pelatihan (LMS)
- Akun email

5
 Aplikasi yang akan di gunakan selama pelatihan - App Inventor

Tim Penyusun - Sari Putera

- M Firdaus Bahri
- Shaumy Alamanda
- Fitri Novita
- Ahadi Rahmanto

INFORMASI PEMBELAJARAN

Unit Kompetensi Materi Kegiatan Durasi Rasio Sumber

pembelajaran pembelajaran Pelatihan Praktek : Teori pembelajaran

I. Pengenalan - Penjelasan Materi 1 JP 60 : 40 Modul Pelatihan

● Memahami
Mobile App - Praktek
Mobile App
Development - Diskusi
Development
- Pre dan Post Test
● Memahami Fitur
fitur apa saja
untuk membuat
aplikasi menjadi
interaktif

Materi Pokok

Pengenalan Mobile App Development

Sub Materi Pokok

● Memahami Mobile App Development

● Memahami fitur apa saja untuk membuat aplikasi menjadi interaktif

6
 I. Pendahuluan

Pada akhir-akhir ini kita sering mendengar kata coding. Mungkin beberapa orang
hanya tahu kalau coding itu adalah sesuatu hal yang berhubungan dengan komputer atau
teknologi. Tetapi apa sebenarnya coding itu?

Coding adalah perintah yang kita berikan kepada komputer untuk dikerjakan
olehnya. Dengan kata lain untuk berkomunikasi dengan komputer kita memerlukan
coding. Jadi coding itu seperti menginterpretasikan bahasa manusia kedalam bahasa
komputer/mesin. Orang yang melakukannya disebut coder.

Di jaman teknologi yang berkembang pesat, pembelajaran coding sangat diperlukan.

Karena dengan coding kita dapat membangun solusi dalam berbagai permasalahan global
di berbagai bidang seperti : teknologi, transportasi, informasi dan komunikasi. Dalam
pembelajaran komputer, kita juga mengenal sebuah istilah yang disebut algoritma dan
sequence. Algoritma dan sequence adalah dua konsep yang sering digunakan dalam
kehidupan sehari-hari, meskipun mungkin tidak selalu kita sadari hal tersebut.

1. Algoritma

Dalam ilmu komputer, Algoritma adalah suatu proses yang terstruktur dan
memiliki langkah-langkah yang jelas untuk menyelesaikan suatu masalah atau tugas
tertentu. Algoritma digunakan untuk memecahkan masalah secara sistematis dan
memiliki kemampuan untuk diimplementasikan dalam berbagai bahasa pemrograman.
Sebenarnya algoritma ini sering kita temui dalam kehidupan sehari-hari. Contoh
sederhananya adalah algoritma memasak air:

1. Siapkan panci
2. Masukkan air sesuai kebutuhan kedalam panic
3. Letakkan panci di atas kompor
4. Nyalakan kompor
5. Jika terdapat gelembung-gelembung udara dalam air, artinya air sudah mendidih.
6. Matikan kompor

7
 Tentu pada contoh diatas, ada beberapa detail yang dilewatkan. Dengan bahasa
sehari-hari, manusia bisa cukup mengerti algoritma di atas. Tetapi algoritma yang harus
disusun untuk komputer menggunakan coding perlu lebih detail.

Beberapa hal yang harus diperhatikan dalam pembuatan suatu algoritma antara lain:
● Langkah-langkah harus jelas dan mudah dipahami.
● Langkah-langkah harus dapat dilakukan secara otomatis oleh mesin.
● Algoritma harus memiliki hasil yang jelas dan dapat diperiksa.
● Algoritma harus efisien dan memiliki waktu eksekusi yang terbatas.

2. Sequence

Dalam ilmu komputer juga terdapat yang dinamakan, Sequence yang merupakan
suatu urutan atau rangkaian item atau elemen yang berurutan dan memiliki hubungan
antara satu elemen dengan elemen lainnya. Dalam bidang teknologi informasi, sequence
sering digunakan untuk menyimpan dan mengelola data dalam urutan tertentu, seperti
urutan data waktu, urutan data geografis, atau urutan data alfabetis.

3. App Inventor

App Inventor adalah sebuah platform pengembangan aplikasi untuk Android

yang dikembangkan oleh Google dan sekarang diakuisisi oleh Massachusetts Institute of
Technology (MIT). Ini memungkinkan pemula dan pengguna tanpa latar belakang
pengembangan aplikasi untuk membuat aplikasi Android dengan mudah, tanpa menulis
kode. App Inventor menggunakan visual interface drag-and-drop yang memungkinkan
pengguna membuat aplikasi dengan memasukkan blok-blok pemrograman. Ini sangat
baik untuk pemula atau siswa yang ingin mempelajari dasar-dasar pemrograman dan
pengembangan aplikasi. App Inventor juga sangat fleksibel dan memungkinkan
pengguna membuat aplikasi yang kompleks dengan fitur yang lebih maju.

Buka link : https://appinventor.mit.edu/

8
Pilih create apps

Kita bisa melakukan login menggunakan akun google

Project page pada App inventor / tampilan awal setelah login app inventor

Tampilan dalam page Designer App Inventor

Page Designer berfungsi untuk menentukan tata letak dan desain dari halaman aplikasi

9
Tampilan dalam page Bloks App Inventor

Page Blocks berfungsi untuk meletakan/membuat perintah untuk setiap

kompenen yang telah dipasangkan pada page designer

App Inventor menyediakan beberapa komponen visual yang dapat digunakan

untuk membuat aplikasi Android. Beberapa komponen paling umum antara lain:

Button: komponen yang memungkinkan pengguna untuk mengklik dan memicu

tindakan tertentu.

Label: komponen yang memungkinkan pengguna untuk menampilkan teks pada

layar.

10
TextBox: komponen yang memungkinkan pengguna untuk memasukkan teks.

Image: komponen yang memungkinkan pengguna untuk menampilkan gambar

pada layar.

ListView: komponen yang memungkinkan pengguna untuk menampilkan daftar

item pada layar.

Spinner: komponen yang memungkinkan pengguna untuk memilih satu item dari
daftar item.

Sound: komponen yang memungkinkan pengguna untuk memainkan suara pada

aplikasi.

Accelerometer Sensor: komponen yang memungkinkan pengguna untuk

memantau pergerakan perangkat dan memicu tindakan tertentu berdasarkan
pergerakan.

11
 Camera: komponen yang memungkinkan pengguna untuk membuat foto dan
menyimpan foto pada aplikasi.

Komponen ini hanya beberapa contoh dari komponen yang tersedia di App
Inventor. Terdapat banyak komponen lain yang tersedia dan dapat digunakan untuk
membuat aplikasi yang lebih kompleks dan canggih.

4. Variabel

Setelah mengetahui komponen-komponen dari app inventor maka kita akan

mempelajari salah satu konsep yang umum digunakan. Variable atau variabel adalah
suatu tempat yang digunakan untuk menyimpan suatu nilai yang dapat berubah-ubah.
Dalam pemrograman, variabel digunakan untuk menyimpan data dan informasi yang
dibutuhkan oleh program untuk menjalankan tugasnya. Setiap variabel memiliki nama
yang unik dan tipe data yang ditentukan, seperti integer, string, atau boolean, yang
menentukan jenis nilai yang dapat disimpan dalam variabel tersebut.

Variabel dalam kehidupan sehari-hari bisa dijumpai dalam banyak hal, contohnya:

1. Suhu
Suhu adalah variabel yang sangat umum dalam kehidupan sehari-hari. Kita
menggunakan termometer untuk mengukur suhu dalam rumah, suhu udara luar,
suhu air, dan sebagainya.
2. Waktu
Waktu juga merupakan variabel yang sering kita gunakan dalam kehidupan
sehari-hari. Kita menggunakan jam untuk mengukur waktu dan menentukan
kapan harus melakukan kegiatan tertentu.
3. Berat
Berat adalah variabel yang digunakan untuk mengukur seberapa berat suatu
objek. Kita menggunakan timbangan untuk mengetahui berat benda atau barang
yang kita beli.

12
 4. Jarak
Jarak adalah variabel yang digunakan untuk mengukur jarak antara dua titik. Kita
menggunakan meteran untuk mengukur jarak antara dua tempat.
Variabel juga dapat ditemukan dalam konteks ilmiah, matematika, atau teknologi.
Dalam App Inventor, variabel dapat dibuat dan digunakan melalui blok-blok dalam
aplikasi, seperti blok penyimpanan atau blok perhitungan. Variabel dapat berisi
berbagai jenis nilai, seperti teks, angka, atau boolean. Nilai variabel dapat dimodifikasi
dan digunakan kembali dalam aplikasi selama jangka waktu yang diperlukan. Berikut
adalah blok-blok variabel yang digunakan pada app inventor.

● Blok ini digunakan untuk membuat variabel, kita bisa mengubah kolom name
untuk memberikan nama pada variabel tersebut. Terdapat slot kosong pada
bagian kanan digunakan untuk mengisi nilai dari variabel tersebut

● Blok ini digunakan untuk menentukan nilai pada variabel tertentu

● Blok ini digunakan untuk mengambil nilai dari variabel tertentu

5. Tipe Data

Seperti yang sudah kita bahas sebelumnya bahwa variabel adalah suatu tempat
yang digunakan untuk menyimpan suatu nilai yang dapat berubah-ubah. Dalam
pemrograman, variabel digunakan untuk menyimpan data dan informasi yang
dibutuhkan oleh program untuk menjalankan tugasnya. Setiap variabel memiliki nama
yang unik dan tipe data yang ditentukan, seperti integer, string, atau boolean, yang
menentukan jenis nilai yang dapat disimpan dalam variabel tersebut.

Tipe data adalah konsep yang penting karena mengacu pada jenis nilai yang
dapat disimpan dan diolah oleh sebuah program. Tipe data menentukan bagaimana nilai
dapat diperlakukan dan dioperasikan dalam program, termasuk operasi aritmatika,
operasi logika, dan lain-lain.

13
Berikut adalah beberapa tipe data yang umum digunakan dalam pemrograman:

1. Tipe data angka: termasuk bilangan bulat (integer) dan bilangan desimal
(floating-point). Bilangan bulat adalah bilangan tanpa angka desimal, sedangkan
bilangan desimal memiliki angka desimal.
2. Tipe data teks: digunakan untuk menyimpan karakter atau string. String adalah
kumpulan karakter yang diapit oleh tanda petik ganda atau tunggal
3. Tipe data boolean: digunakan untuk menyimpan nilai benar (True) atau salah
(False). Tipe data boolean sering digunakan dalam operasi logika dan
pengambilan keputusan.
4. Tipe data daftar atau list: digunakan untuk menyimpan kumpulan nilai dalam
satu variabel. Daftar dapat berisi nilai dari tipe data apapun, seperti angka, teks,
atau bahkan daftar lain.

Pemilihan tipe data yang tepat dapat membantu meningkatkan kinerja program
dan mengurangi kesalahan dalam pengolahan data. Oleh karena itu, penting untuk
memahami tipe data dan cara penggunaannya dalam bahasa pemrograman yang
digunakan.

6. Event-based

Untuk menggunakan variabel biasanya kita menggunakan sebuah bloks yang

termasuk dalam kategori Event-based, Event-based adalah sebuah konsep yang
digunakan dalam pemrograman untuk mengacu pada suatu proses atau aksi yang
diinisiasi oleh suatu kejadian atau event tertentu. Contohnya, dalam aplikasi yang
membutuhkan interaksi pengguna, seperti aplikasi ponsel atau situs web, ketika
pengguna menekan tombol pada layar, aksi ini menjadi event yang mengaktifkan suatu
fungsi atau perubahan pada aplikasi.

Dalam App Inventor, event adalah suatu kejadian yang terjadi saat pengguna
melakukan interaksi dengan komponen pada aplikasi, seperti menekan tombol,
menggeser layar atau memutar perangkat. Setiap kali pengguna melakukan interaksi,
event ini memicu sebuah prosedur atau fungsi tertentu untuk menjalankan tindakan
yang sesuai.

14
 Contoh event dalam App Inventor adalah ketika pengguna menekan tombol, ini
akan memicu event Click dan menjalankan prosedur yang ditentukan oleh pembuat
aplikasi. Pengguna juga dapat memicu event lain, seperti ketika memutar perangkat,
memutar layar, atau menyentuh area tertentu pada layar. App Inventor menyediakan
berbagai jenis event dan pengelola kejadian (event handler) yang dapat dipilih dan
disesuaikan sesuai kebutuhan pengguna untuk membuat aplikasi yang lebih interaktif
dan dinamis. berikut merupakan event yang umum digunakan dalam aplikasi:

7. Conditional

Sebelumnya kita telah mempelajari tentang komponen-komponen pada app

inventor serta konsep dasar dari pemrograman yaitu Algoritma dan Sequence. Selain
itu, terdapat konsep penting dalam pemrograman yang dinamakan, Conditional
statements dalam pemrograman adalah konstruksi logika yang memungkinkan kode
untuk diambil atau diabaikan berdasarkan hasil evaluasi suatu kondisi. Terdapat
beberapa jenis pernyataan kondisional yang sering digunakan, diantaranya:

1. Kondisional yang pertama adalah “if” statement: pernyataan ini memungkinkan

kode untuk diambil jika kondisi tertentu terpenuhi

15
 Pernyataan “if” juga dapat digunakan dalam kehidupan sehari-hari untuk
membuat keputusan berdasarkan kondisi yang ada. Berikut adalah beberapa
contoh penggunaan pernyataan “if” dalam kehidupan sehari-hari:

● Memutuskan apakah akan membawa payung saat berpergian

● Memutuskan apakah harus membeli makanan
● Memutuskan apakah harus berolahraga

Dengan menggunakan pernyataan “if”, kita dapat membuat keputusan yang

sesuai dengan kondisi yang ada, sehingga dapat mengoptimalkan waktu dan
usaha yang kita lakukan, berikut adalah contoh penggunaan block “if” pada
aplikasi

2. Kondisional yang kedua adalah “if-else” statement: pernyataan ini

memungkinkan kode untuk diambil jika kondisi tertentu terpenuhi, atau kode
lain diambil jika kondisi tersebut tidak terpenuhi.

Pernyataan if-else juga dapat digunakan dalam kehidupan sehari-hari untuk

membuat keputusan berdasarkan kondisi yang ada. Berikut adalah beberapa
contoh penggunaan pernyataan if-else dalam kehidupan sehari-hari:

● Ketika cuaca panas, memutuskan akan membuka atau menutup jendela

● Ketika berjarak dekat, memutuskan apakah harus berjalan kaki atau
menggunakan transportasi
● Ketika memiliki uang, Memutuskan apakah harus membeli barang atau
tidak membeli barang

Dengan menggunakan pernyataan “if-else”, kita dapat membuat keputusan yang

sesuai dengan kondisi yang ada, sehingga dapat mengoptimalkan waktu dan

16
 usaha yang kita lakukan, berikut merupakan contoh penggunaan block “if-else”
pada aplikasi

3. Kondisional yang ketiga adalah “elif” adalah singkatan dari "else if" dan
merupakan bagian dari pernyataan kondisional “if-else” dalam pemrograman.
Pernyataan “elif” memungkinkan untuk mengevaluasi lebih dari satu kondisi dan
memilih kode yang akan diambil berdasarkan hasil evaluasi.

Pernyataan “else if” juga dapat digunakan dalam kehidupan sehari-hari untuk
membuat keputusan berdasarkan lebih dari satu kondisi yang ada. Berikut
adalah beberapa contoh penggunaan pernyataan “elif” dalam kehidupan
sehari-hari:

● Ketika cuaca panas, memutuskan apakah harus membuka atau menutup

jendela atau memasang AC jika memiliki uang cukup maka
● Ketika jarak dekat, memutuskan apakah harus mengambil jalan kaki,
menggunakan transportasi jika memiliki cukup uang, atau membawa
kendaraan pribadi
● Ketika memiliki uang, memutuskan apakah harus membeli barang,
meminjam barang jika ada teman yang bersedia meminjamkan, atau tidak
membeli barang sama sekali

Dengan menggunakan pernyataan “else if”, kita dapat membuat keputusan yang
sesuai dengan lebih dari satu kondisi yang ada, sehingga dapat mengoptimalkan
waktu dan usaha yang kita lakukan, berikut contoh penggunaan blok “else if”
dalam aplikasi.

17
 8. Operator

Ketika kita membahas tentang tipe data dan variabel, hal tersebut tidak akan
lepas dengan conditional karena untuk penggunaan tipe data untuk membuat suatu
operasi logika kita juga harus menggunakan conditional untuk media seleksinya,
sedangkan untuk menggabungkan conditional dan variabel kita membutuhkan operator.

Operator dalam pemrograman adalah simbol atau tanda yang digunakan untuk
melakukan operasi pada satu atau beberapa nilai. Operator digunakan untuk
memanipulasi data dan menghasilkan hasil yang diinginkan. Operator dapat digunakan
untuk melakukan operasi matematika, perbandingan, logika, penggabungan string, dan
operasi pada bit.

Berikut adalah beberapa jenis operator dalam pemrograman:

1. Operator Aritmatika
Operator aritmatika digunakan untuk melakukan operasi matematika seperti
penjumlahan (+), pengurangan (-), perkalian (*), pembagian (/), dan modulus
(%).
3. Operator Perbandingan
Operator perbandingan digunakan untuk membandingkan dua nilai. Beberapa
operator perbandingan adalah sama dengan (==), tidak sama dengan (!=), kurang
dari (<), lebih dari (>), kurang dari sama dengan (<=), dan lebih dari sama
dengan (>=).
4. Operator Logika
Operator logika digunakan untuk menggabungkan dua nilai logika (benar atau
salah) untuk menghasilkan nilai logika yang baru. Beberapa operator logika
adalah AND (&&), OR (||), dan NOT (!).
5. Operator Penugasan
Operator penugasan digunakan untuk menetapkan nilai ke variabel. Beberapa
operator penugasan adalah sama dengan (=), tambah sama dengan (+=), kurang
sama dengan (-=), kali sama dengan (*=), dan bagi sama dengan (/=).

Operator sangat penting dalam pemrograman karena digunakan untuk

memanipulasi data dan menghasilkan hasil yang diinginkan. Dengan memahami jenis

18
operator yang ada dan cara menggunakannya, Anda dapat membuat kode program yang
lebih efisien dan efektif. Berikut adalah contoh potongan penggunaan conditional,
variable dan operator:

Potongan bloks diatas berfungsi untuk melakukan perhitungan aritmatika pada

kalkulator.

9. Coordinate

Selain konsep dari pemrograman, kita juga perlu mengetahui cara untuk
mengatur komponen yang ada pada page designer dengan mengetahui Coordinate.
Coordinate pada App Inventor adalah lokasi relatif sebuah objek atau komponen dalam
aplikasi yang diukur dalam piksel. Setiap objek atau komponen memiliki koordinat X
dan Y yang menentukan posisi objek tersebut dalam aplikasi.

Dalam App Inventor, koordinat X dan Y dimulai dari kiri atas layar dengan nilai X
dan Y yang semakin besar ke kanan dan bawah layar. Misalnya, jika Anda ingin
menempatkan sebuah Button di tengah layar, Anda dapat menentukan koordinatnya
dengan cara mengukur setengah dari lebar layar dan setengah dari tinggi layar.

Anda dapat mengatur koordinat secara dinamis dengan menggunakan blok

Blocks, seperti menggerakkan sebuah objek atau komponen dalam aplikasi. Pemahaman
tentang coordinate pada App Inventor sangat penting dalam merancang dan
membangun aplikasi yang interaktif dan responsif.

19
 10.Nested-conditional

Pada materi sebelumnya kita sudah membahas tentang Variabel, macam-

macam Tipe Data, Operator serta gabungan untuk kondisional. Selain itu untuk
kondisional sendiri bisa kita kembangkan sesuai dengan yang dibutuhkan, contohnya
ada sebuah konsep yang dinamakan nested-conditional. Nested-conditional adalah
sebuah struktur pengkondisian di dalam struktur pengkondisian lainnya. Dalam bahasa
pemrograman, nested conditional biasanya dibuat menggunakan statement if. Contoh
sederhana dari nested conditional adalah sebagai berikut:

Potongan bloks diatas berfungsi untuk menghitung nilai akhir yang akan didapat.
Ketika variabel nilai lebih besar dari 80 dan jika variabel nilai kurang dari 94 maka akan
mendapatkan nilai akhir “A” sedangkan jika nilai nya 95 atau lebih besar maka akan
mendapat nilai “A+”

11.Function / Procedure

Kita juga harus mengetahui tentang Function atau procedure dalam app
inventor, Procedure dalam App Inventor adalah blok kode yang dibuat oleh pengguna
untuk menjalankan tindakan tertentu pada aplikasi. Dalam App Inventor, procedure
digunakan untuk menyederhanakan program dengan memungkinkan pengguna untuk
menyimpan blok kode yang sering digunakan dalam satu prosedur, sehingga
memudahkan pengguna untuk mengulang tindakan yang sama tanpa harus menulis
kode yang sama berulang-ulang.

Pengguna dapat membuat prosedur sendiri atau menggunakan prosedur yang

sudah tersedia dalam App Inventor. Prosedur dapat dihubungkan dengan event dan blok

20
kontrol lainnya, sehingga memungkinkan pengguna untuk mengatur alur program
dengan lebih efisien dan efektif. Setelah prosedur dibuat, pengguna dapat
memanggilnya kembali dalam program atau event lainnya dengan menggunakan blok
panggilan prosedur (procedure call).

Contoh penggunaan prosedur dalam App Inventor adalah ketika pengguna ingin
membuat aplikasi dengan fitur yang sama, seperti memutar musik atau memeriksa suhu
setiap beberapa detik. Dalam hal ini, pengguna dapat membuat prosedur khusus untuk
tindakan ini dan memanggilnya kembali dalam event tertentu. Dengan demikian,
pengguna tidak perlu menulis kode yang sama berulang-ulang dalam program dan
membuat program menjadi lebih efisien dan mudah diatur. Berikut adalah bloks
procedure yang digunakan untuk membuat fungsi sesuai yang diinginkan oleh
pengguna dan bloks kedua berfungsi untuk memanggil fungsi procedure pada bloks
pertama

12.Offline Database (TinyDB)

Dalam app inventor kita dapat menyimpan variabel dalam Offline Database
atau TinyDB. TinyDB adalah sebuah komponen atau database sederhana yang
digunakan dalam App Inventor untuk menyimpan data secara lokal pada perangkat
pengguna. TinyDB dapat menyimpan data dalam format pasangan kunci-nilai (key-value
pair) dan menyimpan data dalam bentuk file yang terletak di perangkat pengguna.

TinyDB berguna dalam pengembangan aplikasi yang membutuhkan

penyimpanan sederhana dan lokal, seperti game sederhana, aplikasi to-do list, atau
aplikasi pengingat. Dalam TinyDB, setiap pasangan kunci-nilai memiliki tipe data
tertentu, seperti teks, angka, atau boolean. Data dapat disimpan, diambil, dihapus, dan
dimodifikasi melalui blok atau prosedur yang tersedia di App Inventor. Dibawah ini
merupakan bloks yang umum digunakan dalam kategori TinyDB

21
 13.Multiple Screen

Multiple screen adalah konsep dalam pembuatan aplikasi yang memungkinkan

pengguna berpindah antara layar atau tampilan yang berbeda dalam satu aplikasi.
Dalam konteks App Inventor, multiple screen memungkinkan kita untuk membuat
aplikasi yang memiliki lebih dari satu tampilan atau layar, sehingga pengguna dapat
beralih antara satu tampilan dengan yang lain untuk memproses data atau melakukan
tugas tertentu. Dalam multiple screen, setiap layar memiliki tampilan atau fungsi yang
berbeda-beda tergantung dari tujuan aplikasi yang dibuat. Multiple screen sangat
penting dalam pembuatan aplikasi karena memungkinkan aplikasi lebih kompleks dan
lebih terstruktur serta memberikan pengalaman yang lebih baik bagi pengguna. Kita
bisa menambahkan screen atau mengganti screen dengan menu dibawah ini:

Posisi menu ini terletak pada bagian samping nama project aplikasi yang kita buat.

Untuk membuat Multiple Screen pada App Inventor, kita dapat mengikuti
langkah-langkah berikut:

1. Buatlah tampilan antarmuka (UI) dari setiap layar yang akan digunakan pada
aplikasi menggunakan Page Designer pada App Inventor. Setiap tampilan
antarmuka dapat disesuaikan dengan kebutuhan aplikasi.
2. Tambahkan komponen Button pada setiap tampilan antarmuka untuk
menghubungkan antara satu tampilan dengan tampilan lainnya. Misalnya, jika
kita ingin membuat tombol "Next" pada tampilan pertama yang akan membuka
tampilan kedua, maka kita dapat menambahkan blok program yang
memungkinkan tombol "Next" membuka tampilan kedua.
3. Pilih tampilan antarmuka utama yang akan menjadi tampilan awal ketika aplikasi
dijalankan.

22
 4. Tambahkan blok program pada Blocks Editor untuk mengatur fungsi navigasi
antara tampilan antarmuka. Misalnya, jika kita ingin membuat tombol "Back"
pada tampilan kedua yang akan kembali ke tampilan pertama, maka kita dapat
menambahkan blok program yang memungkinkan tombol "Back" kembali ke
tampilan pertama.
5. Uji aplikasi untuk memastikan bahwa navigasi antara tampilan antarmuka
berfungsi dengan baik.

Dengan menggunakan Multiple Screen pada App Inventor, kita dapat membuat aplikasi
yang lebih kompleks dan fungsional. Namun, kita juga perlu memperhatikan desain
tampilan antarmuka dan navigasi antara tampilan antarmuka agar aplikasi mudah
digunakan oleh pengguna.

23
 II. Exercise

1. Buatlah page designer dengan potongan bloks seperti gambar dibawah

2. Gunakan page designer serta page bloks untuk membuat aplikasi seperti gambar
dibawah

3. Gunakan event handler untuk button click dan gunakan procedure untuk
memanggil notifier text seperti gambar dibawah

24
4. Gunakan event handler untuk button click dan gunakan operator (*) untuk
menghitung luas bangunan menggunakan variabel (panjang x lebar) seperti
gambar dibawah

5. Buatlah aplikasi menggunakan nested-conditional untuk menentukan nilai yang

didapat (A > 84 | B > 74 | C > 64 | D)

6. Buatlah aplikasi untuk mengganti screen dengan button, seperti contoh dibawah

25
 III. Tutorial Project

1. Translator App

Translator App adalah aplikasi yang digunakan untuk menerjemahkan teks atau
kata-kata dari satu bahasa ke bahasa lain.

Design Component

Screen1 AlignHorizontal: AlignVertical: Accent Background

Center Center Color : Blue Color : Cyan

Label3 Font : Bold Height : 10% Width : Text :

Font Size : 25 Automatic Translator
App

Horizontal AlignHorizontal: AlignVertical:

Arrangement1 Center Center

Spinner Element From String : Indonesia, Inggris, Prancis, Korea, Jerman

Translate_button Font : Bold Heigh : 35% Width: Text :

Font Size : 13 Automatic Translate

26
 Input Font Size : 15 Height : 100 Width : Hint : Insert
pixels 80% Text

Result Font Size : 15 Heigh : Width: Text : Result

Automatic Automatic

Label1 & Label2 Berfungsi untuk memberikan jarak antar komponen

Coding Component

Membuat variable language_code untuk menyimpan kode negara yang akan dipilih
dengan spinner

Membuat event-handler untuk menentukan selection untuk bahasa, menggunakan kode

2 huruf negara sesuai dengan bahasa yang kita pilih

Block ini berfungsi agar menampilkan kata atau kalimat yang sudah diterjemahkan dan
mengambil bloks pada text to speech untuk dibacakan

27
Event handler untuk memproses kata atau kalimat yang akan diterjemahkan

28
 2. Project Doodle App
Doodle App adalah salah satu aplikasi simple yang dapat didesain dan dibuat
oleh siswa untuk menerampilkan kreativitas dan mengerti komponen penting
dalam mendesain sebuah aplikasi.

Design Component

Slider1 Width : Fill Parent MaxValue : 100 MinValue ThumbPositi

: 10 on : 30

Horizontal AlignHorizontal: AlignVertical: Height: Width: Fill

Arrangement1 Center Center Automati Parent
c

Spinner1 ElementFromStri Width : Fill **warna disesuaikan

ng: Parent dengan yang diinginkan
Black,Red,Blue,Gr
een

Button Text : Clear

(rename : Clear)

29
 Canvas1 Height: 80 Width: Fill
percent Parent

AccelerometerSens Enabled : MinimumInter Sensitivit

or1 Checklist val: 400 y:
moderat
e

Coding Component
Saat Screen1 initialize, tampilan slider akan membentang dengan value dari 10 - 100
untuk ketebalan garis.

Block ini berfungsi agar setiap kita geser slidenya, ketebalan garisnya akan
menyesuaikan

Bisa menghapus dengan cara shaking handphone

Pengaturan canvas agar canvas bisa dipakai untuk menggambar

Warna yang mau dipakai bisa diatur di sini dan warna yang muncul sesuai dengan
warna yang kita pilih

30
31
 3. To-do List App
To-do List app adalah aplikasi yang digunakan untuk mencatat tugas-tugas atau
aktivitas yang harus dilakukan oleh pengguna dalam jangka waktu tertentu.
Aplikasi ini biasanya memiliki fitur untuk menambah, mengedit, dan menghapus
daftar tugas, serta mengatur prioritas, tenggat waktu, dan pengingat untuk setiap
tugas.

Design Component

Screen1 AlignHorizontal : Align Vertical:

Center Top

Task_Label Font Size : 20 Height : Auto Width :

Auto

Input Font Size : 20 Height : Auto Width :

80%

Submit_Butto Background Color : Font : Bold, Font Size : Shape :

n Blue Italic 20 Rounded

Text Alignment :
Center

32
 List Background Color : Section Color :
White Black

TinyDB

Coding Component

Membuat variabel task yang berisikan list

Membuat event-handler yang berfungsi untuk menyimpan input text yang sudah kita
buat agar dapat disimpan pada TinyDB dan list, serta membuat text box input agar
menjadi kosong

Event-handler yang berfungsi untuk menghapus index list yang ditampilkan ketika kita
klik atau pilih index yang tampil

33
 4. Stopwatch App
Stopwatch App adalah aplikasi yang memungkinkan pengguna untuk mengukur
waktu secara digital. Aplikasi ini biasanya dilengkapi dengan tombol start, pause,
dan reset, serta tampilan waktu yang terus berjalan.

Design Component

Screen1 AlignHorizontal : Align Background Color :

Center Vertical: Custom(#5aabffff)
Center

Horizontal AlignHorizontal : Align

Arrangement2 Center Vertical:
Center

Stopwatch Font Size : 30 Height : Width : Auto Text : 00

Auto

Min, Sec & Font Size : 20 Height : Width : Auto Text : 00

MiSec Auto

Label 1 & Label Font Size : 20 Height : Width : 90 pixels Text : :

2 Auto (Titik dua)

34
Label_Paused Font : Italic Height : Weight : Auto Text :
50 pixels Paused
Visible :
false

Horizontal AlignHorizontal : Align

Arrangement1 Left Vertical:
Top

Start Font : Bold Height : Weight : Auto Text : Start

Pause Auto Text : Pause
Reset Text : Reset

Clock1 Time Interval :

10

Coding Component

Membuat variabel second, minutes dan millisecond yang dengan nilai awal 0

Membuat event-handler yang berfungsi untuk menjalankan waktu dan mengubah nilai
dari variabel yang sudah dibuat, serta mengubah label Min, Sec dan MiSec berdasarkan
pada variabel

35
Event-handler yang berfungsi untuk memulai kembali waktu yang telah di pause atau di
reset

Event-handler yang berfungsi untuk menunda waktu berjalan dan menampilkan tulisan
“paused”

Event-handler yang berfungsi untuk mengulang waktu yang telah berjalan.

36
 5. Countdown Timer App

Countdown Timer App adalah sebuah aplikasi yang dapat digunakan untuk
menghitung mundur waktu tertentu, sehingga pengguna dapat memperkirakan
waktu yang tersisa hingga suatu peristiwa atau acara dimulai.

Design Component

HA1 Heigh : Auto Width : Fill

Parent

VA1 Align Horizontal : Align

Center Vertical:
Center

Label1 Font Size : 20 Height : Auto Width : Auto Text : Set

time for :

Textbox1 Font Size : 14 Height : 35 Width : 50 Number

pixels pixels Only

Label2 Font Size : 14 Height : Auto Width : Auto Text :

minutes

37
VA2 Align Horizontal : Align Vertical Heigh : Auto Width : Fill
Center : Top Parent

HA2 AlignHorizontal : Align Height : Width : Auto

Center Vertical: Auto
Center

seconds Font Size : 50 Height : Auto Weight : Text : 0

Auto

left Font Size : 10 Height : Auto Weight : Fill Text : second

Parent left

HA3 AlignHorizontal : Align Height : Width : Auto

Left Vertical: Top Auto

Pause_button Font Size : 14 Height : 35 Vertical : Text : Pause

Continue_button Shape : Rounded pixels 100 pixels Text :
Cancel_button Continue
Text : Cancel

Clock Timer Always Fires Time Interval

: Active : 1000

Sound1 Minimum Interval : Source : alarm sound (Bisa di download)

500

Coding Component

Membuat variabel time start untuk menghitung waktunya

Membuat event-handler yang berfungsi untuk menghitung waktu dan mengurangi nilai
dari variabel yang sudah dibuat, serta mengubah label seconds berdasarkan pada
variabel dan ketika variabel timestart sudah bernilai 0 maka akan menghentikan
countdown dan memunculkan start button

38
Event-handler yang berfungsi untuk memunculkan start button

Event-handler yang berfungsi untuk memulai waktu dan menghilangkan button start

Event-handler yang berfungsi untuk menunda waktu yang telah berjalan.

Event-handler yang berfungsi untuk memulai kembali countdown

Event-handler yang berfungsi untuk menghentikan waktu berjalan, menampilkan

button start, menyembunyikan button continue dan membuat label text dan variabel
menjadi 0

39
 6. Media Player App

Media Player App adalah aplikasi yang dirancang untuk memainkan dan mengelola
berbagai jenis file media seperti video dan audio. Dalam aplikasi ini, pengguna dapat
memutar, mengatur, dan mengelola file media yang tersimpan di perangkat mereka.
Design Component

Buat 3 screen dan design dibawah ini untuk design screen 1.

Perhatikan Components untuk mengetahui komponen yang kita gunakan.

40
 Screen1 Align
Horizontal :
Center

Label1 Font Size : 50 Height : Width : Text : Media

automatic automatic Player

Label 2 Font Size : 20 Height : Width : Text : Select what

automatic automatic you want to play

Horizontal Align Align Height :Fill Width : Fill

Arrangement1 Horizontal: Vertical: Parent Parent
Center Center

ButtonMusic Height : 25 Width : 50 Image : Text : kosongkan

Percent Percent Music.jpg saja

ButtonVideo Height : 25 Width : 50 Image : Text : kosongkan

Percent Percent Video.png saja

Note : Gambar bisa di download di Google Classroom dan upload semuanya ke Media
lalu sesuaikan gambar yang ingin kita gunakan di bagian Properties - Image

41
Berikut ini design untuk screen2

Screen2 Align Horizontal : Left

ButtonBack Height : 50 pixels Width : Image : Text :

50 Back.png kosongkan
pixels saja

Image Height : automatic Width : Picture : Text :

Fill Music.jpg Select
Parent what you
want to
play

Horizontal Align Horizontal: Center Align Height Width : Fill

Arrangement Vertical: :automati Parent
1 Center c

42
ButtonOpen Height : 50 pixels Width : Image : Text :
50 Open.jpg kosongkan
Pixels saja

Horizontal Align Horizontal: Center Align Height Width : Fill

Arrangement Vertical: :automati Parent
2 Center c

Button Height : 50 pixels Width : Image : Text :

PlayPause 50 Play.png kosongkan
Pixels saja

Label2 Height : automatic Width : Text : *label ini

10 kosongka fungsinya
percent n saja untuk
jarak
antara
button*

ButtonStop Height : 50 pixels Width : Image : Text :

50 Stop.png kosongkan
Pixels saja

Player1 Volume : 50

ActivityStarte Action : DataTyp

r1 android.intent.action.GET_CONT e:
ENT audio/*

43
Berikut ini design untuk screen3

Screen3 AlignHorizontal: Left AlignVerti

cal: Top

ButtonBack Height : 50 pixels Width : 50 Image : Text:

Pixels Back.png kosong
kan saja

HorizontalArrange AlignHorizontal: Center AlignVerti Height: Width :

ment2 cal: Top automatic Fill
Parent

Label2 Height : automatic Width : FontSize : Text :

automatic 30 Video
Player

44
HorizontalArrange AlignHorizontal: Left AlignVerti Height: Width :
ment1 cal: automatic Fill
Center Parent

ButtonOpen Height : 50 pixels Width : 50 Image : Text:

Pixels Open.png kosong
kan saja

Label1 Height: automatic Width : Text : *label

Fill Parent kosongkan ini
saja fungsin
ya
untuk
jarak
antara
button*

ButtonFull Height : 50 pixels Width : 50 Image : Text:

Pixels Fullscreen kosong
.jpg kan saja

VideoPlayer1 Height : Fill Parent Width : Volume :

Fill Parent 50

ActivityStarter1 Action : DataType

android.intent.action.GET_C : video/*
ONTENT

Notifier1 The Notifier component displays alert dialogs, messages, and

temporary alerts, and many more

45
Coding Component
Screen1

kita bisa membuat event-handler untuk button music dan button video agar bisa
berganti screen

Screen2

Untuk screen2 kita bisa mulai dengan membuat variabel terlebih dahulu

Event-handler yang berfungsi untuk menyembunyikan button play pause dan button
stop

Event-handler yang berfungsi untuk memulai komponen starter activity

Event-handler ini berfungsi untuk membuka lagu pada komputer kita

46
Event-handler yang berfungsi untuk menampilkan pesan ketika lagu yang dipilih tidak
bisa dimainkan

Event-handler yang berfungsi untuk memutar dan menunda lagu yang telah kita
mainkan

Event-handler untuk menghentikan pemutaran lagu

47
Event-handler yang berfungsi untuk kembali pada screen1

Screen3
Event-handler yang berfungsi untuk memulai StartActivity komponen

Event-handler yang berfungsi untuk memilih video yang akan kita tonton pada aplikasi

Event-handler yang berfungsi untuk menampilkan pesan ketika video tidak bisa di
tonton

Event-handler yang berfungsi untuk membuat video yang kita tonton menjadi fullscreen

48
Event-handler yang berfungsi untuk kembali pada screen1

49
Tugas Dan Proyek Pelatihan

1. Exercise 1 - Menampilkan Text

2. Exercise 2 - Mengganti Ukuran Text
3. Exercise 3 - Memanggil Notifier
4. Exercise 4 - Aplikasi Menghitung Luas Bangunan
5. Exercise 5 - Perhitungan Nilai
6. Exercise 6 - Switch Screen

Link Referensi Modul Pertama

1. https://www.youtube.com/@CodingBeeAcademy
2. Pengenalan App Inventor

Bahan Tayang

Pelatihan SMP Pertemuan 1 - Pengenalan - KOMINFO

Pelatihan SMP Pertemuan 2 - KOMINFO
Pelatihan SMP Pertemuan 3 - Pengenalan - KOMINFO

Pengenalan Coding : What is Coding? - Coding Lessons for Kids

Algoritma : What is Algorithm? - Coding Lessons for Teens
Sequence : What is Sequence? - Coding Lessons for Kids
Conditional : What is Conditional? - Coding Lessons for Teens
Variable : What is Variable? - Coding Lesson for Teens
Operator : What is Operator? - Coding Lesson for Teens
Digital Citizenship : What is Digital Citizenship? - Coding Lessons for Kids

Link room Pelatihan dan Jadwal live sesi bersama instruktur

50
Penilaian Nilai Kelulusan : Min 60

Assessment method Bobot

Kehadiran 50

Tugas 30

Post-Test 20

51
52