banner



How To Upload Mit App Inventor Project To Google Account

Penjelasan

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

Berikut di bawah ini cara menggunakan MIT App Inventor. 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.

halamandesigner

Gambar 1. Tampilan Halaman Designer

halamanblocks

Gambar two. Tampilan Halaman Blocks

Halaman Designer

Pada halaman designer terdapat beberapa jendela seperti Palette, Viewer, Components, Media, dan Backdrop. 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, Cartoon 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:

i. User Interface

Simbol

Nama

Fungsi

buttonmit

Push button Dapat mendeteksi ketukan, hold down ketika pengguna menekan tombol, atau ketika pengguna melepas tombol. Ketika button mendeteksi salah satu dari hal tersebut, button akan menjalankan perintah.

checkboxmit

Checkbox Dapat mendeteksi ketukan dari pengguna dan mengganti country-nya menjadi true/false (boolean).

datepickermit

Appointment Picker Memunculkan kalender untuk memilih tanggal.

imagemit

Image Memasukkan gambar dalam aplikasi.

labelmit

Characterization Menampilkan teks dalam aplikasi.

listpickermit

Listing Picker Menampilkan list yang dapat dipilih oleh pengguna ketika pengguna menekan list.

listviewmit

List View Menampilkan list.

notifiermit

Notifier Memunculkan pesan/peringatan popular-up pada aplikasi. Pesan dapat hilang secara otomatis, atau harus menerima input dari pengguna terlebih dahulu baru menghilang.

passwordtextboxmit

Password Text Box Menyediakan textbox yang menyembunyikan teks yang dimasukkan.

slidermit

Slider Menyediakan progress bar yang dapat digeser.

spinnermit

Spinner Menampilkan pop-up list dengan elemen yang dapat dipilih ketika ditekan.

textboxmit

Text Box Menyediakan area untuk mengetik teks.

timepicketmit

Time Picker Memunculkan jam untuk memilih waktu.

webviewermit

Spider web Viewer Menyediakan expanse yang dapat menampilkan laman web.
2. Layout

Simbol

Nama

Fungsi

horizontalarrangementmit

Horizontal Arrangement Menyusun komponen secara horizontal.

horizontalscrollarrangementmit

Horizontal Gyre Arrangement Menyusun komponen secara horizontal, namun jika lebar komponen melebihi lebar komponen ini, maka dapat digeser (roll).

tablearrangementmit

Table Arrangement Membuat tabel.

verticalarrangementmit

Vertical Arrangement Menyusun komponen secara vertikal.

verticalscrollarrangementmit

Vertical Gyre Arrangement Menyusun komponen secara vertikal, namun jika tinggi komponen melebihi tinggi komponen ini, maka dapat digeser (scroll).
3. Media

Simbol

Nama

Fungsi

camcordermit

Camcorder Mengaktifkan kamera HP dan merekam.

cameramit

Camera Mengaktifkan kamera HP dan memotret.

imagepickermit

Epitome Picker Menampilkan galeri pada aplikasi. Pengguna dapat memilih gambar yang akan disimpan dari galeri yang ditampilkan.

playermit

Player Memainkan musik/sound dan mengatur vibrasi HP.

soundmit

Sound Memainkan musik/audio dan mengatur vibrasi HP dalam interval waktu tertentu.

soundrecordermit

Sound Recorder Merekam suara.

speechrecognizermit

Speech communication Recognizer Mengkonversi suara menjadi teks menggunakan fitur oral communication recognition pada HP.

texttospeechmit

Text to Speech Mengkonversi teks menjadi suara. Pitch dan kecepatan pembacaan dapat diatur.

videoplayermit

Video Player Memutar video serta menampilkan pengaturannya.

yandextranslatemit

Yandex Translate Menerjemahkan teks dari satu bahasa ke bahasa yang lainnya.
4. Drawing and Animation

Simbol

Nama

Fungsi

ballmit

Ball Sprite bola yang dapat berinteraksi pada sentuhan dan tarikan, serta berinteraksi dengan sprite lainnya pada kanvas.

canvasmit

Canvas Kanvas tempat sprite berinteraksi dengan pengguna atau dengan sprite lainnya, atau tempat pengguna menggambar.

imagespritemit

Image Sprite Sprite gambar yang dapat berinteraksi pada sentuhan dan tarikan, serta berinteraksi dengan sprite lainnya pada kanvas.
5. Maps

Simbol

Nama

Fungsi

circlemit

Circumvolve Memvisualisasikan lingkaran dengan radius tertentu (dalam meter) pada koordinat tertentu. Dapat juga digunakan untuk menjalankan program ketika pengguna berada di suatu area.

featurecollectionmit

Feature Collection Mengelompokkan fitur-fitur Maps. Event yang terjadi pada salah satu komponen pada kelompok tersebut, akan memicu result pada komponen-komponen lainnya.

linestringmit

Line Cord Menggambar garis pada peta.

mapmit

Map Menampilkan peta pada layar aplikasi.

markermit

Mark Memberi tanda pada suatu lokasi di peta.

polygonmit

Polygon Membuat perimeter pada peta.

rectanglemit

Rectangle Merupakan polygon dengan garis lintang dan garis bujur untuk batas utara, selatan, timur, dan barat. Jika sudut segiempat dipindahkan, maka informasi koordinat akan diperbaharui.
6. Sensors

Simbol

Nama

Fungsi

acceleromit

Accelerometer Sensor Mendeteksi goyangan dan percepatan dalam m/s2.

barcodemit

Barcode Scanner Membaca barcode.

gyroscopemit

Gyroscope Sensor Mengukur kecepatan sudut dalam derajat/detik.

locationmit

Location Sensor Menyediakan informasi geografis seperti koordinat, ketinggian, kecepatan, dan alamat. Dapat juga mengkonversi alamat menjadi koordinat.

nearfieldmit

Almost Field Memungkinkan aplikasi mengaktifkan fitur komunikasi jarak dekat (NFC).

orientationmit

Orientation Menentukan orientasi HP.

pedometermit

Pedometer Menentukan banyaknya langkah, dan jarak yang ditempuh.

proximitymit

Proximity Sensor Mengukur jarak antara objek dengan layar HP.

Simbol

Nama

Fungsi

contactpickermit

Contact Picker Menampilkan list berisi kontak ketika ditekan.

emailpickermit

E-mail Picker Menampilkan list berisi email ketika pengguna mengetikkan kata kunci ataupun email dari orang yang dituju.

phonecallmit

Telephone Call Melakukan panggilan telepon.

phonenumberpickermit

Phone Number Picker Menampilkan list berisi nomor kontak pada layar HP.

sharingmit

Sharing Memungkinkan pertukaran berkas atau pesan antara satu aplikasi dengan aplikasi lainnya yang terdapat pada HP.

textingmit

Texting Mengirim pesan teks ke suatu nomor kontak.

twittermit

Twitter Memungkinkan komunikasi dengan Twitter sehingga pengguna dapat membuat tweet, melihat tweet, dll.
8. Storage

Simbol

Nama

Fungsi

filemit

File Menerima atau mengirim berkas. Dapat juga digunakan untuk membaca atau menulis berkas.

fusiontablesmit

Fusiontables Command Memungkinkan komunikasi dengan Google Fusion Table. Google Fusion Table dapat menyimpan, membagikan, query, dan memvisualisasikan tabel data.

tinydbmit

TinyDB Menyimpan data untuk aplikasi sehingga ketika aplikasi ditutup, dan kemudian dibuka kembali, data masih tersimpan.

tinywebdbmit

TinyWebDB Menyimpan data pada web.
9. Connectivity

Simbol

Nama

Fungsi

activitystartermit

Activity Starter Memanggil aplikasi lain.

bluetoothclientmit

Bluetooth Client Membuat aplikasi sebagai Bluetooth client.

bluetoothservermit

Bluetooth Server Membuat aplikasi sebagai Bluetooth server.

webmit

Web Memungkinkan aplikasi untuk berinteraksi dengan web dan menyediakan fungsi untuk HTTP Go, POST, PUT, dan DELETE.
10. Experimental

Simbol

Nama

Fungsi

clouddbmit

CloudDB Memungkinkan pengguna aplikasi untuk saling bertukar data pada database dengan software Redis.

firebasedbmit

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 Command, Logic, Math, Text, Lists, Colors, Variables, dan Procedures. Berikut adalah komponen yang terdapat pada halaman blocks:

1. Control

Blok Kode

Fungsi

controlmit1

If kondisional. Jika "if" memenuhi syarat, maka blok yang ada setelah "then" dieksekusi.

controlmit2

Looping dari angka pertama hingga angka terakhir dengan suatu interval. Maka gambar disamping berarti loop dari angka one hingga 5 dengan interval 1: i, 2, 3, four, 5.

controlmit3

For bertingkat. Untuk setiap objek dalam list, dilakukan looping.

controlmit4

Jika nilai test true, maka loop while berjalan.
2. Logic

Blok Kode

Fungsi

logicmit1a logicmit1b

Boolean true/false.

logicmit2

Jika dipasangkan dengan true/false maka true menjadi simulated, dan false menjadi true.

logicmit3

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.

logicmit4

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

mathmit1

Digunakan untuk menginput angka.

mathmit2

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.

mathmit3

Operasi matematika dasar, yaitu tambah, kurang, kali, bagi, pangkat, dan modulus.

mathmit4

Mengambil nilai integer secara acak dari range yang ditentukan.

mathmit5

Operasi trigonometri sin, cos, tan.
four. Text

Blok Kode

Fungsi

textmit1

Teks kosong.

textmit2

Menggabungkan dua atau lebih teks.

textmi3

Memeriksa jika teks kosong atau tidak.

textmit4

Memeriksa apakah ada bagian tertentu dalam suatu teks.

textmi5

Memisahkan teks pada penanda tertentu dan membuatnya menjadi list.
5. List

Blok Kode

Fungsi

listmit1

Membuat list kosong.

listmit2

Membuat list.

listmit3

Menambahkan elemen pada list.

listmit4

Memeriksa apakah ada elemen tertentu pada list.

listmit5

Memeriksa banyaknya elemen pada list.

listmit6

Memeriksa apakah listing kosong atau tidak.

listmit7

Mengambil elemen dari suatu listing.

listmit8

Menghapus elemen dari suatu listing.
6. Colors

Blok Kode

Fungsi

colorsmit1

Pilihan warna yang disediakan MIT AI.

colorsmit2

Membuat warna sendiri dengan menggunakan kode RGB warna.
7. Variables

Blok Kode

Fungsi

variablesmit1

Membuat suatu variabel global.

variablesmit2

Mengambil variabel global.

variablesmit3

Memodifikasi isi dari variabel global.
8. Process

Blok Kode

Fungsi

proceduremit1

Membuat suatu prosedur.

proceduremit2

Membuat suatu fungsi yang mengembalikan hasil tertentu.

Menghubungkan ke ANTARES

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

postdatamit

Gambar 3. Tampilan Desain Aplikasi Post Data Sederhana

Desain di atas menggunakan beberapa komponen, yaitu:

No.

Palette

Komponen

Nama Komponen

1 User Interface Label Header
ii User Interface Label Temperature
3 User Interface Label Humidity
4 User Interface TextBox TextBox1
5 User Interface TextBox TextBox2
vi User Interface Button PostButton
7 Layout HorizontalArrangement HorizontalArrangement1
8 Layout HorizontalArrangement HorizontalArrangement2
9 Connectivity Web Web1

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

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

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

codeblockpostmit

Gambar 4. Code Block Mail service Information ke ANTARES

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

consolepostmit

Gambar 5. Panel Pada ANTARES

B. Menerima Data dari Server

Aplikasi Get data dengan MIT App Inventor merupakan aplikasi sederhana yang akan menampilkan information yang kita ambil dari suatu platform melalui URL dan Header. Dalam proses Go 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 Information pada MIT App Inventor, terlebih dahulu kita buat desain untuk aplikasinya seperti berikut :

desaingetdatamit

Gambar half dozen. Tampilan Desain Aplikasi Go Data Sederhana

Desain di atas menggunakan beberapa komponen, yaitu:

No.

Palette

Komponen

Nama Komponen

1 User Interface Push button Button
2 User Interface Label Header
3 Connectivity Web Web1

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

codeblockgetmit

Gambar 7. Code Block Aplikasi Get Data

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 panel di ANTARES yang memiliki format JSON. Berikut adalah tampilan hasilnya:

hasilgetdatamit

Gambar 8. Tampilan Hasil Aplikasi Get Data

C. Menerima Data Realtime

Pada bagian ini, dibuat sebuah aplikasi yang dapat mengambil data dari Antares, menampilkannya pada layar, dan memperbaharui information 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):

desainrealtimemit

Gambar 9. Tampilan Desain Aplikasi Data Realtime

Desain di atas menggunakan beberapa komponen, yaitu:

No.

Palette

Komponen

Nama Komponen

one User Interface Label Label1
2 Layout HorizontalArrangement HorizontalArrangement1
3 User Interface Push BGet
4 User Interface CheckBox CBLiveMeasurement
5 User Interface Label LRC
6 User Interface Label Label2
7 Layout HorizontalArrangement HorizontalArrangement2
8 User Interface Label Label5
9 User Interface Label LTemp
10 Layout HorizontalArrangement HorizontalArrangement3
xi User Interface Label Label6
12 User Interface Label LHum
13 User Interface Label Label3
14 User Interface Characterization LRaw
15 User Interface Label Label4
16 Layout HorizontalArrangement HorizontalArrangement4
17 Layout HorizontalArrangement HorizontalArrangement5
18 Layout HorizontalArrangement HorizontalArrangement6
18 Layout HorizontalArrangement HorizontalArrangement6
19 User Interface Label Label7
20 User Interface Label LJSON1
21 User Interface Characterization Label9
22 User Interface Label LJSON2
23 User Interface Label Label11
24 User Interface Label LJSON3
25 User Interface Characterization LParsed
26 Connectivity Web Web1
27 Sensors Clock Clock1

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

Gambar 10. Code Block Aplikasi Information Realtime

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:

datarealtime1

Gambar 11. Tampilan Hasil Aplikasi Data Realtime

Source: https://antares.id/id/mitappinventor2.html

Posted by: jenningsrundepress.blogspot.com

0 Response to "How To Upload Mit App Inventor Project To Google Account"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel