Assalamualaikum Wr.Wb.
Kali ini saya membuat alphabet game dari Microsoft powerpoint. Dibawah ini adalah tampilan gamenya. Untuk memainkan gamenya kalian bisa klik link dibawah ini.https://drive.google.com/file/d/1phZwi5FDwxNz4HoBpLc7mYOMfAQwwPl2/view?usp=sharing
Cara membuat aplikasi mobile phone di MIT APP Inventor.
Selasa, 03 Maret 2020
Jumat, 31 Januari 2020
Cara Membuat Aplikasi Mobile Phone Di MIT App Inventor.
Sebenarnya banyak sekali cara membuat aplikasi mobile phone.
Gimana sih cara membuatnya ?
Pada kesempatan kali ini saya akan kasih tau ke kalian cara membuat aplikasi mobile phone. Sebelum membuat aplikasi kita harus mengetahui terlebih dahulu komponen apa saja yang ada di MIT App Inventor. Berikut ini beberapa komponen di MIT App Inventor yang bisa saya berikan :
Setelah kita mengetahui komponen di MIT App Inventor. kita bisa langsung membuat aplikasi. Disini saya akan memberikan satu tutorial membuat aplikasi yang paling mudah dulu yaitu aplikasi android teks / gambar bersuara.
Sebenarnya banyak sekali cara membuat aplikasi mobile phone.
Gimana sih cara membuatnya ?
Pada kesempatan kali ini saya akan kasih tau ke kalian cara membuat aplikasi mobile phone. Sebelum membuat aplikasi kita harus mengetahui terlebih dahulu komponen apa saja yang ada di MIT App Inventor. Berikut ini beberapa komponen di MIT App Inventor yang bisa saya berikan :
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
Halaman Designer
Pada halaman designer terdapat beberapa jendela seperti Palette, Viewer, Components, Media, dan Properties. Tools tersebut berfungsi untuk mendesain tampilan aplikasi android sesuai keinginan.
- Palette merupakan jendela tempat mengambil komponen-komponen yang dikategorikan dalam beberapa kategori untuk dimasukkan dalam aplikasi yang dibuat.
- Viewer merupakan tempat untuk mengatur tampilan komponen pada aplikasi nantinya.
- Components merupakan tempat untuk mengatur komponen-komponen yang telah diletakkan di viewer.
- Properties merupakan tempat untuk mengatur properti layar, dan komponen-komponen yang digunakan pada aplikasi yang sedang dibuat.
- 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. |
![]() | 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. |
![]() | 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, jika lebar komponen melebihi lebar komponen ini, maka dapat digeser (scroll). |
![]() | Table Arrangement | Membuat tabel. |
![]() | Vertical Arrangement | Menyusun komponen secara vertikal. |
![]() | Vertical Scroll Arrangement | Menyusun komponen secara vertikal, 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. |
![]() | 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. |
![]() | Feature Collection | Mengelompokkan fitur-fitur Maps. |
![]() | 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. |
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. |
![]() | 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. |
![]() | Memungkinkan komunikasi dengan Twitter sehingga pengguna dapat membuat tweet, melihat tweet, dll. |
8. Storage
Simbol
|
Nama
|
Fungsi
|
---|---|---|
![]() | File | Menerima atau mengirim berkas. |
![]() | Fusiontables Control | Memungkinkan komunikasi dengan Google Fusion Table. |
![]() | TinyDB | Menyimpan data untuk aplikasi. |
![]() | 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. |
3. Math
Blok Kode
|
Fungsi
|
---|---|
![]() | Digunakan untuk menginput angka. |
![]() | Digunakan untuk membandingkan dua angka. Perbandingan dapat berupa sama dengan, tidak sama dengan, lebih dari, kurang dari, lebih dari sama dengan, dan kurang dari sama dengan. |
![]() | Operasi matematika dasar, yaitu tambah, kurang, kali, bagi, pangkat, dan modulus. |
![]() | Mengambil nilai integer secara acak dari range yang ditentukan. |
![]() | Operasi trigonometri sin, cos, tan. |
4. Text
Blok Kode
|
Fungsi
|
---|---|
![]() | Teks kosong. |
![]() | Menggabungkan dua atau lebih teks. |
![]() | Memeriksa jika teks kosong atau tidak. |
![]() | Memeriksa apakah ada bagian tertentu dalam suatu teks. |
![]() | Memisahkan teks pada penanda tertentu dan membuatnya menjadi list. |
5. List
Blok Kode
|
Fungsi
|
---|---|
![]() | Membuat list kosong. |
![]() | Membuat list. |
![]() | Menambahkan elemen pada list. |
![]() | Memeriksa apakah ada elemen tertentu pada list. |
![]() | Memeriksa banyaknya elemen pada list. |
![]() | Memeriksa apakah list kosong atau tidak. |
![]() | Mengambil elemen dari suatu list. |
![]() | Menghapus elemen dari suatu list. |
6. Colors
Blok Kode
|
Fungsi
|
---|---|
![]() | Pilihan warna yang disediakan MIT AI. |
![]() | Membuat warna sendiri dengan menggunakan kode RGB warna. |
7. Variables
Blok Kode
|
Fungsi
|
---|---|
![]() | Membuat suatu variabel global. |
![]() | Mengambil variabel global. |
![]() | Memodifikasi isi dari variabel global. |
8. Procedure
Blok Kode
|
Fungsi
|
---|---|
![]() | Membuat suatu prosedur. |
![]() |
Membuat suatu fungsi yang mengembalikan hasil tertentu.
|
Tutorial membuat aplikasi teks / gambar bersuara :
1. Sebelum membuat aplikasi kita harus membuat algoritma/ rencana / rancangan.
2. Buka aplikasi MIT App Inventor secar online atau offline.
3. Log in dengan akun google kalian masing masing.
5. Tambahkan komponen yang dibutuhkan , yaitu : horizontal arragemant,image dan button. Beri nama button sesuai keinginan misalnya klik.Maka akan terlihat seperti pada gambar ini
7. Selanjutnya untuk mengatur agar di klik bisa keluar suaranya kalian masuk ke halaman BLOCKS, perlu diingat bahwa di halaman BLOCKS ini kita bermain logika.
Selanjutnya kalian klik button yang sudah diberi nama dan kalian pilih di menu control "when (klik / button )click do ". Selanjutnya kalian klik sound nya dan pilih "call sound play" gabungkan kedua kedua codeblock tersebut. Seperti pada gambar.
8. Test aplikasi yang sudah dibuat.
9. Untuk memasukan aplikasi di Android kalian ada beberapa cara yaitu dengan kabel data,scann scanner barcode,atau bisa juga dengan memasukkan 6 kode ke aplikasi MIT AI2 Companion.
Sekian tutorial dari saya semoga bermanfaat,mohon maaf apabila ada kesalahan penulisan di artikel saya. Terimakasih.
Selanjutnya kalian klik button yang sudah diberi nama dan kalian pilih di menu control "when (klik / button )click do ". Selanjutnya kalian klik sound nya dan pilih "call sound play" gabungkan kedua kedua codeblock tersebut. Seperti pada gambar.
8. Test aplikasi yang sudah dibuat.
9. Untuk memasukan aplikasi di Android kalian ada beberapa cara yaitu dengan kabel data,scann scanner barcode,atau bisa juga dengan memasukkan 6 kode ke aplikasi MIT AI2 Companion.
Sekian tutorial dari saya semoga bermanfaat,mohon maaf apabila ada kesalahan penulisan di artikel saya. Terimakasih.
Langganan:
Postingan (Atom)
Alphabet game dari ppt
Assalamualaikum Wr.Wb. Kali ini saya membuat alphabet game dari Microsoft powerpoint. Dibawah ini adalah tampilan gamenya. Untuk memainkan ...
-
Cara Membuat Aplikasi Mobile Phone Di MIT App Inventor. Sebenarnya banyak sekali cara membuat aplikasi mobile phone. Gimana sih cara membu...
-
Assalamualaikum Wr.Wb. Kali ini saya membuat alphabet game dari Microsoft powerpoint. Dibawah ini adalah tampilan gamenya. Untuk memainkan ...