JQUERY MOBILE DAN AJAX UNTUK MENGAKSES WEATHER WEB SERVICE

Posted by : Unknown Jumat, 12 Desember 2014

JQuery Mobile merupakan freamwork yang membantu kita unuk membuat tampilan web untuk mobile device, seperti smartphone dan tablet android, dengan menggunakan Jquery Mobile ini dapat memudahkan proses pembuatan suatu website dan membuatnya menjadi lebih menarik.

Web Service adalah aplikasi sekumpulan data(database), perangkat lunak yang dapat diakses dan diremote oleh berbagai pranti dengan sebuah perantara tertentu. Secara umum web service diidentifikasikan dengan URL seperti hanya web pada umumnya. URL webservice hanya mengandung kumpulan informasi, perintah, konfigurasi atau sintaks yang berguna membangun sebuah fungsi-fungsi tertentu dari aplikasi.

Aplikasi Weather Web service adalah aplikasi untuk mencari atau mengakses perkiraan cuaca disetiap kota atau negara. Webservice dari weather ini sendiri diakses dari URL http://api.openweathermap.org/data/2.5/ dan untuk datatypenya menggunakan Json.

Sebelum Membuat aplikasi ini ada beberapa hal yang perlu dipersiapkan diantaranya :

1. Eclipes ADT untuk membuat aplikasi berbasis android

2. Device android sebagai compiler

3. JQuery Mobile sebagai Freamwork

4. API :

5. Install PhoneGap untuk menjadikan web mobile menjadi sebagai apk.

Pada artikel kali ini untuk aplikasi mengenai open webservice penulis membuat contoh aplikasi mengakses weather / perkiraan cuaca dengan memanfaatkan JQuery Mobile.

Featur dari aplikasi ini terdiri dari menu utama, yang didalamanya terdapat 2 tombol menu, Menu Cuaca Terkini dan Contoh Efek dari Jquery Mobile yaitu touch dari Jquery Mobile.

Langkah Langkahnya :

Langkah pertama buat project baru dengan cara meng-click icone phonegap pada toolbar di eclipse.

Selanjutnya isi dialognya sesuai keperluan, setelah selesai klik finish

Setelah itu akan muncul package yang telah anda buat.

Langkah selanjutnya bukan assets/www/index.html buka index.html dengan cara click kanan>open with> text editor kemudian masukan sourcode seperti dibawah ini.


<!DOCTYPE HTML>
<html>
<head>
 <title>PAPB A Kel 5</title>
 <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
 <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
    <!-- pemanggilan css -->
 <link rel="stylesheet" href="dist/css/jquery.mobile-1.4.5.css"/>
 <link rel="stylesheet" href="dist/css/style.css"/>
    <link rel="stylesheet" href="dist/css/jquery.mobile.iscrollview.css"/>
    <link rel="stylesheet" href="dist/css/jquery.mobile.iscrollview-pull.css"/>
</head>

<body>

<!-- page menu_depan -->
<div data-role="page" id="menu_depan">
 <div data-role="header" data-theme="b">
  <h1>PAPB A Kel 5</h1>
 </div><!-- /header -->
 <div role="main" class="ui-content">
  <ul data-role="listview" data-inset="true">
      <ul data-role="listview" data-inset="true">
       <li><a class="ui-btn ui-icon-location ui-btn-icon-left" href="#cari_cuaca">Cuaca Terkini</a></li>
       <li><a class="ui-btn ui-icon-star ui-btn-icon-left" href="#contoh_efek">Contoh Efek</a></li>
   </ul>
  </ul>
 </div>
 <div data-role="footer" data-theme="b">
        <div data-role="navbar">
            <ul>
                <li><a href="#tentang" data-icon="info">Tentang Aplikasi</a></li>
            </ul>
        </div>
 </div>
</div>


    <!-- page pencarian kota -->
 <div data-role="page" id="cari_cuaca">
  <div data-role="header" data-theme="b">
   <h1>Cuaca Terkini</h1>
  </div>
  <div data-role="main" class="ui-content">
   <input id="searchterm" type="search" placeholder="Masukan nama kota"/>
   <a href="#hasil_pencarian" class="ui-btn ui-corner-all ui-icon-search ui-btn-icon-right ui-btn-b" data-icon="search">Cari</a>
  </div>
  <div data-role="footer" data-theme="b">
        <div data-role="navbar">
            <ul>
                <li><a href="#tentang" data-icon="info">Tentang Aplikasi</a></li>
            </ul>
        </div>
  </div>
 </div>

    <!-- page hasil pencarian -->
 <div data-role="page" id="hasil_pencarian">
  <div data-theme="b" data-role="header">
   <h3>Cuaca Terkini</h3>
  </div>

  <div data-role="content" class="ui-content">

    <ul style="width:100%;" data-role="listview" data-inset="true" id="cuaca"></ul>

  </div>

  <div data-role="footer" data-theme="b">
        <div data-role="navbar">
            <ul>
                <li><a href="#tentang" data-icon="info">Tentang Aplikasi</a></li>
            </ul>
        </div><!-- /navbar -->
  </div><!-- /footer -->
 </div>

    <!-- page contoh efek -->
 <div data-role="page" id="contoh_efek">
  <div data-role="header" data-theme="b">
   <h1>Cuaca Efek Touch</h1>
  </div>
  <div data-role="main" class="ui-content">
   <p>Sentuh tombol satu-persatu</p>
      <button class="ui-btn ui-btn-b">Tombol Satu</button>
      <button class="ui-btn ui-btn-b">Tombol Dua</button>
  </div>
  <div data-role="footer" data-theme="b">
        <div data-role="navbar">
            <ul>
                <li><a href="#tentang" data-icon="info">Tentang Aplikasi</a></li>
            </ul>
        </div><!-- /navbar -->
  </div><!-- /footer -->
 </div>

    <!-- page tentang -->
 <div data-role="page" id="tentang">
  <div data-role="header" data-theme="b">
   <h1>Tentang Aplikasi</h1>
  </div>
  <div data-role="main" class="ui-content">
   <p>Aplikasi ini merupakan tugas ke-4 PAPB Kelas A</p>
  </div>
 </div>

    <!-- pemanggilan javascript -->
 <script src="dist/js/jquery-1.10.1.min.js"></script>
    <script src="dist/js/jquery.mobile-1.4.5.js"></script>
    <script src="dist/js/iscroll.js"></script>
    <script src="dist/js/jquery.mobile.iscrollview.js"></script>
    <!-- script utama pemanggilan json pada api -->
 <script>
  
  $(document).on('pageinit', '#hasil_pencarian', function()
  {
   var q = document.getElementById("searchterm").value;
   var url = 'http://api.openweathermap.org/data/2.5/',
   cuacaName = 'weather?q='+encodeURI(q),
   key = '&APPID=504113a2cdc4852b2fc3bebd990ece80';
   $.ajax(
   {
    url: url + cuacaName + key,
    dataType: "jsonp",
    async: true,
    success: function (result)
    {
     ajax.parseJSONP(result);
    },
    error: function (request,error)
    {
     alert('Network error has occurred please try again!');
    }
   });
  });

  var ajax =
  {
   parseJSONP:function(result)
   {
    $('#cuaca').append('<li><h2>'+ result.name + '</h2></li>');
    parts = result.weather;
    $.each(parts, function(i, row)
    {
     var q = document.getElementById("searchterm").value;
     console.log(JSON.stringify(row));
     $('#cuaca').append('<li><img style="width:100%;" src="http://openweathermap.org/img/w/'+row.icon+'.png"><h3>' + row.main + '</h3><p>' + row.description + '</p></li>');
    });
    $('#cuaca').listview('refresh');
   }
  }
 </script>
    <!-- script contoh efek -->
 <script>
  $(document).on("pagecreate","#contoh_efek",function(){
    $("button").on("tap",function(){
      $(this).hide();
    });
  });
 </script>
</body>
</html>




Setelah
semua proses dijalankan saatnya untuk menjalankan program Klik kanan pada
project lalu Klik Run As > Android Aplications

Hasilnya
akan tampak seperti dibawah ini.

1.      Menu Utama



2.      Halaman Mengakses webservice weather 


3. Menampilkan hasil pencarian cuaca di daerah malang