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
- https://git-scm.com/downloads adresinden işletim sisteminiz için istediğiniz yükleme seçeneğini seçin.
- js
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
alt domaininde yayındadır. Tezimi paylaşıma açıyorum. Alın teridir, lütfen paylaşırken kaynak belirtmeyi unutmayın.
