# MIT App Inventor

MIT App Inventor is a platform to ease the process of creating simple applications without having to learn or use too many programming languages. We can design android applications as we wish using a variety of layouts and components available.

Below is how to use MIT App Inventor. If you need help and find flaws in this tutorial, please contact us via <support@antares.id>

### **MIT App Inventor Display**

In MIT App Inventor there are two main pages, namely the designer page and the blocks page. The designer page is used to design the appearance of the application with various components and layouts provided as desired. While the blocks page is used to programme the course of the android application in accordance with the objectives.

<figure><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/YV41JFvVrC2abEb3YDpC/image.png" alt=""><figcaption><p>Designer Page View</p></figcaption></figure>

<figure><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/G294vHy9nmeaOhBD942z/image.png" alt=""><figcaption><p>Blocks Page View</p></figcaption></figure>

### Designer Page&#x20;

On the designer page there are several windows such as Palette, Viewer, Components, Media, and Properties. These tools function to design the appearance of the android application as desired.

1. Palette is a window where components categorised in several categories are taken to be included in the application created. There are User Interface, Layout, Media, Drawing and Animation, Maps, Sensors, Social, Storage, Connectivity, LEGO MINDSTORMS, Experimental, and Extension categories.
2. The Viewer is a place to set the appearance of components in the application later.
3. Components is a place to manage the components that have been placed in the viewer, such as renaming components, and deleting components.
4. Properties is a place to set screen properties, and components used in the application being created such as width, height, background colour, font size, etc.
5. Media is a place to upload images to be used in the application being created.

In the Palette section there are constituent components for designing applications, here are the constituent components:

#### **1. User Interface**

<table data-header-hidden><thead><tr><th width="110.33333333333331"></th><th width="205"></th><th></th></tr></thead><tbody><tr><td><strong>Symbol</strong></td><td><strong>Name</strong></td><td><strong>Function</strong></td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/Oe0mS2Y85akYBIuJpslv/image.png" alt=""></td><td>Button</td><td>It can detect a tap, a hold down when the user presses a button, or when the user releases a button. When the button detects any of these, it will execute the command.</td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/1IiJQOkszOTwOZOO5UgW/image.png" alt=""></td><td>Checkbox</td><td>Can detect taps from the user and change its state to true/false (boolean).</td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/Why3GEmOdFflNgbq4dqb/image.png" alt=""></td><td>Date Picker</td><td>Bring up the calendar to select a date.</td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/kmv9ZpAU1pAOWW0IKZoI/image.png" alt=""></td><td>Image</td><td>Inserting images in the application.</td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/ZTm1lGWhmKdwKuXzydOH/image.png" alt=""></td><td>Label</td><td>Display text in the app.</td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/wjZIl2vOk1apiI9lLcrl/image.png" alt=""></td><td>List Picker</td><td>Displays a list that can be selected by the user when the user presses the list.</td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/4Nnp1R8TXqZ8AuoxF7bR/image.png" alt=""></td><td>List View</td><td>Display the list.</td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/ENtQX8susU1I8A7cGOhp/image.png" alt=""></td><td>Notifier</td><td>Display a pop-up message/warning in the application. The message can disappear automatically, or must receive input from the user before it disappears.</td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/gX8tlwGpTDsOKcGl4QR3/image.png" alt=""></td><td>Password Text Box</td><td>Provides a textbox that hides the entered text.</td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/Ry6JQvBpgb39wjHLpEfg/image.png" alt=""></td><td>Slider</td><td>Provides a swipeable progress bar.</td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/jnC2PJDc3CXp0UXR8C9d/image.png" alt=""></td><td>Spinner</td><td>Displays a pop-up list with elements that can be selected when pressed.</td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/WsZ07fnPJTvbzOUhUyzd/image.png" alt=""></td><td>Text Box</td><td>Provides an area to type text.</td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/ELALgvTie7e3YlVaCzAq/image.png" alt=""></td><td>Time Picker</td><td>Bring up the clock to select the time.</td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/rWJtNOedivKjUmqIMzpn/image.png" alt=""></td><td>Web Viewer</td><td>Provides an area that can display web pages.</td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/uPtES1DoGN8KsQlBrJMr/image.png" alt=""></td><td>Switch</td><td>A switch that triggers an event when the user clicks on it. There are many properties that affect its appearance that can be set in the Designer or Blocks Editor.</td></tr></tbody></table>

#### **2. Layout**

<table data-header-hidden><thead><tr><th width="113.33333333333331"></th><th width="262"></th><th></th></tr></thead><tbody><tr><td><strong>Symbol</strong></td><td><strong>Name</strong></td><td><strong>Function</strong></td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/ZfEdjv641HLY3G2L2v1m/image.png" alt=""></td><td>Horizontal Arrangement</td><td>Arrange the components horizontally.</td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/Ah2zyrIZIqXZnJDxONvd/image.png" alt=""></td><td>Horizontal Scroll Arrangement</td><td>Arranges components horizontally, but if the width of the component exceeds the width of this component, it can be scrolled.</td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/do0ZxODbbVy8y1GqAlHd/image.png" alt=""></td><td>Table Arrangement</td><td>Creating a table.</td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/6dHv8hijoRD8gq2rALc0/image.png" alt=""></td><td>Vertical Arrangement</td><td>Arrange the components vertically.</td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/SvOI3DCAoy1DgbNQPaoJ/image.png" alt=""></td><td>Vertical Scroll Arrangement</td><td>Arranges components vertically, but if the height of a component exceeds the height of this component, it can be scrolled.</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>Name</strong></td><td><strong>Function</strong></td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/d6ppdsmP9bvOIQBpu4NK/image.png" alt=""></td><td>Camcorder</td><td>Activate the mobile phone camera and record.</td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/iLnsMRW8lw1I4qOmRdR4/image.png" alt=""></td><td>Camera</td><td>Activate the mobile phone camera and take a picture.</td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/KukQnb8P114A4pOIjQId/image.png" alt=""></td><td>Image Picker</td><td>Display the gallery on the app. The user can select the image to be saved from the displayed gallery.</td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/222ZbpW3lRq0B2fktTwE/image.png" alt=""></td><td>Player</td><td>Play music/audio and adjust mobile phone vibrations.</td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/eTpBWdKsNu5xfr5Av0le/image.png" alt=""></td><td>Sound</td><td>Play music/audio and set the mobile phone to vibrate in specific time intervals.</td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/fu1ZqUn2AXYnfzX0NFew/image.png" alt=""></td><td>Sound Recorder</td><td>Recording sound.</td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/92Rn0WF6eJqZG7hKjnOS/image.png" alt=""></td><td>Speech Recognizer</td><td>Convert voice to text using the speech recognition feature on mobile phones.</td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/mZ2oES7oEOOL3EcvcPzF/image.png" alt=""></td><td>Text to Speech</td><td>Converts text into sound. Pitch and reading speed can be set.</td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/9AubNSqkkIzxrjXFHKuA/image.png" alt=""></td><td>Video Player</td><td>Play videos and display their settings.</td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/qUb6Sd7csuckuOehBE9I/image.png" alt=""></td><td>Yandex Translate</td><td>Translate text from one language to another.</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>Symbol</strong></td><td><strong>Name</strong></td><td><strong>Function</strong></td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/mNLylgSwmHBGI5IrBgVI/image.png" alt=""></td><td>Ball</td><td>A sphere sprite that can interact on touch and pull, as well as interact with other sprites on the canvas.</td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/AR933pNov5BsdnxZxTiu/image.png" alt=""></td><td>Canvas</td><td>The canvas where sprites interact with the user or with other sprites, or where the user draws.</td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/yQ8D7aZYVjNofuhUWcbG/image.png" alt=""></td><td>Image Sprite</td><td>An image sprite that can interact on touch and pull, as well as interact with other sprites on the canvas.</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>Symbol</strong></td><td><strong>Name</strong></td><td><strong>Function</strong></td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/JBf36hpJaURIcYgKgu0y/image.png" alt=""></td><td>Circle</td><td>Visualises a circle with a specified radius (in metres) at specified coordinates. Can also be used to run a programme when the user is in an area.</td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/RZRRqw2wlRb2GvtEQ9xG/image.png" alt=""></td><td>Feature Collection</td><td>Grouping the features of Maps. Events that occur on one of the components in the group, will trigger events on the other components.</td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/RVv1QkH2UiuhI5G0t4Fu/image.png" alt=""></td><td>Line String</td><td>Draw lines on the map.</td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/KwjudMpqn40vLTqTyVtF/image.png" alt=""></td><td>Map</td><td>Display the map on the app screen.</td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/e1EgrmHv60hbUXwB9o6z/image.png" alt=""></td><td>Marker</td><td>Mark a location on the map.</td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/ERx5GAKaZPzcUcAZ4Y90/image.png" alt=""></td><td>Polygon</td><td>Create a perimeter on the map.</td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/bZJfOiE8FEGxQa4ZA9B6/image.png" alt=""></td><td>Rectangle</td><td>It is a polygon with latitude and longitude for the north, south, east, and west boundaries. If the corners of the quadrilateral are moved, the coordinate information will be updated.</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>Symbol</strong></td><td><strong>Name</strong></td><td><strong>Function</strong></td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/uPcl69umAGjTPHLJuy6k/image.png" alt=""></td><td>Accelerometer Sensor</td><td>Detect wobble and acceleration in m/s2.</td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/NBM5wCejJkUYzDu9buVL/image.png" alt=""></td><td>Barcode Scanner</td><td>Reading barcodes.</td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/u6sQ01iJpvbfl4Ukftx7/gambar%20(12).png" alt="" data-size="line"></td><td>Barometer</td><td>A sensor component that can measure ambient air pressure.</td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/jify37xr27V7lpm0WBKo/gambar%20(13).png" alt="" data-size="line"></td><td>Clock</td><td>A non-visible component that provides instant time using the internal clock in mobile phones. It can switch on the timer at regular set intervals and perform time calculation, manipulation, and conversion.</td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/8YUmjGNP9AMTBF9FhO32/image.png" alt=""></td><td>Gyroscope Sensor</td><td>Measure angular velocity in degrees/second.</td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/oJjNgLJU0AOQy7dYjpJw/gambar%20(14).png" alt="" data-size="line"></td><td>Hygrometer</td><td>A sensor component that can measure relative ambient air humidity.</td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/Szm88wHMGl2TKPQOutPW/gambar(15).png" alt="" data-size="line"></td><td>Light Sensor</td><td>A sensor component that can measure light levels.</td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/RzfVJuhSUzOi4SpIwy9G/image.png" alt=""></td><td>Location Sensor</td><td>Provides geographic information such as coordinates, altitude, speed, and address. Can also convert addresses to coordinates.</td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/LebSG3K8wZn2ofAZKZkr/gambar%20(16).png" alt="" data-size="line"></td><td>Magnetic Field Sensor</td><td>A sensor component that can measure the ambient geomagnetic field for all three physical axes (x, y, z).</td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/Jm3Bi9rMsqwwGziLkINI/image.png" alt=""></td><td>Near Field</td><td>Allows apps to activate the near field communication (NFC) feature.</td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/hFydHfxd2MZ205JSIlQJ/image.png" alt=""></td><td>Orientation Sensor</td><td>Determine the orientation of HP.</td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/kRVM9OUpG9y0WjXX28WF/image.png" alt=""></td><td>Pedometer</td><td>Determine the number of steps, and the distance travelled.</td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/Gr9dOlHWqATVS2Fr8d8W/image.png" alt=""></td><td>Proximity Sensor</td><td>Measures the distance between the object and the mobile phone screen.</td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/MTPdQt7eMknneMcfPs2L/gambar%20(17).png" alt="" data-size="line"></td><td>Thermometer</td><td>Sensor components that can measure the ambient (external) temperature.</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>Symbol</strong></td><td><strong>Name</strong></td><td><strong>Function</strong></td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/BmtnD26qbqR7ASG35jXR/image.png" alt=""></td><td>Contact Picker</td><td>Displays a list of contacts when pressed.</td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/Ja2QAb9vuNZmVlgxgW7W/image.png" alt=""></td><td>Email Picker</td><td>Displays a list of emails when the user types in a keyword or the email of the target person.</td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/D0YktVLKtaq16yjAZyMl/image.png" alt=""></td><td>Phone Call</td><td>Make phone calls.</td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/xeI5B6FkQjTrpcEtIF14/image.png" alt=""></td><td>Phone Number Picker</td><td>Display a list of contact numbers on the mobile phone screen.</td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/GfqnuMMU0XW4TeokFIIL/image.png" alt=""></td><td>Sharing</td><td>Allows the exchange of files or messages between one application and another application on the mobile phone.</td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/pg10XtgFJ2tnAf5cKyZY/image.png" alt=""></td><td>Texting</td><td>Send a text message to a contact number.</td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/yjuDZE5VHUgKYxD4Xm4F/image.png" alt=""></td><td>Twitter</td><td>Enables communication with Twitter so that users can create tweets, view tweets, etc.</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>Symbol</strong></td><td><strong>Name</strong></td><td><strong>Function</strong></td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/jk7sm7hWV9kqROaC35Ko/gambar%20(18).png" alt=""></td><td>CloudDB</td><td>A non-visible component that allows you to store data on a database server connected to the Internet (using Redis software).</td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/bVSFJu2i91IUY8KdDrxr/gambar%20(19).png" alt=""></td><td>Data File</td><td>A component that allows reading CSV and JSON data. DataFile contains relevant functionality to access CSV or JSON parsed data in the form of rows or columns.</td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/TENJTqbOZCjaUAudPiPb/image.png" alt=""></td><td>File</td><td>Receive or send files. Can also be used to read or write files.</td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/SlPQsAPd1qSPDNlJB0RE/gambar%20(20).png" alt=""></td><td>Spreadsheet</td><td>Spreadsheet is a non-visible component for storing and receiving data from Spreadsheet documents using the Google Sheets API.</td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/8TAAqdoVhTARs2KTJgDo/image.png" alt=""></td><td>Fusiontables Control</td><td>Enables communication with Google Fusion Table. Google Fusion Table can store, share, query and visualise data tables.</td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/Ts353O9zvnQWtwsEIEEy/image.png" alt=""></td><td>TinyDB</td><td>Stores data for the application so that when the application is closed, and then reopened, the data is still stored.</td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/Hld0JWhwvGW3uhjO2GE9/image.png" alt=""></td><td>TinyWebDB</td><td>Store data on the web.</td></tr></tbody></table>

#### **9. Connectivity**

<table data-header-hidden><thead><tr><th width="115.33333333333331"></th><th width="284"></th><th></th></tr></thead><tbody><tr><td><strong>Symbol</strong></td><td><strong>Name</strong></td><td><strong>Function</strong></td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/ajjR0pkJuHYfsMbD58s5/image.png" alt=""></td><td>Activity Starter</td><td>Call other apps.</td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/Uly3P2yTAEUelruz35Xf/image.png" alt=""></td><td>Bluetooth Client</td><td>Create an application as a Bluetooth client.</td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/LMz4lA57U0pwiSr6jgwc/image.png" alt=""></td><td>Bluetooth Server</td><td>Create an application as a Bluetooth server.</td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/qr3UAXahDtkQygkWQuZk/gambar%20(21).png" alt=""></td><td>Serial</td><td>Serial components that can be used to connect to devices such as Arduino</td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/gEN8uyBZx6fwZFc1fDVL/image.png" alt=""></td><td>Web</td><td>Allows applications to interact with the web and provides functions for HTTP GET, POST, PUT, and DELETE.</td></tr></tbody></table>

#### **10. Experimental**

<table data-header-hidden><thead><tr><th width="110.33333333333331"></th><th width="289"></th><th></th></tr></thead><tbody><tr><td><strong>Symbol</strong></td><td><strong>Name</strong></td><td><strong>Function</strong></td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/Pju2DS23kNnQG0MAYwqz/image.png" alt=""></td><td>FirebaseDB</td><td>Allows application users to exchange data in the database with Firebase.</td></tr></tbody></table>

### Blocks Page

On the blocks page there are several codeblocks that function to programme the android application as desired. On the block page there are several components such as Control, Logic, Math, Text, Lists, Colors, Variables, and Procedures. The following are the components found on the blocks page:

#### **1. Control**

<table data-header-hidden><thead><tr><th width="224"></th><th></th></tr></thead><tbody><tr><td><strong>Block Code</strong></td><td><strong>Function</strong></td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/aIuCcvVIfWcDAHt9vtF1/image.png" alt=""></td><td>If conditional. If "if" fulfils the condition, then the block that comes after "then" is executed.</td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/HjXNWWLouVUxr5726HIV/image.png" alt=""></td><td>Looping from the first number to the last number with an interval. So the picture beside means a loop from the number 1 to 5 with the interval 1: 1, 2, 3, 4, 5.</td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/2V5vWbm6V2e8O0EvwR6V/image.png" alt=""></td><td>Multilevel for. For each object in the list, looping is performed.</td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/82oGtRp9uhreEsqPBUYO/image.png" alt=""></td><td>If the test value is true, the while loop runs.</td></tr></tbody></table>

#### **2. Logic**

<table data-header-hidden><thead><tr><th width="302"></th><th></th></tr></thead><tbody><tr><td><strong>Block Code</strong></td><td><strong>Function</strong></td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/qWA2iYtVtkcS6VQbdMLT/image.png" alt=""><br><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/BQxfxCTeSK04sd1k9zCL/image.png" alt=""></td><td>Boolean true/false.</td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/GOdHmvhj3Sbeh0em0Xjk/image.png" alt=""></td><td>If paired with true/false then true becomes false, and false becomes true.</td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/MqS9dzFbqmSwTyprePpu/image.png" alt=""></td><td>Checks whether an object is equal to/not equal to the object on the right. If it matches the criteria, the block will return true, and false if it does not.</td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/trQkRPB4AJXMm9kXXJrV/image.png" alt=""></td><td>In and logic, if both conditions are fulfilled, the value becomes true. Whereas in or logic, if one or both conditions are fulfilled, then the value becomes 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>Block Code</strong></td><td><strong>Function</strong></td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/BYCmG2afKfM3oHaad6wL/image.png" alt=""></td><td>Used to input numbers.</td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/ezfIKDotFBDnEZt307ju/image.png" alt=""></td><td>Used to compare two numbers. Comparisons can be equal to, not equal to, more than, less than, more than equal to, and less than equal to.</td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/XdI7mNgpGy44nyZ1G14G/image.png" alt=""></td><td>Basic maths operations, namely add, subtract, multiply, divide, power and modulus.</td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/BkiigKQt2bsgzEhCu217/image.png" alt=""></td><td>Randomly retrieves an integer value from the specified range.</td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/tUQN7WzJfoIaci2hFBtv/image.png" alt=""></td><td>Trigonometric operations 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>Block Code</strong></td><td><strong>Function</strong></td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/dlELcAV7PkYgitwCIzk4/image.png" alt=""></td><td>Blank text.</td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/FZPZAPOPX6XJkEZpN8pi/image.png" alt=""></td><td>Combine two or more texts.</td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/ur4UOHToMg30IsIJrpqX/image.png" alt=""></td><td>Checks if the text is empty or not.</td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/yWDs0pwXqs0gAOluwhoL/image.png" alt=""></td><td>Check if there is a specific section in a text.</td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/JD9pMQf63kgLirFWEJBo/image.png" alt=""></td><td>Separates the text at certain markers and makes it into a 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>Block Code</strong></td><td><strong>Function</strong></td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/nmhRYetk2bZdIjSz8Rk5/image.png" alt=""></td><td>Create an empty list.</td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/P8unkIJt5uvOVmrLwwgm/image.png" alt=""></td><td>Make a list.</td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/ILTpAgozG5PD8aUgO6sE/image.png" alt=""></td><td>Add an element to the list.</td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/6xZ5Z9w3cgGVchHAvCDw/image.png" alt=""></td><td>Checks if a certain element exists in the list.</td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/jfR2qvH90pIJZ3JH4BgJ/image.png" alt=""></td><td>Checks the number of elements in the list.</td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/dnB6N44V10JphYK1eoq6/image.png" alt=""></td><td>Checks whether the list is empty or not.</td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/hSIVuHtpkWoo1PFrQhrn/image.png" alt=""></td><td>Retrieve elements from a list.</td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/2dzAbf0zDyWtzhzkRZzN/image.png" alt=""></td><td>Remove elements from a 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>Block Code</strong></td><td><strong>Function</strong></td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/8KWNAkwQRguQLbdMZ6Hh/image.png" alt=""></td><td>Colour options provided by MIT AI.</td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/bZDttjVLpE4zaQGzHeV4/image.png" alt=""></td><td>Create your own colours using RGB colour codes.</td></tr></tbody></table>

#### **7. Variables**

<table data-header-hidden><thead><tr><th width="315"></th><th></th></tr></thead><tbody><tr><td><strong>Block Code</strong></td><td><strong>Function</strong></td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/cMAq7MTxX1fc5HSKeImx/image.png" alt=""></td><td>Create a global variable.</td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/MBppNHwgngSeFWskGG8s/image.png" alt=""></td><td>Retrieve global variables.</td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/0wV6GkQPg2UcKVvLenpg/image.png" alt=""></td><td>Modify the contents of a global variable.</td></tr></tbody></table>

#### **8. Procedure**

<table data-header-hidden><thead><tr><th width="319"></th><th></th></tr></thead><tbody><tr><td><strong>Block Code</strong></td><td><strong>Function</strong></td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/vEPPxvoYyXhYvMPtTN3r/image.png" alt=""></td><td>Create a procedure.</td></tr><tr><td><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/TNhi5BGAczfKXkozj7W5/image.png" alt=""></td><td>Create a function that returns a specific result.</td></tr></tbody></table>

### Connecting to ANTARES  <a href="#hubungkeantares" id="hubungkeantares"></a>

After we know about MIT App Inventor and its features, next we will create an application that will connect to the ANTARES server to send and receive data.

#### **A.** Send Data to Server

Send data (post) in the MIT App Inventor section, is a command used in the MIT App Inventor application to be able to post data manually from the data we input in the MIT App Inventor "text box" to the ANTARES Platform. Before making code blocks for the Post application, it can be done by making a design first. The component design that we have made, functions as a tool that will help users to be able to run the application that has been made. An example of a design for the Post Data application from MIT App Inventor to ANTARES is as follows:<br>

<figure><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/YdtrDbsfJG5hH68wvUoS/image.png" alt=""><figcaption><p>Simple Post Data Application Design View</p></figcaption></figure>

The above design uses several components, namely:

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

After we create the design of the application display, the next step is to create a programme to run the application as intended. To programme it, we use the code blocks found on the blocks page.

To be able to send data to the ANTARES server, the data transmission format uses JSON format. The following below is the JSON format along with 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/7cujmJ5QHdJaAjH815aZ/blobs/Lke0QkHII8tR2MNRFnXd/image.png" alt=""><figcaption><p>. Code Block Post Data to ANTARES</p></figcaption></figure>

After we make the design and programme for the application, then we will see the data sent to the server through the ANTARES console ([https://console.antares.id/dashboard/application](https://console.antares.id/)). The following is the data displayed on the ANTARES console:

<figure><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/UWeRedxZwmAaf8JIINLN/mit%20app%20inventor.png" alt=""><figcaption><p> Console in ANTARES</p></figcaption></figure>

#### **B.** Receive Data from Server

The Get data application with MIT App Inventor is a simple application that will display the data we take from a platform via URL and Header. In this Get Data process using the ANTARES platform. The example we made, tries to get data from the ANTARES documentations "Retrieve Latest Data". Before creating the Get Data application on MIT App Inventor, we first create a design for the application as follows:<br>

<figure><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/gyH9UBc4bCMkJtPd1gg0/image.png" alt=""><figcaption><p>Simple Get Data App Design View</p></figcaption></figure>

The above design uses several components, namely:

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

After we create the application design, we then programme it using the available code blocks as follows:<br>

<figure><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/4t45aVOMYXvbyj422RK2/image.png" alt=""><figcaption><p>Get Data Application Code Block</p></figcaption></figure>

After we design and programme the application, we can see the results in the android application that we created earlier. The data displayed is the last data from the console in ANTARES which has JSON format. Here is the result display:<br>

<figure><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/IT6JzbYgBvYnVdi6CqTr/image.png" alt=""><figcaption><p>Get Data Application Result Display</p></figcaption></figure>

#### **C.** Receive Realtime Data

In this section, an application is created that can retrieve data from Antares, display it on the screen, and update the displayed data automatically if the user wants to get a live measurement. The data retrieved is temperature and humidity data obtained using the DHT11 sensor. The UI in this application consists of 3 sections, namely the instruction section, the results section, and the preview section. The following user interface settings are made on the MIT App Inventor (AI) "Designer" tab:<br>

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

The above design uses several components, namely:

<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>Component</strong></td><td><strong>Component Name</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>

After we create the application design, we then programme it using the available code blocks as follows:

![](https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/brxX4814IJCeV0n4qJtc/image.png)\
![](https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/zdbUiqQsvLrT3vvxVvmC/image.png)\
![](https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/QkJb4ZShH3Rc0dOjf0mN/image.png)![](https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/jtcaMXddihrxDKHmubSl/image.png)\
![](https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/o6TRQ1YCgNtnmDVHiFSQ/image.png)\
![](https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/4E6rcYzLKkexGHeIOCgk/image.png)![](https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/eh59kiE1GuRJluwgeUMr/image.png)\
![](https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/1BIJjOziqa9Hbm5MFs9h/image.png)\
![](https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/EhtzTXFo32lPLgX4Z8Cy/image.png)\
![](https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/tz1ZiiAE80P6kA1Zm5B2/image.png)\
![](https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/d6Uc5ZkHhtv9eAfNj2h1/image.png)\
After we design and programme the application, we can see the results on the android application that we created. The data displayed is the last data and will continue to refresh automatically. Here is the result display:<br>

<figure><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/OStRgRSzcQGjiUSoaPcj/image.png" alt=""><figcaption><p>Realtime Data Application Result Display</p></figcaption></figure>