YUIcompressor kullanarak Webstorm üzerinde javascript minification

Pazar, 25 Oca 2015 yorum yok

Bu yazımızda kullanıcı arayüzü geliştirme(frontend development) sürecinde uygulanan ve performans arttırma yöntemi olan dosya içeriklerinin azaltılması işlemi üzerinde duracağız. Bu işlem yabancı kaynaklarda minification olarak geçer. Javascript minification ya da css minification olarak karşılaşabiliriz.

Kodun okunabilirliğini arttırabilmek içi geliştiriciler olarak Javascript kodlarını düzgün biçimlendirerek ve anlamlı isimlendirmeler kullanarak yazarız. Değişken isimleri anlaşılır ve mümkün olduğunca uzun olur. Her satıra ayrı tanımlamalar yapılır. Kodda karmaşa oluşmaması için ne gerekiyorsa yapılır. Bu durumda dosyada boşluk karakterlerin sayısı ve değişken isimlendirmelerinden dolayı gereksiz karakter sayısı artar. Tabi gereksiz karakter kavramı kodu yorumlayan mekanizmaya göredir bize göre değil. Hal böyle iken dosya boyutu da doğal olarak büyür. Hele ki modüler yapıda bir uygulama geliştiriyorsak modüller arttıkça kodlar da artacaktır. Nihayetinde uygulamamızın yüklenmesi uzun sürecektir. Bu gibi durumlarda dosyadaki gereksiz boşluklar ve uzun isimlendirmelerin küçültülerek dosya boyutunun azaltılması gerekmektedir.

Örneğin aşağıdaki javascript kodu açık ve anlaşılır şekilde yazılmıştır.

var getProduct = function(productCode){

    var productList = GetProductFromService(productCode);

    return productList;

}

Bu kodun küçültülmüş hali şu şekilde olacaktır:

var getProduct=function(e){var t=GetProductFromService(e);return t}

Bu şekilde yüzlerce satırlık kodlar tek satır haline getirilir. Ağ üzerinden indirilen dosyaların boyutu küçüleceği için kullanıcı tarafına kolayca yüklenebilir.

Javascript dosyalarının küçültülmüş halleri gelenek olarak dosyaadi.min.js şeklinde adlandırılır. Yani dosya adında min ifadesini görünce dosyanın minimize edilmiş hali olduğunu anlayabiliriz.

Javascript dosya boyutlarının küçültülmesi işlemini manuel olarak yapmak çok zor bir işlemdir. Bu işlemin otomatik olarak yapılması gerekmektedir. Geliştirme yaptığımız IDE özelliklerinde minification özelliğinin olması bize avantaj sağlar. Ancak piyasada bu işlemi yapan araçlar da mevcuttur. Bu yazı da YUIcompressor aracı ile dosya küçültme işlemini gerçekleştirmeye çalışacağız. Geliştirme ortamı olarak ise Webstorm kullanılmıştır.

YUIcompressor yüklemek için nodejs komutunu kullanıyoruz. Yükleme komutu şu şekildedir:

npm install -g yuicompressor

Webstorm eklentilerinden File Watcher yüklü olması gerekmektedir. Bu eklenti javascript dosyalarımızın takibini yaparak otomatik olarak *.min dosyalarını oluşturacaktır.

File Watcher Plugin

File Watcher Plugin

Daha önce yüklediğimiz YUIcompressor aracını Webstorm tarafına tanıtmak işlemi aşağıdaki ekran çıktısında gösterilmiştir. Program kısmında

C:\Users\{user}\AppData\Roaming\npm\yuicompressor.cmd şeklinde dosya seçilmelidir.

File Watcher Plugin

YUI Compressor File Watcher

Bu işlemden sonra javascript dosyalarımız YUIcompressor tarafından takibe alınmıştır. Herhangi bir javascript dosyasında işlem yapıp kaydettiğimizde aşağıdaki gibi bir görüntü oluşacaktır.

min.js

min.js

Görüldüğü üzere otomatik olarak min dosyalarımın oluşturulmaktadır. Artık HTML dosyalarımızda kullanabiliriz.

Categories: Javascript Tags:

Domain Driven Design Servisleri

Pazar, 11 Oca 2015 yorum yok

Bir domain model için en önemli yapı taşlarından biri servislerdir. Servisler, modele ait Entity ve Value nesnelerinin yapısına aykırı davranışları kendi bünyesinde taşıması için tasarlanırlar. Böylelikle Entity ve Value nesnelerinin vazifesi olmayan işleri yüklenmesini önlemiş olurlar.

Eric Evans‘a göre iyi tanımlanmış bir servisin belli karakteristik özellikleri vardır. Bunlar:

  • Domain nesnelerinin doğal bir parçası olmayan işlemleri yönetir.
  • Domain modelin diğer elemanları açısından Interface’ler tanımlanır.
  • Servis işlemler belli bir yerde tanımlanmak zorunda değildir.

Servisler test edilebilir olması ve birbirine bağlı işlemleri belirleyici olması açısından mutlaka bir  Interface çatısı altında bulunmalıdır. Interface’ler servislerin sözleşmeleridirler.

Servisler Application, Domain, Infrastructure gibi birçok katmanda bulunabilir.

Infrastructure servisleri IEmailSernder gibi dış kaynaklarla iletişimi sağlayan servislerdir. Dış kaynaklar  dosya sistemleri, SMTP, veritabanı, SMS gibi yapılar olabilir. Domain katmanı bir bildirimin kullanıcılara nasıl iletildiği ile ilgilenmez, sadece iç süreci tamamlar ve bir olayı(Event) tetikler.

Domain servisleri, küçük parçalar arasında üst seviye işlevselliği sağlayan kooordinatör vazifesindedir.  Örneğin sipariş işlemi için OrderProcessor servisi, para transferi için FundTransferService gibi. Domain  servisleri model için çok önemli olduğundan isimleri ve kullanımları Ubiquitous Language diye adlandırılan  ve kavramsal bir ifade olan domain dilinin bir parçası olmalıdır. Anlamları ve sorumlulukları müşteri ve  domain uzmanı tarafında tutarlı ve mantıklı olmalıdır.

Application servisleri dış ortama açılan servislerdir. Dış ortamdakiler bizim Entity nesnelerimizle doğrudan  iletişime geçemez. Fakat bunları temsil eden nesnelerle iletişime geçebilir. Katmanlar arasında iletişimi  doğrudan domain nesneleri ile yaparsak diğer katmanlar domain yapımız hakkında çok fazla bilgi sahibi olurlar. Application servisleri dış ortamdan gelentalepleri mesaj şeklinde model içindeki süreçlere aktarır. Bu noktada  Messaging Pattern diye adlandırılan yeni bir kavram karşımıza çıkıyor. Messaging Pattern Application  servislerinin kuralı gibidir. Dış ortamdan taleper mesaj olarak alınır ve iç süreç tamamlandıktan sonra sonuç  dış ortama servisler aracılığı ile mesaj olarak verilir. Application servisleri herhangi biriş kuralı içermezler. İş kuralları Domain katmanı için yürütülür.

Tasarıma başlarken genellikle öncelikle Domain ve Applicaiton servislerin oluşturlması ve kullanıcılara sunulacak olan Interface tiplerinin belirlenmesi daha sonra da Test Driven Development ile dış davranışların test edilmesi uygun olacaktır. Kullanıcı bakış açısından senaryoları oluşturup test etmek bize büyük katkılar sağlar. Çünkü yazdığımız kod sonuçta bir kullanıcıya sunulacaktır.

Özet

Domain Service: Domain nesnelerinin doğal yapısına sığmayan işletme mantığını kapsar. Bunlar CRUD işlemleri değildir. CRUD işelmeri repository bünyesinde gelişir.

Application Service: Sistem dışı kullanıcılar için oluşturulur. Örneğin Web servisleri veya Web arayüzleri bu servislerle haberleşirler. Kullanıcılara sunulan CRUD işlemleri burada tanımlanabilir.

Infrastructure Service: Dış kaynaklarla yapılan iletişimler için oluşturulur. (File, SMS, SMTP, MSMQ).

Kaynak:

  • Eric Evans, Domain Driven Design Tackling Complexity in The Heart of Software
  • http://lostechies.com/jimmybogard/2008/08/21/services-in-domain-driven-design/

ThoughtWorks ve Martin Fowler İstanbul’daydı

Pazar, 14 Eyl 2014 yorum yok

ThoughtWorks-Martin-Fowler-550Yazılım sektörünün önde gelen isimlerinden biri olan yazılım Martin Fowler, hepsiburada.com şirketinin sponsorluğunda düzenlenen “Contunious Delivery and Design”  isimli etkinlik için 10-11 Eylül tarihlerinde İstanbul’daydı.

Martin Fowler’ın üzerinde çalıştığı kurumsal mimari ve prensipler birçok yazılımcı tarafından kabul görmüş ve standart olarak uygulanır hale gelmiştir. Bu da Fowler’ı sektörde öne çıkarmıştır. Kendisi şu anda ThoughtWorks adlı bir yazılım danışmanlık şirketinde “Chief Scientist” pozisyonunda çalışmaktadır. Yazdığı kitaplar ve verdiği seminerlerde çok önemli konulara değinir. Bu yüzden İstanbul’daki etkinliğe katılmak istedim. Etkinliğe yaptığım ilk başvuruda yer olmadığı şeklinde olumsuz cevap gelmişti ancak 4 gün kala yer açıldı diye bir davetiye aldım ve katıldım.

Etkinlikte ThoughtWorks şirketinin İstanbul ofisinin açılmış olduğu duyuruldu. Aynı zamanda hepsiburada.com şirketi, çevik(Agile) süreçlerin ve sektördeki yenilikçi birçok deneyimin uygulanması için ThoughtWorks ile beraber çalıştığını duyurdu.

Fowler’ın sunumunda genel olarak çevik süreçlerin işleyişi üzerinde duruldu. Günümüzde artık yazılım ürünlerinin girdileri arasında insan iş gücü maliyetinin sadece yazılımı ilk oluştururken değil daha sonraki aşamalarda dönüşüm ve bakımların yapılmasının da dahil olduğu ortaya çıkmaktadır. Dönüşümün rahatça yapılabilmesi ve kaynakların israfını önlemek için çevik prensiplerin uygulanmasının gerekliliği vurgulanmıştır.

Uygulanan prensipler ve yenilikçi bazı teknik çözümlere başlıklar halinde değinilmiştir. Bunlar:

  • Continuous delivery
  • Continuous deployment
  • CAP Teorem
  • NoSQL
  • Microservices

Etkinlikte söz alan diğer konuşmacılar:

  • David Elliman
  • Emre Ekmekçi
  • Cengiz Han
  • İsa Göksu
  • Ben Kappler

Etkinlikte ayak üstü sohbetlerde çeşitli şirketlerin çalışanlarıyla sohbet imkanım oldu. Merak ettiğim bir numaralı konu olan çevik süreçlerin uygulanıp uygulanmadığıydı ve  sordum. Genel olarak aldığım cevap “Türkiş Agile” yapıyoruz  oldu. Yani işin başında prensipleri uygulamaya karar verip işler yetişmediğinde hadi bakalım eski düzene dön şeklinde devam eden bir sürecin uygulandığını öğrendim. Aslında farkındalığın olması bile iyi bir seviye. Bir gün mutlaka taşlar yerine oturacaktır. Martin Fowler’ın da dediği gibi yazılımda tecrübe çalışırken öğrenme şeklinde olur.

Dünyaca ünlü yazılım şirketlerin ülkemize ilgi göstermeye başlamasını şahsen çok önemsiyorum. Yıllar önce kurulan şirketlerin coğrafyamızda bu günlerde yüzünü göstermeye başlaması sanırım bir şeylerin değiştiğinin göstergesidir. Bugün Martin Fowler geldi. Kim bilir yarın Robert Cecil Martin, başka bir gün Kent Beck, Eric Evens, Erich Gamma gelir.

PHP uygulamasına Gelen Javascript Talebini Belirlemek

Pazartesi, 25 Ağu 2014 yorum yok

Bir PHP uygulamasına gelen GET, POST gibi talepler eğer Javascript üzerinden geliyorsa bunu anlamak bazı durumlarda işimizi kolaylaştırmaktadır. GET taleplerini karşılamakta bir sorun yaşamayız fakat POST taleplerinde Javscript ile giden Header bilgisinde $_POST[‘name’] şeklinde query string değerini alamayabiliyoruz.

O halde duruma göre işlem yapabilmek için önce talebin Javascript yani XMLHttpRequest olup olmadığını anlamalıyız. Bunun için örnek bir sınıf yazarak durumu anlamaya çalışalım. Örnek bir app.php dosyasının içeriğini aşağıdaki şekilde belirleyelim.


class Request{
      public static function IsAjaxRequest(){
              return isset($_SERVER['HTTP_X_REQUESTED_WITH']) &&
                     $_SERVER['HTTP_X_REQUESTED_WITH'] === 'XMLHttpRequest' ;
      }
}

if(Request::IsAjaxRequest())
   echo("Ajax");
else
   echo("Not");

Bu PHP uygulamasını internet tarayıcımızdan direkt olarak çağırdığımızda ekrana “Not” şeklinde çıktı verecektir. Eğer bir Javascript uygulamasından talep gönderecek olursak “Ajax” şeklinde sonuç alırız.

 $.ajax({
     url:"app.php",
     type: "GET",
     success: function(data){
          console.log(data);
     }
 })

Çalışan uygulama

http://www.bayramucuncu.com/ornek/app.php
http://www.bayramucuncu.com/ornek/app.html

DİKKAT: Eğer IIS üzerinden PHP uygulaması çalıştırıyorsanız bu yöntem çalışmayacaktır. Windows ortamında IIS üzerinden PHP 5.3 ile yaptığım denemede bunu fark ettim. Bunun sebebi $_SERVER içindeki değişkenlerin PHP tarafından değil HTTP sunucusu tarafından oluşturulmasıdır. IIS HTTP sunucusu HTTP_X_REQUESTED_WITH başlığını oluşturmadığından IIS üzerinde çalışmaz. Apache HTTP sunucusu HTTP_X_REQUESTED_WITH  değerini oluşturmaktadır.

Categories: PHP Tags: ,

Windows IIS üzerinde PHP çalıştırmak

Çarşamba, 20 Ağu 2014 yorum yok

Windows platformu üzerinde PHP çalıştırmak için birkaç farklı yöntem vardır. Windows üzerine Apache, XAMPP gibi uygulama sunucuları kurmak bu yöntemlerden bazılarıdır. Ancak bir diğer yöntem, Windows platformunun kendi Web sunucu uygulaması olan IIS üzerinden PHP uygulamalarını çalıştırmaktır. Bu işlem için windows üzerine PHP yazılımının son sürümünü kurmak gerekmektedir. Bu işlemi Web Platform Installer aracı ile kolayca gerçekleştirebiliriz.

Microsoft Web Platform Installer aracını buradan indirebilirsiniz.

Web Platform Installer yüklendikten sonra IIS penceresinde Yönetim bölümünde logosu görünecektir.

IIS Logo

IIS Logo

Uygulamayı çalıştırdığımızda açılan pencerede arama kutusundan “PHP “şeklinde bir arama yaparak yüklenebilir durumdaki son sürümleri listeleyebiliriz.

PHP Son Sürüm

PHP Son Sürüm

Listeden istediğimiz versiyonu seçip kurulumu yaptıktan sonra PHP uygulamalarımız IIS üzerinden çalıştırabilir hale gelmiş olacaktır. Her ne kadar otomatik olarak yükleme yapılmış olsa da bazı kontrolleri yapmamız gerekmektedir. Bunlardan biri IIS ana penceresinden “İşleyici Eşleşmeleri” veya “Handler Mapping” menüsünden PHP handler eşleşmesi kontrol edilir. Grekli eşleşme yapılmışsa IIS artık PHP taleplerini yakalayıp çalıştırabiliyor demektir.

Windows üzerinde IIS çalıştırdığımız dizin (inetpub/www) içerisine bir php dosyası atarak testimizi gerçekleştirebiliriz.

NOT: Burada dikkat etmemiz gereken konulardan biri PHP ile daha önceden Apache gibi sunucularda çalışmış olanlar Apache’ye özgü özellikleri IIS üzerinde çalıştıramayacak olmasıdır. Örneğin .htaccess dosyası IIS üzerinde değerlendirilmez çünkü Apacahe tarafına ait bir özelliktir. Yada Apache HTTP sunucusu üzerinde oluşturulan bazı başlık (Hearder) bilgileri IIS üzerinde oluşturulmayabilir. Bu gibi konulara dikkat etmek gerekmektedir.

Categories: PHP Tags: ,

Coğrafi Bilgi Sistemleri Uygulaması – Geoserver

Cumartesi, 16 Ağu 2014 yorum yok

geoserver-logo

GeoServer, coğrafi verilerin dış dünyaya sunulması için hazırlanmış açık kaynak kodlu bir java uygulamasıdır. GeoServer ile coğrafi verileri işlemek, paylaşmak ve düzenlemek mümkündür. GeoServer ile paylaşılan verileri Google Earth gibi masaüstü uygulamalarda kullanmak mümkün olduğu gibi Open Layers, Google Maps ve Bing Maps gibi
web tabanlı haritalara da kullanmak mümkündür.

GeoServer uygulaması, OGC(Open Geospatial Consortium) uyumlu olup OGC standartlarında Web Map Service(WMS), Web Feature Service(WFS) ve Web Coverage Service(WCG) gibi hizmetleri sunabilmektedir. Bu sayede platform bağımsızlığı sağlanıp farklı uygulamaların birbiri ile konuşması mümkün hale gelmektedir.

GeoServer, birçok coğrafi veri kaynağı ile uyumlu çalışabilecek şekilde tasarlanmıştır. Örneğin:

  • PostGIS
  • Oracle Spatial
  • ArcSDE
  • DB2
  • MySQL
  • Shapefiles
  • GeoTIFF
  • ECW

Geoserver ile birçok standartta veriler üretmek de mümkündür. Örneğin:

  • KML
  • GML
  • GeoRSS
  • PDF
  • GeoJSON
  • JPEG
  • GIF
  • SVG
  • PNG

Yukarıda bahsettiğimiz bileşenlerin düzgün işleyen bir iş kuralına göre konumlandırılması gerekmektedir. Üretilen coğrafi verileri depolanmasından, bir uygulamada vücut bulmasına kadar ilerleyen bir dizi adım söz konusudur. Peki o halde Geoserver bu sistemin neresinde durur?

Geoserver Uygulama Mimarisi

Geoserver Uygulama Mimarisi

Şemada ifade edildiği üzere Geoserver, veri kaynağı ile uygulama arasında konumlanmış bulunuyor. Tabi arada bir de GeoWebCache denilen sistem iyileştirme eklentisi bulunmaktadır.

Coğrafi veri kaynağına herhangi bir CBS(Coğrafi Bilgi Sistemleri) Masaüstü uygulaması ile erişmek mümkündür. Bu uygulama açaık kaynak kodlu QGGIS olabileceği gibi ticari ürünlerden ArcGIS v.s de olabilmektedir. Masaüstü uygulamaları kullanılırken Geoserver kullanmamıza gerek yoktur.

Web tabanlı harita uygulamalarında verilerimizi kullanmak için piyasada bulunan açık kaynak veya ticari uygulamalardan faydalanabiliriz. Örneğin OpenLayers, Esri API, Google Maps, Bing Maps gibi haritalar üzerinde coğrafi verilerimizi kullanabilmekteyiz.

Geoserver WMS Yayını ve OpenLayers

Geoserver WMS Yayını ve OpenLayers

 Nerelerde Kullanılır?

Geoserver uygulamasını coğrafi veri depolama ve bu veriyi paylaşma ihtiyacı olan şirketler veya kamu kurumları kullanabilir. Ülkemizde en yoğun kullanım alanları olarak bazı bakanlıklar, belediyeleri ve altyapı kurumlarını görmekteyiz. Belediyelerde imar, yol, numarataj ve adres bilgisi gibi birçok coğrafi veri depolanmaktadır. Altyapı kurumlarında da tüm altyapı bilgisi koordinatlı bir şekilde saklanmakta ve sunulmaktadır.

(CBS)Coğrafi Bilgi Sistemleri’nde Geoserver’ın Yeri

Dünyada ve ülkemizde hızla yaygınlaşan Coğrafi Bilgi Sistemlerine karşı ilgi giderek artmaktadır. Üniversitelerde bu konu üzerine önlisans, lisans ve yüksek lisans programları açılmaktadır. CBS uygulamalarının yaygınlaşmasıyla ürün kullanım ihtiyacı da belli bir maliyeti beraberinde getirmektedir. Ticari ürünleri satın alma gücü olmayan kurum ve şirketler doğal olarak açık kaynak kodlu Geoderver veya benzeri ürünlere yönelmektedir. Geoserver bu nedenle azımsanmayacak oranda bir kullanıcıya sahiptir.

 Özet

Eğer coğrafi verilerinizi para harcamadan OGC standartlarında dış dünya ile paylaşmak istiyorsanız Geoserver sizin için çok pratik bir çözüm olacaktır.

Categories: CBS, Geoserver Tags: , ,

AngularJS ile JSONP talebi göndermek

Çarşamba, 16 Tem 2014 yorum yok

Angularjs ile Cross-Domain sorununu aşmak için JSONP yöntemini kullanabiliriz. En basit haliyle bir JSONP talebi şu şekilde gönderilebilir.

 $http.jsonp('http://www.filltext.com/?callback=JSON_CALLBACK&rows=5&fname={firstName}&lname={lastName}')
   .success(function (data) {
        console.log(data);
    }
 );

Diğer bir yöntem ise parametreleri ayırarak talebi göndermektir.

  $http({
        url: 'http://www.filltext.com',
        method: 'JSONP',
        params: {
                 callback: 'JSON_CALLBACK',
                 rows: 5,
                 fname: '{firstName}',
                 lname: '{lastName}'
        }
 }).
 success(function (data) {
      console.log(data);
 }).error(function (data) {
     console.log(data);
 })

Angularjs ile çalışırken callback fonksiyonlarının ismi JSON_CALLBACK şeklinde olmalıdır. Aksi taktirde hata ile karşılaşırız. Angularjs kendi içinde callback fonksiyonunun adını değiştirir. Sonuçta talep olarak bize aşağıdaki gibi bir cevap dönecektir.

    angular.callbacks._0({"key": "data"});

İşlem başarılı bir şekilde gerçekleşirse success fonksiyonu çalışacaktır. Hata oluşursa error fonksiyonu çalışacaktır.

Categories: Genel Tags:

Javascript ile sunucuya dosya yükleme sürecini kontrol etmek

Pazartesi, 21 Nis 2014 yorum yok

Sunucuya doysa yükleme(File Upload) işlemi, küçük boyutlu dosyalar için kısa zamanda sonuçlanan bir işlemdir. Birkaç KB veya MB boyutundaki dosyaların sunucuya  yüklenmesi çok fazla zaman alamayacağından kullanıcı sabrını fazla zorlamaz. Ancak büyük boyutlu dosyaların yüklenmesi sırasında, yükleme işleminin kullanıcıya süreç olarak ifade edilmesi gerekmektedir. Aksi halde sunucudan uzun süre cevap alamayan kullanıcılar, internet tarayıcısının kilitlendiğini zannederek işlemi sonlandırabilir. Bu durumda yüklemi işlemi yarıda kesilir. Böyle durumların yaşanmaması için dosya yükleme sürecini bir şekilde kontrol altına alarak kullanıcıya işlemin hangi aşamada olduğunu grafiksel veya sözel bir şekilde bildirmemiz gerekmektedir. Tam da bu noktada imdadımıza javascript asenkron programlama yetişmektedir.

Javascript kullananların sıkça başvurduğu asenkron işlemler, dosya yükleme işleminde de etkili bir şekilde kullanıldığında geliştiriciye büyük kolaylık sağlamaktadır.

Dosya yükleme işlemini basit bir şekilde ifade edecek olursak bir form yardımıyla bilgisayarımızdan seçilen dosyaların (resim, müzik, video, veri, v.s) sunucuya aktarılmasıdır diyebiliriz. Bu kısa özetin ardından işlemin nasıl yapıldığına dair bir örnek uygulama göstermek faydalı olacaktır.

File Upload

File Upload

Örnek uygulama ile resimden anlaşıldığı üzere dosya yükleme süreci takip edilmektedir.

Kod tarafında Javascript ile yapılan işlem sadece XMLHttpRequest nesnesine ait olayların(events) yakalanmasıdır. XMLHttpRequest  nesnesi süreci asenkron olarak işletmektedir. Belli durumları olaylar yardımıyla bize bildirmektedir. Örneğin Yükleme sürecini progress event ile, işlemin bittiğini load event ile yakalayabilmekteyiz.

  this.ajax = new XMLHttpRequest();
  this.ajax.upload.addEventListener("progress", onProgressChanged, false);
  this.ajax.addEventListener("load", onFileUploadSuccess, false);
  this.ajax.addEventListener("error", onFileUploadFailed, false);

Bu şekilde event’leri sıralayabiliriz. Arayüz (HTML) tarafında belirlenen progress bar, button gibi elementlerin güncellenerek sürecin kullanıcıya yansıtılması bize kalmıştır. Bu noktada çeşitli yöntemlerle çalışmak mümkündür. Doğrudan javascript tarafından DOM elementlere ulaşıp içerik güncellemesi yapabildiğimiz gibi, JQuery gibi kütüphaneler kullanabiliriz. Ben bu uygulamada MVVM(Model View ViewModel) prensibini de etkin şekilde kullanabilmek açısından Knockoutjs kütüphanesini kullandım.

Sunucu tarafında uygulama Asp.net MVC4 ile oluşturulmuştur. Sunucu tarafında dosyaları diske yazma işini şimdilik kodlamadan bıraktım. Zaten yazının konusu değil.

Örnek uygulamayı GitHub hesabıma yükledim.  MVC4-knockoutjs-fileupload adresinden uygulamaya ulaşabilir, isterseniz katkıda bulunabilirsiniz.

Categories: ASP.NET MVC, Javascript, JQuery, Knockoutjs Tags:

Visual Studio – Paste Special JSON

Pazartesi, 14 Nis 2014 5 yorum

Visual Studio ortamında JSON nesneleriyle haşır neşir olanlara kolaylık sağlayacak bir özelliği hatırlatmak istiyorum. Diyelim ki elinizde bir JSON nesnesi var ve bu JSON nesnesini  temsil eden C# tiplerini oluşturmak istiyorsunuz. Bu durumda oturup tek tek sınıfları yazmanıza gerek yok. Visual Studio bizim yerimize bu işlemi yapıyor. Nasıl mı?

JSON nesnemiz şu şekilde olsun:

{
   "Employee": {
     "Id": 1,
     "Name": "bayram",
     "salary": 100,
     "Department": {
           "Id": 12,
           "Name": "Development"
      }
   }
 }

Bu nesneyi kopyalayıp Visual Studio penceresinden Edit-> Paste Special -> Paste JSON as classes seçeneğini seçelim.

Paste Special JSON

Paste Special JSON

Sonuç:

Paste JSON as Clasess

Paste JSON as Clasess

Umarım faydası dokunur.

Categories: Visual Studio Tags: ,

ESRI Arcgis Javascript API with Knockout JS MVVM

Cuma, 04 Nis 2014 yorum yok

Yazıya başlamadan önce, yazının başlığında belirtilen kavramları daha önce duymamış olanlar için kısaca açıklamaya çalışayım. Arcgis Javascript API, ESRI firmasının harita tabanlı javascript uygulamaları geliştirmek için sunduğu bir araçtır. Knockout JS ise javascript tarafında MVVM(Model-View-View Model ) tasarım deseninin uygulanabilmesini sağlayan bir kütüphanedir.

Knockout Js Model

Knockout Js Model

Kısaca söylemek gerekirse Javascript kodu ile HTML kodunun arasında aktarım yapabilen, iki taraf arasında köprü vazifesi gören bir kütüphanedir.

Bu yazının konusu, Arcgis Javascript API ve Knockout JS kütüphanesinin bir arada kullanıldığı bir harita uygulamasını göstermektir. GitHub hesabımda oluşturduğum esri-knockout-mvvm repository içerisinde uygulama kodlarını bulabilirsiniz.

Neden Arcgis JS API ile birlikte Knockout JS kullanma ihtiyacı duydum?

Arcgis Javascript API ile uyglamalar geliştirirken Javascript kodu içerisinde HTML elemanlarının kullanılması noktasına takıldım. Örneğin bir butona tıkladığımızda, butonun olay yakalayıcı metodunda bir HTML tablosunu oluşturur ve sayfanın bir yerine yerleştirir. Burada farklı konuların birbirinden ayrılması (Separation of Concerns) prensibini Javascript programlama dilinde ihlal etmiş oluyoruz. Oysa programlama prensipleri genel kavramlar olup uygulama alanına göre değişmez. Bu sebepten dolayı Knockout JS kullanarak HTML ve Javascript kodunu birbiriden ayırdım.

Uygulama Araç Kutusu:

  • Arcgis Javascript API
  • Knockout JS
  • Bootstrap
  • JQuery
  • Dojo

Uygulama Özeti:

Uygulama, harita üzerindeki bir noktaya tıklandığında, tıklanan yerin yakınlarındaki sosyal aktiviteleri, olayları göstermektedir. Bu bilgileri seatgeek.com API üzerinden çekmektedir.

Uygulamanın çalışan halini buradan inceleyebilrsiniz.

Uygulama Görseli

Uygulama Görseli