Membangun Aplikasi Android

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 daftar sumber online yang menyediakan materi baik bagi pemula ataupun para developer Android.

MIT App InventorMIT App Inventor merupakan salah satu cara terbaik untuk mempelajari pemograman sistem operasi Android secara visual. Situs ini akan sangat berguna bagi Anda yang tertarik mengenai dunia programming Android. Jika Anda hanya memiliki sedikit keahlian, atau tidak memiliki sama sekali pengalaman dalam mengembangkan aplikasi, App Inventor dapat menjadi media yang menarik untuk digunakan. App Inventor memungkinkan Anda untuk mengembangkan aplikasi untuk perangkat Android menggunakan web browser dan mengkoneksikannya kepada ponsel atau emulator. Proyek ini kerap disebut juga sebagai Google App Inventor. Saat tengah membangun aplikasi, Anda akan bekerja dengan beberapa aplikasi seperti App Inventor Designer. Melalui App Inventor Designer Anda dapat memilih komponen-komponen untuk aplikasi Anda. Selain itu, App Inventor Blocks Editor akan menjadi aplikasi yang mengatur secara spesifik apa yang harus dilakukan oleh setiap komponen. Anda dapat mengatur program secara visual dengan mencocokkan setiap bagian secara bersamaan seperti bagian dari puzzle.

1

Aplikasi yang Anda kembangkan akan tampil pada ponsel selangkah demi selangkah, sesuai dengan bagian yang Anda masukkan. Dengan begitu, Anda 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. MIT App Inventor 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 difungsikan selayaknya pada perangkat ponsel. App Inventor pun mendukung penggunaan sistem operasi lain seperti Mac OS X, GNU/Linux, dan juga Windows. Sebelum memanfaatkan App Inventor untuk membuat aplikasi, Anda perlu mengatur ulang komputer dan meng-install App Inventor Setup yang dapat diunduh langsung melalui situs ini. Anda dapat mengaksesnya http://developer.android.com/training/index.html

Android Application Development TutorialsApabila Anda mencari tutorial pengembangan aplikasi Android dalam bentuk format video yang lengkap, Android Application Development Tutorials dapat menjadi opsi terbaik. Pasalnya di dalamnya Anda akan menemukan ratusan video yang akan mengajarkan Anda membuat aplikasi Android. Tidak seperti proyek lain yang melayani para pengunjungnya melalui web pribadi, TheNewBoston (nama di balik toturial ini) memanfaatkan channel pada YouTube agar dapat dengan mudah diakses oleh berbagai kalangan. Di dalamnya Anda akan menemukan sekitar 200 video 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. Daftar-daftar video tersebut dirilis pada bulan Agustus tahun 2011, oleh sebab itu Anda masih akan mendapatkan cukup banyak informasi yang memadai. Rata-rata video yang terdapat di dalam channel ini memiliki durasi sekitar 5 menit. Namun, Anda masih akan mendapatkan beberapa video berdurasi hingga 9 menit, tergantung banyaknya langkah-langkah yang harus dilakukan setiap pembahasan.

Dengan 200 video tutorial, tentunya diperlukan waktu yang cukup banyak untuk mempelajari video demi video. Berdasarkan tutorial yang diberikan, seri Android Application Development Tutorials ini dapat membantu Anda mengembangkan aplikasi Android sederhana. Dengan begitu, bagi para pemula yang ingin mencoba mengembangkan aplikasi Android, Anda dapat mengikuti setiap video tersebut dengan

2

seksama. Penasaran ingin menyaksikan 200 video tersebut? Akses channel Android Application Development Tutorials ini di sini.

Android DeveloperAndroid Developer merupakan situs resmi Android untuk mengetahui langkah-langkah membuat aplikasi. Situs inipun akan memberikan pendekatan yang lebih terstruktur dalah hal pemberian informasi dengan langkah-langkah yang spesifik. Jika Anda tertarik untuk mengetahui dasar-dasar pengembangan aplikasi Android dalam satu media, situs ini dapat menjadi pilihan yang menarik. Salah satu hal menarik yang dapat Anda temui di dalam situs Android Developer ini adalah Anda akan menemukan berbagai informasi ter-update. Artinya, setiap langkah yang harus diikuti hadir dalam versi 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 Developer 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 Inventor adalah sebuah tool online untuk membuat aplikasi android, app inventor kini dikembangkan oleh MIT, universitas yang bergerak di bidang teknologi dan diakui di dunia. Semula app inventor dikembangkan oleh google, namun sekarang MIT yang memegang kendali terhadap pengembangan tools app inventor

Yang 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 puzzle. 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 browser web dan baik telepon yang terhubung atau emulator. Server App Inventor menyimpan pekerjaan Anda dan membantu Anda melacak proyek-proyek Anda.

Anda dapat membangun aplikasi dengan:-App Inventor Designer , di mana Anda memilih komponen untuk aplikasi Anda.-App Inventor Blok Editor , 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. Ketika 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?

Framework visual programming ini terkait dengan bahasa pemrograman Scratch dari MIT,

5

yang secara spesifik merupakan implementasi dari Open Block yang didistribusikan oleh MIT Scheller Teacher Education Program yg diambil dari riset yang dilakukan oleh Ricarose Roque. App Inventor menggunakan Kawa Language Framework dan Kawa’s dialect – yang di develop oleh Per Bothner dan di distribusikan sebagai bagian dari GNU Operating System oleh Free Software Foundation sebagai Compiler yang mentraslate visual block programming untuk diimplementasikan pada platform Android.

Apa Yang Bisa Kita Lakukan Dengan App Inventor?

Semua tergantung dari orientasi awal anda, anda ingin membuat aplikasi dengan tujuan apa

1.Just for funKatakanlah anda memiliki Handset 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 puzzle, mengasah otak anda seperti mengisi TTS, atau belajar sebagai basis menguatkan kemampuan logika anda, semua terasa menyenangkan.

2.Learning toolApapun profesi anda, entah seorang pelajar, mahasiswa, guru, dosen, teknisi, progamer atau anda hobi untuk mengotak-atik android, anda akan bisa menjadikan App Inventor sebagai tool belajar anda. Jika anda seorang guru atau dosen anda akan membuat app inventor menjadi alat pengajar yang hebat, karena visualisasi akan mempermudah siswa memahami dan menguasai apa yang anda ajarkan. Sebagai contoh: anda dapat mempelajari logika kerja dari aplikasi dengan menerapkan susunan blok pada tool itu.

3.Developer aplikasi

6

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 Inventor, anda akan merasakan betapa mudahnya, tentu disamping karena berbasis visual drag drops ini juga karena anda :-Tidak perlu menghafal dan mengingat instruksi atau kode-kode program-Komponen dan blok event tersedia dengan lengkap anda tinggal menggunakannya. Layaknya sebuah objek anda tinggal merangkainya dengan Komponen dan blok yang sesuai fungsinya, tinggal meletakkanya seperti puzzle tinggal merubah propertinya, misal memberikan nilai angka untuk mengeset timer dan lain-lain.-Event handler akan memudahkan anda dalam menangani setiap “kejadian” atau event yang anda ingin handle. Misal anda membuat sebuah aplikasi untuk menangani sms, dalam App Inventor anda tinggal mengambil drag and drops blok yang menangani event sms.

Bagaimana saya bisa mendaftar?

Untuk memulai App Inventor, anda dapat langsung klik gambar di bawah ini

Tutorial juga tersedia pada situs MIT App Inventor, untuk mengunjunginya anda bisa klik gambar di bawah ini

7

Mengenal Android dan App Inventor

Dunia TI sekarang semakin Jaya dan semakin banyak diminati oleh semua kalangan, yang baru - baru

ini adalah Sistem Oprasi Android, android OS besutan Google ini baru muncul pada tahun 2011 akan

tetapi di tahun 2012 sudah bisa menyaingi Black Berry padahal diantara keduanya ada kelebihan dan

kekurangannya masing-masing.

Dalam postingan ini GFT tidak membahas tentang persaingan dan kelebihan keduanya, akan tetapi

tidak bisa dipungkiri OS Android lebih bisa diterima di sebagian kalangan karena Goggle

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" GFT akan membahasnya sebagai

pengenalan bagi yang minat untuk mempelajarinya, semoga bermanfaat....

1. Sistem Operasi Android

Android adalah sistem operasi yang berbasis Linux untuk telepon seluler seperti telepon pintar dan

komputer tablet. Android menyediakan platform terbuka bagi para pengembang untuk menciptakan

aplikasi mereka sendiri untuk digunakan oleh bermacam peranti bergerak. Awalnya, Google Inc.

membeli Android Inc., pendatang baru yang membuat peranti lunak untuk ponsel. Kemudian untuk

mengembangkan Android, dibentuklah Open Handset Alliance, konsorsium dari 34 perusahaan peranti

keras, peranti lunak, dan telekomunikasi, termasuk Google, HTC, Intel, Motorola, Qualcomm,T-Mobile,

dan Nvidia.

Pada saat perilisan perdana Android, 5 November 2007, Android bersama Open Handset Alliance

menyatakan mendukung pengembangan standar terbuka pada perangkat seluler. Di lain pihak,

Google merilis kode–kode Android di bawah lisensi Apache, sebuah lisensi perangkat lunak dan

8

standar terbuka perangkat seluler.

Di dunia ini terdapat dua jenis distributor sistem operasi Android. Pertama yang mendapat dukungan

penuh dari Google atau Google Mail Services (GMS) dan kedua adalah yang benar–benar bebas

distribusinya tanpa dukungan langsung Google atau dikenal sebagai Open Handset Distribution

(OHD).

Fitur yang tersedia di Android adalah:

1 Kerangka aplikasi: itu memungkinkan penggunaan dan penghapusan komponen yang

tersedia.

2 Dalvik mesin virtual: mesin virtual dioptimalkan untuk perangkat mobile.

3 Grafik: grafik di 2D dan grafis 3D berdasarkan pustaka OpenGL.

4 SQLite: untuk penyimpanan data.

5 Mendukung media: audio, video, dan berbagai format gambar (MPEG4, H.264, MP3,AAC,

AMR, JPG, PNG, GIF)

6 GSM, Bluetooth, EDGE, 3G, dan WiFi (hardware dependent)

7 Kamera, Global Positioning System (GPS), kompas, dan accelerometer (tergantung

hardware)

Android memiliki berbagai keunggulan sebagai software yang memakai basis kode komputer yang

bisa didistribusikan secara terbuka (open source) sehingga pengguna bisa membuat aplikasi baru di

dalamnya. Android memiliki aplikasi native Google yang terintegrasi seperti pushmail Gmail, Google

Maps, dan Google Calendar.

Para penggemar open source kemudian membangun komunitas yang membangun dan berbagi

Android berbasis firmware dengan sejumlah penyesuaian dan fitur-fitur tambahan, seperti FLAC

lossless audio dan kemampuan untuk menyimpan download aplikasi pada microSD card. Mereka

sering memperbaharui paket-paket firmware dan menggabungkan elemen-elemen fungsi Android

yang belum resmi diluncurkan dalam suatu carrier-sanction firmware.

2. Visual Block Programming - App Inventor

App Inventor adalah sebuah perangkat pemrograman untuk membuat aplikasi android, yang

menyenangkan dari tool ini adalah karena berbasis Visual Block Programming. Disebut Visual Block

Programming menggunakan, menyusun dan drag-drops blok, merupakan simbol-simbol perintah dan

fungsi event handler tertentu dalam membuat aplikasi, dan secara sederhana kita bisa menyebutnya

tanpa menuliskan kode program (coding less). (Wolber cs. 2011)

Framework visual programming ini terkait dengan bahasa pemrograman Scratch dari MIT, yang

secara spesifik merupakan implementasi dari Open Block yang didistribusikan oleh MIT Scheller

Teacher Education Program yang diambil dari riset yang dilakukan oleh Ricarose Roque. (Wolber cs.

2011)

App Inventor menggunakan Kawa Language Framework dan Kawa’s dialect yang di dikembangkan

oleh Per Bothner dan di distribusikan sebagai bagian dari GNU Operating System oleh Free Software

Foundation sebagai Compiler dan menterjemahkan Visual Block Programming untuk

diimplementasikan pada platform Android. Tentu disini anda tinggal menikmati kemudahan yang ada.

9

(Wolber cs. 2011)

10

Instal App Inventor OfflineApp Inventor adalah tool untuk membuat aplikasi Android yang berbasis block

programming, yaitu kita bisa membuat aplikasi Android tanpa harus menggunakan kode

program.

Ini cocok untuk media pembelajaran SMP, walaupun mereka tidak mempunyai basic

programming tapi bisa untuk belajar mengasah logika seperti halnya bermain puzzle. Kita

hanya perlu menggunakan, menyusun dan drag-drops "blok" yang merupakan simbol -

simbol perintah dan fungsi event handler tertentu dalam membuat aplikasi.

App Inventor bisa dijalankan secara online dan offline. Versi online nya bisa diakses di

http://beta.appinventor.mit.edudengan terlebih dahulu login ke email google anda.

Sekarang kita akan bahas langkah - langkah menjalankan App Inventor secara offline.

11

Dengan menggunakan App Inventor secara offline, maka tanpa koneksi ke internetpun

kita bisa membuat aplikasi Android secara mandiri sekaligus bisa mempaket atau

mengcompile-nya langsung karena sudah include server compilernya.

Berikut langkah - langkahnya (dengan asumsi anda menggunakan Windows 7 dan sudah

terinstal Java JDK) :

1. Download file zip nya dari sini

2. Ekstrak file tersebut dan letakkan di directori yang anda kehendaki, maka anda akan

mendapatkan tiga folder yaitu :

a. appengine-java-sdk-1.6.0

b. appinventor

c. buildserver

3. Pada folder AppInventor kita akan menemukan file startIA, double klik untuk

menjalankannya

4. Buka browser (bisa menggunakan Chrome atau Mozilla Firefox), pada bar address

ketikkan http://localhost:8888kemudian enter, maka akan muncul jendela login dengan

user default. Kita bisa memakai langsung atau menguba dengan sesuai format tersebut.

12

5. App Inventor siap digunakan.Terdapat 2 komponen utama dalam App Inventor ini, yaitu

App Inventor Designer untuk merancang user interface dan App Inventor Block

Editor untuk menyusun logika-logika pemrograman yang kemudian dijalankan di

emulator Android.

- New Project -

13

- App Inventor Designer -

- App Inventor Block Editor -

14

Memulai App Inventor

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 service dari google, klik

pada tombol I accept the terms of service.

Gb. Term Of Service

Untuk memulai App Inventor :

1. Miliki Account gmail, http://www.gmail.com

2. Masuk ke http://www.appinventorbeta.com http://beta.appinventor.mit.edu/

15

3. Download & Install Java 6 (1.6) dari http://www.java.com

4. Download & Install AppInventor_Setup_Installer_v_1_2.exehttp://www.appinventorbeta.com/

learn/setup/setupwindows.html http://beta.appinventor.mit.edu/learn/setup/setupwindows.html

5. Install & Setting driver HP Android apabila ada

6. Have fun with App Inventor .. :D

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 di

http://www.appinventorbeta.com/learn/setup/setupwindows.html

http://beta.appinventor.mit.edu/learn/setup/setupwindows.html

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.

16

Setup Handset Android

Tahap ini dilakukan apabila anda ingin langsung mencoba hasil develop anda ke

handset android. Pertama anda harus memiliki kabel data USB, danmenginstall

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

Gb. Setting

Setelah itu koneksikan Handset anda dgn kabel USB Data ke komputer – dalam

17

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 melalui http://www.appinventorbeta.com http://beta.appinventor.mit.edu/ -apabila

tadi masih login anda langsung akan dibawa ke jendela developing :

Gb. Jendela Developing

5 Klik pada New, dan mulai projek baru misal dengan nama Helloworld, kemudian klik pada tombol

OK

18

Gb. Membuat Projek Baru

6 Maka akan terlihat langsung projek kita

19

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.

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

20

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.

21

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.

Contoh Aplikasi yg mimin bikin pake App Inventor di market : WhacKecoa ,silahkan dicoba

22

Langkah-Langkah Pemrograman dengan APP Inventor

Proses pemrograman Android menggunakan APP Inventor dapat dilihat pada gambar di bawah ini.

Gambar 2.2 Blok Diagram Cara Kerja Pemrograman App Inventor

Gambar di atas adalah proses programming aplikasi Android dengan APP Inventor. Berikut ini adalah langkah-langkah pemograman aplikasi android menggunakan APP Inventor. (Mulyadi Cs,2012)1.Daftar akun email di google2.Instal App Inventor Setup.exe (digunakan untuk menjalankan emulator Android)3.Buka beta.appinventor.mit.edu maka akan tampil gambar seperti di bawah ini

Gambar 2.3 Tampilan IDE App Inventor

4.Buat isi form (Screen) sesuai dengan aplikasi yang akan dibuat.

23

Gambar 2.4 Tampilan Screen (Form) IDE App Inventor

 5.Klik Open the Block Editor untuk memprogram aplikasi android menggunakan Visual Block Programming.

Gambar 2.5 Tampilan dan Kode Blok App Inventor

6.Simpan dengan meng-klik tombol SAVE7.Jika ingin menjalan emulator klik New Emulator, klik Connect To Device, Klik Emulator.

24

8.Compile aplikasi yang telah dibuat dengan meng-klik Pack for Phone lalu klik Download to Connected Phone .9.Instal aplikasi berekstensi apk pada platform Android.10.Aplikasi siap dijalankan.

25

Membuat Aplikasi Android Dengan MIT App InventorTutorial App Inventor Untuk Membuat Aplikasi AndroidUntuk 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.

Untuk memulai App Inventor :

1 Miliki Account gmail, http://www.gmail.com

2 Masuk ke http://www.appinventorbeta.com http://beta.appinventor.mit.edu/

3 Download & Install Java 6 (1.6) dari http://www.java.com

4 Download & Install AppInventor_Setup_Installer_v_1_2.exe

http://www.appinventorbeta.com/learn/setup/setupwindows.html

5 http://beta.appinventor.mit.edu/learn/setup/setupwindows.html

6 Install & Setting driver HP 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 :

28

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

29

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.

30

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 A T 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

38

S O U RC E : H T T P : / / M A F I A S U N D A . W O R D P R E S S . C O M / 2 0 1 3 / 0 4 / 2 6 / 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 /

39

Hello World Pada bab awal ini kita akan memperlajari beberapa hal mendasar pada App Inventor, terutama bagaimana

bekerja menggunakan Komponen Desainer – Component Designer , Blok Editor –Block Editor juga

menggunakan Emulator untuk menguji aplikasi. Dan projek pertama kita adalah membuat projek ritual,

yang juga dibuat pada semua awal belajar membuat aplikasi, yaitu membuat aplikasi dengan nama

Helloworld. Ok kita langsung mulai :

1 Aplikasi ini adalah sebuah aplikasi sederhana, ketika kita menyentuh layar –Click button akan

terdengar dering jam wekker dan juga bergetar -Vibrate, dan kemudian setelah itu kita akan

mengembangkannya dengan sebuah fitur ketika menggoyangkan handset –Accelerometer sensor akan

langsung terdengar suara dering wekker otomatis seperti ketika kita menyentuh layar. Aplikasi ini akan

menggunakan gambar jpg dengan dimensi sekitar 300x300px yang akan ditempatkan pada sebuah

button – tombol dan juga suara dering dengan format mp3.

2

3 Buat projek baru dari New > Helloworld

40

Gb. Membuat Projek Baru

4 Maka akan terbuka jendela Blok Editor berisi Viewer, Components dan Properties yang

merupakan kanvas kerja kita. Kemudian masukkan Label dari Pallete > Label , seperti pada gambar

Gb. Memberi Label

5 Set properti nya pada Text = My Hello World , Font = Bold, Background = Orange

6 Masukkan Button dari Pallete, dan klik button yang telah dimasukkan pada viewer sehingga terlihat

propertinya, dan kemudian masukkan image untuk button dengan cara : klik button dan pada jendela

properti image > add sehingga muncul jendela upload file, pilih browse untuk mencari file gambar

anda, kemudian klik OK.

41

Gb. Mengeset image Button

7 Maka gambar akan diupload dan masuk menjadi image pada tombol button1.

Gb. Image pada Button1

8 Setelah itu kita akan menambahkan suara, dari jendela Pallete > Media kemudian drag drop

komponen Sound kedalam viewer. Komponen Sound adalah Non-Visible sehingga dimanapun dia

diletakkan akan berada dibawah viewer.

9 Klik pada Sound sehingga terlihat propertinya di jendela Properties, set source dengan suara yang

kita miliki. Ini akan membuat source suara diupload, dengan cara seperti file gambar pada button tadi -

browse.

42

Gb. Menambahkan Suara

10 Kita telah selesai pada tahap ini, selanjutnya adalah bagaimana membuat komponen-komponen

yang ada ini bisa berfungsi sesuai dengan yang kita inginkan

11 Klik pada Open the Block Editor, sehingga muncul jendela Opening …. Pilih Run langsung,

atauPilih simpan atau save file .jnlp tersebut. Apabila disimpan Setelah tersimpan di komputer kita,

jalankan dengan meng-kliknya dua kali file tersebut –RUN , pastikan ketika membuka file ini adalah

menggunakan javaw \ javaws – Java Webstart. Cara setingnya adalah klik kanan pada file, Open

With > Choose Default Program > kemudian cari pada C:\Program Files\Java\jre6\bin\javaw atau

C:\Program Files\Java\jdk\jre6\bin\javaws dan kemudian cheklist pada Always use the selected

progam ..... abaikan peringatan security warning

Gb. Save Aplikasi

43

12 Akan terbuka, jendela Downloading application biarkan sampai selesai,

Gb. Seting javaw – Java Webstart untuk membuka file yg didownload

13 Pilih OK pada pertanyaaan starting Block Editor, hingga muncul Editor seperti dibawah ini yang

berarti jendela kerja Blocks Editor kita sudah terbuka dan siap untuk digunakan

Gb. Jendela Blocks Editor

44

14 Klik pada MyBlok > Button1 kemudian pilih event Button1.Click sehingga muncul di viewer

Gb. Memasukkan Event untuk Komponen Button1

15 Kemudian pilih Sound1 > Sound1.Play tarik dan tempatkan pada Button1.Click

Gb. Memasukkan Event Button1 & Suara

16 Untuk mencobanya kita set terlebih dahulu emulatornya, klik pada new emulator, OK pada starting

the emulator hingga muncul emulatornya, buka key lock dengan menggeser tanda kunci disebelah kiri

45

Gb. Emulator

17

Kemudian kembali ke Block Editor, klik pada Connect to Device > pilih emulator tunggu hingga

proses download selesai dan aplikasi akan tampil di emulator. Coba klik pada layar emulator apakah

aplikasi yang kita bikin berfungsi, yaitu akan mengeluarkan suara dering weker ketika di klik. Apabila

kita mencobanya pada Handset Android, kita bisa menyentuh layarnya.

46

Gb. Aplikasi pada Emulator

18 Kemudian kita akan tambahkan fungsi lainnya, yaitu fungsi getar. Dari My Block >

Sound1tambahkan event Sound1.Vibrate , kita akan melihat event ini memiliki text bertuliskan

millisecsini berarti kita bisa mengeset waktu getarnya –variabel ini disebut juga argument. Caranya klik

pada layar block editor diluar block event, yang akan membuat munculnya deretan menu tombolText,

List, Math dan yang lainya, untuk memberikan nilai vibrasi-nya yaitu pada tombol Math > 123

47

Gb. Event Sound1.Vibrate

19 Hingga muncul block number, klik pada block number dan ubah angkanya -dalam satuan

milisecond . Cuma sayangnya dengan emulator kita tidak bisa mencobanya, karena getaran hanya bisa

dirasakan di Handset.

Gb. Event Sound1.Vibrate & Set waktu

20 Kita akan belajar lebih jauh dan mengembangkan aplikasi yaitu dengan menambahkan sensor

accelerometer, caranya kembali ke Komponen Desainer di Browser, pilih Pallete > Sensorkemudian

drag-drops AccelerometerSensor1. Sekali lagi mengingatkan dia adalah komponen yang Non-Visible,

sehingga akan langsung berada diluar layar.

48

Gb. Komponen AccelerometerSensor1

21 Kembali ke Block Editor, dan pada MyBlock sudah terdapat komponen

AccelerometerSensor1tarik keluar blok event AccelerometerSensor1.Shaking , juga komponen

Sound1.play . Ini berarti kita membuat event ketika handset di goyangkan maka akan langsung

terdengar suara dering wekker. Kemudian bisa kita coba di handset kita.

49

Gb. Event AccelerometerSensor1

22 Untuk membuat aplikasi kita menjadi aplikasi yang mandiri, bisa kita memaket -Packaging dan

download aplikasi yang kita buat ini dengan cara dari Komponen Desainer kemudian menuPackage

For Phone pada sebelah kanan. Terdapat dua pilihan yaitu disimpan pada komputer atau langsung di

Handset kita.

Gb. Packaging Aplikasi

23 Apabila kita pilih disimpan di komputer, maka akan dipaket dan didownload ke komputer,

sedangkan apabila di download ke Handset maka akan langsung terinstall.

Worktoon

50

51