IONIC ile Hibrit Uygulama Geliştirme

Merhaba arkadaşlar forumda da bazı cevapsız sorular görmem nedeniyle çoklu platformlarda mobil uygulama tasarımı ve programlaması için AngularJS tabanlı oluşturulmuş günümüzün gözde teknolojilerinden olan Ionic Framework’un Windows İşletim Sistemlerine kurulum aşamalarından bahsederek ufak bir giriş yapmak istedim.

Tabi öncelikle adet gereği biraz Ionic Framework’ten bahsetmek gerekli; Ionic framework Mobil Cihazlar üzerinde Hybrid uygulamalar geliştirmek için kurgulanmış bir framework’tur. Yani Html 5 kullanarak geliştirdiğimiz uygulamaları birden fazla platforma çıktı alabilmek amaçlı uygulamalar.

Bu framework’ü Ben ve Max adında 2 kişi taradından 2012 yılında yayınlamış.Framework tamamen AngularJs tabanlı oluşturulmuştur.Yani AngularJs bilmeden kullanmaya çalışırsak sağdan soldan bulduğumuz örnek kodları bile çalıştıramayız.Ionic cihazın yerel özelliklerine(donanımsal) erişmek için cordova kullanır.

Framework beta’aşamasından henüz yeni çıkmıştır ancak hala sürekli güncelleme almaktadır.

Madem adı geçti birde cordovadan bahsetmek lazım; Yeterince hayalperest değilseniz hybrid uygulamalarda yazdığınız kodların swift/java/c# gibi dillere çevrilmediğini tahmin etmişinizdir.Ancak mobil cihazlara build almak için os üreticisinin seçmiş olduğu yerel dili kullanmak gerekli. Ya da cihazın yerel fonksiyonlarına erişmek için os üreticisinin yayınladığı api’leri kullanmak gerekli tabi bu üreticiler bu apileri javascript için yayınlamıyorlar.

Ancak bu dillerin kullandığı frameworklerin ortak bir özelliği var. Hepsinde iyi ya da kötü bir tarayıcı mevcut. Ve tarayıcılar html5 yorumlayabiliyor. Cordova’yı geliştiren adamlar işte tam olarak bu ortak özelliği kullanmışlar yazılan html5 kodları yerel (native) olarak oluşturulmuş bir proje üzerindeki tarayıcıya atmak ve cihazın native özelliklerini tarayıcıdaki JavaScript kodları ile tetiklemek. Cordova’nın yaptığı işin özetidir.

Ancak biz Ionic Framework üzerinde AngularJs kullanıcağımız için ng-cordova’yı tercih etmemiz daha sağlıklı olcaktır.

Ng Cordova cordova üzerine geliştirilmiş cordova’nın pluginlerini angular js’in moduler yapısana uyarlanmış halidir.

Artık kuruluma geçebiliriz.

Konu 1 - Node Js Ve Ionic Framework

Node.js Yüklemek; Ionic Frameork ve bağımlılıkları Node Package Manager (npm) üzerinden indirilebilir, ancak npm’i kullanmak için Node.Js kurulumu yapmamız gerekmekte. Hemen nodejs.org adresinden node js’i indirip kuralım. Eğer node js’i doğru bir şekilde yüklediysek Command Prompt üzerinde

npm -version

komudunu çalıştırdığımızda bize işletim sistemimizde yüklü olan versiyonu görürürüz.

Ionic Yüklemek;

NodeJs kurulumu tamamlandıktan sonra ionic yüklemek için yapmamız gereken tek işlem Command Prompt üzerinde

npm install ionic

komudunu çalıştırmak. Eğer install komudun sonuna -g eklersek yüklemeyi İşletim Sistemindeki Tüm Oturumlara Global olarak yapar.

Eğer yükleme işlemini doğru yaptıysak Command Promt üzerinde

ionic -version

Komutunu çalıştırdığımzda bize ionic framework’un İşletim Sistemimizde yüklü versiyonu gelir.

Eğer her şey yolunda gittiyse artık ilk projemizi oluşturmaya hazırız. Öncelikle projemizi oluşturmak istediğimiz dizine Command Promt ile gidiyoruz.

Ben belgelerimde IonicProjects isimli bir klasöre gidiyorum.

Dilediğimiz klasöre geldikten sonra yine Command Prompt üzerinde

ionic start projeAdi TemplateAdi

komutumuzu çalıştırıyoruz. Templateler sürekli güncelleniyor ben bu işlemi yaptığımda

blank, tabmenu, sidemenu olarak 3 template vardı. Ve github üzerinde sürekli güncelleniyorlar.

Seçtiğimiz template github üzerinden inip kurulacaktır. Ionic üzerindeki güncel template’leri görmek için Command Prompt üzerinde

ionic templates

komudunu çalıştırabilirsiniz.

Artık projemizi oluşturduğumuza göre burada biraz inceleme yapalım , aslında burada kullanıcı olarak bizi ilgilendiren bir dosya ve bir klasör var. Bunlar;

• config.xml : Projenin bilgilerinin (Adı, açıklama ,yetkili vb.) Ve build anında cordova tarafından kullanılacak bilgilerin tutulduğu dosya.
• www: Bu klasör bizim aktif olarak geliştirme yapacağımız alan olacak.
• Projemizi debug etmek için gereken tek şey Command Promt üzerinden

ionic serve

komutunu çalıştırmak. Ve sorarsa hangi ortam üzerinden host ediceğimizi seçmek.

Ancak bu komutu çalıştırırken dikkat etmemiz gereken bir nokta var oda Projenin oluşturulduğu klasorun içinde olmak.

Kendi örneğimden yola çıkacak olursam komutu çalıştırmadan önce

cd projeAdi

komutu ile projemin klasörüne gitmeliyiz.

Bu adıma kadar her şey yolunda gittiyse Ionic Framework kullanarak güzel web uygulamaları geliştirebiliriz.

Ancak mobil ortama build almak ve cihazların yerel özelliklerini kullanmak istiyorsak cordova’yıda yüklememiz gerekiyor.

Çünkü mobil cihazların donanımlarına erişebilmek için mesela kamera özelliklerini kullanmak için bile cordova framework ü kullanacağız.

 

Konu 2 - Cordova ve Android’e build almak için gereksinimleri

Cordova Yüklemek: Artık Command Prompt ‘a alıştığınızı varsayarak daha fazla resim koymakla uğraşmıyorum.

Cordova’yı yine Node Package Manager üzerinden yükleyeceğiz Command Prompt üzerinden

npm install cordova

komutunu çalıştırıyoruz. Eğer tüm kullanıcılara yüklemek istiyorsak install komutundan sonra ‘  -g’ eklememiz yeterli.

Eğer yükleme işlemimiz başarılı olduysa Command Promt üzerinde

cordova -version

komutunu çalıştırdığımızda cordovanın işletim sistemimizde yüklü versiyonunu görürüz.

Şimdi yapmamız gereken iş Command Prompt üzerinden tekrar projemize gelip;

cd C:\Users\tbt\Documents\IonicProjects\projeAdi

[*Burada tbt yazan yere kendi windows kullanıcı adınızı yazmayın unutmayın]

Uygulamamıza android platformunu eklemek.

ionic platform add android

Daha önceden işletim sistemi üzerinde Android Studio /Eclipse ile build almış arkadaşlar artık rahatlıkla build alabilirler. Build almak için Command Prompt üzerinde

ionic build android

Telefon üzerinde uygulamayı çalıştırmak için

ionic run android

komutlarını çalıştırabilirler.

 

Android Build Gereksinimlerinin Yüklenmesi:

 

Bahsettiğim gibi cordova build alırken aldığı platform’un native dili ile bir complie işlemi yapar yani java üzerinde build almak için complier’a , android’e build almak için android sdk ya ve cordova’nında bağımlı olduğu apache ant’a ihtiyacımız var.

 

Kısacası indirmemiz ve kurmamız gereken 3 dosya var.

1. Java Jdk Bu sayfada üstteki tablodan işletim sistemimize uygun olan jdk’yı indirelim.
2. Apache Ant
3. Android Sdk: Bu sayfada Android Studioyu indirmemize gerek yok sayfanın en altında ‘Sdk tools only’ alanı mevcut o alandan yalnızca sdk’yı indirebiliriz.

Kurulumların tamamını yaptıktan sonra Android Sdk Manager’ı Yönetici olarak Çalıştırıp Tools klasoru altındaki tüm dosyaları ve Android 5.1(API LEVEL 22)’nin altındaki Sdk Platform’u yüklüyoruz.

Yükleme işlemi bittikten sonra Sdk’mızı kurduğumuz klasörü bulup onun içinde platform-tools klasörünün yolunu kopyalıyoruz. Örnek vermek gerekirse benim işletim sistemimde

C:\Program Files (x86)\Android\android-sdk\platform-tools adresinde bulunmakta.

 

Bilgisayarım’a sağ tıklayıp Özellikler üzerinden Advanced System Settings’i açıp Açılan Form’üzerinde Advanced sekmesine gelip Environment Variables’ a tıklayıp açılan pencerede PATH değişkenini buluyoruz.

Değişkeni seçip düzenleye tıkladıktan sonra var olan değere hiçbir müdahale etmeden yalnızca başına ; koyduğumuz platform-tools yolumuzu yapıştırıyoruz.

Örnek vermek gerekirse:

;C:\Program Files (x86)\Android\android-sdk\platform-tools

Aynı şekilde android-sdk’nın içindeki tools kopyalayıp başına ;  koyup PATH değişkenine ekliyoruz.

;C:\Program Files (x86)\Android\android-sdk\tools

Tanımlama işlemlerimiz henüz bitmedi indirmiş olduğumuz apache ant’ ı güvenli bir yere çıkartıp içindeki bin klasörünüde aynı yöntem ile PATH değişkenine eklememiz gerekli.

;C:\apache-ant-1.9.4-bin\apache-ant-1.9.4\bin

Ayrıca java jdk indirmiştik onuda ayrı bir değişken olarak tanımlayalım yine Enviroment Variables’tan New butonuna tıklayıp açılan pencerede

Variable Name kısmına JAVA_HOME

Variable Value kısmına C:\Program Files\Java\jdk1.8.0_45 (jdk’mın dosya yolu)’nu yazıyoruz.

 

Artık herşeyimiz hazır Command Prompt üzerinden projemizin bulunduğu dizine gelip

ionic build android

komutunu çalıştırdığımızda bir sefere mahsus olmak üzere gradle inecek. Bu işlem biraz zaman alabilir...

Build işlemi tamamlandıktan sonra çıktı adresi Command Propmt üzerinde yazacaktır.

Ayrıca uygulamayı direkt telefon üzerinde çalıştırmak için

ionic run android

eğer yüklü ise emulator üzerinden çalıştırmak için

ionic emulate android

komutu ile uygulamayı direk bilgisayarınıza bağlı olan android işletim sistemli telefonda görebilirsiniz.

Dip Not: Aynı işlemleri IOS Platformunda da yapmak için maalesef ki MacOS işletim sistemine sahip olmanız gerekmektedir.

Yukarıda yer alan prompt kondlarında Android yerine ios yazmanız halinde ios platform desteğini de eklemiş olacaksınız.

Umarım işinize yarar/yarayacak bir paylaşım olmuştur.

 

Saygılarımla