Open Google Maps Direction dari JSON Parsing

Tutorial ini adalah hasil dari rasa penasaran saya ketika melihat sebuah aplikasi traveling, dimana ketika kita sudah memilih detail lokasi wisatanya kemudian ada sebuah button yang akan diarahkan ge sebuah aplikasi Google Maps. Aplikasi maps tersebut akan mengarahkan kita melalu jalur yang disediakan dalam sebuah peta. Oleh karena itu saya akan mencoba membuat aplikasi dalam level sederhana. Nah untuk lokasinya kita akan ambil dari parsing JSON yang saya buat dengan PHP dan MysQL tentunya. Oke sekarang siapkan beberapa kebutuhan antara lain :

1. Sebuah database dengan sebuah tabel dengan nama tb_wisata 
2. File Koneksi.php untuk menyambungkan php dengan mysql
3. File wisata.php untuk daftar wisata yang akan kita taruh pada listviw
4. File detail_wisata.php untuk menampilkan wisata berdasarkan id
5. Intent dengan putextra untuk mengambil id yang dapat kita berikan ke aktivity detail sehingga mampu mengambil data wisata by id
6. Xamarin IDE android untuk membuat aplikasinya

Langkah 1

Buatlah sebuah database dengan tb_wisata dengan ketentuan sebagai berikut

CREATE TABLE `tb_wisata` (
  `id` int(11) NOT NULL,
  `nama_wisata` varchar(255) NOT NULL,
  `nama_kabupaten` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

INSERT INTO `tb_wisata` (`id`, `nama_wisata`, `nama_kabupaten`) VALUES
(1, 'Baturaden', 'Banyumas'),
(2, 'Pantai Menganti', 'Kebumen'),
(3, 'Dream Land ', 'Ajibarang'),
(4, 'Walt Disney', 'Paris'),
(5, 'Tlaga Gumelar', 'Banyumas');


ALTER TABLE `tb_wisata`
  ADD PRIMARY KEY (`id`);

ALTER TABLE `tb_wisata`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=6;COMMIT;

Langkah 2
Buatlah sebuah file koneksi.php

koneksi.php

<?php
 
 $server  = "localhost"; // sesuaikan alamat server anda
 $user  = "nama_user_sql"; // sesuaikan user web server anda
 $password = "password_database"; // sesuaikan password web server anda
 $database = "nama_database"; // sesuaikan database web server anda
 
 $connect = mysql_connect($server, $user, $password) or die ("Koneksi gagal!");
 mysql_select_db($database) or die ("Database belum siap!");
?>

Langkah 3
Buatlah sebuah file wisata.php

wisata.php

<?php
    header('content-type: application/json');
    include "koneksi.php";
 
     $sql="SELECT * FROM tb_wisata ORDER BY id DESC";
     $result=mysql_query($sql);
     while($hasil=mysql_fetch_assoc($result)) {
      $output[]=$hasil;
     }
     $hasil =json_encode($output);
     echo $hasil;
?>

Langkah 4
Buatlah sebuah file wisata.php

detail_wisata.php

<?php
    header('content-type: application/json');
 include "koneksi.php";
  
 $id = $_GET['id'];
 
 
     $sql="SELECT * FROM tb_wisata Where id='$id' ORDER BY id DESC";
     $result=mysql_query($sql);
     while($hasil=mysql_fetch_assoc($result)) {
      $output[]=$hasil;
     }
     $hasil =json_encode($output);
     echo "{"detail_wisata":" . $hasil . "}";
     
  
?>

Langkah 5
Buat sebuah project baru dengan nama openMaps pada xamarin android anda lalu instal Get Component -> JSON.NET

MainActivity.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Net;
using Newtonsoft.Json.Linq;

using Android.App;
using Android.Content;
using Android.OS;
using Android.Runtime;
using Android.Views;
using Android.Widget;
using Newtonsoft.Json;



namespace openMaps
{
 [Activity(Label = "Wisata", MainLauncher = true)]
 public class MainActivity : Activity

 {
  private List<Wisata> itemWisata;
  private ListView DaftarWisata;
  private Uri BaseUri = new Uri("https://banyu.center/xamarin/wisata.php?");
  private ProgressBar mProgressBar;



  protected override void OnCreate(Bundle savedInstanceState)
  {
   base.OnCreate(savedInstanceState);

   // Set our view from the "main" layout resource
   SetContentView(Resource.Layout.Main);

   DaftarWisata = FindViewById<ListView>(Resource.Id.listData);
   itemWisata = new List<Wisata>();
   mProgressBar = FindViewById<ProgressBar>(Resource.Id.listProgressBar);

   //Button btnTambah = FindViewById<Button>(Resource.Id.btnTambah);
   //btnTambah.Click += BtnTambah_Click;

   var webClient = new WebClient();
   webClient.DownloadStringAsync(BaseUri);
   mProgressBar.Visibility = ViewStates.Visible;
   webClient.DownloadStringCompleted += WebClient_DownloadStringCompleted;

  }



  //Parsing JSON ke ListView
  private void WebClient_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
  {
   RunOnUiThread(() =>
   {
    itemWisata = JsonConvert.DeserializeObject<List<Wisata>>(e.Result);
    MyListViewAdapter adapter = new MyListViewAdapter(this, itemWisata);
    mProgressBar.Visibility = ViewStates.Gone;
    DaftarWisata.Adapter = adapter;

    DaftarWisata.ItemClick += DaftarWisata_ItemClick;

   }
   );


  }

  //JIka listview di klik
  void DaftarWisata_ItemClick(object sender, AdapterView.ItemClickEventArgs e)
  {
   //var DaftarProduk = sender as ListView;
   var t = itemWisata[e.Position];
   Toast.MakeText(this, t.id.ToString(), ToastLength.Short).Show();

   string str = t.id.ToString();
   Intent a = new Intent(this, typeof(DetailActivity));
   a.PutExtra("sid", str);
   StartActivity(a);
  }
 }
}

Main.axml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="20dp">
    <ListView
        android:minWidth="25px"
        android:minHeight="25px"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/listData"
        android:layout_marginTop="58.5dp" />
    <ProgressBar
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/listProgressBar"
        android:indeterminate="true"
        android:layout_centerInParent="true"
        android:visibility="gone" />
</RelativeLayout>

Wisata.cs (Class)

using System;
namespace openMaps
{
 public class Wisata
 {
  public Wisata()
  {
  }

  public int id { get; set; }
  public string nama_wisata { get; set; }
  public string nama_kabupaten { get; set; }
 }
}

MyListViewAdapter.cs (Class Adapter)

using System;
using System.Collections.Generic;
using Android.Widget;
using System.Linq;
using System.Text;

using Android.App;
using Android.Content;
using Android.OS;
using Android.Runtime;
using Android.Views;
using Android.Widget;
using System.Net;
using Newtonsoft.Json.Linq;
namespace openMaps
{
 public class MyListViewAdapter : BaseAdapter<Wisata>
 {
  public MyListViewAdapter()
  {
  }

  public List<Wisata> itemWisata;
  private Context mContext;

  public MyListViewAdapter(Context context, List<Wisata> items)
  {
   itemWisata = items;
   mContext = context;
  }

  public override int Count
  {
   get
   {
    return itemWisata.Count;
   }
  }

  public override Wisata this[int position]
  {
   get
   {
    return itemWisata[position];
   }
  }

  public override long GetItemId(int position)
  {
   return position;
  }



  public override View GetView(int position, View convertView, ViewGroup parent)
  {
   View row = convertView;
   if (row == null)
   {
    row = LayoutInflater.From(mContext).Inflate(Resource.Layout.ListViewRow, null, false);

   }

   TextView txtNamaWisata = row.FindViewById<TextView>(Resource.Id.txtNamaWisata);
   txtNamaWisata.Text = itemWisata[position].nama_wisata;

   TextView txtNamaKabupaten = row.FindViewById<TextView>(Resource.Id.txtNamaKabupaten);
   txtNamaKabupaten.Text = itemWisata[position].nama_kabupaten;


   return row;
  }
 }
}

ListViewRow.axml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="5dp">
    <TextView
        android:text="Nama Wisata"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/txtNamaWisata"
        android:textSize="18dp"
        android:textStyle="bold" />
    <TextView
        android:text="Kabupaten"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/txtNamaKabupaten"
        android:textSize="12dp" />
</LinearLayout>

DetailActivity.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Net;
using Newtonsoft.Json.Linq;

using Android.App;
using Android.Content;
using Android.OS;
using Android.Runtime;
using Android.Views;
using Android.Widget;
using Newtonsoft.Json;
using System.Collections.Specialized;

namespace openMaps
{
 [Activity(Label = "Detail Wisata")]
 public class DetailActivity : Activity

 {
  string pId;


  protected override void OnCreate(Bundle savedInstanceState)
  {
   base.OnCreate(savedInstanceState);

   // Set our view from the "main" layout resource
   SetContentView(Resource.Layout.ListViewDetail);
   TextView idnya = FindViewById<TextView>(Resource.Id.txtId);
   TextView namawisata = FindViewById<TextView>(Resource.Id.txtNamaWisata);
   TextView namakabupaten = FindViewById<TextView>(Resource.Id.txtNamaKabupaten);
   Button btnMaps = FindViewById<Button>(Resource.Id.btnMaps);


   string idproduk = Intent.GetStringExtra("sid");

   pId = idproduk;
   WebClient client = new WebClient();
   var jsonstring = client.DownloadString("https://banyu.center/xamarin/detail_wisata.php?id=" + pId);
   JObject o = JObject.Parse(jsonstring);
   var ab = o.GetValue("detail_wisata").ToString();
   JArray arr = JArray.Parse(ab);
   idnya.Text = arr[0]["id"].ToString();
   namawisata.Text = arr[0]["nama_wisata"].ToString();
   namakabupaten.Text = arr[0]["nama_kabupaten"].ToString();
   string locate = "geo:0,0?q=";
   string geolo = namawisata.Text;

   btnMaps.Click += delegate {
   var geoUri = Android.Net.Uri.Parse(locate+geolo);
   var mapIntent = new Intent(Intent.ActionView, geoUri);
   StartActivity(mapIntent);
   };

  }


 }
}

Pada DetailActivity.cs kita melakukan parsing JSON kemudian kita panggil melalui click button untuk mengarahkan ke Maps berdasarkan daerah tertentu

                        pId = idproduk;
   WebClient client = new WebClient();
   var jsonstring = client.DownloadString("https://banyu.center/xamarin/detail_wisata.php?id=" + pId);
   JObject o = JObject.Parse(jsonstring);
   var ab = o.GetValue("detail_wisata").ToString();
   JArray arr = JArray.Parse(ab);
   idnya.Text = arr[0]["id"].ToString();
   namawisata.Text = arr[0]["nama_wisata"].ToString();
   namakabupaten.Text = arr[0]["nama_kabupaten"].ToString();
   string locate = "geo:0,0?q=";
   string geolo = namawisata.Text;

   btnMaps.Click += delegate {
   var geoUri = Android.Net.Uri.Parse(locate+geolo);
   var mapIntent = new Intent(Intent.ActionView, geoUri);
   StartActivity(mapIntent);
   };

ListViewDetail.axml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="20dp">
    <TextView
        android:text="1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/txtId" />
    <TextView
        android:text="Nama Wisata"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/txtNamaWisata"
        android:textSize="18dp"
        android:textStyle="bold" />
    <TextView
        android:text="Kabupaten"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/txtNamaKabupaten"
        android:textSize="12dp" />
    <Button
        android:text="Ambil Arah"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/btnMaps" />
</LinearLayout>