Tutorial MIT App

Dalam tutorial ini, kami akan menunjukkan cara bagaimana untuk menggunakan MIT App. MIT App adalah cloud-based dan ia boleh berinteraksi dengan Arduino! Dan yang penting ianya adalah PERCUMA! Dengan hanya skill programming/coding yang basic, anda mampu membuat aplikasi Android anda sendiri.

Terus ke link appinventor.mit.edu untuk masuk ke home page MIT App. Tekan Create Apps!

Sign in menggunakan email Gmail anda.

Selepas selesai Sign in, tekan ‘Start new project‘ untuk memulakan projek anda.

Berikan nama untuk projek anda dan nama projek tidak boleh ada ‘space’

Ini adalah paparan designer. Disinilah kita akan design aplikasi kita mengikut reka bentuk, fungsi serta interface yang diinginkan

1. Pallete – Komponen untuk aplikasi seperti User Interface, Layout, Media dll.
2. Viewer – Tempat komponen disusun yang membentuk rupa aplikasi
3. Component List – Senarai komponen yang digunakan
4. Properties – Untuk mengubah setting komponen-komponen yang digunakan

Manakala ini pula paparan block. Di paparan block kita akan menentukan bagaimana aplikasi itu berfungsi dan menentukan fungsi-fungsi komponen yang digunakan didalam paparan designer.

1. Blocks – Jenis block seperti Control, Logic, Math dan Variables
2. Block Program – Senarai block untuk coding aplikasi
3. Coding Area – Tempat block program disusun yang membentuk coding kepada aplikasi

Dalam tutorial ini kita akan fokus pada penggunaan button dan navigasi antara skrin.

Kita akan mula dengan membina Screen1 @ Home page aplikasi kita. Untuk membina screen kita perlu susun komponen Pallete pada screen telefon yang terdapat di paparan Designer. Anda boleh klik pada tanda ‘?’ untuk mengetahui fungsi setiap features yang terdapat pada Pallete.

Untuk memilih komponen, anda hanya perlu klik dan drag komponen tersebut kedalam skrin di bahagian Viewer.

Anda boleh mengubah nama komponen dengan klik butang ‘Rename’ untuk memudahkan urusan program coding dan juga mengubah setting komponen di bahagian ‘Properties’

Untuk menambah screen, anda perlu klik butang ‘Add Screen’ dan skrin ke-2 akan ditambah

Setelah selesai menambah skrin, letakkan 1 butang pada skrin kedua

Kemudian kita akan ke bahagian program/coding di paparan ‘Blocks’. Pilih block berkaitan, drag dan letakkan diruangan Viewer.

1. Block butang Next – when next. Click, do
2. Block Control – open another screen, screenName
3. Block Text – “[ ]”

Anda akan gabungkan semua blocks tadi dan membentuk gabungan blocks seperti gambar dibawah.

Buat gabungan yang sama pada Screen2 tetapi Screen1 diletakkan diruangan Text.

Setelah selesai, anda boleh menguji aplikasi anda pada telefon bimbit. Anda perlu install aplikasi MIT AI2 Companion terlebih dahulu yang boleh didapati di Google Play Store. p/s: Aplikasi MIT AI2 Companion untuk iOS masih di peringkat beta testing.

Selesai install, anda perlu linkkan MIT AI2 Companion dengan MIT App Inventor. Klik ‘Connect’ dan pilih AI Companion.

Scan QR code yang diberi atau boleh gunakan code.

Anda boleh terus menggunakan aplikasi tersebut. Selamat mencuba!

Kami akan menceritakan dengan lebih mendalam mengenai MIT App dalam tutorial seterusnya.