Tìm hiểu maui, blazor để xây dựng ứng dụng di động forum ẩn danh chỉ sinh viên uit có thể đăng bài, bình luận,

Trang TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CƠNG NGHỆ PHẦN MỀM ĐỒ ÁN Đề tài: Tìm hiểu MAUI, Blazor để xây dựng ứng dụng di động forum ẩn danh sinh viên UIT đăng bài, bình luận, Giảng viên hướng dẫn: Huỳnh Tuấn Anh Sinh viên thực hiện: Nguyễn Ngọc Thạch 19520265 Nguyễn Ngọc Phúc 19520224 TP Hồ Chí Minh, tháng 12 năm 2022 Trang TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM ĐỒ ÁN Đề tài: Tìm hiểu MAUI, Blazor để xây dựng ứng dụng di động forum ẩn danh sinh viên UIT đăng bài, bình luận, Giảng viên hướng dẫn: Huỳnh Tuấn Anh Sinh viên thực hiện: Nguyễn Ngọc Thạch 19520265 Nguyễn Ngọc Phúc 19520224 TP Hồ Chí Minh, tháng 12 năm 2022 Trang Lời mở đầu Đầu tiên, nhóm chúng em xin gửi lời cảm ơn chân thành đến tập thể quý Thầy Cô Trường Đại học Công nghệ thông tin – Đại học Quốc gia TP.HCM quý Thầy Cô khoa Công Nghệ Phần Mềm giúp cho nhóm chúng em có kiến thức làm tảng để thực đề tài Đặc biệt, nhóm chúng em xin gửi lời cảm ơn lịng biết ơn sâu sắc tới Thầy Huỳnh Tuấn Anh Đã giúp nhóm chúng em hồn thành tốt báo cáo mơn học Trong thời gian học đề tài, nhóm chúng em vận dụng kiến thức tảng tích lũy đồng thời kết hợp với việc học hỏi nghiên cứu kiến thức Từ đó, nhóm chúng em vận dụng tối đa thu thập để hồn thành báo cáo đồ án tốt Tuy nhiên, q trình thực hiện, nhóm chúng em khơng tránh khỏi thiếu sót Chính vậy, nhóm chúng em mong nhận góp ý từ phía Thầy Cơ nhằm hồn thiện kiến thức mà nhóm chúng em học tập hành trang để nhóm chúng em thực tiếp đề tài khác tương lai Nhóm em xin chân thành cảm ơn quý Thầy Cô! Trang NHẬN XÉT CỦA GIẢNG VIÊN ……………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… Trang Mục lục - Danh mục hình ảnh Error! Bookmark not defined - Danh mục bảng biểu Error! Bookmark not defined Chương I Tổng quan Lý chọn đề tài Mục tiêu 11 Người dùng 11 Phương pháp nghiên cứu 11 Chương II Cơ sở lý thuyết & Tổng quan công nghệ 12 Giới thiệu React JS 12 Giới thiệu MongoDB 15 2.1 Các đặc điểm MongoDB 15 2.2 Ưu nhược điểm MongoDB 15 ● Ưu điểm 15 ● Nhược điểm 17 Kiến trúc hệ thống 3.1 Kiến trúc hệ thống 18 3.2 Mơ hình kiến trúc hệ thống 18 Mô tả chi tiết thành phần hệ thống Chương III 18 Phân tích thiết kế ứng dụng Yêu cầu nghiệp vụ 1.1 Danh sách yêu cầu nghiệp vụ 19 20 20 20 Trang Use case 2.1 21 ● Use case tổng quát 21 ● Use case quản lý tài khoản người dùng 22 ● Use case quản lý đăng 23 ● Use case quản lý chủ đề 24 ● Use case thống kê 24 ● Use case tương tác 25 ● Use case quản lý tài khoản cá nhân 25 ● Use case kiểm duyệt 26 Activity 3.1 Đăng ký, đăng nhập 27 27 ● Sơ đồ trạng thái 27 ● Bảng mô tả trạng thái 28 3.2 Xem gửi bài, tìm kiếm (User) 28 ● Sơ đồ trạng thái 28 ● Bảng mô tả trạng thái 29 3.3 Tương tác với viết ( User) 30 ● Sơ đồ trạng thái 30 ● Bảng mô tả trạng thái 30 3.4 Mơ hình Use Case 21 Quản lý bài, chủ đề, người dùng 31 ● Sơ đồ trạng thái 31 ● Bảng mô tả trạng thái 31 Sơ đồ lớp 33 4.1 Sơ đồ lớp (Mức phân tích) 33 4.2 Danh sách lớp đối tượng quan hệ 34 4.3 Mô tả chi tiết đối tượng 34 Trang ● Theme 4.3.1.1 Danh sách thuộc tính 34 4.3.1.2 Danh sách tính 34 ● User 34 4.3.1.3 Danh sách thuộc tính 34 4.3.1.4 Danh sách tính 35 ● 34 Post 35 4.3.1.5 Danh sách thuộc tính 35 4.3.1.6 Danh sách phương thức 35 Thiết kế CSDL 37 5.1 Sơ đồ logic 37 5.2 Mô tả chi tiết thành phần sơ đồ logic 38 User 38 Post 38 Theme 38 Comment 39 Notification 39 Thiết kế giao diện 6.1 Mô tả chi tiết hình 40 40 Login 40 Home: 42 Bài đăng theo chủ đề: 43 44 Post 46 Đăng bài: 47 Notification 48 48 Chương IV Tổng quan 49 Trang Kết 49 Hạn chế 49 Hướng phát triển 49 - Bảng phân công công việc 50 - Tài liệu tham khảo 50 - Chương I Tổng quan Lý chọn đề tài Nếu sử dụng Internet khơng lần nghe sử dụng dịch vụ nhóm thảo luận Internet (NewsGroup), dịch vụ phổ biến Khi ta gặp vấn đề thắc mắc, tìm kiếm thơng tin đó, NewsGroup người trợ giúp đắc lực cho Dịch vụ cho phép người dùng gửi lên mạng Internet câu hỏi thắc mắc mình, sau người đó, giới tham gia vào nhóm thảo luận họ đọc mẩu tin biết thơng tin vấn đề họ trả lời cho ta ngược lại ta trở thành người trả lời Thật thú vị người toàn cầu giúp ta giải vấn đề Ngày NewsGroup thường tích hợp web ứng dụng di động nên tạo điều kiện thuận lợi cho người sử dụng người ta gọi diễn đàn web (web forum) Trên mạng Internet có nhiều diễn đàn nói nhiều chủ đề khác Ví dụ trang https://vfo.vn/ diễn đàn dành cho người yêu công nghệ muốn chia sẻ, thảo luận thông tin, kiến thức tin học công nghệ sản phẩm Trang công nghệ Như ta thấy hình, người ta chia nhiều chủ đề như: Cơng nghệ, Máy tính, Giải trí-Xã hội, Kiến thức, Giao lưu, … Trang 10 Tác dụng lớn diễn đàn người tham gia vào mạng đặt vấn đề theo chủ đề định để nhận câu trả lời nhiều người tồn giới Để thấy lợi ích tính quảng bá khối lượng thơng tin, kiến thức đồ sộ diễn đàn ta so sánh dịch vụ với dịch vụ Email sau: Nếu nói thơng tin trao đổi qua email quan hệ 1-1, tức có Trang 36 Create() Task Publi c Tạo đăng getAll() List Publi c Hiển thị danh sách đăng update() Task Publi c Cập nhật đăng deleteById() Task Publi c Xóa đăng Bảng 27 Danh sách phương thức post Trang 37 Thiết kế CSDL 5.1 Sơ đồ logic Hình 33 Sơ đồ logic STT Tên bảng liệu User Post Diễn giải Người dùng website Người quản lý website Trang 38 Theme Comment Notification Khách hàng Thông tin loại sản phẩm Thông tin chi tiết sản phẩm Bảng 37 Các liệu Sơ đồ logic 5.2 Mô tả chi tiết thành phần sơ đồ logic User STT Tên thuộc tính ID Name Key Role Kiểu Nvarchar Nvarchar Nvarchar Nvarchar Ràng buộc Not null Not null Not null Not null Ý nghĩa/ghi Mã người dùng Quyền người dùng Key người dùng Vai trò người dùng Bảng 38 Các thành phần Chức vụ Post STT 10 11 Tên thuộc tính Kiểu ID context userId themeId Date title commentId hide upvote downvote tagId Nvarchar Nvarchar Array Nvarchar Date Nvarchar Array Array Integer Integer Array Ràng buộc 50 ký tự 500 ký tự 50 ký tự 50 ký tự 10 ký tự Ý nghĩa/ghi Mã đăng Nội dung đăng Mã Người dùng Mã chủ đề Ngày đăng Tiêu đề Danh sách comment Danh sách selling Số lượng đánh giá tích cực Số lượng đánh giá tiêu cực Danh sách tag Bảng 39 Các thành phần Admin Theme STT Tên thuộc tính ID name context type Kiểu Nvarchar Nvarchar Varchar Nvarchar Ràng buộc 50 ký tự 100 ký tự 500 ký tự 30 ký tự Bảng 40 Các thành phần Khách hàng Ý nghĩa/ghi Mã chủ đề Tên chủ đề Nội dung chủ đề Loại chủ đề Trang 39 Comment STT Tên thuộc tính Id postId userId context hide upvote downvote date Kiểu Nvarchar Nvarchar Nvarchar Nvarchar Boolean Integer Integer Date Ràng buộc 50 ký tự 50 ký tự 50 ký tự 500 ký tự Ý nghĩa/ghi Mã bình luận Mã đăng Mã người dùng Nội dung bình luận Bình luận bị ẩn Số đánh giá tích cực Số đánh giá tiêu cực Ngày bình luận Bảng 41 Các thành phần Loại sản phẩm Notification STT Tên thuộc tính Id userId commentId type Kiểu Nvarchat Nvarchar Nvarchar Nvarchar Ràng buộc 50 ký tự 50 ký tự 50 ký tự 30 ký tự Bảng 42 Các thành phần Sản phẩm Ý nghĩa/ghi Mã thông báo Mã người nhận thơng báo Mã bình luận Loại thông báo Trang 40 Thiết kế giao diện 6.1 Mơ tả chi tiết hình Login Hình 34 Giao diện trang đăng nhập Mô tả đối tượng hình STT Tên emailAddress Kiểu input/email Chức Nhập email đăng nhập Trang 41 input/password Nhập mật Button Đăng nhập Password Submit Bảng 46 Đối tượng hình Đăng nhập admin Danh sách biến cố xử lý tương ứng STT Biến cố Chọn button Submit Xử lý Hiển thị thông báo đăng nhập thành công Đăng nhập Bảng 47 Danh sách biến cố xử lý tương ứng hình Đăng nhập admin Trang 42 Home: Trang 43 Hình 35 Giao diện trang chủ Mơ tả đối tượng hình STT Tên Post AccountManagement Notification Kiểu Button Button Button Chức Hiển thị đăng Hiển thị trang quản lý tài khoản Hiển thị thông báo Bảng 48 Đối tượng trang chủ Danh sách biến cố xử lý tương ứng STT Biến cố Chọn button Post Chọn button AccountManager Chọn button Notification Xử lý Chuyển sang đăng Chuyển sang hình quản lý tài khoản Popup thơng báo Bảng 49 Biến cố xử lý tương ứng trang chủ Bài đăng theo chủ đề: Trang 44 Hình 36 Giao diện đăng theo chủ đề Mơ tả đối tượng hình STT Tên Bài đăng Chuyển trang Kiểu Button Button Chức Hiển thị đăng Hiển thị trang đăng Bảng 50 Đối tượng chủ đề Danh sách biến cố xử lý tương ứng STT Biến cố Bài đăng Chuyển trang Xử lý Chuyển sang hình đăng Chuyển sang hình danh sách đăng với số trang cụ thể Bảng 51 Biến cố xử lý tương ứng chủ đề Trang 45 Trang 46 Post Hình 37 Giao diện đăng Trang 47 Mơ tả đối tượng hình STT Kiểu Button Button Button Tên Reply Upvote Downvote Chức Bình luận Đánh giá tích cực Đánh giá tiêu cực Bảng 52 Đối tượng đăng Danh sách biến cố xử lý tương ứng STT Biến cố Chọn button Reply Chọn button Upvote Chọn button Downvote Xử lý Thêm mục bình luận Hiển thị upvote Hiển thị downvote Bảng 53 Biến cố xử lý tương ứng đăng Đăng bài: Hình 39 Giao diện đăng Trang 48 Mơ tả đối tượng hình Kiểu Combobox STT Tên Tag Post thread Button Chức Chọn tag phù hợp với nội dung đăng Đăng Bảng 54 Đối tượng tab quản lý khách hàng Danh sách biến cố xử lý tương ứng STT Biến cố Tag Post thread Xử lý Tìm kiếm tag chọn Đăng Notification Hình 40: Popup thơng báo Mơ tả đối tượng hình STT Tên Notification Notification Context Kiểu Button Button Chức Bật tắt popup Chuyển đến đăng Bảng 54 Đối tượng thông báo Danh sách biến cố xử lý tương ứng STT Biến cố Notification Notification Context Xử lý Bật tắt popup Chuyển hình đến trang đăng Trang 49 Chương IV Tổng quan Kết Sau thời gian thực đề tài, chương trình hồn thành đạt số kết sau: - Hiểu rõ quy trình quản lý bán giày - Hiểu rõ vấn đề việc dựng website thương mại điện tử - Xây dựng thành công website mua bán giày đáp ứng nhu cầu đặt khách hàng - Giao diện chương trình thân thiện, dễ sử dụng, - Hiểu nắm kiến thức mơ hình Client - Server, EntityFramework, Repository, MongoDB - Luyện tập HTML, CSS, Javascript Hạn chế Do hạn chế mặt thời gian kinh phí nên nhóm hồn thành mức độ hoàn thành yêu cầu đặt đề tài Nhóm chưa có chức tính cho sản phẩm, toán online, quản lý đăng cho người dùng, nhiên nhóm cố gắng hoàn thiện dự án Hướng phát triển Đề tài quản lý cửa hàng bán quần áo phổ biến có khả cao việc đưa vào ứng dụng thực tiễn Tuy nhiên hạn chế thời gian nghiên cứu kinh nghiệm, nhóm phát triển mức độ hồn thành yêu cầu đặt đề tài, tốc độ xử lý chưa hồn thiện Nhóm cố gắng tìm hiểu sâu có phương pháp Trang 50 quản lý hệ thống xử lý khối liệu lớn với hiệu cao, mở rộng phạm vi dự án - Bảng phân cơng cơng việc Hồn thành Công việc giao ST T Tên sinh viên Nguyễn Ngọc Thạch 100% Nguyễn Ngọc Phúc 100% - Code Làm báo cáo Thiết kế liệu Tạo sở liệu Code Làm báo cáo Phân thích thiết kế Diagram Bảng 105 Phân công công việc - Tài liệu tham khảo ● Các thư viện HTML – CSS : React-Bootstrap Documentation , MUI ● Tài liệu mongoDB : MongoDB Documentation ● Các học JavaScript website https://www.w3schools.com/ ● Tài liệu NodeJS : Documentation | Node.js (nodejs.org) ● Các hướng dẫn Youtube Stack Overflow - Where Developers Learn, Share, & Build Careers ● Tài liệu NET MAUI: https://learn.microsoft.com/en-us/dotnet/maui/what-ismaui?view=net-maui-7.0 ● Tài liệu Blazor https://dotnet.microsoft.com/en-us/apps/aspnet/webapps/blazor ... NGHỆ PHẦN MỀM ĐỒ ÁN Đề tài: Tìm hiểu MAUI, Blazor để xây dựng ứng dụng di động forum ẩn danh sinh viên UIT đăng bài, bình luận, Giảng viên hướng dẫn: Huỳnh Tuấn Anh Sinh viên thực hiện: Nguyễn Ngọc... tạo ứng dụng giúp dành riêng cho sinh viên UIT, giúp bạn trao đổi thơng tin với nhiều vấn đề trường nên em chọn đề tài: ? ?Tìm hiểu MAUI, Blazor để xây dựng ứng dụng di động forum ẩn danh sinh viên. .. web ứng dụng di động nên tạo điều kiện thuận lợi cho người sử dụng người ta gọi di? ??n đàn web (web forum) Trên mạng Internet có nhiều di? ??n đàn nói nhiều chủ đề khác Ví dụ trang https://vfo.vn/ di? ??n