XÂY DỰNG HỆ THỐNG QUẢN LÍ, GIÁM SÁT TIẾN ĐỘ CÔNG VIỆC VÀ DỰ ÁN TẠI CÔNG TY

ĐẠI HỌC ĐÀ NẴNG TRƯỜNG ĐẠI HỌC BÁCH KHOA KHOA CÔNG NGHỆ THÔNG TIN ĐỒ ÁN TỐT NGHIỆP NGÀNH: CÔNG NGHỆ THÔNG TIN CHUYÊN NGÀNH: CÔNG NGHỆ PHẦN MỀM ĐỀ TÀI: XÂY D Ự NG H Ệ TH Ố NG QU Ả N LÍ TI Ế N Đ Ộ CÔNG VI Ệ C VÀ D Ự ÁN T Ạ I CÔNG TY Người hướng dẫn: PGS. TS. NGUY Ễ N T Ấ N KHÔI Sinh viên thực hiện: TR Ầ N NG Ọ C QU Ố C Số thẻ sinh viên: 102150127 Lớp : 15T2 Đà N ẵ ng, 12/ 201 9 Tr ầ n Ng ọ c Qu ố c XÂY D Ự NG H Ệ TH Ố NG QU Ả N LÍ, GIÁM SÁT TI Ế N Đ Ộ CÔNG VI Ệ C VÀ D Ự ÁN T Ạ I CÔNG TY 2019 ĐẠI HỌC ĐÀ NẴNG TRƯỜNG ĐẠI HỌC BÁCH KHOA KHOA CÔNG NGHỆ THÔNG TIN ĐỒ ÁN TỐT NGHIỆP NGÀNH: CÔNG NGHỆ THÔNG TIN CHUYÊN NG ÀNH: CÔNG NGHỆ PHẦN MỀM ĐỀ TÀI: XÂY D Ự NG H Ệ TH Ố NG QU Ả N LÍ TI Ế N Đ Ộ CÔNG VI Ệ C VÀ D Ự ÁN T Ạ I CÔNG TY Người hướng dẫn: PGS. TS. NGUY Ễ N T Ấ N KHÔI Sinh viên thực hiện: TR Ầ N NG Ọ C QU Ố C Số thẻ sinh viên: 102150127 Lớp : 15T2 Đà N ẵ ng, 12/ 201 9 NHẬN XÉT CỦA NGƯỜI HƯỚNG DẪN .......................................................................................................... ............................................. .......................................................................... .............................................................. ............... .......................................................................................................... ............................................. .......................... .......................................................................................... ................................... .......................................................................................................... ........................ ..................... .......................................................................................................... ............................................. .................................................................................. .......................................................... ........... .......................................................................................................... ............................................. .................................. ...................................................................................... ............................... .......................................................................................................... ................................ ............. .......................................................................................................... ............................................. .......................................................................................... ..................................................... ........ .......................................................................................................... ............................................. .......................................... ................................................................................. ............................ .......................................................................................................... ........................................ ..... .......................................................................................................... ............................................. .................................................................................................. ................................................. .... .......................................................................................................... ............................................. .................................................. ............................................................................. ........................ NHẬN XÉT CỦA NGƯỜI PHẢN BIỆN .......................................................................................................... .............. ............................... .......................................................................................................... ............................................. ........................................................................ ................................................................ ............... .......................................................................................................... ............................................. ........................ ............................................................................................ ................................... .......................................................................................................... ...................... ....................... .......................................................................................................... ............................................. ................................................................................ ........................................................... ............ .......................................................................................................... ............................................. ................................ ....................................................................................... ................................ .......................................................................................................... .............................. ............... .......................................................................................................... ............................................. ........................................................................................ ....................................................... ........ .......................................................................................................... ............................................. ........................................ ................................................................................... ............................ .......................................................................................................... ...................................... ....... .......................................................................................................... ............................................. ................................................................................................ .................................................. ..... .......................................................................................................... ............................................. TÓM T Ắ T Tên đề tài: Xây dựng hệ thống quản lí , giám sát tiến độ công việc và dự án tại công ty Sinh viên thực hiện: Trần Ngọc Quốc Số thẻ SV: 1021501 27 Lớp: 1 5T2 Người hướng dẫn: PGS.TS. Nguyễn Tấn Khôi Hệ thống bao gồm: - Website quản lí, giám sát tiến độ công việc và dự án tại công ty Các chức năn g chính: - Quản lí thông tin nhân viên hiện có trong công ty - Quản lí dự án của công ty - Quản lí tiến độ công việc của dự án theo mô hình scrum - agile - Quản lí thời gian biểu, chấm công của nhân viên Đ Ạ I H Ọ C ĐÀ N Ẵ NG TRƯ Ờ NG Đ Ạ I H Ọ C BÁCH KHOA KHOA C ÔNG NGH Ệ T HÔNG TIN C Ộ NG HÒA XÃ HÔI CH Ủ NGHĨA VI Ệ T NAM Đ ộ c l ậ p - T ự do - H ạ nh phúc NHI Ệ M V Ụ Đ Ồ ÁN T Ố T NGHI Ệ P H ọ tên sinh viên: Tr ầ n Ng ọ c Qu ố c S ố th ẻ sinh viên: 102150127 L ớ p: 15T2 Khoa: CNTT Ngành: CNPM 1. Tên đ ề tài đ ồ án: Xây dựng hệ thống quản lí, giám sát t iến độ công việc và dự án tại công ty 2. Đ ề tài thu ộ c di ệ n: ☐ Có ký k ế t th ỏ a thu ậ n s ở h ữ u trí tu ệ đ ố i v ớ i k ế t qu ả th ự c hi ệ n 3. Các s ố li ệ u và d ữ li ệ u ban đ ầ u: ……………………………………..……………………………………………..……... ...………………………………………………………………………………………… …..………………………………….…..……… ………………..……………………… 4. N ộ i dung các ph ầ n thuy ế t minh và tính toán: …...……………………………………………………………………………………… …...……………………………………………………………………………………… …...……………………………………………………………………………………… …...……………………………………………………………………………………… …...……………………………………………………………………………………… 5. Các b ả n v ẽ , đ ồ th ị ( ghi rõ các lo ạ i và kích thư ớ c b ả n v ẽ ): …...……………………………………………………………………………………… …...……………………………………………………………………………………… …...……………………………………………………………………………………… …...……………………………………………………………………………………… 6. H ọ tên ngư ờ i hư ớ ng d ẫ n: PGS.TS. Nguy ễ n T ấ n Khôi 7. Ngày giao nhi ệ m v ụ đ ồ án: 05 / 09 /201 9 . 8. Ngày hoàn thành đ ồ án: 20 / 12 /201 9 . Đà N ẵ ng, ngày 20 tháng 12 năm 201 9 Trư ở ng B ộ môn : Lê Th ị M ỹ H ạ nh Ngư ờ i hư ớ ng d ẫ n PGS.TS. Nguyễn Tấn Khôi i L Ờ I NÓI Đ Ầ U Để đạt được kết quả tốt cho đồ án lần này, chúng em đã nhân được sự giúp đỡ nhiệt tình từ rất nhiều người. Với tình cảm sâu sắc và sự chân thành, chúng em muốn bày tỏ lòng biết ơn đối với tất cả. những cá nhân, cơ quan đã giúp đỡ chúng em trong quá trình học tập và nghiên cứu. Đầu tiên chúng em xin chân thành cảm ơn các thầy cô của trường Đại học Bách Khoa Đà Nẵng nói chung và khoa Công Nghệ Thông Tin nói riêng đã truyền đạt những kiến thức quý báu thông qua các giờ học trên giảng đường trong suốt những năm đại học, tạo tiền đề cho chúng em thực hiện tốt đồ án tốt nghiệp lần này. Đặc biệt, chúng em muốn gởi lời cảm ơn sâu sắc thầy Nguyễn Tấn Khôi – g iảng viên ngành Công Nghệ Thông Tin, đã nhiệt tình hướng dẫn, chia sẻ các kinh nghiệm quý báu, và tạo điều kiện về nhiều mặt để chúng em có thể hoàn thành tốt được đồ án lần này. Chúng em cũng xin chân thành cảm ơn gia đình, bạn bè và nhiều người xung quanh cũng tạo điều kiện, hỗ trợ về vật chất và tinh thần trong thời gian làm đồ án. Với kinh nghiệm giới hạn của sinh viên, bài báo cáo có thể sẽ xảy ra những sai sót không muốn, em rất mong sự góp ý của quý thầy cô và mọi người để em rút kinh nghiệm. Em xin chân thành cảm ơn. Đà Nẵng, ngày 20 tháng 12 năm 2019 Sinh viên thực hiện Trần Ngọc Quốc ii CAM ĐOAN Chúng em xin cam đoan: 1. Nội dung trong đồ án này là do em thực hiện dưới sự hướng dẫn trực tiếp của thầy Nguyễn Tấn Khôi. 2. Các tham khảo dùng trong đồ án đều được trích dẫn rõ ràng tên tác giả, tên công trình, thời gian, địa điểm công bố. 3. Mọi hình ảnh, video demo trong báo cáo đều do bản thân nhóm tự làm, không sao chép toàn bộ từ bất cứ nguồn nào . Nếu có những sao chép không hợp lệ, vi phạm, em xin chịu hoàn toàn trách nhiệm . Đà Nẵng, ngày 20 tháng 12 năm 2019 Sinh viên thực hiện Trần Ngọc Quốc iii M Ụ C L Ụ C TÓM T Ắ T NHI Ệ M V Ụ Đ Ồ ÁN T Ố T NGHI Ệ P L Ờ I NÓI Đ Ầ U ................................ ................................ ................................ .................. i CAM ĐOAN ................................ ................................ ................................ .................... ii M Ụ C L Ụ C ................................ ................................ ................................ ...................... iii DANH SÁCH CÁC HÌNH V Ẽ ................................ ................................ ....................... v DANH SÁCH CÁC B Ả NG ................................ ................................ .......................... vii DANH SÁCH CÁC KÝ HI Ệ U, CH Ữ VI Ế T T Ắ T ................................ ....................... viii M Ở Đ Ầ U ................................ ................................ ................................ ......................... 1 1. T ổ ng quan v ề đ ề tài ................................ ................................ ............................. 1 2. M ụ c đích và nhi ệ m v ụ chính c ủ a đ ề tài ................................ ............................. 2 2.1. M ụ c đích đ ề tài: ................................ ................................ .............................. 2 2.2. Nhi ệ m v ụ chính c ủ a đ ề tài: ................................ ................................ ............. 2 3. Công ngh ệ s ử d ụ ng ................................ ................................ .............................. 2 4. Công c ụ h ỗ tr ợ ................................ ................................ ................................ ..... 2 5. C ấ u trúc đ ồ án ................................ ................................ ................................ ..... 2 CHƯƠNG 1. CƠ S Ở LÝ THUY Ế T ................................ ................................ ............. 4 1.1. React Js ................................ ................................ ................................ ............. 4 1.1.1. Gi ớ i thi ệ u ................................ ................................ ................................ ..... 4 1.1.2. Virtual DOM ................................ ................................ ............................... 4 1.1.3. One - way data binding ................................ ................................ ................. 5 1.1.4. Gi ớ i thi ệ u v ề JSX ................................ ................................ ......................... 5 1.1.5. Gi ớ i thi ệ u v ề Components ................................ ................................ ........... 5 1.1.6. Props và State ................................ ................................ ............................. 6 1.1.7. Lifecycle ................................ ................................ ................................ ...... 6 1.2. Redux - Saga ................................ ................................ ................................ ....... 7 1.2.1. Gi ớ i thi ệ u ................................ ................................ ................................ ..... 7 1.2.2. Side effect ................................ ................................ ................................ .... 7 iv 1.2.3. Generator function ................................ ................................ ...................... 7 1.2.4. Cách ho ạ t đ ộ ng ................................ ................................ ........................... 7 1.3. WEB API ................................ ................................ ................................ .......... 8 1.3.1. ASP.NET CORE ................................ ................................ .......................... 8 1.3.2. Entity Framework ................................ ................................ ........................ 8 1.3.3. Phương th ứ c HTTP ................................ ................................ ..................... 9 1.4. Docker ................................ ................................ ................................ ............... 9 1.4.1. Khái ni ệ m ................................ ................................ ................................ .... 9 1.4.2. L ợ i ích c ủ a Docker ................................ ................................ .................... 10 CHƯƠNG 2. PHÂN TÍCH VÀ THI Ế T K Ế H Ệ TH Ố NG ................................ ....... 11 2.1. Đ ặ t v ấ n đ ề ................................ ................................ ................................ ....... 11 2.2. Cách ch ứ c năng chính ................................ ................................ ................... 11 2.2.1. Qu ả n lí thông tin nhân viên ................................ ................................ ....... 11 2.2.2. Qu ả n lí d ự án ................................ ................................ ............................. 12 2.2.3. Qu ả n lí công vi ệ c ................................ ................................ ...................... 13 2.2.4. Qu ả n lí th ờ i gian làm vi ệ c ................................ ................................ ......... 14 2.3. Các module chính c ủ a h ệ th ố ng ................................ ................................ .... 15 2.4. Sơ đ ồ phân rã ch ứ c năng ................................ ................................ ............... 16 2.5. Sơ đ ồ ho ạ t đ ộ ng ................................ ................................ .............................. 17 2.6. Lu ồ ng d ữ li ệ u ................................ ................................ ................................ .. 21 2.7. Sơ đ ồ quan h ệ ................................ ................................ ................................ . 22 2.8. Thi ế t k ế cơ s ở d ữ li ệ u ................................ ................................ ..................... 23 2.8.1. Sơ đ ồ quan h ệ , th ự c th ể d ữ li ệ u ................................ ................................ . 23 2.8.2. Đ ặ c t ả các b ả ng d ữ li ệ u ................................ ................................ ............ 24 CHƯƠNG 3. TRI Ể N KHAI VÀ K Ế T QU Ả ................................ ............................. 32 3.1. Môi trư ờ ng tri ể n khai ................................ ................................ .................... 32 1.2. K ị ch b ả n th ử nghi ệ m ................................ ................................ ..................... 32 3.3. K ế t qu ả th ự c hi ệ n ................................ ................................ ........................... 33 K Ế T LU Ậ N ................................ ................................ ................................ .................. 40 TÀI LI Ệ U THAM KH Ả O ................................ ................................ ............................. 1 v DANH SÁCH CÁC HÌNH V Ẽ Hình 1.1: Đặc trưng Virtual DOM ................................ ................................ .................. 4 Hình 1.2 Các luồng dữ liệu và sự kiện trong React ................................ ........................ 5 Hình 1.3 Các luồng dữ liệu và sự kiện trong React ................................ ........................ 6 Hình 1.4 Mô tả cách thức hoạt động của Redux - Saga ................................ .................. 8 Hình 1.5 Mô tả cách thức hoạt động của Entity Framework ................................ .......... 9 Hình 1.6 Mô tả cách thức hoạt động của Docker ................................ ......................... 10 Hình 2.1 Sơ đồ use - case cho module quản lí nhân viên ................................ ................ 12 Hình 2.2 Sơ đồ use - case cho module quản lí dự án ................................ ...................... 13 Hình 2.3 Sơ đồ use - case cho module quản lí tiến độ công việc trong dự án ................ 14 Hình 2.4 Sơ đồ use - case module quản lí thời gian làm việc ................................ ......... 15 Hình 2.5 Sơ đồ hoạt động của module quản lí nhân viên ................................ ............. 17 Hình 2.6 Sơ đồ hoạt động của module quản lí dự án ................................ .................... 18 Hình 2.7 Sơ đồ hoạt động của module quản lí tiến độ công việc ................................ .. 19 Hình 2.8 Sơ đồ hoạt động của module quản lí thời gian biểu, chấm công ................... 20 Hình 2.9 Mô tả luồng đi của dữ liệu ................................ ................................ ............. 21 Hình 2.10 Sơ đồ lớp cho dự án ................................ ................................ ...................... 22 Hình 2.11 Sơ đồ quan hệ, thực thể dữ liệu ................................ ................................ .... 23 Hình 3.1: Màn hình Login ................................ ................................ ............................. 33 Hình 3.2 Quản lí nhân viên ................................ ................................ ........................... 33 Hình 3.3 Xem thông tin cá nhân của nhân viên ................................ ............................ 34 Hình 3.4 Chỉnh sửa thông tin cá nhân ................................ ................................ .......... 34 Hình 3.5 Lọc và tìm kiếm nhân viên dựa trên kĩ năng, vị trí, tên, … ............................ 35 Hình 3.6 Màn hình quản lí các dự án ................................ ................................ ............ 35 Hình 3.7 Tạo một dự án mới ................................ ................................ .......................... 36 Hình 3.8 Thông tin chi tiết của một công việc ................................ ............................... 36 vi Hình 3.9 Tạo một công việc mới ................................ ................................ .................... 37 Hình 3.10 Giao việc cho thành viên trong dự án ................................ .......................... 37 Hình 3.11 Thêm nhãn cho công việc để dễ quản lí ................................ ....................... 38 Hình 3.12 Xóa một công việc ................................ ................................ ........................ 38 Hình 3.13 Các tùy chọn cho một bản ................................ ................................ ............ 38 Hình 3.14 Quản lí thời gian ................................ ................................ ........................... 39 Hình 3.15 Ghi l ại thời gian đã dành cho một công việc ................................ ............... 39 vii DANH SÁCH CÁC B Ả NG Bảng 2.1 Bảng User ................................ ................................ ................................ ...... 24 Bảng 2.3 Bảng Positio n ................................ ................................ ................................ . 25 Bảng 2.4 Bảng Skill ................................ ................................ ................................ ....... 25 Bảng 2.5 Bảng Skill ................................ ................................ ................................ ....... 25 Bảng 2.6 Bảng Role ................................ ................................ ................................ ....... 26 Bảng 2.7 Bảng UserRole ................................ ................................ ............................... 26 Bảng 2.8 Bảng TimeLineEvent ................................ ................................ ...................... 26 Bảng 2.9 Bảng Bo ard ................................ ................................ ................................ .... 27 Bảng 2.10 Bảng Phase ................................ ................................ ................................ .. 27 Bảng 2.11 Bảng BoardUser ................................ ................................ .......................... 28 Bảng 2.12 Bảng Task ................................ ................................ ................................ ..... 28 Bảng 2.13 Bảng Attachment ................................ ................................ .......................... 29 Bảng 2.14 Bảng Todo ................................ ................................ ................................ .... 29 Bảng 2.15 Bả ng Label ................................ ................................ ................................ ... 29 Bảng 2.16 Bảng TaskLabel ................................ ................................ ............................ 30 Bảng 2.17 Bảng WorkLog ................................ ................................ ............................. 30 Bảng 2. 18 Bảng Comment ................................ ................................ ............................. 30 Bảng 2.19 Bảng TaskAssignee ................................ ................................ ...................... 31 Bảng 2.20 Bảng TaskAction ................................ ................................ .......................... 31 viii DANH SÁCH CÁC KÝ HI Ệ U, CH Ữ VI Ế T T Ắ T API Application Programming Interface JS Javascript SQL Structured Query Language UI User Interface DOM Document Object Model ASP Active Server Pages OS Operating System HTTP HyperText Transer Protocol WWW World Wide Web App Appli cation URL Uniform Resource Locator ID Identifier .NET Dotnet ORM Object Relational Mapper ES ECMA Script AJAX Asynchromous Javascript and XML IoT Internet of Things TCP Transmission Control Protocol IP Internet Protocol Xây d ự ng h ệ th ố n g qu ả n lí, giám sát ti ế n đ ộ công vi ệ c và d ự án t ạ i công ty Sinh viên th ự c hi ệ n: Tr ầ n Ng ọ c Qu ố c Hư ớ ng d ẫ n: Nguy ễ n T ấ n Khôi 1 M Ở Đ Ầ U 1. T ổ ng quan v ề đ ề tài Bài toán c ủ a các nhà qu ả n tr ị là làm sao ki ể m soát nh ữ ng công vi ệ c và d ự án đang di ễ n ra, t ố i ưu ngu ồ n l ự c có h ạ n và nâng cao năng su ấ t doanh nghi ệ p. Đ ể gi ả i đư ợ c bài toán này, các ph ầ n m ề m qu ả n lý công vi ệ c gi ả i quy ế t 2 vi ệ c: - T h ứ nh ấ t, minh b ạ ch hóa quá trình giao vi ệ c - nh ậ n vi ệ c gi ữ a nhà qu ả n lý và nhân viên, t ừ đó minh b ạ ch hóa trách nhi ệ m; - T h ứ hai, giúp nhà qu ả n lý lên k ế ho ạ ch và giúp nhân viên c ộ ng tác, làm vi ệ c t ậ p trung trên m ộ t n ề n t ả ng duy nh ấ t. Tóm l ạ i, l ợ i ích c ủ a vi ệ c s ử d ụ ng m ộ t p h ầ n m ề m qu ả n lý công vi ệ c có th ể quan sát ở 2 góc đ ộ . Đ ố i v ớ i nhân viên, ph ầ n m ề m giúp h ọ : - Nhìn th ấ y đư ợ c t ấ t c ả công vi ệ c c ủ a mình, không sót vi ệ c. - Bi ế t đâu là nh ữ ng vi ệ c c ầ n ưu tiên. - Tính toán và s ắ p x ế p đư ợ c th ờ i gian làm vi ệ c hi ệ u qu ả . - C ộ ng tác v ớ i đ ồ ng đ ộ i đ ể hoàn thành công vi ệ c v ớ i ch ấ t lư ợ ng t ố t nh ấ t. Đ ố i v ớ i nhà qu ả n lý thì m ộ t ph ầ n m ề m qu ả n lý công vi ệ c đem l ạ i nh ữ ng l ợ i ích như sau: - Th ấ y đư ợ c t ổ ng quan công vi ệ c và d ự án c ủ a t ấ t c ả b ộ ph ậ n - Ra quy ế t đ ị nh và x ử lý các v ấ n đ ề phát sinh m ộ t cách k ị p th ờ i - S ắ p x ế p, phân b ổ ngu ồ n l ự c (nhân s ự + th ờ i gian) m ộ t cách hi ệ u qu ả - T ấ t c ả công vi ệ c, d ự án đ ề u đư ợ c hoàn thành đúng th ờ i h ạ n v ớ i ch ấ t lư ợ ng t ố t nh ấ t Hi ệ n nay, t rên th ị trư ờ ng có khá nhi ề u cái tên n ổ i b ậ t như Trello, Asana, Wrike, Jira,… Tuy nhiên, ph ầ n l ớ n nh ữ ng ứ ng d ụ ng trên đ ề u t ồ n t ạ i m ộ t s ố v ấ n đ ề b ấ t c ậ p như: - Không phù h ợ p v ớ i qui trình làm vi ệ c c ủ a công ty - Khuy ế t thi ế u m ộ t s ố ch ứ c năng c ầ n thi ế t - Chi phí cao. Do đó, c ầ n thi ế t xây d ự ng m ộ t h ệ th ố ng đ ể qu ả n lí, giám sát ti ế n đ ộ công vi ệ c, d ự á n phù h ợ p cho quy trình làm vi ệ c c ủ a công ty, d ễ tùy ch ỉ nh, đ ồ ng th ờ i t ố i thi ế u chi phí phát sinh cho công ty. Xây d ự ng h ệ th ố n g qu ả n lí, giám sát ti ế n đ ộ công vi ệ c và d ự án t ạ i công ty Sinh viên th ự c hi ệ n: Tr ầ n Ng ọ c Qu ố c Hư ớ ng d ẫ n: Nguy ễ n T ấ n Khôi 2 2. M ụ c đích và nhi ệ m v ụ chính c ủ a đ ề tài 2.1. M ụ c đích đ ề tài: Xây d ự ng m ộ t h ệ th ố ng giúp cho công ty có th ể d ễ dàng th ự c hi ệ n các công vi ệ c sau: - T ìm k i ế m và truy xu ấ t thông tin nhân viên c ủ a công ty . - Qu ả n lí, giao vi ệ c và giám sát ti ế n đ ộ công vi ệ c cho các d ự án. - Qu ả n lí th ờ i gian làm vi ệ c c ủ a nhân viên. 2.2. Nhi ệ m v ụ chính c ủ a đ ề tài : Đ ề tài có nhi ệ m v ụ chính : - Xây d ự ng website đ ể admin có th ể qu ả n lí thôn g tin nhân viên, d ự án và th ờ i gian làm vi ệ c c ủ a toàn b ộ nhân viên - Xây d ự ng website đ ể nhân viên có th ể c ậ p nh ậ t thông tin ti ế n đ ộ c ủ a công vi ệ c đư ợ c giao , qu ả n lí th ờ i gian làm vi ệ c c ủ a mình và qu ả n lí thông tin cá nhân. 3. Công ngh ệ s ử d ụ ng H ệ th ố ng s ử d ụ ng nh ữ ng công ngh ệ m ớ i và ph ổ bi ế n trên th ị trư ờ ng: - React JS - Redux & Saga - ASP .NET CORE Web API - SQL Server - Azure services - Docker - Nginx 4. Công c ụ h ỗ tr ợ - Visual Studio 2019 - Visual Studio Code - SQL Server Management System - Postman - Git Kraken - Filezilla 5. C ấ u trúc đ ồ án MỞ ĐẦU - Giới thiệu tổng quan về đồ án, lý do chọn đề tài. Trình bày về mục đích, nhiệm vụ và cách thức tiến hành để đạt được kết quả cao. Tóm tắt nội dung của những phần tiếp theo. Xây d ự ng h ệ th ố n g qu ả n lí, giám sát ti ế n đ ộ công vi ệ c và d ự án t ạ i công ty Sinh viên th ự c hi ệ n: Tr ầ n Ng ọ c Qu ố c Hư ớ ng d ẫ n: Nguy ễ n T ấ n Khôi 3 Chương 1: LÝ THUYẾT VÀ CÔNG NGHỆ - Chương này giới thiệu về tất cả cơ s ở lý thuyết và công nghệ sử dụng trong đồ án. Chương 2: PHÂN TÍCH VÀ THIẾT KẾ - Chương này trình bày về tổng quan hệ thống, việc phân tích, đặc tả yêu cầu, và thiết kế hệ thống. Trình bày về phương pháp phát hiện té ngã được lựa chọn. Chương 3: TRIỂN KHAI V À KẾT QUẢ - Chương này trình bày về kết quả của việc lập trình của hệ thống, các hình ảnh thực tế và các bước cài đặt để sử dụng hệ thống. KẾT LUẬN - Nêu lên kết luận của nhóm về đồ án, các bài học trong quá trình thực hiện, nên lên nhận xét về các vấn đề cò n tồn tại và các đề xuất. TÀI LIỆU THAM KHẢO - Trình bày về các thông tin cần thiết, liên quan đến các nguồn trích dẫn trong đồ án.. Xây d ự ng h ệ th ố n g qu ả n lí, giám sát ti ế n đ ộ công vi ệ c và d ự án t ạ i công ty Sinh viên th ự c hi ệ n: Tr ầ n Ng ọ c Qu ố c Hư ớ ng d ẫ n: Nguy ễ n T ấ n Khôi 4 CHƯƠNG 1. CƠ S Ở LÝ THUY Ế T 1.1. React Js 1.1.1. Gi ớ i thi ệ u React là m ộ t thư vi ệ n UI phát tri ể n t ạ i Facebook đ ể h ỗ tr ợ vi ệ c xây d ự ng nh ữ ng thành ph ầ n (components) UI có tính tương tác cao, có tr ạ ng thái và có th ể s ử d ụ ng l ạ i đư ợ c. React đư ợ c s ử d ụ ng t ạ i Facebook trong production, và đ ồ ng th ờ i ứ ng d ụ ng instagram cũng đư ợ c vi ế t hoàn toàn trên React. M ộ t trong nh ữ ng đi ể m h ấ p d ẫ n c ủ a React là th ư vi ệ n này không ch ỉ ho ạ t đ ộ ng trên phía client, mà còn đư ợ c render trên server và có th ể k ế t n ố i v ớ i nhau. React so sánh s ự thay đ ổ i gi ữ a các giá tr ị c ủ a l ầ n render này v ớ i l ầ n render trư ớ c và c ậ p nh ậ t ít thay đ ổ i nh ấ t trên DOM . Trươc khi đ ế n cài đ ặ t và c ấ u hình, chúng ta s ẽ đi đ ế n m ộ t s ố khái ni ệ m cơ b ả n: 1.1.2. Virtual DOM C ông ngh ệ DOM ả o giúp tăng hi ệ u năng cho ứ ng d ụ ng. Vi ệ c ch ỉ node g ố c m ớ i có tr ạ ng thái và khi nó thay đ ổ i s ẽ tái c ấ u trúc l ạ i toàn b ộ , đ ồ ng nghĩa v ớ i vi ệ c DOM tree cũng s ẽ ph ả i thay đ ổ i m ộ t ph ầ n, đi ề u này s ẽ ả nh hư ở ng đ ế n t ố c đ ộ x ử lý. React JS s ử d ụ ng Virtual DOM (DOM ả o) đ ể c ả i thi ệ n v ấ n đ ề này.Virtual DOM là m ộ t object Javascript, m ỗ i object ch ứ a đ ầ y đ ủ thông tin c ầ n thi ế t đ ể t ạ o ra m ộ t DOM, khi d ữ li ệ u thay đ ổ i nó s ẽ tính toán s ự thay đ ổ i gi ữ a object và tree th ậ t, đi ề u này s ẽ giúp t ố i ưu hoá vi ệ c re - render DOM tree th ậ t. Hình 1 . 1 Đặc trưng Virtual DOM Xây d ự ng h ệ th ố n g qu ả n lí, giám sát ti ế n đ ộ công vi ệ c và d ự án t ạ i công ty Sinh viên th ự c hi ệ n: Tr ầ n Ng ọ c Qu ố c Hư ớ ng d ẫ n: Nguy ễ n T ấ n Khôi 5 1.1.3. O ne - way data binding React s ử d ụ ng cơ ch ế one - way data binding – lu ồ ng d ữ li ệ u 1 chi ề u. D ữ li ệ u đư ợ c truy ề n t ừ parent đ ế n child thông qua props. Lu ồ ng d ữ li ệ u đơn gi ả n giúp chúng ta d ễ dàng ki ể m soát cũng như s ử a l ỗ i. Hình 1 . 2 Các luồng dữ liệu và sự kiện trong React V ớ i các đ ặ c đi ể m ở trên, React dùng đ ể xây d ự ng các ứ ng d ụ ng l ớ n mà d ữ li ệ u c ủ a chúng thay đ ổ i liên t ụ c theo th ờ i gian. D ữ li ệ u thay đ ổ i thì h ầ u h ế t kèm theo s ự thay đ ổ i v ề giao di ệ n. Ví d ụ như Facebook: trên Newsfeed c ủ a b ạ n cùng lúc s ẽ có các status khác nhau và m ỗ i status l ạ i có s ố like, share, comment liên t ụ c thay đ ổ i. Khi đó React s ẽ r ấ t h ữ u ích đ ể s ử d ụ ng. 1.1.4. Gi ớ i thi ệ u v ề JSX JSX là m ộ t d ạ ng ngôn ng ữ cho phép vi ế t các mã HTML trong Javascript. Đ ặ c đi ể m: Faster: Nhanh hơn. JSX th ự c hi ệ n t ố i ưu hóa trong khi biên d ị ch sang mã Javacs ript. Các mã này cho th ờ i gian th ự c hi ệ n nhanh hơn nhi ề u so v ớ i m ộ t mã tương đương vi ế t tr ự c ti ế p b ằ ng Javascript. Safer: an toàn hơn. Ngư ợ c v ớ i Javascript, JSX là ki ể u statically - typed, nghĩa là nó đư ợ c biên d ị ch trư ớ c khi ch ạ y, gi ố ng như Java, C++. Vì th ế các l ỗ i s ẽ đư ợ c phát hi ệ n ngay trong quá trình biên d ị ch. Ngoài ra, nó cũng cung c ấ p tính năng g ỡ l ỗ i khi biên d ị ch r ấ t t ố t. Easier: D ễ dàng hơn. JSX k ế th ừ a d ự a trên Javascript, vì v ậ y r ấ t d ễ dàng đ ể cho các l ậ p trình viên Javascripts có th ể s ử d ụ ng 1.1.5. Gi ớ i thi ệ u v ề Components React đư ợ c xây d ự ng xung quanh các component, ch ứ không dùng template như các framework khác. Trong React, chúng ta xây d ự ng trang web s ử d ụ ng nh ữ ng thành ph ầ n (component) nh ỏ . Chúng ta có th ể tái s ử d ụ ng m ộ t component ở nhi ề u nơi, v ớ i các tr ạ ng thái ho ặ c các thu ộ c tính khác nhau, trong m ộ t component l ạ i có th ể ch ứ a thành Xây d ự ng h ệ th ố n g qu ả n lí, giám sát ti ế n đ ộ công vi ệ c và d ự án t ạ i công ty Sinh viên th ự c hi ệ n: Tr ầ n Ng ọ c Qu ố c Hư ớ ng d ẫ n: Nguy ễ n T ấ n Khôi 6 ph ầ n khác. M ỗ i component trong React có m ộ t tr ạ ng thái riêng, có th ể thay đ ổ i, và React s ẽ th ự c hi ệ n c ậ p nh ậ t component d ự a trên nh ữ ng thay đ ổ i c ủ a tr ạ ng thái. M ọ i t h ứ React đ ề u là component. Chúng giúp b ả o trì mã code khi làm vi ệ c v ớ i các d ự án l ớ n. M ộ t react component đơn gi ả n ch ỉ c ầ n m ộ t method render. Có r ấ t nhi ề u methods kh ả d ụ ng khác, nhưng render là method ch ủ đ ạ o. 1.1.6. Props và State Props: giúp các component tươn g tác v ớ i nhau, component nh ậ n input g ọ i là props, và tr ả thu ộ c tính mô t ả nh ữ ng gì component con s ẽ render. Prop là b ấ t bi ế n. State: th ể hi ệ n tr ạ ng thái c ủ a ứ ng d ụ ng, khi state thay đ ồ i thì component đ ồ ng th ờ i render l ạ i đ ể c ậ p nh ậ t UI. 1.1.7. Lifecycle Lifec ycle methods là nh ữ ng method đư ợ c g ọ i t ạ i m ộ t th ờ i đi ể m nào đó trong vòng đ ờ i c ủ a m ộ t component. Chúng ta có th ể vi ế t m ộ t lifecycle methods đư ợ c g ọ i trư ớ c khi component đư ợ c render trong l ầ n đ ầ u tiên. Ho ặ c đư ợ c g ọ i sau khi component đư ợ c render trong nh ữ ng l ầ n sau. Hình 1 . 3 Các luồng dữ liệu và sự kiện trong React Xây d ự ng h ệ th ố n g qu ả n lí, giám sát ti ế n đ ộ công vi ệ c và d ự án t ạ i công ty Sinh viên th ự c hi ệ n: Tr ầ n Ng ọ c Qu ố c Hư ớ ng d ẫ n: Nguy ễ n T ấ n Khôi 7 1.2. Redux - Saga 1.2.1. Gi ớ i thi ệ u Redux - Saga là m ộ t thư vi ệ n redux middlewa re, giúp qu ả n lý nh ữ ng side effect trong ứ ng d ụ ng redux tr ở nên đơn gi ả n hơn. B ằ ng vi ệ c s ử d ụ ng t ố i đa tính năng Generators (function*) c ủ a ES6, nó cho phép ta vi ế t async code nhìn gi ố ng như là synchronos. 1.2.2. Side effect Ta đã bi ế t t ấ t c ả nh ữ ng x ử lý ở REDU CER đ ề u ph ả i là synchronous và pure t ứ c ch ỉ là x ử lý đ ồ ng b ộ . Nhưng trong ứ ng d ụ ng th ự c t ế thì c ầ n nhi ề u hơn v ậ y ví d ụ như asynchronous (th ự c hi ệ n m ộ t s ố vi ệ c như g ọ i m ộ t hàm AJAX đ ể fetch d ữ li ệ u v ề nhưng c ầ n đ ợ i k ế t qu ả ch ứ k ế t qu ả không tr ả v ề ngay đư ợ c ) ho ặ c là impure (th ự c hi ệ n lưu, đ ọ c d ữ li ệ u ra bên ngoài như lưu d ữ li ệ u ra ổ c ứ ng hay đ ọ c cookie t ừ trình duy ệ t… đ ề u c ầ n đ ợ i k ế t qu ả ). Nh ữ ng vi ệ c như th ế trong l ậ p trình hàm g ọ i nó là side effects. 1.2.3. Generator function Khác v ớ i function bình thư ờ ng là th ự c thi và tr ả v ề k ế t qu ả , thì Generator function có th ể th ự c thi, t ạ m d ừ ng tr ả v ề k ế t qu ả và th ự c thi b ằ ng ti ế p. T ừ khóa đ ể làm đư ợ c vi ệ c đ ấ y là “YIELD”. Generator đư ợ c đưa ra cách đây m ấ y ch ụ c năm nhưng đ ế n ES2015 m ớ i đư ợ c b ổ sung, các ngôn ng ữ khác đã đư ợ c b ổ sung tính năng này như C#, PHP, Ruby, C++, R…. 1.2.4. Cách ho ạ t đ ộ ng Đ ố i v ớ i logic c ủ a saga, ta cung c ấ p m ộ t hàm cho saga, chính hàm này là hàm đ ứ ng ra xem xét các action trư ớ c khi vào store, n ế u là action quan tâm thì nó s ẽ th ự c thi hàm s ẽ đư ợ c th ự c thi, n ế u b ạ n bi ế t khái ni ệ m hook thì hàm cung c ấ p cho saga chính là hàm hook. Đi ề u đ ặ c bi ệ t c ủ a hàm hook này nó là m ộ t generator function, trong generator function này có yield và m ỗ i khi yield ta s ẽ tr ả v ề m ộ t plain object. Object tr ả v ề đó đư ợ c g ọ i Effect ob ject. effect object này đơn gi ả n ch ỉ là m ộ t object bình thư ờ ng nhưng ch ứ a thông tin đ ặ c bi ệ t dùng đ ể ch ỉ d ẫ n middleware c ủ a Redux th ự c thi các ho ạ t đ ộ ng khác ví d ụ như g ọ i m ộ t hàm async khác hay put m ộ t action t ớ i store. Đ ể t ạ o ra effect object đ ề c ậ p ở tr ên thì ta g ọ i hàm t ừ thư vi ệ n c ủ a saga là redux - saga/effects. Xây d ự ng h ệ th ố n g qu ả n lí, giám sát ti ế n đ ộ công vi ệ c và d ự án t ạ i công ty Sinh viên th ự c hi ệ n: Tr ầ n Ng ọ c Qu ố c Hư ớ ng d ẫ n: Nguy ễ n T ấ n Khôi 8 Hình 1 . 4 Mô tả cách thức hoạt động của Redux - Saga 1.3. WEB API 1.3.1. ASP.NET CORE ASP.NET Core là m ộ t open - source m ớ i và framework đa n ề n t ả ng (cross - p latform) cho vi ệ c xây d ự ng nh ữ ng ứ ng d ụ ng hi ệ n t ạ i d ự a trên k ế t n ố i đám mây, gi ố ng như web apps, IoT và backend cho mobile. Do là m ộ t framework đa n ề n t ả ng nên .NET h ỗ tr ợ h ầ u h ế t các h ệ đi ề u hành như Windows, Linux, macOS. Ứ ng d ụ ng ASP.NET Core có th ể ch ạ y trên phiên b ả n đ ầ y đ ủ c ủ a .NET Framework. Nó đư ợ c thi ế t k ế đ ể cung c ấ p và t ố i ưu development framework cho nh ữ ng d ụ ng cái mà đư ợ c tri ể n khai trên đám mây (clound) ho ặ c ch ạ y on - promise. DotNET Core framework bao g ồ m .NET Core, ASP.NET Core, Entity Frame work Core. Các công ngh ệ này khác v ớ i .NET Framework ở ch ỗ chúng ch ạ y CoreCLR runtime(used in Universal Windows Platform) 1.3.2. Entity Framework Entity Framework đư ợ c ra m ắ t l ầ n đ ầ u tiên vào năm 2008, giúp cho vi ệ c truy v ấ n cơ s ỡ d ữ li ệ u quan h ệ tr ở lên đơn gi ả n, d ễ h ọ c, giúp gi ả m b ớ t th ờ i gian phát tri ể n d ự án xu ố ng đáng k ể . Entity Framework là m ộ t Object Relational Mapper(ORM) m ộ t công c ụ mapping gi ữ a các objects trong ứ ng d ụ ng v ớ i các tables và columns c ủ a cơ s ở d ữ li ệ u quan h ệ : - Entity Framework là m ộ t Open source ORM Framework. - M ộ t ORM có th ể t ạ o k ế t n ố i đ ế n m ộ t Relational database, th ự c thi c ậ u l ệ nh và tr ả v ề k ế t qu ả là các objects trong ứ ng d ụ ng. Xây d ự ng h ệ th ố n g qu ả n lí, giám sát ti ế n đ ộ công vi ệ c và d ự án t ạ i công ty Sinh viên th ự c hi ệ n: Tr ầ n Ng ọ c Qu ố c Hư ớ ng d ẫ n: Nguy ễ n T ấ n Khôi 9 - M ộ t ORM s ẽ theo dõi s ự thay đ ổ i d ữ li ệ u,tr ạ ng thái c ủ a các objects tr ả v ề ở trên, m ỗ i khi có s ự thay đ ổ i d ữ li ệ u t ừ nh ữ ng objects này ORM s ẽ g ử i nh ữ ng thay đ ổ i đó đ ế n Relational database. Hi ể u m ộ t cách đơn gi ả n thì ORM là công c ụ t ự đ ộ ng t ạ o ra các Objects trong ứ ng d ự ng t ừ tables, views, store procedures c ủ a m ộ t Relational Database nào đó. . Hình 1 . 5 Mô tả cách thức hoạt động của Entity Framework 1.3.3. Phương th ứ c HTTP HTTP (Ti ế ng Anh: HyperText Transfer Protocol - Giao th ứ c truy ề n t ả i siêu văn b ả n) là m ộ t trong năm giao th ứ c chu ẩ n c ủ a m ạ ng Internet, đư ợ c dùng đ ể liên h ệ th ông tin gi ữ a Máy cung c ấ p d ị ch v ụ (Web server) và Máy s ử d ụ ng d ị ch v ụ (Web client) trong mô hình Client/Server dùng cho World Wide Web - WWW, HTTP là m ộ t giao th ứ c thu ộ c t ầ ng ứ ng d ụ ng, n ằ m trên c ặ p giao th ứ c t ầ ng giao v ậ n & t ầ ng m ạ ng là TCP/IP. 1.4. Docker 1.4.1. Khái n i ệ m Docker - đây là m ộ t công c ụ t ạ o môi trư ờ ng đư ợ c packaging (Container) trên máy tính đ ộ c l ậ p mà không làm tác đ ộ ng t ớ i môi máy, môi trư ờ ng trong Docker s ẽ ch ạ y đ ộ c l ậ p. M ỗ i containers ch ứ a ứ ng d ụ ng g ồ m ch ứ a các thư vi ệ n riêng, nhưng kernel đư ợ c chia s ẻ v ớ i các containers khác. M ỗ i kernel đư ợ c ch ạ y trong các môi trư ờ ng đ ộ c l ậ p v ớ i nhau. Docker infrastructure ch ạ y đư ợ c trên m ọ i máy tính, đám mây hay n ề n t ả ng nào. Vì v ậ y b ạ n có th ể v ậ n chuy ể n ứ ng d ụ ng đ ế n b ấ t c ứ đâu và không c ầ n ph ả i quan tâm đ ế n môi trư ờ n g phát tri ể n, thi ế u thư vi ệ n, ... T ự u chung l ạ i thì Docker r ấ t t ố t t ạ i vi ệ c xây d ự ng và chia s ẻ Disk Image qua h ệ th ố ng Docker Index, là m ộ t ph ầ n m ề m qu ả n lý cơ s ở h ạ t ầ ng, làm vi ệ c t ố t v ờ i v ớ i các công c ụ qu ả n lý file config (vd: Chef, Puppet), s ử d ụ ng bt rfs đ ể gi ả m sát các file h ệ th ố ng và có th ể đư ợ c chia s ẻ v ớ i user khác. (Như cách Xây d ự ng h ệ th ố n g qu ả n lí, giám sát ti ế n đ ộ công vi ệ c và d ự án t ạ i công ty Sinh viên th ự c hi ệ n: Tr ầ n Ng ọ c Qu ố c Hư ớ ng d ẫ n: Nguy ễ n T ấ n Khôi 10 ho ạ t đ ộ ng c ủ a Git) và có m ộ t b ộ kho trung tâm c ủ a các Disk Images (có th ể đư ợ c public ho ặ c private), đi ề u này cho phép b ạ n d ễ dàng ch ạ y trên nhi ề u h ệ đi ề u hành khác nhau ( Ubu ntu, Centos, Fedora, Gentoo) . Hình 1 . 6 Mô tả cách thức hoạt động của Docker 1.4.2. L ợ i ích c ủ a Docker - Th ờ i gian kh ở i đ ộ ng nhanh - Gói g ọ n m ọ i environment c ầ n thi ế t trong m ộ t container, có th ể ch ạ y container trên m ọ i m ôi trư ờ ng win, linux, macos, … - T ố c đ ộ build nhanh hơn. - D ễ dàng thi ế t l ậ p môi trư ờ ng làm vi ệ c khi có v ấ n đ ề , s ự c ố v ớ i server. - Gi ữ cho workspace s ạ ch s ẽ hơn - Các container có th ể ch ạ y đ ộ c l ậ p - Có th ể ch ạ y nhi ề u container trên cùng m ộ t máy Xây d ự ng h ệ th ố n g qu ả n lí, giám sát ti ế n đ ộ công vi ệ c và d ự án t ạ i công ty Sinh viên th ự c hi ệ n: Tr ầ n Ng ọ c Qu ố c Hư ớ ng d ẫ n: Nguy ễ n T ấ n Khôi 11 CHƯƠNG 2. PHÂN TÍCH VÀ THI Ế T K Ế H Ệ TH Ố NG 2.1. Đ ặ t v ấ n đ ề H ệ th ố ng c ầ n gi ả i quy ế t đư ợ c bài toán t ố i ưu quá trình qu ả n lí d ự án c ủ a công ty. Hi ệ n t ạ i công ty đang v ậ n hành các d ự án theo mô hình scrum - agile nên h ệ th ố ng c ầ n đáp ứ ng vi ệ c t ạ o m ớ i các d ự án, qu ả n lí các d ự án theo mô hình này b ằ ng các c ộ t ti ế n trình. Các ti ế n trình có th ể tùy ch ỉ nh và thay đ ổ i đ ể phù h ợ p v ớ i t ừ ng d ự án. Đ ồ ng th ờ i vi ệ c t ạ o m ớ i, qu ả n lí các công vi ệ c ph ả i h ợ p lí, logic . Đ ồ ng th ờ i, h ệ th ố ng cũng ph ả i gi ả i quy ế t đư ợ c bài toán qu ả n lí th ờ i gian bi ể u, ch ấ m công c ủ a công ty. Nhân viên có th ể qu ả n lí đư ợ c th ờ i gian bi ể u c ủ a mình qua vi ệ c lưu l ạ i th ờ i gian làm vi ệ c trong ngày, tu ầ n, tháng c ủ a mình. Admin có th ể quan sát, theo dõi đư ợ c l ị ch làm vi ệ c và th ờ i gian bi ể u c ủ a toàn b ộ nhân viên trong công ty. Vi ệ c xem xé t thông tin cá nhân c ủ a nhân viên cũng ph ả i d ễ dàng, d ễ tìm ki ế m, l ọ c,… đ ể thu ậ n l ợ i hơn cho qui trình qu ả n lí. 2.2. Cách ch ứ c năng chính 2.2.1. Qu ả n lí thông tin nhân viên Đ ể thu ậ n l ợ i cho vi ệ c truy xu ấ t cũng như qu ả n lí thông tin các nhân viên hi ệ n th ờ i c ủ a công t y, h ệ th ố ng s ẽ cho phép: - Nhân viên qu ả n lí , c ậ p nh ậ t thông tin cá nhân c ủ a mình. - Xem thông tin c ủ a nh ữ ng nhân viên hi ệ n có trong công ty. - Tìm ki ế m nhân viên theo tên, ch ứ c v ụ hi ệ n th ờ i, ho ặ c b ằ ng các k ỹ năng hi ệ n có c ủ a nhân viên. - Admin có th ể t ạ o m ớ i tài kho ả n cho nhân viên m ớ i, ch ỉ nh s ử a, khóa ho ặ c xóa tài kho ả n c ủ a nhân viên ra kh ỏ i h ệ th ố ng Xây d ự ng h ệ th ố n g qu ả n lí, giám sát ti ế n đ ộ công vi ệ c và d ự án t ạ i công ty Sinh viên th ự c hi ệ n: Tr ầ n Ng ọ c Qu ố c Hư ớ ng d ẫ n: Nguy ễ n T ấ n Khôi 12 Hình 2 . 1 Sơ đ ồ use - case cho module qu ả n lí nhân viên 2.2.2. Qu ả n lí d ự án H ệ th ố ng s ẽ cung c ấ p công c ụ đ ể qu ả n lý các d ự á n c ủ a công ty: - Nhân viên có th ể xem các d ự án mà mình đang tham gia - Nhân viên có th ể t ạ o m ớ i m ộ t d ự án - Nhân viên có th ể thêm ngư ờ i vào d ự án - Nhân viên có th ể thêm các nhãn màu cho d ự án đ ể d ễ phân bi ệ t - Nhân viên có th ể ch ỉ nh s ử a thông tin c ủ a d ự án - Nhân vi ên có th ể xem h ồ sơ c ủ a các thành viên trong d ự án - Giám đ ố c / trư ở ng b ộ ph ậ n (Admin) có th ể qu ả n lí, giám sát toàn b ộ d ự án c ủ a công ty Xây d ự ng h ệ th ố n g qu ả n lí, giám sát ti ế n đ ộ công vi ệ c và d ự án t ạ i công ty Sinh viên th ự c hi ệ n: Tr ầ n Ng ọ c Qu ố c Hư ớ ng d ẫ n: Nguy ễ n T ấ n Khôi 13 Hình 2 . 2 Sơ đ ồ use - case cho module qu ả n lí d ự án 2.2.3. Qu ả n lí công vi ệ c H ệ t h ố ng s ẽ cung c ấ p công c ụ đ ể qu ả n lý ti ế n đ ộ công vi ệ c các d ự án c ủ a công ty theo d ạ ng scrum board: - M ọ i thành viên trong nhóm có qu ả n lí ti ế n đ ộ công vi ệ c c ủ a d ự án b ằ ng cách thêm các lu ồ ng th ự c hi ệ n công vi ệ c, thêm m ớ i và qu ả n lí các nhi ệ m v ụ , công vi ệ c. - T hành viên có th ể giao, nh ậ n các công vi ệ c. - Thành viên có th ể quan sát ti ế n đ ộ c ủ a d ự án thông qua t ổ ng th ờ i gian ư ớ c lư ợ ng c ủ a toàn b ộ công vi ệ c và lư ợ ng th ờ i gian th ự c t ế đã tiêu t ố n cho nh ữ ng công vi ệ c trong d ự án. Xây d ự ng h ệ th ố n g qu ả n lí, giám sát ti ế n đ ộ công vi ệ c và d ự án t ạ i công ty Sinh viên th ự c hi ệ n: Tr ầ n Ng ọ c Qu ố c Hư ớ ng d ẫ n: Nguy ễ n T ấ n Khôi 14 Hình 2 . 3 Sơ đ ồ use - case cho module qu ả n lí ti ế n đ ộ công vi ệ c trong d ự án 2.2.4. Qu ả n lí th ờ i gian làm vi ệ c Đ ể thu ậ n l ợ i hơn trong vi ệ c đánh giá hi ệ u su ấ t làm vi ệ c c ủ a nhân viên, h ệ th ố ng s ẽ cho phép: - Nhân viên có th ể qu ả n lí, ki ể m soát th ờ i gian làm vi ệ c c ủ a mình thông qua vi ệ c lưu l ạ i th ờ i gian đã tiêu t ố n cho t ừ ng công vi ệ c đư ợ c giao. - Nhân viên có th ể xem toàn b ộ th ờ i gian làm vi ệ c c ủ a mình - Nhân viên có th ể xem thông tin c ủ a công vi ệ c đã làm ngay t ạ i th ờ i gian bi ể u - Giám đ ố c / trư ở ng b ộ ph ậ n có th ể quan sát th ờ i gian làm vi ệ c c ủ a m ọ i nhân viên. Xây d ự ng h ệ th ố n g qu ả n lí, giám sát ti ế n đ ộ công vi ệ c và d ự án t ạ i công ty Sinh viên th ự c hi ệ n: Tr ầ n Ng ọ c Qu ố c Hư ớ ng d ẫ n: Nguy ễ n T ấ n Khôi 15 Hình 2 . 4 Sơ đ ồ use - case module qu ả n lí th ờ i gian làm vi ệ c 2.3. Các module chính c ủ a h ệ th ố ng Hình 2 . 5 Các module chính c ủ a d ự án Xây d ự ng h ệ th ố n g qu ả n lí, giám sát ti ế n đ ộ công vi ệ c và d ự án t ạ i công ty Sinh viên th ự c hi ệ n: Tr ầ n Ng ọ c Qu ố c Hư ớ ng d ẫ n: Nguy ễ n T ấ n Khôi 16 2.4. Sơ đ ồ phân rã ch ứ c năng Hình 2 . 6 Sơ đ ồ phân rã ch ứ c năng Xây d ự ng h ệ th ố n g qu ả n lí, giám sát ti ế n đ ộ công vi ệ c và d ự án t ạ i công ty Sinh viên th ự c hi ệ n: Tr ầ n Ng ọ c Qu ố c Hư ớ ng d ẫ n: Nguy ễ n T ấ n Khôi 17 2.5. Sơ đ ồ ho ạ t đ ộ ng Hình 2 . 7 Sơ đ ồ ho ạ t đ ộ ng c ủ a module qu ả n lí nhân viên Xây d ự ng h ệ th ố n g qu ả n lí, giám sát ti ế n đ ộ công vi ệ c và d ự án t ạ i công ty Sinh viên th ự c hi ệ n: Tr ầ n Ng ọ c Qu ố c Hư ớ ng d ẫ n: Nguy ễ n T ấ n Khôi 18 Hình 2 . 8 Sơ đ ồ ho ạ t đ ộ ng c ủ a module qu ả n lí d ự án Xây d ự ng h ệ th ố n g qu ả n lí, giám sát ti ế n đ ộ công vi ệ c và d ự án t ạ i công ty Sinh viên th ự c hi ệ n: Tr ầ n Ng ọ c Qu ố c Hư ớ ng d ẫ n: Nguy ễ n T ấ n Khôi 19 Hình 2 . 9 Sơ đ ồ ho ạ t đ ộ ng c ủ a module qu ả n lí ti ế n đ ộ công vi ệ c Xây d ự ng h ệ th ố n g qu ả n lí, giám sát ti ế n đ ộ công vi ệ c và d ự án t ạ i công ty Sinh viên th ự c hi ệ n: Tr ầ n Ng ọ c Qu ố c Hư ớ ng d ẫ n: Nguy ễ n T ấ n Khôi 20 Hình 2 . 10 Sơ đ ồ ho ạ t đ ộ ng c ủ a module qu ả n lí th ờ i gian bi ể u, ch ấ m công Xây d ự ng h ệ th ố n g qu ả n lí, giám sát ti ế n đ ộ công vi ệ c và d ự án t ạ i công ty Sinh viên th ự c hi ệ n: Tr ầ n Ng ọ c Qu ố c Hư ớ ng d ẫ n: Nguy ễ n T ấ n Khôi 21 2.6. Lu ồ ng d ữ li ệ u Hình 2 . 11 Mô t ả lu ồ ng đi c ủ a d ữ li ệ u Thông thư ờ ng, nhân viên s ẽ đăng nh ậ p vào h ệ th ố ng qu ả n lí qua website. Các thao tác trên website s ẽ thông qua API đ ể truy c ậ p đ ế n cơ s ở d ữ li ệ u. Sau khi l ấ y d ữ li ệ u t ừ cơ s ở d ữ li ệ u, API server s ẽ tr ả tín hi ệ u v ề cho trình duy ệ t đ ể hi ể n th ị . Xây d ự ng h ệ th ố n g qu ả n lí, giám sát ti ế n đ ộ công vi ệ c và d ự án t ạ i công ty Sinh viên th ự c hi ệ n: Tr ầ n Ng ọ c Qu ố c Hư ớ ng d ẫ n: Nguy ễ n T ấ n Khôi 22 2.7. Sơ đ ồ quan h ệ Hình 2 . 12 Sơ đ ồ l ớ p cho d ự án Xây d ự ng h ệ th ố n g qu ả n lí, giám sát ti ế n đ ộ công vi ệ c và d ự án t ạ i công ty Sinh viên th ự c hi ệ n: Tr ầ n Ng ọ c Qu ố c Hư ớ ng d ẫ n: Nguy ễ n T ấ n Khôi 23 2.8. Thi ế t k ế cơ s ở d ữ li ệ u 2.8.1. Sơ đ ồ quan h ệ , th ự c th ể d ữ li ệ u Hình 2 . 13 Sơ đ ồ quan h ệ , th ự c th ể d ữ li ệ u Attachment (dbo) Id EntityStatus CreatedTime UpdatedTime Url MediaType TaskId Board (dbo) Id EntityStatus CreatedTime UpdatedTime Name Description ImageUrl PhaseOrder BoardUser (dbo) Id EntityStatus CreatedTime UpdatedTime UserId BoardId MemberType Comment (dbo) Id EntityStatus CreatedTime UpdatedTime [Content] UserId TaskId Labels (dbo) Id EntityStatus CreatedTime UpdatedTime Name Phase (dbo) Id EntityStatus CreatedTime UpdatedTime Name BoardId TaskOrder Position (dbo) Id EntityStatus CreatedTime UpdatedTime Name Role (dbo) Id EntityStatus CreatedTime UpdatedTime Name Skill (dbo) Id EntityStatus CreatedTime UpdatedTime Name Task (dbo) Id EntityStatus CreatedTime UpdatedTime Title Description StartDate DueDate Estimation ReporterUserId ReporterId BoardId TaskAssignee (dbo) Id EntityStatus CreatedTime UpdatedTime UserId TaskId TaskLabel (dbo) Id EntityStatus CreatedTime UpdatedTime LabelId TaskId TimeLineEvent (dbo) Id EntityStatus CreatedTime UpdatedTime Event UserId Todo (dbo) Id EntityStatus CreatedTime UpdatedTime [Content] Finished TaskId User (dbo) Id EntityStatus CreatedTime UpdatedTime Email PasswordSalt PasswordHash AvatarUrl AllowTokensSince Address BirthDate Description FullName Gender Location Phone SocialLink UserName PositionId UserAction (dbo) Id EntityStatus CreatedTime UpdatedTime ActionDescription UserId TaskId UserRole (dbo) Id EntityStatus CreatedTime UpdatedTime UserId RoleId UserSkill (dbo) Id EntityStatus CreatedTime UpdatedTime UserId SkillId WorkLog (dbo) Id EntityStatus CreatedTime UpdatedTime Amount DateLog Description UserId TaskId Xây d ự ng h ệ th ố n g qu ả n lí, giám sát ti ế n đ ộ công vi ệ c và d ự án t ạ i công ty Sinh viên th ự c hi ệ n: Tr ầ n Ng ọ c Qu ố c Hư ớ ng d ẫ n: Nguy ễ n T ấ n Khôi 24 2.8.2. Đ ặ c t ả các b ả ng d ữ li ệ u Bảng 2 . 1 Bảng User Tên Mô t ả Data Type Note Id Id c ủ a b ả ng User Char Khóa chính EntityStatus Tr ạ ng thái c ủ a m ộ t th ự c th ể Integer CreatedTime Ngày kh ở i t ạ o Date Time UpdatedTime Ngày ch ỉ nh s ử a cu ố i cùng Date Time Email Đ ị a ch ỉ Email c ủ a nhân viên Text PasswordHash Mã hóa hash c ủ a password Text Passw ordSalt Mã hóa salt c ủ a password Text AvatarUrl Link ả nh Avatar c ủ a nhân viên Text FullName Tên đ ầ y đ ủ c ủ a nhân viên Text Location T ỉ nh/thành ph ố hi ệ n t ạ i c ủ a nhân viên Text Address Đ ị a ch ỉ nhà c ủ a nhân viên Text Phone S ố đi ệ n tho ạ i c ủ a nhân viên Text SocialLink Link trang cá nhân c ủ a nhân viên Text BirthDate Ngày sinh c ủ a nhân viên DateTime Gender Gi ớ i tính c ủ a nhân viên Text Description Sơ lư ợ c gi ớ i thi ệ u nhân viên Text PositionId Id ch ứ c v ụ c ủ a nhân viên Char Khóa ngo ạ i Xây d ự ng h ệ th ố n g qu ả n lí, giám sát ti ế n đ ộ công vi ệ c và d ự án t ạ i công ty Sinh viên th ự c hi ệ n: Tr ầ n Ng ọ c Qu ố c Hư ớ ng d ẫ n: Nguy ễ n T ấ n Khôi 25 Bảng 2 . 2 Bảng Position Tên Mô t ả Data Type Note Id Id c ủ a b ả ng Position Char Khóa chính EntityStatus Tr ạ ng thái c ủ a m ộ t th ự c th ể Integer CreatedTime Ngày kh ở i t ạ o Date Time UpdatedTime Ngày ch ỉ nh s ử a cu ố i cùng Dat e Time Name Tên ch ứ c v ụ c ủ a nhân viên Text B ả ng 2 . 3 B ả ng Skill Tên Mô t ả Data Type Note Id Id c ủ a b ả ng Skill Char Khóa chính EntityStatus Tr ạ ng thái c ủ a m ộ t th ự c th ể Integer CreatedTime Ngày kh ở i t ạ o Da te Time UpdatedTime Ngày ch ỉ nh s ử a cu ố i cùng Date Time Name Tên kĩ năng c ủ a nhân viên Text B ả ng 2 . 4 B ả ng Skill Tên Mô t ả Data Type Note Id Id c ủ a b ả ng Char Khóa chính EntityStatus Tr ạ ng thái c ủ a m ộ t th ự c th ể Integer CreatedTime Ngày kh ở i t ạ o Date Time UpdatedTime Ngày ch ỉ nh s ử a cu ố i cùng Date Time UserId Id c ủ a User Char Khóa ngo ạ i SkillId Id c ủ a Skill Char Khóa ngo ạ i Xây d ự ng h ệ th ố n g qu ả n lí, giám sát ti ế n đ ộ công vi ệ c và d ự án t ạ i công ty Sinh viên th ự c hi ệ n: Tr ầ n Ng ọ c Qu ố c Hư ớ ng d ẫ n: Nguy ễ n T ấ n Khôi 26 B ả ng 2 . 5 B ả ng Role Tên Mô t ả Data Type Note Id Id c ủ a b ả ng Role Char Khóa chính EntityStatus Tr ạ ng thái c ủ a m ộ t th ự c th ể Integer CreatedTime Ngày kh ở i t ạ o Date Time UpdatedTime Ngày ch ỉ nh s ử a cu ố i cùng Date Time Name Tên vai trò c ủ a nhân viên Text B ả ng 2 . 6 B ả ng UserRole Tên Mô t ả Data Type Note Id Id c ủ a b ả ng UserRole Char Khóa chính EntityStatus Tr ạ ng thái c ủ a m ộ t th ự c th ể Integer CreatedTime Ngày kh ở i t ạ o Date Time UpdatedTime Ngày ch ỉ nh s ử a cu ố i cùng Date Time UserId Id c ủ a User Char Khóa ngo ạ i RoleId Id c ủ a Role Char Khóa ngo ạ i B ả ng 2 . 7 B ả ng TimeLineEvent Tên Mô t ả Data Type Note Id Id c ủ a b ả ng TimeLineEvent Char Khóa chính EntityStatus Tr ạ ng thái c ủ a m ộ t th ự c th ể Intege r CreatedTime Ngày kh ở i t ạ o Date Time UpdatedTime Ngày ch ỉ nh s ử a cu ố i cùng Date Time Event Tên s ự ki ệ n trong đ ờ i c ủ a nhân viên Text UserId Id c ủ a User Char Khóa ngo ạ i Xây d ự ng h ệ th ố n g qu ả n lí, giám sát ti ế n đ ộ công vi ệ c và d ự án t ạ i công ty Sinh viên th ự c hi ệ n: Tr ầ n Ng ọ c Qu ố c Hư ớ ng d ẫ n: Nguy ễ n T ấ n Khôi 27 B ả ng 2 . 8 B ả ng Board Tên Mô t ả Data Type Note Id

ĐẠI HỌC ĐÀ NẴNG TRƯỜNG ĐẠI HỌC BÁCH KHOA KHOA CÔNG NGHỆ THÔNG TIN

ĐẠI HỌC ĐÀ NẴNG TRƯỜNG ĐẠI HỌC BÁCH KHOA KHOA CÔNG NGHỆ THÔNG TIN

NHẬN XÉT CỦA NGƯỜI HƯỚNG DẪN

NHẬN XÉT CỦA NGƯỜI PHẢN BIỆN

- Quản lí thông tin nhân viên hiện có trong công ty

- Quản lí dự án của công ty

- Quản lí tiến độ công việc của dự án theo mô hình scrum-agile

- Quản lí thời gian biểu, chấm công của nhân viên

ĐẠI HỌC ĐÀ NẴNG

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

KHOA CÔNG NGHỆ THÔNG TIN

CỘNG HÒA XÃ HÔI CHỦ NGHĨA VIỆT NAM

Độc lập - Tự do - Hạnh phúc

NHIỆM VỤ ĐỒ ÁN TỐT NGHIỆP

Họ tên sinh viên: Trần Ngọc Quốc Số thẻ sinh viên: 102150127

1 Tên đề tài đồ án:

Xây dựng hệ thống quản lí, giám sát tiến độ công việc và dự án tại công ty

2 Đề tài thuộc diện: ☐ Có ký kết thỏa thuận sở hữu trí tuệ đối với kết quả thực hiện

3 Các số liệu và dữ liệu ban đầu:

……… ……… ……

………

… ……….… ……… ………

4 Nội dung các phần thuyết minh và tính toán: … ………

… ………

… ………

… ………

… ………

5 Các bản vẽ, đồ thị ( ghi rõ các loại và kích thước bản vẽ ): … ………

… ………

… ………

… ………

6 Họ tên người hướng dẫn: PGS.TS Nguyễn Tấn Khôi

7 Ngày giao nhiệm vụ đồ án: 05/09/2019

8 Ngày hoàn thành đồ án: 20/12/2019

Đà Nẵng, ngày 20 tháng 12 năm 2019

PGS.TS Nguyễn Tấn Khôi

i

LỜI NÓI ĐẦU

Để đạt được kết quả tốt cho đồ án lần này, chúng em đã nhân được sự giúp đỡ nhiệt

tình từ rất nhiều người Với tình cảm sâu sắc và sự chân thành, chúng em muốn bày tỏ

lòng biết ơn đối với tất cả những cá nhân, cơ quan đã giúp đỡ chúng em trong quá trình

học tập và nghiên cứu

Đầu tiên chúng em xin chân thành cảm ơn các thầy cô của trường Đại học Bách

Khoa Đà Nẵng nói chung và khoa Công Nghệ Thông Tin nói riêng đã truyền đạt những

kiến thức quý báu thông qua các giờ học trên giảng đường trong suốt những năm đại

học, tạo tiền đề cho chúng em thực hiện tốt đồ án tốt nghiệp lần này

Đặc biệt, chúng em muốn gởi lời cảm ơn sâu sắc thầy Nguyễn Tấn Khôi – giảng

viên ngành Công Nghệ Thông Tin, đã nhiệt tình hướng dẫn, chia sẻ các kinh nghiệm

quý báu, và tạo điều kiện về nhiều mặt để chúng em có thể hoàn thành tốt được đồ án

lần này

Chúng em cũng xin chân thành cảm ơn gia đình, bạn bè và nhiều người xung quanh

cũng tạo điều kiện, hỗ trợ về vật chất và tinh thần trong thời gian làm đồ án

Với kinh nghiệm giới hạn của sinh viên, bài báo cáo có thể sẽ xảy ra những sai sót

không muốn, em rất mong sự góp ý của quý thầy cô và mọi người để em rút kinh nghiệm

Em xin chân thành cảm ơn

Đà Nẵng, ngày 20 tháng 12 năm 2019

Sinh viên thực hiện

Trần Ngọc Quốc

ii

CAM ĐOAN

Chúng em xin cam đoan:

1 Nội dung trong đồ án này là do em thực hiện dưới sự hướng dẫn trực tiếp của

thầy Nguyễn Tấn Khôi

2 Các tham khảo dùng trong đồ án đều được trích dẫn rõ ràng tên tác giả, tên công

trình, thời gian, địa điểm công bố

3 Mọi hình ảnh, video demo trong báo cáo đều do bản thân nhóm tự làm, không

sao chép toàn bộ từ bất cứ nguồn nào Nếu có những sao chép không hợp lệ, vi phạm,

em xin chịu hoàn toàn trách nhiệm

Đà Nẵng, ngày 20 tháng 12 năm 2019

Sinh viên thực hiện

Trần Ngọc Quốc

iii

MỤC LỤC

TÓM TẮT

NHIỆM VỤ ĐỒ ÁN TỐT NGHIỆP

LỜI NÓI ĐẦU i

CAM ĐOAN ii

MỤC LỤC iii

DANH SÁCH CÁC HÌNH VẼ v

DANH SÁCH CÁC BẢNG vii

DANH SÁCH CÁC KÝ HIỆU, CHỮ VIẾT TẮT viii

MỞ ĐẦU 1

1 Tổng quan về đề tài 1

2 Mục đích và nhiệm vụ chính của đề tài 2

2.1 Mục đích đề tài: 2

2.2 Nhiệm vụ chính của đề tài: 2

3 Công nghệ sử dụng 2

4 Công cụ hỗ trợ 2

5 Cấu trúc đồ án 2

CHƯƠNG 1 CƠ SỞ LÝ THUYẾT 4

1.1 React Js 4

1.1.1 Giới thiệu 4

1.1.2 Virtual DOM 4

1.1.3 One-way data binding 5

1.1.4 Giới thiệu về JSX 5

1.1.5 Giới thiệu về Components 5

1.1.6 Props và State 6

1.1.7 Lifecycle 6

1.2 Redux-Saga 7

1.2.1 Giới thiệu 7

1.2.2 Side effect 7

iv

1.2.3 Generator function 7

1.2.4 Cách hoạt động 7

1.3 WEB API 8

1.3.1 ASP.NET CORE 8

1.3.2 Entity Framework 8

1.3.3 Phương thức HTTP 9

1.4 Docker 9

1.4.1 Khái niệm 9

1.4.2 Lợi ích của Docker 10

CHƯƠNG 2 PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 11

2.1 Đặt vấn đề 11

2.2 Cách chức năng chính 11

2.2.1 Quản lí thông tin nhân viên 11

2.2.2 Quản lí dự án 12

2.2.3 Quản lí công việc 13

2.2.4 Quản lí thời gian làm việc 14

2.3 Các module chính của hệ thống 15

2.4 Sơ đồ phân rã chức năng 16

2.5 Sơ đồ hoạt động 17

2.6 Luồng dữ liệu 21

2.7 Sơ đồ quan hệ 22

2.8 Thiết kế cơ sở dữ liệu 23

2.8.1 Sơ đồ quan hệ, thực thể dữ liệu 23

2.8.2 Đặc tả các bảng dữ liệu 24

CHƯƠNG 3 TRIỂN KHAI VÀ KẾT QUẢ 32

3.1 Môi trường triển khai 32

1.2 Kịch bản thử nghiệm 32

3.3 Kết quả thực hiện 33

KẾT LUẬN 40

TÀI LIỆU THAM KHẢO 1

v

DANH SÁCH CÁC HÌNH VẼ

Hình 1.1: Đặc trưng Virtual DOM 4

Hình 1.2 Các luồng dữ liệu và sự kiện trong React 5

Hình 1.3 Các luồng dữ liệu và sự kiện trong React 6

Hình 1.4 Mô tả cách thức hoạt động của Redux - Saga 8

Hình 1.5 Mô tả cách thức hoạt động của Entity Framework 9

Hình 1.6 Mô tả cách thức hoạt động của Docker 10

Hình 2.1 Sơ đồ use-case cho module quản lí nhân viên 12

Hình 2.2 Sơ đồ use-case cho module quản lí dự án 13

Hình 2.3 Sơ đồ use-case cho module quản lí tiến độ công việc trong dự án 14

Hình 2.4 Sơ đồ use-case module quản lí thời gian làm việc 15

Hình 2.5 Sơ đồ hoạt động của module quản lí nhân viên 17

Hình 2.6 Sơ đồ hoạt động của module quản lí dự án 18

Hình 2.7 Sơ đồ hoạt động của module quản lí tiến độ công việc 19

Hình 2.8 Sơ đồ hoạt động của module quản lí thời gian biểu, chấm công 20

Hình 2.9 Mô tả luồng đi của dữ liệu 21

Hình 2.10 Sơ đồ lớp cho dự án 22

Hình 2.11 Sơ đồ quan hệ, thực thể dữ liệu 23

Hình 3.1: Màn hình Login 33

Hình 3.2 Quản lí nhân viên 33

Hình 3.3 Xem thông tin cá nhân của nhân viên 34

Hình 3.4 Chỉnh sửa thông tin cá nhân 34

Hình 3.5 Lọc và tìm kiếm nhân viên dựa trên kĩ năng, vị trí, tên, … 35

Hình 3.6 Màn hình quản lí các dự án 35

Hình 3.7 Tạo một dự án mới 36

Hình 3.8 Thông tin chi tiết của một công việc 36

vi

Hình 3.9 Tạo một công việc mới 37

Hình 3.10 Giao việc cho thành viên trong dự án 37

Hình 3.11 Thêm nhãn cho công việc để dễ quản lí 38

Hình 3.12 Xóa một công việc 38

Hình 3.13 Các tùy chọn cho một bản 38

Hình 3.14 Quản lí thời gian 39

Hình 3.15 Ghi lại thời gian đã dành cho một công việc 39

vii

DANH SÁCH CÁC BẢNG

Bảng 2.1 Bảng User 24

Bảng 2.3 Bảng Position 25

Bảng 2.4 Bảng Skill 25

Bảng 2.5 Bảng Skill 25

Bảng 2.6 Bảng Role 26

Bảng 2.7 Bảng UserRole 26

Bảng 2.8 Bảng TimeLineEvent 26

Bảng 2.9 Bảng Board 27

Bảng 2.10 Bảng Phase 27

Bảng 2.11 Bảng BoardUser 28

Bảng 2.12 Bảng Task 28

Bảng 2.13 Bảng Attachment 29

Bảng 2.14 Bảng Todo 29

Bảng 2.15 Bảng Label 29

Bảng 2.16 Bảng TaskLabel 30

Bảng 2.17 Bảng WorkLog 30

Bảng 2.18 Bảng Comment 30

Bảng 2.19 Bảng TaskAssignee 31

Bảng 2.20 Bảng TaskAction 31

viii

DANH SÁCH CÁC KÝ HIỆU, CHỮ VIẾT TẮT

API Application Programming Interface

SQL Structured Query Language

UI User Interface

DOM Document Object Model

ASP Active Server Pages

OS Operating System

HTTP HyperText Transer Protocol

AJAX Asynchromous Javascript and XML

IoT Internet of Things

TCP Transmission Control Protocol

IP Internet Protocol

Xây dựng hệ thống quản lí, giám sát tiến độ công việc và dự án tại công ty

Sinh viên thực hiện: Trần Ngọc Quốc Hướng dẫn: Nguyễn Tấn Khôi 1

MỞ ĐẦU

Bài toán của các nhà quản trị là làm sao kiểm soát những công việc và dự án đang diễn ra, tối ưu nguồn lực có hạn và nâng cao năng suất doanh nghiệp Để giải được bài toán này, các phần mềm quản lý công việc giải quyết 2 việc:

- Thứ nhất, minh bạch hóa quá trình giao việc - nhận việc giữa nhà quản lý và nhân viên, từ đó minh bạch hóa trách nhiệm;

- Thứ hai, giúp nhà quản lý lên kế hoạch và giúp nhân viên cộng tác, làm việc tập trung trên một nền tảng duy nhất

Tóm lại, lợi ích của việc sử dụng một phần mềm quản lý công việc có thể quan sát

ở 2 góc độ Đối với nhân viên, phần mềm giúp họ:

- Nhìn thấy được tất cả công việc của mình, không sót việc

- Biết đâu là những việc cần ưu tiên

- Tính toán và sắp xếp được thời gian làm việc hiệu quả

- Cộng tác với đồng đội để hoàn thành công việc với chất lượng tốt nhất Đối với nhà quản lý thì một phần mềm quản lý công việc đem lại những lợi ích như sau:

- Thấy được tổng quan công việc và dự án của tất cả bộ phận

- Ra quyết định và xử lý các vấn đề phát sinh một cách kịp thời

- Sắp xếp, phân bổ nguồn lực (nhân sự + thời gian) một cách hiệu quả

- Tất cả công việc, dự án đều được hoàn thành đúng thời hạn với chất lượng tốt nhất

Hiện nay, trên thị trường có khá nhiều cái tên nổi bật như Trello, Asana, Wrike, Jira,… Tuy nhiên, phần lớn những ứng dụng trên đều tồn tại một số vấn đề bất cập như:

- Không phù hợp với qui trình làm việc của công ty

- Khuyết thiếu một số chức năng cần thiết

- Chi phí cao

Do đó, cần thiết xây dựng một hệ thống để quản lí, giám sát tiến độ công việc, dự

án phù hợp cho quy trình làm việc của công ty, dễ tùy chỉnh, đồng thời tối thiếu chi phí phát sinh cho công ty

Xây dựng hệ thống quản lí, giám sát tiến độ công việc và dự án tại công ty

Sinh viên thực hiện: Trần Ngọc Quốc Hướng dẫn: Nguyễn Tấn Khôi 2

2.1 Mục đích đề tài:

Xây dựng một hệ thống giúp cho công ty có thể dễ dàng thực hiện các công việc sau:

- Tìm kiếm và truy xuất thông tin nhân viên của công ty

- Quản lí, giao việc và giám sát tiến độ công việc cho các dự án

- Quản lí thời gian làm việc của nhân viên

2.2 Nhiệm vụ chính của đề tài:

Hệ thống sử dụng những công nghệ mới và phổ biến trên thị trường:

- React JS

- Redux & Saga

- ASP NET CORE Web API

- Visual Studio Code

- SQL Server Management System

- Postman

- Git Kraken

- Filezilla

MỞ ĐẦU- Giới thiệu tổng quan về đồ án, lý do chọn đề tài Trình bày về mục

đích, nhiệm vụ và cách thức tiến hành để đạt được kết quả cao Tóm tắt nội dung của những phần tiếp theo

Xây dựng hệ thống quản lí, giám sát tiến độ công việc và dự án tại công ty

Sinh viên thực hiện: Trần Ngọc Quốc Hướng dẫn: Nguyễn Tấn Khôi 3

Chương 1: LÝ THUYẾT VÀ CÔNG NGHỆ- Chương này giới thiệu về tất cả

cơ sở lý thuyết và công nghệ sử dụng trong đồ án

Chương 2: PHÂN TÍCH VÀ THIẾT KẾ- Chương này trình bày về tổng quan

hệ thống, việc phân tích, đặc tả yêu cầu, và thiết kế hệ thống Trình bày về phương pháp phát hiện té ngã được lựa chọn

Chương 3: TRIỂN KHAI VÀ KẾT QUẢ- Chương này trình bày về kết quả của

việc lập trình của hệ thống, các hình ảnh thực tế và các bước cài đặt để sử dụng hệ thống

KẾT LUẬN- Nêu lên kết luận của nhóm về đồ án, các bài học trong quá trình thực

hiện, nên lên nhận xét về các vấn đề còn tồn tại và các đề xuất

TÀI LIỆU THAM KHẢO- Trình bày về các thông tin cần thiết, liên quan đến

các nguồn trích dẫn trong đồ án

Xây dựng hệ thống quản lí, giám sát tiến độ công việc và dự án tại công ty

Sinh viên thực hiện: Trần Ngọc Quốc Hướng dẫn: Nguyễn Tấn Khôi 4

CHƯƠNG 1 CƠ SỞ LÝ THUYẾT

1.1.1 Giới thiệu

React là một thư viện UI phát triển tại Facebook để hỗ trợ việc xây dựng những thành phần (components) UI có tính tương tác cao, có trạng thái và có thể sử dụng lại được React được sử dụng tại Facebook trong production, và đồng thời ứng dụng instagram cũng được viết hoàn toàn trên React

Một trong những điểm hấp dẫn của React là thư viện này không chỉ hoạt động trên phía client, mà còn được render trên server và có thể kết nối với nhau React so sánh sự thay đổi giữa các giá trị của lần render này với lần render trước và cập nhật ít thay đổi

nhất trên DOM Trươc khi đến cài đặt và cấu hình, chúng ta sẽ đi đến một số khái niệm

cơ bản:

1.1.2 Virtual DOM

Công nghệ DOM ảo giúp tăng hiệu năng cho ứng dụng Việc chỉ node gốc mới có trạng thái và khi nó thay đổi sẽ tái cấu trúc lại toàn bộ, đồng nghĩa với việc DOM tree cũng sẽ phải thay đổi một phần, điều này sẽ ảnh hưởng đến tốc độ xử lý React JS sử dụng Virtual DOM (DOM ảo) để cải thiện vấn đề này.Virtual DOM là một object Javascript, mỗi object chứa đầy đủ thông tin cần thiết để tạo ra một DOM, khi dữ liệu thay đổi nó sẽ tính toán sự thay đổi giữa object và tree thật, điều này sẽ giúp tối ưu hoá việc re-render DOM tree thật

Hình 1.1 Đặc trưng Virtual DOM

Xây dựng hệ thống quản lí, giám sát tiến độ công việc và dự án tại công ty

Sinh viên thực hiện: Trần Ngọc Quốc Hướng dẫn: Nguyễn Tấn Khôi 5

1.1.3 One-way data binding

React sử dụng cơ chế one-way data binding – luồng dữ liệu 1 chiều Dữ liệu được truyền từ parent đến child thông qua props Luồng dữ liệu đơn giản giúp chúng ta dễ dàng kiểm soát cũng như sửa lỗi

Hình 1.2 Các luồng dữ liệu và sự kiện trong React

Với các đặc điểm ở trên, React dùng để xây dựng các ứng dụng lớn mà dữ liệu của chúng thay đổi liên tục theo thời gian Dữ liệu thay đổi thì hầu hết kèm theo sự thay đổi

về giao diện Ví dụ như Facebook: trên Newsfeed của bạn cùng lúc sẽ có các status khác nhau và mỗi status lại có số like, share, comment liên tục thay đổi Khi đó React sẽ rất hữu ích để sử dụng

1.1.4 Giới thiệu về JSX

JSX là một dạng ngôn ngữ cho phép viết các mã HTML trong Javascript Đặc điểm: Faster: Nhanh hơn JSX thực hiện tối ưu hóa trong khi biên dịch sang mã Javacsript Các mã này cho thời gian thực hiện nhanh hơn nhiều so với một mã tương đương viết trực tiếp bằng Javascript Safer: an toàn hơn Ngược với Javascript, JSX là kiểu statically-typed, nghĩa là nó được biên dịch trước khi chạy, giống như Java, C++

Vì thế các lỗi sẽ được phát hiện ngay trong quá trình biên dịch Ngoài ra, nó cũng cung cấp tính năng gỡ lỗi khi biên dịch rất tốt Easier: Dễ dàng hơn JSX kế thừa dựa trên Javascript, vì vậy rất dễ dàng để cho các lập trình viên Javascripts có thể sử dụng

1.1.5 Giới thiệu về Components

React được xây dựng xung quanh các component, chứ không dùng template như các framework khác Trong React, chúng ta xây dựng trang web sử dụng những thành phần (component) nhỏ Chúng ta có thể tái sử dụng một component ở nhiều nơi, với các trạng thái hoặc các thuộc tính khác nhau, trong một component lại có thể chứa thành

Xây dựng hệ thống quản lí, giám sát tiến độ công việc và dự án tại công ty

Sinh viên thực hiện: Trần Ngọc Quốc Hướng dẫn: Nguyễn Tấn Khôi 6

phần khác Mỗi component trong React có một trạng thái riêng, có thể thay đổi, và React

sẽ thực hiện cập nhật component dựa trên những thay đổi của trạng thái Mọi thứ React đều là component Chúng giúp bảo trì mã code khi làm việc với các dự án lớn Một react component đơn giản chỉ cần một method render Có rất nhiều methods khả dụng khác, nhưng render là method chủ đạo

1.1.6 Props và State

Props: giúp các component tương tác với nhau, component nhận input gọi là props,

và trả thuộc tính mô tả những gì component con sẽ render Prop là bất biến

State: thể hiện trạng thái của ứng dụng, khi state thay đồi thì component đồng thời render lại để cập nhật UI

Xây dựng hệ thống quản lí, giám sát tiến độ công việc và dự án tại công ty

Sinh viên thực hiện: Trần Ngọc Quốc Hướng dẫn: Nguyễn Tấn Khôi 7

1.2.1 Giới thiệu

Redux-Saga là một thư viện redux middleware, giúp quản lý những side effect trong ứng dụng redux trở nên đơn giản hơn Bằng việc sử dụng tối đa tính năng Generators (function*) của ES6, nó cho phép ta viết async code nhìn giống như là synchronos

1.2.2 Side effect

Ta đã biết tất cả những xử lý ở REDUCER đều phải là synchronous và pure tức chỉ là xử lý đồng bộ Nhưng trong ứng dụng thực tế thì cần nhiều hơn vậy ví dụ như asynchronous (thực hiện một số việc như gọi một hàm AJAX để fetch dữ liệu về nhưng cần đợi kết quả chứ kết quả không trả về ngay được) hoặc là impure (thực hiện lưu, đọc

dữ liệu ra bên ngoài như lưu dữ liệu ra ổ cứng hay đọc cookie từ trình duyệt… đều cần đợi kết quả) Những việc như thế trong lập trình hàm gọi nó là side effects

1.2.3 Generator function

Khác với function bình thường là thực thi và trả về kết quả, thì Generator function

có thể thực thi, tạm dừng trả về kết quả và thực thi bằng tiếp Từ khóa để làm được việc đấy là “YIELD” Generator được đưa ra cách đây mấy chục năm nhưng đến ES2015 mới được bổ sung, các ngôn ngữ khác đã được bổ sung tính năng này như C#, PHP, Ruby, C++, R…

1.2.4 Cách hoạt động

Đối với logic của saga, ta cung cấp một hàm cho saga, chính hàm này là hàm đứng

ra xem xét các action trước khi vào store, nếu là action quan tâm thì nó sẽ thực thi hàm

sẽ được thực thi, nếu bạn biết khái niệm hook thì hàm cung cấp cho saga chính là hàm hook Điều đặc biệt của hàm hook này nó là một generator function, trong generator function này có yield và mỗi khi yield ta sẽ trả về một plain object Object trả về đó được gọi Effect object effect object này đơn giản chỉ là một object bình thường nhưng chứa thông tin đặc biệt dùng để chỉ dẫn middleware của Redux thực thi các hoạt động khác ví dụ như gọi một hàm async khác hay put một action tới store Để tạo ra effect object đề cập ở trên thì ta gọi hàm từ thư viện của saga là redux-saga/effects

Xây dựng hệ thống quản lí, giám sát tiến độ công việc và dự án tại công ty

Sinh viên thực hiện: Trần Ngọc Quốc Hướng dẫn: Nguyễn Tấn Khôi 8

Hình 1.4 Mô tả cách thức hoạt động của Redux - Saga

1.3.1 ASP.NET CORE

ASP.NET Core là một open-source mới và framework đa nền tảng (cross-platform) cho việc xây dựng những ứng dụng hiện tại dựa trên kết nối đám mây, giống như web apps, IoT và backend cho mobile Do là một framework đa nền tảng nên NET hỗ trợ hầu hết các hệ điều hành như Windows, Linux, macOS

Ứng dụng ASP.NET Core có thể chạy trên phiên bản đầy đủ của NET Framework

Nó được thiết kế để cung cấp và tối ưu development framework cho những dụng cái mà được triển khai trên đám mây (clound) hoặc chạy on-promise

DotNET Core framework bao gồm NET Core, ASP.NET Core, Entity Framework Core Các công nghệ này khác với NET Framework ở chỗ chúng chạy CoreCLR runtime(used in Universal Windows Platform)

1.3.2 Entity Framework

Entity Framework được ra mắt lần đầu tiên vào năm 2008, giúp cho việc truy vấn

cơ sỡ dữ liệu quan hệ trở lên đơn giản, dễ học, giúp giảm bớt thời gian phát triển dự án xuống đáng kể

Entity Framework là một Object Relational Mapper(ORM) một công cụ mapping giữa các objects trong ứng dụng với các tables và columns của cơ sở dữ liệu quan hệ:

- Entity Framework là một Open source ORM Framework

- Một ORM có thể tạo kết nối đến một Relational database, thực thi cậu lệnh

và trả về kết quả là các objects trong ứng dụng

Xây dựng hệ thống quản lí, giám sát tiến độ công việc và dự án tại công ty

Sinh viên thực hiện: Trần Ngọc Quốc Hướng dẫn: Nguyễn Tấn Khôi 9

- Một ORM sẽ theo dõi sự thay đổi dữ liệu,trạng thái của các objects trả về ở trên, mỗi khi có sự thay đổi dữ liệu từ những objects này ORM sẽ gửi những thay đổi đó đến Relational database

Hiểu một cách đơn giản thì ORM là công cụ tự động tạo ra các Objects trong ứng dựng

từ tables, views, store procedures của một Relational Database nào đó

Hình 1.5 Mô tả cách thức hoạt động của Entity Framework

1.3.3 Phương thức HTTP

HTTP (Tiếng Anh: HyperText Transfer Protocol - Giao thức truyền tải siêu văn

bản) là một trong năm giao thức chuẩn của mạng Internet, được dùng để liên hệ thông tin giữa Máy cung cấp dịch vụ (Web server) và Máy sử dụng dịch vụ (Web client) trong

mô hình Client/Server dùng cho World Wide Web-WWW, HTTP là một giao thức

thuộc tầng ứng dụng, nằm trên cặp giao thức tầng giao vận & tầng mạng là TCP/IP

1.4.1 Khái niệm

Docker - đây là một công cụ tạo môi trường được packaging (Container) trên máy tính độc lập mà không làm tác động tới môi máy, môi trường trong Docker sẽ chạy độc lập Mỗi containers chứa ứng dụng gồm chứa các thư viện riêng, nhưng kernel được chia sẻ với các containers khác Mỗi kernel được chạy trong các môi trường độc lập với nhau Docker infrastructure chạy được trên mọi máy tính, đám mây hay nền tảng nào

Vì vậy bạn có thể vận chuyển ứng dụng đến bất cứ đâu và không cần phải quan tâm đến môi trường phát triển, thiếu thư viện, Tựu chung lại thì Docker rất tốt tại việc xây dựng và chia sẻ Disk Image qua hệ thống Docker Index, là một phần mềm quản lý cơ

sở hạ tầng, làm việc tốt vời với các công cụ quản lý file config (vd: Chef, Puppet), sử dụng btrfs để giảm sát các file hệ thống và có thể được chia sẻ với user khác (Như cách

Xây dựng hệ thống quản lí, giám sát tiến độ công việc và dự án tại công ty

Sinh viên thực hiện: Trần Ngọc Quốc Hướng dẫn: Nguyễn Tấn Khôi 10

hoạt động của Git) và có một bộ kho trung tâm của các Disk Images (có thể được public hoặc private), điều này cho phép bạn dễ dàng chạy trên nhiều hệ điều hành khác nhau (Ubuntu, Centos, Fedora, Gentoo)

Hình 1.6 Mô tả cách thức hoạt động của Docker

1.4.2 Lợi ích của Docker

- Thời gian khởi động nhanh

- Gói gọn mọi environment cần thiết trong một container, có thể chạy container trên mọi môi trường win, linux, macos, …

- Tốc độ build nhanh hơn

- Dễ dàng thiết lập môi trường làm việc khi có vấn đề, sự cố với server

- Giữ cho workspace sạch sẽ hơn

- Các container có thể chạy độc lập

- Có thể chạy nhiều container trên cùng một máy

Xây dựng hệ thống quản lí, giám sát tiến độ công việc và dự án tại công ty

Sinh viên thực hiện: Trần Ngọc Quốc Hướng dẫn: Nguyễn Tấn Khôi 11

CHƯƠNG 2 PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG

Hệ thống cần giải quyết được bài toán tối ưu quá trình quản lí dự án của công ty Hiện tại công ty đang vận hành các dự án theo mô hình scrum-agile nên hệ thống cần đáp ứng việc tạo mới các dự án, quản lí các dự án theo mô hình này bằng các cột tiến trình Các tiến trình có thể tùy chỉnh và thay đổi để phù hợp với từng dự án Đồng thời việc tạo mới, quản lí các công việc phải hợp lí, logic

Đồng thời, hệ thống cũng phải giải quyết được bài toán quản lí thời gian biểu, chấm công của công ty Nhân viên có thể quản lí được thời gian biểu của mình qua việc lưu lại thời gian làm việc trong ngày, tuần, tháng của mình Admin có thể quan sát, theo dõi được lịch làm việc và thời gian biểu của toàn bộ nhân viên trong công ty

Việc xem xét thông tin cá nhân của nhân viên cũng phải dễ dàng, dễ tìm kiếm, lọc,… để thuận lợi hơn cho qui trình quản lí

2.2.1 Quản lí thông tin nhân viên

Để thuận lợi cho việc truy xuất cũng như quản lí thông tin các nhân viên hiện thời của công ty, hệ thống sẽ cho phép:

- Nhân viên quản lí, cập nhật thông tin cá nhân của mình

- Xem thông tin của những nhân viên hiện có trong công ty

- Tìm kiếm nhân viên theo tên, chức vụ hiện thời, hoặc bằng các kỹ năng hiện

có của nhân viên

- Admin có thể tạo mới tài khoản cho nhân viên mới, chỉnh sửa, khóa hoặc xóa tài khoản của nhân viên ra khỏi hệ thống

Xây dựng hệ thống quản lí, giám sát tiến độ công việc và dự án tại công ty

Sinh viên thực hiện: Trần Ngọc Quốc Hướng dẫn: Nguyễn Tấn Khôi 12

Hình 2.1 Sơ đồ use-case cho module quản lí nhân viên

2.2.2 Quản lí dự án

Hệ thống sẽ cung cấp công cụ để quản lý các dự án của công ty:

- Nhân viên có thể xem các dự án mà mình đang tham gia

- Nhân viên có thể tạo mới một dự án

- Nhân viên có thể thêm người vào dự án

- Nhân viên có thể thêm các nhãn màu cho dự án để dễ phân biệt

- Nhân viên có thể chỉnh sửa thông tin của dự án

- Nhân viên có thể xem hồ sơ của các thành viên trong dự án

- Giám đốc / trưởng bộ phận (Admin) có thể quản lí, giám sát toàn bộ dự án của công ty

Xây dựng hệ thống quản lí, giám sát tiến độ công việc và dự án tại công ty

Sinh viên thực hiện: Trần Ngọc Quốc Hướng dẫn: Nguyễn Tấn Khôi 13

Hình 2.2 Sơ đồ use-case cho module quản lí dự án

2.2.3 Quản lí công việc

Hệ thống sẽ cung cấp công cụ để quản lý tiến độ công việc các dự án của công ty theo dạng scrum board:

- Mọi thành viên trong nhóm có quản lí tiến độ công việc của dự án bằng cách thêm các luồng thực hiện công việc, thêm mới và quản lí các nhiệm vụ, công việc

- Thành viên có thể giao, nhận các công việc

- Thành viên có thể quan sát tiến độ của dự án thông qua tổng thời gian ước lượng của toàn bộ công việc và lượng thời gian thực tế đã tiêu tốn cho những công việc trong dự án