azariansyah.files.wordpress.com · Web viewAndroidManifest.xml digunakan sebagai pengatur...

35
BAB III PEMBAHASAN Dalam proses pembuatan Aplikasi Streaming Radio Berbasis Ponsel Android Menggunakan Java, penulis melakukan beberapa tahapan yang dikerjakan secara berurutan dan mengikuti prosedur yang berlaku seperti sebagai berikut : Gambar 3.1 Tahap Pembuatan Aplikasi 40 Menentukan peta navigasi yang akan digunakan dalam aplikasi Pembentukan elemen yang akan digunakan dalam aplikasi menggunakan software yang berkaitan Proses kompilasi hingga menjadi program utuh Penyimpanan terakhir & mempublikasikan aplikasi Pengujian aplikasi yang dilakukan pada beberapa ponsel Android

Transcript of azariansyah.files.wordpress.com · Web viewAndroidManifest.xml digunakan sebagai pengatur...

Page 1: azariansyah.files.wordpress.com · Web viewAndroidManifest.xml digunakan sebagai pengatur activity-activity pada aplikasi yang terdiri atas daftar class java, penggunaan intent serta

BAB III

PEMBAHASAN

Dalam proses pembuatan Aplikasi Streaming Radio Berbasis Ponsel

Android Menggunakan Java, penulis melakukan beberapa tahapan yang

dikerjakan secara berurutan dan mengikuti prosedur yang berlaku seperti sebagai

berikut :

Gambar 3.1 Tahap Pembuatan Aplikasi

40

Menentukan peta navigasi yang akan digunakan dalam aplikasi

Pembentukan elemen yang akan digunakan dalam aplikasi

menggunakan software yang berkaitan

Proses kompilasi hingga menjadi program utuh

Penyimpanan terakhir & mempublikasikan aplikasi

Pengujian aplikasi yang dilakukan pada beberapa ponsel Android

Page 2: azariansyah.files.wordpress.com · Web viewAndroidManifest.xml digunakan sebagai pengatur activity-activity pada aplikasi yang terdiri atas daftar class java, penggunaan intent serta

41

3.1. Struktur Navigasi

Struktur Navigasi adalah struktur atau alur dari suatu program. Navigasi

merupakan salah satu hal yang sangat penting dalam pembuatan suatu aplikasi

berbasis multimedia. Peta Navigasi harus sudah digambarkan pada tahap

perencanaan pembuatan suatu aplikasi, karena menggambarkan suatu hubungan

atau rantai kerja dari beberapa area ataupun halaman yang berbeda. Dan dengan

adanya struktur Navigasi sebagai patokan dalam pembuatan sebuah aplikasi, maka

pembuat dapat mengorganisasikan seluruh elemen aplikasi multimedia dengan

pemberian perintah dan pesan. Berikut ini adalah Peta Navigasi yang digunakan

penulis dalam pembuatan Aplikasi Streaming Radio Berbasis Ponsel Android

Menggunakan Java :

Gambar 3.2 Struktur Navigasi

Struktur navigasi yang ada pada aplikasi ini sering disebut struktur

navigasi bercabang (hirarki). Struktur navigasi ini merupakan suatu struktur yang

mengandalkan percabangan untuk menampilkan data dengan kriteria tertentu.

Tampilan pada menu utama disebut master page (halaman utama satu), halaman

tersebut mempunyai halaman percabangan yang disebut slave page (halaman

pendukung).

Page 3: azariansyah.files.wordpress.com · Web viewAndroidManifest.xml digunakan sebagai pengatur activity-activity pada aplikasi yang terdiri atas daftar class java, penggunaan intent serta

42

3.2. Rancangan Interface

Dalam suatu program, sangat penting untuk memperhatikan suatu sistem

user interface yang dapat dimengerti oleh semua orang yang menggunakannya.

3.2.1. Rancangan Splash Screen

Berikut adalah tampilan yang dirancang untuk bagian splash screen.

Gambar 3.3 Rancangan Antar Muka Splash Screen

Pada saat aplikasi dijalankan yang pertama akan tampil adalah splash screen.

Tampilan splash screen ini terdiri dari background, image dan judul aplikasi.

3.2.2. Rancangan Menu Utama

Berikut adalah tampilan yang dirancang untuk bagian menu utama.

Page 4: azariansyah.files.wordpress.com · Web viewAndroidManifest.xml digunakan sebagai pengatur activity-activity pada aplikasi yang terdiri atas daftar class java, penggunaan intent serta

43

Gambar 3.4 Rancangan Menu Utama

Pada Gambar 3.4 merupakan rancangan menu utama dimana pada

tampilan menu utama ini terdapat tiga buah tombol yaitu “Play”, “Info” dan

“Keluar”.

3.2.3. Rancangan Daftar Saluran Radio

Gambar 3.5 Rancangan Daftar Saluran Radio

Page 5: azariansyah.files.wordpress.com · Web viewAndroidManifest.xml digunakan sebagai pengatur activity-activity pada aplikasi yang terdiri atas daftar class java, penggunaan intent serta

44

Pada Gambar 3.5 merupakan rancangan pilihan saluran dimana pada

tampilan ini terdapat 11 buah tombol pilihan saluran dan scrollbar, pengguna

hanya tinggal menyentuh saja salah satu saluran yang akan di dengar radionya.

3.2.4. Rancangan Kotak Pesan Info

Gambar 3.6 Rancangan Kotak Pesan Info

Pada Gambar 3.6 merupakan rancangan kotak pesan “Info” dimana pada

tampilan ini terdapat satu tombol “OK”, dan berisi pesan tentang penulis.

3.2.5. Rancangan Pemutar Streaming

Gambar 3.7 Rancangan Pemutar Streaming

Page 6: azariansyah.files.wordpress.com · Web viewAndroidManifest.xml digunakan sebagai pengatur activity-activity pada aplikasi yang terdiri atas daftar class java, penggunaan intent serta

45

Pada Gambar 3.7 merupakan rancangan pemutar streaming dimana pada

tampilan ini terdapat dua buah tombol yang salah satunya adalah tombol ”play”

untuk mendengarkan langsung saluran radio yang dipilih dan tombol ”stop” untuk

menghentikan streaming radio online.

3.3. Pembuatan Aplikasi

Pada tahapan ini akan dijelaskan tentang pembuatan aplikasi streaming

radio secara garis besar dengan menggunakan program Eclipse Galileo yang

didalamnya sudah terinstal Android SDK dan ADT yang dimulai dari pengkodean

menu utama, dan lain sebagainya. Tentukan terlebih dahulu saluran apa saja yang

nantinya akan di masukan ke dalam daftar pilihan saluran streaming radio lalu

siapkan gambar-gambar yang nantinya akan di masukan sebagai elemen dari

aplikasi. Dalam tahap ini akan dibuat 14 file Java dan empat file .xml. File Java

tersebut terdiri dari sebelas Java untuk saluran-saluran radio, satu file Java untuk

menu, satu file Java untuk splash screen, dan satu file Java untuk pilihan saluran,

lalu untuk file .xml terdiri dari channel.xml untuk tampilan pilihan saluran,

menu.xml untuk tampilan menu, splash.xml untuk tampilan splash screen, dan

streaming.xml untuk tampilan pemutar streaming. Berikut ini adalah tahapan

pembuatan aplikasi radio streaming :

3.3.1. Tahap Pembuatan Splash Screen

Dalam tahap ini, terdapat penulisan kode program untuk membuat

halaman splash screen.

1. Klik Start > All Programs > Eclipse

2. Pada jendela Eclipse, pilih File > New > Android Project

Gambar 3.8 New Project

Page 7: azariansyah.files.wordpress.com · Web viewAndroidManifest.xml digunakan sebagai pengatur activity-activity pada aplikasi yang terdiri atas daftar class java, penggunaan intent serta

46

3. Akan muncul jendela New Android Project, biarkan semua diatur secara

default, kemudian isi field pada bagian properties. Application Name :

Streaming Radio, Package Name : com.radio.streaming, Create Acticity :

SplashScreen dan ceklist, kemudaian Min SDK Version : 8 > Klik Finish.

Gambar 3.9 Membuat Baru Android Project

4. Selanjutnya adalah pembuatan kelas dalam Java dengan nama

SplashScreen.java, agar saat dijalankan tampilan splash screen muncul. Klik

dua kali Streaming Radio pada tab “Pack” > Klik dua kali src > Klik kanan

com.radio.streaming > Pilih New > Class.

Gambar 3.10 New Class

Page 8: azariansyah.files.wordpress.com · Web viewAndroidManifest.xml digunakan sebagai pengatur activity-activity pada aplikasi yang terdiri atas daftar class java, penggunaan intent serta

47

5. Akan muncul jendela baru lagi, kemudian isi field Source Folder : Streaming

Radio/src, Package : com.radio.streaming, Name : SplashScreen > Klik Finish.

Gambar 3.11 Jendela Create New Java Class

6. Klik dua kali SplashScreen.java lalu isikan kode program seperti yang ada di

lampiran. Berikut adalah kode program SplashScreen.java.

public class SplashScreen extends Activity {protected int _splashTime = 5000; private Thread splashTread;/** Called when the activity is first created. */@Overridepublic void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.splash); final SplashScreen sPlashScreen = this; // thread for displaying the SplashScreen splashTread = new Thread() { @Override public void run() { try {synchronized(this){ wait(_splashTime);} } catch(InterruptedException e) {} finally { finish(); Intent i = new Intent(); i.setClass(sPlashScreen, Menu.class); startActivity(i);

Page 9: azariansyah.files.wordpress.com · Web viewAndroidManifest.xml digunakan sebagai pengatur activity-activity pada aplikasi yang terdiri atas daftar class java, penggunaan intent serta

48

stop();}}}; splashTread.start();}@Overridepublic boolean onTouchEvent(MotionEvent event) { if (event.getAction() == MotionEvent.ACTION_DOWN) { synchronized(splashTread){ splashTread.notifyAll();}} return true;}}

7. Kemudian dilanjutkan dengan pembuatan layout dalam bentuk file .xml untuk

desain dari tampilan splash screen. Klik dua kali Streaming Radio pada tab

“Pack” > Klik dua kali res > Klik kanan Layout > Pilih New > Android XML

File.

Gambar 3.12 Membuat File .XML

8. Akan muncul jendela New Android XML File. Isi field Project : Streaming

Radio, File : splash > Klik Finish.

Page 10: azariansyah.files.wordpress.com · Web viewAndroidManifest.xml digunakan sebagai pengatur activity-activity pada aplikasi yang terdiri atas daftar class java, penggunaan intent serta

49

Gambar 3.13 Jendela New Android XML File

9. Kemudian klik dua kali splash.xml lalu isikan kode program seperti yang ada

di lampiran. Berikut adalah kode program splash.xml.

<?xml version="1.0" encoding="utf-8"?><LinearLayout

xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:background="@color/blueish" android:layout_height="fill_parent"> <ImageView android:src="@drawable/android" android:id="@+id/imageView1" android:layout_width="fill_parent" android:layout_height="fill_parent"> </ImageView>

</LinearLayout>

Berikut ini adalah tampilan splash screen yang telah dibuat.

Page 11: azariansyah.files.wordpress.com · Web viewAndroidManifest.xml digunakan sebagai pengatur activity-activity pada aplikasi yang terdiri atas daftar class java, penggunaan intent serta

50

Gambar 3.14 Tampilan Splash Screen

3.3.2. Tahap Pembuatan Menu Utama dan Kotak Pesan Info

Dalam tahap ini akan dijelaskan pembuatan halaman menu utama dimulai

dari pembuatan kelas baru Menu.java dan sekaligus membuat kotak pesan “Info”.

Berikut ini adalah tahap pembuatan halaman menu.

1. Pertama adalah pembuatan kelas dalam Java dengan nama Menu.java, agar

saat dijalankan tampilan menu muncul. Klik dua kali Streaming Radio pada

tab “Pack” > Klik dua kali src > Klik kanan com.radio.streaming > Pilih New

> Class.

2. Akan muncul jendela baru lagi, kemudian isi field Source Folder : Streaming

Radio/src, Package : com.radio.streaming, Name : Menu > Klik Finish.

3. Klik dua kali Menu.java lalu isikan kode program seperti yang ada di

lampiran. Berikut adalah kode program dari Menu.java.public class Menu extends Activity implements OnClickListener{public static final int DIALOG_ABOUT_ID = 0;

@Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.menu);

findViewById(R.id.button_mulai).setOnClickListener(this);findViewById(R.id.button_info).setOnClickListener(this);findViewById(R.id.button_keluar).setOnClickListener(this);}

public void onClick(View v) { switch(v.getId()) {

Page 12: azariansyah.files.wordpress.com · Web viewAndroidManifest.xml digunakan sebagai pengatur activity-activity pada aplikasi yang terdiri atas daftar class java, penggunaan intent serta

51

case R.id.button_mulai: Intent i = new Intent(this, Channel.class); startActivity(i); break; case R.id.button_info:

showDialog(DIALOG_ABOUT_ID); break;

case R.id.button_keluar: {new AlertDialog.Builder(this) .setMessage ("are you sure?") .setPositiveButton("Yes",new

DialogInterface.OnClickListener() {public void onClick(DialogInterface dig,int sumthin) {Menu.this.finish(); }}) .setNegativeButton("No",new

DialogInterface.OnClickListener () { public void onClick(DialogInterface dig,int sumthin){

}}) .show();} break;}} @Override protected Dialog onCreateDialog(int id) { Dialog dialog; AlertDialog.Builder builder = new

AlertDialog.Builder(this); switch(id) { case DIALOG_ABOUT_ID: builder.setMessage(R.string.about_text) .setCancelable(false) .setNeutralButton(R.string.ok, new

DialogInterface.OnClickListener() { public void onClick(DialogInterface dialog, int

which) { dialog.dismiss(}}); dialog = builder.create(); break; default: dialog = null;} return dialog;}}

4. Kemudian dilanjutkan dengan pembuatan layout dalam bentuk file .xml untuk

desain dari tampilan menu. Klik dua kali Streaming Radio pada tab “Pack” >

Klik dua kali res > Klik kanan Layout > Pilih New > Android XML File.

5. Akan muncul jendela New Android XML File. Isi field Project : Streaming

Radio, File : menu > Klik Finish.

6. Kemudian klik dua kali menu.xml lalu isikan kode program seperti yang ada

di lampiran. Berikut adalah kode program menu.xml.

Page 13: azariansyah.files.wordpress.com · Web viewAndroidManifest.xml digunakan sebagai pengatur activity-activity pada aplikasi yang terdiri atas daftar class java, penggunaan intent serta

52

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_height="fill_parent" android:layout_width="fill_parent" android:padding="60dip" android:orientation="horizontal" android:background="@drawable/background" android:gravity="center_vertical"> <LinearLayout android:id="@+id/linearLayout1" android:orientation="vertical" android:layout_height="wrap_content" android:layout_width="fill_parent" android:layout_gravity="center"> <LinearLayout android:id="@+id/linearLayout2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="MENU" android:layout_marginBottom="10px" android:layout_gravity="center"> </LinearLayout> <Button android:id="@+id/button_mulai" android:layout_width="118px" android:layout_height="30px" android:layout_margin="5px" android:layout_gravity="center" android:background="@drawable/mulai_aplikasi"></Button> <Button android:id="@+id/button_info" android:layout_width="118px" android:layout_height="30px" android:layout_margin="5px" android:layout_gravity="center" android:background="@drawable/info_aplikasi"></Button> <Button android:id="@+id/button_keluar" android:layout_width="118px" android:layout_height="30px" android:layout_margin="5px" android:layout_gravity="center" android:background="@drawable/keluar_aplikasi"></Button></LinearLayout> </LinearLayout>

Berikut ini adalah tampilan halaman menu dan info yang telah dibuat.

Page 14: azariansyah.files.wordpress.com · Web viewAndroidManifest.xml digunakan sebagai pengatur activity-activity pada aplikasi yang terdiri atas daftar class java, penggunaan intent serta

53

Gambar 3.15 Tampilan Menu Utama dan Info

3.3.3 Tahap Pembuatan Daftar Saluran Radio

Dalam tahap ini akan dijelaskan pembuatan halaman daftar saluran radio

dimulai dari pembuatan kelas baru Channel.java.

1. Kemudian langkah selanjutnya adalah membuat kelas lagi dibawah kelas

Menu.java, klik dua kali Streaming Radio pada tab “Pack” > Klik dua kali src

> Klik kanan com.radio.streaming > Pilih New > Class.

2. Akan muncul jendela baru lagi, kemudian isi field Source Folder : Streaming

Radio/src, Package : com.radio.streaming, Name : Channel > Klik Finish.

3. Klik dua kali Channel.java lalu isikan kode program seperti yang ada di

lampiran. Berikut adalah kode program dari Channel.java.

public class Channel extends Activity implements OnClickListener {private static final String isPlaying = "Ini Streaming

Radio";

private MediaPlayer player;Button image1, image2, image3, image4, image5, image6,

image7, image8, image9, image10, image11; /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.coba); image1 = (Button)findViewById(R.id.button1);image2 = (Button)findViewById(R.id.button2);

Page 15: azariansyah.files.wordpress.com · Web viewAndroidManifest.xml digunakan sebagai pengatur activity-activity pada aplikasi yang terdiri atas daftar class java, penggunaan intent serta

54

image3 = (Button)findViewById(R.id.button3);image4 = (Button)findViewById(R.id.button4);image5 = (Button)findViewById(R.id.button5);image6 = (Button)findViewById(R.id.button6);image7 = (Button)findViewById(R.id.button7);image8 = (Button)findViewById(R.id.button8);image9 = (Button)findViewById(R.id.button9);image10 = (Button)findViewById(R.id.button10);image11 = (Button)findViewById(R.id.button11);

image1.setOnClickListener(this);image2.setOnClickListener(this);image3.setOnClickListener(this);image4.setOnClickListener(this);image5.setOnClickListener(this);image6.setOnClickListener(this);image7.setOnClickListener(this);image8.setOnClickListener(this);image9.setOnClickListener(this);image10.setOnClickListener(this);image11.setOnClickListener(this);}

public void onClick(View v) {// TODO Auto-generated method stubswitch(v.getId()) {case R.id.button1:

Intent i = new Intent(this, com.radio.streaming.list.rri.class);

startActivity(i);break;

case R.id.button2:Intent i2 = new Intent(this,

com.radio.streaming.list.kiss.class);startActivity(i2);break;

case R.id.button3:Intent i3 = new Intent(this,

com.radio.streaming.list.kaskus.class);startActivity(i3);break;

case R.id.button4:Intent i4 = new Intent(this,

com.radio.streaming.list.rpk.class);startActivity(i4);break;

case R.id.button5:Intent i5 = new Intent(this,

com.radio.streaming.list.gitabali.class);startActivity(i5);break;

case R.id.button6:Intent i6 = new Intent(this,

com.radio.streaming.list.alhikmah.class);startActivity(i6);break;

case R.id.button7:

Page 16: azariansyah.files.wordpress.com · Web viewAndroidManifest.xml digunakan sebagai pengatur activity-activity pada aplikasi yang terdiri atas daftar class java, penggunaan intent serta

55

Intent i7 = new Intent(this, com.radio.streaming.list.kusuma.class);

startActivity(i7);break;

case R.id.button8:Intent i8 = new Intent(this,

com.radio.streaming.list.starradio.class);startActivity(i8);break;

case R.id.button9:Intent i9 = new Intent(this,

com.radio.streaming.list.topfm.class);startActivity(i9);break;

case R.id.button10:Intent i10 = new Intent(this,

com.radio.streaming.list.rdi.class);startActivity(i10);break;

case R.id.button11:Intent i11 = new Intent(this,

com.radio.streaming.list.suaramadu.class);startActivity(i11);break;

}}}

4. Kemudian dilanjutkan dengan pembuatan layout dalam bentuk file .xml untuk

desain dari tampilan halaman daftar saluran radio. Klik dua kali Streaming

Radio pada tab “Pack” > Klik dua kali res > Klik kanan Layout > Pilih New >

Android XML File.

5. Akan muncul jendela New Android XML File. Isi field Project : Streaming

Radio, File : channel > Klik Finish.

6. Kemudian klik dua kali channel.xml lalu isikan kode program seperti yang

ada di lampiran. Berikut adalah kode program channel.xml.<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="1" android:background="#B4EEFD" android:gravity="center_horizontal|center_vertical" android:orientation="vertical"> <ScrollView android:id="@+id/horizontalScrollView1" android:layout_width="wrap_content" android:layout_height="wrap_content"> <LinearLayout android:layout_width="match_parent" android:id="@+id/linearLayout1" android:layout_height="match_parent"

Page 17: azariansyah.files.wordpress.com · Web viewAndroidManifest.xml digunakan sebagai pengatur activity-activity pada aplikasi yang terdiri atas daftar class java, penggunaan intent serta

56

android:orientation="vertical"> <Button android:id="@+id/button1" android:layout_width="238px" android:layout_height="100px" android:background="@drawable/rri"></Button> <Button android:id="@+id/button2" android:layout_width="238px" android:layout_height="100px" android:background="@drawable/kiss"></Button> <Button android:id="@+id/button3" android:layout_width="238px" android:layout_height="100px" android:background="@drawable/kaskus"></Button> <Button android:id="@+id/button4" android:layout_width="238px" android:layout_height="100px" android:background="@drawable/rpk"></Button> <Button android:id="@+id/button5" android:layout_width="238px" android:layout_height="100px" android:background="@drawable/gitabali"></Button> <Button android:id="@+id/button6" android:layout_width="238px" android:layout_height="100px" android:background="@drawable/alhikmah"></Button> <Button android:id="@+id/button7" android:layout_width="238px" android:layout_height="100px" android:background="@drawable/kusuma"></Button> <Button android:id="@+id/button8" android:layout_width="238px" android:layout_height="100px" android:background="@drawable/starradio"></Button> <Button android:id="@+id/button9" android:layout_width="238px" android:layout_height="100px" android:background="@drawable/topfm"></Button> <Button android:id="@+id/button10" android:layout_width="238px" android:layout_height="100px" android:background="@drawable/rdi"></Button> <Button android:id="@+id/button11" android:layout_width="238px" android:layout_height="100px" android:background="@drawable/suaramadu"></Button> </LinearLayout> </ScrollView></LinearLayout>

Berikut ini adalah tampilan halaman daftar saluran radio yang telah dibuat.

Page 18: azariansyah.files.wordpress.com · Web viewAndroidManifest.xml digunakan sebagai pengatur activity-activity pada aplikasi yang terdiri atas daftar class java, penggunaan intent serta

57

Gambar 3.16 Tampilan Daftar Saluran Radio

3.3.4 Tahap Pembuatan Pemutar Streaming

Tahap ini akan dijelaskan bagaimana membuat halaman pemutar

streaming. Dalam halaman ini terdapat dua tombol yaitu “play” dan “stop”.

Sebelumnya dibuat dahulu paket baru untuk saluran-saluran yang akan

dimasukkan. Berikut ini adalah tahap-tahap pembuatannya:

1. Klik dua kali Streaming Radio pada tab “Pack” > Klik dua kali src > Klik

kanan com.radio.streaming> Pilih New > Package.

Gambar 3.17 Jendela Create New Package

Page 19: azariansyah.files.wordpress.com · Web viewAndroidManifest.xml digunakan sebagai pengatur activity-activity pada aplikasi yang terdiri atas daftar class java, penggunaan intent serta

58

2. Akan muncul jendela baru lagi, kemudian isi field Source Folder : Streaming

Radio/src, Name : com.radio.streaming.list > Klik Finish.

Gambar 3.18 Jendela Create New Package 2

3. Buat kelas baru dengan nama RRI.java, klik dua kali Streaming Radio pada

tab “Pack” > Klik dua kali src > Klik kanan com.radio.streaming.list > Pilih

New > Class.

4. Akan muncul jendela baru lagi, kemudian isi field Source Folder : Streaming

Radio/src, Package : com.radio.streaming.list, Name : RRI > Klik Finish.

5. Buatlah 10 kelas lagi dengan langkah yang sama dari langkah 1. Kelas

tersebut adalah alhikmah, gitabali, kaskus, kiss, kusuma, rdi, rpk, starradio,

top, dan suaramadu.

Gambar 3.19 Kelas-kelas Radio

Page 20: azariansyah.files.wordpress.com · Web viewAndroidManifest.xml digunakan sebagai pengatur activity-activity pada aplikasi yang terdiri atas daftar class java, penggunaan intent serta

59

6. Klik dua kali file-file .java yang telah dibuat, isikan kode program pada

masing-masing file tersebut sesuai dengan nama filenya dari lampiran

penulisan.

Berikut ini contoh script kelas java yang di ambil dari rri.java :

public class rri extends Activity implements OnClickListener, OnTouchListener, OnCompletionListener, OnBufferingUpdateListener{ private Button btn_play,btn_stop;private SeekBar seekBar;private MediaPlayer mediaPlayer;private int lengthOfAudio;private final String URL = "http://125.163.79.184:8010";private final Handler handler = new Handler();private final Runnable r = new Runnable() {@Overridepublic void run() {updateSeekProgress(); }};

/** Called when the activity is first created. */@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.stream);init();}

private void init() {btn_play = (Button)findViewById(R.id.btn_play);btn_play.setOnClickListener(this);btn_stop = (Button)findViewById(R.id.btn_stop);btn_stop.setOnClickListener(this);btn_stop.setEnabled(false);

seekBar = (SeekBar)findViewById(R.id.seekBar);seekBar.setOnTouchListener(this);mediaPlayer = new MediaPlayer();mediaPlayer.setOnBufferingUpdateListener(this);mediaPlayer.setOnCompletionListener(this);}

@Overridepublic void onBufferingUpdate(MediaPlayer mediaPlayer, int percent) {seekBar.setSecondaryProgress(percent);}

@Overridepublic void onCompletion(MediaPlayer mp) {btn_play.setEnabled(true);btn_stop.setEnabled(false);}

@Overridepublic boolean onTouch(View v, MotionEvent event) {if (mediaPlayer.isPlaying()) {SeekBar tmpSeekBar = (SeekBar)v;

Page 21: azariansyah.files.wordpress.com · Web viewAndroidManifest.xml digunakan sebagai pengatur activity-activity pada aplikasi yang terdiri atas daftar class java, penggunaan intent serta

60

mediaPlayer.seekTo((lengthOfAudio/100)*tmpSeekBar.getProgress() )}return false;}

@Overridepublic void onClick(View view) {try {mediaPlayer.setDataSource(URL);mediaPlayer.prepare();lengthOfAudio = mediaPlayer.getDuration();} catch (Exception e) {//Log.e("Error", e.getMessage());}

switch (view.getId()) {case R.id.btn_play:playAudio();break;case R.id.btn_stop:stopAudio();break;default:break;}updateSeekProgress();}

private void updateSeekProgress() {if (mediaPlayer.isPlaying()) {seekBar.setProgress((int)(((float)mediaPlayer.getCurrentPosition() / lengthOfAudio) * 100));handler.postDelayed(r, 1000);}}

private void stopAudio() {mediaPlayer.stop();btn_play.setEnabled(true);btn_stop.setEnabled(false);seekBar.setProgress(0);}

private void playAudio() {mediaPlayer.start();btn_play.setEnabled(false);btn_stop.setEnabled(true);}

@Overridepublic void onBackPressed() { // It's expensive, if running turn it off.mediaPlayer.stop();btn_play.setEnabled(false);btn_stop.setEnabled(false); hideKeyboard(); super.onBackPressed();}

private void hideKeyboard() {// TODO Auto-generated method stub}}

7. Kemudian dilanjutkan dengan pembuatan layout dalam bentuk file .xml untuk

desain dari tampilan halaman pemutar streaming. Klik dua kali Streaming

Page 22: azariansyah.files.wordpress.com · Web viewAndroidManifest.xml digunakan sebagai pengatur activity-activity pada aplikasi yang terdiri atas daftar class java, penggunaan intent serta

61

Radio pada tab “Pack” > Klik dua kali res > Klik kanan Layout > Pilih New >

Android XML File.

8. Akan muncul jendela New Android XML File. Isi field Project : Streaming

Radio, File : streaming > Klik Finish.

9. Kemudian klik dua kali streaming.xml lalu isikan kode program seperti yang

ada di lampiran. Berikut adalah kode program streaming.xml.<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="1" android:background="@drawable/background_player" android:gravity="center_horizontal|center_vertical" android:orientation="vertical"><TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:textColor="#000000" android:text="@string/hello" /><LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:gravity="center_horizontal" android:layout_marginTop="5dp"><Button android:text="play" android:id="@+id/btn_play" android:layout_width="90dp" android:layout_height="wrap_content"></Button>

<Button android:text="stop" android:id="@+id/btn_stop" android:layout_width="90dp" android:layout_height="wrap_content"></Button></LinearLayout><SeekBar android:layout_height="wrap_content" android:layout_width="match_parent" android:layout_margin="3dp" android:id="@+id/seekBar"></SeekBar></LinearLayout>

Berikut ini adalah tampilan halaman streaming yang telah jadi.

Page 23: azariansyah.files.wordpress.com · Web viewAndroidManifest.xml digunakan sebagai pengatur activity-activity pada aplikasi yang terdiri atas daftar class java, penggunaan intent serta

62

Gambar 3.20 Tampilan Halaman Streaming

3.3.5 Tahap Pembuatan Kode AndroidManifest.xml

Android Manifest merupakan sebuah xml yang berisi informasi mengenai

aplikasi seperti versi aplikasi, nama package, SDK yang digunakan, icon serta

nama aplikasi. AndroidManifest.xml digunakan sebagai pengatur activity-activity

pada aplikasi yang terdiri atas daftar class java, penggunaan intent serta

pemberian label/tittle suatu activity. Pada AndroidManifest.xml masukan kode

program yang ada di lampiran program. Berikut adalah kode program

AndroidManifest.xml pada Aplikasi Streaming Radio.<?xml version="1.0" encoding="utf-8"?><manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.radio.streaming" android:versionCode="1" android:versionName="1.0"> <uses-sdk android:minSdkVersion="8" />

Elemen <manifest> merupakan titik root utama dari AndroidManifest.xml yang

berisi package aplikasi ini, yaitu halo.basic.photo dan activity yang ada di dalam

program ini. Pada pembuatan Aplikasi Streaming Radio ini juga menggunakan

tampilan dari ponsel Android itu sendiri. Untuk menggunkan fitur yang terdapat

pada ponsel Android tersebut dibutuhkan permissions. Hal ini sangat dibutuhkan

untuk membuat aplikasi yang menggunakan intent. <uses-sdk

Android:minSdkVersion="8" /> mendeklarasikan sdk Android yang digunakan,

karena aplikasi ini menggunakan versi Android 2.3, maka sdk versionnya ialah 8.

Page 24: azariansyah.files.wordpress.com · Web viewAndroidManifest.xml digunakan sebagai pengatur activity-activity pada aplikasi yang terdiri atas daftar class java, penggunaan intent serta

63

<application android:icon="@drawable/icon" android:label="@string/app_name">

<activity android:name=".SplashScreen" android:theme="@android:style/Theme.Black.NoTitleBar.Fullscreen" android:label="@string/app_name"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> <activity android:name="com.radio.streaming.Channel" android:label="@string/app_name"> </activity> <activity android:name="com.radio.streaming.Menu" android:label="@string/app_name"> </activity> <activity android:name="com.radio.streaming.list.rri" android:label="@string/rri"> </activity> <activity android:name="com.radio.streaming.list.kiss" android:label="@string/kiss"> </activity> <activity android:name="com.radio.streaming.list.kaskus" android:label="@string/kaskus"> </activity> <activity android:name="com.radio.streaming.list.rpk" android:label="@string/rpk"> </activity> <activity android:name="com.radio.streaming.list.gitabali" android:label="@string/gitabali"> </activity> <activity android:name="com.radio.streaming.list.alhikmah" android:label="@string/alhikmah"> </activity> <activity android:name="com.radio.streaming.list.kusuma" android:label="@string/kusuma"> </activity> <activity android:name="com.radio.streaming.list.starradio" android:label="@string/starradio"> </activity> <activity android:name="com.radio.streaming.list.topfm" android:label="@string/topfm"> </activity> <activity android:name="com.radio.streaming.list.rdi" android:label="@string/rdi"> </activity> <activity android:name="com.radio.streaming.list.suaramadu" android:label="@string/suaramadu"> </activity> </application></manifest>

Page 25: azariansyah.files.wordpress.com · Web viewAndroidManifest.xml digunakan sebagai pengatur activity-activity pada aplikasi yang terdiri atas daftar class java, penggunaan intent serta

64

Perlu diketahui fungsi dari android manifest itu sendiri adalah untuk

memberikan hak akses atau untuk mengetahui bahwa komponen yang dimaksud

ada dan telah dibuat. Dengan kata lain, apabila semua kelas dank kode program

telah lengkap tetapi dalam android manifest tidak ditambahkan kode program

tersebut maka aplikasi tersebut akan keluar dengan sendirinya.

3.3.6 Tahap Memasukan Gambar Ke Dalam Drawable Eclipse

Buka folder tempat anda meletakan gambar-gambar yang sudah

dipersiapkan sebelumnya.

1. Drag semua gambar ke dalam folder Streaming Radio > res > drawable.

2. Buka folder tempat anda meletakan icon untuk launcher diponsel android dan

icon_background untuk gambar latar belakang pada menu utama > Drag dua

gambar tersebut ke dalam folder Streaming Radio > res > drawable-hdpi.

3. Untuk memasukan kode program pada file-file lainnya, dapat dilihat di lembar

lampiran.

3.4 Kompilasi

Setelah semua item telah dibuat, tahap selanjutnya yang dilakukan adalah

mengkompilasi aplikasi ini, proses kompilasi didalam eclipse ini sekaligus akan

menjalankan program jika program tidak ditemukan kesalahan, tetapi jika

ditemukan kesalahan, eclipse akan memberitahukan lewat kotak pesan yang

muncul. Berikut adalah langkah untuk mengkompilasi aplikasi ini.

1. Klik kanan Streaming Radio > Run As > Android Application.

2. Akan muncul jendela emulator android (jika tidak ada kesalahan dalam

pembuatan program).

Page 26: azariansyah.files.wordpress.com · Web viewAndroidManifest.xml digunakan sebagai pengatur activity-activity pada aplikasi yang terdiri atas daftar class java, penggunaan intent serta

65

3. Kemudian buka kunci android dengan cara di drag dari gambar kunci gembok

hijau, kekanan.

4. Setelah masuk ke dalam home screen, klik gambar kotak di tengah bawah.

5. Cari dan klik launcher streaming radio yang telah dibuat.

Apabila telah selesai di kompilasi dan tidak terjadi error maka akan terbentuk file

Streaming Radio.apk yang ada di dalam folder workspace android, file tersebut

dapat di gunakan untuk instalasi di dalam ponsel android.

3.5 Implementasi

Setelah proses kompilasi berhasil dan melihat hasilnya pada emulator

Android, saatnya mengimplementasikan aplikasi ini pada ponsel Android.

Pertama, sambungkan kabel data dari ponsel Android ke komputer. Lalu

download dan install aplikasi APKInstaller pada komputer. Berikutnya install

aplikasi streaming radio ini ke dalam ponsel Android dengan klik ganda pada file

bernama Streaming Radio.apk yang terdapat di dalam folder bin di dalam projek

Android, misalnya C:\ Streaming Radio\bin. Pada jendela APKInstaller yang

muncul pilih tombol Install.

Gambar 3.21 Jendela APKInstaller

Gambar 3.21 adalah proses disaat instalasi program, tunggu proses

instalasi selesai karena proses ini memerlukan waktu beberapa saat.

Page 27: azariansyah.files.wordpress.com · Web viewAndroidManifest.xml digunakan sebagai pengatur activity-activity pada aplikasi yang terdiri atas daftar class java, penggunaan intent serta

66

Gambar 3.22 Proses Instalasi file apk

Gambar 3.22 adalah tampilan disaat proses instalasi selesai dan aplikasi

Streaming Radio siap digunakan.

3.6 Spesifikasi Software dan Hardware

Pembuatan aplikasi ini menggunakan sistem operasi android dengan bahasa

pemograman Java, Untuk memulai membuat aplikasi, kita harus

mengintegrasikan sistem android dan perangkat-perangkat lunak yang diperlukan

sampai dapat menjalankan program aplikasi tersebut pada Android device.

Perangkat-perangkat lunak yang dibutuhkan untuk membuat aplikasi streaming

radio ini adalah sebagai berikut :

1. JDK 6 (Java Development Kit) dan JRE 6 (Java Runtime Edition)

2. Android SDK

3. Eclipse 3.5 (Galileo)

4. ADT 9.0.0 (Android Development Tools).

5. Adobe Photoshop 8

Pada pembuatan program aplikasi ini digunakan laptop dengan spesifikasi

perangkat keras sebagai berikut :

1. ACER Aspire 4736.

2. Processor Intel(R) Core ™ 2 Duo T6600 @2.20GHz (2CPUs),~2.2GHz.

3. Bios Version InsydehH2O version V1.09

4. Harddisk TOSHIBA MK8052GSX.

5. Memori DDR 2 v-gen 3072MB.

Page 28: azariansyah.files.wordpress.com · Web viewAndroidManifest.xml digunakan sebagai pengatur activity-activity pada aplikasi yang terdiri atas daftar class java, penggunaan intent serta

67

Aplikasi “Streaming Radio” ini telah diuji coba ke dalam ponsel Samsung

android. Berikut ini adalah spesifikasi dari ponsel yang telah di uji coba :

1. SAMSUNG Galaksi Mini 2

2. Android OS, v2.3.6 (Gingerbread)

3. Memory 512 MB RAM

4. Layar 320x480px, 3.6 inches

Spesifikasi minimum untuk menjalankan aplikasi ini adalah:

1. OS Android v2.3

2. Processor 600Mhz

3. RAM 128MB

4. Memory 1MB

5. Layar 320x480px, 3.0 inches

Demikianlah tahap pengerjaan dari aplikasi yang telah penulis buat.

Aplikasi yang telah jadi dapat dimainkan di komputer atau laptop dengan sebuah

tambahan software, atau dapat juga diinstall di dalam ponsel androidnya langsung.