Herkese merhaba arkadaşlar bu yazıda sizlerle birlikte Knockout JS kullanıp, Spring REST servislerine bağlanmayı deneyeceğiz. Knockout JS ile Spring REST servislerinden veri listesi alacağız.

Uygulama Özeti

Yapılacak olan uygulamada REST servisleri aracılığıyla otomobil listesi web ortamında dışarı açılır. Knockout JS API ile birlikte bu servislere erişim sağlanıp

bir tablo yapısı halinde sayfa üzerinde gösterilecektir.

Web Projesinin Oluşturulması

Maven  tabanlı dinamik bir web projesi oluşturulur. Ardından ilk işlem olarak servisin ve veri modeline ait sınıfların bulunacağı paketler oluşturulur.

“pom.xml”  Bağımlılıkların Eklenmesi

Maven projesine kullanılması gereken paketler bağımlılık olarak eklenir. Eklenecek olan paketler sunucu taraflı kodları geliştirmek için gereklidir. Spring REST servisleri ve JSON dönüşüm işlemleri için Jackson JSON API ile ilgili bağımlılıklar projeye eklenecektir.

<dependencies>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-web</artifactId>
      <version>4.0.5.RELEASE</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-webmvc</artifactId>
      <version>4.0.5.RELEASE</version>
    </dependency>
    <dependency>
<groupId>com.fasterxml.jackson.core</groupId>
	<artifactId>jackson-databind</artifactId>
	<version>2.4.0-rc3</version>
    </dependency>
    <dependency>
	<groupId>com.fasterxml.jackson.core</groupId>
	<artifactId>jackson-core</artifactId>
	<version>2.4.0-rc3</version>
     </dependency>
     <dependency>
	<groupId>com.fasterxml.jackson.core</groupId>
	<artifactId>jackson-annotations</artifactId>
	<version>2.4.0-rc3</version>
     </dependency>
  </dependencies>

Spring Servlet Ayarlarının Yapılandırılması

Spring ile ilgili gerekli olan Servlet tanımlamaları web.xml içinde belirtilir. Spring Framework’un kullandığı Servlet sınıfı olan ‘DispatcherServlet’  tanımlası ‘web.xml’ içinde tanımlanır. Bunun yanında ‘DispatcherServlet’  sınıfı gerekli ayarların tanımlandığı bir XML dosyasına ihtiyaç duyar. Bu dosyasının ismi ‘dispatcher-servlet.xml’ şeklindedir. Aynı zamanda Spring Bean sınıflarının ve birçok ayarın tanımlandığı ‘applicationContext.xml’ dosyasıda tanımlanmış ve oluşturulmuş olmalıdır.

Otomobil (Car) Veri Modeli Sınıfı

Bu sınıfta otomobil veri modelinde yer alacak değişkenler ve fonksiyonlar tanımlanır. Basit bir Java sınıfıdır. 

Spring REST Servisi Sınıfı

“Car” tipinde hazırlanan veri listesi Spring REST servisleri sayesinde dışarıdan erişilebilir hale gelecektir. Bu servisler sayesinde iş katmanı tamamen arayüz teknolojilerden bağımsızlık kazanmış olacaktır. Örneğin, tüm iş katmanı web servisleri şeklinde dışarıdan erişime açıldığında JSP, JSF, PHP, ASP gibi web teknolojileri iş katmanına erişim için web servislerini kullanacaktır. Böylece web teknolojisini değiştirme ihtiyacında veya herhangi bir bakım işleminde inanılmaz bir esneklik ve modülerlik sağlamış olacaktır.

Böylece, yazılım geliştirme sürecinde ve ürünün ortaya çıkışında iş katmanı ile web teknolojilerinin iç içe geçmiş yüksek bir bağımlılık kazanmasından kurtulmuş olacaktır.

Sınıfın en üst kısmında ‘RequestMapping’ etiketi ile REST servisinin ismi verilir. Ardından sınıf içindeki her fonksiyon servisin bir fonksiyonu olarak dışarı açılır. Yine ‘RequestMapping’ etiketi ile bu işlem yapılır.  Bu etiket içinde hangi HTTP erişim yöntemi kullanılacağı belirtilir. Bu örnekte HTTP GET kullanılmıştır. Ardından, ‘ResponseBody’ etiketi ile REST servisinin ne tipte bir nesne döndüreceği belirtilir. 

JQuery ve Knockout JS API Entegrasyonları

Web servisleri ile iletişim kurabilmek için AJAX çağrıları yapmak gerekecektir. Bu nedenle JQuery API projeye entegre edilir. Arayüz ve ModelView yönetimi ve iletişimi için Knockout API projeye entegre edilir.

JQuery ile AJAX Çağrı Fonksiyonu

AJAX çağrıları ile HTTP istekleri oluşturulup REST servislere erişim sağlanacaktır. Javascript tarafında bu işi üstlenen ve tüm HTTP GET isteklerini iletebilen modüler bir Javascript fonksiyonu hazırlanır. Bu fonksiyon HTTP isteğine ait özellikleri tutan bir nesneyi parametre olarak alır. Bu parametre nesnesinde HTTP isteği sonucu ‘success’ (başarılı) ve ‘error’ (başarısız) callback fonksiyonları ve hangi servise erişim sağlanmak istediğine dair bilgiler yer alacaktır.

function doGet(request) {
	
	var requestObj = {
        url: "http://localhost:8088/KoSpringRest/" + request.path,
        contentType: "application/json; charset=utf-8",
        type: "GET",
        success: request.success,
        error: request.error
	}
	
	$.ajax(requestObj);
}

Otomobil (Car) için ModelView Yapısı

Webservisinden dönecek olan otomobil veri tipiyle uyumlu olan bir Javascript fonksiyonu hazırlanır. Bu Javascript fonksiyonunda yer alan değişken isimleri Java sınıfı olan ‘Car’ ile birebir aynı olmalıdır. Çünkü, yapılacak JSON dönüşüm işlemlerinde bu değişken isimleri temel alınacaktır.  Ayrıca, Javascript fonksiyonundaki değişkenler Knockout  gözlemcileri olan ‘observable’ tipinde olacaktır.

function Car(brand, color, year) {
	
	var self = this;
	self.brand = ko.observable(brand);
	self.color = ko.observable(color);
	self.year = ko.observable(year);
}

Otomobil Listesi (CarList) için ModelView Yapısı

Tüm otomobil listesinin yer aldığı Knockout ModelView yapısıdır. Bu yapı içinde otomobil listesi ve otomobil listesini yüklemek için gerekli fonksiyon yer alır. Bu fonksiyon HTTP GET AJAX çağrısı yapıp otomobil listesini REST servisten aldığı veri listesiyle doldurur.

function CarList() {
	
	var self = this;
	self.cars = ko.observableArray();
	self.load = function() {
		doGet(getRequest());
	};
	
	// Helper fonksiyonu
	function getRequest() {
		return {
			path : "/appservices/cars",
			success : function(response) {
				ko.utils.arrayForEach(response, function(item) {
					var car = new Car(item.brand, item.color, item.productYear);
					self.cars.push(car);
			    });
			},
			error : function(response) {
				alert("Sunucu'dan veri alinamadi!");
			}
		};
	}
}

‘load’ isimli Javascript fonksiyonu veri listesini doldurmakla sorumludur. ‘getRequest’ fonksiyonu ise yapılacak HTTP isteği için gerekli bilgilerin ve fonksiyonların (‘succes’ ve ‘error’ fonksiyonları) yer aldığı Javascript nesnesi döndürür. Bu oluşturulan nesne AJAX çağrısı yapan ‘doGet’ isimli fonksiyona iletilir.

Başarılı bir çağrımdan sonra otomobil listesi ‘Car’ tipinde olan Javascript nesneleri ile doldurulur.

ModelView ile arayüzün bağlanması işlemi aşağıdaki gibidir.

var carList = new CarList();
ko.applyBindings(carList);

// 'load' fonksiyonu otomatik olarak calistirilir. (Self Invoking)
(carList.load)();

‘cars.html’ Sayfası

HTML sayfası üzerinde Knockout  ‘foreach’ tanımı ile  tablo yapısı oluşturulur.

<h4>Otomobil Listesi</h4>
<table data-bind="foreach: carList.cars">
	<tr>
		<td data-bind="text: brand"></td>
		<td data-bind="text: color"></td>
		<td data-bind="text: year"></td>
	</tr>
</table>

Uygulama Apache Tomcat 7 üzerinde çalıştırılır ve sonuçlar aşağıdaki gibidir.

Umarım yararlı bir yazı olmuştur. Bir sonraki makalemde görüşmek dileğiyle ...

Uygulama : https://www.dropbox.com/s/v7z6i87g7w7nqgh/kospringrest.zip

Batuhan Düzgün 

Bilgisayar Mühendisi

Endüstri Mühendisi