TUGAS PEMROGRAMAN MULTIMEDIA

Nama : Hilda Rusdi
Npm : 50408442

Kelas : 4IA06

Aplikasi Penggolongan Hewan Berdasarkan Jenis Makanan Berbasis Android
Pada tugas matakuliah Pemrograman Multimedia kali ini, saya akan menjelaskan aplikasi yang telah saya buat. Aplikasi penggolongan hewan berdasarkan jenis makanan ini dapat memberikan informasi kepada siswa Sekolah Dasar khususnya kelas 3 sampai kelas 6.
Aplikasi ini menampilkan gambar, suara , dan keterangan sebagai media penyampaian informasi. Pembuatan aplikasi ini menggunakan IDE Eclipse Galileo, Android SDK (Software Development Kit), dan diimplementasikan pada ponsel Android Samsung Galaxy Mini versi Froyo 2.2.
Metode pembuatan aplikasi pada mobile ini, diantaranya metode studi pustaka yaitu pengumpulan data dan referensi yang menunjang penulisan dan pembuatan aplikasi. Kemudian merancang alur dari program aplikasi menggunakan struktur navigasi dan flowchart. Perangkat lunak yang digunakan untuk membuat aplikasi penggolongan hewan berdasarkan jenis makanannya ini adalah Eclipse sebagai salah satu IDE untuk membangun program Java dengan ADT plugin (Android Development Tool) dan Android SDK(Software Development Kit) serta Google API (Application Programming Interface) dan juga XML. Pada pembuatan aplikasi Android terdapat penginstalan emulator android yang digunakan untuk menguji coba program yang kita buat. Di dalam aplikasi ini, terdapat menu – menu yang mengantarkan pengguna kedalam jenis hewan yang ingin diketahui berdasarkan jenis makanannya.

1. Diagram Alur dan Algoritma

Gambar 1 Struktur Navigasi

            Pada diagram ini pertama pengguna masuk kedalam tampilan menu utama program yang kemudian pengguna harus memilih salah satu dari ketiga kategori hewan yang tersedia dan ada button exit jika ingin langsung keluar dari apliksai. Setelah memilih salah satu pulau maka pengguna akan memilih lagi jenis hewan yang ada di layar dan setelah memilihnya maka pengguna akan dapat mengetahui informasi tentang hewan yang dipilih beserta jenis suara yang dihasilkan.

2       Flowchart Program

2.1    Menampilkan Aplikasi

Gambar 2 Flowchart Menampilkan Aplikasi

2.2    Menampilkan Menu Utama

Gambar 3 Flowchart Menampilkan Menu Utama

2.3       Menampilkan Menu Pilihan Kategori

Gambar 4 Flowchart Menu Kategori Jenis Makanan Hewan

2.4       Menampilkan Menu Info Hewan

Gambar 5 Flowchart Menampilkan Menu Info Hewan

2.5       Menampilkan Menu Tentang

Gambar 6 Flowchart Menampilkan Menu Tentang

3       Rancangan Tampilan Aplikasi

Sebelum kita membuat aplikasi ini, kita terlebih dahulu membuat rancangan tampilan menu sebagai konsep agar aplikasi tersebut sesuai dengan yang diinginkan. Tampilan menu tersebut terdiri dari, yaitu tampilan menu utama, tampilan menu mulai, tampilan penggolongan hewan, tampilan info hewan, dan tampilan menu tentang.

3.1    Rancangan Tampilan Menu Utama

 Pada rancangan menu utama terdiri dari daerah yang berisikan beberapa tombol yang tersedia dari menu ini seperti tombol tentang, menu, dan keluar. Rancangan menu utama aplikasi ini adalah sebagai berikut :

Gambar 7 Rancangan Menu Utama

3.2    Rancangan Tampilan Menu Mulai

Secara umum aplikasi ini menampilkan tiga bagian, yaitu Tombol Menu Herbivora, Tombol Menu Karnivora dan Tombol Menu Omnivora. yang masing-masing bertindak sebagai image button dan menggunan satu pilihan back yang bertindak sebagai button untuk kembali ke menu utama. Rancangan tampilan menu aplikasi adalah sebagai berikut:

Gambar 8 Rancangan Tampilan Menu Awal 

 

3.3    Rancangan Tampilan Menu Penggolongan Hewan

Pada tampilan menu ini pengguna diarahkan untuk memilih jenis hewan  yang diinginkan, dan proses pemilihan tersebut menggunakan fungsi widget radio button dan dua button  yang berfungsi sebagai eksekusi aplikasi yaitu button back dan button next, jika pengguna memilih back maka pengguna akan kembali ke menu awal tampilan aplikasi dan jika next maka pengguna akan menuju jenis hewan tersebut. Berikut tampilan rancangan menu penggolongan jenis hewan sebagai berikut:

Gambar 9 Gambar Menu Pilihan Penggolongan Hewan

 

3.4    Rancangan Tampilan menu Informasi Hewan dan Suara

Pada tampilan menu ini pengguna akan mendapatkan sebuah informasi tentang hewan  yang dipilih beserta contoh dari gambar dan suara hewan tersebut. Tampilan Menu jenis hewan adalah sebagai berikut :

Gambar 10  Tampilan Gambar , Informasi dan Suara

 

Image view digunakan sebagai contoh gambar hewan yang telah dipilih, sedangkan button yang berada dibawah image view digunakan sebagai pemutar suara untuk mengetahui jenis suara yang dihasilkan dari hewan tersebut, dan pada text view pengguna dapat mengetahui sebuah informasi dari hewan tersebut berasal dan button yang paling bawah digunakan untuk kembali kepada menu sebelumnya.

 

3.5    Rancangan Tampilan tentang Informasi Hewan dan Suara

Pada rancangan tampilan tentang ini terdapat informasi aplikasi bagi para pengguna mengenai aplikasi ini. Tampilan untuk tombol tentang ini dibuat dengan textview mengenai penulis, ini akan muncul di depan layar menu utama dengan menggunakan pengaturan default Android. 

Gambar 11 Tampilan Rancangan Menu Tentang

 

4       Langkah - Langkah Pembuatan Aplikasi Suara Hewan

Pada bagian ini penulis akan menjelaskan tentang pembuatan aplikasi Suara Hewan secara garis besar.

4.1    Pembuatan Project Awal

Untuk membuat projek awal Android dibutuhkan Android SDK dan emulator phone. Penulis menggunakan IDE Eclipse sebagai Java development environment sekaligus merupakan interface dengan emulator Android melalui plug-in Android Development Toolkit (ADT). Disini akan dijelaskan tahap dalam pembuatan project untuk pertama kali dan pembuatan AVD (Android Virtual Device) serta menjalankan aplikasi di emulator.

Tahap pertama adalah membuat project baru, dengan langkah sebagai berikut:

Gambar 12 Tahap Pertama Pembuatan Projek

 

Pilih File >> New >> Project pada Eclipse untuk membuka project baru. Kemudian pilih Android > Android Project, dan klik Next.

Setelah memilih Projeck Android maka akan ada jendela seperti ini:

Gambar 13 Jendela Parameter Projek Android

 

Kemudian Masukan informasi di bawah ini:

Project name               : Penggolongan Hewan

Build Target                : Android 2.2

Application name        : PENGGOLONGAN HEWAN

Package name             : com.PI.hilda

Create Activity           : Penggolonganhewan

Setelah selesai plug-in Android akan membuat project dan default file. Package akan siap di execute. Setelah itu adalah tahap penulisan program dan pengujian dengan menjalankan AVD.

Gambar 14 Tahap Awal Pembuatan Aplikasi Android

 

4.2    Penulisan Program Aplikasi

Untuk melakukan penulisan program disini menggunakan folder aplikasi pada Package Explorer yang telah tersedia saat pembuatan project awal.

Gambar 15 Folder Aplikasi Pada Package Explorer Eclipse

Pada Package Explorer di Eclipse terdapat folder aplikasi Suara Hewan. Untuk memulai penulisan program aplikasi, buka folder aplikasi Suara Hewan kemudian buka src >> com.pi.hilda >> PENGGOLONGAN HEWAN.java. Untuk membuat interface tampilan pada aplikasi, buka folder res >> layout >> main.xml.

Gambar 16 Folder untuk Penulisan Program Java

Gambar 17 Folder Untuk Pembuatan Interface

Setelah selesai melakukan penulisan program langkah selanjutnya adalah menjalankan program aplikasi Android. Klik kanan pada folder aplikasi di Package Explorer window, pilih Run As>Android Application.

5        Pengkodean Program

Pada aplikasi yang dihasilkan sebelumnya harus memerlukan beberapa proses, proses tahapan yang dilalui adalah mulai dari pembentukan file.java, file.xml, dan file manifest.xml, bisa dikatakan ke tiga bagian file saling mempunyai keterkaitan satu sama lain. Dimulai dari pembuatan file.xml terlebih dahulu, dikarenan file.xml inilah yang menginstruksikan ke file.java sehingga proses pembuatan file bejalan dengan mudah.

5.1    Pembuatan Background

Pada pemrograman Android untuk pembuatan program dan tampilan dilakukan pada dua bagian yang berbeda. Untuk pembuatan tampilan layout dilakukan seluruhnya pada file XML. Pada bagian pembuatan background terdapat pada kode berikut :

Secara garis besar penggalan kode di atas mendefinisikan orientasi layout yang digunakan berposisi vertikal. android:background="@drawable/background" pada penggalan kode program di atas adalah untuk mendefinisikan gambar background yang digunakan yaitu file gambar yang bernama background di dalam folder drawable.

5.2    Kode Java dalam Pembuatan Menu Mulai

 ini adalah codingan yang menjelaskan tentang apa saja aktifitas yang digunakan dalam file java.

 

pada codingan ini dijelaskan bahwa penggolonganhewan adalah nama class yang digunakan pada file java ini yang menggunakan main.xml sebagai layoutnya.

ini adalah pengaktifan fungsi tombol yang ada pada tampilan home aplikasi, mulai dari herbivora sampai dengan tombol exit. Dan setiap  pembuatan tombol harus memiliki id yang berbeda - beda agar tidak terjadi force closed. Dan perlu diingat fungsi ini hanya bisa digunakan untuk pengaktifan button,image view, image button.

Pada codingan diatas digunakan untuk membuat text “welcome” pada saat membuka aplikasi ini pertama kali.

setelah fungsi tombol diaktifkan pada codingan sebelumnya maka pada codingan ini dijelaskan fungsi klik yang digunakan, jadi pada saat herbivora di klik maka akan menuju ke class herbivora.java. 

 

case R.id.alert:

AlertDialog.Builder alertKeluar = new AlertDialog.Builder(PENGGOLONGANHEWAN.this);

alertKeluar.setMessage("Anda yakin ingin keluar dari aplikasi ini?")

.setCancelable(false)

.setPositiveButton("YA", new AlertDialog.OnClickListener(){

@Override

public void onClick(DialogInterface arg0, int arg1) {

finish();

}

})

.setNegativeButton("TIDAK",new AlertDialog.OnClickListener(){

@Override

public void onClick(DialogInterface dialog, int which) {

dialog.cancel();

}

});

AlertDialog a = alertKeluar.create();

a.setTitle("PENGGOLONGANHEWAN");

a.setIcon(R.drawable.alert);

a.show();

break; 

}

}

}

Codingan diatas digunakan untuk mengeksekusi perintah untuk pilihan exit yang dimana alert sebagai id dasarnya yang memberikan dua option,yaitu jika ya maka akan keluar dari aplikasi,sedangkan jika tidak maka akan masuk kembali kedalam aplikasi. Berikut ini output dari kodingan Menu Mulai di atas:

Gambar 18 Output Menu Mulai

 5.3    Kode Java dalam Pembuatan Menu Herbivora

public class herbivora extends Activity implements OnClickListener{

RadioButton list1, list2, list3, list4;

Ini adalah pembuatan fungsi radio button yang dimana list adalah nama pengenal untuk radio button ini. Diatas terdapat enam list sehingga sudah dipastikan akan ada enam pilihan yang digunakan untuk menuju ke file.java selanjutnya.

public void onCreate(Bundle savedInstanceState)

{

super.onCreate(savedInstanceState);

setContentView(R.layout.herbivora);

dan pada file java ini layout yang digunakan mengarah kepada herbivora.xml. Jadi setiap file java yang dibuat disarankan untuk membuat file.xml yang baru agar tidak terjadi force closed.

View backImageButton = findViewById(R.id.back);

backImageButton.setOnClickListener(this);

View nextImageButton = findViewById(R.id.next);

nextImageButton.setOnClickListener(this);

codingan diatas sama seperti codingan sebelumnya namun pada file.java ini hanya menggunakan dua buah button yaitu back dan next. Dan setiap  pembuatan tombol harus memiliki id yang berbeda - beda agar tidak terjadi force closed. Dan perlu diingat fungsi ini hanya bisa digunakan untuk pengaktifan button,image view, image button.

list1 = (RadioButton)this.findViewById(R.id.sapi);

list1.setChecked(true);

list2 = (RadioButton)this.findViewById(R.id.kuda);

list3 = (RadioButton)this.findViewById(R.id.jangkrik);

list4 = (RadioButton)this.findViewById(R.id.gajah);

}

Setelah nama pengenal dibuat maka akan dijelaskan lebih spesiikasinya bahwa setiap list memiliki id yang berbeda – beda yang dimana id ini mengarah kepada pembuatan dari menu radio button yang terdapat pada file.xml.

@Override

public void onClick(View v){

switch(v.getId()){

case R.id.next:

if (list1.isChecked()) {

Intent arumba = new Intent(this, sapi.class);

startActivity(sapi);                 

}

if (list2.isChecked()) {

Intent kecapi = new Intent(this, kuda.class);

startActivity(kuda);               

}

break;

case R.id.back:

finish();

break;            

}

}

}

Ini adalah fungsi klik, bisa dijelaskan jika kita memilih next diantara empat list yang tersedia maka dari list yang telah dipilih akan menuju ke class java yang baru. Seperti pada codingan diatas. Jika list 1 di pilih maka akan menuju ke class sapi.java, dan jika list 2 dipilih maka akan menuju ke class kuda.java dan jika memilih tombol maka akan kembali ke menu tampilan home aplikasi. Berikut ini output dari kodingan Menu Herbivora di atas:

Gambar 19 Output Menu Herbivora

5.4    Kode XML dalam Pembuatan Menu Info Hewan

"1.0" encoding="utf-8"?>

android:id="@+id/widget64"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:background="@drawable/kar2"

xmlns:android="http://schemas.android.com/apk/res/android">

Ini gunakan untuk tampilam backgroud menu yang dihasilkan pada emulator android secara default. Penulis menambahkan background agar aplikasi terlihat menarik.

android:id="@+id/sapi"

android:layout_width="200px"

android:layout_height="100px"

android:background="@drawable/sapi"

android:layout_x="20px"

android:layout_y="5px">

Membuat gambar sapi pada tampilan menu sapi.

android:id="@+id/playsapi"

android:layout_width="90px"

android:layout_height="40px"

android:text="Play"

android:textSize="15sp"

android:textStyle="bold"

android:gravity="center"

android:layout_x="20px"

android:layout_y="110px">

android:id="@+id/stopsapi"

android:layout_width="90px"

android:layout_height="40px"

android:text="Stop"

android:textSize="15sp"

android:textStyle="bold"

android:gravity="center"

android:layout_x="130px"

android:layout_y="110px">

Pembuatan Button Play dan Stop

Button Play digunakan untuk mendengarkan suara. Sedangkan Button Stop digunakan untuk berhenti mendengarkan suara. Berikut adalah output sapi.xml:

Gambar 20 Output Menu Sapi

5.5        Kode XML dalam Pembuatan Menu Tentang

"1.0" encoding="utf-8"?>

android:id="@+id/widget0"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:background="@drawable/tentang"

xmlns:android="http://schemas.android.com/apk/res/android">

android:id="@+id/widget37"

android:layout_width="220px"

android:layout_height="wrap_content"

android:text="Tentang"

android:textColor="#ff000000"

android:textStyle="bold"

android:gravity="center"

android:textSize="16sp"

android:layout_x="10px"

android:layout_y="35px">

android:id="@+id/widget38"

android:layout_width="200px"

android:layout_height="wrap_content"

android:gravity="left"

android:text="Aplikasi sederhana ini ditujukan untuk pelajar Sekolah Dasar. Aplikasi ini memberikan informasi kepada anak-anak untuk mengenal penggolongan hewan berdasarkan jenis makanannya beserta suaraa hewan tersebut."

android:textColor="#ff000000"

android:textStyle="bold"

android:layout_x="20px"

android:layout_y="65px">

android:id="@+id/widget39"

android:layout_width="220px"

android:layout_height="wrap_content"

android:text=" Created by :"

android:textColor="#ff000000"

android:textStyle="bold"

android:gravity="center"

android:layout_x="10px"

android:layout_y="170px">

android:id="@+id/widget40"

android:layout_width="220px"

android:layout_height="wrap_content"

android:text="HILDA RUSDI (50408442)"

android:textColor="#ff000000"

android:textStyle="bold"

android:gravity="center"

android:layout_x="10px"

android:layout_y="185px">

android:id="@+id/back"

android:layout_width="100px"

android:layout_height="40px"

android:text="Back"

android:textStyle="bold"

android:layout_x="70px"

android:layout_y="240px">

Pada dasarnya yang harus dilakukan hanyalah melakukan override pada method onCreate dan mengatur layout yang digunakan pada kelas Menu yang diambil dari folder res/layout berisi tampilan yang sudah dibuat pada file about.xml. Berikut ini output dari beberapa kode pembuatan tampilan menu tentang  di atas:

Gambar 21 Output Menu Tentang

6      Setting Pada Ponsel

Langkah-langkah yang kita lakukan dalam setting game yang kita buat pada handphone android :

·            Melalui Android Market

1.      Salin file APK ke dalam kartu memori ponsel Android dan masukkan kartu memori tersebut ke dalam ponsel.

2.      Unduh dan instal aplikasi Apps Installer di Android Market.   

3.      Setelah diinstal, aplikasi Apps Installer akan menampilkan beberapa file APK yang ada di dalam kartu memori. 

4.       Klik file APK yang ingin diinstal maka setting pada handpone selesai.

·            Melalui android SDK

1.      Setelah kita install  android SDK dan android USB

2.      Ubah settingan pada ponsel Android untuk mengizinkan instalasi aplikasi dari sumber daya lain. Pada menu “Setting” di ponsel Android pilih “Application Settings” dan aktifkan “Unknown Sources”. Lalu pada menu “Setting” pilih “SD Card” dan “Phone Storage” serta aktifkan “Disable Use for USB Storage”.

3.       Langkah terakhir, buka Command Prompt Windows dan ketikkan “adb install <1>/<2>.apk”.

4.      Ganti <1> dengan path yang menuju ke file APK tersimpan dan ganti <2> dengan nama file APK, sebagai contoh adb install c:\workspace\musicplayer\bin\musicplayer.apk.

5.      Selesai, sekarang aplikasi sudah terpasang pada ponsel Android dan siap digunakan.

7    Menjalankan Aplikasi pada Ponsel

Untuk menjalankan aplikasi pada handphone konsepnya hampir sama pada emulator. Berhubung di sini, penulis tidak memiliki handphone android maka penulis menggunakan emulator.

8    Menjalankan Aplikasi pada Emulator

Langkah-langkah yang kita lakukan untuk membuka emulator pada game yang kita buat ialah :

1.      Klik icon Android SDK dan AVD Manager seperti dibawah ini

2.    Setelah itu kita pilih AVD yang kita inginkan

Gambar 22  Tampilan SDK Manager 

3.   Setelah itu kita klik start maka akan  muncul emulator android 2.2 yang kita pilih

Gambar 23 Tampilan Android Emulator 2.2

4.   Setelah itu akan muncul menu home yang akan kita pilih 

Gambar 24 Tampilan Menu Home

5.   Kemudian masuk ke aplikasi yang kita buat

Gambar 25 Tampilan Menu Utama

Gambar 26 Tampilan Menu Mulai

Gambar 27 Tampilan Menu Jenis Hewan dan Info

Gambar 28 Tampilan Menu Hewan, Info, dan Suara

Gambar 29 Tampilan Menu Tentang