...
Model is where we capture consuming of TQL Queries.
...
Identify Queries
Before we start wrapping TQL Queries into a Service model, we need to identify the list of queries to be executed.
Discovering TQL EndPoints URL:
Code Block language xml theme Midnight title Application TQL endpoint discovery query linenumbers true <Query> <Find> <project> <projName eq='Greenhouse'/> </project> </Find> </Query> <GetProjectEndPoints> <ProjectSysId> Find.Result.Project.SysId </ProjectSysId> </GetProjectEndPoints>Never hardcode the TQL Query endpoint urls as they are subject to change.
Instead the endpoints must be auto discovered given the project name.
The model developer (owner) will project you appropriate project name to discover your query endpoints.
- You can test the queries and make sure they are working via Query Editor (TQLStudio or Local TQLEngine)
Gather App related queries: In this example we will wrap only one single query to get Greenhouse information.
Code Block language xml theme Midnight title View App Queries - Greenhouse Monitoring App linenumbers true <Query> <Find> <Greenhouse> <GreenhouseID ne=''/> </Greenhouse> </Find> </Query>
...
Creating Controller
| Code Block | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
<!DOCTYPE html>
<html ng-app="GreenhouseUIApp">
<head>
<title>Smart Greenhouse</title>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<link
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
rel="stylesheet">
<link href="style.css" rel="stylesheet">
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/x2js/1.2.0/xml2json.min.js"></script>
<script type="text/javascript" src="config/url_config.js"></script>
<script type="text/javascript" src="controllers/mainController.js"></script>
<script type="text/javascript" src="services/queryService.js"></script>
</head>
<body>
<div ng-controller="mainController">
<div class="row text-center header">
<h2>SMART GREENHOUSE</h2>
</div>
<div class="row text-center greenhouseDetails">
<h4>{{selectedGreenhouse.GreenhouseName}} |
Zones: {{selectedGreenhouse.ZoneCount}} |
Location: ({{selectedGreenhouse.Location.latitude}},
{{selectedGreenhouse.Location.longitude}})</h4>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-3 statusBlock">
<div>
<h3>Internal Status</h3>
</div>
<div>Temperature: {{selectedGreenhouse.InternalEnv.Temperature}}
°C</div>
<div>Humidity: {{selectedGreenhouse.InternalEnv.Humidity}} %</div>
<div>Amb. Light: {{selectedGreenhouse.InternalEnv.Light}} lux</div>
<div>Soil Moisture:
{{selectedGreenhouse.InternalEnv.SoilMoisture}} cb</div>
</div>
<div class="col-md-1"></div>
<div class="col-md-4 statusBlock">
<div>
<h3>External Conditions</h3>
</div>
<div>Temperature: {{selectedGreenhouse.ExternalEnv.Temperature}}
°C</div>
<div>Humidity: {{selectedGreenhouse.ExternalEnv.Humidity}} %</div>
<div>Sunlight: {{selectedGreenhouse.ExternalEnv.Light}} lux</div>
<div>Soil Moisture:
{{selectedGreenhouse.ExternalEnv.SoilMoisture}} cb</div>
<div>Wind: {{selectedGreenhouse.ExternalEnv.Wind}} mph</div>
</div>
<div class="col-md-3"></div>
</div>
</div>
</body>
</html> |
Test Queries via Query Editor
- Take Query from Pramod to be run against your own Deployed TQLEngine and get the endpoints.
- Take sample queries from Greenhouse.
angular.module('GreenhouseUIApp', [])
.controller('mainController', function($scope, QueryService) {
$scope.greenhouses = [];
$scope.httpEndpoint = "";
$scope.wsEndpoint = "";
$scope.getGreenhouses = function(){
QueryService.getGreenhouses($scope.httpEndpoint).then(function(response){
if(angular.isArray(response.Find.Result.Greenhouse)){
$scope.greenhouses = response.Find.Result.Greenhouse;
} else if(angular.isObject(response.Find.Result.Greenhouse)){
$scope.greenhouses.push(response.Find.Result.Greenhouse);
}
$scope.selectedGreenhouse = $scope.greenhouses[0];
console.log($scope.greenhouses);
});
};
$scope.replaceIPWithHostName = function(){
$scope.wsEndpoint = $scope.wsEndpoint.replace( /:.*?\:/, '://'+greenhouseHostName+':' );
$scope.httpEndpoint = $scope.httpEndpoint.replace( /:.*?\:/, '://'+greenhouseHostName+':' );
};
QueryService.discoverGreenhouseEndpoint().then(function(data){
angular.forEach(data.Find.projectEndpointMap.DataMap, function(obj){
if(obj.Value.indexOf("ws:") > -1){
$scope.wsEndpoint = obj.Value;
} else if(obj.Value.indexOf("http:") > -1 || obj.Value.indexOf("https:") > -1){
$scope.httpEndpoint = obj.Value;
}
});
$scope.replaceIPWithHostName();
$scope.getGreenhouses();
});
} |
Deploy & Test
- Attach applications to the project (Locally) (Even if it is part of different Project)
...