BAB IV IMPLEMENTASI DAN PENGUJIAN
4.1
Implementasi Setelah melakukan analisis dan perancangan terhadap Aplikasi Data Cuaca,
selanjutnya adalah implementasi dan pengujian. Pada tahapan implementasi terdapat dua cakupan yaitu spesifikasi kebutuhan sistem yang meliputi perangkat lunak (software) dan perangkat keras (hardware), juga akan dibahas mengenai kode aplikasi, implementasi perancangan antar muka (User Interface) dan pengujian aplikasi. mulai dari pertama kali mengklik aplikasi sampai selesai.
4.1.1 Spesifikasi Sistem Dalam Aplikasi Data Cuaca ini, spesifikasi kebutuhan sistem menggunakan dua buah perangkat yaitu perangkat keras (Hardware) dan perangkat lunak (Software). Spesifikasi kebutuhan sistem pada peracangan aplikasi ini adalah sebagai berikut: 1. Perangkat Keras (Hardware) 1 Set Notebook spesifikasi sebagai berikut : a) Prosessor
: AMD E2-1800 APU With
[email protected] Ghz (2 CPUs), ~1,7GHz
b) RAM
: 8192MB DDR3 1333Mhz
c) VGA d) Hardisk
: AMD RADEON HD 7300 4008Mb : 2,5” SATA 320GB 7200rpm
e) Sony Experia Z
59
60
2. Perangkat Lunak (Software) a. Sistem Operasi Microsoft Windows 7 Ultimate 64bit b. IDE Eclipse Android software Development Kit (SDK) & Android Development Tools (ADT) c. Notepad ++
4.2 Implementasi Kode Aplikasi Pada sub bab kali ini penulis akan menjelaskan potongan-potongan dari kode sumber (source code) Aplikasi Data Cuaca yang menggunakan IDE Eclipse dengan Android software Development Kit (SDK) dengan Android Development Tools (ADT)
4.2.1 Penulisan Kode Pada Menu Pilih Bahasa Pada halaman ini berisi 1 Button About dan 2 gambar pilih bahasa yaitu bahasa Indonesia dan Bahasa Inggris untuk memilih bahasa yang pengguna inginkan dan untuk melanjutkan ke halaman utama. package com.fadil.datacuaca; import android.app.Activity; import android.content.Context; import android.content.Intent; import android.net.ConnectivityManager; import android.net.NetworkInfo; import android.os.Bundle; import android.view.View; import android.widget.Toast; public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); } public void english(View view) {
61
if(isOnline()==true) { Intent a = new Intent(this,Cuaca.class); a.putExtra("bahasa", "1"); startActivity(a); } else { Toast.makeText(getApplicationContext(), "Cek Koneksi Anda", Toast.LENGTH_LONG).show(); } } public void indonesia(View view) { if(isOnline()==true) { Intent a = new Intent(this,Cuaca.class); a.putExtra("bahasa", "2"); startActivity(a); } else { Toast.makeText(getApplicationContext(), "Cek Koneksi Anda", Toast.LENGTH_LONG).show(); } } public void about(View view) { Intent a = new Intent(this,About.class); startActivity(a); } public boolean isOnline() { ConnectivityManager cm = (ConnectivityManager) getSystemService(Context.CONNECTIVITY_SERVICE); NetworkInfo netInfo = cm.getActiveNetworkInfo(); if (netInfo != null && netInfo.isConnectedOrConnecting()) { return true; } return false; } }
Gambar 4.1 Kode Sumber Halaman Pilih Bahasa
Pada halaman pilih bahasa terdapat fungs jika bendera inggris di klik maka menu halaman pilih kota akan berubah menjadi bahasa inggris begitu juga sebaliknya . dihalaman piih bahasa juga terdapat method untuk mengecek koneksi
62
4.2.2 Kode Pada Halaman About Kode Bahasa Java yang ada pada button About package com.fadil.datacuaca;
import android.os.Bundle; import android.app.Activity; import android.view.Menu;
public class About extends Activity {
@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_about); }
@Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.about, menu); return true; }
}
Gambar 4.2 Kode Yang Ada pada Button About
63
4.2.3 Kode Pada Halaman Menu Utama Pilih Kota Kode pada halaman utama yang berisi fungsi-fungsi spinner, untuk menampilkan info cuaca, fungsi untuk mengambil informasi cuaca dari Yahoo Weather Service, dan fungsi memilih kondisi cuaca sesuai informasi yang didapat dari Yahoo Weather Service. package com.fadil.datacuaca; import java.text.SimpleDateFormat; import java.util.Date; import org.w3c.dom.Document; import org.w3c.dom.Node; import import import import import import import import import import import import import import import import
android.app.Activity; android.app.ProgressDialog; android.content.Intent; android.os.AsyncTask; android.os.Bundle; android.text.TextUtils.TruncateAt; android.util.Log; android.view.Menu; android.view.View; android.widget.AdapterView; android.widget.AdapterView.OnItemSelectedListener; android.widget.ImageView; android.widget.LinearLayout; android.widget.Spinner; android.widget.TextView; android.widget.Toast;
public class Cuaca extends Activity { TextView textCuaca,textSuhu,textHari1,textHari2,textHari3,textHari4,textHari5; TextView textHari,dateNow,textHariIni; LinearLayout image; static Node condition,forecast1,forecast2,forecast3,forecast4,forecast5,location,wind,atmosphere; static String jakarta="http://weather.yahooapis.com/forecastrss?w=2345713&u=c"; static String bandung="http://weather.yahooapis.com/forecastrss?w=1029554&u=c"; static String bogor="http://weather.yahooapis.com/forecastrss?w=56000231&u=c"; static String surabaya="http://weather.yahooapis.com/forecastrss?w=1044316&u=c"; static String banten="http://weather.yahooapis.com/forecastrss?w=90075884&u=c"; static String yogyakarta="http://weather.yahooapis.com/forecastrss?w=56000367&u=c"; static String Wisatajakarta="Dunia fantasi ancol, TMII,Kebun Binatang Ragunan,Musium Fatahillah,kota tua"; static String Wisatayogyakarta="Borobudur,Malioboro, Prambanan, Gua Pindul, Pantai Indrayanti, Kali Urang,Gunung Nglanggeran, Pasar Beringharjo,Candi Ratu Boko"; static String Wisatabandung="Ciwidey, Trans Studio Bandung, Lembang, Curug Dago,Kampoeng Gajah, Saung Angklung Ujo, Ciwalk, Cihampelas"; static String Wisatasurabaya="Gunung Bromo, Monumen Kapal Selam, House of Sampoerna, Wisata Hutan Mangrove"; static String Wisatabanten="Karang bolong, Anyer, Tanjung Lesung, Ujung Kulon, Pantai Sawarna"; static String Wisatabogor="Kebun Raya Bogor, Puncak, Air Terjun Cibereum, Air Terjun Cicurug, Taman Safari, Cibodas, Taman Wisata Matahari"; static String Wisatasemarang="Pantai Marina, Pantai Maron, Pantai Tirang, Kampoeng Wisata Taman Lele, Lawang Sewu, Air Terjun Kali Pancur"; static String Wisatasolo="Sungai Bengawan Solo, Air Terjun Grojogan Sewu, Air Terjun Parang Ijo, Waduk Gajah Mungkur, Pegunungan Tawang Mangun"; static String Wisatasukabumi="Salabintana, Danau Lido, Pantai Ujung Genteng, Arung Jeram Citarik, Pelabuhan Ratu, Curug Cikaso, Taman Nasional Gunung Halimun";
Gambar 4.3 Kode pada halaman menu utama Pilih Kota
64
static int kodebahasa; //private Spinner spinner1; TextView cuaca1,cuaca2,cuaca3,cuaca4,cuaca5; Spinner spinner2; static String wea,kot,wis; private TextView tv; //static boolean a=false; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_cuaca); tv = (TextView) this.findViewById(R.id.mywidget); spinner2 = (Spinner) findViewById(R.id.spinner2); textHari=(TextView) findViewById(R.id.namaKota); textHariIni=(TextView) findViewById(R.id.textHariIni); textCuaca=(TextView) findViewById(R.id.textView3); textSuhu=(TextView) findViewById(R.id.textView1); textHari1=(TextView) findViewById(R.id.textView4); textHari2=(TextView) findViewById(R.id.textView5); textHari3=(TextView) findViewById(R.id.textView6); textHari4=(TextView) findViewById(R.id.textView7); textHari5=(TextView) findViewById(R.id.textView8); dateNow=(TextView) findViewById(R.id.dateNow); image=(LinearLayout) findViewById(R.id.imageLinear); cuaca1=(TextView) findViewById(R.id.textCuaca1); cuaca2=(TextView) findViewById(R.id.textCuaca2); cuaca3=(TextView) findViewById(R.id.textCuaca3); cuaca4=(TextView) findViewById(R.id.textCuaca4); cuaca5=(TextView) findViewById(R.id.textCuaca5); Date cDate = new Date(); String fDate = new SimpleDateFormat("yyyy-MM-dd").format(cDate); dateNow.setText(fDate+""); Intent i=getIntent(); String detek=i.getExtras().getString("bahasa"); kodebahasa=Integer.parseInt(detek); if(kodebahasa==1) { spinner2.setPrompt("City"); } else { spinner2.setPrompt("Pilih Kota"); } //addListenerOnSpinnerItemSelection(); spinner2.setOnItemSelectedListener(new OnItemSelectedListener() { @Override public void onItemSelected(AdapterView parentView, View selectedItemView, int position, long id) { String tampung=String.valueOf(parentView.getSelectedItem()); parameter... if(position==0) {
Gambar 4.4 Kode pada halaman menu utama Pilih Kota Pada bagian ini terdapat fungsi untuk menampilkan list kota-kota wisata yang terdapat pada spinner dan text untuk menampilkan informasi cuaca
65
//addListenerOnSpinnerItemSelection(); spinner2.setOnItemSelectedListener(new OnItemSelectedListener() { @Override public void onItemSelected(AdapterView parentView, View selectedItemView, int position, long id) { String tampung=String.valueOf(parentView.getSelectedItem()); parameter... if(position==0) { cuaca(jakarta,tampung); }else if(position==1) { cuaca(yogyakarta,tampung); } else if(position==2) { cuaca(bogor,tampung); } else if(position==3) { cuaca(surabaya,tampung); } else if(position==4) { cuaca(bandung,tampung); } else if(position==5) { cuaca(banten,tampung); } } @Override public void onNothingSelected(AdapterView parentView) { // your code here } }); }
Gambar 4.5 Kode pada halaman menu utama Pilih Kota Pada bagian ini event yang dilakukan ketika spinner di klik atau list kota-kota wisata di pilih.
66 @Override protected Void doInBackground(Void... arg0) { GetWeather weather = new GetWeather(); doc=weather.ambilData(wea); return null; } @Override protected void onPostExecute(Void result) { if(doc!=null) { Log.e("TEST","JALAN"); //ambil info cuaca condition = doc.getElementsByTagName("yweather:condition").item(0); location = doc.getElementsByTagName("yweather:location").item(0); wind = doc.getElementsByTagName("yweather:wind").item(0); atmosphere = doc.getElementsByTagName("yweather:atmosphere").item(0); forecast1 = doc.getElementsByTagName("yweather:forecast").item(0); forecast2 = doc.getElementsByTagName("yweather:forecast").item(1); forecast3 = doc.getElementsByTagName("yweather:forecast").item(2); forecast4 = doc.getElementsByTagName("yweather:forecast").item(3); forecast5 = doc.getElementsByTagName("yweather:forecast").item(4); //sampe sini ambil info cuaca int code=Integer.parseInt(condition.getAttributes().getNamedItem("code").getNodeValue().toSt ring()); //ambil forecast code int code1=Integer.parseInt(forecast1.getAttributes().getNamedItem("code").getNodeValue().toS tring()); int code2=Integer.parseInt(forecast2.getAttributes().getNamedItem("code").getNodeValue().toS tring()); int code3=Integer.parseInt(forecast3.getAttributes().getNamedItem("code").getNodeValue().toS tring()); int code4=Integer.parseInt(forecast4.getAttributes().getNamedItem("code").getNodeValue().toS tring()); int code5=Integer.parseInt(forecast5.getAttributes().getNamedItem("code").getNodeValue().toS tring()); //ambil info lokasi,wind, & atmosphere String lokasi=location.getAttributes().getNamedItem("city").getNodeValue().toString(); String angin="";String humidity=""; textSuhu.setText(condition.getAttributes().getNamedItem("temp").getNodeValue().t oString()+"\u00B0"); if(kodebahasa==1)
Gambar 4.6 Kode pada halaman menu utama Pilih Kota Pada bagian ini untuk membuat objek weather dan fungsi untuk mengambi data dari Yahoo Weahter Service.
67
public int setGambar(int code) { int sourceGambar=0; if(code==44||(code>=26&&code<=30)) { sourceGambar=R.drawable.cloudy; } else if(code>30&&code<=34) { sourceGambar=R.drawable.cerah; } else if(code==35||code==47||code==40||code==45) { sourceGambar=R.drawable.rain; } else if(code>36&&code<40) { sourceGambar=R.drawable.thunder; } else if(code>18&&code<24) { sourceGambar=R.drawable.cloudy; } else { sourceGambar=R.drawable.cloudy; } return sourceGambar; } public String setCuaca(int code) { String cua=""; /* if(code<=19) { cua="Hujan"; } else if(code>19&&code<=30) { cua="Berawan"; } else if(code>30&&code<=34) { cua="Cerah"; } else if(code==35) { cua="Hujan"; } else if(code>35) { cua="Hujan Deras"; }
Gambar 4.7. Kode pada halaman menu utama Pilih Kota Pada bagian ini terdapat fungsi menampilkan gambar keadaaan cuaca dan kode-kode informasi cuaca yang terdapat di Yahoo Weather Service.
68
4.2.4 Kode Untuk mengambil Informasi Cuaca Dari Yahoo Weather package com.fadil.datacuaca; import import import import import import
java.io.BufferedReader; java.io.ByteArrayInputStream; java.io.IOException; java.io.InputStream; java.io.InputStreamReader; java.io.Reader;
import javax.xml.parsers.DocumentBuilder; import javax.xml.parsers.DocumentBuilderFactory; import javax.xml.parsers.ParserConfigurationException; import import import import import import import
org.apache.http.HttpEntity; org.apache.http.HttpResponse; org.apache.http.client.ClientProtocolException; org.apache.http.client.methods.HttpGet; org.apache.http.impl.client.DefaultHttpClient; org.w3c.dom.Document; org.xml.sax.SAXException;
public class GetWeather { static InputStream is = null; static String qResult = null; public GetWeather() { } public Document ambilData(String url) { //Default implementation of an HTTP client. DefaultHttpClient httpClient = new DefaultHttpClient(); //http get dari Url ketika class ini nanti dipanggil dan diimplementasikan HttpGet httpGet = new HttpGet(url); //response dari http get nanti ditampung disini HttpResponse httpResponse; try { //menampung nilai http get httpResponse = httpClient.execute(httpGet); //Obtains the message entity of this response, if any. //Seluruh response, header dan body response HttpEntity httpEntity = httpResponse.getEntity(); //menampung content dari Http Entity is = httpEntity.getContent(); //Mengubah response menjadi bentuk string Reader in = new InputStreamReader(is); BufferedReader bufferedreader = new BufferedReader(in); StringBuilder stringBuilder = new StringBuilder(); String stringReadLine = null; while ((stringReadLine = bufferedreader.readLine()) != null) { stringBuilder.append(stringReadLine + "\n"); } qResult = stringBuilder.toString(); //Log.e("test",qResult); } catch (ClientProtocolException e) { // TODO Auto-generated catch block //e.printStackTrace(); } catch (IOException e) { // TODO Auto-generated catch block //e.printStackTrace(); } /*Setelah seluruh halaman telah menjadi suatu STring maka DocumentBuilder digunakan untuk mengambil DOM instance apa itu DOM?? silakan cek di w3schools.com, hhe*/ Document dest=null; DocumentBuilderFactory dbFactory = DocumentBuilderFactory.newInstance(); DocumentBuilder parser; try { parser = dbFactory.newDocumentBuilder(); dest=parser.parse(new ByteArrayInputStream(qResult.getBytes())); } catch(ParserConfigurationException e1) { //e1.printStackTrace(); } catch(SAXException e) { //e.printStackTrace(); } catch(IOException e) { //e.printStackTrace(); } return dest;
Gambar 4.8 Kode untuk Mendapatkan Koneksi dari Yahoo Weather Service
} }
69
4.2.5 Kode XML Pada Layout Halaman Pilih Bahasa
<Button Gambar 4.9 Layout Pada Halaman Pilih Bahasa android:id="@+id/buttonAbout" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="TENTANG APLIKASI" android:textAppearance="?android:attr/textAppearanceLarge" android:gravity="center" android:layout_marginTop="15dp" android:onClick="about" android:padding="20dp" android:textColor="#FFFFFF" />
70
4.2.5 Kode XML Pada Layout Halaman About
Gambar 4.10. Kode XML Layout Pada Halaman About
71
4.2.6 Kode XML Pada Layout Halaman Pilih Kota
<Spinner android:id="@+id/spinner2" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:entries="@array/kota_array" android:textColor="#FFFFFF" android:prompt="@string/judul_spinner"/>
Gambar 4.11 Kode XML
android:text="C" android:textSize="50sp" android:gravity="top" Layout Pada Halaman Pilih kota android:paddingTop="20dp"
android:textAppearance="?android:attr/textAppearanceLarge" android:textColor="#FFFFFF" />
72
Gambar 4.12 Kode XML Layout Pada Halaman
Pilih kota
73
Gambar 4.13 Kode XML Layout Pada Halaman Pilih kota
74
4.3 Implementasi Perancangan Antarmuka (Interface) Implementasi antarmuka merupakan hasil dari perancangan user interface yang sebelumnya sudah dilakukan pada tahap perancangan. Pada implementasi antarmuka menampilkan rancangan halaman dan potongan program.
4.3.1 Implementasi Halaman Utama Halaman Pilih Bahasa adalah halaman pertama yang pertama kali muncul saat membuka aplikasi, pada Gambar 4.1 pengguna diminta untuk memilih bahasa yang akan dipilih untuk pindah ke halaman pilih kota.
Gambar 4.14 Halaman Pilih Bahasa Gambar 4.1 pengguna diminta untuk memilih bahasa yang akan gunakan.Pada halaman ini merupakan halaman pertama pada saat aplikasi dibuka dan untuk pindah ke halaman utama pengguna diminta untuk memiliih salah satu bahasa.
75
Gambar 4.15 Menu Tentang Aplikasi Gambar 4.2 merupakan halaman yang berisi informasi tentang penulis dan informasi aplikasi tersebut.
Gambar 4.16 Tampilan Kota Jakarta dengan Bahasa Indonesia Gambar 4.3 Merupakan halaman utama pada aplikasi ini. Informasi cuaca kota Jakarta dengan bahasa Indonesia
76
Gambar 4.17 Halaman pilih kota Yogyakarta Gambar 4.4 . Informasi cuaca kota Yogyakarta dengan bahasa Indonesia
Gambar 4.18 Halaman Pilih Kota Bogor gambar 4.5 . Informasi cuaca kota Bogor dengan bahasa Indonesia
77
Gambar 4.18 Halaman Pilih Kota Surabaya Gambar 4.6 . Informasi cuaca kota Surabaya dengan bahasa Indonesia
Gambar 4.19 Halaman Pilih Kota Bandung Gambar 4.7 . Informasi cuaca kota Bandung dengan bahasa Indonesia
78
Gambar 4.20 Halaman Pilih Kota Bogor Gambar 4.8 . Informasi cuaca kota Bogor dengan bahasa Inggis
Gambar 4.21 Halaman Pilih Kota Surabaya Gambar 4.9 . Informasi cuaca kota Surabaya dengan bahasa Inggris
79
Gambar 4.22 Halaman Pilih Kota Bandung Gambar 4.10 . Informasi cuaca kota Bandung dengan bahasa Inggris
Gambar 4.23 Halaman Pilih Kota Jakarta Gambar 4.11 . Informasi cuaca kota Bandung dengan bahasa Inggris
4.4
Pengujian Pengujian program aplikasi ini dilakukan agar dapat diketahui apakah aplikasi yang
telah dibangun tersebut dapat berjalan sesuai dengan kebutuhan. Ini dilakukan untuk
80
mencegah agar setelah aplikasi ini diterapkan dan digunakan dalam pencarian tidak menimbulkan kesalahan yang akan mengakibatkan ketidaknyamanan pada pengguna, pengujian dilakukan dengan menggunakan metode black box, metode ini merupakan pengujian program berdasarkan fungsi dari program untuk menemukan kesalahan fungsi pada program. Pengujian ini dilakukan pada 1 klien untuk membuktikan bahwa sistem validasi telah berjalan dengan baik. Berikut hasil pengujian pada setiap klien :
4.4.1
SKENARIO PENGUJIAN MENU DAN FUNGSI Tabel 4.1 Skenario Pengujian Menu dan Fungsi
Skenario
User masuk aplikasi
Bagian yang
Tindakan
Status aplikasi
Hasil yang diharapkan
Diuji
Pengujian
Icon Aplikasi
Mengklik icon
Sistem
Sistem menampilkan
didalam mobile
aplikasi pada
menampilkan
halaman Pilih Bahasa
mobile phone
Halaman Pilih Bahasa
User memilih Menu Gambar menu Bahasa
Bahasa Indonesia
Indonesia
User memilih Menu Gambar menu Bahasa Inggris
Bahasa Inggris
Mengklik menu
Sistem
Sistem menampilkan
button gambar
menampilkan
halaman pilih kota
Bahasa
dengan bahasa
Indonesia
Indonesia
Mengklik menu
Sistem
Sistem menampilkan
button gambar
menampilkan
halaman pilih kota
Bahasa Inggris
dengan bahasa Inggris
81
User memilih Menu Pilih tombol
Bahasa
Mengklik menu
Sistem
Tombol Tentang menampilkan
Tentang User memilih Menu Pilih Kota menu pilih
Sistem menampilkan halaman tentang Aplikasi
Mengklik menu
Sistem
Sistem menampilkan
pilih Kota
menampilkan
list kota - kota
Mengklik menu
Sistem
Sistem menampilkan
pilih Kota
menampilkan
informasi cuaca kota
kota User memilih Menu Pilih Kota kota Jakarta
Jakarta
User memilih Menu Pilih Kota kota Jakarta
jakarta
Mengklik menu
Sistem
Sistem menampilkan
pilih Kota
menampilkan
informasi cuaca kota
Jakarta
User memilih Menu Pilih Kota
Jakarta
Mengklik menu
Sistem
Sistem menampilkan
kota
pilih Kota
menampilkan
informasi cuaca kota
Bandung
Bandung
User memilih Menu Pilih Kota kota Bogor
Bandung
Mengklik menu
Sistem
Sistem menampilkan
pilih Kota
menampilkan
informasi cuaca kota
Bogor
User memilih Menu Pilih Kota kota
Bogor
Mengklik menu
Sistem
Sistem menampilkan
pilih Kota
menampilkan
informasi cuaca kota
82
Yogyakarta
User memilih Menu Pilih Kota kota Malang
Yogyakarta
Yogyakarta
Mengklik menu
Sistem
Sistem menampilkan
pilih Kota
menampilkan
informasi cuaca kota
Malang
User memilih Menu Pilih Kota
Malang
Mengklik menu
Sistem
Sistem menampilkan
kota
pilih Kota
menampilkan
informasi cuaca kota
Semarang
Semarang
User memilih Menu Pilih Kota
Semarang
Mengklik menu
Sistem
Sistem menampilkan
kota
pilih Kota
menampilkan
informasi cuaca kota
Surabaya
Surabaya
User memilih Menu Pilih Kota
Surabaya
Mengklik menu
Sistem
Sistem menampilkan
kota
pilih Kota
menampilkan
informasi cuaca kota
Sukabumi
Sukabumi
User memilih Menu Pilih Kota kota Banten
Sukabumi
Mengklik menu
Sistem
Sistem menampilkan
pilih Kota
menampilkan
informasi cuaca kota
Banten
Banten
