Health care management system using react js and spring boot

HEALTH CARE MANAGEMENT SYSTEM USING REACT JS

AND SPRING BOOT

SVTH: Hoàng Trung Hiếu, Lê Tuấn Minh,

Phạm Quốc Huy, Nguyễn Duy Khá nh,

Đào Anh Thành, Lê Đức Long

GVHD: ThS Nguyễn Thị Hương

Tó m tắt - Hệ thống quản lý chăm sóc sức khỏe cung cấp lợi í ch của cá c hoạt động được sắp

xếp hợp lý, quản lý, kiểm soát nâng cao, chăm sóc bệnh nhâ n tốt hơn, kiểm soá t chi phí nghiêm ngặt

và cải thiện tí nh chuyên nghiệp. HMS mạnh mẽ, khả thi và dễ sử dụng và được thiết kế và phá t triển

để mang lại những lợi í ch thực sự có thể tưởng tượng được cho cá c bệnh viện. Quan trọng hơn nó

được hỗ trợ bởi sự hỗ trợ đáng tin cậy và đáng tin cậy. Vì có nhiều khu vực mà chúng tôi lưu giữ cá c

bản ghi trong cơ sở dữ liệu mà chúng tôi đang sử dụng phần mềm MY SQL, một trong những phần

mềm tốt nhất và dễ dàng nhất để lưu giữ thô ng tin của chúng tô i. Dự á n này sử dụng React JS làm

trì nh phá t triển front-end và có kết nối với MY SQL. Phần phụ trợ là ứng dụng của Spring Boot

framework. Hệ thống Quản lý Bệnh viện được xâ y dựng tùy chỉnh để đáp ứng yêu cầu cụ thể của cá c

bệnh viện quy mô vừa và nhỏ. Sự phá t triển cũng bao gồm kiến trúc API RESTful.

Abstract - Health Care Management System provides the beneﬁts of streamlined operations,

enhanced administration, control, superior patient care, strict cost control and improved proﬁtability.

HMS is powerful, ﬂexible, and easy to use and is designed and developed to deliver real conceivable

beneﬁts to hospitals. More importantly it is backed by reliable and dependable support. As there are

many areas where we keep the records in the database for which we are using MY SQL software

which is one of the best and the easiest software to keep our information. This project uses React JS

as the front-end development and has connection with MY SQL. The backend is the application of

Spring Boot framework. The Hospital Management System is custom built to meet the speciﬁc

requirement of the small and mid size hospitals. The development also includes RESTful API

architecture.

Keywords: React JS, MySQL, Spring Boot, RESTful

A. INTRODUCTION

Initially launched in 2002, Spring and the various built on top of it, such as Spring Boot,

have come to dominate the way Java developers write code. Prior to Spring, Java developers

relied on traditional Java EE to create their application, but there were a few problems that

came along with it. And Spring was supposed to solve those problems. Nowadays, developers

require fast, efficient ways to develop applications, software or websites… That comes to

how Spring Boot can optimize the time consumed in the progress. The same can be said to

React, a Javascript library for building user interface or UI components. React has everything

a developer would need: flexibility, easy-learning, broad community support… With that

207

being said, a combination of React for the front-end and Spring Boot for the back-end is an

ideal combination for web development. The main content of this paper will discuss the

process of making a health care management system website with React and Spring Boot,

alongside using MySQL for database management. Since it is the time that hospitals are very

crucial for our lives during the pandemic, this is an idea to help organize the mechanics of a

hospital and make everything run smoothly.

B. MAIN CONTENT

1. What is RESTful architecture?

The Representational state transfer (REST) is an architectural program design that uses

an HTTP sub-set. It is widely used for the development of immersive Web services

applications. RESTful is considered a Web service under this principle. Such a Web Service

should provide a textual description of its Web services and allow them to be read by a status-

free protocol and a collection of operations. This methodology enables the Internet computer

networks that deliver these resources to be interoperable. For instance, REST is an alternative

to SOAP for accessing a web service.

The REST aim is to enhance efficiency, scalability, simplicity, modifiability, visibility,

portability and reliability. The result is a caching scheme, a layered system usage as well as

supporting code on demand and a standard interface using the client-service architecture,

statelessness, REST concepts. For the method to be graded as REST, certain rules must be

observed.

There are 6 key constraints to think about when considering whether a RESTful API is

the right type of API for your needs:

- Client-Server: This constraint operates on the concept that the client and the server

should be separate from each other and allowed to evolve individually.

- Stateless: REST APIs are stateless, meaning that calls can be made independently of

one another, and each call contains all of the data necessary to complete itself successfully.

- Cache: Because a stateless API can increase request overhead by handling large loads

of incoming and outbound calls, a REST API should be designed to encourage the storage of

cacheable data.

- Uniform Interface: The key to the decoupling client from the server is having a

uniform interface that allows independent evolution of the application without having the

application’s services, or models and actions, tightly coupled to the API layer itself.

- Layered System: REST APIs have different layers of their architecture working

together to build a hierarchy that helps create a more scalable and modular application.

208

- Code on Demand: Code on Demand allows for code or applets to be transmitted via

the API for use within the application.

2. Why use RESTful?

One of the main benefits of REST APIs is the stability they offer. Data is not linked

to resources or methods, so that REST can manage several call types, return various data

formats and even structurally modify with the correct hypermedia execution. This versatility

helps developers to create an API that suits their needs and often satisfies a wide range of

clients' needs.

3. Explaining the application

Basically, this is how the application works if you chose to apply the RESTful API

architecture:

Figure 1: Client-server

REST basically follows the HTTP protocols. Different protocols will be applied if

needed. For example:

- GET — retrieve a specific resource (by id) or a collection of resources

- POST — create a new resource

- PUT — update a specific resource (by id)

- DELETE — remove a specific resource by id

About our application:

HANU Hospital is a healthcare/hospital management system with the aims of

optimizing the management of doctors, staff, medicine and equipment inside a hospital. This

209

application focuses on small to medium tier hospitals.

HANU Hospital was built based on the RESTful web service, as mentioned above. Our

Restful system consists of a:

Client who requests for the resources.

Server who has the resources.

Backend design:

- Based on Model - View - Controller (MVC) pattern with some adjustment:

- The View in backend has been removed as it’s been implemented in the Frontend.

- Adding Service layer to interact with the data in the database through the model.

- Frontend design: Using ReactJS to handle API from Backend controller.

- Application’s component:

Login

Screen:

Figure 2: Login screen

+Profile Screen: The profile page will show the basic information of registered patients

and their bill after their treatment.

210

Figure 3: Patient profile page

- Account management page: The account management page is for administrators,

who can control every registered account of doctors, nurses,.. and make changes if it is

required.

Figure 4: Account management page

211

- Analysis: from the tutor’s guideline, we listed out our most important use cases for the

system:

+ Register/Update/Delete patients: these use cases are extremely important to the

hospital management, since they are must-have functions for nurses. Nurses can login to the

system with “nurse” accounts that are already stored in the database, then they can do those 3

actions as long as there is at least 1 patient in the database.

Figure 5: Adding new patient

+ Prescribe and set medical procedure: these 2 use cases are crucial for any doctor.

Doctors can log in to the system by “doctor” accounts stored in the database, then they can

choose medicine for each patient by accessing the prescription function. After that, doctors

can save and set proper medical procedures for that patient.

Figure 6: Prescription page

212

+ Finance management: only administrators can access this use case. They can see the

profit and hospital expenses to keep track of the hospital’s finance situation.

4. Work result:

After a month and a half on developing this application, we finally are able to release

the first full version of HANU Hospital. However, since we did not have enough time, the

application's deployment will be executed later. Right now, HANU Hospital can run locally.

Figure 7

Figure 8: Register page

213

Figure 9: Account management page

C. CONCLUSION

Today software engineering is no longer concentrated in software work goods, but

focuses more on other metrics such as accessibility, ease of use and scalability as large-scale

applications are very demanded these days. The RESTful web service, the advantages of this

architectural option and the application of architecture to the HANU Hospital web application

have been addressed in this article. The resulting website – the web application of HANU

Hospital – is perhaps not the most well-established Web application to be developed and

success for a major hospital might not yet be good enough, but it has shown the good

infrastructure that is the full distinction between front-end and back-end operation. In the

future, further work will be performed on this project in order to ensure high performance and

to add more useful features to improve the application's usability.

214