• Thumbnail

            Barctick (Barcode Concert Ticketing) adalah aplikasi mobile yang berfungsi membantu penjualan tiket konser antara penjual tiket (event organizer) dan pembeli dengan menggunakan smartphone. Aplikasi ini […]
  • Pembuatan Web Mobile (Web Search dan Gesture) dengan menggunakan Jquery
     

    Pengembangan aplikasi mobile dapat dilakukan dengan 3 cara, salah satunya adalah dengan menggunakan metode pengembangan berbasis web. Pengembangan aplikasi mobile berbasis web perupakan pemanfaatan pengembangan aplikasi web pada umumnya. Perbedaannya adalah dalam pengembangan mobile web memanfaatkan Jquery untuk mobile.

    Pembuatan aplikasi mobile web dapat dilakukan dengan menggunakan API yang disediakan oleh web service. Masing masing web service memiliki ketentuan dan struktur kode yang berbeda antara satu web service satu dengan yang lain. Dalam contoh ini, web service yang digunakan adalah souncloud. Data hasil pencarian berupa lagu yang ingin dimainkan.

    Langkah-langkah pembuatan Web mobile :

  • Buat file index.html seperti di bawah :
  • Sourcode :

    Index.html

     

    <!DOCTYPE html>

    <html>

    <head>

    <title>Listen To Me</title>

    <link href=’http://fonts.googleapis.com/css?family=Oswald’ rel=’stylesheet’ type=’text/css’>

    <link rel=”stylesheet” type=”text/css” href=”css/style.css”>

    <link rel=”stylesheet” href=”css/jquery.mobile-1.4.5.min.css”>

     

    <meta name=”viewport” content=”width=device-width, initial-scale=1″>

    http://js/jquery-1.11.1.min.js

    http://js/jquery.mobile-1.4.5.min.js

    http://js/app.js

     

     

    $(document).on(“pagecreate”,”#pagethree”,function(){

    $(“p”).on(“swipe”,function(){

    $(“span”).text(‘Laila Munziah, Yuyon Alif Masruri, Qoirul Kotimah, Bagus Kesuma Atmaja’);

     

    });

    });

    </head>

     

    <body>

    Selamat Datang

     

     

    Kelompok 2 PAPB Kelas A 2014

    </div>

     

    Menu 1

     

    Listen To Me

     

     

     

    <!–/#four-columns–>

    <hr />

    </div>

     

    <!–/.container–>

    </div>

    <!–/.wrapper–>

     

    <a href=”#pageone” class=”ui-btn ui-shadow” data-transition=”slide” data-direction=”reverse”>Kembali ke Menu 1</a>

    </div>

     

    Kelompok 2 PAPB Kelas A 2014

    </div>

     

    Menu 2

     

    Swipe kotak untuk menampilkan nama anggota kelompok

     

    Kembali ke Menu 1

     

    Kelompok 2 PAPB Kelas A 2014

    </div>

    </body>

    </html>

     

     

    2. Download API dari souncloud dan masukkan folder js.

    API

    App.js

    var sounds = {

    clientId: ‘client_id=f5f1c67193dfe560ce6db6390276ba45′,

    soundCallback: function(tracks){

    var soundLists = “<ul class=’rig columns-4’>”;

    $.each(tracks, function(index, tracks){

    var downloadUrl = tracks.download_url+ ‘?’ +sounds.clientId;

     

    if(index === 6){ //return only 6 search results

    return false;

    }

    //FUNCTION TO SOLVE FOR URLS WITH FILE NOT FOUND

    function validateUrl(){

    if(tracks.downloadable === false){

    return “This Item Can’t Be Downloaded But can be Played”;

    }

     

    else{

    return “<a href=”+downloadUrl+” title=” + tracks.title + “>Download Song</a>”;

    }

    }

     

    soundLists += “<li>” +

    “<img class=’cover’ src='” + tracks.user.avatar_url + “‘/>” +

    “<h3>” + tracks.title + “</h3>” +

    “<audio class=’cont-4′ src='”+tracks.stream_url+”?client_id=f5f1c67193dfe560ce6db6390276ba45′ type=’audio/mpeg’ controls=’controls’></audio>” +

    “<p>” + validateUrl() + “</p>” +

    “</li>”;

    })//END EACH

    soundLists += ‘</ul>’;

    $(‘#four-columns’).html(soundLists);

    },

    getResource: function(songs){

    var url = ‘https://api.soundcloud.com/tracks.json?q=’ + songs + ‘?&amp;client_id=f5f1c67193dfe560ce6db6390276ba45’;

    $.getJSON(url, sounds.soundCallback)

    },

    forms: function(){

    $(‘form’).submit(function (evt){

    evt.preventDefault();

    var $search = $(‘#search’);

    var $submit = $(‘#submit’);

    var songs = $(‘#search’).val();

    sounds.getResource(songs);

     

    });//End Submit

    }

    }

     

    $(document).ready(sounds.forms);

    $(document).ready(function() {

    $(‘.grid-nav li a’).on(‘click’, function(event){

    event.preventDefault();

    $(‘.grid-container’).fadeOut(500, function(){

    $(‘#’ + gridID).fadeIn(500);

    });

     

    var gridID = $(this).attr(“data-id”);

    $(‘.grid-nav li a’).removeClass(“active”);

    $(this).addClass(“active”);

    });

    });

     

    3. Buat CSS dan import Jquery mobile ke folder masing-masing

    4. Build seluruh file dan folder tadi ke PhoneGap dan jadikan .apk

     

    Screenshot : 

    1418009367896
    Gambar 1. Menu Utama
     

    1418009365117
    Gambar 2. Pilihan Menu 1
    1418009363197
    Gambar 3. Contoh Pencarian Lagu
     

    1418009361167
    Gambar 4. Hasil Pencarian Lagu
     

    1418009358894
    Gambar 5. Pilihan Menu 2
     

    1418009355469
    Gambar 6. Hasil Swipe
    Referensi :

    http://www.w3schools.com/jquerymobile

    api.souncloud.com