Cara Membuat Aplikasi Sederhana: Kalkulator / Survey
Pernahkah kamu bertanya-tanya bagaimana kalkulator di HP tahu cara menghitung angka yang kamu tekan? Atau bagaimana aplikasi survey bisa menyimpan jawaban kamu satu per satu? Rahasia di balik semua itu adalah logika dan instruksi tersembunyi yang membuat aplikasi bisa "berpikir" dan "bertindak".
Nah, di bab ini, kamu akan menjadi programmer visual yang bisa membuat aplikasi sederhana yang benar-benar bisa digunakan!
"Memberi Nyawa pada Aplikasi Kita!"
Setelah kamu selesai mendesain tampilan aplikasi di Designer View tempat kamu memilih dan mengatur tombol, label, dan elemen lainnya sekarang saatnya membuat aplikasi tersebut benar-benar hidup! Tapi bagaimana caranya?
Nah, disinilah kita mengenal Blocks Editor dari App Inventor 2. Bayangkan kamu sedang bermain dengan balok-balok LEGO. Tapi kali ini, baloknya bukan untuk membangun rumah atau robot, melainkan untuk membangun logika dan perintah aplikasi!
Ayo kita kenali beberapa komponen penting dalam Blocks Editor yang akan kamu gunakan untuk membuat kalkulator atau aplikasi survei sederhana.
Blok Peristiwa (Event Handling)
Ini seperti "telinga" aplikasi yang mendengarkan peristiwa tertentu. Misalnya: saat tombol diklik, atau saat aplikasi baru dibuka.
● when Button1.Click do
➤ Artinya: Jalankan kode di dalam blok ini setiap kali tombol Button1 ditekan.
● when Screen1.Initialize do
➤ Artinya: Jalankan kode ini saat aplikasi pertama kali dijalankan.
Intinya: Blok ini adalah pemicu aksi. Tanpa blok event, aplikasi tidak tahu kapan harus melakukan sesuatu.
Variabel (Variables)
Variabel adalah tempat penyimpanan sementara dalam aplikasi. Seperti kotak kecil yang bisa menyimpan angka, teks, atau jawaban pengguna.
● initialize global score to
➤ Digunakan untuk membuat variabel baru dan memberi nilai awal. Misalnya: score = 0.
● set global score to
➤ Untuk mengubah nilai dari variabel yang sudah dibuat.
● get global score
➤ Untuk mengambil nilai dari variabel tersebut saat dibutuhkan.
Bayangkan variabel sebagai ransel: kamu bisa memasukkan sesuatu ke dalamnya, mengeluarkan, atau mengganti isinya kapan saja!
Blok Matematika (Math Blocks)
Ini adalah blok untuk melakukan perhitungan matematika cocok banget untuk aplikasi kalkulator!
Menampilkan Teks di Label (Label Blocks)
Setelah perhitungan selesai, tentu kita ingin menampilkan hasilnya kepada pengguna, bukan?
● set Label1.Text to
➤ Digunakan untuk mengubah teks yang tampil di layar pada komponen Label.
Misalnya, kalau hasil perhitungan = 10, maka Label bisa menampilkan: “Hasilnya adalah 10!”
Mengambil Input dari TextBox (TextBox Blocks)
Aplikasi perlu tahu apa yang diketik pengguna, misalnya angka yang ingin dihitung atau jawaban survei.
● TextBox1.Text
➤ Digunakan untuk mengambil nilai atau teks yang dimasukkan pengguna di kotak isian.
Jadi saat kamu menulis “5” di TextBox, aplikasi bisa mengambil angka itu untuk digunakan dalam perhitungan.
Ringkasan
Agar aplikasi kita bisa bekerja dengan baik, kita perlu:
When Button1.Click do
set Label1.Text to
(convert to number TextBox1.Text) + (convert to number TextBox2.Text)
Tantangan Menarik: Ubah kalkulator agar bisa juga mengurangkan, mengalikan, dan membagi! Bisa kah kamu membuat pilihan operasi dengan komponen "Spinner"?
Kasus 2: Survey Pilihan Siswa
Deskripsi: Aplikasi ini menanyakan pendapat pengguna, misalnya: "Apakah kamu suka pelajaran TIK?" dengan dua tombol: Ya dan Tidak.
Blok Utama:
When ButtonYa.Click do
set LabelHasil.Text to "Kamu suka TIK!"
When ButtonTidak.Click do
set LabelHasil.Text to "Wah, coba jelaskan kenapa ya!"
Tantangan Menarik: Bisa nggak kamu menambahkan jumlah total suara dari tiap pilihan?
Kasus 3: Salam Nama Ajaib
Deskripsi: Aplikasi akan menyapa pengguna berdasarkan nama yang diketik, contoh: "Halo, Budi! Selamat datang!".
Blok Utama:
When ButtonTampilkan.Click do
set LabelSalam.Text to join("Halo, ", TextBoxNama.Text)
Tantangan Menarik: Buat versi lanjutan: jika nama yang diketik adalah "Guru", tampilkan pesan spesial seperti “Selamat datang, Guru Hebat!”
Kasus 4: Kuis Mini Matematika
Deskripsi: Tampilkan pertanyaan matematika dan periksa jawaban siswa. Misalnya: "Berapa 7 + 5?"
Blok Utama:
When ButtonPeriksa.Click do
if (convert to number TextBoxJawaban.Text = 12)
then set LabelHasil.Text to "Benar!"
else set LabelHasil.Text to "Coba lagi!"
Tantangan Menarik: Bisa nggak kamu buat soal berubah-ubah setiap kali aplikasi dibuka?
Kasus 5: Hitung Umur dari Tahun Lahir
Deskripsi: Aplikasi ini meminta pengguna memasukkan tahun lahir, lalu menampilkan umur berdasarkan tahun saat ini.
Blok Utama:
When ButtonHitung.Click do
set LabelUmur.Text to
"Umurmu: " + (2025 - convert to number TextBoxTahun.Text)
Tantangan Menarik: Kembangkan agar bisa menampilkan kategori umur: Anak-anak, Remaja, atau Dewasa.
Kasus 6: Stopwatch Sederhana
Deskripsi: Menggunakan komponen Clock, aplikasi ini bisa menghitung waktu saat tombol Start ditekan.
Blok Utama:
When ButtonStart.Click do
call Clock1.TimerEnabled to true
When Clock1.Timer do
set LabelWaktu.Text to (convert to number LabelWaktu.Text) + 1
Tantangan Menarik: Buat juga tombol Stop dan Reset. Berani coba?
Semua kasus di atas tidak hanya mengasah logika dan kreativitas, tapi juga mendorong siswa memahami cara kerja aplikasi modern dengan pendekatan visual dan menyenangkan.
Fakta Menarik / Fun Facts
Percaya atau tidak, aplikasi kalkulator adalah salah satu aplikasi paling dasar dan pertama yang dibuat untuk komputer dan smartphone! Dulu, membuat kalkulator digital adalah pencapaian teknologi yang besar!
Rangkuman
Di bab ini, kita sudah belajar membuat aplikasi kita "hidup" dengan menambahkan logika menggunakan Blocks Editor. Kita mulai dari mendesain tampilan aplikasi, lalu belajar bagaimana menambahkan "perintah" atau kode visual agar aplikasi bisa merespons tindakan pengguna, seperti saat tombol ditekan.
Kita mengenal konsep penting seperti Event Handling (When [komponen].[peristiwa] do) yang digunakan untuk memberi tahu aplikasi apa yang harus dilakukan saat sesuatu terjadi misalnya saat tombol diklik. Selain itu, kita juga belajar tentang variabel, yaitu "wadah data sementara", dan blok matematika yang digunakan untuk menghitung angka serta blok teks untuk menampilkan hasil di layar.
Dengan menguasai blok-blok seperti When Button.Click do, set Label.Text to, dan convert to number, kita sekarang bisa membuat aplikasi interaktif sederhana sendiri! Ini adalah langkah awal yang seru dan penting sebelum kita belajar membuat aplikasi yang lebih kompleks dan canggih. Yuk, terus eksplorasi dan berkreasi dengan aplikasi buatanmu sendiri!
"Memberi Nyawa pada Aplikasi Kita!"
Setelah kamu selesai mendesain tampilan aplikasi di Designer View tempat kamu memilih dan mengatur tombol, label, dan elemen lainnya sekarang saatnya membuat aplikasi tersebut benar-benar hidup! Tapi bagaimana caranya?
Nah, disinilah kita mengenal Blocks Editor dari App Inventor 2. Bayangkan kamu sedang bermain dengan balok-balok LEGO. Tapi kali ini, baloknya bukan untuk membangun rumah atau robot, melainkan untuk membangun logika dan perintah aplikasi!
Ayo kita kenali beberapa komponen penting dalam Blocks Editor yang akan kamu gunakan untuk membuat kalkulator atau aplikasi survei sederhana.
Blok Peristiwa (Event Handling)
Ini seperti "telinga" aplikasi yang mendengarkan peristiwa tertentu. Misalnya: saat tombol diklik, atau saat aplikasi baru dibuka.
● when Button1.Click do
➤ Artinya: Jalankan kode di dalam blok ini setiap kali tombol Button1 ditekan.
● when Screen1.Initialize do
➤ Artinya: Jalankan kode ini saat aplikasi pertama kali dijalankan.
Intinya: Blok ini adalah pemicu aksi. Tanpa blok event, aplikasi tidak tahu kapan harus melakukan sesuatu.
Variabel (Variables)
Variabel adalah tempat penyimpanan sementara dalam aplikasi. Seperti kotak kecil yang bisa menyimpan angka, teks, atau jawaban pengguna.
● initialize global score to
➤ Digunakan untuk membuat variabel baru dan memberi nilai awal. Misalnya: score = 0.
● set global score to
➤ Untuk mengubah nilai dari variabel yang sudah dibuat.
● get global score
➤ Untuk mengambil nilai dari variabel tersebut saat dibutuhkan.
Bayangkan variabel sebagai ransel: kamu bisa memasukkan sesuatu ke dalamnya, mengeluarkan, atau mengganti isinya kapan saja!
Blok Matematika (Math Blocks)
Ini adalah blok untuk melakukan perhitungan matematika cocok banget untuk aplikasi kalkulator!
- + Tambah
- – Kurang
- × Kali
- ÷ Bagi
Menampilkan Teks di Label (Label Blocks)
Setelah perhitungan selesai, tentu kita ingin menampilkan hasilnya kepada pengguna, bukan?
● set Label1.Text to
➤ Digunakan untuk mengubah teks yang tampil di layar pada komponen Label.
Misalnya, kalau hasil perhitungan = 10, maka Label bisa menampilkan: “Hasilnya adalah 10!”
Mengambil Input dari TextBox (TextBox Blocks)
Aplikasi perlu tahu apa yang diketik pengguna, misalnya angka yang ingin dihitung atau jawaban survei.
● TextBox1.Text
➤ Digunakan untuk mengambil nilai atau teks yang dimasukkan pengguna di kotak isian.
Jadi saat kamu menulis “5” di TextBox, aplikasi bisa mengambil angka itu untuk digunakan dalam perhitungan.
Ringkasan
Agar aplikasi kita bisa bekerja dengan baik, kita perlu:
- Menangkap aksi pengguna lewat event blocks
- Menyimpan data sementara lewat variabel
- Menghitung dan mengolah data dengan blok matematika
- Menampilkan hasilnya melalui Label
- Membaca input pengguna dari TextBox
Setelah memahami konsep-konsep di atas, kamu akan bisa:
Contoh Kasus atau Ilustrasi
Bayangkan kamu adalah siswa kelas 8 yang sering ditunjuk menjadi ketua kelas. Suatu hari, guru menugaskan untuk mengumpulkan pendapat teman-teman tentang makanan favorit mereka di kantin. Daripada menulis di kertas satu per satu, kamu berpikir: “Bagaimana kalau aku buat aplikasi kecil untuk survei?”
Dengan MIT App Inventor 2, kamu bisa membuat aplikasi seperti kalkulator atau survey dengan cara menyusun balok kode layaknya menyusun puzzle. Menyenangkan, bukan?
Kasus 1: Kalkulator Penjumlahan Ceria
Deskripsi: Siswa membuat aplikasi kalkulator sederhana yang bisa menjumlahkan dua angka. Sangat cocok untuk mengenalkan konsep input, proses, dan output.
Blok Utama:
- Membuat aplikasi kalkulator sendiri!
- Mendesain aplikasi survei sederhana yang bisa menyimpan jawaban pengguna!
- Menjadi “programmer visual” dengan balok kode yang menyenangkan!
Contoh Kasus atau Ilustrasi
Bayangkan kamu adalah siswa kelas 8 yang sering ditunjuk menjadi ketua kelas. Suatu hari, guru menugaskan untuk mengumpulkan pendapat teman-teman tentang makanan favorit mereka di kantin. Daripada menulis di kertas satu per satu, kamu berpikir: “Bagaimana kalau aku buat aplikasi kecil untuk survei?”
Dengan MIT App Inventor 2, kamu bisa membuat aplikasi seperti kalkulator atau survey dengan cara menyusun balok kode layaknya menyusun puzzle. Menyenangkan, bukan?
Kasus 1: Kalkulator Penjumlahan Ceria
Deskripsi: Siswa membuat aplikasi kalkulator sederhana yang bisa menjumlahkan dua angka. Sangat cocok untuk mengenalkan konsep input, proses, dan output.
Blok Utama:
When Button1.Click do
set Label1.Text to
(convert to number TextBox1.Text) + (convert to number TextBox2.Text)
Tantangan Menarik: Ubah kalkulator agar bisa juga mengurangkan, mengalikan, dan membagi! Bisa kah kamu membuat pilihan operasi dengan komponen "Spinner"?
Kasus 2: Survey Pilihan Siswa
Deskripsi: Aplikasi ini menanyakan pendapat pengguna, misalnya: "Apakah kamu suka pelajaran TIK?" dengan dua tombol: Ya dan Tidak.
Blok Utama:
When ButtonYa.Click do
set LabelHasil.Text to "Kamu suka TIK!"
When ButtonTidak.Click do
set LabelHasil.Text to "Wah, coba jelaskan kenapa ya!"
Tantangan Menarik: Bisa nggak kamu menambahkan jumlah total suara dari tiap pilihan?
Kasus 3: Salam Nama Ajaib
Deskripsi: Aplikasi akan menyapa pengguna berdasarkan nama yang diketik, contoh: "Halo, Budi! Selamat datang!".
Blok Utama:
When ButtonTampilkan.Click do
set LabelSalam.Text to join("Halo, ", TextBoxNama.Text)
Tantangan Menarik: Buat versi lanjutan: jika nama yang diketik adalah "Guru", tampilkan pesan spesial seperti “Selamat datang, Guru Hebat!”
Kasus 4: Kuis Mini Matematika
Deskripsi: Tampilkan pertanyaan matematika dan periksa jawaban siswa. Misalnya: "Berapa 7 + 5?"
Blok Utama:
When ButtonPeriksa.Click do
if (convert to number TextBoxJawaban.Text = 12)
then set LabelHasil.Text to "Benar!"
else set LabelHasil.Text to "Coba lagi!"
Tantangan Menarik: Bisa nggak kamu buat soal berubah-ubah setiap kali aplikasi dibuka?
Kasus 5: Hitung Umur dari Tahun Lahir
Deskripsi: Aplikasi ini meminta pengguna memasukkan tahun lahir, lalu menampilkan umur berdasarkan tahun saat ini.
Blok Utama:
When ButtonHitung.Click do
set LabelUmur.Text to
"Umurmu: " + (2025 - convert to number TextBoxTahun.Text)
Tantangan Menarik: Kembangkan agar bisa menampilkan kategori umur: Anak-anak, Remaja, atau Dewasa.
Kasus 6: Stopwatch Sederhana
Deskripsi: Menggunakan komponen Clock, aplikasi ini bisa menghitung waktu saat tombol Start ditekan.
Blok Utama:
When ButtonStart.Click do
call Clock1.TimerEnabled to true
When Clock1.Timer do
set LabelWaktu.Text to (convert to number LabelWaktu.Text) + 1
Tantangan Menarik: Buat juga tombol Stop dan Reset. Berani coba?
Semua kasus di atas tidak hanya mengasah logika dan kreativitas, tapi juga mendorong siswa memahami cara kerja aplikasi modern dengan pendekatan visual dan menyenangkan.
Fakta Menarik / Fun Facts
Percaya atau tidak, aplikasi kalkulator adalah salah satu aplikasi paling dasar dan pertama yang dibuat untuk komputer dan smartphone! Dulu, membuat kalkulator digital adalah pencapaian teknologi yang besar!
Rangkuman
Di bab ini, kita sudah belajar membuat aplikasi kita "hidup" dengan menambahkan logika menggunakan Blocks Editor. Kita mulai dari mendesain tampilan aplikasi, lalu belajar bagaimana menambahkan "perintah" atau kode visual agar aplikasi bisa merespons tindakan pengguna, seperti saat tombol ditekan.
Kita mengenal konsep penting seperti Event Handling (When [komponen].[peristiwa] do) yang digunakan untuk memberi tahu aplikasi apa yang harus dilakukan saat sesuatu terjadi misalnya saat tombol diklik. Selain itu, kita juga belajar tentang variabel, yaitu "wadah data sementara", dan blok matematika yang digunakan untuk menghitung angka serta blok teks untuk menampilkan hasil di layar.
Dengan menguasai blok-blok seperti When Button.Click do, set Label.Text to, dan convert to number, kita sekarang bisa membuat aplikasi interaktif sederhana sendiri! Ini adalah langkah awal yang seru dan penting sebelum kita belajar membuat aplikasi yang lebih kompleks dan canggih. Yuk, terus eksplorasi dan berkreasi dengan aplikasi buatanmu sendiri!