LAPORAN APP INVENTOR

Guru Pembimbing : Asmaini

Mata Pelajaran : Informatika

Oleh :
Mahfudh Al Rafif

TAHUN PEMBELAJARAN 2022/2023

SMA NEGERI 9 PADANG
KATA PENGANTAR

Puji syukur kita panjatkan kehadirat Allah Swt. yang telah memberikan rahmat dan hidayah-Nya
sehingga saya dapat menyelesaikan tugas yang berjudul “Pembuatan karya dari APP Inventor” ini
tepat pada waktunya.

Adapun tujuan dari penulisan dari laporan ini adalah untuk memenuhi tugas pada mata pelajaran
informatika. Selain itu, laporan ini juga bertujuan untuk menambah wawasan tentang penggunaan
APP Inventor.

Terlebih dahulu, saya mengucapkan terima kasih kepada Ibu Asmaini, selaku guru informatika
yang telah memberikan tugas ini sehingga dapat menambah pengetahuan dan wawasan sesuai
dengan bidang studi yang saya tekuni ini.

Saya juga mengucapkan terima kasih kepada semua pihak yang tidak dapat saya sebutkan semua,
terima kasih atas bantuannya sehingga sehingga saya dapat menyelesaikan tugas ini.

Kemudian, saya menyadari bahwa tugas yang saya tulis ini masih jauh dari kata sempurna. Oleh
karena itu, kritik dan saran yang membangun kami butuhkan demi kesempurnaan laporan ini.
DAFTAR ISI

KATA PENGANTAR............................................................................................................................2
DAFTAR ISI..........................................................................................................................................3
BAB I.......................................................................................................................................................4
1.1 LATAR BELAKANG.............................................................................................................4
1.2 RUMUSUN MASALAH..............................................................................................................4
BAB II.....................................................................................................................................................4
2.1 PENGERTIAN.............................................................................................................................4
2.2 LANGKAH LANGKAH PEMBUATAN....................................................................................5
A.PERSIAPAN DALAM MENDESAIN........................................................................................5
B.PERANCANGAN USER INTERFACE (UI).............................................................................5
C. PENGKODEAN.........................................................................................................................7
BAB III....................................................................................................................................................9
PENUTUP...............................................................................................................................................9
3.1 KESIMPULAN..............................................................................................................................9
 BAB I
PENDAHULUAN

1.1 LATAR BELAKANG

Sistem berbasis web dimana aplikasi Android dapat digunakan tanpa perlu tahu
bagaimana cara meng-code-nya. Sistem ini telah dihentikan oleh google tapi dirilis
kembali oleh google sebagai proyek open-source dan saat ini dikelola oleh
Massachusetts Institute of Technology (MIT).
Dengan app inventor, pengguna bisa melakukan pemrograman komputer untuk
menciptakan aplikasi perangkat lunak dengan sistem operasi berbasi android. App
inventor ini berbasis visual block programming karena memungkinkan pengguna bisa
menggunakan, melihat, menyusun dan men-drag and drops block yang merupakan
simbol perintah dan fungsi event handler untuk menciptakan sebuah aplikasi yang bisa
berjalan di sistem android.

1.2 RUMUSUN MASALAH

 Apa yang di maksud dengan APP Inventor?

 Apa itu lookExtension?
 Untuk apa mempelajari APP Inventor?
 Bagaimana cara perancangan User Interface (UI)
1.3 TUJUAN

1. Mengetahui persiapan dalam mendesain

2. Mengetahui cara perancangan User Interface (UI)
3. Mengetahui pengkodean block membuat aplikasi

BAB II
PEMBAHASAN
2.1 PENGERTIAN
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.
App Inventor memungkinkan pengguna baru untuk memprogram komputer untuk
menciptakan aplikasi perangkat lunak bagi sistem operasi Android. App Inventor
menggunakan antarmuka grafis, serupa dengan antarmuka
pengguna pada Scratch dan StarLogo TNG, yang memungkinkan pengguna untuk men-drag-
and-drop objek visual untuk menciptakan aplikasi yang bisa dijalankan pada perangkat
Android. Dalam menciptakan App Inventor, Google telah melakukan riset yang berhubungan
dengan komputasi edukasional dan menyelesaikan lingkungan pengembangan online Google

LookExtension
Ekstensi LookExtension adalah library Neural Network dengan jenis mobilenet yang secara
khusus dirancang untuk mengenali gambar dengan menggunakan ponsel. Mobilenet
sebenarnya telah dilatih untuk mengenali 999 kelas, dengan jutaan gambar. Kelas gambar
tersebut dapat diakses di tautan https://github.com/mit-cml/appinventor-extensions/blob/
extension/look/appinventor/docs/reference/components/ classes.txt termasuk dengan
labelnya. Ekstensi ini bukan merupakan kode inti dari App Inventor namun dapat digunakan
dengan App Inventor dengan melakukan impor ekstensi. Tampilan LookExtension pada
proyek "Whatisit"

2.2 LANGKAH LANGKAH PEMBUATAN

A.PERSIAPAN DALAM MENDESAIN

Untuk mempermudah kita dalam mendesain suatu aplikasi ada beberapa persiapan
yang harus diperhatikan, diantaranya adalah sebagai berikut:
1. Melakukan perencanaan terhadap aplikasi yang akan dibuat
2. Menentukan tujuan utama aplikasi yang akan dibuat
3. Memahami tools yang akan digunakan
4. Memahami pengkodean yang digunakan

B.PERANCANGAN USER INTERFACE (UI)

Berikut adalah Langkah-langkah merancang User Interface (UI) dengan
menggunakan APP Inventor:
1. Buka alamat berikut http://ai2.appinventor.mit.edu/
2. Klik create apps, kemudian klik start new project dan beri nama project sesuai keinginan.
3. Drag and drop VertikalArrangement yang diambil dari layout.ubah ukuran menjadi high x
weith 70% x 100%
4. Drag and drop HorizontalArrangement yang diambil dari layout.paskan ukuran dengan
ruang yang tersedia
5. Drag and drop image yang terdapat di bagian UserInterface,kemudian masukkan ke
VertikalArragement.
6. Drag and drop button yang terdapat di bagian UserInterface,kemuadian masukkan ke
HorizontalArragement posisikan menjadi center.ubah warna button menjadi biru dan text
pada button putih.
7. Drag and drop label yang terdapat di bagian UserInterface, kemudian masukkan ke
HorizontalArragement posisikan menjadi center dan sesuaikan ukuran dengan button.
Untuk tata cara pembuatan game yang saya rancangan kita akan menggunakan tic tac toe Extension
itu bisa didapatkan dalam link di bawah ini
https://community.appinventor.mit.edu/t/free-paid-tictactoe-extension/50759

Lalu download extension dan masukan

C. PENGKODEAN

Langkah-langkah :

1. Untuk menapilkan tic tac toe pada layer.Buat Action when screen initialize,masukkan
prosedur call tictactoe intializeview +text VerticalArragement.

2. Mengaktifkan button untuk mereset permainan Ketika button di tekan. Buat action untuk
menjalankan procedure move dengan membuat kode when button click do dan procedures
call reset game.

3. Blocks ini berguna untuk pembuatan text pada layer saat pergantan giliran permainan.
Berikan Action saat canvas disentuh dengam membuat kode when canvas .OnXTurn do+
 dengan menambahkan set label , serta masukkan text X’turn dan buat sebaliknya untuk
O’s turn.

4. Berguna untuk menentukan pemenang dan menampilkannya sebagai text.buat action

when tictactoe onwnnerfound+if then else+logic masukan variable get winner dan math
0 + set label text to winner is x dan set label text to winner is o

5. Menampilkan draw pada text jika tidak ada pemenang pada permainan.buat action when
tictactoe ongamedraw + set label text to draw
 BAB III
PENUTUP
3.1 KESIMPULAN
Desain adalah sebuah sistem yang berlaku untuk seluruh jenis perancangan dimana
titik beratnya dilaksanakan dengan melihat segala sesuau persoalan dengan tidak terpisah
atau sendiri, tetapi sebagai suatu kesatuan yang mana satu masalah dengan lainya saling
terhubung. Untuk mempermudah dalam mendesain aplikasi, kita harus melakukan
perencanaan terlebih dahulu dan memahami tools yang digunakan. User Interface adalah
tampilan visual sebuah produk yang menghubungkan sistem dengan pengguna. User interface
meliputi bentuk, warna, dan tulisan yang didesain semenarik mungkin.