• Pada tutorial mobile web service menggunakan ajax dan json ini, akan membuat aplikasi mobile pencari buku pada service web http://it-ebooks.info/

    Resource URL
    http://it-ebooks-api.info/v1/

    Request Method
    REST (GET)

    Response Format
    JSON

    Response Encoding
    UTF-8

    Pertama tama buat file html sebagai web yang digunakan untuk mengakses web service tersebut.

    Buat index.html dengan isi

    <body>http://script.js

     

    Search Buku

     

    KELOMPOK 5

    Fahmi Hammadi Wiriyo 125150200111018

    Kanthi Raraswati 115060801111062

    Elok Fatma Anjarwati 115090600111009

    Gregoria Willa Krisnanti 115090601111015

    </div>

     

    Back

    Web Service EBook IT

      </div>

      Kelompok 5

      </div>

      Back

      Info Buku

      </div>

      Back

      Info Buku

      </div>

      </body>

      Selanjutnya tambahkan juga service lainnya seperti script jquery yang bisa didownload http://jquerymobile.com/ lalu implementasikan juga pada web tersebut.

      <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”/>

      <link rel=”stylesheet” href=”jquery.mobile-1.4.0-beta.1.min.css”/>

      <link rel=”stylesheet” href=”jquery.mobile.iscrollview.css”/>

      <link rel=”stylesheet” href=”jquery.mobile.iscrollview-pull.css”/>

       

      <style type=”text/css”>

      .ui-content { padding: 0 !important; }

      .ui-listview { margin: 0 !important; }

      .example-wrapper, .example-wrapper div.iscroll-scroller { width: 100% !important; }

      </style>

       

      http://jquery-1.10.1.min.js

      http://jquery.mobile-1.4.0-beta.1.min.js

      http://iscroll.js

      http://jquery.mobile.iscrollview.js

      Selanjutnya buat javascript untuk memproses web service it-ebooks yang akan di buat

      $(document).on(‘pageinit’, ‘#home’, function(){var q = document.getElementById(“searchterm”).value;

      var url = ‘http://it-ebooks-api.info/v1/search/’+q;

      $.ajax({

      url: url,

      dataType: “json”,

      async: true,

      success: function (result) {

      ajax.parseJSONP(result); },

      error: function (request,error) {

      alert(‘Network error has occurred please try again!’); }

      });

      });

      $(“#find”).click(function(){ location.reload(); });

      //$(document).ready(function{

      /*$(“#find”).click(function(){

      var q = document.getElementById(“searchterm”).value;

      var url = ‘http://it-ebooks-api.info/v1/search/’+q;

      $.ajax({

      url: url,

      dataType: “json”,

      async: true,

      success: function (result) {

      ajax.parseJSONP(result); },

      error: function (request,error) {

      alert(‘Network error has occurred please try again!’); }

      });

      });*/

      $(document).on(‘pagebeforeshow’, ‘#headline’, function(){

      $(‘#book-data’).empty();

      $.each(bookInfo.result, function(i, row) {

      if(row.ID == bookInfo.id) {

      $(‘#book-data’).append(‘<center>’+row.Title+'</center><br><center><img src=”‘+row.Image+'”></center>’);

      $(‘#book-data’).append(‘<center><li>ISBN : ‘+row.isbn+'</li><br></center>’);

      $(‘#book-data’).append(‘<center>Description</center><br>’+row.Description);

      $(‘#book-data’).listview(‘refresh’); }

      });

      });

      $(document).on(‘vclick’, ‘#book-list li a’, function(){

      bookInfo.id = $(this).attr(‘data-id’);

      $.mobile.changePage( “#headline”, {

      transition: “slide”, changeHash: false });

      });

      var bookInfo = { id : null, result : null }

      var ajax = {

      parseJSONP:function(result){ bookInfo.result = result.Books;

      $.each(result.Books, function(i, row) {

      console.log(JSON.stringify(row));

      $(‘#book-list’).append(‘<li><a href=”” data-id=”‘ + row.ID + ‘”><img src=”‘+row.Image+'”/><h3>’ + row.Title + ‘</h3><p>ISBN :’ + row.isbn + ‘</p></a> </li>’);

      });

      $(‘#book-list’).listview(‘refresh’); } }

       

      Selanjutnya buat programnya di eclipse agar bisa diakses juga pada aplikasi mobila

      Setelah itu buat file index.html dan file lainnya tadi bisa diakses di mobile.

    • Buka project eclipse android application baru
    • Buat folder baru dalam folder project eclipse yang dibuat (www)
    • 1
    • Selanjutnya copykan file phonegap dengan mendownload filenya di http://phonegap.com/install/
    • 2
    • Setelah itu copykan juga file cordova-2.2.0.js ke folder yang sama dengan index.html
    • 2
    • Setelah itu copykan juga file cordova-2.2.0.jar ke folder lib dalam project ada
    • Selanjutnya konfigurasikan build pathnya agar file tadi bisa diakses.
    • Klik kanan pada project yang dibuat , Pilih build path, lalu pilih configure build path, Selanjutnya pada library klik add JARs, lalu pilih path cordova.jar tadi yang di copy kan ke folder lib
    • 3
    • Edit file MAIN project
    • package com.example.test;

       

      import org.apache.cordova.DroidGap;

      import android.os.Bundle;

       

       

      public class MainActivity extends DroidGap {

       

      @Override

      public void onCreate(Bundle savedInstanceState) {

      super.onCreate(savedInstanceState);

      super.loadUrl(“file:///android_asset/www/index.html”);

      }

      }

    • Lalu tambahkan beberapa permission di file android manifest
    • <?xml version=“1.0” encoding=“utf-8”?>

      <manifest xmlns:android=“http://schemas.android.com/apk/res/android”

      package=“com.example.test”

      android:versionCode=“1”

      android:versionName=“1.0” >

       

      <uses-sdk

      android:minSdkVersion=“19”

      android:targetSdkVersion=“21” />

       

      <application

      android:allowBackup=“true”

      android:icon=“@drawable/ic_launcher”

      android:label=“@string/app_name”

      android:theme=“@style/AppTheme” >

      <activity

      android:name=“.MainActivity”

      android:label=“@string/app_name” >

      <intent-filter>

      <action android:name=“android.intent.action.MAIN” />

       

      <category android:name=“android.intent.category.LAUNCHER” />

      </intent-filter>

      </activity>

      </application>

      <supports-screens

      android:largeScreens=“true”

      android:normalScreens=“true”

      android:smallScreens=“true”

      android:resizeable=“true”

      android:anyDensity=“true”

      />

      <uses-permission android:name=“android.permission.CAMERA” />

      <uses-permission android:name=“android.permission.VIBRATE” />

      <uses-permission android:name=“android.permission.ACCESS_COARSE_LOCATION” />

      <uses-permission android:name=“android.permission.ACCESS_FINE_LOCATION” />

      <uses-permission android:name=“android.permission.ACCESS_LOCATION_EXTRA_COMMANDS” />

      <uses-permission android:name=“android.permission.READ_PHONE_STATE” />

      <uses-permission android:name=“android.permission.INTERNET” />

      <uses-permission android:name=“android.permission.RECEIVE_SMS” />

      <uses-permission android:name=“android.permission.RECORD_AUDIO” />

      <uses-permission android:name=“android.permission.MODIFY_AUDIO_SETTINGS” />

      <uses-permission android:name=“android.permission.READ_CONTACTS” />

      <uses-permission android:name=“android.permission.WRITE_CONTACTS” />

      <uses-permission android:name=“android.permission.WRITE_EXTERNAL_STORAGE” />

      <uses-permission android:name=“android.permission.ACCESS_NETWORK_STATE” />

      <uses-permission android:name=“android.permission.GET_ACCOUNTS” />

      <uses-permission android:name=“android.permission.BROADCAST_STICKY” />

      </manifest>

       

    • RUN Aplikasi
    •  

      SCREENSHOOT PROGRAM

      645