Design
System Architecture
In order to solidify our understanding of how the internal structure of our system should be formed, we produced several diagrams using Unified Modeling Language. These diagrams helped us to create consistent prototypes that integrated together well.
Flowchart
Flowcharts were used to illustrate the flow of user actions through the system and thus clarify, how UI should be structured and which internal system components need to be integrated into the solution.
Initial Flowchart Sketch
Final Flowchart
Required performance and operational capabilities
A very important aspect that is currently lacking is ability to easily transfer data from one institution to another. At the moment, hospitals use various patient management systems which store data differently, and hence handover of patient data can become as ridiculous as typing data manually from a printed PDF. Thus, it is important to configure our form generator in a way which would enable data compatibility.
Secondly, taking into account the kind of information that our system will be processing, it is very important to ensure that data is stored in a secure way. For that, a backend system, that provides an appropriate level of security must be chosen. This will also contribute to higher storage efficiency, which will become crucial taking into account amount of data stored at UCLH.
In addition, it is important to produce a system that is stable and reliable to prevent data loss and provide a good user experience in general. The process of form creation will not happen thousands of time every day, and therefore small time delays will not be a critical issue. However, they are still highly undesirable and definitely should completely eliminated in the created form itself. To achieve that, our team had to choose an appropriate frontend framework which would enable to achieve desired performance.
First sketch of Class Diagram
Final Class Diagram
System Architecture
When a user upload the template, our system will pass the template to EHRScape backend, and fetch a JSON object associated with the template. The parser will take in the JSON object and parse it to extract the necessary components, and transform in the form of a tree. The JSON tree is then passed to the form renderer to be displayed.
Use Case Diagram
Sequence Diagram
Back-end Architecture
Design Pattern
Decorator Design Pattern
Decorator design pattern is a structural design pattern that acts as a wrapper to the object. It allows new functionalities to be added statically or dynamically without altering the system structure structure. This is done by wrapping the original object with React.props or functionalities attached to it. In our system, it is used to support conditional rendering of components by passing React.props to display different features based on the components.
Factory Design Pattern
Factory Method is often used for standardizing the architectural model of a system. This is done by defining an superclass interface that allows the subclasses to instantiate from it. It allows our object to be more customizable according to our needs. Our components are created in a similar way to factory pattern. Each of it provide a skeleton of the object, exported as a module and allow other components to instantiate it with the customisation.
Unidirectional Data Flow (Flux Design Pattern)
Flux is a new architecture designed by Facebook along with the React.Js library. Its architecture complements React’s view by utilizing a unidirectional data flow. Our components do not modify the received data. They listen to the changes and update the component with a new value. However, they do not actually updates the original data store, but instead re renders and the object with the value provided.
Presentational and Container Components
Our react components can be classified under two categories, presentational and container components. Presentational component concerns with how things are presented in the system, while container components concerns about the logic behind the system. One of the benefits of using this approach is the separation of concerns. This allows us to clearly identify the components being rendered and writing our system better.
Stateless Function
Stateless function in react is used to define a highly reusable component, which does not hold the state of the object. However, props and context are passed to these functions. This function is useful for creating presentational components. Presentational components are components that concerned about the User Interface rather than the behaviour. Therefore the usage of React.state is avoided in this context to reduce complexity.
UI Design
User Interface Description
As it was discussed with our client, it is important to keep UI clear and friendly for users, who do not have comprehensive experience using medical software. This is particularly important for patients, who may use the form but not be too familiar with the way medical data is structured. There is a number of considerations for UI which our team will follow during development:
- Unambiguous structure of application screens
- Appropriate use of colors, whitespace, fonts and other UI elements
- Clear user journey through the app with noticeable navigation elements
- Easily available and comprehensive on-screen help
- Following house style of PEACH project
House Styles
As the form generator will be a part of container application with other openEHR components, it is important for the system to maintain a consistent house style. Main reference document for how we need to represent our application is Peach Design Guide provided by our client Navin. It contains definitions of core design components of all Peach application. Examples include:
Color scheme
Development tool chain
Operating Systems- Ubuntu 16.04.1 LTS
- macOS 10.12 Sierra
- Windows 10 1607
Each member of our team uses a different operating system. It imposed a certain limitation on our team - in order to keep our workflow clear and understandable for each member, we had to use development environments that would be available on each of these platforms. However, at the same time it enables us to perform testing in a variety of environments.
Programming languages, frameworks and libraries- HTML5
- CSS3, Sass, LESS
- React.js
We will be using classic core components of front end web development such as HTML and CSS. However, we will pair them with Sass and LESS engines in order to generate styles in the most efficient way.
React.js will be out core Javascript framework in this project. It makes it convenient to implement a modular approach to development, which will make our application more adapted to future improvements.In addition, we decided to use the libraries specified above to support the back-end system of our project. This will enable us to effectively combine our form generator with other openEHR components at later stages. [1,2]
Additional API and libraries for configuring this project| Tools | Functionalities |
|---|---|
| Firebase | A real time-database system which provides API to allow developers to synchronize and store data across multiple clients. It is used in our application for the secure login to our system. |
| Zepto | Minimalist JavaScript library for modern browser that is compatible with jQuery API |
| Babel | A configurable transpiler, a compiler which translates JavaScript ECMAScript 6 to ECMAScript 5 that can run in all browsers |
| Webpack | A module bundler used to put all assets including images, CSS and Javascript together in a dependency graph |
| ClassName | JavaScript libraries used for joining classNames together in order to maintain the change of form state during the form rendering. |
| ReactBootstrap | Free, open-source front-end web frameworks for designing the User Interface built for React. |
| AdminLTE | A styled-components library providing React front-end reusable Components |
- Sublime Text 3
- Atom
Sublime Text is one of the most popular text editors, and effective use of packages such as JS Prettify and Emmet makes development process especially convenient. Atom is another convenient text-editor with amazing integration of most popular tools. Our team decided not to use Adobe Dreamweaver and other similar software in order to have more control over development process.
Design and graphical software- Balsamiq Mockups
- Adobe Photoshop CC 2015
Adobe Photoshop still remains a top graphical editor. Due to its extensive list of tools, our team will be able to complete any task with regard to graphics. We preferred it over GIMP as the tools that are provided in Photoshop are more effective from the point of view of our team.
OpenEHR- openEHR Clinical Knowledge Manager
- openEHR Archetype Editor
- Ocean Template Designer
OpenEHR provides several tools that enable archetype generation. We decided to use Clinical Knowledge Manager because this application is web based, which means that every member of our team will be able to access it despite different operating systems being used.[5]Furthermore, it provides a convenient graphical interface which helps to learn the tool way faster than other console-based tools. A limitation here is that our ability to generate archetypes depends on an external server and its stability.[4]
Ocean Template Designer will be used to generate openEHR templates. This is a very convenient and free open-source system. However, there is an issue of the tool being only available on Windows. Thus, we will require other members of our team to install windows on their machines as well.
Communication tools- Ryver
- Trello
In order to efficiently communicate with our clients and other teams, we used Ryver. Ryver allows us to collaborate efficiently with other teams,share resources, and ask queries regarding the project. We also use trello, a project management board, to keep track of our project progress and assign tasks among the team members. Whatsapp is our main channel of communications between teams, we regularly keep each other informed of our progress regarding this project.
Additional- Git
- NPM and APT
- Heroku
- Azure
Our team makes use of Git in order to control versions of our system and thus create a stable workflow. NPM and APT package managers will provide us with a convenient way to install needed software elements. Heroku is a one of the top platform for application development. We decided to choose it over traditional cloud services such as AWS and Microsoft Azure due to its effective integration into ReactJs environment. [3]
Environment for running the system
As our application is going to be web-based, users will not experience restrictions with regard to operational systems they need to have to use the application. However, it is preferable to use web browsers that adhere to certain standards. The list is provided below:
- Google Chrome 49.0 or newer
- Firefox 49 or newer
- Microsoft Edge 14 or newer
- Safari 9.1 or newer
In addition, a user will have to have a pre-created operational template, or use software that would enable them to generate it.
References
- Heroku (no date) Heroku Dev center. Available at: https://devcenter.heroku.com/(Accessed: 5 November 2016).
- Clinical knowledge manager (no date) Available at: http://www.openehr.org/ckm/ (Accessed: 3 November 2016).
- freshehr (2016) Freshehr/openehr_tool_docs. Available at:https://github.com/freshehr/openehr_tool_docs(Accessed: 12 November 2016).
- Babel Compiler (2017) Available at:https://babeljs.io/(Accessed: 22 April 2017).
- App Success Made simpler (2017) Available at:https://firebase.google.com/(Accessed: 22 April 2017).
Implementation Details
Connected to EHRScape Backend
Done. Established connection through a series of asynchronous API calls, including: posting template, fetching template, fetching list of available templates.
Fetches template and Enable Upload
Complete as a part of backend connectivity through API calls. The templates are saved in a state of Children container component.
Render Forms and Enable customisation
Form can be rendered by the input json object in the structure of a tree and the customisation part was done through up, down and delete buttons to allow the user to manipulate the fields.
Save Forms and API calls
Inner HTML of each form rendered can be saved by a user. Furthermore, based on an underlying JSON tree, each form is assigned an API call, body of which can be saved and user for communication with backend.
Clean User Interface
Accomplished through making use PEACH Design Guide.
Extendable for future work
Our team has provided extensive documentations for future development of this project. Moreover, our code is clearly commented to help developers understand it’s structure