1

1. Pergi ke situs app-inventor dan klik menu Create Apps

2. Anda akan ditampilkan panel sebagai berikut:

Sebelum melanjutkan ke langkah berikutnya, mari berkenalan terlebih dulu dengan

komponen dari panel di atas:
 2

Pengenalan terhadap Lingkungan Pengembangan

Terdapat dua komponen utama pada lingkungan App-Inventor: Designer dan Blocks Editor.
Panel yang tampak pada langkah 2 di atas adalah panel Designer. Panel ini memungkinkan anda menambahkan
komponen pada aplikasi anda dan mengatur penempatannya sesuai dengan bagaimana ia akan terlihat ketika
aplikasi dijalankan.
Sementara Blocks Editor memungkinkan kalian meng-koding fungsi yang diharapkan dari aplikasi kalian. Untuk
berpindah dari tampilan. Berikut tampilan dari Block Editor:

anda dapat berpindah dari tampilan dengan mode Designer dan Block dengan tombol yang ada di sudut
kanan
atas (diberi lingkaran merah).

Komponen Designer

Terdapat 5 jendela pada mode Designer: Palette, Viewer, Components, Media, dan Properties.

Palette adalah tempat seluruh komponen berada. Anda dapat men-drag dan drop komponen mana pun dari
Palette ke Viewer.
 3

Viewer adalah tempat anda dapat melihat tampilan aplikasi anda pada HP dan tempat anda men-drag komponen.

Components menunjukkan seluruh komponen yang telah ditambahkan pada aplikasi. Perhatikan bahwa
komponen Screen secara otomatis didaftarkan sebagai komponen.

Jendela Media menunjukkan setiap file media yang di-upload, seperti gambar dan suara.
 4

Menambahkan Button

Dalam mode designer, tambahkan komponen Button . Jika perangkat anda (HP)
sudah terkoneksi, atau melalui emulator yang berjalan, anda akan melihat Button anda
muncul pada aplikasi.

Sekarang ubah properti Text untuk Button1 menjadi "Talk to Me".

 5

Tambahkan komponen TextToSpeech

Sekarang tambahkan komponen lain, TextToSpeech , yang terdapat pada drawer

Media.

Dan inilah akhir dari penambahan komponen! Sekarang kita pindah ke editor dalam
mode Blocks.

Meng-koding event [Link]

Dalam editor Blocks Editor, anda akan memilih Button1, dan men-drag block event
[Link].
 6

Sekarang, taruh block [Link] ke block event [Link].

 7

Katakan pada app apa yang harus diucapkan

Bagian terakhir adalah membawa (dragging) block text ke tempat pesan untuk
memberitahu apa yang harus diucapkan applikasi. Dari drawer Text, drag block text
kosong dan sisipkan ke dalam block [Link].

Sekarang ubah isi dari block text menjadi yang apa yang anda ingin diucapkan aplikasi.
Bagaimana dengan "Congratulations, you made your first app!".
 8

Uji aplikasi anda

Sekarang anda dapat menguji aplikasi anda. Jika anda telah mengkoneksikan HP atau
tablet anda, atau telah menjalankan emulator pada browser anda. Namun jika anda belum
melakukannya, klik tab "Set up your Computer" di atas untuk mengatur komputer anda
agar dapat menguji aplikasi anda.

Jika anda tidak sedang terkoneksi, klik menu Connect dan pilih metode koneksi anda
(Companion, emulator, atau USB).
 9

What's next?

Ikuti tutorial Talk to Me Part 2 pada tab berikutnya untuk menambahkan beberapa fitur
menyenangkan pada aplikasi anda.

Anda telah menyelesaikan pekerjaan yang hebat pada aplikasi ini!

 10

Menambahkan fitur baru pada aplikasi Talk to Me

Kita akan menambahkan shaking dan text variabel pada bagian 2.

Menambahkan sensor Accelerometer

Kembali pada jendela Designer, dan drag komponen Accelerometer dari drawer
Sensors drawer.

[Link] block

Kembali ke editor dengan mode Blocks, drag block [Link].

Catatan: Jika anda bekerja dengan emulator, kode ini tidak dapat diuji, karena tentu anda
tidak mungkin mengguncang-guncang (shaking) komputer anda !.
 11

Copy dan paste block [Link] dari block event [Link], dan sisipkan
ke dalam block event [Link].
 12

Ubah block text agar mengucapkan kata-kata yang berbeda ketika HP anda diguncang-
guncangkan. Sesuatu seperti "Stop shaking me!".
 13

Menguji aplikasi

Jika anda menggunakan tablet atau HP, coba guncang-guncangkan HP atau tablet anda!

Tambahkan TextBox

Kembali ke mode Designer, dan drag TextBox ke panel Viewer. Kemudian

pindahkan Button1 ke bawah TextBox .
 14

Mengucapkan kata yang tertulis di dalam Textbox

Kembali ke editor Blocks. Kemudian bawa block [Link] dan gantikan block text
"Congratulations" di dalam block event [Link] dengan block yang baru.

Anda dapat menghapus isi block event [Link] dengan meng-klik dan drag block
text lama di dalamnya ke ikon tempat sampah yang ada di pojok kiri bawah dari editor.
 15

Menguji Aplikasi

Coba mengetik sesuatu dalam textbox pada aplikasi anda. Anda dapat melakukannya baik
jika anda menggunakan Emulator atau HP atau tablet.

Selamat! Anda telah membanggun aplikasi yang dapat

berbicara. Anda adalah seorang App Inventor!