This shows you the differences between two versions of the page.
seh:laboratoare:01 [2018/03/11 00:26] alexandru.gradinaru [Lab exercices] |
— (current) | ||
---|---|---|---|
Line 1: | Line 1: | ||
- | ===== Laboratorul 01. ===== | ||
- | |||
- | This chapter is about e-health applications, so as a lab activity we are going to make a simple web client application using e-health data. | ||
- | |||
- | We will start by introducing a few concepts and technologies that are frequently used in modern e-health systems and in web services, which I am sure most of you are already familiar with. | ||
- | |||
- | ===== Web Services ===== | ||
- | |||
- | A web service is a piece of software that is available over the Internet or private networks. Data with a web service is usually communicated using HTTP. A web service can be created using many different languages, platforms, and frameworks, and nowadays usually follow two main formats: REST and SOAP. | ||
- | |||
- | ==== Representational State Transfer (REST) ==== | ||
- | |||
- | REST is an architecture used in web services whose purpose is to make data available as resources (for example “user” or “invoice”). To use REST, a language needs to be able to make HTTP calls and handle data in XML or JSON formats. | ||
- | |||
- | RESTful applications have four design principles. | ||
- | |||
- | **1. Use HTTP Methods Explicitly** | ||
- | |||
- | * POST – creates new resources on the server | ||
- | * GET – retrieves the current state of the resource on the resource | ||
- | * PUT – change state of resource or update it on the server | ||
- | * DELETE – remove a resource from the server | ||
- | |||
- | **2. Be Stateless** | ||
- | |||
- | A REST call should not have any effect on future REST calls and a REST call does not depend on any previous calls. Each request should have all the information needed to satisfy the request. Statelessness speeds up development by separating the client from the server and leaving it to the client to manage stateful REST calls. | ||
- | |||
- | **3. Use URI’s** | ||
- | |||
- | RESTful services user Uniform Resource Identifiers (URI) which are well formatted links on the web that provides access to the resources or functions of a system. URIs are usually formatted like a directory and should be predictable and understandable. | ||
- | |||
- | **4. Handle XML or JSON** | ||
- | |||
- | REST services can implement multiple formats. The client is usually left to decide which format to use at runtime. | ||
- | |||
- | ==== Simple Object Access Protocol (SOAP) ==== | ||
- | |||
- | SOAP is a messaging protocol that makes data available as services (for example “getUser” or “PayInvoice”) allowing different systems to communicate with each other over HTTP using XML format. SOAP is used in enterprise situations where information security is paramount. SOAP is not restricted to HTTP and can also be implemented on top of other protocols such as SMTP. SOAP must use the Web Services Description Language format and is platform and language independent. | ||
- | |||
- | More information and comparisons: | ||
- | |||
- | [[https://u.osu.edu/ishmeet/2016/04/01/web-services/]] | ||
- | |||
- | [[http://nordicapis.com/rest-vs-soap-nordic-apis-infographic-comparison/]] | ||
- | |||
- | [[https://www.infosys.com/digital/insights/Documents/restful-web-services.pdf]] | ||
- | |||
- | ===== Data Format ===== | ||
- | |||
- | ==== HTML ==== | ||
- | |||
- | HTML is the standard markup language for creating Web pages. | ||
- | * HTML stands for Hyper Text Markup Language | ||
- | * HTML describes the structure of Web pages using markup | ||
- | * HTML elements are the building blocks of HTML pages | ||
- | * HTML elements are represented by tags | ||
- | * HTML tags label pieces of content such as "heading", "paragraph", "table", and so on | ||
- | * Browsers do not display the HTML tags, but use them to render the content of the page | ||
- | |||
- | A simple HTML page would look like this: | ||
- | |||
- | <code html> | ||
- | <html> | ||
- | <head> | ||
- | <title> Hello world page title on the browser tab </head> | ||
- | </head> | ||
- | <body> | ||
- | <h1> Hello world! </h1> | ||
- | <div> | ||
- | <p> This is a simple HTML page </p> | ||
- | </div> | ||
- | </body> | ||
- | </html> | ||
- | </code> | ||
- | |||
- | For detailed information and syntax you can check [[https://www.w3schools.com/html/]]. | ||
- | |||
- | HTML was created to describe the content of a web page. | ||
- | |||
- | * HTML can be formatted using CSS (Cascading Style Sheets). | ||
- | * CSS describes how HTML elements are to be displayed on screen, paper, or in other media | ||
- | * CSS saves a lot of work. It can control the layout of multiple web pages all at once | ||
- | * External stylesheets are stored in CSS files | ||
- | |||
- | A CSS rule-set consists of a selector and a declaration block: ''h1 {color:blue;}''. In the above example all the ''h1'' elements will be colored in blue. | ||
- | |||
- | CSS can use classes and ids in order to format specific elements. | ||
- | |||
- | <code css> | ||
- | p {color: black;} | ||
- | p#special {color:red;} | ||
- | .container {background: #cccccc;} | ||
- | </code> | ||
- | |||
- | <code html> | ||
- | <html><head><title> Hello world page title on the browser tab </title></head> | ||
- | <body> | ||
- | <h1> Hello world! </h1> | ||
- | <div class="container"><p> This is a simple HTML page </p> | ||
- | <p id="special">this is a special text</p> | ||
- | </div> | ||
- | </body></html> | ||
- | </code> | ||
- | |||
- | For detailed information and syntax you can check [[https://www.w3schools.com/css/]]. | ||
- | |||
- | ==== XML ==== | ||
- | |||
- | XML is a software - and hardware - independent tool for storing and transporting data. | ||
- | * XML stands for eXtensible Markup Language | ||
- | * XML is a markup language much like HTML | ||
- | * XML was designed to store and transport data | ||
- | * XML was designed to be self-descriptive | ||
- | * XML is a W3C Recommendation | ||
- | |||
- | <code xml> | ||
- | <note> | ||
- | <to>Tove</to> | ||
- | <from>Jani</from> | ||
- | <heading>Reminder</heading> | ||
- | <body>Don't forget me this weekend!</body> | ||
- | </note> | ||
- | </code> | ||
- | |||
- | XML and HTML were designed with different goals: | ||
- | |||
- | * XML was designed to carry data - with focus on what data is | ||
- | * HTML was designed to display data - with focus on how data looks | ||
- | * XML tags are not predefined like HTML tags are | ||
- | |||
- | ==== JSON ==== | ||
- | |||
- | JSON — short for JavaScript Object Notation — is a format for sharing data. As its name suggests, JSON is derived from the JavaScript programming language, but it’s available for use by many languages including Python, Ruby, PHP, and Java. JSON is usually pronounced like the name "Jason". | ||
- | |||
- | A JSON object is a key-value data format that is typically rendered in curly braces. When you’re working with JSON, you’ll likely see JSON objects in a .json file, but they can also exist as a JSON object or string within the context of a program. | ||
- | |||
- | A JSON object looks something like this: | ||
- | |||
- | <code json> | ||
- | { | ||
- | "first_name" : "Alex", | ||
- | "last_name" : "Doe", | ||
- | "online" : true, | ||
- | "friends" : 236 | ||
- | } | ||
- | </code> | ||
- | |||
- | JSON values can be of the simple data types: | ||
- | * strings | ||
- | * numbers | ||
- | * objects | ||
- | * arrays | ||
- | * Booleans (true or false) | ||
- | * null | ||
- | |||
- | JSON supports nested objects or arrays: | ||
- | |||
- | <code json> | ||
- | { | ||
- | "first_name" : "Alex", | ||
- | "last_name" : "Doe", | ||
- | "online" : true, | ||
- | "friends" : { | ||
- | "total": 236, | ||
- | "friend_list": [ | ||
- | { "first_name": "John", "last_name":"Gray"}, | ||
- | { "first_name": "Dana", "last_name":"Fray"}, | ||
- | ] | ||
- | } | ||
- | } | ||
- | </code> | ||
- | |||
- | Comparison to XML | ||
- | |||
- | <code xml> | ||
- | <users> | ||
- | <user> | ||
- | <username>SammyShark</username> <location>Indian Ocean</location> | ||
- | </user> | ||
- | <user> | ||
- | <username>JesseOctopus</username> <location>Pacific Ocean</location> | ||
- | </user> | ||
- | <user> | ||
- | <username>DrewSquir</username> <location>Atlantic Ocean</location> | ||
- | </user> | ||
- | <user> | ||
- | <username>JamieMantisShrimp</username> <location>Pacific Ocean</location> | ||
- | </user> | ||
- | </users> | ||
- | </code> | ||
- | |||
- | <code json> | ||
- | {"users": [ | ||
- | {"username" : "SammyShark", "location" : "Indian Ocean"}, | ||
- | {"username" : "JesseOctopus", "location" : "Pacific Ocean"}, | ||
- | {"username" : "DrewSquid", "location" : "Atlantic Ocean"}, | ||
- | {"username" : "JamieMantisShrimp", "location" : "Pacific Ocean"} | ||
- | ] } | ||
- | </code> | ||
- | |||
- | |||
- | W3schools.com has some tutorials with basic information, syntax and examples on HTML, CSS, JavaScript, XML and many others: [[https://www.w3schools.com/]](https://www.w3schools.com/) | ||
- | |||
- | |||
- | ==== Lab exercices ==== | ||
- | |||
- | As an assignment for this chapter you will have to make a small web application client in order to access e-health formatted data. The application must have at least the following: | ||
- | - Paginated table (or list) with patients | ||
- | - Each patient must have a detailed page containing Personal info: contact, address, gender etc. | ||
- | |||
- | Data can be fetched from //TBA | ||
- | |||
- | The resulting application must be submitted as an online snippet in order to be checked and graded. You can use Plunker or any other suitable online snippet tool. | ||
- | |||
- | You can use any other framework or technology if the result can be submited as a snippet and can be previewed online alongside the sourcecode. | ||
- | |||