Birden fazla platformu destekleyen mobil uygulama geliştirme araçları, uygulamanızın farklı cihazlar üzerinde çalışmasını sağlar, ancak fiyakalı ve işlevsel kullanıcı arayüzü için lonic JavaScript yapısını denemenizde fayda var.
Simon Bisson
Herkes, çok sayıda platform üzerinde çalışan uygulama yazmak istiyor. Ancak hiç kimse farklı cihazların farklı özelliklerinden vazgeçmek istemiyor. Bunun için Android, iOS, Windows Phone’da çalışabilecek hibrid uygulamalar geliştirilmesini sağlayan çok sayıda araç var. Hatta BlackBerry ve Symbian cihazlarda bile çalışmasını sağlayacak araçlar bulabilirsiniz. Apache Cordova gibi teknolojilerle, uygulamayı paketleyip seçtiğiniz uygulama mağazalarına göndermeden önce JavaScript kodunuz ile donanıma özel olan özelliklere dokunmanız çok kolay. Bunlar çok kullanışlı araçlar, ancak uygulamaların donanım üzerinde iyi çalışmasına fazla odaklandıkları için, uygulamalara modern bir görünüm ve kullanışlılık verme konusunda o kadar da mükemmel değiller.
Ionic ve nispeten de yeni JavaScript’in önemli rol oynadığı nokta burası. Ionic, hibrid mobil uygulamalarda kullanıcı arayüzüyle ilgili olan boşluğu doldurmak üzere tasarlandı. AngularJS MVC’ye benzer bir yapı üzerine kurulu Ionic, yeni etkileşim modelleri ve CSS tasarımını içeriyor.
Kodunuzun temelini Cordova’da kurup, uygulamanın arayüzünü Ionic kullanarak geliştirebilirsiniz. Ionic, en rağbet gören 40 GitHub projesini gösteren popüler bir araç. 500 binden fazla uygulama Ionic formunu kullanıyor. Donanım özel (native) uygulamalar ile web teknolojileri arasında köprü kuran mobil uygulamalar geliştirmek için tasarlandı. Ancak bu aracı, web uygulaması ve hatta mobil web uygulaması geliştirmek için kullanmayın.
Ionic ile tanışın
Ionic’e başlamak oldukça kolay. Aracı indirmek için Note.js sitesine gidin ve Ionic ile birlikte Cordova aracını indirin. İndirme işlemini tamamladıktan sonra Ionic’in şablonlarından biri ile başlayın. Windows geliştirme makinesi üzerinde uygulama geliştiriyorsanız, Visual Studio galerisinde şablonlar bulabilirsiniz. Üç temel şablon bulunuyor. Bunlar boş uygulama, bir sayfa başlığına (header) sahip sekmeli uygulama ve bir de büyük ölçüde malinlenmiş hamburger kontrol kullanan yan menüdür.
Bu şablon üzerine kendi içeriğinizi ekleyebilir, seçtiğiniz şablona göre kod yazabilirsiniz. Ionic’in komut satırı, uygulamayı geliştirmek istediğiniz platformları seçmenize izin verir ve kodunuzu hızlı bir şekilde test etmenizi sağlayan bir benzetici ile birlikte geliştirici araçlarını içerir.
Ionic ’in kalbinde CSS bileşenleri yer alır. Bu bileşenleri özelleştirebileceğiniz gibi, olduğu gibi kullanmanız, görünüş ve kullanım açısından iOS’a oldukça benzeyen prototip ya da belli konsept dahilinde uygulamalar geliştirmeniz açısından çok daha iyi olur.
Ana unsurlar arasında birçok renkte olabilen sayfa başlığı var. Her bir rengin kendi adı var. Böylece rengi değiştirmek istediğinizde durumsal CSS kullanabiliyorsunuz. Örneğin, uyarı durumunda kırmızı sayfa bağlığı, normal durumlarda ise mavi sayfa başlığı kullanmanız mümkün.
Ionic ’in sayfa bağlığı ve alt bölümleri sabit olmakla birlikte, ana içerik bloğu sıralanabilir durumda. Büyük hacimdeki veriyi görüntüleyebilirsiniz. Ionic, AngularJS üzerine kurulu olduğu için, tek sayfalı bir uygulamayı geliştirmek için kullanabilirsiniz. Bu tasarımı basitleştirir ve her etkileşimde yüklenmesi gereken içerik miktarını azaltır.
İkonlar, sekmeler ve fontlar
Ionic sekme düğmeleri ilginç bir yapı sunuyor. Kendi tasarımınızı kullanabileceğiniz gibi Ionic’te de özel ikon seti bulabilirsiniz.
Ana blok veya ekran genişliğinde, değişken boyutlarda parmak uyumlu sekme düğmeleri için CSS tanımları ile birlikte renkli yazı bloklarını da sekme düğmesi olarak da kullanabilirsiniz. Bu, sayfa başlığı ve menü tasarımını basitleştiren bir yaklaşım. Renkli yazı içeren çerçeveli düğme seçenekleri de bulunuyor.
Microsoft’un modern tasarım dilini daha önce kullandıysanız eğer, Ionic’in ikon fontunun buna oldukça benzediğini göreceksiniz. Birçok uygulama alanı için uygun olabilecek, e-postadan bulutla eşleştirmeye kadar 500’den fazla ikonun bulunduğu basit ve anlaşılabilir ikon seçeneği var. Sekme düğmeleri için ikonlar yaratabilir; bunları, sık kullanılan yerler için sayfa başı ve alt bölüme yerleştirebilirsiniz.
Ionic, en çok kullanılan kullanıcı arayüzü modelleri için genel görünüm sunmak üzere CSS klasmanlarına sahip. Sekme düğmeleri ve ikonlarla ilgili liste araçlarına ulaşabileceğiniz gibi, eğer Android uygulama geliştiriyorsanız daha fazla bilgiyi görüntüleyen kartları kullanmanız da mümkün. Bu kartlarda, gömülü listeler ve görseller yer alır. Kendi kullanıcı arayüzü unsurlarınızı seçmenizden sonra AngularJS (ya da başka bir JavaScript) kodunu, bu unsurları dinamik içerik ile bağlantılandırmak için kullanabilirsiniz. Statik listeler, iyi gezinme unsurları yaratır; ancak pratikte, mobil uygulamanızın önemli bir kısmını Ionic programlaması yüklenecektir.
Ionic ’in CSS tabanlı yapısı birçok noktada faydalı. Dinamik JavaScript kodunuzu, Ionic CSS’de kolay bir şekilde paketleyebiliyorsunuz. Arka çalışma ekranı tercih ediyorsanız, Ionic, sıra ve kolon tabanlı karmaşık arayüzler geliştirmek için farklı ekranlarda çalışacak, kullanıcı arayüzlerine yönelik olarak tepkisel çalışma ekranları içeren kutucuklar kullanıyor.
Uygulama yapısı tüm HTML tabanlı uygulamalar için önemlidir. Ionic ile uygulamanıza platforma özel görüntü ve kullanışlılık vermek kolay. HTML5 yapısını kullanıyorsanız, Ionic uygun bir klavye ile bile çalışacaktır. Dokunmatik kullanıcı arayüzlerinin ilginç adaptasyonları da bulunuyor. AngularJS kodundan çağrılabilen JavaScript modülleri şeklinde daha karmaşık kullanıcı arayüzü unsurları mevcut. Nispeten statik olan CSS unsurlarına karşın bu modeller daha anime edilebilir şekildeler. Diğer seçenekler arasında ise dokunmatik seçenekleri ve diğer hareketler için destek yer alıyor. Böylece farklı hareketler, uzun ve kısa geçişler ve akış hareketleri için zemin yaratılıyor.
Ionic ’in donanıma özel biri görünen hibrid uygulamalar için etkisi büyük. Cordova kullanıyorsanız, yapmanız gereken sadece Ionic’in CSS ve JavaScript dosyalarından yararlanma. Cordova kod ile birleştirmeden önce Ionic’in şablonlarını kullanarak kullanıcı arayüzü geliştirmek iyi bir fikir. Ionic kullanmadan önce AngularJS kodunuzun web uygulaması olarak çalıştığından emin olun ve buna uygulama özel kullanıcı arayüzü unsurlarını ekleyin. Sonuçtan memnun kalacaksınız.