• Aplikasi yang dibuat kali ini adalah sebuah aplikasi web yang nantinya akan dikompilasi menjadi aplikasi mobile, aplikasi tersebut harus bisa mengkases web servis menggunaka API ataupun RSS. Untuk obyek aplikasi yang akan dibuat yaitu project movie, terdiri dari 3 halaman, halaman pertama menampilkan halaman search, kemudian halaman kedua menampilkan list-list movie yang kita search dengan keyword sebelumnya dan yang terakhir menampilkan detail movie yang kita pilih.

    Sebelum membuat aplikasinya terlebih dahulu kita instal phonegap untuk mempermudah membuat aplikasi nantinya. Berikut tutorial instalasi phonegap :

  • Pastikan sudah download eclipse dan package-package yang dibutuhkan di Android SDK
  • Download ADT Eclipse pluggin, langkahnya Pilih help -> instal new software -> pada field work with isi saja ADT Pluggin -> pada field URL isi dengan : https://dl-ssl.google.com/android/eclipse/
  • Klik OK, klik next untuk step selanjutnya sampai accept license lalu finsih
  • Ketika instalasi komplit, maka restart eclipse
  • Konfigurasi ADT Plugin
  • Instal MDS AppLaud PhoneGap for Android Plugin, Langkahnya sama seperti instal ADT Plugin pilih help -> install new software -> klik add untuk menambah repository.
  • Field work with beri nama MDS AppLaud, untuk field URL isi : https://svn.codespot.com/a/eclipselabs.org/mobile-web-development-with-phonegap/tags/r1.2/download. Klik Ok. c1
  • Pilih New site dan centang di box PhoneGap for Androidc2
  • Ikuti perintah selanjutnya sampai finish.c3
  •  

    Setelah sukses instalasi phoneGap, lanjut membuat aplikasi dengan phoneGap, tutorialnya sebagai berikut :

    1. Pastikan sukses instalasi phoneGap c4

    2. Buat project baru dengan phoneGap for december c5

    3. Beri nama sesuai dengan project yang akan kita buat, pilih target versi android yang diinginkan. c6

    c7

    4. Setelah itu muncul package di field projek, mulai buat aplikasi di assets -> www -> index.html.

    Berikut sourcecodenya :

     

    <!– Copyright (c) 2012 Mobile Developer Solutions –>

    <!DOCTYPE HTML>

     

    <html>

    <head>

    <title>jQM Complex Demo</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”/>

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

    <link rel=”stylesheet” href=”http://example.gajotres.net/iscrollview/jquery.mobile.iscrollview.css”/>

    <link rel=”stylesheet” href=”http://example.gajotres.net/iscrollview/jquery.mobile.iscrollview-pull.css”/>

    <style>

    .ui-content {

    padding: 0 !important;

    }

     

    .ui-listview {

    margin: 0 !important;

    }

     

    .example-wrapper, .example-wrapper div.iscroll-scroller {

    width: 100% !important;

    }

    </style>

    http://code.jquery.com/jquery-1.10.1.min.js

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

    http://example.gajotres.net/iscrollview/iscroll.js

    http://example.gajotres.net/iscrollview/jquery.mobile.iscrollview.js

     

     

     

    $(document).on(‘pageinit’, ‘#home’, function(){

     

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

    var url = ‘http://api.themoviedb.org/3/’,

    mode = ‘search/movie?query=’,

    movieName = ‘&query=’+encodeURI(q),

    key = ‘&api_key=470fd2ec8853e25d2f8d86f685d2270e’;

     

    $.ajax({

    url: url + mode + movieName + key,

    dataType: “jsonp”,

    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(){

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

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

    if(row.id == movieInfo.id) {

    $(‘#movie-data’).append(‘

  • ‘);

    $(‘#movie-data’).append(‘

  • Title: ‘+row.original_title+’
  • ‘);

    $(‘#movie-data’).append(‘

  • Release date’+row.release_date+’
  • ‘);

    $(‘#movie-data’).append(‘

  • Popularity : ‘+row.popularity+’
  • ‘);

    $(‘#movie-data’).append(‘

  • Popularity : ‘+row.vote_average+’
  • ‘);

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

    }

    });

    });

     

     

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

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

    $.mobile.changePage( “#headline”, { transition: “slide”, changeHash: false });

    });

    var movieInfo = {

    id : null,

    result : null

    }

    var ajax = {

    parseJSONP:function(result){

    movieInfo.result = result.results;

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

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

    $(‘#movie-list’).append(‘

  • ‘ + row.title + ” + row.vote_average + ‘/10
  • ‘);

    });

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

    }

    }

     

    </head>

    <body>

    Search Movie

    </div>

     

     

    Movie List

     

    </div>

    Kelompok-1

    </div>

    Back

    Movie Info

    </div>

    </body>

    </html>

     

    5. Pastikan andoridManifest.xml tidak error

    6. Berikut Screenshott hasil program

    c8

     

    c9

    c10

     
    Tugas ini dikerjakan oleh :
    Kelompok 1 – PAPB B
    Arini Indah P. – 115060807111096
                 Nurya Aghnia F. – 115060801111020
                 Gusnia Syukriyawati – 115090607111036
                 Ester Pesta P. – 115060800111118