Membuat

Aplikasi
Android
 Tanpa Coding
dengan
APP Inventor

Wahana Komputer
Membuat Aplikasi Android
 Tanpa Coding dengan

pustaka-indo.blogspot.com
Membuat Aplikasi Android
 Tanpa Coding dengan

  

pustaka-indo.blogspot.com
       
Wahana Komputer

© 2013, PT Elex Media Komp utindo, Jakarta

Hak cipta dilindungi unda ng-undang
Diter bitkan pertama kali oleh
Penerbit PT Elex Me dia Komputindo
Kelompo k Gra media, Anggota IK API, Jakarta 2013

121130165
ISBN: 978-60 2-02-04 80-2

Dilarang keras menerjemahkan, memfotok opi, atau memp erbanyak sebagian atau
selur uh isi buk u ini tanpa izin tertulis dari penerbit.

Dicetak oleh Percetakan PT Gramedia, Jakarta

Isi di luar tanggung jawa b p ercetakan


J
ika Anda hendak belajar membuat aplikasi untuk platf orm
Android, namun Anda masih awam dengan bahasa
pemrograman yang dipakai, maka buku ini jawabannya.
Buku ini akan mengajarkan kepada Anda tentang sebuah
kemudahan dalam membuat aplikasi Android tanpa coding
menggunakan A pp Inventor. Lalu, apa A pp Inventor itu?

App Inventor merupakan sebuah tool untuk membuat aplikasi

android menggunakan visual blog programming yang sangat
mengagumkan. Mengapa disebut mengagumkan? ini karena
dalam membuat sebuah aplikasi Android Anda ti dak perlu
mengeti kkan satu pun code program. Anda hanya perlu
melakukan drag drop atau menyusun block yang merupakan
simb ol perintah dan fungsi mirip dengan permainan puzzle.

M elalui buku ini penulis akan mengajarkan kepada Anda beta pa

mudahnya membuat aplikasi Android menggunakan App
Inventor. Buku yang disajikan secara ringan dan berbobot ini,
akan mengupas secara step b y step p emrograman Android
menggunakan App Inventor serta dilengkapi dengan contoh
aplikasi yang dibuat.

Struktur Penulisan Buku

Buku ini mengajarkan kepada Anda tentang pembuatan aplikasi
Android menggunakan App Inventor, lengkap dengan contoh projek-
projek aplikasi. Agar mudah memahami materi yang dikupa s,
buku ini dibagi menjadi 5 bab yaitu sebagai berikut:

     

Bab ini merupakan pengenalan tentang App Inventor
seb elum Anda lebih jauh menggunakannya untuk mem buat
aplikasi Android. Pada bab ini akan dijelaskan tentang bahasa
block untuk aplikasi mobile, arsitektur pemrograman dengan
App Inventor, hingga isti lah-isti lah pemrograman
menggunakan Ap p Inventor.
     
Bab ini menjelaskan IDE Ap p Inventor untuk m erakit aplikasi
Andr oid menggunakan App Invent or. Pada bab ini dijelaskan
tentang komponen desainer, block editor, sampai
penggunaan emulator untuk menjalankan aplikasi Android
yang sudah dibuat.

     

Pada bab ini Anda akan belajar membuat aplikasi pilih
gambar menggunakan A p p Inventor. Pembahasan pada bab
ini dimulai dengan membuat proy ek dan menyusun interface,
serta mengatur block program.

    

Pada bab ini Anda akan belajar membuat aplikasi
slidehshow. Aplikasi slideshow yang akan dibuat pada bab
ini terdiri dari 3 macam, yaitu aplikasi slideshow otomatis,
aplikasi slidesho w manual, dan aplikasi slidesho w random.

     

Bab ini menjelaskan kepada Anda tentang pembuatan
aplikasi Web Browser. Pembahasan dimulai dengan
membuat proyek dan desain interface, dan dilanjutkan
dengan menyu sun block program.

 Apa yang Harus Anda Kuasai?

Agar dapat memahami materi yang disajikan, disarankan Anda
terlebih dahulu mempunyai pengetahuan dasar tentang
penggunaan aplikasi Android. Selain itu, diharapkan Anda sudah
memiliki dasar pengetahuan tentang logika program.

Bagi Para Pembaca

Walaupun dalam menyusun buku ini kami telah melakukan
pengkajian dan penelitian yang mendalam serta berusaha untuk
menyampaikan materi secara lengkap dan terstruktur, tentunya
setiap karya tidaklah ada yang benar-benar sempurna sehingga
mungkin buku ini kurang dapat memenuhi kebutuhan para
 11. Tunggu hingga proses instalasi selesai.

12. Pada kotak dialog , klik

.

6
13. Jika Anda memiliki ponsel Android dan ingin menggunakannya
untuk mencoba projek yang Anda buat menggunakan App
Inventor, Anda bisa melakukan instalasi dan setting driver ponsel
Anda.

Pada App Inventor, salah satu fitur utamanya adalah memudahkan

seseorang membuat program tanpa harus mengetikkan kode sedikitpun.
Ini bis diakomodasi menggunakan bahasa block.
Menggunakan bahasa block, pengkodean dilakukan di belakang layar.
Semuanya menggunakan antarmuka yang memudahkan bernama
block/blok. Jadi blok ini merepresentasikan kode secara grafik. Cara
Anda memasang block ini mirip dengan memasang puzzle gambar, tapi
sebenarnya cara memasang block ini akan sesuai dengan kode yang
dihasilkan.

7
Apakah sebenarnya sebuah program itu? Banyak orang yang bisa
menjelaskan arti sebuah program dari sisi pengguna, tapi jarang yang
bisa menjelaskan apa arti sebuah program dari sisi programmer. Ini
karena hanya programmer yang mengerti struktur dalam dari sebuah
program.
Bagian internal sebuah program sebenarnya bisa dikategorikan menjadi
dua, yaitu komponen dan perilaku/behavior-nya. Ini perlu dipahami agar
Anda bisa meng-create  program dengan lebih efektif.
Kedua bagian, komponen dan perilaku ini di App Inventor memiliki dua
jendela tersendiri. Anda menggunakan Component Designer untuk
membuat objek/komponennya dan menggunakan Block Editor untuk
memprogram perilaku software terhadap event, baik event yang
dihasilkan oleh user atau oleh event eksternal.
Berikut ini contoh arsitektur internal dari sebuah aplikasi di AppInventor:

8
Sering kali Anda perlu mengoperasikan sebuah variabel, misalnya
menambahkan variabel dengan nilai tertentu ketika user mengklik
tombol tambah. Untuk itu Anda bisa menggunakan blok Set Global.
Misalnya berikut ini contoh menambahkan variabel score dengan angka
1.

Jika Anda bisa memahami block ini, maka Anda sudah siap untuk
menjadi programmer menggunakan App Inventor.

19
2  
  

 KomponenDesigner.
 BlockEditor.
 Emulator.
 MembuatProgramPertamaHaloDunia.
 MembuatProgramSpriteBall.

ebelum membuat program, Anda perlu mengenali IDE (integrated

S
development environment) App Inventor tempat Anda membuat
program. IDE ini adalah tempat untuk Anda bekerja. Disinilah
Anda melakukan pekerjaan pembuatan program. Ada tiga bagian
dari IDE yang ada, yaitu komponen Designer, Block Editor, dan yang
ketiga adalah Android Virtual Device emulator.

Komponen designer adalah tempat dimana Anda mendesain komponen-

komponen antarmuka aplikasi menggunakan App Inventor. Untuk
mengaksesnya, silakan buka http://beta.appinventor.mit.edu/  dan
loginlah dengan akun email Anda. Antarmuka pertama yang Anda lihat
seperti berikut ini:
 Semua lokasi di canvas bisa dispesifikasikan dengan nilai (x, y).
Dimana X adalah jarak pixel dari ujung kiri kanvas. Dan Y adalah
jarak pixel dari atas kanvas.

Ada banyak event di canvas, misalnya ketika canvas sudah di-

touch atau belum. Atau sprite (ImageSprite atau Ball) sudah di-
drag. Ada juga method untuk menggambar titik, garis dan
lingkaran.

Checkbox akan memicu event jika user mengklik pada checkbox

tersebut. Ada banyak properti yang bisa mempengaruhi tampilan
dari checkbox yang bisa diset di  dan .

24


Komponen non-visible yang menyediakan clock untuk ponsel, timer,

dan penghitungan waktu.

Komponen untuk menampilkan gambar. Gambar yang akan

ditampilkan serta aspek penampilan gambar lainnya bisa diatur di
Designer atau di Block Editor.

25


Fungsinya menampilkan sebagian dari teks, yang ditentukan

melalui properti Text. Properti ini bisa diset di Designer atau Block
Editor, seperti misalnya pengaturan ukuran font untuk teks di label.

26


Komponen yang ketika diklik, akan menampilkan daftar teks yang

bisa dipilih oleh user. Teks ini bisa ditentukan menggunakan
Designer atau Block Editor dengan cara mengatur properti
ElementsFromString dengan dipisahkan tanda koma (contohnya
choice 1, choice 2, choice 3) atau dengan menentukan properti
Elements ke List di Blocks editor.

Ini juga punya properti lain, seperti untuk mengatur tampilan

(TextAlignment, BackgroundColor, dst.) dan apakah ini bisa diklik
atau tidak (Enabled).

Sebuah kotak untuk memasukkan password. Ini sama seperti

komponen TextBox, hanya saja tidak menampilkan karakter yang
diketikkan oleh user. Nilai dari teks di box bisa ditentukan atau
diset menggunakan properti Text.

27


Komponen yang memungkinkan user untuk memasukkan teks, nilai

ini bisa dimasukkan dari properti Text. Jika kosong, properti
Hint akan menyediakan panduan apa yang harus diketikkan oleh
user.

TextBox punya properti MultiLine yang menentukan apakah teks

bisa terdiri dari banyak baris atau hanya satu baris saja. Kalau
untuk satu baris, keyboard akan close secara otomatis ketika ueser
mengklik key Done. Sementara untuk menutup keyboard bagi
textbox yang multiline, user harus menggunakan method
HideKeyboard atau Back.

Ada properti NumbersOnly yang membatasi keyboard hanya

menampilkan masukan nomor saja. Dan properti Enabled
menentukan apakah textbox bisa dipakai atau tidak. Textbox
biasanya dilengkapi dengan button, dimana kalau user mengklik
button, entri teks akan langsung diproses.

28


Merupakan komponen non-visible yang menyimpan nilai secara

permanen di ponsel.
Komponen lainnya di Pallete dikelompokkan di grup . Komponen-
komponen di grup   ini berkaitan dengan pengaksesan media
dengan berbagai jenisnya.

Beberapa komponen Media yang penting adalah sebagai berikut:

Merupakan komponen untuk merekam video menggunakan

camcorder dari perangkat. Setelah video direkam, maka nama file
di ponsel berisi clip akan tersedia sebagai argumen untuk event
AfterRecording.

Nama file tersebut bisa digunakan, misalnya untuk properti source

dari komponen VideoPlayer.

29


Komponen untuk mengambil gambar menggunakan kamera dari

perangkat. Setelah gambar diambil, nama daril file di ponsel di file
gambar yang diambil bisa dipakai sebagai argumen untuk event
AfterPicture. Nama file ini bisa dipakai untuk mengeset properti
Picture dari komponen Image.

Tombol khusus dimana ketika user men-tap pada image picker,

image gallery dari Android akan muncul dan user bisa memilih
image. Setelah user mengambil image, maka diambil properti
ImagePath diset ke nama image tersebut.

Komponen multimedia yang akan memainkan audio atau video dan

mengkontrol vibrasi dari ponsel. Nama field multimedia bisa
ditentukan di properti Source. Dimana ini bisa diset di Designer
atau di Blocks Editor. Panjang waktu dari vibrasi ditentukan di
block editor dengan satuan milidetik.

Jika Anda hanya ingin memainkan file sound dan bervibrasi,

tanpa memakai video, maka komponen ini sangat cocok untuk file
suara yang panjang, seperti lagu, sementara komponen Sound lebih
efisien untuk file yang pendek, seperti sound effect.

Komponen multimedia untuk memainkan file dan juga bisa

memvibrasi selama beberapa detik yang waktunya bisa ditentukan

30
 di Blocks Editor. Nama dari file suara yang bisa ditentukan baik di
Designer atau di Blocks Editor. Daftar file multimedia yang
didukung oleh Core dari Android bisa dilihat di tabel berikut ini:

        

     
       
  
 
 

 
  
 


 
 




  
 

      

     
     

       

        
      

     

    


      

    
   

  

      
      
        
         
     
  
   
 

31
 Anda juga bisa menggunakan tanda minus atau tanda kurung
(misalnya (021)-555-1212') tapi akan diabaikan oleh Android.

Sebuah button yang jika diklik akan menampilkan daftar dari

nomor kontak dari ponsel untuk dipilih. Setelah user memilih,
properti akan diset ke informasi mengenai kontak.

□ ContactName: nama kontak.

□ PhoneNumber: nomor telepon kontak.

□ EmailAddress: alamat email dari kontak.

□ Picture: nama dari file yang berisi image kontak. Ini bisa
dipakai sebagai nilai properti Picture untuk komponen Image
atau ImageSprite.

Komponen yang akan mengirimkan pesan teks ketika method

SendMessage dipanggil. Ini akan mengirimkan pesan yang ada di
properti Message ke nomor ponsel di properti PhoneNumber.

Komponen ini juga akan menerima pesan teks, kecuali jika properti
properti ReceivingEnabled bernilai False. Ketika ada pesan masuk,
event MessageReceived akan diangkat dan menyediakan pesan dan
nomor yang akan dikirim.

Jika properti GoogleVoiceEnabled diaktifkan, pesan ini bisa

dikirim atau diterima menggunakan Wifi. Ini mensyaratkan Anda
harus memiliki akun Google Voice. Dan juga Google Voice terinstal di
ponsel Anda. Ini hanya bisa dipakai di ponsel yang mendukung
Android 2.0 ke atas. Komponen ini sering digunakan dengan
komponen ContactPicker yang memungkinkan Anda memilih
kontak dari telepon.

Grup komponen kelima di Pallete adalah . Pada grup ini berisi

bebeberapa sensor-sensor yang ada di Android, seperti yang ditampilkan
pada gambar berikut:

Berikut merupakan penjelasan masing-masing komponen:

39


Komponen tak terlihat yang bisa mendeteksi guncangan dan

mengatur kecepatan dalam arah tiga dimensi menggunakan unit
Standar internasional (m/s2). Komponen-komponen di
AccelerometerSensor ini adalah:

 : nilainya 0 ketika ponsel diletakkan di permukaan yang

rata. Dan positif ketika ponsel miring ke kanan (bagian kirinya
diangkat) dan negatif ketika ponsel diangkat ke kiri (sisi
kanannya diangkat).

 : nilainya 0 ketika ponsel diletakkan di permukaan yang

rata. Nilainya positif ketika bagian bawahnya diangkat dan
negatif ketika bagian atasnya diangkat.

 : nilainya -9.8 (gravitasi bumi dalam satuan meter/detik),

ketika perangkat diset paralel di bumi dengan arah atas
menghadap ke bawah, dan nilainya 0 ketika sejajar dengan
ground ketika perangkat menghadap ke atas. Dan +9.8 ketika
menghadap ke bawah. Nilai ini bisa ber-efek dengan
mengakselerasinya searah atau berkaitan dengan gravitasi.

Komponen tak terlihat, yang fungsinya untuk menyediakan

informasi lokasi, termasuk longitude, latitude, altitude (jika
didukung oleh perangkat) dan alamat. Komponen ini juga bisa
melakukan geocoding, mengkonversi alamat ke latitude yang
dilakukan oleh method LatitudeFromAddress dan longitude dengan
method LongitudeFromAddress.

Agar bisa berfungsi, komponen harus mengeset properti Enabled ke

True dan perangkat harus memiliki sensor lokasi melalui wifi atau
satelit GPS (kalau ada).

40


Komponen visible yang menyediakan informasi mengenai orientasi

perangkat fisik dalam tiga dimensi. Komponen yang terdapat di
OrientationSensor antara lain:

□ Roll: 0 derajat ketika perangkat datar, dan akan bertambah ke

90 deajat jika diangkat ke sisi kiri, dan menurun ke -90
derajat ketika perangkat diangkat ke sisi kanannya.

□ Pitch: 0 derajat ketika perangkat datar, naik ke 90 derajat

ketika perangkat diangkat sehingga bagian atasnya ada di
bawah, dan 180 derajat ketika dikebawahkan. Sementara jika
bagian bawahnya mengarah ke bawah, maka pitch akan
menurun ke -90 derajat. Dan akan menurun ke -180 ketika
diputar secara penuh.

□ Azimuth: 0 derajat ketika bagian atas menghadap utara, 90

derajat ketika mengarah ke tiumr, 190 derajat ketika mengarah
ke selatan, dan 270 derajat ketika mengarah ke barat.

Grup komponen keenam Pallete adalah  yang berisi

komponen-komponen untuk mengatur layout program.

Beberapa komponen yang ada di grup ini antara lain:

Elemen pemformatan yang berguna untuk meletakkan komponen

dari kiri ke kanan. Jika Anda ingin meletakkan sebuah
komponen di atas lainnya, gunakan Vertical Alignment.

Elemen pemformatan untuk meletakkan komponen yang diatur

dalam bentuk tabel.

Elemen pemformatan untu menampilkan komponen secara vertikal.

Komponen pertama diletakkan di atas, dan komponen berikutnya di
bawahnya, dan seterusnya.

41
Grup komponen ke tujuh di Pallete adalah  seperti yang
bisa Anda lihat di gambar berikut:

Lego Mindstorm adalah komponen kit yang berisi software yang bisa
dikombinasikan dengan hardware Lego untuk membuat robot yang kecil
dan bisa dikostumisasi.

Hardware dan software dari Lego Mindstorm ini berasal dari lab
Mindstorms Robotics Invention System yang dibuat oleh MIT Media Lab.
Brick yang dipakai diprogram menggunakan logo Brick. Bahasa
pemrograman visual yang dipakai disebut LEGOsheets, karena
dikembangkan oleh University of Colorado pada tahun 1994 berbasis
kepada AgentSheets. Sistem kit dari Mindstorms Robotics Invention ini
terdiri dari dua motor, dua sensor sentuh dan satu sensor cahaya.

Mindstorm kit ini dijual dan digunakan sebagai tool edukasi. Awalnya
dikembangkan sebagai kerjasama antara Lego dan MIT Media
Laboratory. Versi pendidikannya disebut Lego Mindstorms for Schools,
dan memiliki bahasa pemrograman ROBOLAB GUI-based programming
software, yang dikembangkan di Universitas Tufts dengan engine
LabVIEW.

Grup komponen berikutnya di   adalah   yang berisi

beberapa komponen lain dari kategori sebelumnya, komponen ini penting
pula untuk Anda dipahami.

42
Beberapa komponen di grup ini adalah sebagai berikut:

Ini adalah komponen yang bisa meluncurkan activity menggunakan

method StartActivity. Beberapa aktivitas yang bisa dijalankan antara
lain:

□ Menjalankan AppInventor lain untuk aplikasi Android.

□ Memulai aplikasi kamera.

□ Melakukan pencarian web.

□ Membuka browser untuk membuka webpage tertentu.

□ Membuka aplikasi map ke lokasi tertentu.

□ Anda bahkan bisa menjalankan aktivitas mengembalikan data

teks.

Ini adalah komponen yang akan membaca barcode untuk Anda.

Merupakan komponen Bluetooth client.

Merupakan komponen bluetooth server.

Merupakan komponen yang akan menciptakan pesan alert, dialog

pop up dan entri log.

43
Komponen ini gunanya untuk menampilkan semua komponen yang
sudah dimasukkan ke form. Semuanya yang ada di screen akan ada di
bawah screen yang bersangkutan. Anda bisa memilih salah satu
komponen untuk melihat properties-nya.

45
Di bagian bawah   terdapat . Ini adalah tempat bagi
Anda untuk mengupload komponen baru.

Kalau Anda mengklik pada komponen tertentu, terlihat properties yang

berkaitan dengan komponen tersebut. Di panel , Anda bisa
mengedit properti-properti komponen yang bersangkutan.

46
Anda bisa mengganti nama sebuah komponen. Caranya dengan klik
pada nama komponen tersebut, kemudian klik tombol  di bagian
bawahnya.

Kemudian isikan nama baru di textbox   di kotak

.

47
Nama di jendela   akan langsung berubah sesuai dengan
yang Anda tuliskan. Anda juga bisa menghapus komponen dengan klik
pada komponen tersebut, kemudian klik  untuk menghapusnya.

Muncul konfirmasi, klik   maka komponen akan langsung terhapus

dan hilang dari panel .

48
Block editor adalah komponen yang berfungsi untuk memasang blok-
blok puzzle. Karena App Inventor ini merupakan pemrograman berbasis
block, ini identik dengan tampilan kode dimana Anda bisa mengatur
flow program dari aplikasi yang Anda buat. Untuk membuka Block
Editor ini, klik pada  dari tampilan .

Maka muncul jendela   yang dibuat menggunakan Java.

Karena diawal pembahasan Anda sudah menginstall Java, maka Block
Editor ini akan langsung diaktifkan. Berikut ini tampilan dari Block
Editor:

49
Pada bagian kiri dari jendela  terdapat 3 tab, yang pertama
adalah . pada tab ini Anda bisa melihat berbagai kategori block
yang built in dan penting untuk pemrograman, seperti berbagai blok
untuk mengatur flow, lalu control dan sebagainya.

Tab kedua adalah , Anda bisa melihat berbagai block yang

bersumber dari komponen-komponen Anda.

50
Misalnya untuk , Anda bisa melihat berbagai blok berkaitan
dengan event Button1 tersebut. Dari mulai event terhadap button, hingga
method atau nilai properti dari komponen tersebut.

Dan tab ketiga adalah . Pada tab ini terdapat blok-blok lain
yang penting, seperti untuk activity starter, dan semua jenis komponen
secara umum.

51
Bagian ketiga dari IDE yang penting adalah emulator. Untuk
menjalankan emulator, Anda bisa klik pada tombol di
.

Muncul pemberitahuan bahwa emulator sedang dijalankan, loading-nya

bisa memakan waktu yang lama sesuai dengan spesifikasi komputer
Anda.

Kalau tampilan emulator sudah muncul, terlihat seperti ini:

52
5. Masukkan objek , maka di layar akan muncul label.

6. Ganti properti  dari label ini dengan tulisan “....Klik Tombol...”

55
 7. Kemudian masukkan  ke screen.

8. Ganti properti  button ini menjadi “...Klik Aku...”.

56
9. Maka penggantian properti text tersebut akan langsung terlihat di
screen.

57
 10. Kemudian beralih ke , klik
pada .

11. Klik pada event blok

12. Maka block

tersebut akan terlihat di jendela .

58
13. Pada contoh ini, jika tombol diklik, maka label1.text akan berisi
tulisan “Halo Dunia”. Maka klik pada  dan klik
pada block .

14. Maka ada dua block yang sudah masuk seperti berikut ini:

59
 11. Salin nilai  dan
letakkan di .

12. Dan jika sudah selesai, jalankan aplikasi. Klik pada .

82
13. Pilih gambar sesuai dengan keinginan Anda.

14. Maka gambar yang terpilih akan ditampilkan, dan Anda bisa
melihat path  dari file gambar tersebut dibagian bawah.

83
84
4  


 MembuatAplikasiSlideshowOtomatis.
 MembuatAplikasiSlideshowManual.
 MembuatAplikasiSlideshowRandom.

P
ada bab ini Anda akan membuat sebuah aplikasi slideshow
menggunakan App Inventor. Aplikasi yang akan dibuat ini berguna
untuk menampilkan gambar tertentu dimedia. Terdapat 3 jenis
aplikasi yang akan dibuat yaitu, aplikasi slideshow otomatis,
aplikasi slideshow manual, serta aplikasi slideshow random.

Pada projek pertama ini, Anda akan membuat sebuah program yang
akan menampilkan gambar yang ada di media secara otomatis
menggunakan komponen Timer, sehingga user tidak perlu melakukan
tindakan apapun. Tahapan membuat aplikasi slideshow otomatis ini
seperti berikut:
1. Klik pada   untuk membuat project baru.
2. Buat nama projek “SlideShow” dan klik   untuk menyimpan
project.
 3. Masukkan komponen  ke dalam Screen, dan masukkan juga
komponen  ke dalamnya.

4. Di panel , pastikan komponen  dan  sudah

ada, biarkan dengan nama standarnya, yaitu  dan .

5. Untuk komponen , pastikan   dan

 dalam posisi tercentang. Kemudian tentukan
waktu Clock dipicu dalam satuan milidetik.

86
32. Masukkan di bawah   masih di event
.

33. Kemudian klik .

97
 34. Kemudian masukkan block , kemudian ganti ke jenis numerik.

35. Kalau sudah jadi , set dengan angka 1.

98
36. Maka blok untuk menginkremenkan variabel nomor sudah jadi,
tinggal pasangkan saja ke .

37. Pasangkan blok untuk inkremen tersebut seperti berikut ini:

38. Kalau sudah dipasangkan, terlihat tampilan seperti berikut:

99
 39. Berikutnya, akan dibuat jika nomor sudah angka 5, maka
dikembalikan ke 1. Ini karena file-file gambar hanya dari 1.jpg
hingga 4.jpg.
40. Untuk melakukan ini, gunakan logic If then, dengan klik pada blok
.

41. Pasangkan di bawah .

100
42. Kemudian klik  dan pilih blok kondisi lebih besar
sama dengan.

43. Pasangkan blok kondisi yang menyatakan jika global nomor lebih
besar sama dengan lima.

101
46. Untuk melihat apakah logika dari program sudah berjalan atau
belum, klik pada .

47. Ketika program slideshow berjalan, otomatis gambar akan

dijalankan secara otomatis. Karena semuanya diletakkan di event
timer.

103
 48. Ketika event timer berjalan otomatis, file gambar dengan nama
berikutnya akan ditampilkan.

49. Hingga sampai file teraakhir yaitu 4.jpg maka akan kembali ke
gambar pertama.

104
50. Sekarang kembali ke tampilan Designer. Anda akan menambahkan
komponen  untuk menampilkan nama file gambar.

51.Hilangkan properti   dari   tersebut, dan beralih ke Block

Editor. Klik pada  dan klik pada .

105
 52. Kemu
dian masukkan juga .

53. Kemudian letakkan ke di bawah tes

If then sebelumnya.

106
54. Agar label tersebut tidak tertutup oleh gambar, atur ukurannya
dengan klik pada .

55. Kemudian set  ke dari .

107
 18.Jika Anda ingin memberikan action ke event handler
dan . Pertama set   menjadi
dengan contoh seperti berikut ini:

19.Kemudian untuk action setelahnya, klik pada

.

20. Pasangkan dibawah .

134
21. Setelah itu gunakan blok If then untuk memeriksa apakah
. jika ya, maka set btnSetelahnya
menjadi tidak aktif (nilai enabled = false).

22. Untuk btnSebelumnya, kebalikannya, Anda tinggal memanggil

action .

23. Maka kalau Anda menjalankan program, lalu membuka halaman

setelahnya, btnSebelumnya akan aktif.

135
136


S
etelah membaca buku ini diharapkan pembaca telah
memahami penggunaan App Inventor untuk membuat
aplikasi Android. Banyak hal yang sudah disampaikan,
mulai dari mengenal App Inventor, menggunakan IDE App
Inventor, Membuat Aplikasi Pilih Gambar, Membuat Aplikasi
Slidesho w, hingga memb uat aplikasi W eb Brows er.

Penulis berharap Anda dapat memahami apa yang telah

disampaikan dengan baik dan benar. Bila Anda mengalami
kesulitan dalam mem pelajari buku ini, Anda dapat men yam paikan
pertanyaan kepada penulis melalui alamat yang berada pada
bagian Prakata. Selamat Belajar..! !
Membuat Jika Anda hendak belajar membuat aplikasi
Aplikasi untuk platform Android, namun Anda masih

Android awam dengan bahasa pemrograman yang

dipakai, maka buku ini jawabannya. Buku ini
 Tanpa Coding akan mengajarkan kepada Anda tentang sebuah
dengan
kemudahan dalam membuat aplikasi Android
APP tanpa coding menggunakan App Inventor. Lalu,
Inventor apa App Inventor itu?

App Inventor merupakan sebuah tool untuk

membuat aplikasi Android menggunakan visual
blog programming yang sangat mengagumkan.
Mengapa disebut mengagumkan? ini karena
dalam membuat sebuah aplikasi Android Anda
tidak perlu mengetikkan satu pun code program.
Anda hanya perlu melakukan drag drop atau menyusun block yang merupakan simbol
perintah dan fungsi mirip dengan permainan puzzle.

Melalui buku ini penulis akan mengajarkan kepada Anda betapa mudahnya membuat
aplikasi Android menggunakan App Inventor. Buku yang disajikan secara ringan dan
berbobot ini, akan mengupas secara step by step pemrograman Android menggunakan
App Inventor serta dilengkapi dengan contoh aplikasi yang dibuat. Lebih lengkap, buku
ini membahas:
• Bab 1. Apa itu App Inventor?
• Bab 2. Menggunakan IDE App Inventor
• Bab 3. Membauat Aplikasi Pilih Gambar
• Bab 4. Membuat Aplikasi Slideshow
• Bab 5. Membuat Aplikasi Web Browser

pustaka-indo.blogspot.com
ISBN 978-602-02-0480-2
Sistem Operasi

 Tingkat Pemula
 Tingkat Menengah
PT ELEX MEDIA KOMPUTINDO
 Tingkat Mahir
Kompas Gramedia Building
Jl. Palmerah Barat 29-37, Jakarta 10270
 Telp. (021) 53650110-53650111, Ext Referensi
3214  Tutorial
Webpage: http://www.elexmedia.co.id Latihan