PhoneGap İle IOS Uygulama Geliştirme

Phone Gap - Apache Cordova Nedir?

PhoneGap  Android, iOS, windows phone ve blackberry, bada gibi mobil platformlarda html,javascript,css gibi web geliştirme dil ve araçlarını kullanarak uygulama geliştirmeyi sağlayan ve aynı zamanda native APIlara ulaşmayı da sağlayabilen bir frameworktür. Geliştirilmeye başladığı ilk yıllara göre büyük gelişme gösteren framework, native uygulamalar yazarak müdahale edebileceğimiz ve geliştirebileceğimiz yazılımların tamamını bu tüm platformlar için bir defa geliştirme yaparak ve her platform için ayrı ayrı derleyerek çalıştırma imkanı sunar. Android veya iOS geliştirmek için geliştiricinin java ya da objective C bilmesine gerek kalmadan bir üst seviyede tasarımın ve mantıksal yapının html,javascript ile oluşturulmasına dayanır. Native uygulamaların performansı ve güvenilirliği her zaman için daha yüksek olsa da geliştirilecek uygulamanın isterlerine göre bu tip frameworklerle de geliştirmeler tamamlanabilir ve bazen çok da hakim olunmadan native kod ile geliştirilecek uygulamalardan daha performanslı ve güvenilir olabilir.

PhoneGap bir süre önce Adobe tarafından satın alınmış ve 5 mobil platformda html,css,javascript ile platform native APIlarına erişim sağlayabilen bir framework olarak tasarlanmıştır. Satın alma sonrasında ise Apache Cordova olarak Apache Software Foundation altında geliştirilmeye devam edilmiş ve Adobe tarafından ayrıca geliştirilecek ve eklenecek pluginler yine PhoneGap olarak devam edecektir. Her iki framework de başlangıç için sadece isminin değiştirilmesi ile ortaya çıkmış olsa da ilerde PhoneGap tarafında Adobe eklentileri görülebilir. PhoneGap ve Apache Cordova her ikisi de ücretsiz ve açık kaynak kodlu olarak sunulmaktadır. Çok farklılıklar olmasa da uygulamada PhoneGap ya da Apache Cordova kullanırken bazı küçük farklılıklar oluşabilmektedir. Platform olarak önceden de kullandığım için PhoneGap ile devam etmeyi düşünüyorum ve örneklerde de PhoneGap kullanarak devam edeceğim.

Not: Tutorialler boyunca $ simgesi komut satırında yazılması gereken komutları simgeler ve komut satırında ayrıca $ karakterinin yazılmasına gerek yoktur.

PhoneGap Kurulumu

  1. Öncelikle sistemimizde node.js kurulu olmalı. Eğer kurulu değilse nodejs.org/ adresinden indirip yükleyebiliriz. Kurulum sonunda komut satırında npm komutunu bulabilmeli. MacOs için .pkg dosyasını indirip kurmak yeterli oldu. Farklı işletim sistemleri için belki sistem path değişkenine ekleme yapmak gerekebilir.
  2. Phone Gap Kurulumu adımında npm ile phonegap kurulumu neredeyse saniyeler içerisinde kolayca yapabileceğimiz bir işlem.
    $ sudo npm install -g phonegap
    komutu ile phonegap'i sisteme kurabiliriz. İşlem sonucunda komut satırından "phonegap" komutunun çalışıyor olması gerekmekte. Yine farklı platformlar için ayarlar gerekebilir.

Proje Oluşturma

Phone Gap kurulumu sonrasında projeyi oluşturacağımız kök dizine gidip komut satırınında bu dizini açıyoruz.
  1. $ phonegap create sampleapp com.onuratci.ios.sampleapp SampleApp
    komutu ile sampleapp dizininde com.onuratci.ios.sampleapp paket adı ile uygulama adı SampleApp olan bir uygulama oluşturmuş oluyoruz. Bu değerler daha sonradan değiştirilebilir ama yine de başlangıç için paket adını ve dizini uygun vermek işimizi kolaylaştıracaktır.
  2. Yukarıdaki adımda oluşturduğumuz uygulamamızın bulunduğu dizine geçip hangi platformlar için geliştirme yapacaksak bu platformların desteğini ekliyoruz. Ben sadece ios ile devam edeceğim için şimdilik sadece ios build ile ios desteğinin eklenip projenin build edilmesini sağlıyorum.
    $ cd sampleapp
    $ phonegap build ios
    Şu şekilde bir ekran çıktısı görüyor olmamız gerekli:
    [phonegap] detecting iOS SDK environment...
    [phonegap] using the local environment
    [phonegap] adding the iOS platform...
    [phonegap] compiling iOS...
    [phonegap] successfully compiled iOS app
  3. Bu aşamadan sonra uygulama dizini içerisindeki platforms/ios/ dizini XCode ile open project menüsünden açılabilir.
  4. Projeyi Run -> IPhone6 Simulator seçerek XCode içerisinden çalıştırabiliriz.
  5. Eğer herhangi bir simulatör kurulu değilse öncelikle sisteme simulatör eklememiz gerekir. Bunun için XCode-> Preferences->Downloads kısmından ilgili simülatorler kurulabilir.

Pluginleri Etkinleştirmek

Uygulama içerisinde native apileri kullanmız gerektiğinde öncelikle ilgili pluginin phonegap ile projeye eklenmesi gerekir. Örnek projemizde network durumunu görüntülemek istediğimizi düşünelim. Terminal uygulaması ile ilgili proje dizinine geçip aşağıdaki komut çalıştırıldığında projeye Network plugini tanımlanacaktır.
$ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-network-information.git
Tüm eklenebilecek özellikleri ve adreslerini görebilmek için şu linkteki Add Features kısmına bakılabilir.

Projede Bazı Değişiklikler Yapmak

Bu aşamaya kadar phonegap kurulum ve diğer araçlar ile genel proje yapısı anlatıldı. Bu aşamada uygulamayı emülatörde çalıştırdığımızda şöyle bir ekran görürüz.

Proje dizininde index.html dosyasına ekleyeceğimiz  


kodları ile projede ilk değişikliği yapmış oluruz. 
Ekran görüntüsü:


Ek Bilgi:
Uygulamanızı app store'da yayınlayacağınız zaman birçok boyutta uygulama icon dosyasını da temin etmeniz gerekir. Bu iconları tek bir icon kullanarak oluşturmak isterseniz yapmanız gereken 1024*1024 boyutunda kaliteli olarak çalışılmış uygulama iconunuzu http://makeappicon.com/ adresine yükleyerek gerekli tüm boyutlarda hazırlanan arşiv dosyasını indirmek. Bu sayede saniyeler içerisinde icon boyutları ile ilgili sorunu aşabilirsiniz.
Written on September 7, 2013