Monthly Archives: Eylül 2015

Sublime Text Metin Editörü

23 Eyl

Alet çantası kategorisine ait bu yazıda Sublime Text metin editörünü incelemeye çalışacağız. Sublime Text kodlama yapmak, kod biçimlendirmek ve düz yazılar yazmak için geliştirilmiş bir metin editörüdür.

Sublime Text editörünün bana göre en çekici tarafları kullanıcıya akışkan bir yazım imkanı sağlaması ve kodlama sırasında göze hoş gelen bir renklendirme yapmasıdır. Performans bakımından ise son derece başarılıdır.

Adsız

Çok sayıda programlama dilini destekleyen ve bu dillerde kod biçimlendirmesi yapabilen bir yapıda olması performans konusunda hiç bir sıkıntı yaşatmıyor. Desteklediği programlama dilleri C, C++, C#, Java, XML, HTML, CSS, Javascript, PHP, Phyton, Ruby, SQL, Erlang, Heskel, MATLAB gibi popüler dillerdir.

Editörün code snippet özelliği sayesinde sık kullanılan kodları dosyalayarak istediğimiz zaman editör kısayolundan çağırabiliriz.

687474703a2f2f616e67756c61722d75692e6769746875622e696f2f416e67756c61724a532d7375626c696d652d7061636b6167652f696d616765732f73637265656e73686f742d717569636b5f70616e656c2d7365617263682e706e67

Çoklu seçim özelliği(multiple selection) birden fazla imleç ile aynı anda çoklu değişiklik yapmaya imkan sağlar.

thoughtsmultiple

Editörün özellikleri eklentilerle arttırabilir. Çok sayıda eklenti desteği ile geliştiricilere kolaylık sağlar. Gerçekten denemeye değer bir editör olduğunu düşünenlerdenim. Birçok geliştiricinin özellikle bu editörü tercih etmesi bu düşünceyi güçlendirir nitelikte.

Windows 10 sürümüne geçiş

22 Eyl

Windows 8 sonra Windows 8.1 derken eylül 2015 itibarıyla şu an ki nihai sürüm olan Windows 10 sürümüne geçiş yapmış bulunuyorum.

Windows 10 sürümünde il göze çarpan başlat menüsünün yeniden düzenlenerek klasik başlat menüsü halinde kullanıcılara sunulmasıdır. Windows 8 sürümlerinde başlat menüsü yerinde metro style denen bir arayüz tasarlanmıştı. Bana göre son derece gereksiz ve kullanışsız olan bu arayüz nihayet kaldırılmış. Ancak başlat menüsünün bir kenarında hala etkisi küçük bir pencere şeklinde devam ediyor.

Başlat Menüsü
Başlat Menüsü

 

Windows 8 sürümlerinde Windows App Store uygulamalarının tam ekranda açılması kullanıcılarının görev çubuğuna erişmesini engelliyordu. Windows 10 sürümünde bu sıkıntı ortadan kaldırılmış ve pencere şeklinde çalışma imkanı sunulmuş.

Pencere Yapısı
Pencere Yapısı

 

Bir diğer özellik olan multitask özelliği biraz değişikliğe uğramış ve Ctrl+Tab kısayolu ile çalışan uygulamaları gösteren  pencerenin görünümü yenilenmiş.

Multitask
Multitask

 

Çalışan tüm uygulamaları görebilmek için görev çubuğuna Görev Görünümü adında bir kısayol da oluşturulmuş. Görev görünümünde sağ altta Yeni Masaüstü ekleme tuşu sayesinde birden fazla sanal masa üstü ayarlamanıza olanak sağlanmış. Bu sayede iş bölümlerinde göre kategorize edilebilen masaüstleri oluşturmak mümkün hale geliyor. Örneğin internet tarayıcıları ve ofis çalışma dosyaları ayrı masaüstü kategorilerinde tutulabilir.

Sanal Masaüstü
Sanal Masaüstü

 

Yeni özellikleri keşfettikçe eklemeye devam etmeye çalışacağım. Şimdilik bu kadar. Bir sonraki yazıda görüşmek dileğiyle.

Waterfall Modelden Agile Spiral Modele Doğru

20 Eyl

Bir yazılımın ortaya çıkabilmesi için öncelikle müşterinin ne tür ihtiyaçlarını karşılayacağı belirlenmelidir. Daha sonra bu ihtiyaçlara uygun teknolojilerin ve yöntemlerin belirlenmesinin ardından kodlama ve test etme işlemleri gerçekleştirilerek müşteriye hazır bir ürün sunulur.

Waterfall
Waterfall Model

Yazılımın geliştirme sürecinin başından itibaren sırayla analiz, plan, tasarım, kodlama ve test süreçleri birbirini takip eden adımlar dizisidir. Bu modele waterfall(şelale) denilmektedir. Bazen bu adımlara destek(maintenance) süresi de eklenmektedir. Bir yazılımın tüm gereksinimleri müşteriden alındıktan sonra bu adımlar takip edilerek son ürün ortaya çıkmaktadır. Ancak uzun zaman alan yazılım  projelerinde zaman içerisinde teknolojilerin veya müşterilerin ihtiyaçlarının değişebileceğinden yazılımda da değişiklikler gerekebilmektedir. İki sene süren bir projeyi düşünecek olursak proje başında belirlenen istekler iki sene sonunda mevzuatlar veya iş kuralları veya teknoloji değişikliğinden dolayı bazı ihtiyaçları karşılamayabilir. İş sonunda müşterinin ihtiyaç duymadığı bir ürün ortaya çıkabilir. Diğer taraftan analiz veya planlama sırasında yapılan bir hata ancak test sırasında ortaya çıkabilir. Proje zamanlaması için yapılan tahminler tutamayabilir.

Zaman ve bütçe kısıtlamasının olduğu startup gibi bir şirket için bu tür geliştirme modeli bir süre sonra işletmeye zarar ettirmeye başlar.

Zamanla edinilen tecrübeler geliştiriceleri bu modeli biraz değiştirmeye zorlamıştır. Müşterilerin ihtiyaçlarını guruplara bölerek her ihtiyaç için analiz, plan, tasarım, kodlama ve test süreçlerini yeniden yapılması uygun görülmüştür. Bu model, spiral(sarmal) model olarak adlandırılmıştır. Spiral model agile(çevik) proje geliştirme yaklaşımı içerisinde kullanılan bir modeldir. Burada çeviklikten kasıt değişime ayak uydurabilmektir.

Spiral Model
Spiral Model

Eğer iki senelik bir proje süreniz varsa, bu model size birinci ayın sonunda müşterinin belirttiği ihtiyaçlardan birini çalışır şekilde ona sunmanızı sağlamaktadır. Müşteriye tüm proje süresi sonunda çalışan bir ürün sunmak yerine, ona her ay yeni bir özelliği devreye alınmış olan bir yazılım ürünü sunulmuş olur.

Örneğin bir hesap makinesi yapmayı tasarlıyorsanız birinci adımda dört işlemi yapabilen bir hesap makinesi yapmak ve müşteriye sunmak yeterlidir. İkinci adımda üslü ve köklü işlemler ihtiyacını karşılayan özellik eklenir. Üçüncü adımda müşteriden yeni bir talep gelir ve trigonometrik hesaplar yapabilen özellikler eklenebilir. Daha sonra gelen geri dönüşlere(feedback) göre belki matris çözebilen özellikler gerekebilir. Burada önemli olan, her adım sonunda müşterinin elinde çalışan bir hesap makinesinin olmasıdır. Eğer waterfall model ile geliştirme yapılırsa tüm özellikler ve testler bittiğinde müşteriye çalışan bir ürün teslim edilir. Belki de müşterinin hiç ihtiyaç duymayacağı matris işlemler özelliğini de eklemiş olabilirsiniz. Şunu unutmamalıyız ki; gereksiz işlere harcanan zaman, işi yapan tarafa gider olarak yazılır. 

Agile Manifesto

Agile(çevik) yazılım geliştirme yaklaşımı bir işi küçük parçalara bölerek yapmayı ilke edinen bir disiplindir. Bir ürün veya yazılım aracı veya bir kodlama yöntemi değildir.

Agile (çevik) yazılım geliştirme konusunda, yazılım sektöründe tecrübeli bir ekip tarafından bir manifesto yayınlanmıştır. Manifesto içeriğine ve ilgili kişilere  http://www.agilemanifesto.org/ adresinden ulaşabilirsiniz.

Agile manifestonun dört temel ilkesi vardır.

English:

  1. Individuals and interactions over processes and tools
  2. Working software over comprehensive documentation
  3. Customer collaboration over contract negotiation
  4. Responding to change over following a plan

Türkçe:

  1. Süreç ve araçlardan ziyade bireyler ve etkileşimler
  2. Kapsamlı dökümantasyondan ziyade çalışan yazılım
  3. Sözleşme pazarlığından ziyade müşteri ile işbirliği 
  4. Plana bağlı kalmaktan ziyade değişime yanıt vermek 

Bu ilkeler ne anlama geliyor?

Manifesto ilkelerinde, yazılım geliştirme sürecinin önünü açan öncelikler belirlenmiştir. Tüm cümlelerde ortak olarak kullanılan “ziyade” kelimesi işte bu öncelikleri vurgulamaktadır.

1. Süreç ve araçlardan ziyade bireyler ve etkileşimler: Yazılımlar bilgisayarlar tarafından çalıştırılan ürünler olsa da yazılımı talep eden müşteriler ve onu geliştiren programcılar insanlardır. Müşteriler ve geliştirici ekip arasında güçlü bir iletişim olmalıdır. Ürünler ve araçlar değişebilir, eskiyebilir ve gözden çıkarılabilir. Fakat birbiriyle uyumlu iyi bir ekibiniz varsa onu gözden çıkaramazsınız. Bu nedenle bireylere değer vermek işletilen süreç ve kullanılan araçlardan daha önemlidir.

2. Kapsamlı dökümantasyondan ziyade çalışan yazılım: Projelerde müşteri ile el sıkışmanın şartı iş sonunda çalışan kaliteli bir yazılımın olmasıdır. Müşteriler kapsamlı dökümanlara para ödemek istemez ama tercihen isterler. Müşteriyi boğmayan ancak ona yeteri kadar bilgi veren bir dökümantasyonunuz olmalıdır. Bu nedenle önceliğimiz çok kapsamlı bir dökümantasyon oluşturmak yerine iyi çalışan bir yazılım olmalıdır.

3. Sözleşme pazarlığından ziyade müşteri ile işbirliği: Müşteri tarafından sunulan şartnameler ve yapılan sözleşmeler her iki tarafa güvenlik duygusu verir. Bir sözleşmeye imza atılır ve belirli bir zamanda yapılacak işler planlanmış olur. Agile süreçlerde her zaman müşteri ile işbirliği ön plandadır. Kararlar beraber alınır, sürekli görüş alışverişi yapılır, teslimatlar sonrasında geri bildirimler alınarak değerlendirmeler yapılır. Yani iş sözleşmesini ve talepleri alıp iş bitiminde görüşmek diye bir şey olmaz.

4. Plana bağlı kalmaktan ziyade değişime yanıt vermek: Agile yani çeviklik bir plana bağlı kalmadan değişime cevap vermek demektir. Zamanla gereksinimler, mevzuatlar iş kuralları değişebileceğinden uyguladığınız çözüm yöntemi de bu değişimlere ayak uydurabilmelidir.

Agile süreçlerde Scrum, Kanban ve Lean gibi proje yönetim yaklaşımları yanında Extreme Programming(XP) gibi yazılım geliştirme yaklaşımları kullanılmaktadır. Extreme Programing yazılım geliştirme yöntemleri, uzun yıllar tecrübe edilmiş ve kendini kanıtlamış yöntemler olarak bilinir. Bunlar arasında Test Driven Development gibi önce test kodunun yazılıp ardından çalışan kodun üretildiği bir yaklaşım vardır. Pair Programming yani eşli programlama diye bilinen iki programcının aynı kodu geliştirdiği yaklaşımlar vardır. Geliştiricilerin birbirlerinin kodunu incelemesi ve yorumlaması(core review) da yine bir diğer yaklaşımdır.

Bütün bu yöntemler yazılımın türüne bağlı kalmadan uygulanabilecek yöntemlerdir. Yani web uygulaması, mobil uygulamalar, oyunlar veya masaüstü uygulamaları gibi her türlü projede çevik yöntemler uygulanabilmektedir.

Neden Agile?

Bu sorunun birinci nedeni agile kavramının değişime cevap verebilme yeteneğidir. Agile geliştirmenin bir diğer nedeni ise çabuk sonuç alma isteğidir. Taleplerin adım adım karşılanıp çalışan ürünlerin müşteriye sürekli teslim edilmesi neticesinde size olumlu veya olumsuz geri bildirimler akmaya başlar. Müşteri ile işbirliği içinde olduğunuzdan doğru şeyi yapıp yapmadığınızı hemen anlayabilirsiniz. Bu sayede harcadığınıza karşılık kazandığınızı görebilirsiniz yani yatırım getirisi (Return on investment) hakkında bilgi sahibi olabilirsiniz. Agile süreçlerde büyük bir yazılımın küçük parçaları ile çalışıldığı için erken yapılan hatalar büyük bir felakete neden olmaz. Diğer bir deyişle hatanın erkenden fark edilmesi sağlanmış olur. Ekiplerin düzgün bir yapıda oluşturulması ile kaynak planlaması da daha mantıklı olacaktır. Örneğin waterfall yöntemi ile yapılan bir yıllık bir projede analiz için gerekli çalışanların işi üç ayda bittikten sonra gereksiz yere projede tutmak istemeyebilirsiniz. Ancak ilerde analiz ile ilgili bir sorun çıkarsa diye tutmak zorunda kalabilirsiniz. Spiral yöntemde ise her döngüde süreç adımları yeniden ele alındığı için bu duruma uygun bir takım oluşturulabilir.

 

Bir İki Cümleyle Design Patterns

17 Eyl

Factory Pattern
Nesne oluşturma işleminin bir iş kuralı dahilinde olduğu durumlarda kullanıcıyı kuralın dışında tutarak nesne oluşturmak için kullanılır. Kurallara uygun bir şekilde soyut tipleri implemente eden  somut nesneler oluşturularak kullanıcılara verilir.

Abstract Factory Design Pattern
Factory nesneleri oluşturmak için kullanılan bir desendir. Yani Abstract Factory deseni ile soyut bir factory nesnesi oluşturulur, bu factory nesnesinden de belirlenen kural dahilinde bir nesne oluşturulur. Küme alt küme mantığına benzer bir yapı söz konusudur.

Adapter Design Pattern
Birbiriyle uyumsuz iki farklı interface arasında anlaşma sağlayan bir köprü vazifesi görür. Bunu gerçek hayatta cep telefonu ile elektrik prizi arasında görev yapan şarj aletine benzetebiliriz.

Template Pattern
Bir algoritma için soyut tipte bir iskelet oluşturarak bu iskeletten somut süreç adımları oluşturmamızı sağlar. Algoritmanın adımlarını somut sınıflarda tanımlarız. İskelet görevi gören tip bir şablon niteliğindedir.

Singleton Design Pattern
Bir sınıfa ait sadece tek bir nesne oluşturmayı ve gerektiğinde ona ulaşabilmeyi garanti eder. Yani nesne oluşturma üzerine oluşturulmuş bir desendir.

Decorator Pattern
Nesnelere kompozisyon yoluyla yeni davranışlar eklememizi sağlar. Bu işlemi aynı temel sınıftan türeterek veya ortak bir interface uygulayıp nesneye enjekte ederek yapabilmek mümkündür.

State Pattern
Bir nesnenin iç durumunda meydana gelen değişikliklerin nesnenin davranışını değiştirmesine izin verir. İç durumdan kasıt interface tipleridir.

Strategy Pattern
Çalışma zamanında dinamik olarak algoritma değişikliğine olanak sağlayan bir desendir. Algoritmalar somut nesnelerde saklanır. Client kod ise algoritma sınıfının türetildiği abstract veya interface türünü tanır.

  • Not: State ve Strategy pattern diyagram olarak birbirine benzerdir. Ancak çalışma prensipleri açısından birbirlerinden farklıdırlar. State pattern için nesnenin NE olduğu önemlidir. Strategy için nesnenin NASIL çalıştığı önemlidir.

Specification Pattern
İş nesneleri içerisinde gömülü olan seçim kriterlerini başka nesneler ile paylaşamazsınız veya tekrar tekrar kullanamazsınız. Specification pettern, bu problemi ortadan kaldırır.

Composite Pattern
Nesnelere ağaç yapısında ya da hiyerarşik topluluklar halinde gruplanabilme yeteneği sunar. Örneğin bir kategorinin alt kategorisi olabileceği gibi onun da alt kategorisi olabilir.

Proxy Design Pattern
Bir sınıfın işlevselliği başka bir sınıf ile temsil edilir. Cache mekanizmaları oluşturulurken kaynak kullanımını azaltmak için kullanılabilir. Örneğin veri tabanından veri getiren bir nesne, aynı verilere ihtiyaç duyulduğunda tekrar veri tabanına gitmeye gerek duyulmadan kullanılabilir.

Builder Design Pattern
Kuramsal bir iş akışını işletmek için gerekli olan kompleks bir nesnenin basit nesneler ile adım adım oluşturulmasına olanak sağlar.

Angularjs direktif template belirleme ve $templateCache servisi

12 Eyl

Angularjs direktiflerinin görünüm tarafını template özelliği üzerinden belirleyebiliriz. Template özelliğini belirlemenin bazı yöntemleri vardır. Bunlar:

  • Düz metin şeklinde belirleme
  • URL ile dosya yolunu göstererek belirleme
  • $templateCache servisi ile belirleme

Bu işlemleri örnek bir personel kartı tanımlayarak gerçekleştirmeye çalışalım.

Düz Metin Şeklinde Template Belirlemek

Direktiflerin template özelliğini düz metin şeklinde belirlemek aşağıdaki yöntem izlenmelidir.

 

URL ile Dosya Yolunu Göstererek Belirleme

Bu yöntemde templateUrl özelliği olarak bir html dosya yolu verilir. HTML dosya üzerinde istediğimiz gibi düzenlemeleri yaparak yolunu bu şekilde direktife kolayca verebiliriz.

 

$templateCache Servisi ile Belirleme

URL ile template belirlerken yapılan işlem önceden hazırlanmış bir HTML dosyasının yolunu templateUrl özelliğine bildirmektir.

$templateCache servisini kullanırken HTML metinini önceden servise belirtmek gerekmektedir. Servisin kullanımı put() ve get() metodları üzerinden yapılmaktadır.

  • $templateCache.put(“templateAdı”, “template içeiği”)
  • $templateCache.get(“templateAdı”)

Template içeriğini uygulama başlatılırken yani modülün run fonksiyonu çalıştırıldığında gerçekleştirebiliriz.

 

$templateCache içerisindeki veriye templateUrl üzerinden aşağıdaki şekilde erişmek mümkündür.

Not: Angularjs uygulamalarında script şeklinde tanımlanan html içerikleri doğrudan $templateCache içerisine kaydedilir.

Bunu şu şekilde inceleyebiliriz:

Burada html içeriği script olarak tanımlanmıştır ve id değeri olarak card.html verilmiştir. İçeriğe javascript tarafından $templateCache.get(‘card.html’) şeklinde erişilebilmektedir.

Angularjs Proje Yönetimi

8 Eyl

Yazılım projelerinin geliştirilmesi sırasında karşılaşılan bazı genel problemler vardır. Bu problemler yazılımın Frontend veya Backend olmasına bağlı olmayan, sürecin gelişimi sırasında ortaya çıkan problemlerdir.

Projelerde istenen taleplere bağlı olarak yazılımda çok fazla kod olabilir. Kod sayısı arttıkça yazılımın çalışma performansı da düşmeye başlar. Bir süre sonra kodu yönetemez hale gelirsiniz. Artık kod sizi yönetmeye başlar ki bu durumda yeterki  çalışsın mantığıyla bir dizi mantıksız işler yapmaya başlayabilirsiniz. Bu gibi durumlarla başa çıkabilmek için uyguladığınız yöntemlerde kod sayısı artsa bile kodda karmaşıklığın oluşmaması gerekmektedir. Yani bir sene süren bir projede ilk gün nasıl kafa karışıklığı olmadan rahatça kod eklenebiliyorsa, son günde de aynı rahatlıkla kod eklemesi yapılabilmelidir. Modüler yapılar kullanarak bir şekilde kodun karmaşasını azaltabiliriz, bu sefer de modül sayıları artar ve iş süreleri uzamaya başlar.

Bu noktada işlerimizi önemli ölçüde kolaylaştıracak olan araçlar Framework’lerdir. Bizim yapmamız gereken bir takım işleri Framework’lere yüklemek zaman kazanmak açısından önemlidir. Her framework amaca uygun olmayabilir. Bu nedenle Framework seçiminde kolay kullanılabilirlik, sürekli güncellenme, performans ve geniş topluluklar tarafından kullanılıyor olmak önemlidir.

Angularjs bu açıdan bakıldığında yapılabilecek en doğru seçimlerden birisidir. Üretim ve destekleme tarafında Google vardır ve çok yaygın kullanılan bir Framework’dür. Kullanım açısından son derece kolaydır. Model ve View tarafındaki ayrımı yapabilmesi (MVC mimarisi) ve modüler geliştirmeye imkan sağlayan yapısı sayesinde kullanıcı dostu bir yapısı vardır.

Angularjs Yapı Taşları

Angularjs kendine özgü bir mimari üzerine geliştirilmiştir. Belli yapı taşları üzerine oturtulmuş bir düzen söz konusudur. Bunlar:

  • Module
  • Config
  • Route
  • Controller
  • View
  • Directive
  • Filter
  • Service
  • Factory

şeklinde sıralanabilir.

Angularjs Proje Yapılandırması

Angularjs ile yapılandırılacak projeler mimari açıdan önemlidir. Biz geliştiricilere düzgün kod yazabilmek için birçok imkanı sunan bir framewrok ile spagetti kod oluşturmamak lazım. Bu açıdan angularjs ile çalışırken dikkat edilmesi gereken bazı hususları aşağıda başlıklar halinde ele alınmıştır.

Modüler Yapı

Müşterinin her talebi için uygulamayı bölümlendirmek ve her bölüm için farklı bir modül oluşturulmalıdır. Geniş ölçekli bir uygulama geliştirirken her bileşeni tek bir modül altına toplamak yerine iş mantığına göre tasarlanmış birden fazla modül ile çalışmak daha uygun olacaktır. Örnek olarak Email Hizmeti veren bir uygulama için modüller şu şekilde olabilir:

angular.module("Epostalar", []);
angular.module("GelenKutusu", ["Epostalar"]);
angular.module("EpostaServisi", ["GelenKutusu"]);

Model Servisleri

Angularjs tarafından sunulan Dependency Injection yapısı sayesinde soyutlamalar kolayca yapılabilmektedir. Servis yapısı ile modüller arasında izolasyonlar yapılmalıdır. Bu sayede servisler veya modüller arasında kod aktarımı ile iletişim sağlanabilir.

Oluşturulan servisler tek bir görevi yerine getirmelidir. Örneğin HTTP protokolü üzerinden bir dış kaynak ile veri alış verişi yapacak olan bir servis sadece o kaynakla konuşmalıdır. Veriyi almışken servise hadi ekranda listeleme de yapın şeklinde ikinci bir görev verilmemelidir. Aksi taktirde hep karşısında durduğumuz karmaşıklık problemine doğru ilk adımı atmış oluruz.

Kod Yapısı

Mümkün olduğunca az kod satırlarıyla hazırlanmış, gerektiğinde servisler aracılığı ile haberleşebilen modüller oluşturulmalıdır. Servis, Controller ve Template gibi kod birimlerinin içerikleri sade anlaşılır ve kısa tutulmalıdır.

HTML tarafındaki bir DOM elemanları üzerinde Controller veya Service gibi yapılar içinden erişip doğrudan işlem yapmamalısınız.

Controller sınıflarından dış kaynaklara erişilmemelidir. Bu işlemi servisler aracılığı ile gerçekleştirip, ilgili servislere controller tarafından erişim sağlanmalıdır. Veri kümelerinin controller içerisinde depolanması da yanlış bir davranıştır.

Görünüm Yapısı

Görünüm tarafındaki HTML elementlerini depoladığımız yapılara template denir. Template içerisinde sadece HTML kodları ve Angularjs direktifleri olmalıdır. İş kuralları bu kısımda tanımlanmamalıdır. Kurallar template tarafından erişilen controller içerisinde tanımlanmalıdır. Aksi taktirde görünümle alakası olmayan kural belirleme sorumluluğu controller tarafından alınıp görünüm tarafına yüklenmiş olur.

Görünüm tarafında sürekli güncellenmesi gerekmeyen içerikler için TwoWayBinding yerine OneWayBinding tercih edilmelidir.

Proje Dizin Yapısı

Proje yapısı şekillendirilirken dikkat edilmesi gereken bir diğer yapı ise proje dizin yapısının oluşturulmasıdır. Kod birimlerinizi HTML, CSS, JS gibi özelliklerine ve Angularjs yapılarına göre ayırmak ve dizinlere aktarmak sık kullanılan bir yöntemdir.

Dizin
Yanlış Dizin Yapısı

Bütün controller dosyalarını Controllers dizini altında dizini altında toplamak, zamanla dizin içerisinde onlarca belki yüzlerce dosya birikmesine neden olacaktır. Bu durumda aradığımızı bulmak daha fazla zaman alacaktır. Örneğin bir EmailApplication projesi için GelenKutusu modülünün controller kodu Controllers dizininde aranacak ve görünüm için hazırlanan template kod dosyası ise Templates dizininde aranacaktır. Bu şekildeki proje tasnifi “türe göre tasnif” olarak adlandırılır. Türe göre tasnif edilen projeler zamanla projelerin karmaşık bir hal almasına neden olur.

Bunun yerine iş mantığına göre planlanmış bir dizin yapısı oluşturmak daha uygun bir yöntem olacaktır.

Uygun Dizin Yapısı
Uygun Dizin Yapısı

Email hizmeti ile ilgili iş kurallarını ve dosyalarını tabakalandırarak çalışmak daha uygun bir seçim olacaktır. Bu şeklide proje tasnifine ise “özelliğe göre tasnif” denir. Bu durumda Email listemizdeki kişilerle ilgili işlemlerin Contacts dizininde olduğunu özellik bakımından kolayca anlayabiliriz. Hem görünüm hem kullanım açısından sade ve anlaşılır bir yöntemdir.

Kodun organizasyon yapılandırması tamamen ekibinize veya size kalmış bir seçimdir. Bir dayatma söz konusu değildir. Temel nokta, kodun iyi bir şekilde ayrıştırılması ve ayrıştırılan bölümlerin yeni bir karmaşaya yol açmamasıdır.

Bu yazıda angularjs projeleri oluşturulurken dikkat edilmesi gereken önemli hususlardan bahsetmeye çalıştık. Umarım faydalı olmuştur. Bir sonraki yazıda görüşmek dileğiyle.

Angularjs ngResource ile RESTful veri iletişimi

4 Eyl

Bu yazıda angularjs ile proje geliştirirken REST servislere erişerek veri talep etmek için kullanılmak üzere hazırlanmış bir modül olan ngResource modülünü incelemeye çalışacağız.

ngResource modülü angular.js script dosyası içerisinde bulunmaz. Projemize ngResource modülünü dahil edebilmek için angular-resource.js javascript dosyasını projemize dahil etmeliyiz.

<script src="angular.js">
<script src="angular-resource.js">

Modülü bağımlı modül olarak projemize ekleyerek uygulamamıza yükleyebiliriz. Yükeleme işlemini şu şekilde yapabiliriz.

angular.module('app', ['ngResource']);

Yükleme işlemi gerçekleştikten sonra RESTful servislere erişmek için modül içerisinde bulunan $resource servisini kullanabiliriz. $resource servisi kendi içerisinde $http servisine bağımlıdır ve bu servis sayesinde sunucu ile iletişime geçebilir. $resource servisinin kullanım şekli kısaca aşağıdaki gibidir.

$resource(url, [paramDefaults], [actions], options);

Servisin REST uçları ile konuşabilmek için bazı metodları vardır. Bunlar:

{ 'get':    {method:'GET'},
  'save':   {method:'POST'},
  'query':  {method:'GET', isArray:true},
  'remove': {method:'DELETE'},
  'delete': {method:'DELETE'} };

Örnek olarak bir REST ucumuz aşağıdaki şekilde olsun. Bu uçla $resource servisi aracılığı ile işlemler yapmaya çalışalım.

  • http://location.bayramucuncu.com/api/location => GET  ile lokasyonlar listelenir.
  • http://location.bayramucuncu.com/api/location => POST ile yeni lokasyon ekler.
  • http://location.bayramucuncu.com/api/location/:id => GET tek lokasyon getirir.
  • http://location.bayramucuncu.com/api/location/:id => PUT lokasyon günceller.
  • http://location.bayramucuncu.com/api/location/:id => DELETE lokasyon siler.
angular.module('location.services')
 .factory('Endpoint', function($resource) {
    return $resource('http://location.bayramucuncu.com/api/entries/:id',
              {
                   id: "@id"
              },
              {
                   update: { method: "PUT" }
              }
    );
 });

Burada {update: { method: “PUT” }} şeklinde özel bir fonksiyon tanımlanmıştır. Çünkü  HTTP PUT metodu, $resource içerisinde standart bir kavram olarak ele alınmamıştır.

Diğer bir  parametre olan {id: “@id”} ise URL adresinin sonundaki “/:id” ifadesini değişken hale getirmek için tanımlanmıştır.

Artık controller içerisinde $resource servisinin metodlarını kullanabiliriz.

angular.module('location.controllers')
       .controller('LocationIndexCtrl', function($scope, Endpoint) {
           Endpoint.query(function(response){
              $scope.locations = response;
           });
       })
       .controller('LocationDetailCtrl', function($scope, Endpoint) {
           var parameter = { id: 1 };
           Endpoint.get(parameter, function(response){
              $scope.location = response;
           });
       })
       .controller('LocationCreateCtrl', function($scope, Endpoint) {
           var location = {
                name: "blue restaurant",
                lon: "123"
                lat: "456"
           };
           Endpoint.save(location, function(response){
              alert("new location created");
           });
       })
       .controller('LocationUpdateCtrl', function($scope, Endpoint) {
           var location = {
                name: "blue restaurant",
                lon: "123"
                lat: "456"
           };
           Endpoint.update({ id:1 }, location, function(response){
              alert("location updated");
           });
       })
       .controller('LocationDeleteCtrl', function($scope, Endpoint) {
           var parameter = { id: 1 };
           Endpoint.delete(parameter, function(response){
              alert("location deleted");
           });
})

Bu şekilde REST servisi işlemleri için her metoda karşılık bir controller oluşturmuş olduk. İsterseniz tek bir controller içerisine her HTTP metodu için bir fonksiyon da tanımlayabilirsiniz.

Angularjs ile asenkron işlemler gerçekleştirilirken kullanılan $promise nesnesine $resource servisi üzerinden erişmek de mümkündür.

angular.module('location.controllers')
       .controller('LocationIndexCtrl', function($scope, Endpoint) {
           Endpoint.query().$promise.then(
              function(response){
                 $scope.locations = response;
              },
              function(error){
                console.log("Hata oluştu!");
              }
           );
       })
})

Bu yazıda ngResource modülünün REST uçları ile nasıl konuşabileceğimizi incelemiş olduk. Bir sonraki yazıda görüşmek dileğiyle.