Membuat Aplikasi Sederhana pada MIT App Inventor

App Inventor merupakan salah satu web media yang dapat digunakan untuk menbuat aplikasi android simple dengan mudah dan tanpa memerlukan keahlian coding yang tinggi dan dengan mudah dapat di implementasikan secara nyata langsung di smartphone android kita semua.

Kali ini kita akan membuat akun dari MIT App Inventor dan sebuah aplikasi biodata secara sederhana.

 

1. Ketik "MIT App Inventor" seperti pada gambar dibawah 

Lalu pilih yang paling atas, kemudian akan muncul website MIT App Inventor yang mana kita akan membuat sebuah akun yang nantinya akan digunakan dalam pembuatan aplikasi berbasis Android.

2. Setelah dipilih lalu akan muncul seperti berikut,

Kemudian pilih yang dilingkari atau tulisan "Create Apps"

3. Setelah itu masukkan alamat email masing-masing atau login dengan menggunakan akun google kalian.

4. Setelah login silahkan klik "I accept the terms service!" seperti pada gambar dibawah

5.  Kemudian akan dilanjutkan untuk pilihan pengguna apakah anda seorang guru/siswa/lainnya, silahkan pilih "Student" apabila seorang siswa.

6. Selanjutnya isikan detail lengkap seperti pada gambar dibawah, kemudian "Next"

7. Setelah mengisi detail data sekolah, maka akan muncul gambar seperti dibawah, klik "OK"

8. Kemudian anda akan masuk ke tampilan awal dari MIT App Inventor, namun sebelum itu silahkan klik "Continue" dan ceklis "do not show again" agar tampilan seperti gambar tidak muncul kembali

9. Selanjutnya pilih "Close"

Anda sudah berhasil membuat akun pada website MIT App Inventor yang bisa digunakan untuk mengembangkan aplikasi berbasis android.

Read More

Pengenalan MIT App Inventor

Penjelasan

MIT App Inventor merupakan platform untuk memudahkan proses pembuatan aplikasi sederhana tanpa harus mempelajari atau menggunakan bahasa pemrograman yang terlalu banyak. Kita dapat mendesain aplikasi android sesuai keinginan dengan menggunakan berbagai macam layout dan komponen yang tersedia. Berikut di bawah ini cara menggunakan MIT App Inventor.

1. Tampilan MIT App Inventor

Pada MIT App Inventor terdapat dua halaman utama, yaitu halaman designer dan halaman blocks. Halaman designer digunakan untuk mendesain tampilan aplikasi dengan berbagai komponen dan layout yang disediakan sesuai dengan keinginan. Sedangkan halaman blocks digunakan untuk memprogram jalannya aplikasi android sesuai dengan tujuan.

 

Gambar 1. Tampilan Halaman Designer

Gambar 2. Tampilan Halaman Blocks

Pada halaman designer terdapat beberapa jendela seperti Palette, Viewer, Components, Media, dan Properties. Tools tersebut berfungsi untuk mendesain tampilan aplikasi android sesuai keinginan.

1. Palette merupakan jendela tempat mengambil komponen-komponen yang dikategorikan dalam beberapa kategori untuk dimasukkan dalam aplikasi yang dibuat. Terdapat kategori User Interface, Layout, Media, Drawing and Animation, Maps, Sensors, Social, Storage, Connectivity, LEGO MINDSTORMS, Experimental, dan Extension.
2. Viewer merupakan tempat untuk mengatur tampilan komponen pada aplikasi nantinya.
3. Components merupakan tempat untuk mengatur komponen-komponen yang telah diletakkan di viewer, seperti misalnya mengganti nama komponen, dan menghapus komponen.
4. Properties merupakan tempat untuk mengatur properti layar, dan komponen-komponen yang digunakan pada aplikasi yang sedang dibuat seperti lebar, tinggi, warna latar, besar huruf, dll.
5. Media merupakan tempat untuk mengunggah gambar untuk digunakan pada aplikasi yang sedang dibuat.

Pada bagian Palette terdapat komponen penyusun untuk mendesain aplikasi, berikut adalah komponen penyusunnya:

1. User Interface

Simbol	Nama	Fungsi
	Button	Dapat mendeteksi ketukan, hold down ketika pengguna menekan tombol, atau ketika pengguna melepas tombol. Ketika button mendeteksi salah satu dari hal tersebut, button akan menjalankan perintah.
	Checkbox	Dapat mendeteksi ketukan dari pengguna dan mengganti state-nya menjadi true/false (boolean).
	Date Picker	Memunculkan kalender untuk memilih tanggal.
	Image	Memasukkan gambar dalam aplikasi.
	Label	Menampilkan teks dalam aplikasi.
	List Picker	Menampilkan list yang dapat dipilih oleh pengguna ketika pengguna menekan list.
	List View	Menampilkan list.
	Notifier	Memunculkan pesan/peringatan pop-up pada aplikasi. Pesan dapat hilang secara otomatis, atau harus menerima input dari pengguna terlebih dahulu baru menghilang.
	Password Text Box	Menyediakan textbox yang menyembunyikan teks yang dimasukkan.
	Slider	Menyediakan progress bar yang dapat digeser.
	Spinner	Menampilkan pop-up list dengan elemen yang dapat dipilih ketika ditekan.
	Text Box	Menyediakan area untuk mengetik teks.
	Time Picker	Memunculkan jam untuk memilih waktu.
	Web Viewer	Menyediakan area yang dapat menampilkan laman web.

2. Layout

Simbol	Nama	Fungsi
	Horizontal Arrangement	Menyusun komponen secara horizontal.
	Horizontal Scroll Arrangement	Menyusun komponen secara horizontal, namun jika lebar komponen melebihi lebar komponen ini, maka dapat digeser (scroll).
	Table Arrangement	Membuat tabel.
	Image	Memasukkan gambar dalam aplikasi.
	Vertical Arrangement	Menyusun komponen secara vertikal.
	Vertical Scroll Arrangement	Menyusun komponen secara vertikal, namun jika tinggi komponen melebihi tinggi komponen ini, maka dapat digeser (scroll).

3. Media

Simbol	Nama	Fungsi
	Camcorder	Mengaktifkan kamera HP dan merekam.
	Camera	Mengaktifkan kamera HP dan memotret.
	Image Picker	Menampilkan galeri pada aplikasi. Pengguna dapat memilih gambar yang akan disimpan dari galeri yang ditampilkan.
	Player	Memainkan musik/audio dan mengatur vibrasi HP.
	Sound	Memainkan musik/audio dan mengatur vibrasi HP dalam interval waktu tertentu.
	Sound Recorder	Merekam suara.
	Speech Recognizer	Mengkonversi suara menjadi teks menggunakan fitur speech recognition pada HP.
	Text to Speech	Mengkonversi teks menjadi suara. Pitch dan kecepatan pembacaan dapat diatur.
	Video Player	Memutar video serta menampilkan pengaturannya.
	Yandex Translate	Menerjemahkan teks dari satu bahasa ke bahasa yang lainnya.

4. Drawing and Animation

Simbol	Nama	Fungsi
	Ball	Sprite bola yang dapat berinteraksi pada sentuhan dan tarikan, serta berinteraksi dengan sprite lainnya pada kanvas.
	Canvas	Kanvas tempat sprite berinteraksi dengan pengguna atau dengan sprite lainnya, atau tempat pengguna menggambar.
	Image Sprite	Sprite gambar yang dapat berinteraksi pada sentuhan dan tarikan, serta berinteraksi dengan sprite lainnya pada kanvas.

5. Maps

Simbol	Nama	Fungsi
	Circle	Memvisualisasikan lingkaran dengan radius tertentu (dalam meter) pada koordinat tertentu. Dapat juga digunakan untuk menjalankan program ketika pengguna berada di suatu area
	Feature Collection	Mengelompokkan fitur-fitur Maps. Event yang terjadi pada salah satu komponen pada kelompok tersebut, akan memicu event pada komponen-komponen lainnya.
	Line String	Menggambar garis pada peta.
	Map	Menampilkan peta pada layar aplikasi.
	Marker	Memberi tanda pada suatu lokasi di peta.
	Polygon	Membuat perimeter pada peta.
	Rectangle	Merupakan polygon dengan garis lintang dan garis bujur untuk batas utara, selatan, timur, dan barat. Jika sudut segiempat dipindahkan, maka informasi koordinat akan diperbaharui

6. Sensors

Simbol	Nama	Fungsi
	Accelerometer Sensor	Mendeteksi goyangan dan percepatan dalam m/s2.
	Barcode Scanner	Membaca barcode.
	Gyroscope Sensor	Mengukur kecepatan sudut dalam derajat/detik.
	Location Sensor	Menyediakan informasi geografis seperti koordinat, ketinggian, kecepatan, dan alamat. Dapat juga mengkonversi alamat menjadi koordinat.
	Near Field	Memungkinkan aplikasi mengaktifkan fitur komunikasi jarak dekat (NFC).
	Orientation	Menentukan orientasi HP.
	Pedometer	Menentukan banyaknya langkah, dan jarak yang ditempuh.
	Proximity Sensor	Mengukur jarak antara objek dengan layar HP.

7. Social

Simbol	Nama	Fungsi
	Contact Picker	Menampilkan list berisi kontak ketika ditekan.
	Email Picker	Menampilkan list berisi email ketika pengguna mengetikkan kata kunci ataupun email dari orang yang dituju.
	Phone Call	Melakukan panggilan telepon.
	Phone Number Picker	Menampilkan list berisi nomor kontak pada layar HP.
	Sharing	Memungkinkan pertukaran berkas atau pesan antara satu aplikasi dengan aplikasi lainnya yang terdapat pada HP.
	Texting	Mengirim pesan teks ke suatu nomor kontak.

8. Storage

Simbol	Nama	Fungsi
	File	Menerima atau mengirim berkas. Dapat juga digunakan untuk membaca atau menulis berkas.
	Fusiontables Control	Memungkinkan komunikasi dengan Google Fusion Table. Google Fusion Table dapat menyimpan, membagikan, query, dan memvisualisasikan tabel data.
	TinyDB	Menyimpan data untuk aplikasi sehingga ketika aplikasi ditutup, dan kemudian dibuka kembali, data masih tersimpan.
	TinyWebDB	Menyimpan data pada web.

9. Connectivity

Simbol	Nama	Fungsi
	Activity Starter	Memanggil aplikasi lain.
	Bluetooth Client	Membuat aplikasi sebagai Bluetooth client.
	Bluetooth Server	Membuat aplikasi sebagai Bluetooth server.
	Web	Memungkinkan aplikasi untuk berinteraksi dengan web dan menyediakan fungsi untuk HTTP GET, POST, PUT, dan DELETE.

10. Experimental

Simbol	Nama	Fungsi
	CloudDB	Memungkinkan pengguna aplikasi untuk saling bertukar data pada database dengan software Redis.
	FirebaseDB	Memungkinkan pengguna aplikasi untuk saling bertukar data pada database dengan Firebase.

Halaman Blocks

Pada halaman blocks terdapat beberapa codeblock yang berfungsi untuk memprogram aplikasi android sesuai yang diinginkan. Pada halaman block terdapat beberapa komponen seperti Control, Logic, Math, Text, Lists, Colors, Variables, dan Procedures. Berikut adalah komponen yang terdapat pada halaman blocks:

1. Control

Blok Kode	Fungsi
	If kondisional. Jika “if” memenuhi syarat, maka blok yang ada setelah “then” dieksekusi.
	Looping dari angka pertama hingga angka terakhir dengan suatu interval. Maka gambar disamping berarti loop dari angka 1 hingga 5 dengan interval 1: 1, 2, 3, 4, 5.
	For bertingkat. Untuk setiap objek dalam list, dilakukan looping.
	Jika nilai test true, maka loop while berjalan.

2. Logic

Blok Kode	Fungsi
	Boolean true/false.
	Jika dipasangkan dengan true/false maka true menjadi false, dan false menjadi true.
	Memeriksa apakah satu objek sama dengan/tidak sama dengan objek di kanan. Jika sesuai kriteria, maka blok akan bernilai true, dan false jika tidak sesuai.
	Pada logika and jika kedua syarat terpenuhi, maka nilainya menjadi true. Sedangkan pada logika or, jika salah satu syarat atau keduanya terpenuhi, maka nilainya menjadi true.

Read More