PhoneGap ve JQuery Mobile ile Android Uygulaması

Son zamanlarda hızla artan akıllı telefon kullanımıyla birlikte, mobil platform için geliştirilen uygulama sayısında ciddi bir artış meydana geldi. Bu da mobil uygulama geliştiriciler için talep doğmasına sebep oldu. Bugünkü yazıda basit bir uygulama yapıp, mobil uygulama geliştirmeye henüz adım atmamış olanlara yardımcı olmayı hedefliyorum.

Uygulamayı geliştirmeden önce şunu belirtmek isterim ki, Android için gerekli geliştirme ortamını hazırlamış olduğunuzu farzediyorum. Eğer henüz yapmadıysanız buradaki linkten gerekli adımları takip ederek Android SDK ve diğer araçları sisteminize kurabilirsiniz. Daha sonraki PhoneGap ve JQuery Mobile kütüphanelerini indirerek gerekli tüm dosyalara sahip oluyoruz.

Kısaca tanımlamak gerekirse PhoneGap web teknolojilerini Native uygulamalarımızda kullanabilmemiz için bir HTML5 uygulama platformudur.

JQuery Mobile ise JQuery üzerine kurulmuş ve dokunmatik cihazlar için optimize edilmiş bir HTML5 arayüz kütüphanesidir. Bunu kullanmamızın sebebi test edilmiş, sağlam, özelleştirilebilir ve kullanımı kolay arayüz ögelerine sahip olmasıdır. Az sonra göreceğiniz üzere bu kütüphaneler ile uygulama yapmanın bir web uygulaması yapmakla arasında büyük bir fark yoktur.

Artık uygulamamıza başlayabiliriz. Uygulamamızın işlevini özetleyecek olursak açılışta uzaktaki sunucudan JSONP(JSON with Padding) formatında kayıtları alacak ve ekranda gösterecektir. Herhangi birine tıklandığı zaman ise yine uzaktaki sunucudan yazının detayı alınacak ve başka bir sayfada gösterilecektir. JSONP kullanmamızım sebebi bir sunucuya, başka bir sunucudan Javascript ile bağlanmayı engelleyen güvenlik konsepti “Same Origin Policy”. JSONP ile bu sorunun etrafından dolanacağız.

Öncelikle PhoneGap’i Android platformunda kullanabilmek için bu adımları takip etmeniz gerekmektedir. IOS için de gerekli olan adımları aynı sayfada bulabilirsiniz. Bu işlemler sonunda proje klasörümüzü oluşturuyoruz.

JQuery Mobile için gerekli dosyaları da indirip açtıktan sonra onları da projemizdeki www klasörü içine almanız gerekmekte. Bu işlemler sonunda aşağıdakine benzer bir dosya yapısı oluşacaktır.


İlk olarak index.html dosyası içerisinde sayfalarımızı oluşturmamız gerekiyor. Hem anasayfa hem de yazının kendi sayfası index.html içerisinde oluşturulacaktır. Daha büyük projelerde sayfaları ayrı dosyalarda oluşturmak daha mantıklı olacaktır.

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <title>PhoneGap</title>
    <link rel="stylesheet" href="css/jquery.mobile-1.0.1.min.css" />
    <link rel="stylesheet" href="css/theme.css" />
    <script type="text/javascript" src="phonegap-1.4.1.js"></script>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script src="js/main.js"></script>
    <script src="js/jquery.mobile-1.0.1.min.js"></script>
</head>
<body class="home">
    <!-- anasayfa -->
    <div id="homepage" data-role="page">
        <div data-role="header" data-id="main-header">
            <h1>PhoneGap</h1>
        </div>
        <div data-role="content">
            <ul data-inset="true" data-role="listview" id="posts">
                <!-- yazılar buraya gelecek -->
            </ul>
        </div>
    </div>
    <!-- detay sayfası -->
    <div id="postpage" data-role="page">
        <div data-role="header" data-id="main-header">
            <h1>PhoneGap - Post</h1>
        </div>
        <div id="post-content" data-role="content">
            <!-- yazı detayı -->
        </div>
     </div>
</body>
</html>

main.js dosyasında tüm fonksiyonlarımız yer alacak. Burada yapmamız gerekenler şunlar:

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
    // global ayarlar
    common();
    // network kontrolu
    if(!isConnected())
        showConnectionAlert();
    else
        loadPosts();
}

common fonksiyonu uygulamamızın genel ayarlarını içerecektir. Daha sonra mobil cihazımızın internete bağlı olup olmadığını kontrol edip, bağlı ise yazıları yükleyeceğiz. Diğer fonksiyonlar şöyle olacaktır:

var common = function() {
    $.mobile.loadingMessage = 'Yukleniyor...';
    $.mobile.touchOverflowEnabled = true;
    // veri alabilmek icin bunlar yapilmali
    $.mobile.allowCrossDomainPages = true;
    $.mobile.pushStateEnabled = false;
    $.support.cors = true;
}

var isConnected = function() {
    // internet baglantisi kontrolu
    var networkState = navigator.network.connection.type;
    if(networkState == Connection.NONE || typeof networkState === "undefined" || networkState == null)
        return false;
    return true;
}

var showConnectionAlert = function() {
    // baglanti yok mesaji
    navigator.notification.alert(
        'İnternet bağlantısı yok!',
        alertDismissed,
        'Bağlantı',
        'Tamam'
     );
}

var alertDismissed = function() {
    // burada baglanti hatasi kapatildi
    // herhangi bir islem yapabilirsiniz
}

Sunucudan yazıları alıp, sayfaya ekleyen fonksiyon ise:

var loadPosts = function() {
    $.ajax({
        url: 'http://www.emincansumer.com/demo/pg-app/json.php',
        type: 'POST',
        dataType: 'jsonp',
        timeout: 10000,
        cache: false,
        beforeSend: function(xhr, settings){
            $.mobile.showPageLoadingMsg();
        },
        complete: function(xhr, textStatus) {
            $.mobile.hidePageLoadingMsg();
        },
        success: function(data, textStatus, xhr) {
            $.each(data, function(ind, post) {
                $("#posts").append(
                    $("<li>").append(
                        $("<a>").attr("href","#postpage").attr("onclick","showPost("+post.id+")").text(post.title).append(
                            $("<span>").addClass("ui-li-count").text(post.comment_num)

                )));
            });
            // yazilari ekledikten sonra listeyi yenilemeliyiz
            $("#posts").listview("refresh");
         },
         error: function(xhr, textStatus, errorThrown) {
             alert(textStatus);
         }
    });
}

Yukarıda gördüğünüz üzere, tüm yazıları alıp, liste olarak yazdırıyoruz. Her yazıya tıklandığında gidilecek olan sayfamızın ismi #postpage ve bu sayfaya giderken yazının sayfaya eklenmesini sağlayan fonksiyon ise showPost(post_id) :

var showPost = function(id) {
    $.ajax({
        url: 'http://www.emincansumer.com/demo/pg-app/json.php',
        type: 'POST',
        dataType: 'jsonp',
        data: {id: id},
        timeout: 10000,
        cache: false,
        beforeSend: function(xhr, settings){
            $("#post-content").html("");
            $.mobile.showPageLoadingMsg();
        },
        complete: function(xhr, textStatus) {
            $.mobile.hidePageLoadingMsg();
        },
        success: function(data, textStatus, xhr) {
            $("#post-content").append(
                $("<h2>").text(data.title)
            ).append(
                $("<p>").text(data.body)
            );
            // yazilari ekledikten sonra listeyi yenilemeliyiz
            $("#posts").listview("refresh");
        },
        error: function(xhr, textStatus, errorThrown) {
            alert(textStatus);
        }
    });
}

Artık tüm fonksyionlarımız ve sayfalarımız hazır. Şimdi yazılarımızı gonderen web servisimizi hazırlıyoruz. Sunucumuzda bulunacak json.php dosyasımız basitçe aşağıdaki gibi olacaktır:

<?php
header('Content-type: application/json');
$posts = array(
    1 => array(
    "id" => "1",
    "title" => "Vestibulum Egestas Fringilla",
    "body" => "Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit.",
    "comment_num" => 12
    ),
    "2" => array(
        "id" => "2",
        "title" => "Inceptos Sollicitudin Amet",
        "body" => "Donec ullamcorper nulla non metus auctor fringilla. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.",
        "comment_num" => 2
    ),
    "3" => array(
        "id" => "3",
        "title" => "Mattis Consectetur Fringilla",
        "body" => "Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas faucibus mollis interdum.",
        "comment_num" => 7
    ),
    "4" => array(
        "id" => "4",
        "title" => "Dolor Fusce Parturient",
        "body" => "Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus.",
        "comment_num" => 10
    ),
    "5" => array(
        "id" => "5",
        "title" => "Sollicitudin Magna Sit",
        "body" => "Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas sed diam eget risus varius blandit sit amet non magna.",
        "comment_num" => 17
    )
);

if(isset($_REQUEST['id'])){
    $id = intval($_REQUEST['id']);
    if(isset($posts[$id])){
        echo $_REQUEST['callback'] . "(" . json_encode($posts[$id]) . ")";
    }
}
else
    echo $_REQUEST['callback'] . "(" . json_encode($posts) . ")";

exit(0);
?>

json.php’yi de sunucuya yükledikten sonra artık programı test edebiliriz.

Uygulamanın tüm kaynak kodlarını buradan indirebilirsiniz.

Comments

  1. Bu faydalı bilgiler ve güzel anlatım için teşekkürler. Acaba bütün projenin kaynak kodunu paylaşmanız mümkün müdür?

    Reply
  2. Merhabalar,
    Merak ettiğim diyelim ki bir otel rezervasyonu web sitesinin uygulaması yapılacak.bunun için serverla iletişim veya servar tarafında neler yapılmalı? Sanırım Jqeury burada sadece web sitenin görsel tasarımı için gerekli?

    Reply
    • Cihazdan sadece rezervasyon bilgileri, parametre olarak sunucuya gönderilip; sunucuda bu parametreler veritabanına kaydedilebilir. Yapılacak uygulamanın detaylarına göre sunucuda yapılacak işlemler değişebilir.
      Cihaz tarafında yapılacak olan tüm işlemler JQuery yardımı ile yapılabilir. Mesela buradaki tüm fonksiyonlarda JQuery’den faydalanılıyor. Ancak JQuery Mobile’ın görsel tasarım için yardımcı bir araç olduğunu da söyleyebilirim.

      Reply
  3. Projenın sonundaki kaynak kodlarını bir daha koyabılırmısınız ulaşılamıyor,lütfen

    Reply
  4. Önceli,kle yazı için teşekkürler. Androidden içerik sunmak istiyorum. Sizinkisi gibi alt linkleri bulunan 20 adet buton olduğunu düşünelim. Bunlara girildiğinde buton yerine ekranın touchpad özelliği ile sağa veya sola ilerek içerikler arasında gezdirebilirmiyim?

    Tşk.

    Reply
  5. Merhaba
    Altta paylaştığınız kaynak kodları Existing Android Code into Project seçerek import ettim. com.phonegap.* gibi bir çok şeyi hata olarak gösterdi. Sonra phonegap1.4.1.jar ‘a sağ tıklayarak add build path dedim hatalar kayboldu ama telefonumda derlediğimde çalışmıyor. Siyah bir ekran çıkıyor ve program sonlandırıldı diyor. Ne yapabilirim?
    Teşekkürler…

    Reply
    • Konsoldan hataları görmeden birşey sölemek mümkün değil. Hata mesajlarını paylaşabilirseniz belki yardımcı olabilirim.

      Reply
  6. Çok güzel paylaşım ellerinize sağlık. Peki ben içerik değil de direk olarak yayında olan bir siteyi ekrana getirmek istiyorum. Yani kullanıcı web browserdan değil de uygulamaya tıklayarak direk siteye girebilsin. Bunu hem ios da hem de android deyapmak istiyorum. Bunu yapmanın kolay bir yolu var mıdır acaba. Bu arada site tv yayını yapan bir site.
    Şimdiden teşekkürler

    Reply
  7. merhabalar öncelikle. çok güzel bir yazı olmuş ellerine sağlık. benim sizden bir ricam olacaktı. ben birkaç sayfadan oluşan bir html site oluşturdum phonegap ile tümleştirip derledim telefonuma attım çok güzel de çalıştı. tam istediğim gibi. lakin yeni bir şey eklemek istedim. programın girişinde bir giriş ekranı olsun. işte bir hoşgeldiniz yazısı ve butonlar olsun istedim. bunu da yaptım güzel. gelin görün ki giriş butonu çalışmakta fakat denendiğim bir sürü html çıkış butonları çalışmamakta. pc üzerindeki denemelerde çalışıyor buton. Explorer, Chrome ve Firefox’ta denedim çalıştı ama android cihazımda çalışmadı. Sizden ricam butonu nasıl yapabilirim? Konu ile ilgili çok bilgim olduğunu söyleyemem.

    Reply
    • Çıkış butonundan tam olarak ne kastettiğinizi anlayamadım. Hazırladığınız sayfayı web üzerinde bir yere atıp linkini verebilirseniz belki yardımcı olabilirim.

      Reply
  8. Elinize Sağlık, çok güzel bir ders olmuş, Teşekkür ederim. Bide ayrı sayfa mantığını kısaca anlatabilirmisiniz? içerik detayları detay.html de nasıl göstereceğiz?

    Reply
    • Ben teşekkür ederim. Aslında sayfa mantığı normal HTML’deki link vererek yeni sayfaya yönlendirme mantığından farklı değil. Ama tüm uygulama sayfalarını tek bir sayfada toplama şansın da var. Buradaki ‘Multi-page template structure’ başlığı altında detaylı bilgi bulabilirsin.

      Reply
  9. Hocam teşekkür ederim. inceledim ama burada da benim istediğim şeyi vermiyor zennerdsem. Değişik id’li iki div e işlem yaptırıyor.ben ise listwievdeki tıklanan içeriğin detay.html gibi başka bir sayfada gösterilmesini istiyorum.sorunum ise detay.html’ye id’yi gönderemem. :)

    Reply
    • Bunun için üç yöntem kullanabilirsin:

      1- Url’den hash(#) ie veri gönderip, açılan detay sayfasında url’yi javascript ile parse ederek. Ör: /detay.html#1 gibi
      2- Veriyi ‘localStorage’a kaydedip, açılan sayfada ‘localStorage’dan alarak. Bununla ilgili detaylı bilgiyi internette kolaylıkla bulabilirsin.
      3- Javascript ile veriyi direk göndererek. Ör: linkin onclick event’ine yazdığın fonksiyona parametre olarak id verebilirsin.

      Aklıma gelen çözümler bunlar. Umarım yardımcı olur.

      Reply
  10. Hocam anlatım için çok teşekkürler ama link çalışmıyor gibi. Rica etsem tekrar güncelleyebilir misin?

    Reply
  11. Hocam guzel anlatım icin teşekkürler. Merak ettigim iOS’da phonegap ile kullanıcıya bildirim gonderebiliyor muyuz acaba. Aklimdasin uygulama belirli aralıklarla kullanica bildirim göndermek zorunda. Bunun çözümü var mıdır ?

    Reply
  12. Merhaba, yazınızı okuyarak bir uygulama denemesi yaptım. Uygulamadan çıkış butonu için ne yapmam gerekiyor?

    Reply
    • IOS’ta böyle bir şansınız yok ama diğer platformlarda ‘navigator.app.exitApp();’ deneyebilirsiniz.

      Reply

Leave a Reply to isaac Cancel reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>