Anda di halaman 1dari 13
Membuat Aplikasi Tanpa Koding – APP Inventor
Membuat Aplikasi Tanpa Koding – APP Inventor
Membuat Aplikasi Tanpa Koding – APP Inventor Pertemuan 1 Bab 2 Proyek 2 Menggerakkan Benda Dalam

Pertemuan 1

Bab 2 Proyek 2

Menggerakkan Benda

Dalam Proyek ini, Kita akan membuat Aplikasi dimana terdapat Tombol untuk mengarahkan kemana Benda tersebut Bergerak.

Langkah-Langkah

A. Menyiapkan Desain dan Komponen

1. Klik Start New Project di sebelah kiri atas dan berinama Projek dengan

TombolArah

Desain dan Komponen 1. Klik Start New Project di sebelah kiri atas dan berinama Projek dengan
Membuat Aplikasi Tanpa Koding – APP Inventor
Membuat Aplikasi Tanpa Koding – APP Inventor

2. Klik Menu Drawing And Animation, Pilih Canvas dan Seret ke Layar.

Drawing And Animation , Pilih Canvas dan Seret ke Layar. 3. Atur Height 250 pixel dan

3. Atur Height 250 pixel dan Width Fill parent

ke Layar. 3. Atur Height 250 pixel dan Width Fill parent 4. Klik dan Seret ImageSprite

4. Klik dan Seret ImageSprite ke Tengah Layar

5. Atur Height 60 pixel dan Width 60 pixel Upload Gambar (terserah Anda) atau bisa download dulu cari di google, di menu Picture

6. Klik menu LayOut pilih HorizontalArangement, Seret ke layar di bawah Canvas. Atur width fill parent

6. Klik menu LayOut pilih HorizontalArangement, Seret ke layar di bawah Canvas. Atur width fill parent
6. Klik menu LayOut pilih HorizontalArangement, Seret ke layar di bawah Canvas. Atur width fill parent
Membuat Aplikasi Tanpa Koding – APP Inventor
Membuat Aplikasi Tanpa Koding – APP Inventor

7. Klik User Interface pilih Button, lalu seret dan masukkan ke HorizontalArrangement. rename tombol dengan nama tkiri, width fill parent Text ganti dengan Tulisan Kiri

8. Tambahkan Button lagi ke dalam HorizontalArrangement, rename tkanan, Text Kanan maka akan tampil seperti gambar berikut :

tkanan, Text Kanan maka akan tampil seperti gambar berikut : 9. Buatlah 4 tombol Tombol lagi

9. Buatlah 4 tombol Tombol lagi

a. tbawah, text Bawah

b. tatas, text Atas

c. tkananatas, text Kanan Atas

d. tkiriatas, text Kiri Atas

Atur semua tombol width fill parent Jika sudah tampilan akan terlihat seperti ini

d. tkiriatas, text Kiri Atas Atur semua tombol width fill parent Jika sudah tampilan akan terlihat
Membuat Aplikasi Tanpa Koding – APP Inventor
Membuat Aplikasi Tanpa Koding – APP Inventor

10. Tampilan Kesluruhan

Membuat Aplikasi Tanpa Koding – APP Inventor 10. Tampilan Kesluruhan Bab 2 Hal 4
Membuat Aplikasi Tanpa Koding – APP Inventor
Membuat Aplikasi Tanpa Koding – APP Inventor

B. Menyiapkan Perintah

Setiap Tombol harus diberi Perintah, Kita akan memmebuat Perintah untuk Tombol Kiri (tkiri) terlebih dahulu.

Perintah untuk Tombol Kiri (tkiri) terlebih dahulu. Ketika di Klik maka tkiri Atur Benda mengarah ke

Ketika

di Klik

maka

tkiri

Atur Benda mengarah ke 180 O Atur kecepatan ke 5

Arah dalam APP Inventor (Heading)

O Atur kecepatan ke 5 Arah dalam APP Inventor (Heading) Jadi kalau kita mau mengarahkan ke

Jadi kalau kita mau mengarahkan ke Kanan, set Heading ke 0, dst.

Membuat Aplikasi Tanpa Koding – APP Inventor
Membuat Aplikasi Tanpa Koding – APP Inventor

Buat Perintah Semua Tombol seperti Gambar berikut :

Inventor Buat Perintah Semua Tombol seperti Gambar berikut : Tampilan di HP adalah sebagai Beikut Tugas

Tampilan di HP adalah sebagai Beikut

Gambar berikut : Tampilan di HP adalah sebagai Beikut Tugas Buatlah 2 tombol lagi yaitu Kanan

Tugas

Buatlah 2 tombol lagi yaitu Kanan Bawah dan Kiri Bawah. Aturlah Posisi Tombol agar lebih menarik.

Membuat Aplikasi Tanpa Koding – APP Inventor
Membuat Aplikasi Tanpa Koding – APP Inventor

Pertemuan 2

Dalam Proyek ini, Anda akan membuat 2 buah Benda yang bergerak dan dapat bertabrakan.

Langkah-langkah

A. Menyiapkan Desain dan Komponen

1. Download 2 buah gambar bola bebas saja dengan mengetik ball png di Google

2. Klik Start New Project di Kiri atas, dan beri nama Proyek dengan nama Bola (Boleh bebas yang penting tanpa spasi)

3. Pilih Menu Drawing and Animation, lalu Seret Canvas ke Layar

Pilih Menu Drawing and Animation, lalu Seret Canvas ke Layar 4. Pilih Menu Drawing and Animation

4. Pilih Menu Drawing and Animation Pilih ImageSprite Seret ke Layar

and Animation, lalu Seret Canvas ke Layar 4. Pilih Menu Drawing and Animation Pilih ImageSprite Seret
Membuat Aplikasi Tanpa Koding – APP Inventor
Membuat Aplikasi Tanpa Koding – APP Inventor

5. Klik ImageSprite1 lalu klik Rename, di bagian bawah

5. Klik ImageSprite1 lalu klik Rename, di bagian bawah 6. Ubah ukuran bola1 Height 100 pixel

6. Ubah ukuran bola1 Height 100 pixel dan width 100 pixel.

6. Ubah ukuran bola1 Height 100 pixel dan width 100 pixel. 7. Upload gambar yang telah

7. Upload gambar yang telah Anda download.

width 100 pixel. 7. Upload gambar yang telah Anda download. 8. Lakukan lagi langkah di atas

8. Lakukan lagi langkah di atas untuk bola2,

9. Pilih Menu Drawing and Animation Pilih ImageSprite Seret ke Layar, lalu berinama

bola2.

10. Ubah ukuran bola2 Height 50 pixel dan width 50 pixel.

11. Upload gambar yang telah Anda download (kalau bisa gambar berbeda)

Membuat Aplikasi Tanpa Koding – APP Inventor
Membuat Aplikasi Tanpa Koding – APP Inventor

12. Hasil nya akan Terlihat seperti Gambar berikut

Membuat Aplikasi Tanpa Koding – APP Inventor 12. Hasil nya akan Terlihat seperti Gambar berikut Bab
Membuat Aplikasi Tanpa Koding – APP Inventor
Membuat Aplikasi Tanpa Koding – APP Inventor

B. Memberikan Perintah

Klik Tombol Blocks di Kanan atas, dan Buatlah Prosedure di bawah ini

Bola Pertama (bola1)

1. Memberikan Perintah berjalan ke arah tertentu ketika Benda di sentuh dan diusap

Klik bola1 pilih When bola1 Flung kemudian klik gamber tersebut.

bola1 pilih When bola1 Flung kemudian klik gamber tersebut. Lalu Klik bola1 lagi, cari set bola1

Lalu Klik bola1 lagi, cari set bola1 heading

tersebut. Lalu Klik bola1 lagi, cari set bola1 heading Klik lalu seret letakkan di lubang do,

Klik lalu seret letakkan di lubang do, lihat gambar

heading Klik lalu seret letakkan di lubang do, lihat gambar PERHATIKAN WARNA DAN POLANYA Ambil Get

PERHATIKAN WARNA DAN POLANYA

Ambil Get Variabel di Menu Variable (warna Orange)

WARNA DAN POLANYA Ambil Get Variabel di Menu Variable (warna Orange) Seret dan letakkan di To,

Seret dan letakkan di To, Lihat Gambar

WARNA DAN POLANYA Ambil Get Variabel di Menu Variable (warna Orange) Seret dan letakkan di To,
Membuat Aplikasi Tanpa Koding – APP Inventor
Membuat Aplikasi Tanpa Koding – APP Inventor

Klik Kotak di kanan get dan Gantilah menjadi Heading. Lihat Gambar

di kanan get dan Gantilah menjadi Heading. Lihat Gambar Ok. Selesai 2. Memberikan perintah ketika benda

Ok. Selesai

2. Memberikan perintah ketika benda menyentuh batas di kotak Canvas, agar bisa memantul Buatlah Perintah seperti Gambar di Bawah ini :

bisa memantul Buatlah Perintah seperti Gambar di Bawah ini : PERHATIKAN WARNA DAN POLANYA 3. Lakukan

PERHATIKAN WARNA DAN POLANYA

3. Lakukan Langkah 1 dan 2 untuk bola2

Perintah seperti Gambar di Bawah ini : PERHATIKAN WARNA DAN POLANYA 3. Lakukan Langkah 1 dan
Membuat Aplikasi Tanpa Koding – APP Inventor
Membuat Aplikasi Tanpa Koding – APP Inventor

4. Berikan Perintah Apabila Bole bertemu, maka bola1 akan mengikuti bola2

Apabila Bole bertemu, maka bola1 akan mengikuti bola2 Berikut seluruh Perintah pada Proyek ini Bagaimana cara

Berikut seluruh Perintah pada Proyek ini

mengikuti bola2 Berikut seluruh Perintah pada Proyek ini Bagaimana cara membuatnya silahkan Lihat Video di Youtube

Bagaimana cara membuatnya silahkan Lihat Video di Youtube di link di bawah ini Video Penjelasan di Youtube https://youtu.be/i02VdkHfizI

Tugas :

Tambahkan 1 atau 2 bola Lagi dan buatlah dapat saling bertabrakan.

Membuat Aplikasi Tanpa Koding – APP Inventor
Membuat Aplikasi Tanpa Koding – APP Inventor

Modul dalam bentuk Word bisa Anda dapatkan di

belajar.bimbelaqila.com

seharga 50 rb Rupiah

Silahkan Share Modul ini dalam bentuk pdf.

Modul ini bisa digunakan sebagai Salah satu Tambahan Kegiatan Bimbel (Paket Belajar Membuat Aplikasi Android), atau bisa digunakan sebagai Ekstra Kurikulum di Sekolah.

Kenapa Pakai APP Inventor ? Sangat Ringan Bahkan saat di Buka dengan Komputer QuadCore atau i3.

Selamat Mencoba.