Problem Statement
Medical care is crucial for everyone's health and deserves greater public attention In Vietnam, most people rely on public hospitals for medical services due to their popularity and technological advancements However, the high patient volume limits the time each doctor can spend with individual patients As a result, there is a growing demand for new treatment approaches, with patients seeking to build long-term relationships with their doctors to ensure a deeper understanding of their medical conditions While patients still undergo tests like blood and urine analyses at hospitals, they prefer to consult their personal doctors for diagnoses and prescriptions.
Many patients rely on recommendations from friends or acquaintances who have previously visited a doctor, making personal referrals a primary method for finding healthcare providers However, when patients lack connections to a particular doctor, it becomes challenging to identify qualified practitioners due to limited online resources and concerns regarding the authenticity and trustworthiness of the information available.
Research Objective
• Patient needs a trustworthy resource with various options for them to choose the most suitable doctor for their need.
• Doctor can to expand their network to the potential customer and manage appointments with patient.
Proposed Solution
To achieve the goals outlined in the previous section and address the issues identified in the problem statement, I propose developing a user-friendly website that ensures easy access across all devices and browsers This site will feature an authentication system to verify the legitimacy of all information presented, enhancing user trust and experience.
Thesis Structure
The next parts of this thesis are composed of six chapters as follow: Chapter two provide some related projects with their pros and cos
Chapter three introduce some background knowledge.
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 is formed.
Chapter seven gives an overview about the result and discuss some future improvements.
In Vietnam, most websites featuring doctor information are affiliated with specific hospitals, limiting appointment bookings to these institutions For instance, FV Hospital's website (www.fvhospital.com) in Ho Chi Minh City offers extensive information, yet patients can only schedule appointments through the hospital rather than directly with individual doctors, reflecting a lack of innovation in the booking process.
Figure 2.1: Homepage of fvhospital.com
The third-party website www.khambacsi.com features a wide range of doctors from various cities across the country, offering users diverse options However, it lacks a review system, which means patients cannot access feedback from previous customers to inform their decisions Understanding the experiences of others is crucial for users when selecting a doctor.
Figure 2.2: Homepage of khambacsi.com
Front-end
HTML
HTML, or HyperText Markup Language, is the foundational language that web browsers utilize to construct web pages, serving as a blueprint for displaying data on users' screens As the essential building block of the web, every page on the Internet fundamentally consists of HTML.
CSS
CSS, or Cascading Style Sheets, is essential for enhancing the aesthetic appeal of websites by adding color and style To visualize web operation, think of a web page as a house: HTML serves as the structure and frame, while CSS provides the necessary decoration Thus, CSS plays a vital role in web development, ensuring that websites are not only functional but also visually appealing.
TypeScript
TypeScript is a modern programming language that serves as a superset of JavaScript, enhancing its capabilities for developing interactive web pages Unlike JavaScript, which runs directly in the user's web browser, TypeScript must be compiled into JavaScript to execute A key distinction between the two languages is that TypeScript requires type declarations, providing greater type safety and reducing errors during development, while JavaScript does not incorporate this feature.
Back-end
NoSQL
NoSQL databases are databases that store data in a format other than relational 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 changing requirements because of its flexibility.
SQL, or Structured Query Language, is the standard language for relational database management systems, as defined by the American National Standards Institute (ANSI) It serves as a communication tool with databases, enabling users to execute tasks such as updating and retrieving data Key SQL commands include "Select" and "Insert," which facilitate data manipulation and retrieval.
”Update”, ”Delete”, ”Create”, and ”Drop” can be used to accomplish almost everything that one needs to do with a database.
Document databases are designed to store data in document formats similar to JSON objects, featuring pairs of fields and values These values can encompass various types, including strings, numbers, booleans, arrays, or objects, mirroring the structures developers utilize in coding Due to their diverse field value types and robust query languages, document databases are versatile and suitable for numerous applications, functioning effectively as general-purpose databases Additionally, they offer horizontal scalability to manage large volumes of data efficiently.
Key-value databases are a straightforward type of database that store data in pairs of keys and values, allowing for easy retrieval of values through their corresponding keys These databases excel in scenarios where large volumes of data need to be stored without the requirement for complex query operations They are commonly used for applications such as managing user preferences and caching data efficiently.
GraphQL
GraphQL is an API query language and runtime that allows clients to request precisely the data they need, enhancing efficiency and flexibility By offering a clear and comprehensive description of the API's data, GraphQL simplifies the evolution of APIs over time and supports advanced developer tools.
The fundamental of GraphQL is the way to ask for specifice fields on objects. Here is one example:
In GraphQL, the structure of the query mirrors that of the response, ensuring that users receive exactly what they expect This design allows the server to clearly understand the specific fields requested by the client, with all field names returning a String type.
GraphQL supports the ability to pass arguments to fields make it becomes more useful for data fetching In the example, we pass the argumentidwith value
1000 and the query result will return all objects which match with that id
3.2 BACK-END CHAPTER 3 THEORETICAL KNOWLEDGE
In contrast to REST, which limits you to a single set of arguments through query parameters and URL segments, GraphQL allows each field and nested object to have its own unique set of arguments This capability makes GraphQL an effective alternative to performing multiple API fetches Additionally, GraphQL enables the passing of arguments into scalar fields, allowing for server-side data transformations rather than requiring each client to handle them individually.
A GraphQL schema's fundamental elements are object types, which define the types of objects that can be retrieved from your service along with their respective fields.
• Characteris a GraphQL Object Type, meaning it’s a type with some fields. Most of the types in schema will be object types.
The Character type in GraphQL includes two specific fields: name and appearsIn These fields are the only ones permitted in any GraphQL query related to the Character type.
• String is one of the built-in scalar types - these are types that resolve to a single scalar object, and can’t have sub-selections in the query.
• String! means that the fields is non-nullable, meaning that the GraphQL service promises to always give you a value when you query this field.
• [Episode!]! represents an array of Episode objects.
Angular
Angular Concepts
Angular is a powerful application design framework developed by Google for creating efficient single-page applications It allows developers to organize their code into small, reusable building blocks known as Ng-Modules Each Angular application has a root module that serves as the bootstrap mechanism to launch the app, along with at least one root component that connects to the document object model (DOM) Components in Angular define classes that encapsulate application data and logic, enabling developers to minimize repetitive code and reuse similar components across multiple pages.
Data binding simplifies page updates according to the application's state without the need for developers to write individual getters and setters for each data model Event binding enables the application to react to user inputs by modifying application data, while property binding allows for the interpolation of computed values from application data into HTML Additionally, two-way binding integrates the functionalities of both event binding and property binding, enhancing interactivity and data synchronization within the application.
Project File Structure
The initial Angular project file structure, as shown in Figure 6, includes several key components: the e2e folder, which contains end-to-end test files; the node_modules directory, which houses npm packages essential for the entire workspace and is configured in the package.json file; and the base TypeScript configuration, located in the tsconfig.json file.
The Angular framework organizes its project structure within the `src` folder, which houses essential source files for the application Inside this folder, the `app` directory contains component files where the application logic and data are defined, allowing for the addition of more components as needed Key files include `app/app.component.ts`, which outlines the logic for the root component, AppComponent; `app/app.component.html`, which provides the HTML template for AppComponent; and `app/app.module.ts`, which defines the root module, AppModule Additionally, the `src` folder contains an `assets` folder for images and other assets, as well as an `environments` folder that holds build configurations for various target environments.
Bootstrap
Bootstrap is the world’s most popular framework for building responsive website [5] include HTML and CSS based design templates for forms, buttons, ta-
Amazon Cognito
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 offers a diverse selection of modern plugins and a user-friendly interface, ensuring a cohesive website design All components are fully customizable to meet developers' needs Its robust layout design and efficient grid system significantly reduce CSS code The grid system consists of containers, rows, and columns, providing 12 template columns per row for effective content alignment and layout.
Amazon Cognito, a product of Amazon Web Services, offers robust authentication, authorization, and user management solutions for web and mobile applications It enables users to log in using a username and password or via third-party providers like Facebook, Amazon, Google, or Apple.
Amazon Cognito consists of two key components: user pools and identity pools User pools serve as user directories, offering sign-up and sign-in capabilities for application users In contrast, identity pools allow you to provide users with access to various AWS services Both user pools and identity pools can be utilized independently or in conjunction with each other.
The diagram describe a scenario to authenticate user:
• In the first step user signs in through a user pool and receives user pool tokens after a successful authentication.
• Next, the application exchanges the user pool tokens for AWS credentials through an identity pool.
• Finally, user uses that credentials to access other function in the application.
Amazon DynamoDB
Amazon DynamoDB is a fully managed NoSQL database service known for its fast and reliable performance, along with effortless scalability The primary elements that developers interact with in DynamoDB include tables, items, and attributes.
A table is a collection of items, and each item is a collection of attributes.
Here is an example of a table namedPeoplewith some items and attributes:
• 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
Each table can contain multiple items, with each item representing a unique group of attributes For instance, in a People table, each item corresponds to an individual person, ensuring distinct identification among all entries.
Each item consists of one or more fundamental attributes, which are essential data elements that cannot be subdivided further For instance, in a People table, attributes may include PersonID, LastName, FirstName, among others.
AWS Amplify
GraphQL
With a basic concept of GraphQL which is presented in above chapter.AWS Amplify has added some additional features.
Object types that are annotated with @model are top-level entities in the generated API Objects annotated with@modelare stored in Amazon DynamoDB.
In the example, data of object Post will be stored in database.
2 id: ID! # id: ID! is a required attribute.
@auth object types are annotated with @auth are protected by a set of authorization rules For example:
In this schema, only the object's creator has the authority to read, update, or delete it, ensuring that no other users can modify or remove the object.
2 @auth(rules: [{ allow: owner, operations: [create, delete, update]
5 "id" : $util.dynamodb.toDynamoDBJson($ctx.args.id)
In this schema, only the object's creator has the authority to update or delete their created object, while all authenticated users can read it This ensures that only the owner can modify or remove their object, safeguarding it from unauthorized changes while allowing access for reading to all users.
Use-case
Register
Description: User can create an account to use some features only exclusive for 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.
6 User inputs email and password.
7 User clicks Register to submit.
8 Website sends a form contains user’s input to server if email input 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.
Exception Flow: Exception 1 at step 5:
5a Website remains the same if user does not pick their role and display message.
9a Website remains the same if user inputs wrong format of email, or input field is missing or email has been used; and displays message to user.
Alternative Flow: Alternative 1 at step 6:
6a User can choose option sign up with Facebook account by clicking on Facebook logo.
7a User confirms to allow application access name, email.8a User successfully registers.
Login
Preconditions: User are in login page.
Normal Flow: 1 User clicks on Log In button on header.
2 Website directs to login page.
3 User types in their email and password.
4 User finishes by clicking Sign In button.
5 Website sends a form contains user’s input to server.
6 User signs in successfully when server returns the inputs are correct.
7 Website redirects back to homepage.
Exception Flow: Exception 1 at step 5:
5a Website remains the same if either one of the field is empty and display a message to user.
6b Website remains the same if server return result that pass- word is wrong or email does not exist, and display that message to user.
Alternative Flow: Alternative 1 at step 3:
3a User can choose option login with Facebook account by clicking on Facebook logo.
4a User logins successfully when they had registered to the website by this option before.
Verify Doctor
Use case name: Verify Doctor
Description: When doctor registered, their information need to be verified by admin in order to receive appointment.
Preconditions: User which was authorized as administrator has signed in.
Normal Flow: 1 User clicks on Manage User on navigation bar.
2 Website directs to a new page with a list of pending doctor.
3 User checks the accuracy of each doctor’s information.
4 User clicks on Accept button on the right side correspond- ing with each the doctor’s account to verify them.
5 Website remove that account from pending list.
6 Server changes verify status of that doctor and mail to inform his/her about the change.
Create Schedule
Use case name: Create Schedule
Preconditions: Doctor has signed in to website.
Description: When doctor is verified, he/she can upload his/her schedule on website so patient can book a reservation.
Normal Flow: 1 User navigates to schedule page.
2 User has three option to choose for each day in week: not working, work all day and work from open time to close time.
3 User fills seven day to fit their schedule, if any day is left empty will be automatically become not working.
4 User clicks button submit to confirm their choices.
5 Website sends schedule to server and server adds that to doctor’s data.
Update Schedule
Use case name: Update Schedule
Preconditions: Doctor has signed in to website.
Description: When doctor’s schedule is changed, they can update on the web- site.
Normal Flow: 1 User navigates to schedule page.
2 User has three option to choose for each day in week: not working, work all day and work from open time to close time.
3 User update the option in specific date he/she want to change.
4 User clicks button submit to confirm their choices.
5 Website sends new schedule to server and server updates that to doctor’s data.
Search Doctor
Use case name: Search Doctor
Actor: Registered user and visitor.
Preconditions: User are in homepage of website.
Normal Flow: 1 User can look for doctor base on location and expertise.
2 User selects province, district and sub-district to filter doc- tors by location or selects doctor’s expertise User can se- lect both location and expertise,
3 User clicks on magnify glass button to finish.
4 Website displays a list of result.
Alternative Flow: Alternative 1 at step 2:
2a User leaves both fields empty.
3a User clicks on magnify glass button to finish.
4a Website displays a list of ten most popular doctors in the website.
2b User clicks on Doctor option on the header of website.
3b Website displays a list of ten most popular doctors in the website.
View Doctor Profile
Use case name: View Doctor Profile
Actor: Registered user and visitor.
Description: Any user can view public information of doctor.
Preconditions: User are in searching page.
Normal Flow: 1 User browses through the list of doctors.
2 User clicks on profile of doctor he/she wants to see,
3 Website directs user to that doctor’s profile page.
Exception Flow: Exception 1 at step 1
1a Website displays empty list of doctors.
Alternative Flow: Alternative 1 at step 2:
1a User already has doctor’s profile page URL.
3a User pastes that URL to browser.
4a Website directs user to that doctor’s profile page.
Booking Appointment
Use case name: Booking Appointment
Preconditions: Patient has signed in to website.
Normal Flow: 1 User are in doctor’s profile page.
2 User clicks on Book Appointment button.
3 Website directs to booking page.
4 User select the date he/she want to have reservation.
5 User clicks submit to finish.
6 Website sends the date to server.
7 Server responds with the schedule of doctor in that date and website displays to user.
8 User picks a time of the session which is suitable for his/her.
9 User clicks submit to finish.
10 Website sends the request with time to server, server adds to database and sends notification to doctor about new appointment.
Exception Flow: Exception 1 at step 6
6a Website displays message to ask user to pick a date. Exception 2 at step 10
10b Website displays message to ask user to pick a session.
Alternative Flow: Alternative 1 at step 7:
7a Server responds doctor does not work or has full schedule in that day Therefore patient can not book an appointment.
Cancel Appointment
Use case name: Cancel Appointment
Preconditions: User has an upcoming appointment.
Normal Flow: 1 User navigates to their profile.
2 User chooses the appointment he/she want to cancel.
3 User clicks button Cancel corresponding with the appoint- ment he/she wants to change.
4 Website asks to make sure they to make a change.
5 User clicks yes to finish.
6 Website sends the request to server.
7 Server changes the status of that appointment and mail to both patient and doctor.
Exception Flow: Exception 1 at step 5
6a The appointment remains the same.
Manage Appointment
Use case name: Manage Appointment
Description: Doctor can change status of appointment by accept or decline it.
Preconditions: Doctor has signed in.
Normal Flow: 1 User navigates to their profile.
2 User browses through a list of upcoming appointments.
3 User clicks button Accept or Decline corresponding with the appointment he/she wants to accept or decline.
4 Website asks to make sure they to make a change.
5 User clicks yes to finish.
6 Website sends the request to server.
7 Server changes the status of that appointment and notifies to both patient and doctor.
Exception Flow: Exception 1 at step 5
6a The appointment remains the same.
Review Doctor
Use case name: Review Doctor
Description: Patient can write their feeling and evaluate their experience with the doctor Preconditions: Patient has signed in.
Normal Flow: 1 User are in doctor’s profile page.
2 User scrolls to review section.
3 User types in their feeling and rates based on their experi- ence.
4 User click on Submit button to finish.
5 Website sends the review to server.
6 Server adds that review to database.
Exception Flow: Exception 1 at step 5
5a Website displays message to ask user input both fields.
Forgot Password
Use case name: Forgot Password
Description: When user forgets his/her password, they can change to a new password.
Preconditions: Patient is in login page.
Normal Flow: 1 User clicks on the Forgot Password link at the end of login form.
2 Website directs user to forgot password page.
3 User types in their email which was used for registering.
4 User clicks button send to finish.
5 Website sends the email to server.
6 Server will send verification link to user if the email is existed.
7 User opens their mail and clicks on the link was sent by server.
8 Website displays a form for user enter his/her new pass- word.
9 User types in his/her new password.
10 User clicks on submit button to finish.
11 Website sends to server and server updates user’s password.
Exception Flow: Exception 1 at step 5
5a Website displays message to ask user inputs his/her email or inputs a correct format of email.
6b Server responds email does not exist, website remains the same.
11c Website displays message to ask user input his/her new password.
Update Information
Use case name: Update Information
Description: User can update his/her information to up-to-date with his/her life.
Preconditions: User has signed in.
Normal Flow: 1 User navigates to his/her profile page.
2 User clicks on Update Info on the side menu.
3 Website displays a form contains changeable attributes.
4 User types in a fields he/she want to make a change.
5 User clicks Update to finish.
6 Website sends new information to server, server updates user’s data.
Exception Flow: Exception 1 at step 6
6a Website remains the same, if user does not type in any fields
Change Password
Use case name: Change Password
Description: User can change his/her password to ensure their security
Preconditions: User has signed in.
Normal Flow: 1 User navigates to his/her profile page.
2 User clicks on Change Password on the side menu.
3 Website displays a change password form.
4 User types in their old password and new password.
5 User clicks Change to finish.
6 Website sends the new and old password to server, if the old password is matching with the one in database, password will be updated.
Exception Flow: Exception 1 at step 6
6a Website remains the same and displays message, if any field is left empty.
6b Server responds the old password is incorrect, website dis- plays message to user
GraphQL Schema
Patient
3 {allow: owner, operations: [read, update]},
15 bookings: [Booking]@connect(name: PatientBooking)
This is a schema for patient which is used to store and query patient’s information:
• The first authentication rule states that only the owner of the account is able to read and update his/her information.
• The second authentication rule represent the ability of administrator Admin have full right to create, update, read and update patient’s information.
Patients are unable to create their own profiles, as the server automatically adds their email to the database with a unique ID upon email verification This unique ID remains associated with the patient throughout their website access During subsequent sign-ins, users only need to update their other attributes.
• One patient can have many appointment and one doctor can have many patients Therefore, relationship between patient and doctor is N:M rela- tionship.
Doctor
25 booking: [Booking]@connection(name: DoctorBooking)
Doctor’s schema structure consist of:
• The first two authentication rule of doctor schema is the same with patient. The owner of account can update profile and admin have full right with account.
• Different with patient, doctor’s profile is public to everyone accesses to web- site Every user can receive the doctor’s information by filtering desire at- tributes.
• Doctor can update every attribute in his/her except verify attribute This can only be updated by admin.
• The relationship between doctor and schedule is 1:1 relationship.
Schedule
Schedule’s schema is to save doctor’s schedule in a week Schedule can only be updated by doctor and admin Every user can access to doctor’s schedule.
Booking
8 patient: Patient @connection(name: PatientBooking)
9 doctor: Doctor @connection(name: DoctorBookng)
Booking stores appointment between doctor and patients:
• Patient and doctor connect with each other with appointment and two user can update the status of the appointment.
• Admin has full right to edit appointment,
• Only registered user can read doctor’s upcoming appointment.
• Only patient can write edit and the attribute value and review.
UI Design
Navigation bar component(Header)
The website's header features a navigation component designed to enhance user experience by facilitating easy access to different pages It includes the website's logo in the top left corner, followed by a selection of frequently used directories for convenient navigation Additionally, a login button is located in the top right corner, directing users to the login page.
Upon successful login, the login button transforms into a new button featuring the user's avatar This button serves as a toggle for a drop-down menu, providing access to user information and a logout option The menu's contents will vary according to the user's role.
Figure 5.3: Navigation bar for registered user
Search component
The search component allows users to input text to find a list of doctors It features two input fields: one for searching by location and another for searching by symptoms or medical conditions If a user enters only a location, the results will display doctors based in that area Conversely, if only symptoms are entered, the results will include doctors specializing in those symptoms from across the country Users can submit their input by clicking the magnifying glass button, which sends the request to the server to retrieve the relevant results.
Login form component
Login form contains email and password input, or user can have options sign in with some social media account.
User needs to input both fields in order to login else website will display alert message.
Figure 5.6: Login form alert message
If email or password are incorrect, website will ask user to input again.
Figure 5.7: Login form alert wrong password
Sign up form component
Sign up form is where user registers account to have access to more features in website First, user needs to pick role he/she wants to sign up as.
Figure 5.8: Picking role for signing up
Because this step is crucial, user is obligated to effectuate.
Figure 5.9: Alert message for picking role
After picking role, user is asked to input email and password to continue. User also has option to sign up with social media account.
User clicks Sign up button to finish, if the email has existed, website will display message.
Figure 5.11: Alert message for using existed email for signing up
If sign up successfully, user will receive a verification link in his/her mail.
User info component
The first time log in for new user, they will be asked to input their infor- mation base on their role First for patient:
Figure 5.13: Adding information for patient
For doctor, they need to input extra fields
Figure 5.14: Adding information for doctor
Doctor-card Component
The doctor-card component showcases essential public information about each doctor When a user clicks on the doctor's name or avatar, they will be redirected to the doctor's profile page The "Book Appointment" button links to the booking page, but the application first verifies if the user is a registered patient Additionally, the "View Location" button provides directions from the user's current location to the doctor's address.
Review Component
The review component showcases all patient reviews for a specific doctor If there are no reviews available, this section will remain empty Patients can share their experiences by filling out a review form, which they can submit by clicking "Add Review." The system, built with TypeScript, will validate the review content and ensure the user is logged in before submitting it to the server.
Booking Component
The booking component features a calendar that outlines a doctor's schedule, displaying working hours on the vertical axis and the days of the week on the horizontal axis Upcoming or pending appointments are indicated by blue rectangles, preventing other patients from booking during those times The top left corner of the component shows the start and end dates of the week, while the top right corner provides navigation options to view each week.
In order to book a schedule, patient selects a date and drag to desire time range Then there will a pop up with appointment information shows up Click
5.3 UI DESIGN CHAPTER 5 DESIGN confirm to finish the process.
Figure 5.18: Booking Component with pop up
User Dashboard Component
User dashboard component contents user avatar and some feature for user can manage their account.
Patient Appointment Component
Patient appointment component contains a list of appointment of patient with doctor name, appointment date, status of appointment and a cancel button.
If patient wants to cancel an appointment, clicks on cancel with corresponding date and it will be removed from the list.
Here are the meaning of status appointment:
The appointment status can be categorized as follows: "pending" indicates that the appointment has been successfully booked and is awaiting verification from the doctor; "confirm" signifies that the doctor has accepted the appointment; "cancelled" means the doctor has declined the appointment; and "finish" denotes that the patient has completed their appointment with the doctor.
System Architecture
The architecture consists of two primary components: client-side and server-side The client-side utilizes the front-end framework Angular and AWS Amplify for seamless communication with the server, while the server-side is powered by AWS Cloud services, incorporating various essential services.
• API Gateway (HTTP Call Interface)
Authentication & Authorization
In this project, Amazon Cognito is utilized for managing user identities, authentication, and permissions Authentication involves identifying users, while authorization verifies the access rights granted to them The accompanying diagram illustrates the functionality of Amazon Cognito.
Upon successful login, the user receives a JWT token that includes AWS credentials, granting access to various services on the website This token is essential for navigating and utilizing the site's features.
Figure 6.2: JWT Token when login successfully
This is what JWT contains after decoding:
The userType attribute identifies the group to which a user belongs, categorizing them into one of three roles: patient, doctor, or admin These roles correspond to the registered actors in the use case design and will determine the actions that each user is permitted to perform.
Routing
Homepage
Homepage consists of two components: 1 header component, 2 search component.
Login
Login page consists of two components: 1 header component, 2 login form component If users have signed in successfully try to get in login page, they will redirect back to homepage.
Register
The register page is made up of two main components: the header component and the sign-up form component If users attempt to access the register page after successfully signing in, they will be redirected to the homepage.
Search
Search page consists of two components:
2 List of doctor-card component.
Doctor’s profile page
Doctor’s profile page consists of three components:
Booking
Booking page is only for patient, therefore website will check JWT token from user before entering, Booking page consists of three components:
User Information
User information is for registered user to update their information when first time log in User information page consists of two components:
Manage User
Manage user page is only for admin group, other groups is allowed to access this page Manage user page have two components: 1 header component 2. manage user component.
Testing
I have run the total 21 test cases to make sure every use-case feature func- tions according to its job Here are the test case description:
ID Test case de- scription
TC-RE-001 Register with email which hasn’t been used to register before
User clicks on Sign Up button on header.
User picks a role they want to register as.
User inputs email and pass- word.
User clicks Register to submit.
Server sends verification link to user’s email.
User clicks on the link.
TC-RE-002 Register with email which has been used before
User clicks on Sign Up button on header.
User picks a role they want to register as.
User inputs email and pass- word.
User clicks Register to submit.
TC-RE-003 Register with a new Facebook account
User clicks on Sign Up button on header.
User picks a role they want to register as.
User clicks on Facebook logo.
User allows website to user his/her information.
TC-RE-004 Register with a used Facebook account
User clicks on Sign Up button on header.
User picks a role they want to register as.
User clicks on Facebook logo.
TC-LO-001 Login with regis- tered account
User clicks on Log In button on header.
User types in their email and password.
User finishes by clicking Sign
TC-LO-002 Login with unregistered ac- count or wrong password
User clicks on Log In button on header.
User types in their email and password.
User finishes by clicking Sign
TC-LO-003 Login with reg- istered Facebook account
User clicks on Log In button on header.
User clicks on Facebook logo.
TC-LO-004 Login with un- registered Face- book account
User clicks on Log In button on header.
User clicks on Facebook logo.
TC-VD-001 Admin signs in and verify doc- tor’s account
User clicks on Manage User on navigation bar.
User clicks on Accept button on the right side corresponding with each the doctor’s account.
User’s status will be changed
Create and update schedule use case
TC-CS-001 Doctor user cre- ate and update his/her schedule on the website
User navigates to schedule page.
User sets time for each day.
The schedule will be updated
TC-SD-001 Patient searches for doctor based on location and expertise
User picks either location or expertise or both.
User clicks magnify button to submit.
TC-BA-001 Patient books an appointment on available day
User are in doctor’s profile page.
User clicks on Book Appoint- ment button.
User select the date he/she want to have reservation.
User picks a time of the session which is suitable for his/her.
User clicks submit to finish.
TC-BA-002 Patient books an appointment on unavailable day
User are in doctor’s profile page.
User clicks on Book Appoint- ment button.
User select the date he/she want to have reservation.
Website displays doctor does not work on that day
TC-BA-003 Patient picks time which has been booked
User are in doctor’s profile page.
User clicks on Book Appoint- ment button.
User select the date he/she want to have reservation.
User picks a time which has been booked.
No confir- mation pop up appears
TC-CA-001 User cancels ap- pointment that he/she no longer want to attend
User navigates to their profile.
User chooses the appointment he/she want to cancel.
User clicks button Cancel cor- responding with the appoint- ment.
User clicks yes to finish.
The appoint- ment will be cancelled
TC-FP-001 User forgot pass- word and uses email to backup
User clicks on the Forgot Pass- word link at the end of login form.
User types in their email which was used for registering.
User opens their mail and clicks on the link was sent by server.
User types in his/her new pass- word.
TC-FP-002 User forgot pass- word but does not remember email’s password
User clicks on the Forgot Pass- word link at the end of login form.
User types in their email which was used for registering.
User does not click on verifica- tion link.
TC-FP-003 User sends mul- tiple forget pass- word request
Server sends multiple verifica- tion link to user’s email ac- count.
User clicks at the link in the first received email.
TC-FP-004 User sends mul- tiple forget pass- word request
Server sends multiple verifica- tion link to user’s email ac- count.
User clicks at the link in the last received email.
User types in his/her new pass- word.
TC-CP-001 User wants to change password and his/her old password is valid
User clicks on Change Pass- word on the side menu.
User types in their old pass- word and new password.
TC-CP-002 User wants to change password and his/her old password is in- valid
User clicks on Change Pass- word on the side menu.
User types in their old pass- word and new password.
Website displays old password is wrong.
Result
This thesis culminates in a fully functional web application that incorporates all the features outlined in the design chapter, ensuring an exceptional user experience The website is successfully deployed and accessible via any device's browser, providing patients with a reliable platform to find qualified doctors without concerns about unverified information Additionally, doctors benefit from receiving appointments from various sources.
Evaluation
Drawback
The work still has some drawbacks need to be improved:
• User interface can be beneficial with a more modern and sleek design.
• Lack of the communication between patient and doctor in website.
Future Work
In order to resolve above drawbacks, I suggest some works:
• Improving an UI-UX design to attract more user.
• Building a chat function for patient and doctor can easily communicate with each other within website with GraphQL subscribe feature.
• Building a mobile app available in the two most popular operation system (Android, iOS) for user can easily access.
• Improving a searching doctor algorithm to increase the satisfaction from patients.