This is an old revision of the document!
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.
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.
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
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.
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
HTML is the standard markup language for creating Web pages.
A simple HTML page would look like this:
<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>
For detailed information and syntax you can check https://www.w3schools.com/html/.
HTML was created to describe the content of a web page.
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.
p {color: black;} p#special {color:red;} .container {background: #cccccc;}
<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>
For detailed information and syntax you can check https://www.w3schools.com/css/.
Nowadays, we use complex frameworks for CSS in order to speed up development. Popular examples are Tailwind, Bootstrap, Material. https://tailwindcomponents.com/,Tailwind examples
HTML is sending data by default using the form element.
<form action="https://example.com">
Data can be sent in multiple formats and multiple methods
<form method="GET" action="https://example.com"> result: GET https://example.com?name=Alex&email=alex@example.com
<form method="POST" action="https://example.com" enctype="multipart/form-data" >
XML is a software - and hardware - independent tool for storing and transporting data.
<note> <to>Tove</to> <from>Jani</from> <heading>Reminder</heading> <body>Don't forget me this weekend!</body> </note>
XML and HTML were designed with different goals:
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:
{ "first_name" : "Alex", "last_name" : "Doe", "online" : true, "friends" : 236 }
JSON values can be of the simple data types:
JSON supports nested objects or arrays:
{ "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"}, ] } }
Comparison to 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>
{"users": [ {"username" : "SammyShark", "location" : "Indian Ocean"}, {"username" : "JesseOctopus", "location" : "Pacific Ocean"}, {"username" : "DrewSquid", "location" : "Atlantic Ocean"}, {"username" : "JamieMantisShrimp", "location" : "Pacific Ocean"} ] }
JavaScript, or JS, is the programming language of HTML and the Web. Using JavaScript you can add interaction to web pages, download and format resources, and even create fully-featured apps that can run in browser like photo-editing, games, video-conferencing, diagrams etc.
JavaScript can be attached to HTML DOM elements directly, using specific element events, or separately, by using selectors. Here is an example of a script that will display the current date by pressing a button. Attached to an HTML element event:
<button type="button" onclick="document.getElementById('demo').innerHTML = Date()" > Click me to display Date and Time. </button> <p id="demo"></p>
In a separated script section:
<button id="myBtn" type="button">Click me to display Date and Time.</button> <p id="demo"></p>
<script> document.getElementById("myBtn").addEventListener("click", displayDate); function displayDate() { document.getElementById('demo').innerHTML = Date() } </script>
You can find useful DOM (document object model) function references, details and examples on the Moozila web page: https://developer.mozilla.org/en-US/docs/Web/API
let div = document.createElement("div") let p = document.createElement("p") div.append("Some text", p)
var el = document.querySelector("div.user-panel.main input[name='login']");
formElem.addEventListener('submit', (e) => { // on form submission, prevent default e.preventDefault(); // construct a FormData object, which fires the formdata event new FormData(formElem); });
As JavaScript applications become more and more complex, frameworks and libraries that help developers organize and code faster emerged, such as jQuery, Angular, ReactJS, VueJs, EmberJs, MeteorJs. There are also lots of specialized libraries like ThreeJs (WebGL for graphics and games), PlumbJs (diagram modelling), D3 (document and charts modelling), SoundJs (sounds) etc.
VueJS is a new, simple to use library, based on web components, that you can use to add interaction to your app.
Here is a small example that displays a list of todos with details on each task. You can also access it here: https://plnkr.co/edit/fgH90CirSOPHKp1KaVBP
<div id="app-1"> <ol> <!-- ordered list --> <li v-for="todo in todos"> <!-- list item --> <a href="#" v-on:click="showDetails(todo)">{{ todo.text }}</a> </li> </ol> <h2 v-if="selectedItem" >Details:</h2> <todo-item inline-template :todo="selectedItem"> <!-- custom html component --> <div> <h3>{{ todo.text }}</h3> <ol> <li>ID: {{ todo.data.id }}</li> <li>Status: {{ todo.data.status }}</li> </ol> </div> </todo-item> </div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script> <script> var app = new Vue({ el: '#app-1', data: { todos: [ { text: 'Learn JavaScript', bla:'1', data: {'id': 1, 'status': 'done'} }, { text: 'Learn Vue', data: {'id': 2, 'status': 'in progress'} }, { text: 'Build something awesome', data: {'id': 3, 'status': 'pending'} } ], selectedItem: null }, methods: { showDetails: function (todo) { this.selectedItem = todo } } }) Vue.component('todo-item', { props: ['todo'] data: {}, methods: {} }) </script>
Usually, data in web apps is being fetched or transmitted asynchronous for a couple of reasons
This kind of web applications, that loads in a single interactive web page are called SPA - single page applications. The process of transmitting data asynchronous is usually addressed as AJAX - Asynchronous JavaScript + XML.
In order to make an ajax call using VueJS you will need another library: AXIOS.
Usage example for a list of posts:
axios.get(`http://jsonplaceholder.typicode.com/posts`) .then(response => { // JSON responses are automatically parsed. this.posts = response.data }) .catch(e => { this.errors.push(e) })
As an assignment for this lab 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:
Data can be fetched from https://alexgr.ro/ehealth/patients.json
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.