Tasarım şablonları yazı dizisine tasarım şablonlarının bana ne ifade ettiğini anlatarak bir önceki yazımda giriş yapmıştım. Bu yazımda ise Oluşturucu Tasarım Şablonlarının(Creational Design Patterns) bir üyesi olan Factory Design Pattern(Fabrika Tasarım Şablonu) ile devam edeceğim.

Onlarca uçağım var. Boeing, Airbus, Cessna marka, onlarca boy boy, çeşit çeşit uçağım var. Tüm bu uçakları da kendim üretiyorum. Bir fabrikam yok, nasıl üretileceğini aklımda tutuyorum yeri gelince aklımda tuttuğum bu şeyleri kullanarak istediğim uçağı üretebiliyorum. Hemen şimdi size bir tane Boeing 747-8 üreteyim.

Önce sınıflarımıza bakalım;

namespace DesignPatters\Factory;

abstract class AbstractAircraft
{
    public $cruisingSpeed;
    public $model;
}
class Boeing extends AbstractAircraft {}
class Airbus extends AbstractAircraft {}
class Cessna extends AbstractAircraft {}

Ve üretim…

$aircraft = new \DesignPatters\Factory\Boeing();
$aircraft->model = '747-8';
$aircraft->cruisingSpeed = 917;

Artık Boeing 747-8 modelinde bir uçağımız var. Bu uçağı Türk Hava Yollarına hediye ediyorum. Malum ellerinde hiç jumbo jet yok benden armağan olsun. THY uçağı İstanbul Atatürk Havalimanı – Ankara Esenboğa Havalimanı arasında kullanıyor.
THY Boeing 747-8′i çok beğenmiş bir tane daha istiyor. Tabii diyorum ve hemen bir tane daha üretiyorum.

$aircraft = new \DesignPatters\Factory\Boeing();
$aircraft->model = '747-8';
$aircraft->cruisingSpeed = 917;

Bu uçağıda İstanbul Atatürk Havalimanı – John F. Kennedy International Havalimanı arasında kullanmaya başlıyorlar.

İşler çok iyi gidiyor. Her gün yeni bir uçak talebi geliyor çeşitli havayolu şirketlerinden. 3 ay sonra 100 küsur tane uçak üretip vermişim havayolu şirketlerine. Bir gün THY’den telefon geliyor bu uçakların yolcu sayısı bilgisi yok diyor telefondaki görevli. Hemen ekleyelim diye de ekliyor. Tamam diyorum ben de hiç tereddüt etmeden. Niye tereddüt edeyim ki AbstractAircraft sınıfına passengers adında yeni bir property(özellik) eklerim olur biter. Ekliyorum da..

abstract class AbstractAircraft
{
    public $cruisingSpeed;
    public $model;
    public $passengers;
}

Düşündüğüm gibi ilk aşama oldukça kolay oldu. Şimdi tüm ürettiğim uçaklara yolcu sayısını girmem gerekiyor yani ürettiğim 100 küsur uçağa tek tek kendilerine ait yolcu sayısı bilgisini girmem gerekiyor…

Offf! Ben 100′den fazla yerde ayrı ayrı uçak üretimi yapmışım. Şimdi bunların hepsine yolcu sayısı bilgisi eklemem için bu yerleri tek tek bulup düzenlemem gerekiyor. Akılsız başın cezasını parmaklar çekiyor ve ben 100′den fazla üretim yaptığım yeri bulup yolcu sayısı verisini eklemeye başlıyorum. Umarım herhangi birinde hata yapmam. Yapacağım iş basit olsa bile herhangi birini unutmam oldukça muhtemel çünkü 100′den fazla uçak üretim yerini tespit edip düzenleme yapmam gerekiyor. Birini unutmam çok büyük sorunlara neden olabilir

Başarısız bir programcılık hikayesi ile başlamak istedim bu yazıma. Peki yukarıda hikayenin öznesi olmak istemiyorsak ne yapmalıyız? İşte bunun cevabı Fabrika Tasarım Şablonun’da gizli.

Şablonumuzun ismi Fabrika. Gerçek dünyada ki bir fabrikayı düşünelim. Fabrikaya bir emir gönderilir. Bu emir şu şekilde olabilir; Bana Boeing’in 747-8 modelinden bir uçak üret. Fabrika bu talebi değerlendirir ve üretimi Boeing 747-8′e göre gerçekleştirir.

O zaman gerçek dünyada ki fabrikayı yazılım dünyasına uyarlayalım…

class Factory
{
    public static function create($model)
    {
        switch ($model) {
            case 'Boeing 747-8':
                $aircraft = new Boeing();
                $aircraft->model = '747-8';
                $aircraft->cruisingSpeed = 917;
                break;
            case 'Airbus a380':
                $aircraft = new Airbus();
                $aircraft->model = 'a380';
                $aircraft->cruisingSpeed = 945;
                break;
            default:
                throw new \RuntimeException('Undefined aircraft');
        }
        return $aircraft;
    }
}

Fabrikamızı çalıştırıp üretimi gerçekleştirelim.

$aircraft = \DesignPatters\Factory\Factory::create('Boeing 747-8');

Gördüğünüz gibi artık bir uçak üretirken o uçağın cruising speed değerini, model numarasını bilmemize gerek kalmadı. Bunları bizim adımıza bilip kullanan biri var o da uçak fabrikamız.

Yukarıdaki başarısızlık hikayesinde Fabrika Tasarım Şablonu kullandığımızı düşünelim. Yine 100 küsur uçak ürettik farklı yerlerde bunları kullandık. Ama bu sefer bu uçakların üretimini fabrikamız üzerinden gerçekleştirdik. Ve yine THY bizden uçaklara yolcu sayısı bilgisini eklememizi istedi. Hemen fabrikamızda bu isteği gerçekleştirdik.

class Factory
{
    public static function create($model)
    {
        switch ($model) {
            case 'Boeing 747-8':
                $aircraft = new Boeing();
                $aircraft->model = '747-8';
                $aircraft->cruisingSpeed = 917;
                $aircraft->passengers = 500;
                break;
            case 'Airbus a380':
                $aircraft = new Airbus();
                $aircraft->model = 'a380';
                $aircraft->cruisingSpeed = 945;
                $aircraft->passengers = 853;
                break;
            default:
                throw new \RuntimeException('Undefined aircraft');
        }
        return $aircraft;
    }

}

Fabrikamızın son hali bu şekilde. Artık 100′den fazla uçağımızın hepsi yolcu sayısını biliyor. Ve bu işlemi yaparken sadece bir tek yerde düzenleme yaptık. Sadece fabrikamızda.

Gördüğünüz gibi fabrika tasarım şablonunu kullanarak daha sonra yapacağımız düzenlemeleri kolaylıkla uygulayabiliyoruz.

Fabrika Tasarım Şablonunu Kullanmanın Bize Getirileri;

• Fabrika tasarım şablonu ile kod tekrarını(duplication of code) önüne geçiyoruz. (Yukarıdaki örnekte her üretimde yolcu sayısını tek tek girmemiş olduk)
• Fabrika tasarım şablonu ile nesneleri kullanan kullanıcılar, nesneler hakkında çok daha az bilgiye ihtiyaç duyuyor. (Yukarıdaki örnekte uçağı kullanan her bir kullanıcı artık o uçağın yolcu sayısını bilmek zorunda değil)
• Fabrika tasarım şablonu ile çok daha esnek bir yapı elde etmiş oluruz.

Bu yazımda kullandığım örneğin kodlarına buradan ulaşabilirsiniz.

Çok uzun süredir(4 şubat 2011′den bu yana) bloguma bir şeyler yazamadım.  Üzerine yazı yazacak konu bulma sıkıntısı ve zaman darlığından dolayı 1 yılı yakın süredir yeni bir yazı giremedim. Bu nedenle Tasarım Şablonları adlı bir yazı dizisi yazmaya karar verdim. Bu yazıyı da, bu yazı dizisine girizgah olarak yazmaya karar verdim.

Herhangi bir kavramın ne ifade ettiğini anlamak için en çok kullandığım teknik, o kavrama verilen isimde geçen kelimelerin anlamlarına bakmak olur benim için. Bu yazımda anlatmaya çalışacağım Tasarım Şablonları(Design Patterns) konusunda da bu teknik ile giriş yapacağım.

TDK’ya göre “Tasarım”;

isim Zihinde canlandırılan biçim, tasavvur

Tasarım kavramına gerçek hayattan basit bir örnek vererek başlayalım. 2 adet bardağı uzay boşluğunda herhangi bir konuma yerleştirsek bu bir tasarım olur.(Sadece 2 adet bardak olmasına rağmen sonsuz sayıda kombinasyon olabilir. Bu yüzden ortaya bir tasarım koymak aslında oluşan tasarımlar arasında herhangi birini seçmekten de geçiyor.) Programlamada düşünürsek eğer, sınıfların iç yapısı, sınıfların konumu, sınıfların ve bileşenlerinin çalışma şekilleri, yine sınıfların ve bileşenlerin birbirleriyle olan ilişkilerinin nasıl olacağı gibi konular birer tasarım konularıdır. Yani “Nasıl?” sorusunun cevabı yapacağımız tasarımdır.

Yine TDK’ya göre “Şablon”;

isim Üzerindeki harf ve şekillerin çevre çizgileri kalem ucu girecek biçimde oyuk olan, bu çizgilerden kalemle istenilen biçim elde edilen, metal veya plastikten cetvel

mecaz Çok kez tekrarlandığından kanıksanmış basmakalıp örnek

 Hala kullanılıyor mu bilmiyorum ama benim ilkokulu okuduğum yıllarda solda bulunan cetvel öğrencilerin olmazsa olmazlarından biriydi.

Bu şablon cetveli doğuş amacını düşünelim. Daire çizme ihtiyacımız var. Düzgün daire çizmek de haliyle biraz zor. Ve sık sık daire çizmemiz gerekiyor. O zaman şu şekilde diyebiliriz; ihtiyacımız net bir şekilde ifade edebiliyorsak ve çok fazla değişikliğe açık bir ihtiyaç değilse, neden bir kalıp kullanarak ihtiyacımızı karşılamayalım. Bu noktada oluşturduğumuz şablonlar ile sık sık doğan bir ihtiyacımızı kolaylıkla gidermek mümkün.

O zaman tasarım ve şablon kavramlarını birleştirelim. Bir ihtiyacı karşılamak için bir tasarıma ihtiyacımız var. Bu ihtiyaç çok yeni ve bize özel bir ihtiyaç değil. Daha evvelde birileri bu ihtiyaca sahip olmuş ve bu ihtiyacı tasarım geliştirerek gidermişler. Hatta tasarımları o kadar iyi olmuş ki herkes tarafından bilinir ve kullanılır olmuş. Bu tasarımlara genel olarak Tasarım Şablonları adını veriyoruz.

Yukarıda genel olarak gerçek hayattan, yazılıma özel teknik kavramlar yerine, gündelik hayattan örnekler vererek tasarım şablonları konusuna eğilmeye çalıştım. İsterseniz işin biraz da yazılım boyutuna bakalım.

Yazılım geliştirici olarak programlama süreci boyunca geliştirdiğimiz uygulamanın ihtiyaçlarını gidermemiz en büyük görevimizdir. Bu ihtiyaçları giderirken genelde her adıma karşımıza çıkan Nasıl? sorusunu çözmek ile uğraşırız. Çoğunlukla birden fazla alternatif üreterek bu alternatifler arasından en uygununu bulmaya uğraşırız. Bu genelde sancılı ve sıkıntılı bir süreçtir. Çünkü oluşturduğumuz tasarım ilerde doğacak yeni ihtiyaçlara ne kadar karşılayacağını kestirmemiz oldukça zordur. Bu noktada diğer yazılım geliştiricilerin tecrübelerinden faydalanabiliriz. Yani bizim kendi tasarımlarımız yerine, başkalarının geliştirdiği tasarımlar ile sorunumuzu çözebiliriz.

Programcılar tarafından ihtiyaçları karşılamak üzere geliştirilmiş ve tekrar kullanılabilir yapıda olan program parçalarına Tasarım Şablonu denir.

Tasarım Şablonu Kategorileri ve Tasarım Şablonları

1. Oluşturucu tasarım şablonları (Creational patterns) bunlar; Abstract Factory, Builder, Factory, Prototype, Singleton tasarım şablonları.
2. Yapısal tasarım şablonları(Structual patterns) bunlar; Adapter, Bridge, Facede, Decorator, Composite, Flyweight, Proxy tasarım şablonları.
3. Davranışsal tasarım şablonları(Behavioral patterns) bunlar; Command, Memento, Strategy, Iterator, State, Chain of Responsibility, Mediator, Observer, Template Method, Visitor tasarım şablonları.

Yukarıda yazdıklarım dışında birçok tasarım şablonu daha var. Ancak ben genel olarak bilinenleri yazdım.

Tasarım şablonunu kullanmak bize ne sağlar?

• Tasarım şablonları edinilen tecrübeler doğrultusunda oluştuğu için genellikle bizim o an oluşturduğumuz tasarımlardan daha iyi olacaktır. Gelecekte doğabilecek yeni ihtiyaçlara daha iyi cevap verebilir.
• Tekerleği yeniden icat etmek yerine, vaktimizi daha belirli ve bize özel ihtiyaçlarda kullanabiliriz.
• Tekrar kullanılabilir yapıda oldukları için yine vaktimizi daha iyi değerlendirmemize sağlar.
• Tasarımlar bir programcıya ait olmadığı için diğer programcıların tasarım anlaması çok daha kolay olur.
• Tasarım şablonlarını bizim dışımızda başka birileri tarafından da kullanıldığı için sürekli birileri tarafından geliştirilir.

Sonuç

Tasarım şablonları ile doğan tasarım ihtiyaçlarımızı gidermemiz mümkün. O zaman genel kabul görmüş tasarım şablonlarını öğrenirsek ihtiyacımız olduğunda bize uygun olan tasarım şablonunu seçerek ihtiyacımızı giderebiliriz. Bu sayede hem vakitten kazanmış oluruz hem de birçok programcı tarafından kullanılan bir tasarımı uygulamış oluruz.

Tasarım şablonları yazı dizisinde kendimce önemli gördüğüm tasarım şablonlarını PHP kullanarak anlatmaya çalışacağım.

Okuduğunuz için teşekkürler. Diğer yazılarda görüşmek üzere…

Geçen gün cep telefonumda Need for Speed Hot Pursuit oynarken navigasyon menüsü dikkatimi çekti. Menüdeki herhangi bir butona tıkladığımızda bir su birikintisine, bir damla düşmüş gibi arkasında dalgalar bırakıyordu. Bu şekilde bir menüyü acaba sadece CSS kullanılarak yapılmış mıdır diye kısa bir araştırma yaptım ama herhangi bir sonuca ulaşamadım.

Yapılmış herhangi bir örnek bulamayınca kendim yapmaya karar verdim.

Menüyü şu adımları izleyerek oluşturdum;

• Öncelikle yüksek border-radius değerleri ile ile yuvarlak halkalar elde ettim.
• En üste menü elamanın kendisini z-index değerlerini ayarlayarak yerleştirdim. Bunu altına ise dalga efektini verecek elementleri ilave ettim.
• Son olarak mouse, menü elemanlarının üzerine geldiğinde CSS’in transition özelliğini kullanarak animasyon şeklinde alta kalan halkaları genişlettim. Tabi halkalar genişlerken bulundukları konumu kaybettikleri için aynı anda top ve left değerlerini de uygun bir şekilde yine CSS transition özelliği ile ayarladım.

Sadece Chrome ve Safari de çalışıyor. Buradan test edebilir buradan da indirebilirsiniz

Web Storage özelliği tarayıcı tarafında verir saklamamızı sağlıyor yani basit bir veritabanı diyebiliriz. Bir anahtar(key) birde bu anahtara bağlı olan değer(value) vasıtası ile verilerimizi depoluyoruz Web Storage ile.

Tarayıcı tarafında veri saklamak yeni bir özellik değil, yıllardır çerezler(cookies) ile bu işlemi yapıyorduk ve hala yapmaya devam ediyoruz aslında.

Peki Web Storage’ın bize getirdiği avantajlar neler?

1. Bildiğiniz üzere çerezler sadece tarayıcı tarafındaki uygulamaların bilgi bilgi saklaması için geliştirilmemiştir. Çerezler aynı zamanda sunucu üzerinden tarayıcıda bilgi saklamak içinde kullanılır. Bu  yüzden her çerez sunucuya gönderilmek zorundadır.Açmak gerekirse siz tarayıcıda javascript kullanarak bir çerez oluşturup bu çereze teorik olarak 1MB boyunda bir değer girdiğinizde her http isteği için tarayıcı bu 1MB boyuntundaki veriyi sunucuya gönderecektir ve bu şekildeki kullanım gereksiz bir hantallığa yol açacaktır. Bu noktada imdadımıza Web Storage yetişiyor. Web Storage ile sakladığımız veriler http isteklerinde sunucuya gönderilmeyecektir.
2. Web Storage ile çerezlerden daha kullanışlı ve kolay veri saklıyabiliyoruz.

Web Storage kaça ayrılır.

Web Storage ikiye ayrılır;

1. Session Storage.
2. Local Storage.

Session Storage: “Storage” nesnesinden türetilmiştir. Session Storage ile sakladığımız verilerin ömrü tarayıcı kapana kadardır. Tarayıcı kapandıktan sonra bu veriler imha edilir.

Local Storage: Session Storage da olduğu gibi yine “Storage” nesnesinden türetilmiştir. Local Storage daki verilerin ömrü ise sonsuzdur. Yani Local Storage ile şuan yazdığımız bir veriyi bir yıl sonrada okuyabiliriz. Tabi ki tarayıcının başına kötü birşey gelmez ise

Session Storage ile Local Storage aynı method ve özelliklere sahiptir bunlar;

• “length” yazılmış verilerin adet olarak toplam sayısını verir.
• “getItem(anahtar)” girilen anahtar ismine ait veriyi döndürür.
• “setItem(anahtar, değer)” girilen anahtar ismi ve değere göre veriyi depoda saklar.
• “removeItem(anahtar)” girilen anahtar ismine göre veriyi depodan siler.
• “clear()” depoda saklanan tüm verileri siler.

Hangi tarayıcılar Geolocation destekliyor?

Buradan hangi tarayıcıların Geolocation’a destek verdiğine bakabilirsiniz. Ayrıca buradan kullandığınız tarayıcının destek verip vermediğini test edebilirsiniz.

Nasıl Kullanabiliriz?

Çok basit bir sayaç uygulaması ile kullanımına bakalım.

  var sayac = localStorage.getItem("sayac");
  sayac++;
  localStorage.setItem("sayac", sayac);
  $("#sayac").html("Sayac: " + sayac);

var sayac = localStorage.getItem(“sayac”) ile sayac anahtarına bağlı değeri çekiyoruz.

sayac++ ile bu değeri bir artırıyoruz.

localStorage.setItem(“sayac”,  sayac) kodu ile sayac anahtarına yeni sayac değerini ayarlıyoruz ve yeni sayac değerini #sayac elementine aktarıyoruz. Hepsi bu kadar!

Bundan sonra tarayıcımız kapansa dahi yine sayacın bulunduğu sayfa açıldığında sayaç değeri kaldığı yerden artmaya devam edecektir.

DEMO

Kaynaklar:

• http://dev.w3.org/html5/webstorage/
• http://www.quirksmode.org/blog/archives/2009/06/html5_storage_t.html
• http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-learning-about-html5-local-storage/

İnternetin ilk dönemlerinde insanlar genellikle rumuzlar(nickname) ile internette var olmayı tercih ederken, günümüzde gerçek isimleri ve gerçek kişilikleri ile var olmayı tercih ediyorlar. Eğilim bu yönde olunca sadece ad ve soyad paylaşmak da yetmiyor haliyle. Kullanıcılar gittikleri mekanları, o an bulundukları yerleri de bir şekilde paylaşmak istiyorlar. W3C konsorsiyumu da bu ihtiyacı görmüş olacak ki HTML5′e  Geolocation özelliğini ekledi. Bende bu yazımda basit olarak Geolocation’dan bahsetmek istiyorum.

Peki Geolocation nedir?

Geolocation eğer kullandığımız cihazda bir GPS aygıtı var ise GPS’den gelen veriler ile konumumuz tespit ediyor. Eğer herhangi bir GPS aygıtımız yoksa cihazımızda, “IP address, RFID, WiFi and Bluetooth MAC addresses, and GSM/CDMA cell IDs” bu bilgilerden yararlanarak konumuzu tespit etmeye çalışıyor. Çalışıyor diyorum çünkü bu yöntem ile pek doğru sonuçlar elde edemiyoruz .  Geolocation bu işleri bizim adımıza yapan API’dir.

Hangi tarayıcılar Geolocation destekliyor?

Buradan hangi tarayıcıların Geolocation’a destek verdiğine bakabilirsiniz. Ayrıca buradan kullandığınız tarayıcının destek verip vermediğini test edebilirsiniz.

Nasıl kullanabiliriz?

Aslında kullanmak oldukça kolay. “navigator” nesnesi ile kolayca konumu tespit edebiliriz. Aşağıda kullanımını görebilirsiniz.

	if (navigator.geolocation) {
		navigator.geolocation.getCurrentPosition(function(position) {
			var lat = position.coords.latitude;
			var lng = position.coords.longitude;
		});
	} else {
		alert('Tarayıcınız Geolocation desteklemiyor.');
	}

“navigator” nesnesi üzerinden “getCurrentPosition” methodu ile kullanıcının konumunu öğreniyoruz. Ancak bu işlemin gerçekleşmesi tarayıcıdan izin almamız gerekiyor, bu işlemi “getCurrentPosition” methodu bizim adımıza kendi gerçekleştiriyor.

“lat” değişkenimizin değeri enlemi “lng” değişkenimizin değeri ise boylam değerlerini veriyor.

Hepsi bu kadar. Aşağıdaki linkte google maps ile hazırladığım Geolocation demosuna bakabilirsiniz.

DEMO

Kaynaklar:

http://dev.w3.org/geo/api/spec-source.html