Visual Studio’da Apache Cordova ile Mobil Uygulama Geliştirme

Apache Cordova ile java ya da swfit bilmeden sadece javascript ile her 2 platform için de uygulama geliştirebilmek artık mümkün.

İhtiyacımız olanları listelemek gerekirse;

  • Visual Studio 201x
  • Visual Studio için Apache Cordova eklentisi
  • Android Emulatör
  • JQuery
  • Bootstrap

Şimdilik bunlar işimizi görecektir. 

Basit bir örnekle senaryomuz şöyle olsun. Bir butonumuz olsun ve o butona basıldığında cihaz titresin.

Öncelikle visual studioyu açtıktan sonra boş bir apache cordova projesi oluşturuyoruz.

Sonrasında solution explorer pencerimizde gördüğümüz dosya yapısında config.xml dosyasını açalım. Karşımıza yukarıdaki igibi bir ayar ekranı gelecektir. Burada Eklentilere tıklayıp listeden Vibration’ı bulalım. Bu eklentiler Apache Cordova’nın bizlere sunduğu varsayılan eklentilerdir. 

Vibration eklentisini sağdaki pencerede bulunan ekle butonuna basarak ekleyelim.

İşlem bittikten sonra eklentinin eklendiğini kaldır butonunun aktif olmasından anlayabiliriz.

www klasörümüzn altında index.html dosyamızı açıp bu dosyayı düzenleyelim.

//INDEX.HTML

<!DOCTYPE html>
<html>
<head>
<!--
Aşağıdaki meta etiketindeki içerik güvenliği ilkesini gerektiği gibi özelleştirin. Satır içi JavaScript’i etkinleştirmek için default-src’ye “unsafe-inline” özelliği ekleyin.
Ayrıntılı bilgi için http://go.microsoft.com/fwlink/?LinkID=617521 adresini ziyaret edin.
-->
<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/bootstrap-theme.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="css/index.css">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<title>CordovaAppExample</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<h1>Cordova Örnek</h1>
</div>
</div>
<div class="row text-center jumbotron">
<div class="col-xs-12">
<h3>Titreşim</h3>
<button id="titret" class="btn btn-info btn-lg">Titret beni</button>
</div>
</div>
</div>
<script src="scripts/jquery-1.9.1.min.js"></script>
<script src="scripts/bootstrap.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="scripts/platformOverrides.js"></script>
<script type="text/javascript" src="scripts/index.js"></script>
</body>
</html>

Daha sonrasında index.html dosyamızın bulunduğu dizindeki scripts klasörünün altında bulunan index.js dosyamızı düzenleyelim.

// Boş şablona giriş için aşağıdaki belgelere bakın:
// http://go.microsoft.com/fwlink/?LinkID=397704
// Cordova-simulate içinde veya Android cihazlarda/öykünücülerinde sayfa yükleme durumunda kodlarda hata ayıklamak için: Uygulamanızı çalıştırın, kesme noktalarını ayarlayın, 
// ve ardından JavaScript Konsolu'ndan "window.location.reload()" kodunu çalıştırın.
(function () {
    "use strict";

    document.addEventListener('deviceready', onDeviceReady.bind(this), false);

    function onDeviceReady() {
        // Cordova duraklama ve devam etme olaylarını işleme
        document.addEventListener('pause', onPause.bind(this), false);
        document.addEventListener('resume', onResume.bind(this), false);

        // TODO: Cordova yüklendi. Burada Cordova gerektiren tüm başlatma işlemlerini gerçekleştirin.
        vibrate();
    };

    function onPause() {
        // TODO: Bu uygulama askıya alındı. Burada uygulama durumunu kaydedin.
    };

    function onResume() {
        // TODO: Bu uygulama yeniden etkinleştirildi. Burada uygulama durumunu geri yükleyin.
    };

    function vibrate() {
        $("#titret").click(function () {
            navigator.vibrate(3000);
        })
    };
})();

Bu düzenlemelerden sonra projeyi bir android emulatör ile debug ettiğimizde görüntü aşağıdaki gibi olacaktır. Fakat emulatör ile cihazın titrediğini anlayamıyoruz. En azından js dosyamıza bir console.log koyarak butonu bastığımızda ne olaylar olduğunu görebiliriz. 

Eğer canlı bir ortamda test etmek istersek bize lazım olacak şeyler Java ve Java SDK (apk imzalamak için). Bu işlemlerin nasıl yapıldığını anlatan bir yazı yazılabilir.

Şahsi olarak söylüyorum ki biraz can sıkıcı hatalarla karşı karşıya kalabilirsiniz.

 

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir