Tiga Situs Online Mengenai Cara Pengembangan Aplikasi Android

Aplikasi Android tengah merajai pasar aplikasi mobile global saat ini.
Persaingannya dengan sistem operasi buatan Apple, iOS semakin
menyemarakkan munculnya berbagai aplikasi menarik. Proses pengembangan
aplikasi tentunya bukanlah hal yang dapat dilakukan dengan mudah oleh semua
orang. Diperlukan pembelajaran dan kemampuan mumpuni untuk menciptakan
sebuah aplikasi. Ada banyak metoda pembelajaran yang dapat Anda lakukan
untuk membuat dan menyelesaikan sebuah aplikasi Android. Anda dapat
memulainya dari berbagai sumber buku, hingga berbagai pake tutorial online
yang dapat Anda unduh secara gratis. Mempelajarinya melalui buku adalah hal
yang sangat baik. Namun, jika Anda berpikir ulang untuk mendapatkan materi-
materi yang lebih mudah mengajarkan Anda mengenai aplikasi Android,
beberapa sumber online berikut mungkin dapat menjadi opsi menarik. Situs-situs
berikut adalah beberapa datar sumber online yang menyediakan materi baik
bagi pemula ataupun para de!eloper Android.
MIT App Inventor
M"# App "n!entor merupakan salah satu cara terbaik untuk mempelajari
pemograman sistem operasi Android secara !isual. Situs ini akan sangat
berguna bagi Anda yang tertarik mengenai dunia programming Android. $ika
Anda hanya memiliki sedikit keahlian, atau tidak memiliki sama sekali
pengalaman dalam mengembangkan aplikasi, App "n!entor dapat menjadi media
yang menarik untuk digunakan. App "n!entor memungkinkan Anda untuk
mengembangkan aplikasi untuk perangkat Android menggunakan %eb bro%ser
dan mengkoneksikannya kepada ponsel atau emulator. Proyek ini kerap disebut
juga sebagai &oogle App "n!entor. Saat tengah membangun aplikasi, Anda akan
bekerja dengan beberapa aplikasi seperti App "n!entor Designer. Melalui App
"n!entor Designer Anda dapat memilih komponen-komponen untuk aplikasi
Anda. Selain itu, App "n!entor 'locks (ditor akan menjadi aplikasi yang
mengatur secara spesiik apa yang harus dilakukan oleh setiap komponen. Anda
dapat mengatur program secara !isual dengan mencocokkan setiap bagian
secara bersamaan seperti bagian dari pu))le.
Aplikasi yang Anda kembangkan akan tampil pada ponsel selangkah demi
selangkah, sesuai dengan bagian yang Anda masukkan. Dengan begitu, Anda
1
dapat mencoba hasil kerja pengembangan aplikasi Android yang telah dilakukan.
Setelah menyelesaikan aplikasi, Anda dapat memproduksinya secara mandiri
sebagai aplikasi yang siap untuk di-install. M"# App "n!entor memberikan
peluang bagi Anda yang belum memiliki perangkat Android untuk ikut
berpartisipasi. Anda dapat membangun aplikasi Android menggunakan
perangkat lunak Android emulator. Perangkat lunak tersebut akan berjalan pada
komputer dan dapat diungsikan selayaknya pada perangkat ponsel. App
"n!entor pun mendukung penggunaan sistem operasi lain seperti Mac OS *,
&N+,-inu., dan juga /indo%s. Sebelum memanaatkan App "n!entor untuk
membuat aplikasi, Anda perlu mengatur ulang komputer dan meng-install App
"n!entor Setup yang dapat diunduh langsung melalui situs ini. Anda dapat
mengaksesnya http0,,de!eloper.android.com,training,inde..html
Android Application Development Tutorials
Apabila Anda mencari tutorial pengembangan aplikasi Android dalam bentuk
ormat !ideo yang lengkap, Android Application De!elopment #utorials dapat
menjadi opsi terbaik. Pasalnya di dalamnya Anda akan menemukan ratusan
!ideo yang akan mengajarkan Anda membuat aplikasi Android. #idak seperti
proyek lain yang melayani para pengunjungnya melalui %eb pribadi,
#heNe%'oston 1nama di balik toturial ini2 memanaatkan channel pada 3ou#ube
agar dapat dengan mudah diakses oleh berbagai kalangan. Di dalamnya Anda
akan menemukan sekitar 455 !ideo yang memberikan Anda banyak rincian
tentang pengembangan aplikasi Android. Mulai dari cara melalukan install
perangkat lunak yang diinginkan, membangun sebuah aplikasi, memasukkannya
ke dalam pasar aplikasi dan lainnya. Datar-datar !ideo tersebut dirilis pada
bulan Agustus tahun 4566, oleh sebab itu Anda masih akan mendapatkan cukup
banyak inormasi yang memadai. 7ata-rata !ideo yang terdapat di dalam
channel ini memiliki durasi sekitar 8 menit. Namun, Anda masih akan
mendapatkan beberapa !ideo berdurasi hingga 9 menit, tergantung banyaknya
langkah-langkah yang harus dilakukan setiap pembahasan.
Dengan 455 !ideo tutorial, tentunya diperlukan %aktu yang cukup banyak untuk
mempelajari !ideo demi !ideo. 'erdasarkan tutorial yang diberikan, seri Android
Application De!elopment #utorials ini dapat membantu Anda mengembangkan
aplikasi Android sederhana. Dengan begitu, bagi para pemula yang ingin
mencoba mengembangkan aplikasi Android, Anda dapat mengikuti setiap !ideo
tersebut dengan seksama. Penasaran ingin menyaksikan 455 !ideo tersebut:
Akses channel Android Application De!elopment #utorials ini di sini.
Android Developer
Android De!eloper merupakan situs resmi Android untuk mengetahui langkah-
langkah membuat aplikasi. Situs inipun akan memberikan pendekatan yang lebih
terstruktur dalah hal pemberian inormasi dengan langkah-langkah yang spesiik.
$ika Anda tertarik untuk mengetahui dasar-dasar pengembangan aplikasi
2
Android dalam satu media, situs ini dapat menjadi pilihan yang menarik. Salah
satu hal menarik yang dapat Anda temui di dalam situs Android De!eloper ini
adalah Anda akan menemukan berbagai inormasi ter-update. Artinya, setiap
langkah yang harus diikuti hadir dalam !ersi terbaru. Di dalamnya Anda dapat
mengakses tiga hal yang berhubungan dengan aplikasi, yakni desain,
pengembangan dan juga distribusi. Pada setiap materi, Anda akan mendapatkan
langkah-langkah yang dapat Anda ikuti. Anda dapat mengakses situs resmi
Android De!eloper ini di sini. ;MS<
3
APP INVENTOR
Jika anda hendak belajar membuat aplikasi untuk platform android, namun anda masih
asing dengan bahasa pemrograman yang dipakai (coding), maka saya akan mencoba
memperkenalkan kepada anda tentang sebuah kemudahan untuk membuat aplikasi
tanpa coding dengan menggunakan app inventor. Mari kita berbagi bersama tentang app
inventor dalam membuat aplikasi android.
Sebelum melangkah lebih jauh, mari kita mengenal tentang app inventor.
Apakah app inventor itu?
App nventor adalah sebuah tool online untuk membuat aplikasi android, app inventor
kini dikembangkan oleh M!, universitas yang bergerak di bidang teknologi dan diakui di
dunia. Semula app inventor dikembangkan oleh google, namun sekarang M! yang
memegang kendali terhadap pengembangan tools app inventor
"ang menyenangkan dari tool ini adalah tool tersebut berbasis visual block programming,
sehingga kita dapat membuat aplikasi tanpa kode satupun.
Mengapa disebut visual block programming#, karena 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. App inventor tidak hanya
untuk membuat aplikasi, karena bisa digunakan untuk mengasah logika anda, sperti
halnya menyusun sebuah pu((le. App inventor dibangun untuk anda yang mulai belajar
membuat aplikasi android, namun untuk programmer tentu ada opsi$opsi advance untuk
4
membuatnya sesuai dengan level kita.
App inventor memungkinkan Anda mengembangkan aplikasi untuk ponsel Android
menggunakan bro)ser )eb dan baik telepon yang terhubung atau emulator. Server App
nventor menyimpan pekerjaan Anda dan membantu Anda melacak proyek$proyek Anda.
Anda dapat membangun aplikasi dengan:
$App nventor *esigner , di mana Anda memilih komponen untuk aplikasi Anda.
$App nventor +lok ,ditor , di mana Anda merakit blok program yang menentukan
bagaimana komponen harus bersikap. Anda merakit program visual, seperti potongan$
potongan teka$teki. Aplikasi Anda muncul di telepon langkah$demi$langkah ketika Anda
menambahkan potongan untuk itu, sehingga Anda dapat menguji pekerjaan Anda
sebagai Anda membangun. -etika Anda selesai, Anda dapat membuat paket aplikasi
Anda dan menghasilkan aplikasi yang berdiri sendiri untuk menginstal.
Jika Anda tidak memiliki ponsel Android, Anda dapat membangun aplikasi Anda
menggunakan emulator Android , perangkat lunak yang berjalan pada komputer Anda
dan berperilaku persis seperti telepon.
Bagaimana App Inventor Bekerja?
.rame)ork visual programming ini terkait dengan bahasa pemrograman Scratch dari M!,
5
yang secara spesifik merupakan implementasi dari /pen +lock yang didistribusikan oleh
M! Scheller !eacher ,ducation 0rogram yg diambil dari riset yang dilakukan oleh
1icarose 1o2ue. App nventor menggunakan -a)a 3anguage .rame)ork dan -a)a4s
dialect ' yang di develop oleh 0er +othner dan di distribusikan sebagai bagian dari 567
/perating System oleh .ree Soft)are .oundation sebagai 8ompiler yang mentraslate
visual block programming untuk diimplementasikan pada platform Android.
Apa Yang Bisa Kita Lakukan Dengan App
Inventor?
Semua tergantung dari orientasi a)al anda, anda ingin membuat aplikasi dengan tujuan
apa
1.ust !or !un
-atakanlah anda memiliki 9andset Android, atau baru memasang virtual handset android
pada komputer anda, atau bahkan tidak sama sekali, app inventor akan bisa menjadi
sesuatu yang menyenangkan seperti halnya anda menyukai mengedit gambar, bermain
pu((le, mengasah otak anda seperti mengisi !!S, atau belajar sebagai basis menguatkan
kemampuan logika anda, semua terasa menyenangkan.
".Learning tool
Apapun profesi anda, entah seorang pelajar, mahasis)a, guru, dosen, teknisi, progamer
atau anda hobi untuk mengotak$atik android, anda akan bisa menjadikan App nventor
sebagai tool belajar anda. Jika anda seorang guru atau dosen anda akan membuat app
inventor menjadi alat pengajar yang hebat, karena visualisasi akan mempermudah sis)a
memahami dan menguasai apa yang anda ajarkan. Sebagai contoh: anda dapat
mempelajari logika kerja dari aplikasi dengan menerapkan susunan blok pada tool itu.
6
#.Developer aplikasi
Jika anda seorang pengembang aplikasi android, mulai dari membuat prototype, aplikasi
untuk kebutuhan pribadi dan organisasi, atau aplikasi serius yang bisa anda jual, apabila
anda telah mencoba menggunakan App nventor, anda akan merasakan betapa
mudahnya, tentu disamping karena berbasis visual drag drops ini juga karena anda :
$!idak perlu menghafal dan mengingat instruksi atau kode$kode program
$-omponen dan blok event tersedia dengan lengkap anda tinggal menggunakannya.
3ayaknya sebuah objek anda tinggal merangkainya dengan -omponen dan blok yang
sesuai fungsinya, tinggal meletakkanya seperti pu((le tinggal merubah propertinya, misal
memberikan nilai angka untuk mengeset timer dan lain$lain.
$,vent handler akan memudahkan anda dalam menangani setiap %kejadian& atau event
yang anda ingin handle. Misal anda membuat sebuah aplikasi untuk menangani sms,
dalam App nventor anda tinggal mengambil drag and drops blok yang menangani event
sms.
Bagaimana sa$a bisa menda!tar?
7ntuk memulai App nventor, anda dapat langsung klik gambar di ba)ah ini
!utorial juga tersedia pada situs M! App nventor, untuk mengunjunginya anda bisa klik
gambar di ba)ah ini
7
Mengenal Android dan App "n!entor
Dunia #" sekarang semakin $aya dan semakin banyak diminati oleh semua kalangan, yang baru - baru
ini adalah Sistem Oprasi Android, android OS besutan &oogle ini baru muncul pada tahun 4566 akan
tetapi di tahun 4564 sudah bisa menyaingi 'lack 'erry padahal diantara keduanya ada kelebihan dan
kekurangannya masing-masing.
Dalam postingan ini &=# tidak membahas tentang persaingan dan kelebihan keduanya, akan tetapi
tidak bisa dipungkiri OS Android lebih bisa diterima di sebagian kalangan karena &oggle
menyediankan bagi programer untuk mengembangkan Aplikasi android yang disebut dengan Visual
Block Programming - App Inventor, dengan App Inventor ini kita "Programer" dapat membuat
program brbasis android sesuai dengan keinginan dan kemampuannya. Sesuai dengan judul
postingan yaitu "Mengenal Android dan App Inventor" &=# akan membahasnya sebagai
pengenalan bagi yang minat untuk mempelajarinya, semoga bermanaat....
1. Sistem Operasi Android
Android adalah sistem operasi yang berbasis -inu. untuk telepon seluler seperti telepon pintar dan
komputer tablet. Android menyediakan platorm terbuka bagi para pengembang untuk menciptakan
aplikasi mereka sendiri untuk digunakan oleh bermacam peranti bergerak. A%alnya, &oogle "nc.
membeli Android "nc., pendatang baru yang membuat peranti lunak untuk ponsel. >emudian untuk
mengembangkan Android, dibentuklah Open ?andset Alliance, konsorsium dari @A perusahaan peranti
keras, peranti lunak, dan telekomunikasi, termasuk &oogle, ?#B, "ntel, Motorola, Cualcomm,#-Mobile,
dan N!idia.
Pada saat perilisan perdana Android, 8 No!ember 455D, Android bersama Open ?andset Alliance
menyatakan mendukung pengembangan standar terbuka pada perangkat seluler. Di lain pihak,
&oogle merilis kodeEkode Android di ba%ah lisensi Apache, sebuah lisensi perangkat lunak dan

standar terbuka perangkat seluler.

Di dunia ini terdapat dua jenis distributor sistem operasi Android. Pertama yang mendapat dukungan
penuh dari &oogle atau &oogle Mail Ser!ices 1&MS2 dan kedua adalah yang benarEbenar bebas
distribusinya tanpa dukungan langsung &oogle atau dikenal sebagai Open ?andset Distribution
1O?D2.
Fitur ang tersedia di Android adala!"
6 >erangka aplikasi0 itu memungkinkan penggunaan dan penghapusan komponen yang
tersedia.
4 Dal!ik mesin !irtual0 mesin !irtual dioptimalkan untuk perangkat mobile.
@ &raik0 graik di 4D dan grais @D berdasarkan pustaka Open&-.
A SC-ite0 untuk penyimpanan data.
8 Mendukung media0 audio, !ideo, dan berbagai ormat gambar 1MP(&A, ?.4FA, MP@,AAB,
AM7, $P&, PN&, &"=2
F &SM, 'luetooth, (D&(, @&, dan /i=i 1hard%are dependent2
D >amera, &lobal Positioning System 1&PS2, kompas, dan accelerometer 1tergantung
hard%are2
Android memiliki berbagai keunggulan sebagai sot%are yang memakai basis kode komputer yang
bisa didistribusikan secara terbuka 1open source2 sehingga pengguna bisa membuat aplikasi baru di
dalamnya. Android memiliki aplikasi nati!e &oogle yang terintegrasi seperti pushmail &mail, &oogle
Maps, dan &oogle Balendar.
Para penggemar open source kemudian membangun komunitas yang membangun dan berbagi
Android berbasis irm%are dengan sejumlah penyesuaian dan itur-itur tambahan, seperti =-AB
lossless audio dan kemampuan untuk menyimpan do%nload aplikasi pada microSD card. Mereka
sering memperbaharui paket-paket irm%are dan menggabungkan elemen-elemen ungsi Android
yang belum resmi diluncurkan dalam suatu carrier-sanction irm%are.
#. $isual %lock Programming & App Inventor
App "n!entor adalah sebuah perangkat pemrograman untuk membuat aplikasi android, yang
menyenangkan dari tool ini adalah karena berbasis Gisual 'lock Programming. Disebut Gisual 'lock
Programming menggunakan, menyusun dan drag-drops blok, merupakan simbol-simbol perintah dan
ungsi e!ent handler tertentu dalam membuat aplikasi, dan secara sederhana kita bisa menyebutnya
tanpa menuliskan kode program 1coding less2. 1/olber cs. 45662
=rame%ork !isual programming ini terkait dengan bahasa pemrograman Scratch dari M"#, yang
secara spesiik merupakan implementasi dari Open 'lock yang didistribusikan oleh M"# Scheller
#eacher (ducation Program yang diambil dari riset yang dilakukan oleh 7icarose 7oHue. 1/olber cs.
45662
App "n!entor menggunakan >a%a -anguage =rame%ork dan >a%aIs dialect yang di dikembangkan
oleh Per 'othner dan di distribusikan sebagai bagian dari &N+ Operating System oleh =ree Sot%are
=oundation sebagai Bompiler dan menterjemahkan Gisual 'lock Programming untuk
diimplementasikan pada platorm Android. #entu disini anda tinggal menikmati kemudahan yang ada.
!
1/olber cs. 45662
1"
Instal App Inventor O''line
App "n!entor adalah tool untuk membuat aplikasi Android yang berbasis block programming, yaitu kita
bisa membuat aplikasi Android tanpa harus menggunakan kode program.
"ni cocok untuk media pembelajaran SMP, %alaupun mereka tidak mempunyai basic programming tapi
bisa untuk belajar mengasah logika seperti halnya bermain pu))le. >ita hanya perlu menggunakan,
menyusun dan drag-drops JblokJ yang merupakan simbol - simbol perintah dan ungsi e!ent handler
tertentu dalam membuat aplikasi.
App "n!entor bisa dijalankan secara online dan oline. Gersi online nya bisa diakses di
!ttp"((beta.appinventor.mit.edudengan terlebih dahulu login ke email google anda. Sekarang kita
akan bahas langkah - langkah menjalankan App "n!entor secara oline.
11
Dengan menggunakan App "n!entor secara oline, maka tanpa koneksi ke internetpun kita bisa
membuat aplikasi Android secara mandiri sekaligus bisa mempaket atau mengcompile-nya langsung
karena sudah include ser!er compilernya.
'erikut langkah - langkahnya 1dengan asumsi anda menggunakan /indo%s D dan sudah terinstal
$a!a $D>2 0
6. Do%nload ile )ip nya dari sini
4. (kstrak ile tersebut dan letakkan di directori yang anda kehendaki, maka anda akan mendapatkan
tiga older yaitu 0
a. appengine-ja!a-sdk-6.F.5
b. appin!entor
c. buildser!er
@. Pada older App"n!entor kita akan menemukan ile start"A, double klik untuk menjalankannya
A. 'uka bro%ser 1bisa menggunakan Bhrome atau Mo)illa =ireo.2, pada bar address ketikkan
!ttp"((local!ost"))))kemudian enter, maka akan muncul jendela login dengan user deault. >ita bisa
memakai langsung atau menguba dengan sesuai ormat tersebut.
12
8. App "n!entor siap digunakan.#erdapat 4 komponen utama dalam App "n!entor ini, yaitu App
Inventor Designer untuk merancang user interace dan App Inventor %lock *ditor untuk menyusun
logika-logika pemrograman yang kemudian dijalankan di emulator Android.
- Ne% Project -
13
- App "n!entor Designer -
- App "n!entor 'lock (ditor -
14
Memulai App Inventor
+ntuk menggunakan App "n!entor ada beberapa hal yang harus di siapkan terlebih dahulu, yaitu 0
6 + Memiliki Account &mail terlebih dahulu, dan masuk Log In ke http0,,%%%.appin!entorbeta.com
http0,,beta.appin!entor.mit.edu, , apabila anda belum memiliki Account &mail maka terlebih dahulu
mendatar pada http0,,%%%.gmail.com
4 + Setelah masuk anda akan diminta untuk membaca K menyetujui term o' service dari google, klik
pada tombol I accept t!e terms o' service.
&b. #erm O Ser!ice

,ntuk memulai App Inventor "
6. Miliki Account gmail, http0,,%%%.gmail.com
4. Masuk ke http0,,%%%.appin!entorbeta.com http0,,beta.appin!entor.mit.edu,
15
@. Do%nload K "nstall $a!a F 16.F2 dari http0,,%%%.ja!a.com
A. Do%nload K "nstall
AppInventor-Setup-Installer-v-1-#.e.ehttp0,,%%%.appin!entorbeta.com,learn,setup,setup%indo
%s.html http0,,beta.appin!entor.mit.edu,learn,setup,setup%indo%s.html
8. "nstall K Setting dri!er ?P Android apabila ada
F. ?a!e un %ith App "n!entor .. 0D
@ + anda akan diba%a ke halaman App Inventor Setup/ dimana terdapat dua tahapan dasar pada
setup yaitu 0
6 Pada platorm %indo%s, - apabila anda menggunakan Linux anda bisa download App
Inventor setup untuk Linux 0
Setup 0omputer, yaitu memiliki komputer PB dgn syarat untuk /indo%s. Sistem
Operasi /indo%s yang didukung /indo%s *P, /indo%s Gista, /indo%s D
#elah menginstall 'ro%ser minimal &oogle Bhrome A.5 E rekomendasi , Apple Saari
8.5 , Microsot "nternet (.plorer D, Mo)illa =ireo. @.F
Menginstall $a!a F java 1!" bisa juga java 1# yg bisa do%nload
dihttp0,,%%%.ja!a.com,
>emudian install AppInventor-Setup-Installer-v-1-#.e.e yg bisa di do%nload di
http0,,%%%.appin!entorbeta.com,learn,setup,setup%indo%s.html
http0,,beta.appin!entor.mit.edu,learn,setup,setup%indo%s.html
&b. App "n!entor Setup
4 Setup lingkungan Developing, yaitu 0
Menggunakan (mulator,0 pada penggunaan emulator tidak memerlukan setup dia%al,
karena tinggal diaktikan dari blok editor.
Menggunakan ?andset Android. - $alau tidak ingin mengesetn%a kita bisa langsung
16
melakukan developing
Setup 1andset Android
#ahap ini dilakukan apabila anda ingin langsung mencoba hasil de!elop anda ke
handset android. Pertama anda harus memiliki kabel data +S', danmenginstall
driver !andset Android anda. ?ampir semua handset android di dukung oleh App
"n!entor, dan pastikan juga anda telah memiliki memory SD Bard yang terpasang.
Setelah itu setting pada handset kita 0
6. Masuk pada home screen
#. Pilih Setting + applications
@. Pada ,nko2n sources di ceklist
&b. Setting
A. Pilih De!elopment, ceklist pada ,S% Debugging dan Sta A2ake
&b. Setting
17
Setelah itu koneksikan ?andset anda dgn kabel +S' Data ke komputer dalam
keadaan screen unlock, hingga akan muncul dua pesan notiikasi pada atas layar
yaitu 0
+S' Bonnected, yang berarti handset telah terhubung ke komputer.
+S' Debugging Bonnected, yang membuat App "n!entor di komputer
mengontrol handset.
Sampai disini berarti handset android kita telah siap untuk digunakan untuk mencoba
aplikasi yang kita buat dengan App "n!entor.
3atatan "
Perlu diingat apabila anda menggunakan bro%ser Mo)ila ireo. agar semua berjalan lancar, apabila
kita menggunakan asilitas script - &o'cript e.tension , dan juga apabila ada ire%all yang akti,
silahkan di konigurasikan apabila mengganggu atau menghalangi koneksi de!eloping. App "n!entor
akan mencari Setup secara otomatis, tapi apabila ada pertanyaan path lokasi App "n!entor biasanya
ada pada 3"4Program Files4AppInventor4commands&'or&Appinventor.
4 + Setelah semua konigurasi dan setting selesai, anda bisa langsung masuk ke lingkungan
de!eloping dengan melalui http0,,%%%.appin!entorbeta.com http0,,beta.appin!entor.mit.edu, -apabila
tadi masi( login anda langsung akan dibawa ke jendela developing 0
&b. $endela De!eloping
8 >lik pada Ne%, dan mulai projek baru misal dengan nama ?ello%orld, kemudian klik pada tombol
O>

1
&b. Membuat Projek 'aru
F Maka akan terlihat langsung projek kita
1!
&b. Projek 'aru
5ingkungan 0er6a App Inventor
Sebelum kita melanjutkan untuk memulai de!eloping, kita mengenal terlebih dahulu lingkungan kerja pada
App "n!entor yang terdiri dari 0
D 0omponen Desainer )omponent *esigner yang berjalan pada 'ro%ser, digunakan untuk
memilih komponen dan mengatur property.
&b. >omponen desainer
0omponen desainer , terdiri dari 0
@ Gie%er 0 untuk menempatkan komponen dan mengaturnya sesuai tampilan yang diinginkan.
A Pallete 0 adalah list dari komponen yang bisa dipakai
8 Bomponent list 0 merupakan tempat list komponen dari projek yang kita pakai
F Media 0 mengambil media audio dan gambar untuk projek kita
2"
D Properties 0 ketika anda klik komponen pada !ie%er maka propertiesnya akan terlihat pada
panel ini
L %lok *ditor Blocks +ditor berjalan diluar bro%ser, dimana digunakan untuk membuat dan
mengatur beha!iour dari komponen yang kita pilih pada komponen desainer.
&b. 'locks (ditor
9 *mulator , digunakan untuk menjalankan dan mengetest aplikasi yang kita bangun. "ni sangat
bermanaat apabila kita belum menggunakan handset langsung, karena (mulator Android ini telah
terintegrasi dengan baik.
21
&b. (mulator
>etiga -ingkungan kerja diatas, akan bisa tampil secara bersamaan dan secara bergantian juga berpindah
kita akan menggunakannya dalam membuat aplikasi android dengan App Android.
Bontoh Aplikasi yg mimin bikin pake App "n!entor di market 0 7!ac0ecoa ,silahkan dicoba
22
-angkah--angkah Pemrograman dengan APP "n!entor
Proses pemrograman Android menggunakan APP "n!entor dapat dilihat pada
gambar di ba%ah ini.
&ambar 4.4 'lok Diagram Bara >erja Pemrograman App "n!entor
&ambar di atas adalah proses programming aplikasi Android dengan APP
"n!entor. 'erikut ini adalah langkah-langkah pemograman aplikasi android
menggunakan APP "n!entor. 1Mulyadi Bs,45642
6.Datar akun email di google
4."nstal App "n!entor Setup.e.e 1digunakan untuk menjalankan emulator Android2
@.'uka beta.appin!entor.mit.edu maka akan tampil gambar seperti di ba%ah ini
&ambar 4.@ #ampilan "D( App "n!entor
A.'uat isi orm 1Screen2 sesuai dengan aplikasi yang akan dibuat.
23
&ambar 4.A #ampilan Screen 1=orm2 "D( App "n!entor

8.>lik Open the 'lock (ditor untuk memprogram aplikasi android menggunakan
Gisual 'lock Programming.
&ambar 4.8 #ampilan dan >ode 'lok App "n!entor
F.Simpan dengan meng-klik tombol SAG(
D.$ika ingin menjalan emulator klik Ne% (mulator, klik Bonnect #o De!ice, >lik
24
(mulator.
L.Bompile aplikasi yang telah dibuat dengan meng-klik Pack or Phone lalu klik
Do%nload to Bonnected Phone .
9."nstal aplikasi berekstensi apk pada platorm Android.
65.Aplikasi siap dijalankan.
25
Membuat Aplikasi Android Dengan MIT App Inventor
Tutorial App Inventor Untuk Membuat Aplikasi Android
Untuk menggunakan App Inventor ada beberapa hal yang harus di siapkan terlebih dahulu,
yaitu :
1 > Memiliki Account Gmail terlebih dahulu, dan masuk Log In ke
http://www.appinventorbeta.com http://beta.appinventor.mit.edu/ , apabila anda belum
memiliki Account Gmail maka terlebih dahulu mendaftar pada http://www.gmail.com
2 > Setelah masuk anda akan diminta untuk membaca & menyetujui term of
servicedari google, klik pada tombol I accept the terms of service.
,ntuk memulai App Inventor "
1 Miliki Account gmail, http0,,%%%.gmail.com
2 Masuk ke http0,,%%%.appin!entorbeta.com http0,,beta.appin!entor.mit.edu,
@ Do%nload K "nstall $a!a F 16.F2 dari http0,,%%%.ja!a.com
A Do%nload K "nstall AppInventor-Setup-Installer-v-1-#.e.e
http0,,%%%.appin!entorbeta.com,learn,setup,setup%indo%s.html
8 http0,,beta.appin!entor.mit.edu,learn,setup,setup%indo%s.html
F "nstall K Setting dri!er ?P Android apabila ada
selanjutnya
3 > anda akan dibawa ke halaman App Inventor Setup, dimana terdapat dua tahapan
dasar pada setup yaitu :
1 Pada platform windows, - apabila anda menggunakan Linux anda bisa
download App Inventor setup untuk Linux :
Setup Komputer, yaitu memiliki komputer PC dgn syarat untuk
Windows. Sistem Operasi Windows yang didukung Windows XP,
Windows Vista, Windows 7
Telah menginstall Browser minimal Google Chrome 4.0 rekomendasi ,
Apple Safari 5.0 , Microsoft Internet Explorer 7, Mozilla Firefox 3.6
Menginstall Java 6 java 1.6, bisa juga java 1.7 yg bisa download
dihttp://www.java.com,
Kemudian install AppInventor_Setup_Installer_v_1_2.exe yg bisa di
download
dihttp://www.appinventorbeta.com/learn/setup/setupwindows.html
http://beta.appinventor.mit.edu/learn/setup/setupwindows.html
26
Gb. App Inventor Setup
2 Setup lingkungan Developing, yaitu :
Menggunakan Emulator,: pada penggunaan emulator tidak memerlukan
setup diawal, karena tinggal diaktifkan dari blok editor.
Menggunakan Handset Android. - Kalau tidak ingin mengesetnya kita
bisa langsung melakukan developing.
Setup Handset Android
Tahap ini dilakukan apabila anda ingin langsung mencoba hasil develop
anda ke handset android. Pertama anda harus memiliki kabel data USB,
dan menginstall driver handset Android anda. Hampir semua handset
android di dukung oleh App Inventor, dan pastikan juga anda telah
memiliki memory SD Card yang terpasang.
Setelah itu setting pada handset kita :
1. Masuk pada home screen
2. Pilih Setting > applications
3. Pada Unkown sources di ceklist
Gb. Setting
4. Pilih Development, ceklist pada USB Debugging dan Stay
Awake
27
Gb. Setting
Setelah itu koneksikan Handset anda dgn kabel USB Data ke komputer
dalam keadaan screen unlock, hingga akan muncul dua pesan notifikasi
pada atas layar yaitu :
USB Connected, yang berarti handset telah terhubung ke
komputer.
USB Debugging Connected, yang membuat App Inventor di
komputer mengontrol handset.
Sampai disini berarti handset android kita telah siap untuk digunakan
untuk mencoba aplikasi yang kita buat dengan App Inventor.
Catatan :
Perlu diingat apabila anda menggunakan browser Mozila firefox agar semua berjalan
lancar, apabila kita menggunakan fasilitas script - NoScript extension , dan juga apabila
ada firewall yang aktif, silahkan di konfigurasikan apabila mengganggu atau
menghalangi koneksi developing. App Inventor akan mencari Setup secara otomatis, tapi
apabila ada pertanyaan path lokasi App Inventor biasanya ada pada C:\Program
Files\AppInventor\commands-for-Appinventor.
4 > Setelah semua konfigurasi dan setting selesai, anda bisa langsung masuk ke
lingkungan developing dengan melaluihttp://www.appinventorbeta.com
http://beta.appinventor.mit.edu/ - apabila tadi masih login anda langsung akan dibawa ke
jendela developing :
2
Gb. Jendela Developing
5 Klik pada New, dan mulai projek baru misal dengan nama Helloworld, kemudian klik
pada tombol OK

Gb. Membuat Projek Baru
6 Maka akan terlihat langsung projek kita
2!
Gb. Projek Baru
Lingkungan Kerja App Inventor
Sebelum kita melanjutkan untuk memulai developing, kita mengenal terlebih dahulu
lingkungan kerja pada App Inventor yang terdiri dari :
7 Komponen Desainer Component Designer yang berjalan pada Browser,
digunakan untuk memilih komponen dan mengatur property.
3"
Gb. Komponen desainer
Komponen desainer , terdiri dari :
3 Viewer : untuk menempatkan komponen dan mengaturnya sesuai tampilan
yang diinginkan.
4 Pallete : adalah list dari komponen yang bisa dipakai
5 Component list : merupakan tempat list komponen dari projek yang kita pakai
6 Media : mengambil media audio dan gambar untuk projek kita
7 Properties : ketika anda klik komponen pada viewer maka propertiesnya akan
terlihat pada panel ini
8 Blok Editor Blocks Editor berjalan diluar browser, dimana digunakan untuk
membuat dan mengatur behaviour dari komponen yang kita pilih pada komponen
desainer.
Gb. Blocks Editor
9 Emulator , digunakan untuk menjalankan dan mengetest aplikasi yang kita bangun.
Ini sangat bermanfaat apabila kita belum menggunakan handset langsung, karena
Emulator Android ini telah terintegrasi dengan baik.
31
Gb. Emulator
Ketiga Lingkungan kerja diatas, akan bisa tampil secara bersamaan dan secara bergantian
juga berpindah kita akan menggunakannya dalam membuat aplikasi android dengan App
Android.
M E M B U AT C O N T O H A P L I K A S I S E D E R H A N A D E N G A N A P P I N V E N T O R
sebelum memulai membuat aplikasi, ada prerequisite program yang dibutuhkan untuk
menjalankan App Inventor ini untuk membuka block editornya. block editor ini adalah
serangkaian alur perintah pemrograman pada App Inventor, jadi yang biasanya kita
membuat program dengan coding, kali ini kita membuat program berdasarkan alur perintah
(block editor ini bentuknya seperti puzzle loh). bisa di-download
dihttp://appinventor.mit.edu/explore/install-app-inventor-software.html sesuaikan dengan
operating system kalian, download, install ikuti petunjuknya. dan JAVA JDK bisa di-download
di sini http://www.oracle.com/technetwork/java/javase/downloads/index.html
setelah selesai meng-install program tersebut, hal pertama yang selanjutnya dilakukan
adalah membuka halaman App Inventor http://appinventor.mit.edu/ pilih invent untuk
langsung membuat aplikasi android (untuk mengaksesnya kita harus memiliki akun google).
ikuti petunjuknya sampai nanti kita ketemu editor App Inventor.
32
Editor pada AppInventor
saya upload beberapa gambar sebagian untuk sebagai display awalnya atau yang biasa kita
sebut welcome screen atau splash screen. lalu sebagian lagi untuk gambar katalognya.
lalu buat beberapa screen baru (klik add screen) sebagai halaman baru untuk memunculkan
katalognya (di pemrograman desktop biasa kita sebut form). saya menamakannya sesuai
dengan nama negara-negaranya. disebelah kanan screen terdapat properties untuk
mengatur tampilan dari screen tersebut.
setelah itu drag drop satu button dan dua label pada pallete di group basic ke viewer di
screen1, lalu pada button edit properties dengan memasukan gambar logo pada properties
image, hapus text button-nya. pada label, sesuaikan tulisannya dengan yang kita inginkan.
33
sehingga jadi seperti ini
pada screen lainnya (sebagai contoh screen italy) kita bisa memasukan webviewer dari
pallete agar konten dari screen tersebut dapat mengambil konten dari internet (kontennya
sendiri saya masukan dari wikipedia). klik component-nya lalu masukan url sumber konten
yang akan ditampilkan tersebut di properties. jangan lupa untuk memberi title pada
properties screen, beri nama yang sesuai.
34
lakukan hal yang sama pada screen negara yang lainnya. kecuali pada screen MainMenu
terdapat perbedaan.
pada screen MainMenu, gunakan screenArrangement sesuaikan dengan kebutuhan lalu
masukan beberapa button pada screenArrangement tersebut. ubah kembali button-button
tersebut seperti pada screen1 (masukan image pada tiap button, lalu hapus textnya).
lalu hal berikutnya yang harus dilakukan adalah memberi alur perintah di block editor. buka
block editor pada kanan atas App Inventor. nanti akan ada aplikasi yang langsung di-
download dan di-running oleh java. block editor ini adalah program terpisah tapi terintegrasi
dengan App Inventor. buka screen1 pada App Inventor di browser, maka block editor akan
membuka block editor untuk screen1.
pada block editor screen1, buka tab My Block lalu nanti akan terbuka component apasaja
yang ada pada screen1 yang kita buat tadi. pilih button lalu button.click (ini adalah event
ketika button tersebut di klik oleh user), drag drop pada editornya. lalu pada tab built-in group
control cari call open another screen. drag drop lalu tempelkan pada event button.click
(seperti puzzle). masih pada tab built-in, pada group text cari text text lalu drag drop pada
call open another screen lalu pada text-nya isikan nama screen yang akan kita buka
apabila user klik button tersebut (disini saya MainMenu). sehingga bila user klik button
tersebut, maka keluar screen MainMenu. sehingga puzzle yang tadi kita buat menjadi seperti
ini
35
apabila kita ingin mencoba hasil dari block editor, klik new emulator, tunggu sampai emulator
android keluar, lalu connect to device dan pilih device emulator yang sedang jalan. tetapi kita
tidak bisa mencoba keseluruhan eventnya seperti pindah screen, tapi hal tersebut bisa kita
lakukan dengan membuat package dari aplikasi yang kita buat lalu menjalankannya pada
emulator dari AVD manager.
pada App Inventor di browser, buka screen MainMenu, sehingga block editor berganti jadi
block editor MainMenu. lakukan alur perintah ganti screen seperti pada screen1. lakukan
untuk semua screen yang tersisa sebagai katalog.
36
jadi, alur program yang kita buat adalah Splash screen (screen1) > screen main menu (pilih
salah satu keajaiban dunia) > screen katalog yang menampilkan konten dari webviewer
wikipedia.
selesai membuat aplikasinya, kita harus mencobanya. kembali pada App Inventor di
browser, pada kanan atas terdapat package for phone, klik lalu pilih download to this
computer untuk kita mencobanya pada emulator android AVD manager. setelah selesai
download, install hasilnya pada emulator (bagi yang belum tahu, cara install-nya bisa dilihat
disini). lalu jalankan aplikasinya pada emulator android AVD manager.
setelah dijalankan, hasilnya sebagai berikut.
37
3
S OU R C E :
HT T P : / / MA F I A S U N D A . WOR D P R E S S . C OM/ 2 0 1 3 / 0 4 / 2 6 / ME MB U AT
C ON TOH A P L I K A S I S E D E R H A N A D E N GA N A P P I NV E N TOR /
3!
1ello 7orld

Pada bab a%al ini kita akan memperlajari beberapa hal mendasar pada App "n!entor, terutama bagaimana
bekerja menggunakan 0omponen Desainer 8 Component Designer , %lok *ditor Block Editor juga
menggunakan *mulator untuk menguji aplikasi. Dan projek pertama kita adalah membuat projek ritual,
yang juga dibuat pada semua a%al belajar membuat aplikasi, yaitu membuat aplikasi dengan nama
?ello%orld. Ok kita langsung mulai 0
6 Aplikasi ini adalah sebuah aplikasi sederhana, ketika kita menyentuh layar )lick button akan
terdengar dering jam %ekker dan juga bergetar -Vibrate, dan kemudian setelah itu kita akan
mengembangkannya dengan sebuah itur ketika menggoyangkan handset Accelerometer sensor akan
langsung terdengar suara dering %ekker otomatis seperti ketika kita menyentuh layar. Aplikasi ini akan
menggunakan gambar jpg dengan dimensi sekitar @55.@55p. yang akan ditempatkan pada sebuah
button tombol dan juga suara dering dengan ormat mp@.
4
@ 'uat projek baru dari 9e2 + 1ello2orld
4"
&b. Membuat Projek 'aru
A Maka akan terbuka jendela %lok *ditor berisi $ie2er/ 3omponents dan Properties yang
merupakan kan!as kerja kita. >emudian masukkan -abel dari Pallete + 5abel , seperti pada gambar
&b. Memberi -abel
8 Set properti nya pada Te.t M M 1ello 7orld , Font M %old, %ackground M Orange
F Masukkan 'utton dari Pallete, dan klik button yang telah dimasukkan pada !ie%er sehingga terlihat
propertinya, dan kemudian masukkan image untuk button dengan cara 0 klik button dan pada jendela
properti image + add sehingga muncul jendela upload ile, pilih bro%se untuk mencari ile gambar
anda, kemudian klik O>.
41
&b. Mengeset image 'utton
D Maka gambar akan diupload dan masuk menjadi image pada tombol button6.
&b. "mage pada 'utton6
L Setelah itu kita akan menambahkan suara, dari jendela Pallete + Media kemudian drag drop
komponen Sound kedalam !ie%er. >omponen Sound adalah 9on&$isible sehingga dimanapun dia
diletakkan akan berada diba%ah !ie%er.
9 >lik pada Sound sehingga terlihat propertinya di jendela Properties, set source dengan suara yang
kita miliki. "ni akan membuat source suara diupload, dengan cara seperti ile gambar pada button tadi
-browse.
42
&b. Menambahkan Suara
65 >ita telah selesai pada tahap ini, selanjutnya adalah bagaimana membuat komponen-komponen
yang ada ini bisa berungsi sesuai dengan yang kita inginkan
66 >lik pada Open t!e %lock *ditor, sehingga muncul jendela Opening N. Pilih :un langsung,
atauPili! simpan atau save 'ile .6nlp tersebut. Apabila disimpan Setelah tersimpan di komputer kita,
jalankan dengan meng-kliknya dua kali ile tersebut ,-& , pastikan ketika membuka ile ini adalah
menggunakan 6ava2 4 6ava2s Java Webstart. 3ara setingna adalah klik kanan pada ile/ Open
7it! + 3!oose De'ault Program O kemudian cari pada 3"4Program Files4;ava46re<4bin46ava2 atau
3"4Program Files4;ava46dk46re<4bin46ava2s dan kemudian c!eklist pada Al2as use t!e selected
progam ..... abaikan peringatan security %arning
&b. Sa!e Aplikasi
43
64 Akan terbuka, jendela Do%nloading application biarkan sampai selesai,
&b. Seting ja!a% .ava /ebstart untuk membuka ile yg dido%nload
6@ Pilih O> pada pertanyaaan starting %lock *ditor, hingga muncul (ditor seperti diba%ah ini yang
berarti jendela kerja 'locks (ditor kita sudah terbuka dan siap untuk digunakan

&b. $endela 'locks (ditor
44
6A >lik pada M%lok O %utton1 kemudian pilih e!ent %utton1.3lick sehingga muncul di !ie%er
&b. Memasukkan (!ent untuk >omponen 'utton6
68 >emudian pilih Sound1 O Sound1.Pla tarik dan tempatkan pada %utton1.3lick
&b. Memasukkan (!ent 'utton6 K Suara
6F +ntuk mencobanya kita set terlebih dahulu emulatornya, klik pada ne2 emulator, O> pada starting
the emulator hingga muncul emulatornya, buka key lock dengan menggeser tanda kunci disebelah kiri
45
&b. (mulator
6D
>emudian kembali ke 'lock (ditor, klik pada 3onnect to Device + pili! emulator tunggu hingga
proses do%nload selesai dan aplikasi akan tampil di emulator. Boba klik pada layar emulator apakah
aplikasi yang kita bikin berungsi, yaitu akan mengeluarkan suara dering %eker ketika di klik. Apabila
kita mencobanya pada ?andset Android, kita bisa menyentuh layarnya.
46
&b. Aplikasi pada (mulator
6L >emudian kita akan tambahkan ungsi lainnya, yaitu ungsi getar. Dari M %lock +
Sound1tambahkan e!ent Sound1.$ibrate , kita akan melihat e!ent ini memiliki te.t bertuliskan
millisecsini berarti kita bisa mengeset %aktu getarnya Evariabel ini disebut juga argument Baranya klik
pada layar block editor diluar block e!ent, yang akan membuat munculnya deretan menu tombolTe.t/
5ist/ Mat! dan yang lainya, untuk memberikan nilai !ibrasi-nya yaitu pada tombol Mat! + 1#=
47
&b. (!ent Sound1.$ibrate
69 ?ingga muncul block number, klik pada block number dan ubah angkanya -dalam satuan
milisecond . Buma sayangnya dengan emulator kita tidak bisa mencobanya, karena getaran hanya bisa
dirasakan di ?andset.
&b. (!ent Sound1.$ibrate > Set 2aktu
45 >ita akan belajar lebih jauh dan mengembangkan aplikasi yaitu dengan menambahkan sensor
accelerometer, caranya kembali ke 0omponen Desainer di 'ro%ser, pilih Pallete + Sensorkemudian
drag-drops AccelerometerSensor1. Sekali lagi mengingatkan dia adalah komponen yang 9on&$isible/
se!ingga akan langsung berada diluar layar.
4
&b. >omponen AccelerometerSensor6
46 >embali ke %lock *ditor, dan pada My'lock sudah terdapat komponen
AccelerometerSensor1tarik keluar blok e!ent AccelerometerSensor1.S!aking , juga komponen
Sound1.pla . "ni berarti kita membuat e!ent ketika handset di goyangkan maka akan langsung
terdengar suara dering %ekker. >emudian bisa kita coba di handset kita.
4!
&b. (!ent AccelerometerSensor6
44 +ntuk membuat aplikasi kita menjadi aplikasi yang mandiri, bisa kita memaket -Packaging dan
do%nload aplikasi yang kita buat ini dengan cara dari 0omponen Desainer kemudian menuPackage
For P!one pada sebelah kanan. #erdapat dua pilihan yaitu disimpan pada komputer atau langsung di
?andset kita.
&b. Packaging Aplikasi
4@ Apabila kita pilih disimpan di komputer, maka akan dipaket dan dido%nload ke komputer,
sedangkan apabila di do%nload ke ?andset maka akan langsung terinstall.
7orktoon
5"
51