6. Popular Hybrid Frameworks
• http://noeticforce.com/best-hybrid-mobile-app-ui-frameworks-html5-js-css
• http://tutorialzine.com/2015/10/comparing-the-top-frameworks-for-building-
hybrid-mobile-apps/
7. IONIC Framework
• HTML5, AngularJS, Cordova(PhoneGap)
• Ionic is a complete open-source SDK for hybrid mobile app development. Built
on top of AngularJS and Apache Cordova, Ionic provides tools and services for
developing hybrid mobile apps using Web technologies like CSS, HTML5,
and Sass. Apps can be built with these Web technologies and then distributed
through native app stores to be installed on devices by leveraging Cordova. Ionic
was created by Max Lynch, Ben Sperry, and Adam Bradley of Drifty Co. in 2013,
and is used by software developers around the World
• Why?
Performance obsessed,Angular & Ionic
Native focused
Beautifully designed
A powerful CLI
Fun to learn
Min. DOM Manupulation
Model bindings. (AngularJS)
Documentation
Extentable html & HTML5
9. IONIC - Structure
config parts
package.json lists the used NodeJS modules
bower.json lists the used Bower packages
config.xml has all the properties for your created cordova project
gulpfile.js describes GulpJS build tasks
Below files are the base for your Ionic project. They are not very
different to any other AngularJS application you might have seen.
Additional you have some folders:
hooks/ Not that important in the beginning,contains scripts which
run at specific points of the workflow.
plugins/ your installed cordova plugins
www/ this is where the magic happens!
Hibrit uygulamalar, native uygulamalar içerisinde host ediliyor. WebView içeren bir native uygulama oluşuyor. Full screen çalışan bir browser gibi düşünülebilir.
Hibrit uygulamalar, html,css,js kullanılarak yazılır. Mobile browser yerine WebView’da host edilir. (Native container içerisinde bulunan bir webview)
Native olmasından kasıt, kabuk. Kabuk native ve download edilip cihaza kuruluyor. İçerisinde ama html kodları vs barındırıyor.
Apache cordova (Phonegap) cihaza erişmek için kullanılıyor. Cihaza erişim vs yapılacaksa cordovaya ihtiyac var. Uygulamayı derlemek için kullanılır. Native hale getirir.
CORDOVACORDOVA(PHONEGAP)
Nitobi diye bir firma tarafından geliştirilmiş.
IOS(7),Android(4.1),Blackbery,Symbian,Bado,Windows Phone 7 gibi pek çok mobil platform için native uygulama geliştirilebiliyor.
UserInterface’i bir webView’dir.
%32lik pay ile piyasada lider.
HTML5’in gücünü kullanarak sistem kaynaklarına erişmek teorik olarak bir dereceye kadar mümkün. Cordova bu işlemi yaparken native uygulama içerisinden erişim yetkilerini alarak HTML%’e aktarıyor.
APK; Bir tane activity oluşturuyor. Onun tek yaptığı bir html dosyası render etmek.
Açık kaynak kod. Ücretsiz. NPM ile indirilip kurulabiliyor. NODEJS ile.
ANGULAR.JS
Performans için tercih edilmiş.
Ionic içerisinde JQUERY kullanılmamış. JQUERY en çok dom manipulasyonu için kullanıyoruz. IONIC’te angularjs kullanarak dom manupulasyonu en aza indirgenmiş bu da performansı arttırıyor. IONIC Jquery kullanmıyor. Kullansayda zamanla kodun okunurluğu azalıyor olacaktı. Bir de mesela ekrandaki bir kontrolün visibilitysini değiştirmek için JQUERY kullanmaya gerek var mı? Angular ile cok daha basit şekilde halledilebiliyor.
AngularJs ile gelen directive’ler var. Bunlar sayesinde html’e yeni etiketler(tagler) veya attributeslar eklemek mümkün. Yani extended html sağlıyor.
Angular ile unit test de yazılabilir. Dokumantasyonu da bol.
Az kod çok iş. Dom manupulasyonları büyük oranda templatelerde, scriptler templatelerde,bu sebepten çok fazla script kodu yazmaya gerek kalmıyor. Genelde temiz ekranlar ortaya çıkıyor.
Açık kaynak ve hızlı gelişiyor.
Two way binding özelliği mevcut. Script tarafında bir şey değiştirince html tarafı da değişebiliyor yani Aynı şekilde html tarafı değiştiğinde script içerisindeki data da değişiyor. Kendilerine MVW demişler. (MV Where ever).?
Route modulu ile sayfa yönetimi kolaylaşıyor. Ionic Angular Web’in route modulunu kullanıyor.
IONIC FRAMEWORK
Natice görünümlü mobile uygulamalar yapmamızı sağlar.
Custom css ekleyebiliriz.
Uygulama ikonunu platforma göre config.xml dosyasından değiştirebiliriz. Config xml dosyasını gösterelim.
CSS / SASS:
.scss uzantılı dosyalardır.
Custom css oluşturmak için kullanılır.
Sass = Sysntactically Awesome Style Sheet
Css ve Css3 stil kodları yazmamıza yardımcı ve bunları dinamik olarak derlememizi sağlayan ruby gemdir. (Ruby dili ile yazılıyor.)
Amaç : Css kodlarını yeniden kullanılabilir yapmak. CSS’de bulunmayan variables tanılama, css kodlarını parametrik olarak çalışabilir parçalara bölmek, başka bir css tanımlamasından miras(inherit) almak için kullanılır.
Önce ruby kuruyoruz.
Style.css uzantısını scss olarak değiştirir.
Style.scss den style.css i dinamik olarak derlemesini saglar.
IONIC FRAMEWORK :
Open source sdk’dir.
Dokumantasyonu iyi.
Templateleri dinamik olarak yükleyebiliyor. Controllerlar vs aynı, logic ortak ama görünüm farklı kılınabiliyor.
Platform custumization yapabilirsiniz veya dynamic template kullanabilirsiniz.
Platformlar, ionic otomatik olarak cihaza göre body platform ekliyormuş. Mesela ios devicelar için platform-ios,gibi.
Angular js kullanarak da sayfaları farklılaştırabiliriz.
Visual studio 2013 ‘de sercive pack 1 kurmak gerekiyor.
Visual studio için nugate’den IONIC Template indirilebilir
Visual studio 2015 ile cordova projesi olarak vs. geliyor. Bu platformlarda da yazılabilir.
Biz Android studio üzernde çalıştık. Sebebimiz ise, emulatorlerı vs yonetmesi kolay, sdk’lar hazır geldiği için istediğimiz target’da yüklemeleri yapabiliyoruz.
Hangi emulatorde calişacağı dosya içerisinde yazıyor. Cordova configlerinde olmalı. Target olarak yazdığımızda göreceğiz. Aynı şekilde ilgili target’ın kurulu olup olmadığını gösterebiliriz.
Target uygun değilse emulatorde de acamayacaktır.
Başlangıc sayfasının adı illa index olmak zorunda değil. Config.xml içerisinden bunu ayarlayabiliriz.
IONIC’te web socket de kullanılabiliyormuş. Bunun için plugin gerekecek.
IONIC Bootstrap kullanmıyor. Kendi css classlarını kullanıyor.. Böylece bootsrapten daha hızlı çalışmasını sağlıyor. Daha native bir görüntü saglıyor. Bootstrap yok ama sonradan eklenebilir. Custom.css gibi.
SORU : Neden <ion-xxx gibi directive’ler kullanıyoruz?
CEVAP : Bunlar aslında directive’ler. Pure html’e yeni yeni özelliikler kazandırılmış halleri. İonic- js dosyası içerisinden örnek directiveleri gösterebiliriz. Ayrıca map için yazdığımız directiveleri gösterebiliriz.
SORU : İç içe birden fazla proje olabilir mi?
CEVAP : Evet olabilir, singular demek tek bir index olması manasına gelmesin. İç içe farklı moduller de olabilir. Örnek var gösterebiliriz.
SORU : Folder isimleri zorunlu mu?
CEVAP : Değiştirilebilir. Ama mesela template folderı değiştirildiğinde emulatorda patlıyor ama browserda gösteriyor.