Problem Statement
Medical care is one of the most essential aspect in life cause it definitely affect everyone’s health in any shape or form And that’s itself in fact need an extra public attention The majority of people in Vietnam access medical care by the traditional way is public hospital due to its popularity and technology it holds And for that reason, the number of patients each doctor has to treat daily is massive and can not exceed time limited allowed per patient Therefore, the demand for new treatment is rising, patient wants to establish a long term relationship with their close doctor who is going to understand deeply their medical condition which will beneficial for the future diagnosis and prevention of dangerous diseases The patient still takes the blood test, urine test, supersonic, at the hospital but they take that result to their close doctor for the diagnosis and receive medicine bill from them as well.
The majority of patients find doctors through the suggestion of their ac- 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 have any connection with the doctor, it is very difficult for them to find a qualified doctor 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 are trustworthy or not?
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
In order to fulfill the objectives of the above section and answer the problems addressed in the problem statement section, I propose to create a website with a friendly user interface for everyone can easily access on any device, browser from everywhere With an authenticate system to guarantee every piece of information in the website is legit.
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 domestic, the majority of website which shows doctor’s information be- long to the particular hospitals And the only way to book the appointment is through the hospital, and the process is very much similar with conventional way with no improvement Take the websitewww.fvhospital.com from FV hospital located at Ho Chi Minh City as example The website still provides the large amount of information but the doctors solely works for that hospital, therefore the patient can only book with the hospital rather than booking directly from the doctor.
Figure 2.1: Homepage of fvhospital.com
Next, the third-party website www.khambacsi.com which does not re- strict with any organization, they showcase the diverse doctors from every city in the country The limitation of this website is there is no review system for patients to consider beside the doctor’s background User need to know the experiences of previous customers to make a final decision.
Figure 2.2: Homepage of khambacsi.com
Front-end
HTML
HTML stands for HyperText Markup Language It is the language that web browsers read to build a web page It acts as a ‘blueprint’ to display data on a user’s screen This is the basic building block of the web Every page on theInternet is just HTML at its core.
CSS
CSS stands for Cascading Style Sheets which allowed developers to put some color and style into website to make it more pleasing The simplest way to understand web operation is this analogy of a web page as a house, every house need to have structure and frame, that is HTML in web page and we can not just house with structure along, we need to some decoration into a house therefor CSS is a crucial part of web development.
TypeScript
TypeScript which is a modern age JavaScript development language JavaScript is a scripting language which helps to create a interactive web pages and its runs in user’s web browser whereas TypeScript is a superset of JavaScript In order to run on browser, TypeScript needs to compile to JavaScript file The big difference of TypeScript compare with JavaScript is TypeScript requires type declaration whereas JavaScript has no such concept.
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 stands for Structured Query Language SQL is used to communicate with a database According to ANSI (American National Standards Institute), it is the standard language for relational database management systems SQL statements are used to perform tasks such as update data on a database, or retrieve data from a database The standard SQL commands such as ”Select”, ”Insert”,
”Update”, ”Delete”, ”Create”, and ”Drop” can be used to accomplish almost everything that one needs to do with a database.
• Document databases: store data in documents similar to JSON objects. Each document contains pairs of fields and values The values can typically be a variety of types including things like strings, numbers, booleans, arrays, or objects, and their structures typically align with objects developers are working 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 use cases and can be used as a general purpose database They can horizontally scale-out to accomodate large data volumes[2].
• Key-value databases are simpler type of database where each item con- tains keys and values A value can typically only be retrieved by referencing its key, so learning how to query for a specific key-value pair is typically simple Key-value databases are great for use cases where you need to store large amounts of data but you don’t need to perform complex queries to retrieve it Common use cases include storing user preferences or caching[2].
GraphQL
GraphQL is a query language for APIs and a runtime for fulfilling those queries with existing data GraphQL provides a complete and understandable description of the data in API, give clients the power to ask for exactly what they need and nothing more make it easier to evolve API over time, and enables powerful developer tools [3].
The fundamental of GraphQL is the way to ask for specifice fields on objects. Here is one example:
Notice how the query has exactly the same shape as the result This is essential to GraphQL, because user always get back what they expect, and their server knows exactly what fields the client is asking for The fields name return 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 a system like REST, you can only pass a single set of arguments - the query parameters and URL segments in your request But in GraphQL, every field and nested object can get its own set of arguments, making GraphQL a complete replacement for making multiple API fetches You can even pass arguments into scalar fields, to implement data transformations once on the server, instead of on every client separately.
The most basic components of a GraphQL schema are object types, which just represent a kind of object you can fetch from your service, and what fields it has In the GraphQL schema language, we might represent it like this:
• Characteris 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 that name and appearsIn are the only fields that can appear in any part of a GraphQL query that operates on 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 an application design framework and development platform for creating efficient and sophisticated single-page apps [4] The framework was built by Google engineers Adam Abrons and Misko Hevery With Angular’s feature,developers can separate coding in small building blocks that act as modules (Ng-Modules) into a more organized structure Every Angular app has a root module which provides the bootstrap mechanism that launches the application and at least one components, called the root component that connects a component hierarchy with the page document object model (DOM) [4] Each component defines a class that contains application data and logic The mechanism help the developer to reduce repetitive code and reuse similar component in multiple page.
The feature for data binding keeps the page so easily to update based on the application’s state without developers have to write getters/setters for each data models Event binding lets the app respond to user input in the target environment by updating application data And property binding interpolate values that are computed from the application data into HTML Two-way binding combines both feature from event binding and property binding.
Project File Structure
Figure 6 contains the file structure of the initial Angular project Here are 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 also configured insidepackage.json file The base TypeScript configuration for project is in filetsconfig.json.
Then move to the important part of Angular is thesrcfolder contain source file for the root-level application project; inside isapp 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’s root component, named AppComponent, app/app.component.html defines theHTML template associated with the root AppComponent, app/app.module.ts defines the root module, named AppModule Also inside src folder is assets folder which contains image and other asset files andenvironments which contains build configuration for particular 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 provides a wide range of plugin selections with a modern design and friendly interface make sure the website as most cohesive as possible All the components is fully customizable to fit developer’s need With the great layout design and powerful grid system, this really helps to optimize the amount of CSS code Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content, there are 12 template columns available per row.
Amazon Cognito is an Amazon Web Services products that provides au- 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 third party such as Facebook, Amazon, Google or Apple.
The two main components of Amazon Cognito are user pools and identity pools User pools are user directories that provide sign-up and sign-in options for your app users Identity pools enable you to grant your users access to other AWS services You can use identity pools and user pools separately or together[6].
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 that pro- 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.
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
• Items: Each table contains zero or more items An item is a group of attributes that is uniquely identifiable among all of the other items In a People table, each item represents a person.
• Attributes: Each item is composed of one or more attributes Anattribute is a fundamental data element, something that does not need to be broken down any further For example, an item in aPeopletable contains attributes called PersonID, LastName , FirstName, and so on.
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 owner of the object has the authorization to perform read, update, and delete operations on the owner created object This prevents the object from being updated or deleted by users other than the creator of the object.
2 @auth(rules: [{ allow: owner, operations: [create, delete, update]
5 "id" : $util.dynamodb.toDynamoDBJson($ctx.args.id)
In this schema, only the owner of the object has the authorization to perform update and delete operations on the owner created object, but anyone can read them This prevents the object from being updated or deleted by users other than the creator of the object while allowing all authenticated users of the app to read them.
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.
• Notice that patient does not have ability to create their new profile Be- cause after user is verified through email, server will add user’s email to the database with unique ID And that ID will be attacked to patient the entire time when they access website Next time user signs in, he/she just updates the rest of 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)
This component appears at top of website with the role is to help user navigate between each page With the website’s logo appear at left corner, follow with some most used directory to navigate more convenient At right corner is a login button which will direct user to login page.
After login successfully, the login button will be replaced by a different button with user’s avatar on it This button is a toggle for a drop-down menu contains link to access user’s information and log out function The menu will be diverse base on user’s role.
Figure 5.3: Navigation bar for registered user
Search component
Search component is where user can input text and receive a list of doctors. Two input fields, one is searching base on location and one is for search by symp- toms or condition of disease If user only input in location, the result will return a list of doctors are in that place If user only input on symptoms fields, result will be a list of doctor whose specialty relevant with that symptom but doctor’s location will be all over the country The magnifying glass button is to send an input to server to receive result
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
Doctor-card component display all public’s information of doctor If user clicks on doctor’s name and avatar, website will direct to doctor profile’s page.ButtonBOOK APPOINTMENTwill link to the booking page but before that,application will check whether user is a registered patient or not Other buttonVIEW LOCATION will display the direction from user’s current position to doctor’s address.
Review Component
Review component contains all reviews from patients to one doctor, if there is no review, this part will be empty, and review form for patient to write their experience To submit, click Add Review, TypeScript will check the content of review, check login user then submit to server.
Booking Component
Booking component content a calendar of doctor’s schedule On vertical axis, the component display working time from opening time to closing time On horizontal axis will be working day in a week A blue rectangle will be a upcoming or pending appointment and other patient can not book cross this time Top left of the component will display the beginning of the week to ending Top right will be a navigation through 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:
Status Meaning pending The appointment had booked successfully and is waiting for doctor to verify that. confirm The doctor has accepted this appointment. cancelled The doctor has declined this appointment. finish The patient has finished appointment with doctor.
System Architecture
There are two main components which are client-side and server-side The client-side is built with front-end framework Angular and AWS Amplify for com- municating with server The server-side is built with AWS Cloud services Here are the services used in the architecture:
• API Gateway (HTTP Call Interface)
Authentication & Authorization
In this project, I use Amazon Cognito to manage user identities, authen- tication, and permissions Authentication is a process of identifying a user and authorization is a process of verifying what accesses that user is granted The diagram explains how Amazon Cognito works:
After login successfully, user will receive a JWT token contains AWS cre- dentials which is granted to user after logging in successfully Token is used to access other service in website.
Figure 6.2: JWT Token when login successfully
This is what JWT contains after decoding:
The attribute userType is the group that user belongs to There are 3 groups matching with three registered actor in use case design part: patient, doc- tor, admin This fields will be used to check what action this user is allowed 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
Register page consists of two components: 1 header component, 2 sign up form component If users have signed in successfully try to get in registered page, they will redirect back to 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
The result of this thesis is a working web application with a list of features proposed in the design chapter All features fully function to guarantee user have a great experience in the website The website has been deployed successfully and can access through any device’s browser Patient now has a place to find a suitable doctor without a fear of unauthenticated information Doctor can thrive with appointment come from everywhere Here is a screenshot of a deployed website:
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.