29
ni.com Web Technology for Test and Automation Applications Fanie Coetzer - FSE

Web Technology for Test and Automation …southafrica.ni.com/sites/default/files/Web Technology for Test and...Web Technology for Test and Automation Applications ... 9 main communication

Embed Size (px)

Citation preview

Page 1: Web Technology for Test and Automation …southafrica.ni.com/sites/default/files/Web Technology for Test and...Web Technology for Test and Automation Applications ... 9 main communication

ni.com

Web Technology for Test and Automation Applications

Fanie Coetzer - FSE

Page 2: Web Technology for Test and Automation …southafrica.ni.com/sites/default/files/Web Technology for Test and...Web Technology for Test and Automation Applications ... 9 main communication

3 ni.com

Demo

Test Sequencer

Operator

Technician Engineers

Your boss

Page 3: Web Technology for Test and Automation …southafrica.ni.com/sites/default/files/Web Technology for Test and...Web Technology for Test and Automation Applications ... 9 main communication

4 ni.com

Goal

I know nothing

I know what it takes to get started on web applications in LabVIEW

Page 4: Web Technology for Test and Automation …southafrica.ni.com/sites/default/files/Web Technology for Test and...Web Technology for Test and Automation Applications ... 9 main communication

5 ni.com

What is the Web?

A bunch of standards that are built upon the internet. If everyone follows the standards then we can communicate with each other.

Page 5: Web Technology for Test and Automation …southafrica.ni.com/sites/default/files/Web Technology for Test and...Web Technology for Test and Automation Applications ... 9 main communication

6 ni.com

Learning the Web

• W3C has >50 working groups making more standards everyday • “The web is changing so fast and there are so many acronyms”

All of this is built upon common concepts and standards

Page 6: Web Technology for Test and Automation …southafrica.ni.com/sites/default/files/Web Technology for Test and...Web Technology for Test and Automation Applications ... 9 main communication

7 ni.com

Learning the Web

Concepts A. client-server model B. client application C. web service D. web browser

Standards A. HTTP B. URL C. XML, JSON, Text D. HTML

Page 7: Web Technology for Test and Automation …southafrica.ni.com/sites/default/files/Web Technology for Test and...Web Technology for Test and Automation Applications ... 9 main communication

8 ni.com

Network

Concept : Client-server model

Resource provider • Large data server • Automation machine • PLC/PAC

Resource requestor • Personal computer • Smart phone • Tablet

Page 8: Web Technology for Test and Automation …southafrica.ni.com/sites/default/files/Web Technology for Test and...Web Technology for Test and Automation Applications ... 9 main communication

9 ni.com

Network

Concept : Client Application

Client application – the software running on the client which initiates communication with the server.

Examples: Google Maps app on your smart phone LabVIEW application

Page 9: Web Technology for Test and Automation …southafrica.ni.com/sites/default/files/Web Technology for Test and...Web Technology for Test and Automation Applications ... 9 main communication

10 ni.com

Network

Concept : Web Service

Web service– the software running on the server which responds to the requests of the client.

Page 10: Web Technology for Test and Automation …southafrica.ni.com/sites/default/files/Web Technology for Test and...Web Technology for Test and Automation Applications ... 9 main communication

11 ni.com

LabVIEW 2009-2012 Project

Target

Web Method

Web Service

Concept : Web Service

Web service– the software running on the server which responds to the requests of the client.

Page 11: Web Technology for Test and Automation …southafrica.ni.com/sites/default/files/Web Technology for Test and...Web Technology for Test and Automation Applications ... 9 main communication

12 ni.com

Concept : Web Service

Web service– the software running on the server which responds to the requests of the client.

LabVIEW 2013 Project

Target

Web Service

Web Methods

NEW

Ex.

Page 12: Web Technology for Test and Automation …southafrica.ni.com/sites/default/files/Web Technology for Test and...Web Technology for Test and Automation Applications ... 9 main communication

13 ni.com

#4 Concept : Web Browser

Web Browser: A specific type of client application that renders standard types of web content. Rendering in this case means taking text and translating it into an image.

Page 13: Web Technology for Test and Automation …southafrica.ni.com/sites/default/files/Web Technology for Test and...Web Technology for Test and Automation Applications ... 9 main communication

14 ni.com

Standard : HTTP

Hypertext Transfer Protocol is THE language of the web

Follows the client-server model for communication 9 main communication commands: GET – get a resource POST – manipulate a resource PUT – place/replace resource DELETE – remove resource

Page 14: Web Technology for Test and Automation …southafrica.ni.com/sites/default/files/Web Technology for Test and...Web Technology for Test and Automation Applications ... 9 main communication

15 ni.com

Uniform Resource Locator OR “Web Address” scheme://domain:port/path?query_string http://www.ni.com/exampleURL?presenter=Fanie

Standard : URL

Page 15: Web Technology for Test and Automation …southafrica.ni.com/sites/default/files/Web Technology for Test and...Web Technology for Test and Automation Applications ... 9 main communication

16 ni.com

Uniform Resource Locator OR “Web Address” scheme://domain:port/path?query_string

Standard : URL

Ex.

Page 16: Web Technology for Test and Automation …southafrica.ni.com/sites/default/files/Web Technology for Test and...Web Technology for Test and Automation Applications ... 9 main communication

17 ni.com

Standard : Text, XML, JSON

URL is the request, content is the reply Text = ASCII or Unicode text XML = eXtensible Markup Language JSON = JavaScript Object Notation

Page 17: Web Technology for Test and Automation …southafrica.ni.com/sites/default/files/Web Technology for Test and...Web Technology for Test and Automation Applications ... 9 main communication

18 ni.com

Standard : Text, XML, JSON

URL is the request, content is the reply Text = ASCII or Unicode text XML = eXtensible Markup Language JSON = JavaScript Object Notation

Hello World!!!

Ex.

Page 18: Web Technology for Test and Automation …southafrica.ni.com/sites/default/files/Web Technology for Test and...Web Technology for Test and Automation Applications ... 9 main communication

19 ni.com

Standard : Text, XML, JSON

<?xml version="1.0"?> <Measurement> <Value>1.234</Value> <Units>Volts</Units> </Measurement>

{ “Measurement” : { “Value” : 1.234, “Units” : “Volts”} }

XML JSON

URL is the request, content is the reply Text = ASCII or Unicode text XML = eXtensible Markup Language JSON = JavaScript Object Notation

Page 19: Web Technology for Test and Automation …southafrica.ni.com/sites/default/files/Web Technology for Test and...Web Technology for Test and Automation Applications ... 9 main communication

20 ni.com

HTML = HyperText Markup Language

Standard : HTML

<!DOCTYPE html> <html> <body> <a href="http://www.w3schools.com"> This is a link</a> <img scr=“img/cat.gif”> </body> </html>

HTML Rendered

Ex.

Page 20: Web Technology for Test and Automation …southafrica.ni.com/sites/default/files/Web Technology for Test and...Web Technology for Test and Automation Applications ... 9 main communication

21 ni.com

Thin Client

Web Thin Client – A user interface provided by an application through a web browser with a focus on being platform independent

Features Cross platform Does not require anything to be installed on the client

NOTE: A “Fat Client” is a client that must be installed and may not be platform independent.

Page 21: Web Technology for Test and Automation …southafrica.ni.com/sites/default/files/Web Technology for Test and...Web Technology for Test and Automation Applications ... 9 main communication

22 ni.com

Thin Client process

HTTP

Web Browser Web Server

1. Type URL in Web Browser 2. Request is routed to the Web Server 3. Web Server responds with Thin Client content 4. Browser receives content and renders Thin Client 5. Browser periodically asks for updates from Web

Server

Page 22: Web Technology for Test and Automation …southafrica.ni.com/sites/default/files/Web Technology for Test and...Web Technology for Test and Automation Applications ... 9 main communication

23 ni.com

How to make a Thin Client?

HTTP

Web Browser Web Server

Thin Client content • HTML • JavaScript • Cascading Style Sheets

Page 23: Web Technology for Test and Automation …southafrica.ni.com/sites/default/files/Web Technology for Test and...Web Technology for Test and Automation Applications ... 9 main communication

24 ni.com

Thin Client

Open Source Projects • jQuery – A popular library that makes JavaScript easier • jQuery UI – A UI library built upon jQuery. Has Graph, Charts, etc. • Twitter’s Bootstrap – Free library that makes positioning elements on a webpage easier. Ascetically pleasing

Page 24: Web Technology for Test and Automation …southafrica.ni.com/sites/default/files/Web Technology for Test and...Web Technology for Test and Automation Applications ... 9 main communication

25 ni.com

Advantages of LV WebSevices

• Multiple client support • Connection management • True Thin Clients • LV Windows and RT support • Built-in Authentication • Built-in Encryption (SSL)

Page 25: Web Technology for Test and Automation …southafrica.ni.com/sites/default/files/Web Technology for Test and...Web Technology for Test and Automation Applications ... 9 main communication

26 ni.com

Advantages of LV WebSevices

Authentication

WIF

Page 26: Web Technology for Test and Automation …southafrica.ni.com/sites/default/files/Web Technology for Test and...Web Technology for Test and Automation Applications ... 9 main communication

27 ni.com

Advantages of LV WebSevices

Encryption

Page 27: Web Technology for Test and Automation …southafrica.ni.com/sites/default/files/Web Technology for Test and...Web Technology for Test and Automation Applications ... 9 main communication

28 ni.com

Get your Embedded Certification!

National Instruments is now offers the Certified LabVIEW Embedded Developer Exam Learn more ni.com/cled

Email [email protected] To Schedule Your Exam

Page 28: Web Technology for Test and Automation …southafrica.ni.com/sites/default/files/Web Technology for Test and...Web Technology for Test and Automation Applications ... 9 main communication

29 ni.com

Questions?

Page 29: Web Technology for Test and Automation …southafrica.ni.com/sites/default/files/Web Technology for Test and...Web Technology for Test and Automation Applications ... 9 main communication

30 ni.com

Web Technology for Test and Automation Applications

• Concepts • Client-server model

• Client application

• Web service

• Web browser

• Standards • HTTP

• URL

• XML, JSON, Text

• HTML

• Thin Client development tips • JavaScript, jQuery, jQueryUI

• CSS

• Bootstrap