Design and build a website for medical doctor office management

VIETNAM NATIONAL UNIVERSITY HO CHI MINH CITY UNIVERSITY OF TECHNOLOGY FACULTY OF COMPUTER SCIENCE AND ENGINEERING GRADUATION THESIS Design and build a website for Medical Doctor Office Management Council: Instructor: Reviewer: Student: CLC Computer Science Prof Nguyen Duc Thai Prof Nguyen Le Duy Lai Nguyen Quang Truong - 1713753 HO CHI MINH CITY, October 2021 ĐẠI HỌC QUỐC GIA TP.HCM -TRNG I HC BỗCH KHOA KHOA: KH & KT M‡y t’nh _ BỘ MïN: HT & MMT _ CỘNG HđA XÌ HỘI CHỦ NGHĨA VIỆT NAM Độc lập - Tự - Hnh phc NHIM V LUN ỗN TT NGHIP Ch ý: Sinh vi•n phải d‡n tờ nˆy vˆo trang thuyết tr“nh HỌ VË TæN: Nguyễn Quang Trường NGËNH: Computer Science MSSV: 1713753 LỚP: Đầu đề luận ‡n: Design and Build A Website for Medical Doctor Office Management Nhiệm vụ (y•u cầu 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 Ngˆy giao nhiệm vụ luận ‡n: 01/03/2021 Ngˆy hoˆn thˆnh nhiệm vụ: 01/08/2021 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 đ‹ 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 (Ký vˆ ghi r› họ t•n) (Ký vˆ ghi r› họ t•n) 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: _ Nguyn c Thi TRNG I HC BỗCH KHOA KHOA KH & KT MỗY TờNH CNG HủA Xè HI CH NGHĨA VIỆT NAM Độc lập - Tự - Hạnh phœc -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) Họ vˆ t•n SV: Nguyễn Quang Trường MSSV: 1713753 Ngˆnh (chuy•n ngˆnh): Computer Science Đề tˆi: Design and Build A Website for Medical Doctor Office Management Họ t•n người hướng dẫn: Nguyễn Đức Th‡i Tổng qu‡t thuyết minh: Số trang: Số chương: Số bảng số liệu Số h“nh vẽ: Số tˆi liệu tham khảo: Phần mềm t’nh to‡n: Hiện vật (sản phẩm) Tổng qu‡t c‡c vẽ: - Số vẽ: Bản A1: Bản A2: Khổ kh‡c: - Số vẽ vẽ tay Số vẽ tr•n m‡y t’nh: Những ưu điểm ch’nh LVTN: ¥! Website runs properly with most required featues Những thiếu s—t ch’nh LVTN: ¥! The final report contains many mistakes ¥! No software testing performed at all ¥! No SEO (Search Engine Optimization) presented at all ¥! Student did not follow the instructions of the supervisor ¥! Student did not submit the final report to the supervisor before presentation in the committee for content checking Đề nghị: Được bảo vệ R Bổ sung th•m để bảo vệ o c‰u hỏi SV phải trả lời trước Hội đồng: a Kh™ng bảo vệ o b c 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 VIETNAM Independence - Freedom – Happiness -09 Aug 2021 Thesis Review Report (For instructors/reviewers) Student's full name: NGUYEN QUANG TRUONG Student ID: 1713753 Major (specialty): Computer Science Subject: Design and building a website for Medical Doctor Office Management Full name of Supervisor/Reviewer: NGUYEN LE DUY LAI Overview of the Thesis: Page number: Chapter number: Number of data tables: Number of figures: Number of Reference: Computation software: Artifacts (products): Overview of drawings: - Number of drawings: Version A1: Version A2: Other size: - Number of hand-drawn drawings - Number of drawings on the computer: 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 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 sensitive information Recommend: Permit to defend  Permit to defend with condition  Not-allowed  Three questions student must answer in front of the Committee: a What you think about a stronger authentication method? Have you surveyed for different authentication mechanisms? b In term of Website implementation and exploration, what you think about the material requirements and hardware resource? c How you plan to get back the benefits from Website exploitation? 10 Overall assessment (in words: good, quite good, average): Score: 7.5/10 Sign and full name Declaration Of Authenticity I declare that this research is my own work, conducted under the supervision and guidance of Prof Nguyen Duc Thai The result of our research is legitimate and has not been published in any forms prior to this All materials used within this researched are collected myself by various sources and are appropriately listed in the references section In addition, within this research, I also used the results of several other authors and organizations They have all been aptly referenced In any case of plagiarism, I stand by my actions and will be responsible for it Ho Chi Minh city University of Technology therefore are not responsible for any copyright infringements conducted within our research Ho Chi Minh City, Oct 2021 Author Nguyen Quang Truong Acknowledgement I am using this opportunity to express my gratitude to everyone who supported me during my study and my life I am thankful for their aspiring guidance invaluably constructive criticism and friendly advice I offer my sincerest and deepest gratitude to my supervisor, Professor Nguyen Duc Thai, for his support and guidance throughout my thesis He was always ready to provide answers to my puzzling questions and guided my work to a swift end Finally, I recognize that this research would not have been possible without the support from my family and from bottom of my heart, I must acknowledge my parents without whose love, encouragement and sacrifice, I would not have finished this thesis Abstract Design and building a website for Medical Doctor Office Management by 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 communication between patient and doctor, and to describe the whole process of its development The thesis contains a description of application analysis with design, implementation and application testing Besides the description of the development process, the final output of the thesis is also working web application Contents Introduction 1.1 Problem Statement 1.2 Research Objective 10 1.3 Proposed Solution 10 1.4 Thesis Structure 10 Related Works 12 Theoretical Knowledge 15 3.1 3.2 Front-end 15 3.1.1 HTML 15 3.1.2 CSS 16 3.1.3 TypeScript 16 Back-end 16 3.2.1 NoSQL 16 CONTENTS 3.2.2 CONTENTS 3.2.1.1 What is SQL? 17 3.2.1.2 Types of NoSQL Databases 17 GraphQL 18 3.2.2.1 Fields 18 3.2.2.2 Arguments 18 3.2.2.3 Object types 19 Technology 4.1 21 Angular 21 4.1.1 Angular Concepts 21 4.1.2 Project File Structure 23 4.2 Bootstrap 24 4.3 Amazon Cognito 25 4.4 Amazon DynamoDB 26 4.5 AWS Amplify 28 4.5.1 GraphQL 28 4.5.1.1 Define a model type 29 4.5.1.2 Authorization rules 29 Design 5.1 31 Use-case 31 CONTENTS CONTENTS 5.1.1 Register 32 5.1.2 Login 34 5.1.3 Verify Doctor 36 5.1.4 Create Schedule 36 5.1.5 Update Schedule 37 5.1.6 Search Doctor 38 5.1.7 View Doctor Profile 39 5.1.8 Booking Appointment 40 5.1.9 Cancel Appointment 42 5.1.10 Manage Appointment 42 5.1.11 Review Doctor 43 5.1.12 Forgot Password 44 5.1.13 Update Information 46 5.1.14 Change Password 47 5.2 GraphQL Schema 48 5.2.1 Patient 48 5.2.2 Doctor 50 5.2.3 Schedule 51 5.2.4 Booking 52 6.2 ROUTING CHAPTER IMPLEMENTATION Figure 6.8: Register Page 6.2.4 Search Search page consists of two components: Header component List of doctor-card component 73 6.2 ROUTING CHAPTER IMPLEMENTATION Figure 6.9: Search Page 6.2.5 Doctor’s profile page Doctor’s profile page consists of three components: Header component Doctor-card-component Review component 74 6.2 ROUTING CHAPTER IMPLEMENTATION Figure 6.10: Doctor’s profile Page 6.2.6 Booking Booking page is only for patient, therefore website will check JWT token from user before entering, Booking page consists of three components: Header component Doctor-card-component Booking component 75 6.2 ROUTING CHAPTER IMPLEMENTATION Figure 6.11: Booking Page 6.2.7 User Information User information is for registered user to update their information when first time log in User information page consists of two components: Header component User info component 76 6.2 ROUTING CHAPTER IMPLEMENTATION Figure 6.12: User Information page 6.2.8 Manage User Manage user page is only for admin group, other groups is allowed to access this page Manage user page have two components: header component manage user component Figure 6.13: Manage User Page 77 6.3 TESTING 6.3 CHAPTER IMPLEMENTATION 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- Step scription Expected Result Pass result Register user case TC-RE-001 Register with email which hasn’t been User clicks on Sign Up button Register on header success- User picks a role they want to fully used to register register as before User inputs email and pass- Success Passed Fail Passed word User clicks Register to submit Server sends verification link to user’s email User clicks on the link TC-RE-002 Register with User clicks on Sign Up button Fail email which has on header register been used before User picks a role they want to register as User inputs email and password User clicks Register to submit Website displays message 78 to 6.3 TESTING TC-RE-003 CHAPTER IMPLEMENTATION Register with a User clicks on Sign Up button Register new on header success- User picks a role they want to fully Facebook account Success Passed Success Passed Success Passed Fail Passed Success Passed register as User clicks on Facebook logo User allows website to user his/her information TC-RE-004 Register with a User clicks on Sign Up button Login used on header success- User picks a role they want to fully Facebook account register as User clicks on Facebook logo Login use case TC-LO-001 Login with regis- User clicks on Log In button on Login tered account header success- User types in their email and fully password User finishes by clicking Sign In button TC-LO-002 Login with User clicks on Log In button on Login unregistered ac- header unsuc- count or wrong User types in their email and cessfully password password User finishes by clicking Sign In button TC-LO-003 Login with reg- User clicks on Log In button on Login istered Facebook header success- account User clicks on Facebook logo fully 79 6.3 TESTING TC-LO-004 CHAPTER IMPLEMENTATION Login with un- User clicks on Log In button on Login registered Face- header unsuc- book account User clicks on Facebook logo cessfully Admin signs in User clicks on Manage User on User’s and verify doc- navigation bar status tor’s account User clicks on Accept button will on the right side corresponding changed Fail Passed Success Passed Success Passed Success Passed Verify Doctor use case TC-VD-001 be with each the doctor’s account Create and update schedule use case TC-CS-001 Doctor user cre- User navigates to schedule The ate and update page schedule his/her schedule User sets time for each day will on the website User clicks submit button updated Patient searches User picks either location or List for doctor based expertise or both results on location and User clicks magnify button to expertise submit be Search doctor use case TC-SD-001 Booking appointment use case 80 of 6.3 TESTING TC-BA-001 CHAPTER IMPLEMENTATION Patient books an User are in doctor’s profile Booking appointment on page success- available day User clicks on Book Appoint- fully Success Passed Fail Passed Fail Passed 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 TC-BA-003 Patient books an User are in doctor’s profile Website appointment on page displays unavailable day User clicks on Book Appoint- doctor ment button does not User select the date he/she work on want to have reservation that day User are in doctor’s profile No time which has page confir- been booked User clicks on Book Appoint- mation ment button pop User select the date he/she appears Patient picks want to have reservation User picks a time which has been booked Cancel appointment use case 81 up 6.3 TESTING TC-CA-001 CHAPTER IMPLEMENTATION User cancels ap- User navigates to their profile The pointment that User chooses the appointment appoint- he/she no longer he/she want to cancel ment want to attend User clicks button Cancel cor- will responding with the appoint- cancelled Success Passed Passed be ment User clicks yes to finish Forgot password use case TC-FP-001 User forgot pass- User clicks on the Forgot Pass- Password Success word and uses word link at the end of login will email to backup form changed be 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 password TC-FP-002 User forgot pass- User clicks on the Forgot Pass- Password Fail word but does word link at the end of login remains not form the same remember email’s password User types in their email which was used for registering User does not click on verification link 82 Passed 6.3 TESTING TC-FP-003 CHAPTER IMPLEMENTATION User sends mul- Server sends multiple verifica- Fail to tiple forget pass- tion link to user’s email ac- change word request count password Fail Passed User clicks at the link in the first received email TC-FP-004 User sends mul- Server sends multiple verifica- Password Success tiple forget pass- tion link to user’s email ac- will word request count changed Passed be User clicks at the link in the last received email User types in his/her new password Change password use case TC-CP-001 TC-CP-002 User wants to User clicks on Change Pass- Password Success change password word on the side menu will and his/her old User types in their old pass- changed password is valid word and new password User wants to User clicks on Change Pass- Password Fail change password word on the side menu remains and his/her old User types in their old pass- the same password is in- word and new password valid Website displays old password is wrong 83 Passed be Passed Chapter Conclusion 7.1 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: 84 7.2 EVALUATION CHAPTER CONCLUSION Figure 7.1: Homepage of deployed web application 7.2 7.2.1 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 7.2.2 Future Work In order to resolve above drawbacks, I suggest some works: • Improving an UI-UX design to attract more user 85 7.2 EVALUATION CHAPTER CONCLUSION • 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 86 Bibliography [1] Front-end web development (n.d.-b) Wikimedia https://en.wikipedia org/wiki/Front-end_web_development [2] monggoDB, What is NoSQL? Accessed 20 July 2021 [3] graphql, GraphQL Document Accessed 20 July 2021 [4] Angular document https://angular.io/docs [5] Bootstrap document https://getbootstrap.com/docs/5.0 [6] Amazon Document, What Is Amazon Cognito? Accessed 20 July 2021 [7] Amazon Document, Welcome to the AWS Amplify Console 2021 Accessesd 20 July 2021 87 ... 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... 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... Because of their variety of field value types and powerful query languages, document databases are great for a wide variety of use cases and can be used as a general purpose database They can