Show page

Differences

This shows you the differences between two versions of the page.

--- seh:laboratoare:02 [2020/03/27 13:42]
alexandru.gradinaru [Lab tasks]
+++ seh:laboratoare:02 [2022/03/18 18:04] (current)
alexandru.gradinaru [Lab tasks]
@@ Line 1: / Line 1: @@
 ===== Laboratorul 02. =====
-In this lab we will take a step further to make an advanced REST client, and familiarise with ReactJS.
+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.
-===== ReactJS =====
+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.
-React is a declarative, efficient, and flexible JavaScript library for building user interfaces.
+===== Web Services =====
-React is component-based, and goes by the LOWA (Learn Once, Write Everywhere) philosophy. React can render:
-  * on the server, using NodeJs
-  * deploy to mobile devices using React Native
-  * desktop applications using electronjs
-  * VR using React VR
-==== Web Components ====
+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.
-Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. The base class privided by React is React.Component.
+==== Representational State Transfer (REST) ====
-Normally you would define a React component as a plain JavaScript class:
+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.
-<code javascript>
+RESTful applications have four design principles.
-class ShoppingList extends React.Component {
-  render() {
+**1. Use HTTP Methods Explicitly**
-    return (
-      <div className="shopping-list">
+  * POST – creates new resources on the server
-        <h1>Shopping List for {this.props.name}</h1>
+  * GET – retrieves the current state of the resource on the resource
-        <ul>
+  * PUT – change state of resource or update it on the server
-          <li>Instagram</li>
+  * DELETE – remove a resource from the server
-          <li>WhatsApp</li>
-          <li>Oculus</li>
+**2. Be Stateless**
-        </ul>
-      </div>
+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:
-// Example usage: <ShoppingList name="Mark" />
+<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>
-=== The Component Lifecycle ===
+For detailed information and syntax you can check [[https://www.w3schools.com/html/]].
-Each component has several “lifecycle methods” that you can override to run code at particular times in the process. Methods prefixed with will are called right before something happens, and methods prefixed with did are called right after something happens.
-== Mounting ==
+HTML was created to describe the content of a web page.
-These methods are called when an instance of a component is being created and inserted into the DOM:
-  * constructor()
-  * componentWillMount()
-  * render() - the main required function that displays data
-  * componentDidMount()
-== Updating ==
+  * HTML can be formatted using CSS (Cascading Style Sheets).
-An update can be caused by changes to props or state. These methods are called when a component is being re-rendered:
+  * CSS describes how HTML elements are to be displayed on screen, paper, or in other media
-  * componentWillReceiveProps()
+  * CSS saves a lot of work. It can control the layout of multiple web pages all at once
-  * shouldComponentUpdate()
+  * External stylesheets are stored in CSS files
-  * componentWillUpdate()
-  * render()
-  * componentDidUpdate()
-== Other APIs ==
+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.
-Each component also provides some other APIs:
-  * setState()
-  * forceUpdate()
-== Class Properties ==
+CSS can use classes and ids in order to format specific elements.
-  * defaultProps
-  * displayName
-== Instance Properties ==
+<code css>
-  * props - read-only arbitrary inputs
+p {color: black;}
-  * state - contains data specific to this component that may change over time. Never mutate this.state directly, as calling setState() afterwards may replace the mutation you made. Treat this.state as if it were immutable.
+p#special {color:red;}
-==== JSX ====
+.container {background: #cccccc;}
+</code>
-<code javascript>
+<code html>
-const element = <h1>Hello, world!</h1>
+<html>
-const element = (
+  <head>
-  <div>
+    <title> Hello world page title on the browser tab </title>
-    <h1>Hello!</h1>
+  </head>
-    <h2>Good to see you here.</h2>
+  <body>
-  </div>
+    <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>
-This funny tag syntax is neither a string nor HTML. It is called JSX, and it is a syntax extension to JavaScript. JSX produces React “elements”.
+For detailed information and syntax you can check [[https://www.w3schools.com/css/]].
-React doesn’t require using JSX, but most people find it helpful as a visual aid when working with UI inside the JavaScript code. It also allows React to show more useful error and warning messages.
+Nowadays, we use complex frameworks for CSS in order to speed up development. Popular examples are Tailwind, Bootstrap, Material. Here are some
+[[https://tailwindcomponents.com/|Tailwind examples]] that you can copy-paste immediately in order to build small sections of your app/website.
-You can embed any JavaScript expression in JSX by wrapping it in curly braces. Don’t put quotes around curly braces when embedding a JavaScript expression in an attribute. You should either use quotes (for string values) or curly braces (for expressions), but not both in the same attribute.
+===== Data Transmission =====
-<code javascript>
+==== Form Data====
-const element = <img src={user.avatarUrl} number={2+2}></img>
+HTML is sending data by default using the form element.
+<code html>
+<form action="https://example.com">
 </code>
-Fundamentally, JSX just provides syntactic sugar for the React.createElement(component, props, ...children) function. The JSX code:
+Data can be sent in multiple formats and multiple methods
-<code javascript>
-<MyButton color="blue" shadowSize={2}>
+  * The default method of the HTML form element if GET, although is not recommended anymore. We can only send simple form data using the GET method (encoded text). This will append data in the URL as query parameters, with an URL encoded string. Note that the URL string is usually limited to ~2000 characters.
-  Click Me
-</MyButton>
+<code html>
+<form method="GET" action="https://example.com">
+result:
+GET https://example.com?name=Alex&email=alex@example.com
 </code>
-compiles into:
-<code javascript>
-React.createElement(
+  * We can send data using the POST or PUT method. This will also send form data using some query parameters, but they are send in a special form-data body container. We can also send complex data like images, audio, XML, JSON objects etc. using settings for Content-Type and encoding
-  MyButton,
+<code html>
-  {color: 'blue', shadowSize: 2},
+<form method="POST" action="https://example.com" enctype="multipart/form-data" >
-  'Click Me'
-)
 </code>
+  * We can use Javascript to send data
-You can provide more JSX elements as the children. This is useful for displaying nested components:
-<code javascript>
-<MyContainer>
+==== XML ====
-  <MyFirstComponent />
-  <MySecondComponent />
+XML is a software - and hardware - independent tool for storing and transporting data.
-</MyContainer>
+  * 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>
-==== Routing ====
-Routing in react can be done using multiple libraries. The most popular one is `react-router`.
+XML and HTML were designed with different goals:
-The library defines simple route components that can be nested:
+  * XML was designed to carry data - with focus on what data is
-<code javascript>
+  * HTML was designed to display data - with focus on how data looks
-import { Router, Route, hashHistory } from 'react-router';
+  * XML tags are not predefined like HTML tags are
-<Router history={hashHistory}>
-    <Route path="/" component={App}>
+==== JSON ====
-      <Route path="/about" component={About}/>
-      <Route path="/contact" component={Contact}/>
+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".
-    </Route>
-  </Router>
+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>
-You can find some examples here: https://codepen.io/pantharshit00/pen/OpZLoa, https://codesandbox.io/s/vvoqvk78
+JSON values can be of the simple data types:
+  * strings
+  * numbers
+  * objects
+  * arrays
+  * Booleans (true or false)
+  * null
+JSON supports nested objects or arrays:
-==== HTTP Requests ====
+<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>
-In order to make a HTTP request, you can use the same axios package, similar to how it was used in VueJs:
+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>
+===== JavaScript =====
+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:
+<code html>
+<button
+  type="button"
+  onclick="document.getElementById('demo').innerHTML = Date()"
+>
+Click me to display Date and Time.
+</button>
+<p id="demo"></p>
+</code>
+In a separated script section:
+<code html>
+<button id="myBtn" type="button">Click me to display Date and Time.</button>
+<p id="demo"></p>
+</code>
 <code javascript>
-import React from 'react';
+<script>
+ document.getElementById("myBtn").addEventListener("click", displayDate);
+ function displayDate()
+ {
+   document.getElementById('demo').innerHTML = Date()
+ }
+</script>
+</code>
-import axios from 'axios';
-export default class PersonList extends React.Component {
+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
-  state = {
-    persons: []
-  }
-  componentDidMount() {
+  * https://developer.mozilla.org/en-US/docs/Web/API/Element/append
-    axios.get(`https://jsonplaceholder.typicode.com/users`)
-      .then(res => {
-        const persons = res.data;
-        this.setState({ persons });
-      })
-  }
-  render() {
+<code javascript>
-    return (
+let div = document.createElement("div")
-      <ul>
+let p = document.createElement("p")
-        { this.state.persons.map(person => <li>{person.name}</li>)}
+div.append("Some text", p)
-      </ul>
-    )
-  }
-}
 </code>
+  * https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
+<code javascript>
+var el = document.querySelector("div.user-panel.main input[name='login']");
+</code>
+  * https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects
-===== Lab tasks =====
+<code javascript>
+formElem.addEventListener('submit', (e) => {
+  // on form submission, prevent default
+  e.preventDefault();
-As an assignment for this lab you will have to make a small web application client in order to access e-health formatted data with more advanced features. The application must have at least the following:
+  // construct a FormData object, which fires the formdata event
+  new FormData(formElem);
+});
+</code>
-. **Home page** with menu and two different pages
+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.
-  * Patients
-  * Medication
-. **Patients Page**
+VueJS is a new, simple to use library, based on web components, that you can use to add interaction to your app.
-  * Paginated table with at least 20 patients. Filter patients in page by name (search)
-  * Data source: [[https://hapi.fhir.org/baseR4/Patient?_format=json&_pretty=true]]
+Here is a small example that displays a list of todos with details on each task.
-  * Each patient must have a detailed page containing:
+You can also access it here: https://plnkr.co/edit/fgH90CirSOPHKp1KaVBP
-    * Encounters: [[http://hapi.fhir.org/baseR4/Encounter?_format=json&_pretty=true]]
+<note important>
-    * CarePlan: [[http://hapi.fhir.org/baseR4/CarePlan?_format=json&_pretty=true]]
+Notice that the library file is loaded before usage:
-    * Appointment: [[http://hapi.fhir.org/baseR4/Appointment?_format=json&_pretty=true]]
+<script src="https://cdn.jsdelivr.net/npm/vue"></script>.
-    * AllergyIntolerance [[http://hapi.fhir.org/baseR4/AllergyIntolerance?_format=json&_pretty=true]]
+Also, you can define new HTML web components with custom functionality.
-<note tip>
+</note>
-You can run a script to extract patient that have details (Encounters, CarePlan, allergy etc)) and then use filters to select data only for those patients.
-You can filter resources by patient - eg. http://hapi.fhir.org/baseR4/AllergyIntolerance?patient=1059&_include=AllergyIntolerance%3Apatient&_format=json&_pretty=true</note>
+<code html>
+    <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>
+</code>
+<code javascript>
+<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>
+</code>
+Usually, data in web apps is being fetched or transmitted asynchronous for a couple of reasons
+  * minimize bandwidth consumption - only changed data is transmitted
+  * minimize user impact - pages are not changed, only data parts
+  * non-blocking processing - some tasks require longer processing times, so the user can still access other functions on the page while the request is still processing
+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.
+<note important>
+Do not forget to include the library first
+  * https://cdnjs.com/libraries/axios
+</note>
+Usage example for a list of posts:
+<code javascript>
+   axios.get(`http://jsonplaceholder.typicode.com/posts`)
+    .then(response => {
+      // JSON responses are automatically parsed.
+      this.posts = response.data
+    })
+    .catch(e => {
+      this.errors.push(e)
+    })
+</code>
-. **Medication Page**
+<note tip>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/)</note>
-  * Paginated table with Medication
-  * Data source: [[http://hapi.fhir.org/baseR4/Medication?_format=json&_pretty=true]]
-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. If you worked locally, you could publish it to a public repository on github for example and submit the url.
-<note tip>You are encouraged to use React, as the next lab will require making a mobile app, and it will be easier to use React Native to do so.</note>
-<note tip>Still, 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.</note>

Laboratoare

Resurse

seh/laboratoare/02.1585309365.txt.gz · Last modified: 2020/03/27 13:42 by alexandru.gradinaru

Show page Old revisions

Media Manager Back to top