Web App

General

The purpose of the Web Application is to provide the medical staff with live information about the patients in a web browser. There should be an overview about the status of all the patients.

When clicking on a patients card a detailed view is shown.

Technology Stack

React with Node Package Manager 6.12.0^

A very popular Javascript library. It greatly abstracts and simplifies building userinterfaces by allowing the project to be split up into individual components. React was mainly chosen because of it's wide userbase, great support and documentation by Facebook and prior experience building websites with it. Basically React is a very safe bet when it comes to Frontend development.

The React components used are part of the open source Material Dashboard React Template by Creative Tim

Redux

Managing global application state for authentication etc.
If server data is updated the whole webpage state is changed.

Babel

A compiler and syntax transformer for Javascript. It's main usage is to use newer syntax without waiting for browser support as the the compiled javascript becomes backwards compatible.

Webpack

The go to module bundler for frontend applications

Bower

Manages imported library components to keep them up to date

React alerts:

https://github.com/schiehll/react-alert
For displaying custom alerts to user. E.g. "patient data was entered incorrectly"

Django with Python 3.7

A popular python backend framework. It will be used to forward the status of the patients saved in the central databank to the Frontend. This is done through a REST API using HTTP requests. Later on Django might also modify database entries with changes the doctor wants to make. Django was chosen due to prior experience with the framework, great community support, reliability, security and performance. Mainly it forces you to stick with the "Django" way of handling things as opposed to frameworks like Flask that allow more freedom.

Package Management

Any python environment management tool supporting pip should (pipenv, virtualenv)

Project File Structure

Configuration

Django Settings

'rest_framework', 'knox' and all created applications (e.g. patients) are added to INSTALLED_APPS

Code

Frontend

The index.js file is the entry point loading the Admin.js layout. This layout puts all Navigation aspects and the patient Dashboard on screen.

Dashboard.js
This view fetches all patient data as JSON object from the backend and maps it into JSX. The whole view consists of a GridContainer. Inside the grid container a patient card is created for every patient inside the JSON object. Conditional rendering allows the cards to appear in a color depending on the state of the patient.

Example of how to fetch JSON Data from the backend and save it into the state of the React Component:

fetchPatients(){
        Axios.get('http://localhost:8000/sendjson/') 
        .then(res => {
          console.log(res);
          this.setState({patients: res.data});
        });
 }

Libraries used inside React

• Axios: Package for making asynchronous API requests. It has many advantages compared to the stock fetch method

Backend

Libraries used inside Django

• Django Rest Framework: Used to provide JSON Responses
• Cors Headers: Is used to allow the frontend application (browser) to make http requests to the Django Backend. The browser should also have a plugin (like CorsE) allowing it to disable cross origin checking during development.

models.py:
saves database entry as Django model. A patients name, status and the last time the entry was modified get saved. The status novel means that the system did not assign the patient a status and the patient was merely added to the database.

class Patient(models.Model):
    first_name = models.CharField(max_length=30)
    last_name = models.CharField(max_length=30)
    last_update = models.DateTimeField(auto_now=True) #everytime object is accessed timestamp is auto updated
    StatusType = models.TextChoices('StatusType','good medium bad novel')
    patient_status = models.CharField(blank=False,max_length=6, choices=StatusType.choices)

serializers.py:
using a ModelSerializer from rest_framwork to turn a models into JSON objects that can be used by the API

api.py:
used to create CRUD api. Patients can be created with POST request and read with GET. UPDATE and DELETE are of course also possible.

Example of adding a user:
POST request to domain.com/api/patients/

{
	"first_name":"Peter",
	"last_name":"Müller",
	"patient_status":"bad"
}

GET request to domain.com/api/patients/

[
    {
        "id": 1,
        "first_name": "daniel",
        "last_name": "wagner",
        "last_update": null,
        "patient_status": "bad"
    },
    {
        "id": 3,
        "first_name": "Peter",
        "last_name": "Müller",
        "last_update": "2019-12-13T22:10:49.085026Z",
        "patient_status": "bad"
    }
]

Individual patients can be accessed with their id:
GET request to domain.com/api/patients/3/

{
    "id": 3,
    "first_name": "Peter",
    "last_name": "Müller",
    "last_update": "2019-12-13T22:10:49.085026Z",
    "patient_status": "bad"
}

Development

SuperUser account: pallicare_admin
SuperUser e-mail: dan.wagner@fau.de
SuperUser password: admin

For Development a test account for the doctor is created:
Username: doctor
E-mail: doctor@palliative_care_unit.com
Password: k6"_0h/E#M1

Deployment