Luận văn tốt nghiệp Khoa học máy tính: Design and build a website for Medical Doctor Office Management

FACULTY OF COMPUTER SCIENCE AND ENGINEERING

GRADUATION THESIS

Design and build a website for

Medical Doctor Office Management

Council: CLC Computer Science 4Instructor: Prof Nguyen Duc Thai

Reviewer: Prof Nguyen Le Duy Lai

Student: Nguyen Quang Truong - 1713753

HO CHI MINH CITY, October 2021

ĐẠI HỌC QUỐC GIA TP.HCM CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM - Độc lập - Tự do - Hạnh phúc

TRƯỜNG ĐẠI HỌC BÁCH KHOA

KHOA: KH & KT Máy tính _ NHIỆM VỤ LUẬN ÁN TỐT NGHIỆP

BỘ MÔN: HT & MMT _ Chú ý: Sinh viên phải dán tờ này vào trang nhất của bản thuyết trình

HỌ VÀ TÊN: Nguyễn Quang Trường MSSV: 1713753 NGÀNH: Computer Science LỚP:

1 Đầu đề luận án:

Design and Build A Website for Medical Doctor Office Management

2 Nhiệm vụ (yêu cầu về nội dung và số liệu ban đầu):

• Do research on works related to medical doctor office management • Complete requirement analyses on the mentioned website, using UML

• Provide website design, including interface design, interaction design, database design, authentication design …

• Apply SEO, Google Maps design to the website • Build search feature for website

• Implement the website with appropriate programming languages and technologies

3 Ngày giao nhiệm vụ luận án: 01/03/2021 4 Ngày hoàn thành nhiệm vụ: 01/08/2021

5 Họ tên giảng viên hướng dẫn: Nguyễn Đức Thái Phần hướng dẫn:

Nội dung và yêu cầu LVTN đã được thông qua Bộ môn

Ngày 01 tháng 03 năm 2021

CHỦ NHIỆM BỘ MÔN GIẢNG VIÊN HƯỚNG DẪN CHÍNH

Nguyễn Đức Thái Nguyễn Đức Thái

PHẦN DÀNH CHO KHOA, BỘ MÔN:

Người duyệt (chấm sơ bộ): Đơn vị: _ Ngày bảo vệ: _ Điểm tổng kết: _ Nơi lưu trữ luận án: _

-

Ngày 10 tháng 08 năm 2021

PHIẾU CHẤM BẢO VỆ LVTN

(Dành cho người hướng dẫn/phản biện)

1 Họ và tên SV: Nguyễn Quang Trường

MSSV: 1713753 Ngành (chuyên ngành): Computer Science

2 Đề tài: Design and Build A Website for Medical Doctor Office Management 3 Họ tên người hướng dẫn: Nguyễn Đức Thái

4 Tổng quát về bản thuyết minh:

10 Đánh giá chung (bằng chữ: giỏi, khá, TB): Điểm : 7/10 Ký tên (ghi rõ họ tên)

Nguyễn Đức Thái

VIETNAM NATIONAL UNIVERSITY HO CHI MINH CITY HO CHI MINH CITY UNIVERSITY OF TECHNOLOGY FACULTY OF COMPUTER SCIENCE AND ENGINEERING

SOCIALIST REPUBLIC OF VIETNAMIndependence - Freedom – Happiness

-09 Aug 2021.

Thesis Review Report

(For instructors/reviewers)

1 Student's full name: NGUYEN QUANG TRUONG

Student ID: 1713753 Major (specialty): Computer Science

2 Subject: Design and building a website for Medical Doctor Office Management

3 Full name of Supervisor/Reviewer: NGUYEN LE DUY LAI4 Overview of the Thesis:

Page number:Chapter number:Number of data tables:Number of figures:Number of Reference:Computation software:Artifacts (products):5 Overview of drawings:

- Number of drawings: Version A1: Version A2: Other size:- Number of hand-drawn drawings

- Number of drawings on the computer:

6 Main advantages of the Thesis:Research Objectives:

• Patient needs a trustworthy resource with various options for them to choose the most suitable doctor.• Doctor can expand their network to the potential customers and manage appointments with patients.

Proposed Solution

• The thesis proposed to create a Website with a user-friendly interface for everyone who can easily access on any device, from everywhere with a browser An authentication mechanism integrated to the Website permits a privacy for the stored information.

• The deliverable of this thesis is an operational Website with a list of features in the design All features are implemented to provide users with a great experience in the Website The Website has been successfully deployed and users can access through any device’s browser

7 Main shortcomings of the Thesis:

• The structure of the Website design is not clear; the data flow needs to be given with more details.• The search and match tool implemented in the Website is quite simple.

• The Website needs implementing a stronger method for the authentication because users can store sensitiveinformation.

8 Recommend: Permit to defend  Permit to defend with condition  Not-allowed 9 Three questions student must answer in front of the Committee:

a What do you think about a stronger authentication method? Have you surveyed for different authentication mechanisms?

b In term of Website implementation and exploration, what do you think about the material requirements and hardware resource?

c How do you plan to get back the benefits from Website exploitation?

10 Overall assessment (in words: good, quite good, average): Score: 7.5/10.

I declare that this research is my own work, conducted under the supervisionand guidance of Prof Nguyen Duc Thai The result of our research is legitimateand has not been published in any forms prior to this All materials used withinthis researched are collected myself by various sources and are appropriately listedin the references section.

In addition, within this research, I also used the results of several otherauthors and organizations They have all been aptly referenced.

In any case of plagiarism, I stand by my actions and will be responsible forit Ho Chi Minh city University of Technology therefore are not responsible forany copyright infringements conducted within our research.

Ho Chi Minh City, Oct 2021Author

Nguyen Quang Truong

I am using this opportunity to express my gratitude to everyone who ported me during my study and my life I am thankful for their aspiring guidanceinvaluably constructive criticism and friendly advice.

sup-I offer my sincerest and deepest gratitude to my supervisor, ProfessorNguyen Duc Thai, for his support and guidance throughout my thesis He wasalways ready to provide answers to my puzzling questions and guided my work toa swift end.

Finally, I recognize that this research would not have been possible withoutthe support from my family and from bottom of my heart, I must acknowledgemy parents without whose love, encouragement and sacrifice, I would not havefinished this thesis.

Design and building a website for Medical Doctor Office Managementby

Nguyen Quang Truong

Ho Chi Minh City University of Technology, Oct 2021

The aim of this thesis is to develop a web application designated for communicationbetween patient and doctor, and to describe the whole process of its development.The thesis contains a description of application analysis with design, implementa-tion and application testing Besides the description of the development process,the final output of the thesis is also working web application.

5.3 UI Design 53

5.3.1 Navigation bar component(Header) 53

5.3.2 Search component 53

5.3.3 Login form component 54

5.3.4 Sign up form component 56

5.3.5 User info component 58

5.3.6 Doctor-card Component 60

5.3.7 Review Component 61

5.3.8 Booking Component 62

5.3.9 User Dashboard Component 64

5.3.10 Patient Appointment Component 65

5.4 System Architecture 66

6 Implementation 676.1 Authentication & Authorization 67

7.2 Evaluation 85

7.2.1 Drawback 85

7.2.2 Future Work 85

2.1 Homepage of fvhospital.com 13

2.2 Homepage of khambacsi.com 14

3.1 GraphQL Example 18

3.2 GraphQL Argument Example 19

3.3 GraphQL Argument Example 19

3.4 GraphQL Schema Example 19

4.1 Angular Logo 21

4.2 File Structure 23

4.3 Bootstrap Logo 24

4.4 Amazon Cognito Diagram 26

4.5 Amazon DynamoDB Example 27

5.1 Use-case Diagram 32

5.2 Navigation bar component 53

LIST OF FIGURES LIST OF FIGURES

5.3 Navigation bar for registered user 53

5.4 Search Component 54

5.5 Login form Component 54

5.6 Login form alert message 55

5.7 Login form alert wrong password 56

5.8 Picking role for signing up 56

5.9 Alert message for picking role 57

5.10 Sign up form 57

5.11 Alert message for using existed email for signing up 58

5.12 Successfully sign up 58

5.13 Adding information for patient 59

5.14 Adding information for doctor 60

5.15 Doctor-card Component 60

5.16 Review Component 61

5.17 Booking Component 62

5.18 Booking Component with pop up 63

5.19 User Dashboard component 64

5.20 Patient Appointment Component 65

5.21 Website’s system architecture 66

6.1 Amazon Cognito Function 68

6.2 JWT Token when login successfully 68

6.12 User Information page 77

6.13 Manage User Page 77

7.1 Homepage of deployed web application 85

Chapter 1Introduction

Medical care is one of the most essential aspect in life cause it definitelyaffect everyone’s health in any shape or form And that’s itself in fact need an extrapublic attention The majority of people in Vietnam access medical care by thetraditional way is public hospital due to its popularity and technology it holds Andfor that reason, the number of patients each doctor has to treat daily is massiveand can not exceed time limited allowed per patient Therefore, the demand fornew treatment is rising, patient wants to establish a long term relationship withtheir close doctor who is going to understand deeply their medical condition whichwill beneficial for the future diagnosis and prevention of dangerous diseases Thepatient still takes the blood test, urine test, supersonic, at the hospital but theytake that result to their close doctor for the diagnosis and receive medicine billfrom them as well.

The majority of patients find doctors through the suggestion of their quaintances or their close friends who had a few sessions with a doctor and com-fortable to recommend he/she to them In that case, if the patients’ circle do not

ac-have any connection with the doctor, it is very difficult for them to find a qualifieddoctor cause there is very limited of resource online for searching doctor’s infor-mation also the question about the authentication of the doctor whether they aretrustworthy or not?

The next parts of this thesis are composed of six chapters as follow:Chapter two provide some related projects with their pros and cosChapter three introduce some background knowledge.

1.4 THESIS STRUCTURE CHAPTER 1 INTRODUCTION

Chapter four lists all technologies were used in this thesis.Chapter five presents the design for the system.

Chapter six shows the implementation of the thesis and how the result isformed.

Chapter seven gives an overview about the result and discuss some futureimprovements.

Related Works

In domestic, the majority of website which shows doctor’s information long to the particular hospitals And the only way to book the appointment isthrough the hospital, and the process is very much similar with conventional waywith no improvement Take the website www.fvhospital.com from FV hospitallocated at Ho Chi Minh City as example The website still provides the largeamount of information but the doctors solely works for that hospital, thereforethe patient can only book with the hospital rather than booking directly from thedoctor.

be-CHAPTER 2 RELATED WORKS

Figure 2.1: Homepage of fvhospital.com

Next, the third-party website www.khambacsi.com which does not strict with any organization, they showcase the diverse doctors from every city inthe country The limitation of this website is there is no review system for patientsto consider beside the doctor’s background User need to know the experiences ofprevious customers to make a final decision.

re-Figure 2.2: Homepage of khambacsi.com

HTML stands for HyperText Markup Language It is the language thatweb browsers read to build a web page It acts as a ‘blueprint’ to display data ona user’s screen This is the basic building block of the web Every page on theInternet is just HTML at its core.

CSS stands for Cascading Style Sheets which allowed developers to putsome color and style into website to make it more pleasing The simplest way tounderstand web operation is this analogy of a web page as a house, every houseneed to have structure and frame, that is HTML in web page and we can not justhouse with structure along, we need to some decoration into a house therefor CSSis a crucial part of web development.

TypeScript which is a modern age JavaScript development language JavaScriptis a scripting language which helps to create a interactive web pages and its runsin user’s web browser whereas TypeScript is a superset of JavaScript In order torun on browser, TypeScript needs to compile to JavaScript file The big differenceof TypeScript compare with JavaScript is TypeScript requires type declarationwhereas JavaScript has no such concept.

Back-end Development is the term for the behind-the-scenes activities thatoccurs when user access anything on the website or web application It is usuallyreferred to the server-side development.

NoSQL databases are databases that store data in a format other thanrelational tables People can understand NoSQL stands for ”non SQL” or also

3.2 BACK-END CHAPTER 3 THEORETICAL KNOWLEDGE

”not only SQL” NoSQL makes it easier to developers to quickly adapt to changingrequirements because of its flexibility.

3.2.1.1 What is SQL?

SQL stands for Structured Query Language SQL is used to communicatewith a database According to ANSI (American National Standards Institute),it is the standard language for relational database management systems SQLstatements are used to perform tasks such as update data on a database, or retrievedata from a database The standard SQL commands such as ”Select”, ”Insert”,”Update”, ”Delete”, ”Create”, and ”Drop” can be used to accomplish almosteverything that one needs to do with a database.

3.2.1.2 Types of NoSQL Databases

• Document databases: store data in documents similar to JSON objects.Each document contains pairs of fields and values The values can typicallybe a variety of types including things like strings, numbers, booleans, arrays,or objects, and their structures typically align with objects developers areworking with in code Because of their variety of field value types and pow-erful query languages, document databases are great for a wide variety of usecases and can be used as a general purpose database They can horizontallyscale-out to accomodate large data volumes[2].

• Key-value databases are simpler type of database where each item tains keys and values A value can typically only be retrieved by referencingits key, so learning how to query for a specific key-value pair is typicallysimple Key-value databases are great for use cases where you need to storelarge amounts of data but you don’t need to perform complex queries toretrieve it Common use cases include storing user preferences or caching[2].

GraphQL is a query language for APIs and a runtime for fulfilling thosequeries with existing data GraphQL provides a complete and understandabledescription of the data in API, give clients the power to ask for exactly whatthey need and nothing more make it easier to evolve API over time, and enablespowerful developer tools [3].

3.2.2.1 Fields

The fundamental of GraphQL is the way to ask for specifice fields on objects.Here is one example:

Figure 3.1: GraphQL Example

Notice how the query has exactly the same shape as the result This isessential to GraphQL, because user always get back what they expect, and theirserver knows exactly what fields the client is asking for The fields name return aString type.

3.2.2.2 Arguments

GraphQL supports the ability to pass arguments to fields make it becomesmore useful for data fetching In the example, we pass the argument id with value1000 and the query result will return all objects which match with that id

3.2 BACK-END CHAPTER 3 THEORETICAL KNOWLEDGE

Figure 3.2: GraphQL Argument Example

In a system like REST, you can only pass a single set of arguments - thequery parameters and URL segments in your request But in GraphQL, every fieldand nested object can get its own set of arguments, making GraphQL a completereplacement for making multiple API fetches You can even pass arguments intoscalar fields, to implement data transformations once on the server, instead of onevery client separately.

Figure 3.3: GraphQL Argument Example

3.2.2.3 Object types

The most basic components of a GraphQL schema are object types, whichjust represent a kind of object you can fetch from your service, and what fields ithas In the GraphQL schema language, we might represent it like this:

Figure 3.4: GraphQL Schema Example

• Character is a GraphQL Object Type, meaning it’s a type with some fields.Most of the types in schema will be object types.

• name and appearsIn are fields on the Character type That means thatname and appearsIn are the only fields that can appear in any part of aGraphQL query that operates on the Character type.

• String is one of the built-in scalar types - these are types that resolve to asingle scalar object, and can’t have sub-selections in the query.

• String! means that the fields is non-nullable, meaning that the GraphQLservice promises to always give you a value when you query this field.• [Episode!]! represents an array of Episode objects.

Chapter 4Technology

which provides the bootstrap mechanism that launches the application and at leastone components, called the root component that connects a component hierarchywith the page document object model (DOM) [4] Each component defines a classthat contains application data and logic The mechanism help the developer toreduce repetitive code and reuse similar component in multiple page.

The feature for data binding keeps the page so easily to update based on theapplication’s state without developers have to write getters/setters for each datamodels Event binding lets the app respond to user input in the target environmentby updating application data And property binding interpolate values that arecomputed from the application data into HTML Two-way binding combines bothfeature from event binding and property binding.

4.1 ANGULAR CHAPTER 4 TECHNOLOGY

4.1.2Project File Structure

Figure 4.2: File Structure

Figure 6 contains the file structure of the initial Angular project Hereare some noteworthy parts First is e2e folder is for end-to-end test files Next

is node modules provides npm packages to the entire workspace which are alsoconfigured inside package.json file The base TypeScript configuration for projectis in file tsconfig.json.

Then move to the important part of Angular is the src folder contain sourcefile for the root-level application project; inside is app folder contains the compo-nent files in which application logic and data are defined, you can add more compo-nent depend on your project: app/app.component.ts defines the logic for the app’sroot component, named AppComponent, app/app.component.html defines theHTML template associated with the root AppComponent, app/app.module.tsdefines the root module, named AppModule Also inside src folder is assetsfolder which contains image and other asset files and environments which containsbuild configuration for particular target environments.

Figure 4.3: Bootstrap Logo

Bootstrap is the world’s most popular framework for building responsivewebsite [5] include HTML and CSS based design templates for forms, buttons, ta-

4.3 AMAZON COGNITO CHAPTER 4 TECHNOLOGY

bles, navigation, dropdown menu Bootstrap’s responsive CSS adjusts to phone,tablets, and desktop and is compatible with all modern browsers (Chrome, Firefox,Safari )

Bootstrap provides a wide range of plugin selections with a modern designand friendly interface make sure the website as most cohesive as possible All thecomponents is fully customizable to fit developer’s need With the great layoutdesign and powerful grid system, this really helps to optimize the amount of CSScode Bootstrap’s grid system uses a series of containers, rows, and columns tolayout and align content, there are 12 template columns available per row.

Amazon Cognito is an Amazon Web Services products that provides thentication, authorization, and user management for your web and mobile apps.Your users can sign in directly with a user name and password, or through a thirdparty such as Facebook, Amazon, Google or Apple.

au-The two main components of Amazon Cognito are user pools and identitypools User pools are user directories that provide sign-up and sign-in options foryour app users Identity pools enable you to grant your users access to other AWSservices You can use identity pools and user pools separately or together[6].

The diagram describe a scenario to authenticate user:

Figure 4.4: Amazon Cognito Diagram

• In the first step user signs in through a user pool and receives user pooltokens after a successful authentication.

• Next, the application exchanges the user pool tokens for AWS credentialsthrough an identity pool.

• Finally, user uses that credentials to access other function in the application.

Amazon DynamoDB is a fully managed NoSQL database service that vides fast and predictable performance with seamless scalability In DynamoDB,tables, items, and attributes are the core components that developer work with.A table is a collection of items, and each item is a collection of attributes.

pro-4.4 AMAZON DYNAMODB CHAPTER 4 TECHNOLOGY

Here is an example of a table named People with some items and attributes:

Figure 4.5: Amazon DynamoDB Example

• Tables: Similar to other database systems, DynamoDB stores data in tables.A table is a collection of data For example, see the example table calledPeople that you could use to store personal contact information

• Items: Each table contains zero or more items An item is a group ofattributes that is uniquely identifiable among all of the other items In aPeople table, each item represents a person.

• Attributes: Each item is composed of one or more attributes An attributeis a fundamental data element, something that does not need to be brokendown any further For example, an item in a People table contains attributescalled PersonID, LastName , FirstName, and so on.

The AWS Amplify Console is the control center for fullstack web and mobileapplication deployments in AWS Amplify Console provides two main services,hosting and the Admin UI Amplify Console hosting provides a git-based workflowfor hosting fullstack serverless web apps with continuous deployment The AdminUI is a visual interface for frontend web and mobile developers to create andmanage app backends outside the AWS Management Console [7]

A fullstack serverless web app consists of a backend built with cloud sources such as GraphQL and data storage, and a frontend framework such asAngular, React, Vue

With a basic concept of GraphQL which is presented in above chapter.AWS Amplify has added some additional features.

4.5 AWS AMPLIFY CHAPTER 4 TECHNOLOGY

4.5.1.1 Define a model type

Object types that are annotated with @model are top-level entities in thegenerated API Objects annotated with @model are stored in Amazon DynamoDB.In the example, data of object Post will be stored in database.

1 type Post @model {

2 id: ID! # id: ID! is a required attribute.

1 type Todo @model

2 @auth(rules: [{ allow: owner }]) {

Other example:

1 type Todo @model

2 @auth(rules: [{ allow: owner, operations: [create, delete, update]}]) {

Chapter 5Design

There are four main actors in the application:

• Patient actor represents for user whose purpose to use website to discover anew doctor and a application has several features to support that.

• Doctor actor can be doctor themselves or the staff who currently managesthe account This actor manages the status of upcoming appointment.• Admin or administrator actor is the one who responsible for the web function

normally They have to check the authenticity for website therefore they havethe right to verify also prohibit some accounts.

• Visitor actor is an unregistered user They are still able to enjoy somefeatures in website such as searching for doctor and view doctor’s publicinformation.

Figure 5.1: Use-case Diagram

5.1.1Register

5.1 USE-CASE CHAPTER 5 DESIGN

Use case name: Register

Description: User can create an account to use some features only exclusivefor registered user.

Preconditions: User are in register page.

Normal Flow: 1 User clicks on Sign Up button on header.2 Website directs to sign up page.

3 User picks a role they want to register as.4 User clicks a confirm button.

5 Website displays a register form.6 User inputs email and password.7 User clicks Register to submit.

8 Website sends a form contains user’s input to server if emailinput is valid.

9 User registers successfully if server responds so.10 Server sends verification link to user’s email.11 Website redirects user back to homepage.