MAKALAH PROGRAMING MULTIMEDIA

APP INVENTOR

Disusun Oleh :

Adi Ambhara Sanuaka 1215061006 Kelas C

JURUSAN PENDIDIKAN TEKNIK ELEKTRO

FAKULTAS TEKNIK DAN KEJURUAN

UNIVERSITAS PENDIDIKAN GANESHA

SINGARAJA

2015

KATA PENGANTAR

Puji syukur penulis panjatkan kehadapan Tuhan Yang Maha Esa karena

atas rahmat-Nya penulis mampu menyelesaikan makalah yang berjudul “App

Inventor”, tepat pada waktunya.

Dalam penulisan ini penulis banyak mendapat dukungan, bimbingan, serta

semangat dari banyak pihak. Untuk itulah dengan penuh rasa hormat penulis

ucapkan terima kasih kepada :

1. Bapak Made Santo Gitakarma, ST., MT., selaku Dosen Pengampu Mata

Kuliah Programing Multimedia.

2. Teman-teman mahasiswa di Jurusan Pendidikan Teknik Elektro yang

telah memberikan bantuan yang berguna dalam penyusunan makalah ini.

3. Pihak-pihak lain yang tidak dapat disebutkan satu persatu yang telah

memberikan bantuan dalam merapungkan karya tulis ini.

Penulis menyadari bahwa tulisan ini masih jauh dari sempurna dan

memerlukan pengembangan lebih lanjut. Oleh karena itu saran dan kritik yang

membangun dari pembaca sangat penulis harapkan agar nantinya dapat diperoleh

hasil yang lebih maksimal. Dalam kesempatan ini penulis juga mohon maaf jika

ada hal-hal yang tidak berkenan dalam makalah ini dan proses yang dilalui dalam

penyusunannya. Akhirnya penulis berharap semoga makalah ini dapat bermanfaat

bagi semua pihak.

Singaraja, 13 Juni 2015

Penulis

ii

DAFTAR ISI

KATA PENGANTAR......................................................................................ii

DAFTAR ISI....................................................................................................iii

BAB I PENDAHULUAN.................................................................................1

1.1 Latar Belakang......................................................................................1

1.2 Rumusan Masalah.................................................................................1

1.3 Tujuan...................................................................................................2

1.4 Manfaat.................................................................................................2

BAB II PEMBAHASAN..................................................................................3

2.1 App Inventor.........................................................................................3

2.2 Kemampuan App Inventor...................................................................4

2.3 Cara Instalasi App Inventor..................................................................5

2.4 Cara Menggunakan App Inventor Ofline.............................................9

2.5 Cara Membuat Aplikasi Sederhna........................................................11

BAB III PENUTUP..........................................................................................12

3.1 Kesimpulan...........................................................................................12

3.2 Saran.....................................................................................................12

DAFTAR PUSTAKA

iii

BAB I

PENDAHULUAN

1.1 Latar Belakang

Pada era sekarang, gadget merupakan sebuah alat yang kerap ditemukan dalam

kehidupan sehari-hari. Gadget sangat digemari oleh banyak kalangan, dari tua, muda,

besar maupun kecil. Salah satu gadget yang sering ditemui adalah telepon seluler (ponsel)

atau handphone. Ponsel mengalami berevolusi, handphone yang hanya digunakan untuk

telepon dan SMS (Short Message Service) dan kini handphone dapat menggunakan

berbagai macam aplikasi didalamnya.

Ponsel masa kini adalah ponsel yang menggunakan OS (Operation System)

didalamnya seperti OS Simbyan, OS Blackberry, OS Windows ,OS Android, dan

sebagainya. Ponsel yang berbasis Operation System Android dahulunya tidak banyak

dikenal atau asing oleh orang atau masyarakat di dunia, namun kini setiap orang atau

masyarakat di dunia sebagian besar menggenggam ponsel berbasis android ini dan tidak

menutup kemungkinan menjadi salah satu gadget yang sangat berperan penting dalam

kehidupan mereka.

Aplikasi merupakan salah satu yang aspek terpenting dalam operation system.

Aplikasi ini dapat dikatakan sebagai jiwa dari OS dalam ponsel masa kini khususnya

ponsel pintar (smartphone). Aplikasi dibuat untuk digunakan dan dapat diperjualbelikan.

Aplikasi yang sering kita temui telah menggunakan OS android yang dapat diakses

dengan mudah dengan Google Play atau sebagainya. Namun seluruh pengguna tidak

mengetahui cara untuk membuat atau menghasilkan sebuah aplikasi melainkan hanya

menggunakannya saja.

Oleh sebab itu dari latar belakang diatas, penulis akan membahas mengenai

program atau software yang digunakan untuk membuat atau menghasilkan aplikasi

android didalam makalah ini. Bebagai macam aplikasi atau software yang digunakan

dalam pembuatan atau menghasilkan sebuah program khususnya android, namun kali ini

penulis akan membahas mengenai App Inventor.

1

1.2 Rumusan Masalah

1. Apa itu App Inventor?

2. Apa sajakah kemampuan dari App Inventor?

3. Bagaimana cara menginstal App Inventor pada Windows?

4. Bagaimana cara menggunakan App Inventor Offline?

5. Bagaimana cara membuat aplikasi sederhana pada App Inventor?

1.3 Tujuan

Adapun tujuan mengenai masalah ini yang berlandaskan dengan latar belakang dan

rumusan masalah adalah sebagai berikut :

1. Untuk memenuhi tugas yang dilimpahkan oleh Dosen Pengampu Mata Kuliah

Programing Multimedia, Bapak Made Santo Gitakarma, ST., MT.

2. Untuk menambah pengetahuan mengenai program pembuatan aplikasi android (App

Inventor).

1.4 Manfaat

Untuk menginformasikan sudah sejauh mana OS Android berkembang, serta

berpartisipasi dalam mengembangkan smartphone dan aplikasinya yang berbasis Android

untuk kepentingan masyarakat dunia pada umumnya dan di Indonesia pada khususnya.

2

BAB II

PEMBAHASAN

2.1. App Inventor

App Inventor adalah sebuah Web Aplikasi yang di kembangkan oleh Google . dan di

rilis pada 15 Desember 2010 , pada awalnya sih penelitian ini dilakukan oleh goole

dengan tujuan sebagai kompetensi pendidikan pada lingkungan pengembangan online,

App Inventor berbentuk Web Aplikasi yang digunakan untuk mengembangkan atau

membuat aplikasi android phone tanpa harus tahu bahasa pemrograman secara

keseluruhan dan tanpa coding sama sekali, karena App Inventor ini hanya drag and drop.

(Purnomo, Hadi.5;2014)

App Inventor adalah sebuah tool untuk membuat aplikasi android yang berbasis visual

block programming, jadi dapat membuat aplikasi tanpa kode satupun. Hal tersebut

dikarenakan kita akan melihat, menggunakan, menyusun dan drag-drops “blok” yang

merupakan simbol-simbol perintah dan fungsi event handler tertentu dalam membuat

aplikasi, dan secara sederhana kita bisa menyebutnya tanpa menuliskan kode program

coding less. (http://indo-android.blogspot.com/2011/09/apa-itu-app-inventor.html)

App Inventor adalah sebuah aplikasi builder untuk membuat aplikasi yang berjalan di

sistem operasi Android yang disediakan oleh googlelabs dan untuk membuat aplikasi

android haruslah bermodalkan koneksi internet dan browser. Proyek yang di buat akan di

simpan secara online yang membantu kita untuk mengerjakan proyek ini secara bertahap.

Meskipun App Inventor ini terbatas tapi banyak banget aplikasi yang powerfull , misal

game dengan Grafis 2D dan Animasi, utility, Aplikasi Multimedia, GPS, Navigasi dan

masih banyak lagi.

(Purnomo, Hadi.5;2014)

App Inventor ini terdapat beberapa komponen yang terdiri dari :

1. Komponen Desainer

Komponen desainer berjalan pada browser yang digunakan untuk memilih

komponen yang dibutuhkan dan mengatur property-nya. Pada komponen desainer

sendiri terdapat 5 bagian, yaitu palette, viewer, component, media dan properties,

seperti terlihat pada gambar di atas.

Palette : list komponen yang bisa digunakan

Viewer : untuk menempatkan komponen dan mengaturnya sesuai

tampilan yang diinginkan

3

Component : tempat list komponen yang dipakai pada project kita

Media : mengambil media audi atau gambar untuk project kita

Properties : mengatur properties komponen yang digunakan, seperti width,

height, name, dll

2. Block Editor

Block Editor berjalan di luar browser dan digunakan untuk membuat dan

mengatur behaviour dari komponen-komponen yang dipilih dari komponen desainer.

berhubung block editor ini basisnya java, jadi sebelumnya harus terdapat jdk sama jre

nya.

3. Emulator

Emulator digunakan untuk menjalankan dan mengetest project yang telah kita

buat. Jadi yang belum punya android pun tetep bisa belajar karena app inventor

menyediakan emulatornya juga.

2.2. Kemampuan App Inventor

Banyak hal yang menyenangkan yang Anda dapat jika belajar menggunakan APP

Inventor. Kesenangan tersebut adalah sebagai berikut.

Just For Fun. Membuat aplikasipada perangkat mobile sangatlah menyenangkan dan

APP Inventor menawarkan proses eksplorasi dan discovery. Anda dapat membuat

App Inventor pada sebuah web browser, hubungan ponsel Anda mulailah meletakan

block. Anda dapat secara cepat melihat dan berinteraksi dengan aplikasi yang sedang

Anda bangun pada ponsel Anda.

Prototype. Apakah saat ini Anda mempunyai ide untuk membuat aplikasi ? Tuangkan

ide Anda menggunakan APP Inventor. Prototype adalah sebuah model kasar dan

belum lengkap, akan tetapi telah mewakili ide dasar Anda.

Membangun aplikasi sesuai dengan keperibadian. Pada suatu keadaan di dunia

aplikasi mobile, mungkin Anda anak berhenti pada suatu keadaan dengan aplikasi

yang telah digunakan. Siapa yang tidak akan mengkomplain mengenai sebuah

aplikasi yang diharapkan dapat dipersonalisasi atau disesuaikan dengan seadanya?

App Inventor dapat membangun sebuah aplikasi seperti yang Anda inginkan.

Mengembangkan aplikasi secara lengkap. App Inventor tidak hanya digunakan untuk

membuat prototype system atau mendesain tampilan luar. Anda dapat membangun

secara utuh aplikasi tersebut menjadi sebuah aplikasi yang bersifat general purpose.

Bahasa block menyediakan semua block pemrograman fundamental seperti

perulangan dengan kondisi dalam bentuk form block.

4

Teach and learn. Tidak peduli Anda dari sekolah menengah, sekolah tinggi atau

universitas, App Inventor adalah sebuah guru dan peralatan belajar yang paling

efektif. Hal ini sangat baik untuk Anda yang ingin belajar tentang sains komputer.

Kuncinya, Anda dapat belajar pada saat membuat aplikasi.

Kebanyakan orang berpikir, banyak App Inventor sangat mudah untuk digunakan,

karena bersifat visual dan mempunyai fitur drag and drop interface. Adapun kelebihan

dari APp Inventor adalah sebagai berikut.

Anda tidak perlu mengingat dan menulis instruksi. Salaj satu sumber terbesar dari

kekesalan para programmer pemula adalah menulis kode program dan muncul pesan

error pada jendela pesan. App Inventor membuat Anda sebagai pemula tidak akan

menjadi frustrasi dalam mengembangkan aplikasi.

Anda hanya seperti memilih pilihan. App Inventor membuat komponen-komponen

dan blok diorganisasikan pada sebuah drawer yang siap sedia untuk Anda. Anda dapat

dengan mudah memprogram hanya dengan mencari blok-blok program yang sesuai.

Anda tidak perlu menginat instruksi atau harus membuka menual program.

Hanya seperti block yang dipasangkan satu sama lain. Pemrogram dengan App

inventor tidak menampilkan pesan error, akan tetapi bahasa block App inventor akan

mencegah Anda untuk melakukan kesalahan di tempat pertama. Sebagai contoh, dapat

memasukkan teks. Hal ini tidak dapat mencegah semua error, akan tetapi sangat

membantu.

Anda dapat menangani event secara langsung. Bahasa pemrograman tradisional telah

didesain bahwa pemrograman seperti bekerja dengan resep atau beberapa istruksi. Akan

tetapi, dengan interface grafis dan khususnya untuk aplikasi mobile, event dapat terjadi

kapan saja. Sebuah event handler ibarat seperti berkata “Ketika ini terjadi, aplikasi

melakukan ini”. Dalam sebuah bahasa tradisional seperti Java, Anda harus memahami

class, object dan objek khusus yang sering disebut listener untuk mengekspresikan sebuah

event sederhana

(https://rijalahmad.wordpress.com/2013/07/29/kemampuan-app-inventor/)

2.3. Cara Instalasi App Inventor

Perlengkapan yang dibutuhkan:

1. Download AiLiveComplete disini.

2. Download Software AppInventor disini (khusus Windows).

3. JDK disini.

5

Langkah – langkah instalasi:

1. Extract AiLiveComplete dan ditaruh pada directory sesuai dengan keinginan kita

2. Instalasi AppInventor.

Untuk path silahkan ditentukan sesuai dengan program file tempat menyimpan 64 bit

atau memakai 86 bit.

3. Instalasi JDK (sesuaikan dengan OS windowsnya).

6

Klik Next.

Klik Next dan menunggu instalasi JDK selesai.

Selanjutnya instalasi jre.

Klik Next dan menunggu instalasi selesai.

Setelah tampil gambar dibawah ini:

7

Klik Close.

4. Melakukan Setting Path untuk windows sebagai berikut:

o Klik kanan My Computer dan properties.

o Klik Advance System Setting di sebelah kiri.

o Pada System Properties klik tombol Environment Variable.

o Dan klik tombol new dan isikan seperti berikut:

Menjalankan WinStartAIServer.cmd dan WinStartBuildServer.cmd di

Ai2LiveComplete. Seperti dibawah ini:

8

Setelah itu buka browser kesayangan anda seperti dibawah ini dan mengetikkan pada

url localhost:8888.

Mengisi email terserah dari pemilik computer.

Terakhir akan tampil seperti di bawah ini.

(https://muchsaifurrachman01.wordpress.com/2013/12/11/cara-instalasi-app-inventor/)

2.4. Cara Menggunakan App Inventor Offline

App inventor true offline, maka tanpa terkoneksi ke internetpun kita bisa membuat

aplikasi android secara mandiri sekaligus bisa mempaket atau mengcompile-nya

langsung. Itulah sebabnya disebut juga App Inventor Personal Server, karena sudah

include server compilernya, benar-benar sangat menyenangkan buat yang ingin belajar

9

App Inventor tetapi terhambat dengan koneksi internetnya, dan pastinya lebih cepet dari

yg versi onlinenya di Beta App Inventor.

App Inventor true offline ini dipackage oleh Gary Frederick ( Jefferson Software)

dari source yang di rilis oleh MIT. Disini kita akan memakai versi windows, masih versi

test tetapi sudah bagus dan sebanding dengan versi online-nya. OK sekarang waktunya

untuk mencobanya :

1. Download file Personal.zip dari

http://sourceforge.net/projects/ai4aconfigs/files/Personal%20server/

2. Menurut keterangan sudah di test pada Windows 7,

3. Saat dicoba pada Windows XP SP3 dengan JDK 1.6, Block Editor tidak bisa

terkoneksi ke Emulator. Dan ketika memakai Java JDK 1.7 bisa lancar, jadi pastikan

apabila tidak bisa lancar menggunakan java JDK 1.6 maka pakailah Java JDK 1.7

download dari http://www.oracle.com/technetwork/java/javase/downloads/jdk7-

downloads-1637583.html

4. Install terlebih dulu JDK 1.7

5. Ekstrak file Personal.zip , bebas di tempatkan difolder mana, maka kita akan

mendapatkan empat (4) buah folder yaitu :

a. appengine-java-sdk-1.6.4

b. AppInventor

c. BuildServer

d. java

6. Untuk mencobanya, jalankan BuildServer AppInventor terlebih dulu, yaitu klik

duakali pada Personal\BuildServer\launch-buildserver.cmd Sehingga akan muncul

jendela command line, tunggu hingga selesai

7. Jalankan Sever AppInventor, yaitu dari folder AppInventor klik duakali pada

Personal\AppInventor\startAI.cmd , ini juga akan membuka jendela command line

8. Buka browser, dan masukkan alamat localhost:8888 , maka akan terbuka jendela

desainer dan kita sudah bisa memulai membuat aplikasi android dengan App Inventor

9. Alamat lain yang bisa dicoba adalah halaman admin yaitu pada

localhost:8888/_ah/admin , silahkan diexplore halaman admin ini.

(Purnomo, Hadi. 12;2014)

10

2.5. Cara Membuat Aplikasi Sederhana

Pertama 

Sebagai gambaran disini kita akan membuat aplikasi sederhana

namanya HelloPur, Berikut SS dari aplikasi yang sudah jadi:

 

Jadi cara kerjanya ketika gambar kucingnya di-klik, maka akan keluar suara kucing

"meow"

Kedua

1. Harus sudah punya App inventor, bisa di download di sini, filenya sekitar 160.2 MB.

11

2. Setelah berhasil di download, extract filenya taruh di drive yang suka, misalnya di

drive D

Ketiga 

Mari kita buat aplikasi pertama kali, diasumsikan sudah berhasil menseting App

Inventor, berikut tampilan pertama kali pada saat App Inventor di buka:

Jika sudah tampil seperti di atas, langsung saja klik tombol New dan isikan nama

project yang akan kita buat yaitu "HelloPur" kemudian klik OK, berikut SS nya:

Kemudian drag Button ke dalam Screen1 untuk lebih jelasnya lihat SS berikut:

Setelah itu kita masukan gambar kucing, (tapi agan download dulu gambar

kucingnya disini) jika sudah di download inputkan file gambarnya dengan cara klik di

form None di bagian Image kemudian pilih Add pilih gambar kucing yang tadi sudah di

downlod kemudian klik Ok.

12

Jika berhasil akan tampil seperti SS di bawah ini:

Kemudian Hapus Text for Button1 pada form Text, berikut SS nya:

Langkah selanjutnya adalah menambahkan Label yang akan di beri nama Pet the

Kitty! caranya lihat SS berikut ini:

Jika Label sudah dibuat berikutnya tambahkan Sound (download dulu disini)

kemudian klik Mediapilih Sound dan tarik ke Screen1. Kemudian di

bagian Properties klik None lalu klik Add dan pilih file meow tadi kemudian

klik Ok Berikut SS nya agar lebih jelas:

Jika semuanya sudah lancar berarti tahap membuat tampilan sudah selesai, berikutnya

kita akan masuk ke tahap logic nya. Tujuannya adalah jika gambar di klik akan keluar

bunyi "Meow" Berikut adalah langkah-langkahnya:

13

1. Pilih Open The Blocks Editor yang berada di pojok kanan atas. (Tambahan: Jika

muncul download pilih Open with kemudian klik Browse klik Browse lagi, cari

folder Java/jre7/bin pilih file javawskemudian Klik Open dan di Ok) disini komputer

anda harus sudah terinstal Java kalo belum instal dulu ambil disini.

 Berikut adalah tampilah selanjutnya setelah di OK yaitu tampilan dari Blocks Editor:

Klik My Blocks lalu klik Button1 dan drag Button1.Click lihat gambar di bawah ini:

14

Kemudian Klik Sound1 dan pilih Sound1.Play lalu masukkan ke

dalam Button1.Click:

Berikut hasilnya:

Jika tahapan di atas sudah selsai makan kita masuk ke tahapan uji coba, caranya

adalah sebagai berikut:

Klik New Emulator kemudian tunggu hingga tampil seperti gambar berikut ini dan

ada tulisan Androidnya:

15

Langkah selanjutnya adalah klik tombol Connect to Device pilih emulator-5554, dan

tunggu hingga tanda panah yang berada di pojok kanan atas berhenti bergerak, jika sudah

berhenti bergerak klik gambar kucing yang berada di emulator, dan jika semua success

akan keluar suara kucing.

Untuk tutorial selanjutnya adalah membuat aplikasi paint. Selesai lah Membuat

Aplikasi Android Sederhana dengan App Inventor.

(http://waryantosite.blogspot.com/2013/03/membuat-aplikasi-sederhana-dengan-

app.html)

16

BAB III

PENUTUP

3.1 Kesimpulan

Dalam menciptakan App Inventor for Android, Google telah melakukan menyelidikan

mendalam terlebih dahulu dalam pembelajaran perkomputeran, yang dilaksanakan dalam

persekitaran pembangunan Google online. Para menyunting blok menggunakan (Blocks

Java library) untuk mencipta bahasa pengatucara visual blok.

App Inventor adalah sebuah tool untuk membuat aplikasi android yang berbasis visual

block programming. App Inventor dapat dibuka atau digunakan dengan 2 cara yaitu

online (dengan menggunakan koneksi internet) dan offline (yang tidak menggunakan

koneksi internet). App Inventor ini membutuhkan jdk dan jre dalam menjalankan program

ini, tanpa jre dan jdk ini maka app tidak berfungsi secara maksimal. App Inventor juga

mempunyai kemampuan yang lebih.

3.2 Saran

Dalam penyempurnaan pembuatan makalah kedepannya, Penulis mengharapkan

adanya saran dari semua pihak baik dosen maupun seluruh mahasiswa yang membaca

makalah App Inventor ini terhadap kekurangan yang terdapat pada makalah ini.

17

DAFTAR PUSTAKA

Purnomo, Hadi.2014.Makalah App Inventor:Ciputat

Ahmad,Rijal.2013.Kemampuan App Inventor dalam

https://rijalahmad.wordpress.com/2013/07/29/kemampuan-app-inventor/ disadur pada

12 Juni 2015

Saifurrachman.2013.Cara Instalasi Aoo Inventor) dalam

https://muchsaifurrachman01.wordpress.com/2013/12/11/cara-instalasi-app-inventor/

pada 12 Juni 2015

Waryantho.2013.membuat aplikasi sederhana disadur dalam

http://waryantosite.blogspot.com/2013/03/membuat-aplikasi-sederhana-dengan-

app.html) pada 12 juni 2015