# MIT App Inventor

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. Jika anda membutuhkan bantuan dan menemukan kekurangan pada tutorial ini, bisa menghubungi kami melalui <support@antares.id>

### **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.

<figure><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/3NUUx6kcTQJ5DH0OSJ0U/image.png" alt=""><figcaption><p>Gambar 1. Tampilan Halaman Designer</p></figcaption></figure>

<figure><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/LntgnREkVRdN3x9v8uYv/image.png" alt=""><figcaption><p>Gambar 2. Tampilan Halaman Blocks</p></figcaption></figure>

### **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.

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**

<table data-header-hidden><thead><tr><th width="104.33333333333331"></th><th width="205"></th><th></th></tr></thead><tbody><tr><td><strong>Simbol</strong></td><td><strong>Nama</strong></td><td><strong>Fungsi</strong></td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/9u47bRjGwBVQIJcNsDvE/image.png" alt=""></td><td>Button</td><td>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.</td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/ImH2L7l7y4b4shpkWOhu/image.png" alt=""></td><td>Checkbox</td><td>Dapat mendeteksi ketukan dari pengguna dan mengganti state-nya menjadi true/false (boolean).</td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/x7I6H0zZ0gIfdIDW2fCL/image.png" alt=""></td><td>Date Picker</td><td>Memunculkan kalender untuk memilih tanggal.</td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/Ol1sQoDrapP3oXkBV5Fv/image.png" alt=""></td><td>Image</td><td>Memasukkan gambar dalam aplikasi.</td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/MF7i6qo1AyZO0WznPfvP/image.png" alt=""></td><td>Label</td><td>Menampilkan teks dalam aplikasi.</td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/IyiLZEbGCl0uMDWW7lOf/image.png" alt=""></td><td>List Picker</td><td>Menampilkan list yang dapat dipilih oleh pengguna ketika pengguna menekan list.</td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/QnGXQbwf4V0zGnTrfOOs/image.png" alt=""></td><td>List View</td><td>Menampilkan list.</td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/dQIBzqaumFVHbUxgYGmJ/image.png" alt=""></td><td>Notifier</td><td>Memunculkan pesan/peringatan pop-up pada aplikasi. Pesan dapat hilang secara otomatis, atau harus menerima input dari pengguna terlebih dahulu baru menghilang.</td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/jwbkuIfkWbEoPg9NgCGu/image.png" alt=""></td><td>Password Text Box</td><td>Menyediakan textbox yang menyembunyikan teks yang dimasukkan.</td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/G8ARiPWHUGz4mkoEAOLX/image.png" alt=""></td><td>Slider</td><td>Menyediakan progress bar yang dapat digeser.</td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/ldrq8JvcZ1HxlYp3YGAn/image.png" alt=""></td><td>Spinner</td><td>Menampilkan pop-up list dengan elemen yang dapat dipilih ketika ditekan.</td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/ciAIMOAp0gLFmFz4bFKl/image.png" alt=""></td><td>Text Box</td><td>Menyediakan area untuk mengetik teks.</td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/RjvQbz5819l5BP5I4j7v/image.png" alt=""></td><td>Time Picker</td><td>Memunculkan jam untuk memilih waktu.</td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/7zwfolzwTmfQCVqoBTvh/image.png" alt=""></td><td>Web Viewer</td><td>Menyediakan area yang dapat menampilkan laman web.</td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/RQLU2LBPCJu0CK00aLCC/image.png" alt=""></td><td>Switch</td><td>Sakelar yang memunculkan persitiwa saat pengguna mengkliknya. Ada banyak properti yang mempengaruhi tampilannya yang dapat diatur di Designer atau Blocks Editor.</td></tr></tbody></table>

#### **2. Layout**

<table data-header-hidden><thead><tr><th width="104.33333333333331"></th><th width="262"></th><th></th></tr></thead><tbody><tr><td><strong>Simbol</strong></td><td><strong>Nama</strong></td><td><strong>Fungsi</strong></td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/Rltx8WpOb9bK5cq5WyCD/image.png" alt=""></td><td>Horizontal Arrangement</td><td>Menyusun komponen secara horizontal.</td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/Iv17AAlXW08k60LGCGSa/image.png" alt=""></td><td>Horizontal Scroll Arrangement</td><td>Menyusun komponen secara horizontal, namun jika lebar komponen melebihi lebar komponen ini, maka dapat digeser (scroll).</td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/HXfgJPmnVB6xodgbo0qt/image.png" alt=""></td><td>Table Arrangement</td><td>Membuat tabel.</td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/QJfXyod6ayXDBYD2vazM/image.png" alt=""></td><td>Vertical Arrangement</td><td>Menyusun komponen secara vertikal.</td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/UnxNiJIa2fnIROAWS4sk/image.png" alt=""></td><td>Vertical Scroll Arrangement</td><td>Menyusun komponen secara vertikal, namun jika tinggi komponen melebihi tinggi komponen ini, maka dapat digeser (scroll).</td></tr></tbody></table>

#### **3. Media**

<table data-header-hidden><thead><tr><th width="106.33333333333331"></th><th width="262"></th><th></th></tr></thead><tbody><tr><td><strong>Simbol</strong></td><td><strong>Nama</strong></td><td><strong>Fungsi</strong></td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/d8j4pybRzpnyOSNv077e/image.png" alt=""></td><td>Camcorder</td><td>Mengaktifkan kamera HP dan merekam.</td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/GIlRzPxETgKucgQ5SRAx/image.png" alt=""></td><td>Camera</td><td>Mengaktifkan kamera HP dan memotret.</td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/mpteTLOlbXbtc8O0qAUe/image.png" alt=""></td><td>Image Picker</td><td>Menampilkan galeri pada aplikasi. Pengguna dapat memilih gambar yang akan disimpan dari galeri yang ditampilkan.</td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/BBIqbU6PKoNhSOohkegp/image.png" alt=""></td><td>Player</td><td>Memainkan musik/audio dan mengatur vibrasi HP.</td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/6cw6jtED8GTFrC7Oz0B0/image.png" alt=""></td><td>Sound</td><td>Memainkan musik/audio dan mengatur vibrasi HP dalam interval waktu tertentu.</td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/XwgwpThkC3XHHj1KoVdY/image.png" alt=""></td><td>Sound Recorder</td><td>Merekam suara.</td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/zZOMAVJ7ATg7vmMFRB6S/image.png" alt=""></td><td>Speech Recognizer</td><td>Mengkonversi suara menjadi teks menggunakan fitur speech recognition pada HP.</td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/KIijGSG6hXrhU20qBUjy/image.png" alt=""></td><td>Text to Speech</td><td>Mengkonversi teks menjadi suara. Pitch dan kecepatan pembacaan dapat diatur.</td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/9UnsalxogJPnyeXG8hCy/image.png" alt=""></td><td>Video Player</td><td>Memutar video serta menampilkan pengaturannya.</td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/w7BubJ90xNuevWQuFROV/image.png" alt=""></td><td>Yandex Translate</td><td>Menerjemahkan teks dari satu bahasa ke bahasa yang lainnya.</td></tr></tbody></table>

#### **4. Drawing and Animation**

<table data-header-hidden><thead><tr><th width="114.33333333333331"></th><th width="256"></th><th></th></tr></thead><tbody><tr><td><strong>Simbol</strong></td><td><strong>Nama</strong></td><td><strong>Fungsi</strong></td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/YJLUYBgN0dCTLIVuJn6N/image.png" alt=""></td><td>Ball</td><td>Sprite bola yang dapat berinteraksi pada sentuhan dan tarikan, serta berinteraksi dengan sprite lainnya pada kanvas.</td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/XQCYwsGeSDfEVPbdPMvg/image.png" alt=""></td><td>Canvas</td><td>Kanvas tempat sprite berinteraksi dengan pengguna atau dengan sprite lainnya, atau tempat pengguna menggambar.</td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/b7OcSiOYnYqeObc6SeD5/image.png" alt=""></td><td>Image Sprite</td><td>Sprite gambar yang dapat berinteraksi pada sentuhan dan tarikan, serta berinteraksi dengan sprite lainnya pada kanvas.</td></tr></tbody></table>

#### **5. Maps**

<table data-header-hidden><thead><tr><th width="111.33333333333331"></th><th width="264"></th><th></th></tr></thead><tbody><tr><td><strong>Simbol</strong></td><td><strong>Nama</strong></td><td><strong>Fungsi</strong></td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/xT4jZk34UoApnjxZ960i/image.png" alt=""></td><td>Circle</td><td>Memvisualisasikan lingkaran dengan radius tertentu (dalam meter) pada koordinat tertentu. Dapat juga digunakan untuk menjalankan program ketika pengguna berada di suatu area.</td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/IDrhaXvajwijHS6QbgLH/image.png" alt=""></td><td>Feature Collection</td><td>Mengelompokkan fitur-fitur Maps. Event yang terjadi pada salah satu komponen pada kelompok tersebut, akan memicu event pada komponen-komponen lainnya.</td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/shJpjEos69hrhJsuHGEc/image.png" alt=""></td><td>Line String</td><td>Menggambar garis pada peta.</td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/AU8gRCAehkIrGKE0i1a0/image.png" alt=""></td><td>Map</td><td>Menampilkan peta pada layar aplikasi.</td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/pNnUWDxD2OQzkzVPuoRG/image.png" alt=""></td><td>Marker</td><td>Memberi tanda pada suatu lokasi di peta.</td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/8p3R5tKD6hHfuy6BYVVJ/image.png" alt=""></td><td>Polygon</td><td>Membuat perimeter pada peta.</td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/PxvDSMSs2J9J9eP786WE/image.png" alt=""></td><td>Rectangle</td><td>Merupakan polygon dengan garis lintang dan garis bujur untuk batas utara, selatan, timur, dan barat. Jika sudut segiempat dipindahkan, maka informasi koordinat akan diperbaharui.</td></tr></tbody></table>

#### **6. Sensors**

<table data-header-hidden><thead><tr><th width="109.33333333333331"></th><th width="267"></th><th></th></tr></thead><tbody><tr><td><strong>Simbol</strong></td><td><strong>Nama</strong></td><td><strong>Fungsi</strong></td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/4Mt2j4pEASrY28jP0j7v/image.png" alt=""></td><td>Accelerometer Sensor</td><td>Mendeteksi goyangan dan percepatan dalam m/s2.</td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/WuoBVaHVEZscWSq6QYWV/image.png" alt=""></td><td>Barcode Scanner</td><td>Membaca barcode.</td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/JEzolQ1QTw98FQOTSWrQ/gambar%20(12).png" alt="" data-size="line"></td><td>Barometer</td><td>Sebuah komponen sensor yang dapat mengukur tekanan udara sekitar.</td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/hYSFag2dtbUcfMX81kwR/gambar%20(13).png" alt="" data-size="line"></td><td>Clock</td><td>Komponen non-visible yang menyediakan waktu instan menggunakan jam internal di ponsel. Dapat menyalakan pengatur waktu (timer) pada interval yang diatur secara teratur dan melakukan perhitungan waktu, manipulasi, dan konversi.</td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/eMEHp8WTO0t34rOGsBdq/image.png" alt=""></td><td>Gyroscope Sensor</td><td>Mengukur kecepatan sudut dalam derajat/detik.</td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/Ew3SkxymmNrjgjKpaoo6/gambar%20(14).png" alt="" data-size="line"></td><td>Hygrometer</td><td>Sebuah komponen sensor yang dapat mengukur kelembapan udara ambien relatif.</td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/8A5kwVR0bhNKuYTObwPv/gambar(15).png" alt="" data-size="line"></td><td>Light Sensor</td><td>Sebuah komponen sensor yang dapat mengukur tingkat cahaya.</td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/Bomsm9nneHMh5RvKpzqB/image.png" alt=""></td><td>Location Sensor</td><td>Menyediakan informasi geografis seperti koordinat, ketinggian, kecepatan, dan alamat. Dapat juga mengkonversi alamat menjadi koordinat.</td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/DQjacPxiKdjgfOCKYcAR/gambar%20(16).png" alt="" data-size="line"></td><td>Magnetic Field Sensor</td><td>Komponen sensor yang dapat mengukur medan geomagnetik ambien untuk ketiga sumbu fisik (x, y, z).</td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/no48znHaWrPXNy6vfW2p/image.png" alt=""></td><td>Near Field</td><td>Memungkinkan aplikasi mengaktifkan fitur komunikasi jarak dekat (NFC).</td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/tBvu9kiNJONApo8kL3nX/image.png" alt=""></td><td>Orientation Sensor</td><td>Menentukan orientasi HP.</td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/dJU8CMtWoDSgQcei2Vn8/image.png" alt=""></td><td>Pedometer</td><td>Menentukan banyaknya langkah, dan jarak yang ditempuh.</td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/TsLtoIO6sA47damEmErQ/image.png" alt=""></td><td>Proximity Sensor</td><td>Mengukur jarak antara objek dengan layar HP.</td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/bqtWm5fIotxHloSrKDoD/gambar%20(17).png" alt="" data-size="line"></td><td>Thermometer</td><td>Komponen Sensor yang dapat mengukur suhu sekitar (eksternal).</td></tr></tbody></table>

#### **7. Social**

<table data-header-hidden><thead><tr><th width="109.33333333333331"></th><th width="269"></th><th></th></tr></thead><tbody><tr><td><strong>Simbol</strong></td><td><strong>Nama</strong></td><td><strong>Fungsi</strong></td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/HeroytnHQvgeKSzEA5Po/image.png" alt=""></td><td>Contact Picker</td><td>Menampilkan list berisi kontak ketika ditekan.</td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/GtZA3CxX8sWiqgROZjfy/image.png" alt=""></td><td>Email Picker</td><td>Menampilkan list berisi email ketika pengguna mengetikkan kata kunci ataupun email dari orang yang dituju.</td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/mZQJs3r2TPUhu3vXKSwU/image.png" alt=""></td><td>Phone Call</td><td>Melakukan panggilan telepon.</td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/hyZBUkvYZnKCGuOJLxEt/image.png" alt=""></td><td>Phone Number Picker</td><td>Menampilkan list berisi nomor kontak pada layar HP.</td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/NJtwcKke85SWdDKF6AJv/image.png" alt=""></td><td>Sharing</td><td>Memungkinkan pertukaran berkas atau pesan antara satu aplikasi dengan aplikasi lainnya yang terdapat pada HP.</td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/sSPNuVaL8TXucOOKIcbw/image.png" alt=""></td><td>Texting</td><td>Mengirim pesan teks ke suatu nomor kontak.</td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/paljLe8biE0VxH1w8vgd/image.png" alt=""></td><td>Twitter</td><td>Memungkinkan komunikasi dengan Twitter sehingga pengguna dapat membuat tweet, melihat tweet, dll.</td></tr></tbody></table>

#### **8. Storage**

<table data-header-hidden><thead><tr><th width="108.33333333333331"></th><th width="276"></th><th></th></tr></thead><tbody><tr><td><strong>Simbol</strong></td><td><strong>Nama</strong></td><td><strong>Fungsi</strong></td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/DRGKWlMnnR6nlz9H4N3I/gambar%20(18).png" alt=""></td><td>CloudDB</td><td>Komponen non-visible yang memungkinkan Anda menyimpan data di server database yang terhubung ke Internet (menggunakan perangkat lunak Redis).</td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/mPO75ZgK8ughawu5vWpx/gambar%20(19).png" alt=""></td><td>Data File</td><td>Komponen yang memungkinkan membaca data CSV dan JSON. DataFile berisi fungsionalitas yang relevan untuk mengakses data parsing CSV atau JSON dalam bentuk baris atau kolom.</td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/yRbMj40Gc9KtRQZrPnMm/image.png" alt=""></td><td>File</td><td>Menerima atau mengirim berkas. Dapat juga digunakan untuk membaca atau menulis berkas.</td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/M5B3hUYlPPWP3XajwaMF/gambar%20(20).png" alt=""></td><td>Spreadsheet</td><td>Spreadsheet adalah komponen non-visible untuk menyimpan dan menerima data dari dokumen Spreadsheet menggunakan Google Sheets API.</td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/Zy31tmXGoxyNOQvseTE1/image.png" alt=""></td><td>Fusiontables Control</td><td>Memungkinkan komunikasi dengan Google Fusion Table. Google Fusion Table dapat menyimpan, membagikan, query, dan memvisualisasikan tabel data.</td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/gZjWiU3muM1S5aZJA0II/image.png" alt=""></td><td>TinyDB</td><td>Menyimpan data untuk aplikasi sehingga ketika aplikasi ditutup, dan kemudian dibuka kembali, data masih tersimpan.</td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/L5BzlcQxuRyEmfEldYwC/image.png" alt=""></td><td>TinyWebDB</td><td>Menyimpan data pada web.</td></tr></tbody></table>

#### **9. Connectivity**

<table data-header-hidden><thead><tr><th width="106.33333333333331"></th><th width="284"></th><th></th></tr></thead><tbody><tr><td><strong>Simbol</strong></td><td><strong>Nama</strong></td><td><strong>Fungsi</strong></td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/zIFsOBQr7BbaKcIJeSYK/image.png" alt=""></td><td>Activity Starter</td><td>Memanggil aplikasi lain.</td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/kuHghtVVv1Ugd6daPsPG/image.png" alt=""></td><td>Bluetooth Client</td><td>Membuat aplikasi sebagai Bluetooth client.</td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/MqYyWtHBYBSPVrLWsSUz/image.png" alt=""></td><td>Bluetooth Server</td><td>Membuat aplikasi sebagai Bluetooth server.</td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/vb3cOOJzMMQ4IJRfQUoD/gambar%20(21).png" alt=""></td><td>Serial</td><td>Komponen serial yang dapat digunakan untuk terhubung ke perangkat seperti Arduino</td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/6j2rjXCxCO4UbRxzYSrn/image.png" alt=""></td><td>Web</td><td>Memungkinkan aplikasi untuk berinteraksi dengan web dan menyediakan fungsi untuk HTTP GET, POST, PUT, dan DELETE.</td></tr></tbody></table>

#### **10. Experimental**

<table data-header-hidden><thead><tr><th width="105.33333333333331"></th><th width="289"></th><th></th></tr></thead><tbody><tr><td><strong>Simbol</strong></td><td><strong>Nama</strong></td><td><strong>Fungsi</strong></td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/Nv2lSOZduCYufXtx3P0H/image.png" alt=""></td><td>FirebaseDB</td><td>Memungkinkan pengguna aplikasi untuk saling bertukar data pada database dengan Firebase.</td></tr></tbody></table>

### **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**

<table data-header-hidden><thead><tr><th width="224"></th><th></th></tr></thead><tbody><tr><td><strong>Blok Kode</strong></td><td><strong>Fungsi</strong></td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/6iH8YikqkozWr3lGsDxA/image.png" alt=""></td><td>If kondisional. Jika “if” memenuhi syarat, maka blok yang ada setelah “then” dieksekusi.</td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/Y9ST4BWaliLpklNBPugh/image.png" alt=""></td><td>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.</td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/ua3Q0fDkWyNf1TJ1JElu/image.png" alt=""></td><td>For bertingkat. Untuk setiap objek dalam list, dilakukan looping.</td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/vFUfrPkdtavZJ5g3exrm/image.png" alt=""></td><td>Jika nilai test true, maka loop while berjalan.</td></tr></tbody></table>

#### **2. Logic**

<table data-header-hidden><thead><tr><th width="302"></th><th></th></tr></thead><tbody><tr><td><strong>Blok Kode</strong></td><td><strong>Fungsi</strong></td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/rxRTfc4t5Elx6EyTCeOZ/image.png" alt=""><br><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/amC8hDytsf8LIrieVIsh/image.png" alt=""></td><td>Boolean true/false.</td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/Inqm7FlplDTgJYUi6YJA/image.png" alt=""></td><td>Jika dipasangkan dengan true/false maka true menjadi false, dan false menjadi true.</td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/xkl9y2WajAJ1o2De3cLi/image.png" alt=""></td><td>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.</td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/tgmXduQ75cXtmwABzCdC/image.png" alt=""></td><td>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.</td></tr></tbody></table>

#### **3. Math**

<table data-header-hidden><thead><tr><th width="304"></th><th></th></tr></thead><tbody><tr><td><strong>Blok Kode</strong></td><td><strong>Fungsi</strong></td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/p8KdiKk4LtZWGnjQoXfz/image.png" alt=""></td><td>Digunakan untuk menginput angka.</td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/K5VawL10pzMbBmHndlIS/image.png" alt=""></td><td>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.</td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/7X0XSg52oGCN8XKyhqBq/image.png" alt=""></td><td>Operasi matematika dasar, yaitu tambah, kurang, kali, bagi, pangkat, dan modulus.</td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/xE8A7pIlxABVMtw9c8d1/image.png" alt=""></td><td>Mengambil nilai integer secara acak dari range yang ditentukan.</td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/UBysNG4L500cEMcRnFiH/image.png" alt=""></td><td>Operasi trigonometri sin, cos, tan.</td></tr></tbody></table>

#### **4. Text**

<table data-header-hidden><thead><tr><th width="305"></th><th></th></tr></thead><tbody><tr><td><strong>Blok Kode</strong></td><td><strong>Fungsi</strong></td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/Nycz38Qr4HZaJIsamnv8/image.png" alt=""></td><td>Teks kosong.</td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/FAxW6izE1Elz8eELzMw7/image.png" alt=""></td><td>Menggabungkan dua atau lebih teks.</td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/aj3fj981AkXGM1hR4AL8/image.png" alt=""></td><td>Memeriksa jika teks kosong atau tidak.</td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/Y4nuBXPlDPo0wp57ifmo/image.png" alt=""></td><td>Memeriksa apakah ada bagian tertentu dalam suatu teks.</td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/NPhqQmebLZWWzdVt8Chm/image.png" alt=""></td><td>Memisahkan teks pada penanda tertentu dan membuatnya menjadi list.</td></tr></tbody></table>

#### **5. List**

<table data-header-hidden><thead><tr><th width="311"></th><th></th></tr></thead><tbody><tr><td><strong>Blok Kode</strong></td><td><strong>Fungsi</strong></td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/hFGqM0lj5SXVGy62F0cF/image.png" alt=""></td><td>Membuat list kosong.</td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/RdArUn2G2zCEm43UI6jq/image.png" alt=""></td><td>Membuat list.</td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/DeW7BZcWKmMHCsKS0ZHh/image.png" alt=""></td><td>Menambahkan elemen pada list.</td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/1oWtAFZg0q5rjmMEcAZw/image.png" alt=""></td><td>Memeriksa apakah ada elemen tertentu pada list.</td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/pHnocdT8zSU9g2wukpWW/image.png" alt=""></td><td>Memeriksa banyaknya elemen pada list.</td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/0t0dfXA636a8NnOBhdBO/image.png" alt=""></td><td>Memeriksa apakah list kosong atau tidak.</td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/cixyR8cqtGyjCn8aiQgf/image.png" alt=""></td><td>Mengambil elemen dari suatu list.</td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/hGPeRV8acgPwHi1mXrsD/image.png" alt=""></td><td>Menghapus elemen dari suatu list.</td></tr></tbody></table>

#### **6. Colors**

<table data-header-hidden><thead><tr><th width="314"></th><th></th></tr></thead><tbody><tr><td><strong>Blok Kode</strong></td><td><strong>Fungsi</strong></td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/K8pnO8MalYUOFwJMM7gx/image.png" alt=""></td><td>Pilihan warna yang disediakan MIT AI.</td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/FMBa9RfDSLshK8kS7TfW/image.png" alt=""></td><td>Membuat warna sendiri dengan menggunakan kode RGB warna.</td></tr></tbody></table>

#### **7. Variables**

<table data-header-hidden><thead><tr><th width="315"></th><th></th></tr></thead><tbody><tr><td><strong>Blok Kode</strong></td><td><strong>Fungsi</strong></td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/7YY0vM4sUoHIuQndc0VV/image.png" alt=""></td><td>Membuat suatu variabel global.</td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/dpEdIbW2k5A5zVwiZpNQ/image.png" alt=""></td><td>Mengambil variabel global.</td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/naCpH8SnOVnFtkqNe6MW/image.png" alt=""></td><td>Memodifikasi isi dari variabel global.</td></tr></tbody></table>

#### **8. Procedure**

<table data-header-hidden><thead><tr><th width="319"></th><th></th></tr></thead><tbody><tr><td><strong>Blok Kode</strong></td><td><strong>Fungsi</strong></td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/8i9fhKMzBj9obZDBbJdP/image.png" alt=""></td><td>Membuat suatu prosedur.</td></tr><tr><td><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/D259oJioehAw5xra4UDb/image.png" alt=""></td><td>Membuat suatu fungsi yang mengembalikan hasil tertentu.</td></tr></tbody></table>

### Menghubungkan ke ANTARES <a href="#hubungkeantares" id="hubungkeantares"></a>

Setelah kita mengetahui tentang MIT App Inventor dan fitur-fitur yang ada, selanjutnya kita akan membuat sebuah aplikasi yang akan terhubung ke server ANTARES untuk mengirim dan menerima data.

#### **A. Kirim Data ke Server**

Kirim data (post) pada bagian MIT App Inventor, merupakan perintah yang digunakan dalam aplikasi MIT App Inventor untuk dapat melakukan post data secara manual dari data yang kita input dalam “text box” MIT App Inventor ke Platform ANTARES. Sebelum membuat code blocks untuk aplikasi Post, dapat dilakukan dengan membuat desain terlebih dahulu. Desain komponen yang telah kita buat tersebut, berfungsi sebagai tools yang akan membantu pengguna untuk dapat menjalankan aplikasi yang telah dibuat. Contoh desain untuk aplikasi Post Data dari MIT App Inventor ke ANTARES sebagai berikut:<br>

<figure><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/28WdJWSe3hVM1AlaDOGJ/image.png" alt=""><figcaption><p>Gambar 3. Tampilan Desain Aplikasi Post Data Sederhana</p></figcaption></figure>

Desain di atas menggunakan beberapa komponen, yaitu:

<table data-header-hidden><thead><tr><th width="76"></th><th></th><th></th><th></th></tr></thead><tbody><tr><td><strong>No.</strong></td><td><strong>Palette</strong></td><td><strong>Komponen</strong></td><td><strong>Nama Komponen</strong></td></tr><tr><td>1</td><td>User Interface</td><td>Label</td><td>Header</td></tr><tr><td>2</td><td>User Interface</td><td>Label</td><td>Temperature</td></tr><tr><td>3</td><td>User Interface</td><td>Label</td><td>Humidity</td></tr><tr><td>4</td><td>User Interface</td><td>TextBox</td><td>TextBox1</td></tr><tr><td>5</td><td>User Interface</td><td>TextBox</td><td>TextBox2</td></tr><tr><td>6</td><td>User Interface</td><td>Button</td><td>PostButton</td></tr><tr><td>7</td><td>Layout</td><td>HorizontalArrangement</td><td>HorizontalArrangement1</td></tr><tr><td>8</td><td>Layout</td><td>HorizontalArrangement</td><td>HorizontalArrangement2</td></tr><tr><td>9</td><td>Connectivity</td><td>Web</td><td>Web1</td></tr></tbody></table>

Setelah kita membuat desain tampilan aplikasi, langkah selanjutnya yang harus dilakukan yaitu membuat program untuk menjalankan aplikasi sesuai dengan tujuan. Untuk memprogramnya kita gunakan code blocks yang terdapat pada halaman blocks.

Untuk dapat mengirim data ke server ANTARES, format pengiriman data menggunakan format JSON. Berikut di bawah ini adalah format JSON beserta code blocks:

{% code lineNumbers="true" %}

```json
{
	"m2m:cin":{
		"con":"{\"key1\":integer-value, \"key2\":\"string-value\", \"keyN\":\"valueN\"}"
		}
						
```

{% endcode %}

<figure><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/JSOtNP4kP6YJoVyWheeJ/image.png" alt=""><figcaption><p>Gambar 4. Code Block Post Data ke ANTARES</p></figcaption></figure>

Setelah kita membuat desain dan program untuk aplikasinya, selanjutnya kita akan melihat data yang dikirim ke server melalui console ANTARES ([https://console.antares.id/dashboard/application](https://console.antares.id/dashboard/applications)). Berikut adalah data yang ditampilkan pada console ANTARES:

<figure><img src="https://3995702122-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrRkxjRLeqOm0pNhLfsus%2Fuploads%2Fvpki9KQ3AEmC791jI9FF%2F137.png?alt=media&#x26;token=20fffce6-3be2-4f47-aad4-f1b5f011995d" alt=""><figcaption><p>Gambar 5. Console Pada ANTARES</p></figcaption></figure>

#### **B. Menerima Data dari Server**

Aplikasi Get data dengan MIT App Inventor merupakan aplikasi sederhana yang akan menampilkan data yang kita ambil dari suatu platform melalui URL dan Header. Dalam proses Get Data ini menggunakan platform ANTARES. Contoh yang kami buat ini, mencoba untuk melakukan get data dari documentations ANTARES “Retrieve Latest Data”. Sebelum membuat aplikasi Get Data pada MIT App Inventor, terlebih dahulu kita buat desain untuk aplikasinya seperti berikut: <br>

<figure><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/3iDiFM9UE7Pi3Lth0Taz/image.png" alt=""><figcaption><p>Gambar 6. Tampilan Desain Aplikasi Get Data Sederhana</p></figcaption></figure>

Desain di atas menggunakan beberapa komponen, yaitu:

| **No.** | **Palette**    | **Komponen** | **Nama Komponen** |
| ------- | -------------- | ------------ | ----------------- |
| 1       | User Interface | Button       | Button            |
| 2       | User Interface | Label        | Header            |
| 3       | Connectivity   | Web          | Web1              |

Setelah kita membuat desain aplikasinya, selanjutnya kita program dengan menggunakan code blocks yang tersedia sebagai berikut:<br>

<figure><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/b2ke3M9XI8l7wFoHhhQB/image.png" alt=""><figcaption><p>Gambar 7. Code Block Aplikasi Get Data</p></figcaption></figure>

Setelah kita mendesain dan memprogram aplikasinya, maka kita dapat melihat hasilnya pada aplikasi android yang kita buat tadi. Data yang ditampilkan yaitu data terakhir dari console di ANTARES yang memiliki format JSON. Berikut adalah tampilan hasilnya:<br>

<figure><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/GeLVJxhGGOjYbM3ImnRy/image.png" alt=""><figcaption><p>Gambar 8. Tampilan Hasil Aplikasi Get Data</p></figcaption></figure>

#### **C. Menerima Data Realtime**

Pada bagian ini, dibuat sebuah aplikasi yang dapat mengambil data dari Antares, menampilkannya pada layar, dan memperbaharui data yang ditampilkan secara otomatis apabila pengguna ingin mendapatkan live measurement. Data yang diambil merupakan data temperatur dan kelembaban yang didapat dengan menggunakan sensor DHT11. UI pada aplikasi ini terdiri dari 3 bagian, yaitu bagian instruksi, bagian hasil, dan bagian preview. Berikut pengaturan user interface yang dibuat pada tab “Designer” MIT App Inventor (AI):<br>

<figure><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/mwt3MYXFm24i0edgw4Ue/image.png" alt=""><figcaption><p>Gambar 9. Tampilan Desain Aplikasi Data Realtime</p></figcaption></figure>

Desain di atas menggunakan beberapa komponen, yaitu:

<table data-header-hidden><thead><tr><th width="80"></th><th></th><th></th><th></th></tr></thead><tbody><tr><td><strong>No.</strong></td><td><strong>Palette</strong></td><td><strong>Komponen</strong></td><td><strong>Nama Komponen</strong></td></tr><tr><td>1</td><td>User Interface</td><td>Label</td><td>Label1</td></tr><tr><td>2</td><td>Layout</td><td>HorizontalArrangement</td><td>HorizontalArrangement1</td></tr><tr><td>3</td><td>User Interface</td><td>Button</td><td>BGet</td></tr><tr><td>4</td><td>User Interface</td><td>CheckBox</td><td>CBLiveMeasurement</td></tr><tr><td>5</td><td>User Interface</td><td>Label</td><td>LRC</td></tr><tr><td>6</td><td>User Interface</td><td>Label</td><td>Label2</td></tr><tr><td>7</td><td>Layout</td><td>HorizontalArrangement</td><td>HorizontalArrangement2</td></tr><tr><td>8</td><td>User Interface</td><td>Label</td><td>Label5</td></tr><tr><td>9</td><td>User Interface</td><td>Label</td><td>LTemp</td></tr><tr><td>10</td><td>Layout</td><td>HorizontalArrangement</td><td>HorizontalArrangement3</td></tr><tr><td>11</td><td>User Interface</td><td>Label</td><td>Label6</td></tr><tr><td>12</td><td>User Interface</td><td>Label</td><td>LHum</td></tr><tr><td>13</td><td>User Interface</td><td>Label</td><td>Label3</td></tr><tr><td>14</td><td>User Interface</td><td>Label</td><td>LRaw</td></tr><tr><td>15</td><td>User Interface</td><td>Label</td><td>Label4</td></tr><tr><td>16</td><td>Layout</td><td>HorizontalArrangement</td><td>HorizontalArrangement4</td></tr><tr><td>17</td><td>Layout</td><td>HorizontalArrangement</td><td>HorizontalArrangement5</td></tr><tr><td>18</td><td>Layout</td><td>HorizontalArrangement</td><td>HorizontalArrangement6</td></tr><tr><td>18</td><td>Layout</td><td>HorizontalArrangement</td><td>HorizontalArrangement6</td></tr><tr><td>19</td><td>User Interface</td><td>Label</td><td>Label7</td></tr><tr><td>20</td><td>User Interface</td><td>Label</td><td>LJSON1</td></tr><tr><td>21</td><td>User Interface</td><td>Label</td><td>Label9</td></tr><tr><td>22</td><td>User Interface</td><td>Label</td><td>LJSON2</td></tr><tr><td>23</td><td>User Interface</td><td>Label</td><td>Label11</td></tr><tr><td>24</td><td>User Interface</td><td>Label</td><td>LJSON3</td></tr><tr><td>25</td><td>User Interface</td><td>Label</td><td>LParsed</td></tr><tr><td>26</td><td>Connectivity</td><td>Web</td><td>Web1</td></tr><tr><td>27</td><td>Sensors</td><td>Clock</td><td>Clock1</td></tr></tbody></table>

Setelah kita membuat desain aplikasinya, selanjutnya kita program dengan menggunakan code blocks yang tersedia sebagai berikut:

![](https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/gyPTxgV74H9LRIwkFSoJ/image.png)\
![](https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/WTpUQcpjhnO4LKuEIBUs/image.png)\
![](https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/D4nCaf7fwIBgZwNbz77D/image.png)![](https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/dXqofC61OwOMUTMVEHZI/image.png)\
![](https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/F6q2f5Vd8fIMONoFr9Hj/image.png)\
![](https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/AEUL2ib2Dj40JUIS95mM/image.png)![](https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/FApVK7nJhKrJDw6kc3O1/image.png)\
![](https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/nj9C0WPLfmCPA8mJEjUE/image.png)\
![](https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/64hOVcDSYUn1AtEoyMQC/image.png)\
![](https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/1HO8WsBadN58iibniUdH/image.png)\
![](https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/y94rl5L0oOARFFjvHCJt/image.png)\
Setelah kita mendesain dan memprogram aplikasinya, maka kita dapat melihat hasilnya pada aplikasi android yang kita buat. Data yang ditampilkan yaitu data terakhir dan akan terus merefresh otomatis. Berikut adalah tampilan hasilnya:<br>

<figure><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/oTwRj9Wj5r0l4PoMJ977/image.png" alt=""><figcaption><p>Gambar 11. Tampilan Hasil Aplikasi Data Realtim</p></figcaption></figure>