Building Client Application Using TQL

Introduction

Building a Client Application using TQL - more specifically Queries and Subscriptions are similar to integrating RESTful services. Queries and Subscriptions (Websocket) are exposed as standard transports HTTP and WS respectively. The recommended specification language to send and receive query payloads is XML having proper XML to JSON conversion and vice versa are going to be essential.

TQL Client Apps in JavaScript

In this section we demonstrate simple steps to create your first TQL client application in Javascript. Just enough client, as you need it. Make HTTP and WEBSOCKET requests from a browser to A-Stack applying only the client features you need. These steps can be easily extend to build robust applications that wrap the TQL request and/or response.

Prerequisites:

1. Good Understanding of HTML/JS with AJAX calls (JS Framework like jQuery or Angular for single page application)
2. External Library for XML to JSON conversion and vice versa. (like xml2json.js which you will get in "https://code.google.com/p/x2js/") 
3. Gather your http and web socket endpoints to send Queries and Subscriptions

Steps for Creating an JS App

1. URL Configuration: Create one configuration file say, config.js which will hold the urls as show

   JS - Configure TQL Query EndPoints

   /*******************************************************************************/
   function getHttpEndpoint(){
   	return "http://tql.atomiton.com/fid-TQLKQMUS6XRAAAH6AABAGNWX7YW";
   }
   function getWebsocketEndpoint(){
   	return "ws://tql.atomiton.com/fid-TQLKQMUS6XRAAAH6AABAGNWX7YWWS";
   }

2. Generic QuerySerivce: Create one service file say queryService.js which will hold all the Queries
   Note: below examples are in jQuery syntax and you will find an external library i.e. X2JS used inside the success function which will convert XML response into JSON.

   TQL Queries over HTTP/HTTPS

   JS - Generic QueryService

   /*******************************************************************************/ 
   function findAllResidents(){ 
   	$.ajax({
   		url: getHttpEndpoint(),
   		data:"<Query> <Find> <Residents> <Id Ne=""/> </Residents> </Find> </Query>",
   		type: 'POST',
   		contentType: "text/xml",
   		dataType: "text",
   		error: function(){ 
   //			Error Block in case of an API Error
   		},
   		success: function(data) {
   			var x2js = new X2JS();
   			var jsonObj = x2js.xml_str2json(data);
   			if(jsonObj.data.Status == "Success"){
   //				Your Logic in case of any data
   			} else {
   //				Your logic in case of no data
   			} 
   		} 
   	}); 
   }

   Subscription & Notification Calls

   JS - Generic QueryService WS Calls

   /*****************************************************************************/ 
   var openSocket = function(){
   	if ("WebSocket" in window){
   		console.log("WebSocket is supported by your Browser!"); 
   //		Opening a WebSocket
   		var ws = new WebSocket(getWebsocketEndpoint());
   		ws.onopen = function(){
   //			Web Socket is connected, send data using send()
   			ws.send('<Query Storage="TqlSubscription"><Save><TqlSubscription Label="PhidgetSensor" sid="20"><Topic>*</Topic></TqlSubscription></Save></Query>');
   			console.log("Message is sent...");
   		}; 
   		ws.onmessage = function (evt){ 
   //			Getting subscribed message over evt.data 
   			var notifiedMsg = evt.data;
   //			Converting subscribed XML message to JSON
   			var x2js = new X2JS();
   			var notifiedJSON = x2js.xml_str2json(notifiedMsg);
   		}; 
   		ws.onclose = function(){ 
   //			WebSocket is closed.
   			console.log("Connection is closed..."); 
   		};
   	}
   	else{
   //		The browser doesn't support WebSocket
   		alert("WebSocket NOT supported by your Browser!");
   	}
   }

   
   

3. Main JS File:  

   JS - Generic QueryService WS Calls

   /*******************************************************************************/
   $( document ).ready(function() {
               // Your application logic which will be directly connected to your HTML pages and also do API Calls using service.js 
   })

4. Create you own HTML file (Look & Feel):

   HTML File - Look & Feel

   <!DOCTYPE html>
   <html>
   <head>
   <title>// Title for the application</title>
   <link href="// Path of your CSS file" rel="stylesheet">
   // Inclucing other js files
   <script type="text/javascript" src="//Path of javascript file"></script>
   //Including jquery js
   <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
   </head>
   <body>// Application content
   </body>
   </html>