Mobil cihazların bilgisayarlardan daha fazla kullanılması, mobil uygulamaların artması, mobil cihazların çeşitliliği ve farklı işletim sistemlerinin bulunması yazılım geliştiricileri farklı mobil çözümler bulmaya yönlendirdi. Native uygulama geliştirmenin yanında zamanla her platformda da çalıştırılabilen bir uygulama yapısı kurmak önemli bir ihtiyaç haline geldi ve HTML5 ile JavaScript gibi dillerin desteğiyle geliştirilebilen hibrit(hybrit) uygulamalar ortaya çıktı.

Hybrit uygulama geliştirmek için birçok kütüphane bulunuyor. Bu kütüphanelerden en çok tercih edilenlerden biri Ionic Framework. Bilhassa Angular.js veya Angular 2 deneyimi olan yazılımcıların ilk tercihi genellikle Ionic olmaktadır. Açık kaynak olan Ionic, binlerce takipçisi ve destekçisi ile binlerce mobil uygulamaya evsahipliği yapmaktadır. Kendi ifadeleriyle “first-class” bir dokümantasyona sahip olan Ionic Framework kullanışlı ve öğrenmesi kolay kütüphanedir.

Ionic Framework, Cordova üzerine inşa edilmiştir. Mobil cihazın donanımına ve sistem kaynaklarına erişim gibi işlemler Cordova sayesinde yapılmaktadır.

Bir web geliştiricisiniz ve mobil uygulama yazmak istiyorsunuz. Uygulamanız dünyayı kurtarmayacaksa, uygulamanız çok karmaşık değilse ve mobil cihazın kaynaklarını ciddi şekilde kullanmayacaksa Ionic gibi bir hibrit uygulama kütüphanesi sizin için yeterli olacaktır. Hem web programlamadan gelen aşinalıkla hızlı uygulamalar geliştirebilirsiniz, hem de tek uygulama yazıp bunu Android, iOS veya Windows Phone gibi mobil işletim sistemlerinde çalıştırabilirsiniz. Hatta bu uygulamayı rahat şekilde mobil uyumlu bir web sitesi olarak da yayınlayabilirsiniz.

Öğrenmek İçin Neler Gerekli? Ionic Framework Nasıl Bir Yapı Üzerinde Çalışıyor?

Ionic yukarıda da bahsettiğim gibi Angular.js kütüphanesi üzerine inşa edilmiştir ve kod geliştirmede kullanılan yapılar da Angular.js’e aittir. Geçtiğimiz günlerde Ionic ailesi ikinci versiyon olarak Ionic 2’yi duyurmuştu. Bu sürüm aslında Angular 2’den sonra çıktı ve bu versiyon üzerine inşa edildi.

Ionic ile uygulama geliştirebilmek için temel olarak HTML, JavaScript ve Angular.js bilmek yeterli olacaktır. Ionic 2 kullanacaksanız Angular 2’yi bilmeniz gerekiyor(Angular 2, Angular.js’e göre ciddi değişiklikler içeriyor). İkinci versiyon aynı zamanda daha büyük çaplı projelerin geliştirilebilmesinin önünü açıyor. Bu versiyonda TypeScript’in gücünü de kullanarak OOP yapısıyla uygulama geliştirebiliyorsunuz.

Ionic’in farklı tasarım, tema ve bileşen desteği bulunuyor. İlk kurulumda gelen dosyalar dışında internetten bulduğunuz farklı bileşenleri indirip kullanabiliyorsunuz.  https://market.ionic.io/ adresini inceleyip geliştireceğiniz Ionic uygulamaları için birçok özel tema veya bileşeni bulabilirsiniz. Ionic uygulamalarının 70’den fazla native özelliği desteklediğini de belirtmek lazım. Barkod okuma, bluetooth, parmak okuma, diğer birçok sensörü okuma ve erişim sağlamak bu native desteklerinden sadece birkaçı.

Ionic’i Kurmak ve Kullanmak için Hangi Adımları İzlemek Gerekiyor?

Ionic Framework ile geliştirmeye başlamadan önce ilk olarak bilgisayarınızda Node.js’in kurulu olması gerekiyor. Ionic ile geliştirdiğiniz projenize ön izleme yapmak için bilgisayarınızın tarayıcısını kullanabilirsiniz. Ionic sayesinde uygulamanızın hangi platformda nasıl gözükeceğini izleyebilir ve projenize platforma özel çalışmasını istediğiniz kod parçaları da ekleyebilirsiniz. Geliştirdiğiniz kodları bir mobil uygulamaya çevirmek ve bir emülatörde incelemek isterseniz Android SDK veya Xcode gibi dönüştürmek istediğiniz platformu da bilgisayarınızda bulunmalı.

Kurulum için nasıl bir yol izliyoruz bakalım… Bilgisayarınıza Node.js kurulu ise komut ekranını yönetici olarak açıp aşağıdaki komutu yazarak Ionic kurulumuna başlayabilirsiniz:

npm install -g cordova ionic

Kurulumu başarıyla tamamladıktan sonra artık proje oluşturup üzerinde çalışmaya başlayabilirsiniz. Bunun için projenin kapsamına ve TypeScript bilginize göre Ionic’in hangi versiyonunu kullanacağınıza karar vermeli ve ardından komut penceresinden, projeyi geliştireceğiniz klasöre giderek gerekli komutu çalıştırmanlısınız. ionic start ProjeAdi TemplateAdi şeklinde bir komut dizimi vardır.

Örneğin alttaki komut Ionic 1 sürümüyle tab tasarımında bir uygulama oluşturur.

ionic start myApp tabs

Alttaki komut ise Ionic 2 altyapısında bir uygulama oluşturur.

ionic start --v2 myApp tabs

Bu komutlarından birini çalıştırdığınızda tabs temalı örnek bir proje bulunduğunuz klasörde(yukarıdaki komutların çalıştığı klasörde) myApp isminde bir klasörün içinde inecektir. https://market.ionic.io/ adresinden Ionic Market’i ziyaret ederek burada bulunan çok sayıdaki örnek projeyi incelemenizi tavsiye ederim.

Uygulamanızı web tarayıcısında değilde daha gerçekci bir ortamda, yani emülatörde çalıştırmak isterseniz yukarıda belirttiğim gibi ilgili platform desteğini kurmanız gerekecektir. Örnek projemizi iOS emülatöründe incelemek için aşağıdaki komutları çalıştırmamız gerekiyor:

cd myApp
ionic platform add ios
ionic build ios
ionic emulate ios

Projeyle ilgili tüm kurulumları yaptık, proje kodlarını da artık bulunduğunuz klasörde. Geriye kullanışlı bir kod editörü veya IDE ile kodlamalarınızı yapıp uygulamayı geliştirmemiz kalıyor. İlerleyen günlerde Ionic ile hazır şablonları nasıl kullanabileceğimizi ve basit şekilde nasıl uygulama geliştirebileceğimizi anlatan bir yazı daha yayınlayacağım.