43
BAB IV IMPLEMENTASI DAN PENGUJIAN
4.1
IMPLEMENTASI Tahap berikutnya setelah melakukan analisis dan perancangan
terhadap aplikasi TouringApps adalah implementasi dan pengujian. Berikut ini akan dijelaskan implementasi dari aplikasi TouringApps pada Telephone Genggam dengan menggunakan Integrated Development environment (IDE) Eclipse, dan Android SDK yang terdiri dari pengkodean, lingkungan implementasi, dan antarmuka dari aplikasi TouringApps, serta hal-hal yang berhubungan dengan pengujian aplikasi. 4.2 Kebutuhan Minimum Perangkat Keras/Perangkat Lunak untuk Aplikasi Eclipse 4.2.1
Kebutuhan Minimum Perangkat Keras Telephone Genggam android yang menggunakan sudah menggunakan
sistem operasi Android 2.2 Froyo. Karena pada saat perancangan aplikasi sudah ditentukan bahwa aplikasi nya dirancang untuk sistem operasi android froyo. Pengujian aplikasi touringapps dilakukan pada dua buah ponsel dengan spesifikasi yang berbeda, yaitu : 1.Telephone Genggam Samsung Galaxy Fit GT-S5670, prosesor 600 MHz, Memori: 160 MB internal. 2.Koneksi Internet 3.LAN networking (Wifi atau kabel) 4.Sinyal GPS atau GPRS, bisa juga kedua nya.
44
Untuk PC/Laptop, minimum memori RAM yang digunakan adalah 1GB, apabila menggunakan memori yang rendah, maka proses kompilasi source code aplikasi akan memakan waktu yang cukup lama. 4.2.2
Kebutuhan Minimum Perangkat Lunak Untuk sampai pada tahap simulasi, perangkat lunak minimum yang
dibutuhkan adalah : i. Sistem Operasi Windows XP-SP2 Professional Edition ii. Eclipse Galileo iii. Jdk-6u2-windows-i586-p iv. Android-sdk_r06-windows v. Browser Untuk sampai pada tahap implementasi, perangkat lunak minimum yang dibutuhkan adalah : i. Sistem Operasi Windows XP-SP2 Professional Edition ii. Eclipse Galileo iii. Jdk-6u2-windows-i586-p iv. Android-sdk_r06-windows v. Browser 4.3
Pengkodean TouringApps Pada bab ini akan dijelaskan potongan-potongan dari kode sumber
(source code) aplikasi TouringApps. Tahap awal sebelum memulai membuat kode untuk aplikasi ini adalah dengan membuat android project baru pada eclipse yang diberi nama TouringApps
45
Gambar 4.1 Projek baru android Keterangan gambar 4.1 Ini adalah tampilan form yang muncul pada eclipse ketika pertama kali membuat projek android. Langkah pertama adalah membuat tombol yang apabila di klik akan mendapatkan lokasi.koordinat saat ini dari location provider. Berikut ini adalah file main.xml dari tampilan awal aplikasi: 1. 2. 3. 4. 5. 6.
46
7. 8. 9. 10. 11.
//Menampilkan textbox untuk memasukan nama <EditText android:id ="@+id/edittextName" android:text="Input Name" android:layout_width="wrap_content" android:layout_height="wrap_content"
12. 13. 14. 15. 16. 17. 18. 19. 20.
/> //Menampilkan tombol untuk mendapatkan lokasi koordinat saat ini <Button android:id="@+id/retrieve_location_button" android:text="Retrieve Location" android:layout_width="wrap_content" android:layout_height="wrap_content" />
Berikut ini adalah penampilannya ketika dijalankan pada emulator:
Gambar 4.2 Emulator Aplikasi TouringApps Keterangan gambar 4.2 Ini adalah tampilan emulator dari aplikasi TouringApps yang sudah selesai. Agar memiliki kemampuan untuk mendapatkan lokasi dari android API, maka langkah pertama adalah mengambil referensi dari LocationManager class, yang menyediakan akses kepada system lokasi services. Hal ini bisa di lakukan menggunakan getSystemService di activity. Berikut dibawah ini kode nya:
47
1.
locationManager = (LocationManager) getSystemService(Context.LOCATION_SERVICE);
2. 3. 4. 5. 6. 7.
locationManager.requestLocationUpdates( LocationManager.GPS_PROVIDER, MINIMUM_TIME_BETWEEN_UPDATES, MINIMUM_DISTANCE_CHANGE_FOR_UPDATES, new MyLocationListener() );
8. 9. 10. 11. 12. 13.
retrieveLocationButton.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { showCurrentLocation(); } });
14. } 15. protected void showCurrentLocation() { 16. try { 17. Location location = locationManager.getLastKnownLocation(LocationManager.GPS_PROVIDER); 18. 19. 20. 21. 22.
if (location != null) { String message = String.format( "Current Location \n Longitude: %1$s \n Latitude: %2$s", location.getLongitude(), location.getLatitude() );
Kemudian,
untuk
mendapatkan
update
lokasi
digunakan
method
requstLocation Updates. Dalam method ini disediakan nama yang di inginkan location provider (GPS), waktu minimum untuk interval notifikasi, dan jarak minimum notifikasi dan yang terakhir adalah sebuah kelas yang meng implementasi antar muka LocationListener. Antar muka ini mendeklarasi methode untuk menjalankan perubahan lokasi dan juga perubahan status. Berikut dibawah ini kode nya:
1.
public class LbsGeocodingActivity extends Activity {
2.
private static final long MINIMUM_DISTANCE_CHANGE_FOR_UPDATES = 1; // in Meters private static final long MINIMUM_TIME_BETWEEN_UPDATES = 1000; // in Milliseconds
3.
48
4. 5. 6. 7. 8.
protected LocationManager locationManager; protected Button retrieveLocationButton; EditText name ; @Override public void onCreate(Bundle savedInstanceState) {
9. super.onCreate(savedInstanceState); 10. setContentView(R.layout.main); 11. name = (EditText)findViewById(R.id.edittextName); 12. retrieveLocationButton = (Button) findViewById(R.id.retrieve_location_button); 13. HttpClient httpclient = new DefaultHttpClient(); 14. HttpGet httpget = new HttpGet("http://rafie166.tk/touringapps/isi_lokasi.php?latitude="+location.ge tLatitude() 15. +"&longitude="+location.getLongitude()+"&user="+name.getText()+""); 16. HttpResponse response = httpclient.execute(httpget); 17. HttpEntity entity = response.getEntity(); 18. 19. 20. 21.
byte buffer[] = new byte[1024] ; InputStream is = entity.getContent() ; int numBytes = is.read(buffer) ; is.close();
22. //String entityContents = new String(buffer,0,numBytes) ; 23. Log.d("TouringApps","here"); 24. Toast.makeText(LbsGeocodingActivity.this, message, 25. Toast.LENGTH_LONG).show(); 26. } 27. 28. 29. 30. 31. 32.
} catch (IOException e) { Toast.makeText(LbsGeocodingActivity.this, "gagal get GPS Loc", Toast.LENGTH_LONG).show(); } }
33. private class MyLocationListener implements LocationListener { 34. 35. 36. 37. 38. 39. 40. 41. 42. 43. 44. 45. 46.
public void onLocationChanged(Location location) { /* String message = String.format( "New Location \n Longitude: %1$s \n Latitude: %2$s", location.getLongitude(), location.getLatitude() ); Toast.makeText(LbsGeocodingActivity.this, message, Toast.LENGTH_LONG).show(); */ } public void onStatusChanged(String s, int i, Bundle b) { /* Toast.makeText(LbsGeocodingActivity.this, "Provider status changed", Toast.LENGTH_LONG).show();
49
47. 48. 49. 50. 51. 52. 53. 54. 55. 56. 57. 58.
*/ } public void onProviderDisabled(String s) { Toast.makeText(LbsGeocodingActivity.this, "Provider disabled by the user. GPS turned off", Toast.LENGTH_LONG).show(); } public void onProviderEnabled(String s) { Toast.makeText(LbsGeocodingActivity.this, "Provider enabled by the user. GPS turned on", Toast.LENGTH_LONG).show(); }
59. } 60. }
50
Selanjutnya adalah menggunakan AVD manager untuk membuat aplikasi Android baru dan pastikan fitur GPS support sudah termasuk.
Gambar 4.3 AVD Android Keterangan gambar 4.3 Ini adalah form untuk membuat android virtual device. Pada form ini ditentukan targetnya adalah android 2.1 dengan API level 7. Size SD card nya 128 Mib dengan memakai skin default (WVGA800). Kemudian yang paling penting adalah pada property hardware harus memakai GPS support.
Langkah berikut nya adalah menjalankan emulator:
51
Gambar 4.4 Emulator Aplikasi TouringApps Keterangan gambar 4.4 Gambar 4.4 adalah emulator dari hasil setingan yang dilakukan pada android virtual device. 4.4 Pengkodean ShowMap Berikut ini adalah file main.xml dari tampilan awal aplikasi: 1. 2. 3. 4. 5. 6.
Berikut ini kode untuk menampilkan map yang ada pada webserver: 1.
package com.rafie.showmap;
2. 3. 4. 5.
import android.app.Activity; import android.content.Intent; import android.net.Uri; import android.os.Bundle;
6. 7. 8. 9. 10. 11.
public class actShowMap extends Activity { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main);
52
12. 13. 14. 15. 16. 17.
String url = "http://rafie166.tk/touringapps/phpsqlajax_map.htm"; Intent i = new Intent(Intent.ACTION_VIEW); i.setData(Uri.parse(url)); startActivity(i); } }
Berikut ini coding manifest untuk ShowMap: 1.
package com.rafie.showmap;
2. 3. 4. 5.
import android.app.Activity; import android.content.Intent; import android.net.Uri; import android.os.Bundle;
6. 7. 8. 9. 10. 11.
public class actShowMap extends Activity { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main);
12. String url = "http://rafie166.tk/touringapps/phpsqlajax_map.htm"; 13. Intent i = new Intent(Intent.ACTION_VIEW); 14. i.setData(Uri.parse(url)); 15. startActivity(i); 16. } 17. } 18. Coding pada Webserver 18.1.1 Di webserver ada beberapa program menggunakan php: 19. Untuk mendapatkan lokasi dari android maka program yang digunakan adalah: 20. Isi_lokasi 21.
Berikut ini program php untuk mengambil data dari basisdata 1. 2.
phpsqlajax_genxml3.php
3.
require("phpsqlajax_dbinfo.php");
4.
// Start XML file, create parent node
VALUES
53
5. 6. 7.
$dom = new DOMDocument("1.0"); $node = $dom->createElement("markers"); $parnode = $dom->appendChild($node);
8.
// Opens a connection to a MySQL server
9. $connection=mysql_connect (localhost, $username, $password); 10. if (!$connection) { die('Not connected : ' . mysql_error());} 11. // Set the active MySQL database 12. 13. 14. 15.
$db_selected = mysql_select_db($database, $connection); if (!$db_selected) { die ('Can\'t use db : ' . mysql_error()); }
16. // Select all the rows in the markers table 17. 18. 19. 20. 21.
$query = "SELECT * FROM marker WHERE 1"; $result = mysql_query($query); if (!$result) { die('Invalid query: ' . mysql_error()); }
22. header("Content-type: text/xml"); 23. // Iterate through the rows, adding XML nodes for each 24. 25. 26. 27. 28. 29. 30. 31.
while ($row = @mysql_fetch_assoc($result)){ // ADD TO XML DOCUMENT NODE $node = $dom->createElement("marker"); $newnode = $parnode->appendChild($node); $newnode->setAttribute("name",$row['name']); $newnode->setAttribute("lat", $row['latitude']); $newnode->setAttribute("lng", $row['longitude']); }
32. echo $dom->saveXML(); 33. ?>
Berikut ini program html untuk menampilkan map: 1. 2.
phpsqlajax_map.html 3. 4. 5. <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 6. Google Maps AJAX + mySQL/PHP Example 7. <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAk9C3K_GcH0btH8YNeVQABSbyuwkpEUAa4bcYeWRz4Rj7rERDBR0dP3Unj3 ZoN0VEJhP5zuoV2cUig" 8. type="text/javascript"> 9. <script type="text/javascript"> 10. //
54
12. iconBlue.image 'http://labs.google.com/ridefinder/images/mm_20_blue.png'; 13. iconBlue.shadow 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'; 14. iconBlue.iconSize = new GSize(12, 20); 15. iconBlue.shadowSize = new GSize(22, 20); 16. iconBlue.iconAnchor = new GPoint(6, 20); 17. iconBlue.infoWindowAnchor = new GPoint(5, 1);
= =
18. var iconRed = new GIcon(); 19. iconRed.image = 'http://labs.google.com/ridefinder/images/mm_20_red.png'; 20. iconRed.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'; 21. iconRed.iconSize = new GSize(12, 20); 22. iconRed.shadowSize = new GSize(22, 20); 23. iconRed.iconAnchor = new GPoint(6, 20); 24. iconRed.infoWindowAnchor = new GPoint(5, 1); 25. var customIcons = []; 26. customIcons["restaurant"] = iconBlue; 27. customIcons["bar"] = iconRed; 28. 29. 30. 31. 32. 33.
function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl()); map.setCenter(new GLatLng(-6.180833,106.848106), 11 );
34. // Change this depending on the name of your PHP file 35. GDownloadUrl("phpsqlajax_genxml3.php", function(data) { 36. var xml = GXml.parse(data); 37. var markers = xml.documentElement.getElementsByTagName("marker"); 38. for (var i = 0; i < markers.length; i++) { 39. var name = markers[i].getAttribute("name"); 40. var address = markers[i].getAttribute("address"); 41. var type = markers[i].getAttribute("type"); 42. var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")), 42.1.1 parseFloat(markers[i].getAttribute("lng"))); 43. var marker = createMarker(point, name, address, type); 44. map.addOverlay(marker); 45. } 46. }); 47. } 48. } 49. 50. 51. 52. 53. 54. 55. 56. 57. 58. 59.
function createMarker(point, name, address, type) { var marker = new GMarker(point, customIcons[type]); var html = "" + name + "
" + address; GEvent.addListener(marker, 'click', function() { marker.openInfoWindowHtml(html); }); return marker; } //]]>
60.
55
61. 62. 63.
Gambar 4.5 Emulator ShowMap Keterangan gambar 4.5 Ini adalah gambar emulator dari ShowMap untuk melihat koordinat. Pada gambar ini terlihat dua koordinat pengguna.
4.5 Implementasi Perangkat Lunak Untuk memenuhi tujuan pada tugas akhir ini, alat yang digunakan dari tahap membuat program sampai dengan kompilasi adalah Integrated Development environment (IDE) Eclipse. Install Java Development Kit (JDK), Install SDK Android Manager.
4.6 Implementasi Perangkat Keras
56
Untuk implementasi aplikasi pada Telephone Genggam Android, hubungkan PC/Laptop dengan Telephone Genggam Android menggunakan LAN Wifi. Buka browser pada Telephone Genggam Android, lalu masukan IP laptop dan arahkan ke folder tempat aplikasi yang sudah siap untuk di unduh. 4.7 Implementasi Aplikasi TouringApps kedalam Ponsel 4.7.1
Meng-export projek aplikasi TouringApps
Setelah projek TouringApps pada Eclipse siap untuk di implementasi maka projek tersebut bisa di export ke sebuah folder.
Gambar 4.6 Export Aplikasi TouringApps Keterangan gambar 4.6 Ini adalah gambar form pada saat melakukan export program TouringApps. Pada gambar ini terlihat folder android yang dipilih, menandakan program tersebut adalah program android. Lalu klik link aplikasi tersebut, secara otomatis aplikasi tersebut akan di download oleh Telephone Genggam Android. Langkah berikutnya adalah melakukan implementasi.
57
4.8
Pengujian Pengujian sistem dilakukan untuk memastikan fungsi-fungsi sistem
berjalan dengan baik sebagaimana mestinya. Pengujian aplikasi TouringApps dilakukan dengan menggunakan dua Telephone Genggam android agar memastikan bahwa terlihat lebih dari satu koordinat (multikoordinat) Tabel 4.1 Skenario Pengujian Skenario
Hasil Yang
Pengujian
Diharapkan
Memulai
Pengguna memulai
Muncul
aplikasi
Aplikasi
textbox tombol Sharing
TouringApps
Location.
Pengguna
Pengguna
memasukan nama
memasukan nama pada
Text box
tampilan
dapat
text box Tombol
Pengguna menekan
Nama
sharing
tombol.
pengguna terkirim ke
location
dan
lokasi
basis data
Aplikasi
Pengguna membuka
Koordinat terlihat pada
showmap
aplikasi showmap
map. Jika ada lebih dari satu
pengguna
maka
terlihat multikoordinat.
Keterangan tabel 4.1 Pengujian dilakukan dengan cara menjalankan aplikasi TouringApps bersamaan pada kedua Telephone Genggam android, Setiap aksi yang dilakukan oleh pengguna, diharapkan hasil yang diperoleh sesuai dengan program yang telah dibuat. Selanjutnya pengujian dilakukan ketika aplikasi sedang berlangsung.
58
4.8.1
Analisis Hasil Pengujian Tabel 4.2 Hasil Pengujian Status Skenario
Hasil Pengujian
Akhir Ponsel B
Memulai
Dapat
menampilkan
aplikasi
textbox dan tombol
Touringapps
sharing location.
Text box
Pengguna
dapat
memasukan
nama
sukses
sukses
pada text box Tombol sharing
Nama
dan
lokasi
location
pengguna terkirim ke
Sukses
basis data. Aplikasi
Koordinat
showmap
pada map. Jika ada lebih
dari
pengguna
terlihat
Sukses
satu maka
terlihat multikoordinat
Keterangan tabel 4.2 Berdasarkan hasil pengujian secara menyeluruh terhadap aplikasi kamus TouringApps, maka didapatkan kesimpulan sebagai berikut : 1. Hasil pengujian berdasarkan pada analisis perancangan sistem telah berjalan sebagaimana mestinya sesuai dengan yang diharapkan. Hal tersebut terbukti dengan dapat berjalannya seluruh proses analisis perancangan dan implementasi. 2. Map yang ditampilkan hanya sebatas Kota Jakarta saja sehingga jika ada pengguna lain diluar Kota Jakarta tidak akan terlihat pada map.
59
3. Jika para pengguna berada pada lokasi yang sama hanya akan terlihat satu koordinat saja.