Ionic Framework Dersleri – I

Hybrid mobil uygulama geliştirme teknolojilerini dikkatle takip etmeye çalışıyorum. Ionic Framework, Hybrid uygulama çatılarının arasında şimdilik yükselen yıldız olarak görünüyor.

Ionic Framework’un arayüzü herşeyden önce -kendi tabiriyle- “elegant”. CSS bileşenleri sade, karmaşıklıktan uzak. Ön yüz animasyonları için donanım ivmeli hızlandırma kullanılması da Hybrid uygulamalardaki performans sorununa bir nebze çözüm olabilir.

ionic-0

Arka planda ise masaüstü web tarayıcılar için bile büyük bir yük oluşturan jQuery yerine AngularJS kullanılmasının performans açısından önemli. AngularJS’nin MVW (Model – Görünüm – Her Neyse) mimarisine alışmakta başta zorluk çekseniz de konuyla ilgili dökümanlar fazlasıyla mevcut.

Kurulum

Ionic Framework’ün kurulumu için bilgisayarınızda öncelikle NPM yüklü olmalı. Komut isteminde “npm install -g cordova ionic” komuyutuyla kurulumu başlatalım.

ionic-1

NPM pakedimiz kurulduktan sonra artık yeni bir proje oluşturabiliriz. Bunun için “ionic start TestProjesi tabs” komutunu kullandım. Buradaki “TestProjesi” proje adınız, “tabs” ise uygulamanın taslağı.

Bu parametre boş bir uygulama için “blank”, sekmeli uygulama için “tabs”, yan menüsü olan bir uygulama için “sidemenu” değerlerini alabilir.

ionic-2

Uygulamamızı oluşturduk ancak henüz platform dosyalarını eklemedik. Windows üzerinde çalıştığımız için Android platform dosyalarını “ionic platform add android” komutuyla ekliyorum.

ionic-4

Son olarak “ionic run android” komuyutla uygulamanın emulatordeki ilk görüntüsünü alıyorum.

ionic-5

Hybrid uygulama geliştirirken, eğer başlangıç aşamasında cihazın donanımına erişmeniz gerekmiyorsa projeyi web tarayıcınız üzerinden geliştirmenizi tavsiye ederim. Aksi takdirde her yaptığınız değişikliği emulatorde izlemeye çalışmak zaman kaybı olacaktır.

CSS Bileşenleri

Ionic Framework’ün en göz alıcı özelliğinin ön yüzü olduğunu söylemiştim. Web sitesinde CSS bileşenleri, örnekleri ve önizlemeleriyle birlikte çok güzel şekilde verilmiş. Ben burada uygulamanın açılış ekranına basit bir form ekleyeceğim.

Projenizin “templates” klasöründeki “tab-dash.html” dosyasını düzenlemek için açalım ve içeriğine aşağıdaki HTML kodunu yazalım.

Dashboard sekmesinin son görünümü şu şekilde olacaktır.

ionic-6

Ionic Framework ile arayüz oluşturmak bu kadar basit. Diğer CSS bileşenleri için dokümantasyon sayfasını incelemenizi tavsiye ederim.

Derslerin ikinci bölümünde AngularJS ile veri işleme ve DOM manipülasyonunu göreceğiz.

Facebook Twitter Digg Delicious

27 Mayıs 2015 tarihinde yayınlandı.