Pengenalan App Inventor 2
Kali ini, kita akan belajar cara mendesain tampilan aplikasi seperti seorang desainer profesional! Kalian akan bisa membuat tampilan aplikasi sendiri lengkap dengan tombol, gambar, dan teks, hanya dengan drag and drop. Mudah, seru, dan menantang!
Komponen seperti Button (tombol), Label (teks), TextBox (kolom isian), dan Image (gambar) bisa kita ambil dari bagian Palette, lalu diletakkan di Viewer, yaitu area kerja utama tempat kita menyusun tampilan aplikasi. Setelah itu, tampilannya bisa kita atur lebih lanjut di panel Properties.
Agar tampilan aplikasi lebih rapi dan teratur, kita bisa menggunakan pengaturan Layout dengan komponen seperti VerticalArrangement. Ini membantu menyusun komponen secara terstruktur dan enak dilihat.
Penjelasan Konsep
App Inventor 2 adalah platform pengembangan aplikasi mobile berbasis blok grafis yang sangat mudah digunakan. Lingkungan kerjanya terbagi menjadi dua bagian utama:
1. Designer View: Ini adalah tempat kita mendesain tampilan aplikasi. Di Designer View, ada beberapa panel penting:
○ Palette: [Gambar: Screenshot App Inventor 2 Designer View dengan panel Palette disorot]. Terletak di sisi paling kiri. Panel ini berisi semua komponen yang bisa kita tambahkan ke aplikasi. Komponen-komponen ini dikelompokkan ke dalam kategori seperti User Interface (Button, Label, TextBox, Image), Layout (untuk menata komponen), Media (Sound, Camera), Sensors (BarcodeScanner, GPS), dan banyak lagi.
○ Viewer: [Gambar: Screenshot App Inventor 2 Designer View dengan panel Viewer disorot]. Ini adalah layar pratinjau aplikasi kita, terlihat seperti layar smartphone. Komponen yang kita pilih dari Palette akan kita “tarik dan lepas” ke sini. Di sinilah kita menempatkan dan mengatur posisi komponen-komponen.
○ Components: [Gambar: Screenshot App Inventor 2 Designer View dengan panel Components disorot]. Terletak di antara Viewer dan Properties. Panel ini menampilkan daftar semua komponen yang sudah kita tambahkan ke layar aplikasi. Kita bisa memilih komponen dari daftar ini untuk mengubah propertinya.
○ Properties: [Gambar: Screenshot App Inventor 2 Designer View dengan panel Properties disorot]. Terletak di sisi paling kanan. Setelah memilih sebuah komponen di panel Components, panel Properties akan menampilkan semua atribut atau properti yang bisa kita atur untuk komponen tersebut (misalnya, teks pada tombol, warna latar belakang, ukuran huruf, lebar, tinggi, dll.).
2. Blocks Editor: Ini adalah tempat kita menambahkan logika dan fungsi pada aplikasi menggunakan blok-blok kode visual.
Kita akan mengenal komponen UI dasar seperti:
Mari kita desain layar pembuka aplikasi sederhana. Layar ini akan memiliki judul aplikasi, gambar, dan sebuah tombol "Mulai".
Contoh Kasus Kasus 1: Aplikasi Salam Pembuka
Bayangkan kamu membuat aplikasi untuk menyambut pengguna. Aplikasinya hanya punya satu tulisan “Halo, Selamat Datang!”, gambar smiley, dan tombol “Mulai”. Komponennya:
Kamu bisa membuat aplikasi "Kartu Nama Digital" yang menampilkan:
Buat aplikasi dengan satu kotak besar untuk menulis (TextBox) dan tombol “Simpan”. Sederhana, tapi berguna!
Kasus 4: Aplikasi Kalkulator Mini
Tampilan kalkulator dengan:
Tahukah kalian?
Di bab ini, kita telah belajar bahwa App Inventor 2 adalah alat yang sangat berguna untuk membuat tampilan aplikasi di HP Android. Dengan menggunakan Designer View, kita bisa dengan mudah membuat desain aplikasi dengan cara "tarik dan lepas" komponen.
Komponen seperti Button (tombol), Label (teks), TextBox (kolom isian), dan Image (gambar) bisa kita ambil dari bagian Palette, lalu diletakkan di Viewer, yaitu area kerja utama tempat kita menyusun tampilan aplikasi. Setelah itu, tampilannya bisa kita atur lebih lanjut di panel Properties.
Agar tampilan aplikasi lebih rapi dan teratur, kita bisa menggunakan pengaturan Layout dengan komponen seperti VerticalArrangement. Ini membantu menyusun komponen secara terstruktur dan enak dilihat.
Secara keseluruhan, App Inventor 2 sangat cocok untuk pemula karena tidak perlu mengetik kode yang rumit. Cukup ikuti tiga langkah utama:
Agar tampilan aplikasi lebih rapi dan teratur, kita bisa menggunakan pengaturan Layout dengan komponen seperti VerticalArrangement. Ini membantu menyusun komponen secara terstruktur dan enak dilihat.
Penjelasan Konsep
App Inventor 2 adalah platform pengembangan aplikasi mobile berbasis blok grafis yang sangat mudah digunakan. Lingkungan kerjanya terbagi menjadi dua bagian utama:
1. Designer View: Ini adalah tempat kita mendesain tampilan aplikasi. Di Designer View, ada beberapa panel penting:
○ Palette: [Gambar: Screenshot App Inventor 2 Designer View dengan panel Palette disorot]. Terletak di sisi paling kiri. Panel ini berisi semua komponen yang bisa kita tambahkan ke aplikasi. Komponen-komponen ini dikelompokkan ke dalam kategori seperti User Interface (Button, Label, TextBox, Image), Layout (untuk menata komponen), Media (Sound, Camera), Sensors (BarcodeScanner, GPS), dan banyak lagi.
○ Viewer: [Gambar: Screenshot App Inventor 2 Designer View dengan panel Viewer disorot]. Ini adalah layar pratinjau aplikasi kita, terlihat seperti layar smartphone. Komponen yang kita pilih dari Palette akan kita “tarik dan lepas” ke sini. Di sinilah kita menempatkan dan mengatur posisi komponen-komponen.
○ Components: [Gambar: Screenshot App Inventor 2 Designer View dengan panel Components disorot]. Terletak di antara Viewer dan Properties. Panel ini menampilkan daftar semua komponen yang sudah kita tambahkan ke layar aplikasi. Kita bisa memilih komponen dari daftar ini untuk mengubah propertinya.
○ Properties: [Gambar: Screenshot App Inventor 2 Designer View dengan panel Properties disorot]. Terletak di sisi paling kanan. Setelah memilih sebuah komponen di panel Components, panel Properties akan menampilkan semua atribut atau properti yang bisa kita atur untuk komponen tersebut (misalnya, teks pada tombol, warna latar belakang, ukuran huruf, lebar, tinggi, dll.).
2. Blocks Editor: Ini adalah tempat kita menambahkan logika dan fungsi pada aplikasi menggunakan blok-blok kode visual.
Kita akan mengenal komponen UI dasar seperti:
- Button: Tombol yang bisa diklik. Properti penting: Text, BackgroundColor, Width, Height.
- Label: Teks statis untuk menampilkan informasi. Properti penting: Text, FontSize, TextColor.
- TextBox: Kotak input untuk pengguna memasukkan teks atau angka. Properti penting: Hint, Text.
- Image: Untuk menampilkan gambar. Properti penting: Picture, Height, Width.
- VerticalArrangement, HorizontalArrangement: Komponen layout untuk menata komponen lain secara vertikal atau horizontal agar rapi. Properti penting: Width, Height, AlignHorizontal, AlignVertical.
Mari kita desain layar pembuka aplikasi sederhana. Layar ini akan memiliki judul aplikasi, gambar, dan sebuah tombol "Mulai".
- Buka App Inventor 2.
- Mulai proyek baru.
- Ubah judul layar: Klik pada Screen1 di panel Components. Di panel Properties di sebelah kanan, gulir ke bawah dan cari properti Title. Ganti teks Screen1 menjadi “Halo!”.
- Dari Palette, tarik komponen Label ke Viewer. Ubah properti Text Label menjadi "Selamat Datang di Aplikasi Saya". Atur ukuran tulisan (FontSize) dan warna tulisan (TextColor) sesuai keinginan.
- Tarik komponen Image ke bawah Label. Upload gambar yang relevan dari komputer kalian ke Media, lalu pilih gambar tersebut di properti Picture komponen Image. Atur lebar (Width) dan tinggi (Height) gambar di panel Properties sesuai keinginan.
- Tarik komponen Button ke bawah Image. Ubah properti Text Button menjadi "Mulai Sekarang".
- Rapikan tata letak komponen: Klik pada komponen layar di panel Components. Di panel Properties, atur AlignHorizontal menjadi Center:3.
Contoh Kasus Kasus 1: Aplikasi Salam Pembuka
Bayangkan kamu membuat aplikasi untuk menyambut pengguna. Aplikasinya hanya punya satu tulisan “Halo, Selamat Datang!”, gambar smiley, dan tombol “Mulai”. Komponennya:
- Label → Tulisan sambutan
- Image → Gambar smiley
- Button → Tombol "Mulai"
Kamu bisa membuat aplikasi "Kartu Nama Digital" yang menampilkan:
- Foto kamu
- Nama lengkap
- Kontak (email/telepon)
- Tombol "Hubungi Saya"
Buat aplikasi dengan satu kotak besar untuk menulis (TextBox) dan tombol “Simpan”. Sederhana, tapi berguna!
Kasus 4: Aplikasi Kalkulator Mini
Tampilan kalkulator dengan:
- 2 TextBox untuk angka
- 4 tombol operasi (Tambah, Kurang, Kali, Bagi)
- 1 Label untuk menampilkan hasil
Tahukah kalian?
- Desain aplikasi yang baik, yaitu yang mudah digunakan dan enak dipandang, bisa membuat pengguna sangat senang dan betah berlama-lama memakai aplikasi tersebut!
- Sebaliknya, desain yang buruk bisa membuat pengguna frustasi dan segera menghapus aplikasi. Jadi, desain itu penting!
Di bab ini, kita telah belajar bahwa App Inventor 2 adalah alat yang sangat berguna untuk membuat tampilan aplikasi di HP Android. Dengan menggunakan Designer View, kita bisa dengan mudah membuat desain aplikasi dengan cara "tarik dan lepas" komponen.
Komponen seperti Button (tombol), Label (teks), TextBox (kolom isian), dan Image (gambar) bisa kita ambil dari bagian Palette, lalu diletakkan di Viewer, yaitu area kerja utama tempat kita menyusun tampilan aplikasi. Setelah itu, tampilannya bisa kita atur lebih lanjut di panel Properties.
Agar tampilan aplikasi lebih rapi dan teratur, kita bisa menggunakan pengaturan Layout dengan komponen seperti VerticalArrangement. Ini membantu menyusun komponen secara terstruktur dan enak dilihat.
Secara keseluruhan, App Inventor 2 sangat cocok untuk pemula karena tidak perlu mengetik kode yang rumit. Cukup ikuti tiga langkah utama:
- Tarik komponen dari Palette,
- *Lepas di Viewer,
- Atur tampilannya di Properties.