Xây Dựng Trang Web Mạng Xã Hội Công Ty Sử Dụng Angular 8 Và Asp.net Core.pdf

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH ĐỒ ÁN TỐT NGHIỆP NGÀNH CÔNG NGHỆ THÔNG TIN XÂY DỰNG TRANG WEB MẠNG XÃ HỘI CÔNG TY SỬ DỤNG ANGULAR 8 VÀ ASP NET CORE GVHD TH[.]

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH ĐỒ ÁN TỐT NGHIỆP NGÀNH CÔNG NGHỆ THÔNG TIN XÂY DỰNG TRANG WEB MẠNG XÃ HỘI CÔNG TY SỬ DỤNG ANGULAR VÀ ASP.NET CORE GVHD:THS NGUYỄN TRẦN THI VĂN SVTH:BÙI MINH HUY MSSV:16110084 SVTH:LÂM PHƯỚC BẢO MSSV:16110016 SKL007046 Tp Hồ Chí Minh, tháng 07/2020 z TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP.HCM KHOA ĐÀO TẠO CHẤT LƯỢNG CAO ĐỒ ÁN TỐT NGHIỆP XÂY DỰNG TRANG WEB MẠNG XÃ HỘI CÔNG TY SỬ DỤNG ANGULAR VÀ ASP.NET CORE SVTH : BÙI MINH HUY MSSV : 16110084 SVTH : LÂM PHƯỚC BẢO MSSV : 16110016 Khóa : 2016 – 2020 Ngành : CÔNG NGHỆ THÔNG TIN GVHD : ThS NGUYỄN TRẦN THI VĂN TP Hồ Chí Minh, tháng 07 năm 2020 z TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP.HCM KHOA ĐÀO TẠO CHẤT LƯỢNG CAO ĐỒ ÁN TỐT NGHIỆP XÂY DỰNG TRANG WEB MẠNG XÃ HỘI CÔNG TY SỬ DỤNG ANGULAR VÀ ASP.NET CORE SVTH : BÙI MINH HUY MSSV : 16110084 SVTH : LÂM PHƯỚC BẢO MSSV : 16110016 Khóa : 2016 – 2020 Ngành : CƠNG NGHỆ THÔNG TIN GVHD : ThS NGUYỄN TRẦN THI VĂN TP Hồ Chí Minh, tháng 07 năm 2020 CỘNG HỊA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh phúc *** -TP Hồ Chí Minh, ngày 01 tháng 07 năm 2020 NHIỆM VỤ ĐỒ ÁN TỐT NGHIỆP Họ tên sinh viên MSSV Lớp Lâm Phước Bảo 16110016 16110CLST3 Bùi Minh Huy 16110084 16110CLST1 Ngành: Công nghệ thông tin Giáo viên hướng dẫn: ThS Nguyễn Trần Thi Văn ĐT: 0983 11 80 25 Ngày nhận đề tài: 24/02/2020 Ngày nộp đề tài: 01/07/2020 Tên đề tài: Xây dựng trang web mạng xã hội công ty sử dụng Angular ASP.NET Core Các số liệu tài liệu ban đầu:  Nghiên cứu viết báo cáo mạng xã hội  Gồm có nội dung sau: - Định nghĩa mạng xã hội - Lợi ích mạng xã hội - Nhược điểm mạng xã hội - Số liệu mạng xã hội - Các trang mạng xã hội ứng dụng mơ hình doanh nghiệp - Khảo sát trạng số mạng xã hội điểm thưởng phổ biến Nội dung thực đề tài:  Lý thuyết: - Nghiên cứu sử dụng ASP.NET Core, Angular RESTful API - Nghiên cứu sử dụng dịch vụ điện toán đám mây Azure - Nghiên cứu sử dụng RESTful API i  Khảo sát trang mạng xã hội điểm thưởng Thực hành: Phân tich thiết kế tính cho trang mạng xã hội điểm thưởng công ty Tiến hành xây dựng tính cho trang web Kiểm thử Deploy ứng dụng sử dụng dịch vụ điện toán đám mây Azure Báo cáo sản phẩm Sản phẩm:  Trang mạng xã hội điểm thưởng dành cho nhân viên công ty  Trang quản lí thơng tin mạng xã hội điểm thưởng công ty TRƯỞNG NGÀNH GIÁO VIÊN HƯỚNG DẪN (Ký ghi rõ họ tên) (Ký ghi rõ họ tên) ii CỘNG HOÀ XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh Phúc ******* PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN Họ tên Sinh viên : …………………………… MSSV 1: ……………………………… Họ tên Sinh viên : …………………………… MSSV 2: ……………………………… Ngành: Công nghệ Thông tin Tên đề tài : Xây dựng trang web mạng xã hội công ty sử dụng Angular ASP.NET Core Họ tên Giáo viên hướng dẫn : NHẬN XÉT Về nội dung đề tài & khối lượng thực : Ưu điểm : Khuyết điểm : Đề nghị cho bảo vệ hay không ? Đánh giá loại : Điểm : ( Bằng chữ: ) Tp Hồ Chí Minh, ngày tháng năm 2020 Giáo viên hướng dẫn (Ký & ghi rõ họ tên) iii CỘNG HOÀ XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh Phúc ******* PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN Họ tên Sinh viên : …………………………… MSSV 1: ……………………………… Họ tên Sinh viên : …………………………… MSSV 2: ……………………………… Ngành: Công nghệ Thông tin Tên đề tài : Xây dựng trang web mạng xã hội công ty sử dụng Angular ASP.NET Core Họ tên Giáo viên phản biện: NHẬN XÉT Về nội dung đề tài & khối lượng thực : Ưu điểm : Khuyết điểm : Đề nghị cho bảo vệ hay không ? Đánh giá loại : Điểm : ( Bằng chữ: ) Tp Hồ Chí Minh, ngày tháng năm 2020 Giáo viên phản biện (Ký & ghi rõ họ tên) iv LỜI CẢM ƠN Sự thành công gắn liền với hỗ trợ, giúp đỡ người xung quanh giúp đỡ hay nhiều, trực tiếp hay gián tiếp Trong suốt thời gian từ bắt đầu làm khóa luận tốt nghiệp đến nay, nhóm nhận quan tâm, bảo, giúp đỡ quý Thầy Cô bạn bè xung quanh Với lịng biết ơn vơ sâu sắc, nhóm xin gửi lời cảm ơn chân thành từ đáy lịng đến q Thầy Cơ trường bỏ nhiều tâm huyết truyền đạt kiến thức quý báu để chúng em trau dồi vốn hiểu biết thời gian học tập trường Đặc biệt, chúng em xin gửi lời cảm ơn sâu sắc tới Thạc sĩ Nguyễn Trần Thi Văn – Giảng Viên trực tiếp hướng dẫn bảo chúng em nhiều q trình làm khóa luận tốt nghiệp Trong q trình học tập, làm khóa luận tốt nghiệp, trình làm báo cáo khóa luận tốt nghiệp, khó tránh khỏi sai sót, mong Thầy Cơ bỏ qua Đồng thời trình độ lý luận kinh nghiệm thực tiễn hạn chế nên báo cáo tránh khỏi thiếu sót, em mong nhận ý kiến đóng góp Thầy Cơ để chúng em học thêm nhiều kinh nghiệm trước rời khỏi giảng đường đại học bước vào đời Xin chân thành cảm ơn ! v TÓM TẮT BẰNG TIẾNG VIỆT Các vấn đề nghiên cứu  Tìm hiểu Angular, ASP.NET Core RESTFUL API  Tìm hiểu dịch vụ App service, Blob storage,… Azure hỗ trợ trình deploy lưu trữ liệu  Tìm hiểu mạng xã hội nhu cầu sử dụng mạng xã hội doanh nghiệp  Tìm hiểu văn hóa giúp đỡ cơng ty nhu cầu tán thưởng giúp đỡ nhận giúp đỡ Các vấn đề giải đề tài  Xây dựng nơi cho phép nhân viên tỏ lịng biết ơn với thơng qua việc tặng điểm đổi quà đồng thời nơi nhân viên giải trí qua đăng chat với  Bảo mật thông tin liệu chia sẻ nhân viên công ty  Phân quyền nhân viên truy cập trang công ty Các phương pháp giải vấn đề  Xây dựng ứng dụng web tương tự mạng xã hội với chức cho phép nhân viên tặng điểm cho đổi quà từ điểm  Xây dựng qui định cho tặng điểm phân quyền truy cập vào trang  Xây dựng trang quản lí cho trình đổi quà tặng điểm  Sử dụng dịch vụ lưu trữ Azure để lưu trữ bảo mật liệu chia sẻ nhân viên cơng ty Kết đạt  Hồn thành ứng dụng web mạng xã hội có chức trao tặng điểm nhận quà nội nhân viên cơng ty  Đảm bảo an tồn bảo mật nhân viên công ty Kết luận Với phần tính trang mạng xã hội kết hợp tính cho tặng điểm đổi quà, ứng dụng web Bonus sinh để góp phần nâng cao tinh thần tập thể nhân viên cơng ty vi TĨM TẮT BẰNG TIẾNG ANH (ABSTRACT) Researches to conduct:  Do the research about Angular, ASP.NET core and RESTFUL API  Do the research about App service, Blob storage,… from Azure for the purpose of supporting the process of deployment and data storage  Do the research about social networks  Do the research about culture of supporting each other and demand of being rewarded after doing someone a favor Problems to solve:  Build up a place where staff can show their gratitude to others through giving away points and then use points to redeem rewards or gifts, also, staff can relax by surfing newsfeeds and chat with others  Information security and data sharing between staff in the organization  Authorization and access control to pages in the company Solutions:  Implement a web app like a social network with the main features that allow giving points to others and redeeming rewards from received points  Establish the policies for access control and authorization  Implement admin pages to manage reward requests and giving point activities  Use storage services from Azure to handle storing and security Achievements:  Implement sucessfully the social network website for bussiness with giving points and rewarding as the main features  Ensure the security of staff’s information in the company Conclusion: With the combination of some features from social network website and great features of reward redemption and point-giving, our social network website has been successfully built to promote the solidarity of staff in a company vii Chương 5: Phân tích thiết kế reward hiển thị lên Sau click vào cửa số popup hiển thị lên để xác nhận hành động xóa 25 Nút xóa Button + Nhấn “Yes” đồng ý xóa + Nhấn “No” muốn hủy bỏ hành động 26 27 Danh sách trang Số phần tử trang Pagination Dropdown Khi click vào số trang bất kì, bảng biểu làm Bảng biểu làm với điều kiện cũ với số trang số trang chọn Khi click vào dấu “đổ xuống” danh sách hiển thị để chọn Bảng biểu làm số phần tử hiển thị với điều kiện cũ bảng với phần tử số Khi click chọn vừa chọn vào lựa chọn (option) bảng làm 93 Chương 5: Phân tích thiết kế 5.3.2.4 Màn hình quản lí award Hình 5.15 Màn hình quản lí reward 94 Chương 5: Phân tích thiết kế Bảng 5.18 Đặc tả hình award Tên Định Tham Hành động đối tượng dạng Chiếu (khi click, ) Ghi Số Icon phần thưởng Icon Khi click vào chuyển đến trang quản lí phần thưởng (Award) Icon Khi click vào thực chức tạo phần thưởng (Award) Biểu tượng dấu “+” Nút tạo phần thưởng Button (Award) Khi click vào thực chức tạo phần thưởng Tab manual Tab Khi click vào trang tab quản lí manual award Tab Khi click vào trang tab quản lí auto award Tab Khi click vào trang tab quản lí claimable award Tab auto Tab claimable Cột tên Active Text Thể phần thưởng cịn hoạt động 95 Chương 5: Phân tích thiết kế Cột tên Name Text Thể tên phần thưởng Cột tên reason Text Thể lí nhận phần thưởng 10 Cột tên budget period Text Thời hạn để nhận phần thưởng 11 Cột tên budget Text Thể ngân sách Text Thể hành động thực với đối tượng phần thưởng 12 13 Cột tên Action Toggle Toggle Khi click vào bật tắt chế độ trạng thái phần thưởng Màu xanh bật Toggle Khi click vào bật tắt chế độ trạng thái phần thưởng Màu xám tắt 14 Toggle 15 Avatar phần Image thưởng 16 Tên phần thưởng Text 96 Chương 5: Phân tích thiết kế 17 Lí nhận Text phần thưởng 18 Thời gian nhận phần thưởng Text 19 Số tiền qui đổi Number 20 Biểu tượng chỉnh sửa 21 Nút Edit Icon Khi click vào xuất modal giúp chỉnh sửa phần thưởng Button Khi click vào xuất modal giúp chỉnh sửa aw phần thưởng ard 97 Chương 6: Cài đặt kiểm thử Chương 6: CÀI ĐẶT VÀ KIỂM THỬ 6.1 Cài đặt 6.1.1 Các công cụ hỗ trợ     Các IDE dùng để code debugging: Visual Studio, Visual Studio Code Trình quản lý sở liệu: Microsoft SQL Server Management Studio Phần mềm vẽ lượt đồ UML: Enterprise Architect Quản lí phiên mã nguồn: Gitlab 6.1.2 Các thư viện bổ trợ  SerialLog: nuget package cho phép ứng dụng Net ghi lại nội dung vào tệp  Swagger: nuget package cho phép quản lý tất API hệ thống tạo Cung cấp UI thuận lợi cho việc chạy thử API  Jwt Authentication: JSON Web Token (JWT) tiêu chuẩn mở (RFC 7519) định nghĩa cách thức truyền tin an toàn thành viên đối tượng JSON  JWT: ứng dụng vào chức liên quan đến việc xác thực phân quyền  AutoMapper: thư viên thơng dụng hữu ích việc ánh map thuộc từ object ban đầu sang object khác  Hangfire: Thư viện hỗ trợ thực thi tác vụ ngầm ứng dụng net core 98 Chương 6: Cài đặt kiểm thử 6.2 Kiểm thử chức 6.2.1 Kiểm thử chức thêm phần quà Bảng 6.1 Test case thêm reward Test AddReward-1A Case ID AddReward – Positive Test Test Case Description High test case Priority PostPre-Requisite Thông tin reward hợp lệ NA Requisite Test Execution Steps: Test Scenario AddReward-1 No Inputs Action Expected Output Actual Output Test Test Result Comments Username Trang Đăng nhập với Trang quản quản lí Đạt quyền admin passsword lí xuất xuất admin Trang Truy cập menu, Trang quản quản lí click vào nút lí reward Đạt reward quản lí reward xuất xuất Modal Modal thêm Click vào nút thêm reward xuất Đạt “Thêm” reward xuất Ref: Bảng Điền đầy đủ 93 thông tin reward Dataset thêm reward Modal Modal biến biến mất, mất, thông thông báo Đạt báo thành thành công công 99 Chương 6: Cài đặt kiểm thử Dataset Bảng 6.2 Dataset cho test case thêm reward Tên Kẹo socola Loại phần thưởng Mô tả REWARD_CATE_1 Quà giáng sinh Số điểm 100 Hình ảnh Chọn từ máy 6.2.2 Kiểm thử chức xóa phần quà Bảng 6.3 Test case xóa phần quà Test DelReward -1A Case ID DelReward – Positive Test High Test Case Description test case Priority PostNA Pre-Requisite Reward tồn Requisite Test Execution Steps: Test Scenario ID DelReward-1 No Inputs Action Expected Output Actual Output Test Test Result Comments Username Trang Đăng nhập với Trang quản quản lí Đạt quyền admin passsword lí xuất xuất admin Trang Truy cập menu, Trang quản quản lí click vào nút lí reward Đạt reward quản lí reward xuất xuất Reward Reward Chọn reward cần được chọn xóa, nhấn chọn xóa Đạt xóa biết biểu tượng xóa biết mất 100 Chương 6: Cài đặt kiểm thử 6.2.3 Kiểm thử chức đăng tặng điểm newsfeed Bảng 6.4 Test case đăng tặng điểm Test PostStatus -1A Case ID Test Case PostStatus – Positive test Test High Description case Priority PostNA Pre-Requisite Có điểm để tặng Requisite Test Execution Steps: Test Scenario ID PostStatus-1 No Action Inputs Username Đăng nhập với Trang tài khoản nhân passsword newsfeed viên nhân xuất viên Expected Output Click chuột vào ô đăng Dấu nháy văn xuất để tiến hành soạn nội dung đăng Điền nội dung đăng, thêm số điểm cần tặng, thêm người nhận thêm hashtag Nội dung đăng điền -Nội dung hoàn chỉnh đăng với số điểm, - Số điểm tên người - Hashtag nhận hashtag Tiến hành nhấn Click vào nút “Give” Một thông báo xác nhận muốn đăng xuất Actual Output Test Test Result Comments Trang newsfeed xuất Đạt Dấu nháy văn xuất để tiến Đạt hành soạn nội dung đăng Nội dung đăng điền hoàn chỉnh với Đạt số điểm, tên người nhận hashtag Một thông báo xác nhận Đạt muốn đăng xuất 101 Chương 6: Cài đặt kiểm thử Bài đăng vừa soạn xuất newsfeed người đăng nhân viên khác Ở thông báo, chọn Click “Đồng ý!” Bài đăng vừa soạn xuất newsfeed Đạt người đăng nhân viên khác Dataset: Bảng 6.5 Dataset cho test case đăng Tài khoản Staff_1 Mật Số điểm cho +50 Người nhận Nhân viên B Hashtag #Teamwork 6.2.4 Kiểm thử chức chat Bảng 6.6 Test case chức chat Test PostStatus -1A Case ID Test Case PostStatus – Positive test Test High Description case Priority PostNA Pre-Requisite Có điểm để tặng Requisite Test Execution Steps: Test Scenario ID PostStatus-1 No Action Inputs Đăng nhập với tài khoản nhân viên Username Trang passsword newsfeed nhân xuất viên 1 Expected Output Actual Output Test Test Result Comments Trang newsfeed xuất Đạt 102 Chương 6: Cài đặt kiểm thử Đăng nhập với tài khoản nhân viên 2 Username Trang passsword newsfeed nhân xuất viên Cả nhân viên click vào biểu tượng Click profile chọn “My Messages” -Nhập tên Nhân viên “Nhân tìm nhân viên viên 2” để khung tìm tìm kiếm kiếm click -Click vào biểu tượng vào avatar nhân viên nhân viên Nhân viên tiến hành nhập nội dung chat nhấn enter để gửi cho nhân viên Trang newsfeed xuất Đạt Trang chat xuất Trang chat xuất Đạt Nội dung chat nhân viên nhân viên xuất hình Nội dung chat nhân viên nhân Đạt viên xuất hình Nếu nhân viên chưa chat với nội dung chat trống Nội dung chat “Xin chào” xuất đoạn chat nhân viên Ở hình chat nhân viên nhân viên cập nhật nội dung chat Nội dung chat “Xin -Nội dung chào” xuất chat: “Xin chào” đoạn chat -Enter nhân viên Dataset: Bảng 6.7 Dataset cho test case chat Tài khoản Mật Họ tên Nội dung chat Staff_1 Nhân viên Xin chào Staff_2 Nhân viên N/A 103 Chương 7: Kết luận hướng phát triển Chương 7: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 7.1 Kiến thức tìm hiểu  Cộng nghệ xây dựng Web ASP.NET core  Sử dụng Angular X việc xây dựng front-end  Sử dụng công nghệ Hangfire để thực cơng việc cách tự động theo cấu hình  Sử dụng Swagger việc quản lý API ứng dụng  Sử dụng Logger nhằm để ghi lại lỗi hệ thống  Sử dụng JWT việc thực chức xác thực phân quyền  Kết hợp Angular X với công nghệ làm web cũ  Sử dụng thư viện SignalR để xây dựng tính real-time  Sử dụng dịch vụ điện toán đám mây Azure để hỗ trợ trình phát triển web 7.2 Chức cài đặt 7.2.1 Trang dành cho nhân viên  Cách chức liên qua đến phần thưởng - Xem danh sách phần thưởng cơng ty - Tìm kiếm lọc phần thưởng theo tiêu chí (thể loại, trạng thái) - Đổi phần thưởng - Xem danh sách quà đối - Hiển thị trạng thái yêu cầu đổi quà - Xem lí yêu cầu đổi quà bị từ chối - Tìm kiếm lọc yêu cầu đối quà theo tiêu chí (thể loại, trạng thái)  Chức lướt news feed - Hiển thị danh sách lời cảm ơn công ty - Đăng lời cảm ơn - Bảng xếp hạng  Chức chat - Nhắn tin - Gửi tệp hình ảnh - Tìm kiếm đối tượng chat 104 Chương 7: Kết luận hướng phát triển 7.2.2 Trang dành cho Admin  Chức quản lí user - Hiển thị danh sách nhân viên cơng ty - Tìm kiếm lọc theo tiêu chí (trạng thái) - Thêm, sửa, xóa nhân viên  Cấu hình thơng tin cơng ty  Cấu hình thơng tin công ty (logo, tên công ty, màu chữ, màu nền)  Cấu trúc lời cảm ơn (tên đơn vị tiền tệ sử dụng công ty, tùy chọn hashtag, hashtag sử dụng, hashtag cấm sử dụng, tùy chọn nhân viên xóa bình luận)  Số điểm cộng hàng tháng  Quản lý phần thưởng công ty  Thêm, sửa, xóa phần thưởng  Thực chức award, cho phép cấu hình theo điều kiện động 7.2.3 Chức chung actor  Đăng nhập  Đăng xuất 7.3 Ưu điểm  Trang web thực chức mượt, không tốn thời gian  Ứng dụng thiết kế cho việc sử dụng cho nhiều công ty khác  Mỗi công ty sử dụng ứng dụng tự cấu hình cấu trúc hình cấu trúc lời cảm ơn, số điểm tặng hàng tháng, … 7.4 Nhược điểm  Giao diện thiết kế chưa đẹp tốt  Tính chat chưa phát triển theo chat nhóm 7.5 Hướng phát triển  Khắc phục nhược điểm 105 Chương 7: Kết luận hướng phát triển  Tách việc xác thực thành service riêng nhằm tăng tính bảo mật dễ dàng cập nhật nhanh chóng có thay đổi  Tạo API để hệ thống bên sử dụng liệu ứng dụng  Chat theo nhóm tạo kênh chat khác 106 DANH MỤC TÀI LIỆU THAM KHẢO Tiếng Việt: [1] Nguyễn Thức, Giới Thiệu Về Angular 2, https://viblo.asia/p/gioi-thieu-veangular-2-APqzearpzVe, [truy cập 08/03/2020] [2] Nhat, Asp.net Core Là Gì?, https://topdev.vn/blog/asp-net-core-la-gi, [truy cập 08/02/2020] [3] Tech Talk 2020 Azure Và Tất Cả Những Gì Bạn Cần Biết, https://techtalk.vn/azure-va-tat-ca-nhung-gi-ban-can-biet.html, [truy cập 20/04/2020] 107