Mobil Programlama

Bölüm 3 (Frameworkler) Ders 3: Cordova

Cordova

21 Nisan 2015 tarihinde, Cordova ekibi (eski adı ile PhoneGap), web geliştiricilerin aynı anda birkaç platform için mobil uygulamalar geliştirmesine olanak tanıyan araçlarının 5.0 sürümünü yayımladı.

Cordova, mobil uygulamaya bir tarayıcı yerleştirerek farklı platformlarda mobil uygulamalar geliştirmenize izin veren bir platformdur. Dolayısıyla, uygulama aslında tek bir siteyi gösteren bir mini tarayıcıdır. İndirmeyi hızlandırmak için tüm kaynaklar uygulamanın dağıtılmış paketine yerleştirilebilir ve gerekirse sunucudan indirilebilir.

Kısaca Cordova(http://cordova.apache.org/), yazılan HTML, CSS ve JS kodlarını mobil uygulama olarak ekrana çıkaran bir framework. Açık kaynak kodlu ve tamamen ücretsiz arkasında Apache’nin bulunduğu bir yapıdır.

Uygulama Geliştirme

Node.js , javascript üzerinde çalışan bir web uygulamasıdır. Geliştiriciler tarafından araçları ve kitaplıkları dağıtmak için kullanılan Node Package Manager veya npm adlı bir paket yöneticisi ile birlikte gelir. Cordova ve eklentileri npm kullanılarak dağıtılmıştır, bu yüzden yüklenmelidir.

Resmi Yükleme Sitesi: https://nodejs.org/en/download/

Şekil 40: Node Js yükleme ekranı

  • Java

Yerel Android uygulamaları Java ile yazılmıştır, bu yüzden yüklemeliyiz.
Java’yı yüklemek için indirme sayfasına gidin ve ücretsiz olarak Java İndir düğmesine tıklayın, işletim sisteminiz için istediğiniz yükleme seçeneğini seçin. İşletim sisteminizin yükleyicisini indirin ve Java’yı yükleyin.

  • Android SDK

Uygulamayı bir Android cihaza dağıtacağımızdan, Android Yazılım Geliştirme Kitini (SDK) kurmak gerekiyor. Git Android Studio ve SDK Araçları ve Tek işletim sisteminiz için SDK Araçları indirin.

Windows için, gerekli paketleri seçmek ve yüklemek için kullanabileceğiniz hazır bir yükleyici var.

  • Cordova yükleme

Gerekli bileşenleri bilgisayarınıza yükledikten sonra, Cordova’nın kurulumuna devam edebilirsiniz. Aşağıdaki komutu komut satırından çalıştırın:

sudo npm install -g cordova

Ya da Komut satırı kullanarak ikinci yöntem:

Kurulum için komut: npm install -g cordova

Proje için Komut:  cordova create merhaba com.ornek.merhaba merhabaDunya

Proje klasörüne girme: cd merhaba

Klasör içeriğini görme komutu: dir

Platformların Eklenmesi

Projenin hangi platformda/işletim sisteminde çalışacağını belirlemek için ilgili platform adı bu kodlar yardımı ile eklenir:

  • Android işletim sitemi için:

cordova platform add android

  • iOS işletim sitemi için:

Şekil 41: Cordova kurulumu

cordova platform add ios

Platform kontrol komutu:

cordova platform ls

Şekil 42: Platform kontrolu

Derleme için ön gereksinim kontrolü komutu: cordova requirements

Şekil 43:Platfom kontrolleri

Platform derlemesi yapmak için gerekli kod: cordova build

Şekil 44: Gereksinim Kontrolleri

Uygulamanın Test edilmesi: cordova emulate android

Uygulama oluşturma

Şimdi Cordova ile basit bir Hello World uygulaması geliştirmeye hazırız. Yeni bir Cordova uygulaması oluşturmak için bir terminal açın ve Cordova uygulaması oluşturma komutunu çalıştırın:

cordova create photosharer com.yourname.photosharer PhotoSharer

Kod:

<!DOCTYPE html>

<html>

<head>

<meta http-equiv=”Content-Security-Policy” content=”default-src ‘self’ data: gap: https://ssl.gstatic.com ‘unsafe-eval’; style-src ‘self’ ‘unsafe-inline’; media-src *”>

<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 rel=”stylesheet” type=”text/css” href=”css/index.css”>

<title>Merhaba Dünya</title>

</head>

<body>

<div class=”app”>

<h1>Apache Cordova</h1>

<div id=”deviceready” class=”blink”>

<p class=”event listening”>Aygıta bağlanılıyor</p>

<p class=”event received”>Aygıt hazır</p>

</div>

</div>

<script type=”text/javascript” src=”cordova.js”></script>

<script type=”text/javascript” src=”js/index.js”></script>

</body>

</html>

 

İkinci komut dosyası index.js dosyasını içerir . Bu, yeni bir Cordova projesi oluştururken varsayılan olarak oluşturulan belirli bir uygulama dosyasıdır. Belirli bir olayda belirli bir kodu yürütür.

Bu dosyayı açarsanız, fonksiyon göreceksiniz receivedEvent gizleme ve iki element gösteren sorumlu p, yukarıda tanımladığımız. Sonra onDeviceReady olayı çağrılır. Böylece, fonksiyon geçirilir etkinlik tanımlayıcı receivedEvent olacaktır deviceready.

onDeviceReady: function() {

app.receivedEvent(‘deviceready’);

},

receivedEvent: function(id) {

var parentElement = document.getElementById(id);
var listeningElement = parentElement.querySelector(‘.listening’);
var receivedElement = parentElement.querySelector(‘.received’);

listeningElement.setAttribute(‘style’, ‘display:none;’);

receivedElement.setAttribute(‘style’, ‘display:block;’);

console.log(‘Received Event: ‘ + id);

}

Sonunda uygulamayı çalıştırma zamanı geldi. Öncelikle, Ratchet mobil web uygulamaları oluşturmak için bir ön platform eklenmelidir.  indirme sayfasından veya komut kullanarak Bower kurun :

bower install ratchet

Bu ve devam edecek anlatımların tamamı ve sınavlar

tez.hilmibilici.com 

alt domaininde yayındadır. Tezimi paylaşıma açıyorum. Alın teridir, lütfen paylaşırken kaynak belirtmeyi unutmayın. 

Bir cevap yazın

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