Apache Cordova Nedir?

Apache Cordova Hakkında

Cordova web tabanlı cross platform mobil uygulama geliştirmemize yarayan bir open source javascript framework'üdür. Bu demek oluyor ki HTML,CSS ve javascript kullanarak mobil uygulama geliştirebileceğimiz anlamına geliyor. Cordova cihaz fonksiyonlarına erişmek için javascript api'leri sunuyor. Bu apiler yardımıyla çeşitli cihaz özelliklerine erişebiliyoruz örneğin kameradan görüntü almak, bildirim göndermek, dosya işlemleri gibi bir çok cihaz özelliklerine erişebiliyoruz. Apileri daha detaylı incelemek ve tüm api listesini görmek için şu adrese bakabilirsiniz. Cordova Plugins

Web tabanlı olduğu için çeşitli web frameworklerinide örneğin jQuery Mobil, Dojo Mobil, Sencha Touch, Ionc framework, Monoca, Onsen UI gibi bir çok framework kullanmanıza imkan sağlıyor. Ayrıca yazmış olduğumuz kodları istediğiniz platform da derleyip Store yükleyecek şekilde hazırayıp veriyor. Uygulamanızı Android, Symbian OS, Windows Phone, Web OS ve Bada dışında iOS ve BlackBerry için de derleyecekseniz bu iki platformun geliştirici portallarına giriş yaparak imza anahtarları almanız gerekiyor. Bu anahtarları PhoneGap üzerine yükleyerek iOS ve BlackBerry için kolayca derleme yapabilirsiniz.


Yüklenmesi
Cordova ile uygulama geliştirebilmek için öncelikle bunların node.js modüllerine ihtiyacımız var. Bu modülleri edinmek ve kullanabilmek içinde node.js yi kurmamız gerekli. Node.js hakkında bilgi sahibi olmanızı gerektirecek bir şey yok ama yeni tanışan arkadaşlar için javascript dilini kullanan,sunucu tabancı uygulama geliştirmeyi sağlayan bir platform olarak tanımlayabiliriz. Şu linkten NodeJs'i indirebilirsiniz.

Şimdi komut satırını açarak node -v ve npm -v komutlarını girdiğinizde node.js ve npm nin versiyonlarının yazması gerek. Eğer node ve npm komutu bulunamıyor diyorsa ortam değişkenleri üzerinden node ve npm komutlarını global şekilde çalışabilmesi için ayarlamamız gerek.

Bu ayarları nasıl yaparız?

• Node.js nin kurulumunun yapıldığı klasörün dosya yolunu kopyalayın.
• Bilgisayarımı açın.
• Sistem özelliklerini açın.
• Sağda gelişmiş sistem özelliklerini açın.
• Açılan pencerede altta ortam değişkenlerine tıklayın.
• Açılan pencerede alt kısımda Path ı bulup düzenleye tıklayın.
• Alttaki değişken değeri kısmını silmeden en sonuna ; ve kopyaladığımız klasör yolunu yapıştırıp tamama tıklayın.

Şimdi node -v ve npm -v komutlarının çalışması gerek.


NodeJs'i kurduktan sonra şu komut ile cordova'yı bilgisayarınıza kurabilirsiniz.. Burada extra eklemek istediğim bilgi cordova'yı indirmek için npm komutunu kullanacağız. Npm açılımı ile node.js package manager Türkçesi ile node.js paket yönetim sistemi. Ayrıca burada ki -g komutu bütün bilgisayara cordova'yı yüklemek istediğinizi belirtmeniz eğer -g kaldırırsanız sadece cmd'nin açık olduğu dizine kuracaktır. Tekrar tekrar kurmak zorunda kalmamanız için -g şeklinde kurmanızı öneririm.

$ npm install -g cordova

İlk projenin oluşturulması

Yükleme işleminiz bittikten sonra ilk projemizi oluşturalım ve klasör yapısına göz atalım. Aşadaki komut ile MyApp adında bir cordova projesi oluşturacaktır. MyApp kısmını kendi proje adınıza göre değiştirebilişiniz.

$ cordova create MyApp

Klasör yapısı

Oluşturulan projenin klasör yapısına bakacak olursak şu şekilde;

|-MyApp/
    |
    |--hooks
    |--platforms
    |--plugins
    |--www
    |--config.xml
   

Genel olarak en sade klasör yapısı bu şekilde oluşuyor proje durumuna göre yeni klasörler eklenebilir.

Hooks

Cordova Hooks cordova komutları özelleştirmek için hatta kendi komut sistemi ile veya uygulama ve eklenti geliştiricileri tarafından eklenebilir özel komut temsil etmektedir. Kısaca kendimize özğü cordova komutları oluşturabileceğimiz yada var olan komutları kendimize göre özelleştirebileceğimiz bir sistem bu sistemi daha detaylı incelemek için şu adrese bakabilirsiniz. Cordova hooks

Platforms

Bu klasör altında eklemiş olduğunuz mobil platformların dosyaları bulunmaktadır. İlk başta ekli olan platform olmadığı için boş gelecektir ileride platform ekleme silme gibi komutları inceleyeceğiz.

Plugins

Bu klasör de ise cordova api'lerinin tutulduğunu görüceksiniz ilerde eklemiş olduğumuz eklentiler bu klasör altında toplanacak.

www

Adından da anlaşılacağı gibi HTML,CSS ve javascript gibi temel web dosyalarımız bulunacak. Cordova derlenirken bu klasör altındaki dosyaları ilgili mobil platformunuza derleyip hazır edecek.

Config.xml

Bu kısım cordova ve platform ayarlanın yapıldığı kısım burası bu kısmı en temel halinde incelemek istiyorum.

<?xml version='1.0' encoding='utf-8'?> <widget id="io.cordova.hellocordova" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0"> <name>HelloCordova</name> <description> A sample Apache Cordova application that responds to the deviceready event. </description> <author email="dev@cordova.apache.org" href="http://cordova.io"> Apache Cordova Team </author> <content src="index.html" /> <plugin name="cordova-plugin-whitelist" spec="1" /> <access origin="*" /> <allow-intent href="http://*/*" /> <allow-intent href="https://*/*" /> <allow-intent href="tel:*" /> <allow-intent href="sms:*" /> <allow-intent href="mailto:*" /> <allow-intent href="geo:*" /> <platform name="android"> <allow-intent href="market:*" /> </platform> <platform name="ios"> <allow-intent href="itms:*" /> <allow-intent href="itms-apps:*" /> </platform> </widget>

Xml Renksiz hali biraz kötü gözükse de şu işe yarıyor.

<widget> tagın da vermiş olduğunuz id attiribute sizin uygulamanızın paket adına denk geliyor. xmlns:cdv attiribute ise cordova tabanlı bir uygulama olduğunu belirmiş oluyoruz.

<name> tagın da ise uygulamanın adını belirtiyoruz. Yani mobilde uygulamanızın gözükecek adı...

<description>  tagın da uygulamanız hakkında tanımlama yapabilirsiniz.

<author> da ise kendiniz yada şirketinizin isim, email veya siteniz gibi bilgilerinizi girebilirsiniz.

<content> de ise başlangıç sayfasını belirliyoruz ancak bu kısım biraz tehlikeli javascript tarafında da yazıldığı için burayı değiştirdiğinizde javascript tarafında da ayarları düzeltmeniz gerekmektedir aksi halde sorun çıkarabiliyor.

<plugin> uygulamaya eklediğimiz apilerin bilgilerini tutuyor.

<access origin="*" /> uygulamanın erişim alanları ile ilgili kısıtlamalar getirebilmemize olanak sağlıyor.

<allow-intent>  uyguama içindeki telefon numaraları, epostalar veya linklere tıkladığımız da ilgili uygulamaya gitmesini sağlamamız için örneğin telefon numarasına tıklayınca arama ekranına gitsin gibi..

<platform> eklemiş olduğunuz platformların bilgilerini içeriyor.

En sade config.xml yapısı bu şekilde platform ve eklenti ekledikçe buraya yeni taglar gelecektir gene yapı bu şekilde.

Çalıştırılması ve test edilmesi

Uygulamayı 3 şekilde çalıştırabilirsiniz.
1. Browser
2. Emulator
3. Device (Bunu usb ile telefonunuza bağlayarak yada ilgili platformun setup dosyasını telefonunuza yükleyerek yapabiliyoruz.)

En kolay yolu olan browser ile bir test yapmak istiyorum bunun için şu  kodu config dosyasının olduğu dizinde cmd de çalıştırıyoruz. Bu sayede browser platformunu eklemiş olucağız.

$ MyApp cordova platform add browser

Daha sonra bu komut ile browser da görüntüleyebilirsiniz.

$ cordova run browser

Aşadaki gibi bir sayfa ile karşılaşacaksınız. Böylece ilk cordova uygulamamızı çalıştırmış olduk. Aslında bu makale Ionic framework serisine giriş amaçlıydı ilerideki makaleler de ionic framework'ü derinlemesine incelemeyi planlıyorum. Bu makele hakkındaki görüşlerinizi veya sormak istediğiniz soruları yorum kısmından iletirseniz sevinirim.