Background
Greenhouse Monitoring System will be taken as an example to illustrate creating User Interface applications using TQL Queries.
TQL Queries Vs REST Services
REST is an architecture style for designing networked applications and in virtually all cases, the HTTP protocol is used. In many ways, the World Wide Web itself, based on HTTP, can be viewed as a REST-based architecture. By this definition of REST coupled with the fact that TQL Queries are executed over an HTTP endpoint that is automatically generated when models are deployed to TQLEngine, make TQL Queries Restful in nature.
In the table below we note fixed REST pattern that is applicable to TQL Queries.
TQL Queries | Restful Services |
---|---|
XML Oriented (Request & Response) (Note that TQLEngine supports both JSON & XML; the recommended guideline is XML for TQL Queries readability) | Restful Services are JSON oriented |
TQL Queries are sent as payload, therefore the HTTP Method to be used always POST. | Method can be: GET/PUT/POST/DELETE |
UI Technologies
Most commonly used UI technologies are:
- HTML,CSS and JavaScript
- JavaScript Frameworks (Angular JS, Backbone JS, etc.)
- HTML5, CSS/CSS3 and JavaScript/jQuery
Design Patterns
Model-View-Controller (MVC) is popular design pattern to develop HTML/JS app that consumes TQL Queries.
View | Technology | In this tutorial |
---|---|---|
View | HTML, CSS, JS (Bootstrap is a good starting point) | index.html |
Model | JS - Services & Factories independent of underlying framework (OR) Angular JS provided Model | Angular Model Service (TQLQueryService.js) |
Controller | JS - Can be independent of underlying framework (Write your own using JS) or Angular provided model | Angular Controller and bind with HTML using Angular directive ng-controller. [MainController.js] |
Implementation Steps
All the implementation steps must be against Simulated Greenhouse project.
Creating View
a) Main View - Single Page HTML file
<!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>
b) Creating Style Sheet
body{ background: url(images/greenhouse.jpg); background-size: cover; padding: 0; margin: 0; } .header{ background: #000; color: #fff; margin-bottom: 20px; } .greenhouseDetails{ background: #39404a; color: #fff; } .statusBlock{ background: #39404a; color: #fff; padding: 30px; margin: 30px 0; }
Creating Model
Model is where we capture consuming of TQL Queries.
List of Queries
Discovering TQL EndPoints URL
Application TQL endpoint discovery query<Query> <Find> <project> <projName eq='Greenhouse'/> </project> </Find> </Query> <GetProjectEndPoints> <ProjectSysId> Find.Result.Project.SysId </ProjectSysId> </GetProjectEndPoints>
Gather App related queries.
View - Greenhouse Monitoring App<Query> <Find> <Greenhouse> <GreenhouseID ne=''/> </Greenhouse> </Find> </Query>
Create JS Service
<!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.
Deploy & Test
- Attach applications to the project (Locally) (Even if it is part of different Project)