Đồ án xây dựng website hỏi đáp cho lập trình viên

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM ĐỒ ÁN XÂY DỰNG WEBSITE HỎI ĐÁP CHO LẬP TRÌNH VIÊN Giảng viên hướng dẫn: ThS Trần Thị Hồng Yến Sinh viên thực hiện: Trần Quang Phúc MSSV: 20520279 Bùi Tống Minh Châu MSSV: 20521123 TP.HCM, Tháng năm 2023 ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM ĐỒ ÁN XÂY DỰNG WEBSITE HỎI ĐÁP CHO LẬP TRÌNH VIÊN Giảng viên hướng dẫn: ThS Trần Thị Hồng Yến Sinh viên thực hiện: Trần Quang Phúc MSSV: 20520279 Bùi Tống Minh Châu MSSV: 20521123 TP.HCM, Tháng năm 2023 NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN Người nhận xét (Ký ghi rõ họ tên) Trần Thị Hồng Yến LỜI CẢM ƠN Đồ án “Xây dựng website hỏi đáp cho lập trình viên” dự án ấp ủ từ lâu nhóm Để hoàn thành đồ án lần này, chúng em xin dành lời cảm ơn sâu sắc đến Ths.Trần Thị Hồng Yến tận tình hướng dẫn, cho lời khuyên đưa định hướng thiết thực cho bọn em Những góp ý, học mà chúng em học suốt trình thực đồ án hành trang quý báu không mà tương lai Các quý thầy cô trường Đại học Công nghệ Thông tin truyền đạt học hữu ích, khơng kiến thức chuyên ngành mà kĩ sống, cơng việc sau Trong q trình thực đồ án, nhóm khơng tránh khỏi sai sót, chúng em kính mong nhận góp ý, hướng dẫn để hồn thiện đồ án nữa, không dừng lại đồ án mà phát triển lên thành đồ án Chúng em xin gửi lời cảm ơn chân thành đến cô TP.HCM, ngày 20 tháng 06 năm 2023 Nhóm sinh viên thực Trần Quang Phúc – Bùi Tống Minh Châu ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM TRƯỜNG ĐẠI HỌC Độc Lập - Tự Do - Hạnh Phúc CÔNG NGHỆ THÔNG TIN ĐỀ CƯƠNG CHI TIẾT TÊN ĐỀ TÀI: Xây dựng Website hỏi đáp cho lập trình viên Cán hướng dẫn: ThS Trần Thị Hồng Yến Thời gian thực hiện: Từ ngày 27/02/2023 đến ngày 17/06/2023 Sinh viên thực hiện: Trần Quang Phúc - 20520279 Bùi Tống Minh Châu - 20521123 Nội dung đề tài: Giới thiệu đề tài Ngày nay, phát triển mạnh mẽ ngành công nghệ thông tin giúp người giải nhiều vấn đề lớn lĩnh vực, từ nghiên cứu khoa học ứng dụng thực tiễn đời sống người Chính phát triển nhanh chóng kéo theo yêu cầu nguồn nhân lực lớn cho ngành cơng nghệ thơng tin, ngày nhiều người có mong muốn học tập làm việc lĩnh vực Ngành cơng nghệ thơng tin ngành có lượng kiến thức khổng lồ không dễ dàng để tiếp thu áp dụng Trong tình trạng ngày nhiều người tiếp cận học tập lĩnh vực này, cộng đồng để chia sẻ kiến thức, hỗ trợ giải đáp câu hỏi lập trình, ngành cơng nghệ thơng tin vơ thiết yếu Chính nhóm chúng em định thực đề tài Xây dựng Websỉte hỏi đáp cho lập trình viên Ứng dụng mang đem lại nhiều tính cần thiết tạo viết, bình luận, theo dõi, lưu viết Từ giúp kết nối người học lập trình lại với nhau, giúp đỡ để nâng cao kiến thức kĩ Mơ tả chi tiết mục tiêu - Hiểu ReactJS, Golang áp dụng công nghệ vào đồ án - Xây dựng phần mềm với đầy đủ tính đề ra, giao diện dễ sử dụng, dễ dàng bảo trì, nâng cấp Phạm vi ‒ Phạm vi mơi trường • Ứng dụng hoạt động tảng Website ‒ Phạm vi chức • Xây dựng chức đăng nhập, đăng ký, quên mật khẩu, xác thực người dùng • Quản lý viết • Quản lý bình luận • Đánh giá viết, bình luận • Thơng báo • Tìm kiếm viết • Quản lý thơng tin người dùng Đối tượng Người có nhu cầu trao đổi thông tin, trau dồi kiến thức lập trình Phương pháp thực - Tìm hiểu cơng nghệ Front-end: ReactJS, SCSS - Tìm hiểu công nghệ Back-End: Golang, Cloudinary, MongoDB - Khảo sát thực trạng website hỏi đáp lập trình thị trường như: Reddit, Stack Overflow, Voz… - Phân tích yêu cầu thiết kế hệ thống ứng dụng - Nghiên cứu thiết kế giao diện website - Tiến hành triển khai thực - Kiếm thử ứng dụng Công nghệ - Front-End: ReactJS - Back-End: Go, framework Gin - Database: MongoDB - Quản lý Source code: Git, Github Kết mong đợi ‒ Tìm hiểu sử dụng công nghệ Go, ReactJS ‒ Hiểu rõ áp dụng cách quản lý dự án phần mềm ‒ Hiểu rõ nghiệp vụ, chức Website hỏi đáp ‒ Xây dựng website đáp ứng yêu cầu giao diện chức đề ‒ Có thể mở rộng phát triển thêm nhiều tính tương lai Kế hoạch thực hiện: STT Thời gian Nội dung Phân cơng 27/02/2023 - Tìm hiểu thử nghiệm công Trần Quang 05/03/2023 nghệ Phúc, Bùi Tống Minh Châu 06/03/2023 - Phân tích tốn, khảo sát Trần Quang 12/03/2023 trạng Phúc, Bùi Tống Minh Châu 13/03/2023 - - Thiết kế hệ thống Trần Quang 16/03/2023 - Thiết kế liệu Phúc, Bùi Tống Minh Châu 17/03/2023 19/03/2023 - Thiết kế giao diện Trần Quang Phúc, Bùi Tống Minh Châu 20/03/2023 - - Khởi tạo Source Code Bùi Tống Minh 24/03/2023 - Cài đặt cấu hình cho Cloudinary, Châu MongoDB 25/03/2023 - Xây dựng API đăng nhập, đăng ký, Trần Quang 01/04/2023 quên mật Phúc 02/04/2023 - Triển khai chức đăng nhập, Bùi Tống Minh 09/04/2023 đăng ký, quên mật Châu 02/04/2023 - Xây dựng API quản lý người dùng Trần Quang 09/04/2023 10 Phúc 10/04/2023 - Triển khai chức quản lý người Bùi Tống Minh 16/04/2023 dùng Châu 10/04/2023 - Xây dựng API quản lý viết Trần Quang 16/04/2023 11 12 Phúc 17/04/2023 - Triển khai chức quản lý Bùi Tống Minh 23/04/2023 viết Châu 17/04/2023 - Xây dựng API quản lý bình luận Trần Quang 23/04/2023 13 14 15 Phúc 24/04/2023 - Triển khai chức quản lý bình Bùi Tống Minh 30/03/2023 luận Châu 24/04/2023 - Xây dựng API đánh giá viết, bình Trần Quang 30/04/2023 luận Phúc 03/05/2023 - Triển khai chức đánh giá Bùi Tống Minh 10/05/2023 viết, bình luận Châu 16 03/05/2023 - Xây dựng API thông báo Trần Quang 10/05/2023 17 11/05/2023 - Phúc Triển khai chức thông báo Bùi Tống Minh 15/05/2023 18 11/05/2023 - Châu Xây dựng API tìm kiếm viết Trần Quang 15/05/2023 19 20 Phúc 16/05/2023 - Triển khai chức tìm kiếm Bùi Tống Minh 19/05/2023 viết Châu 20/05/2023 - Kiểm thử sửa lỗi Trần Quang Phúc, Bùi Tống 27/05/2023 Minh Châu 21 28/05/2023 - Hoàn thiện báo cáo Trần Quang Phúc, Bùi Tống 04/06/2023 Minh Châu 22 05/06/2023 - Thời gian dự trữ 17/06/2023 Xác nhận CBHD TP HCM, ngày 13 tháng 02 năm 2023 (Ký tên ghi rõ họ tên) Sinh viên (Ký tên ghi rõ họ tên) ThS Trần Thị Hồng Yến Trần Quang Phúc Châu Bùi Tống Minh MỤC LỤC TÓM TẮT ĐỒ ÁN 18 Chương 1: GIỚI THIỆU CHUNG 19 1.1 Lý chọn đề tài 19 1.2 Phạm vi nghiên cứu 19 1.3 Đối tượng nghiên cứu 19 1.4 Phương pháp nghiên cứu 20 Chương 2: CÔNG NGHỆ SỬ DỤNG 21 2.1 Next.js 21 2.1.1 Giới thiệu .21 2.1.2 Lý sử dụng 21 2.2 MongoDB 22 2.2.1 Giới thiệu .22 2.2.2 Lý sử dụng 23 2.3 Golang 23 2.3.1 Giới thiệu .23 2.3.2 Lý sử dụng 24 2.4 Cloudinary 25 2.4.1 Giới thiệu .25 2.4.2 Lý sử dụng 25 2.5 Socket.IO .26 2.5.1 Giới thiệu .26 2.5.2 Lý sử dụng 26 Chương 3: THIẾT KẾ HỆ THỐNG 27 ‒ Khi xác nhận email, có email gửi đến tài khoản email mà người dùng nhập Đồng thời, form “Quên mật khẩu” ẩn hiển thị thông báo kiểm tra email Các thành phần thơng báo bao gồm: • Nút trang chủ (4) Khi nhấn trang chủ • Nút đăng nhập (5) Chuyển sang trang đăng nhập 4.2.5 Màn hình “Đặt lại mật khẩu” Hình 4.6 Màn hình Đặt lại mật ‒ Khi ấn vào link gửi email xác nhận quên mật khẩu, người dùng chuyển sang hình đặt lại mật Các thành phần form “Đặt lại mật khẩu”: • Trường nhập mật (1) • Nút đặt lại mật (2) Khi ấn thực đặt lại mật Sau đặt lại mật khẩu, người dùng chuyển sang trang đăng nhập • Nút đăng nhập (3) Chuyển sang trang đăng nhập 74 4.2.6 Màn hình “Trang chủ” Hình 4.7 Màn hình Trang chủ ‒ Thành phần sidebar phía bên phải dùng chung với hình ”Chi tiết viết”, gồm thành phần: • Danh sách chủ đề (1) Hiển thị danh sách chủ đề, nhấn vào mục chuyển đến trang chủ với chủ đề tương ứng • Danh sách tag phổ biến (2) • Danh sách viết bật (3) Nhấn vào viết dẫn đến trang chi tiết viết ‒ Thành phần phía bên phải header dùng chung cho trang hiển thị đăng nhập, bao gồm: • Thơng tin tài khoản (4) Nhấn vào chuyển đến trang thơng tin tài khoản • Nút đăng xuất (5) Nhấn vào thực đăng xuất • Nút quản lý (6) Nhấn vào đến trang quản lý (Quản lý viết, chủ đề, tài khoản), xuất người dùng admin • Nút tạo viết (7) Nhấn vào chuyển đến trang tạo viết ‒ Thành phần viết hiển thị dạng thẻ (card) dùng nhiều nơi khác có thành phần bản: 75 • Thơng tin tác giả (8) Nhấn vào đến trang tài khoản tương ứng • Tiêu đề viết (9) Nhấn vào chuyển đến chi tiết viết tương ứng • Một phần nội dung (10) • Chủ đề tag (11) • Thành phần điểm số (12) Người dùng nhấn mũi tên “lên” “xuống” để đánh giá cho viết • Nút lưu viết (13) Nhấn vào để lưu lại viết • Nút chỉnh sửa viết (14) Chuyển đến trang chỉnh sửa viết, xuất người dùng tác giả viết • Nút xố viết (15) Dùng để xoá viết, xuất người dùng tác giả viết • Số lượt bình luận (16) • Số lượt xem (17) • Đánh dấu viết có câu trả lời xác (18) ‒ Các thành phần khác trang chủ: • Thành phần lọc chủ đề (19) Dùng để lọc chủ đề viết • Thành phần xuất viết (20) Dùng để xếp viết 76 4.2.7 Màn hình “Chi tiết viết” Hình 4.8 Màn hình chi tiết viết ‒ Các thành phần hình: • Nút block viết (1) Dùng để block viết (khơng cho phép bình luận viết nữa) Chỉ xuất người dùng Admin • Nội dung đầy đủ viết (2) • Cơng cụ viết bình luận (3) Chỉ xuất người dùng đăng nhập 77 • Điểm số bình luận (4) • Đánh dấu bình luận xác (5) • Thơng tin tác giả bình luận (6) • Nội dung bình luận (7) • Nút trả lời bình luận (8) Nhấn vào trả lời bình luận cụ thể • Nút chỉnh sửa bình luận (9) Chỉ xuất người dùng tác giả bình luận • Nút xố bình luận (10) Chỉ xuất người dùng tác giả bình luận • Nút đánh dấu bình luận xác (11) Nhấn vào để đánh dấu bình luận xác (hữu ích cho viết), xuất người dùng làtác giả viết 4.2.8 Màn hình “Tạo viết” 78 Hình 4.9 Màn hình Tạo viết ‒ Màn hình xuất người dùng đăng nhập Các thành phần hình bao gồm: • Trường nhập tiêu đề viết (1) • Trường nhập nội dung viết (2) • Thành phần lựa chọn chủ đề (3) • Thành phần tìm chọn tag (4) • Thành phần thêm ảnh (5) • Nút tạo viết (6) Khi nhấn tạo viết, người dùng chuyển trang chủ 79 4.2.9 Màn hình “Chỉnh sửa viết” Hình 4.10 Màn hình Chỉnh sửa viết Màn hình xuất người dùng đăng nhập Các thành phần hình tương tự hình tạo viết, liệu điền sẵn nút “Cập nhật viết”(Update post) thay cho nút “Tạo viết” Khi nhấn nút cập nhật viết, viết cập nhật 80 4.2.10 Màn hình “Thơng tin tài khoản” Hình 4.11 Màn hình Thơng tin tài khoản ‒ Các thành phần hình: • Ảnh đại diện (1) Dùng để xem chỉnh sửa ảnh đại diện • Email (2) Dùng để xem email • Trường nhập tên (3) Dùng để xem chỉnh sửa tên • Trường nhập họ (4) Dùng để xem chỉnh sửa họ • Trường nhập ngày sinh (5) Dùng để xem chỉnh sửa ngày sinh • Nút đổi mật (6) Khi nhận hiển thị trường nhập xác nhận mật để đổi mật ‒ Các thành phần chỉnh sửa người dùng đăng nhập tài khoản hiển thị 81 4.2.11 Màn hình “Quản lý viết nhân” Hình 4.12 Màn hình Quản lý viết cá nhân ‒ Màn hình bao gồm phần danh sách viết bên phải phần menu bên trái Khi nhấn vào menu hiển thị danh sách viết tương ứng Menu bao gồm thành phần: • Bài viết đăng (1) • Bài viết lưu (2) • Bài viết chờ duyệt (3) 82 4.2.12 Màn hình “Quản lý viết (Admin Moderator)” Hình 4.13 Màn hình Quản lý viết (Admin Moderator) ‒ Màn hình hiển thị người dùng Admin Moderator Màn hình bao gồm phần menu bên trái phần nội dung bên phải ‒ Phần menu dùng để lựa chọn nội dung hiển thị tương ứng Dùng cho hình “Quản lý chủ đề (Admin)” “Quản lý tài khoản (Admin)” Bao gồm: • Quản lý viết (1) • Quản lý chủ đề (2) Chỉ xuất người dùng Admin • Quản lý tài khoản (3) Chỉ xuất người dùng Admin ‒ Phần nội dung bên phải bao gồm thành phần: • Lựa chọn chủ đề (4) • Lọc loại viết (5) Bao gồm: viết chờ duyệt (Pedding), viết bị từ chối (Denied), biết bị block (Blocked) • Nút chấp nhận viết (6) Khi nhấn chấp nhận viết, viết cơng khai • Nút từ chối viết (7) Khi nhẫn từ chối viết, viết khơng cơng khai 83 4.2.13 Màn hình “Quản lý chủ đề (Admin)” Hình 4.14 Màn hình Quản lý chủ đề (Admin) ‒ Màn hình hiển thị người dùng Admin Các thành phần hình: • Trường nhập tên chủ đề (1) • Nút tạo chủ đề (2) Khi nhấn tạo chủ đề với tên vừa nhập (1) • Trường chỉnh sửa chủ đề (3) • Nút cập nhập chủ đề (4) Khi nhấn cập nhật chủ đề với tên vừa nhập (3) • Nút đóng sửa (5) Khi nhấn đóng phần chỉnh sửa (3), (4), (5) • Nút chỉnh sửa (6) Khi nhấn mở phần chỉnh sửa (3), (4), (5) 84 4.2.14 Màn hình “Quản lý tài khoản (Admin)” Hình 4.15 Màn hình Quản lý tài khoản (Admin) ‒ Màn hình xuất người dùng Admin Các thành phần hình bao gồm: • Thanh tìm kiếm tài khoản (1) • Bộ lọc tài khoản (2) Dùng để lọc tài khoản tương ứng, bao gồm: Tất (All), tài khoản thông thường (Member), Admin Moderator • Nút đặt quyền tài khoản thành viên (3) Khi ấn đặt quyền tài khoản tương ứng thành viên • Nút đặt quyền tài khoản Moderator (4) Khi ấn đặt quyền tài khoản tương ứng Moderator • Nút đặt quyền tài khoản Admin (5) Khi ấn đặt quyền tài khoản tương ứng Admin 85 Chương 5: TỔNG KẾT 5.1 Đánh giá 5.1.1 Quá trình làm việc ‒ Các thành viên nhóm tích cực tham gia bàn luận, trao đổi để giải vấn đề ‒ Sử dụng công cụ Github, Notion… để quản lý dự án hiệu 5.1.2 Thuận lợi ‒ Các thành viên nhóm hợp tác với khứ nên việc hồ nhập trao đổi thơng tin trở nên dễ dàng, thuận tiện ‒ Trên thị trường có nhiều website với đề tài tương tự nên tiết kiệm nhiều thời gian việc tìm hiểu nghiên cứu ‒ Nhận quan tâm, giúp đỡ nhiệt tình giảng viên hướng dẫn để cải thiện chất lượng đồ án 5.1.3 Khó khăn ‒ Đồ án lần nhóm định áp dụng công nghệ Golang, Gin framework, Socket.IO… vào đồ án gặp nhiều trở ngại khó khăn trình tìm hiểu sửa chữa lỗi sử dụng ‒ Sự phân chia thời gian chưa hợp lý nên nhóm bị hụt giai đoạn cuối Bù lại thành viên phải làm việc nhiều 5.1.4 Kết đạt ‒ Kết thúc đồ án 1, nhóm xây dựng hồn chỉnh website hỏi đáp dành cho lập trình viên, chức hoạt động ổn định ‒ Phần mềm đáp ứng nhu cầu người dùng với tính đăng nhập, đăng ký, quên mật khẩu, đăng viết, bình luận viết, cho điểm câu trả lời, tìm kiếm viết theo nhiều lọc khác nhau, thơng báo… 5.2 Ưu điểm ‒ Hồn thành yêu cầu, đáp ứng đầy đủ chức mà nhóm đặt từ trước 86 ‒ Phần server ứng dụng viết Go nên cho hiệu suất ứng dụng trở nên tối ưu ‒ Phân quyền người dùng hợp lý hiệu làm cho việc quản lý phần mềm trở nên mạch lạc, dễ quản lý ‒ Bài viết phân chia theo chủ đề, nhãn dán giúp cho việc tìm kiếm trở nên thuận tiện, dễ dàng ‒ Giao diện tươi mới, sáng tạo, thân thiện giúp cho người dùng dễ dàng thao tác sử dụng 5.3 Nhược điểm ‒ Chưa tận dụng triệt để ứng dụng vai trò phân quyền người dùng để tăng tính chặt chẽ cho phần mềm ‒ Bộ lọc tìm kiếm chưa đa dạng 5.4 Hướng phát triển ‒ Tận dụng tối đa điểm mạnh vai trò phân quyền người dùng ‒ Thêm tính theo dõi người dùng ‒ Tăng tốc độ tìm kiếm viết, đa dạng nhiều lọc cho việc tìm kiếm ‒ Xây dựng hệ thống thời gian thực cho nhiều thành phần khác phần mềm điểm viết, đánh giá bình luận… ‒ Tối ưu hoá tốc độ xử lý server để tránh việc tải có nhiều người dùng 87 TÀI LIỆU THAM KHẢO [1] Vercel, “Docs | Next.js,” Oct 25, 2016 [Online] Available: https://nextjs.org/docs [Accessed Jun 09, 2023] [2] Google, “Documentation - The Go Programming Language,” Mar 29, 2012 [Online] Available: https://go.dev/doc/ [Accessed Jun 16, 2023] [3] MongoDB, “MongoDB Go Driver – Go,” Mar 14, 2019 [Online] Available: https://www.mongodb.com/docs/drivers/go/current/ [Accessed Jun 19, 2023] [4] Bo-Yi Wu et al, “gin package - github.com/gin-gonic/gin - Go Packages,” [Online] Available: https://pkg.go.dev/github.com/gin-gonic/gin - readmedocumentation [Accessed May 13, 2023] [5] Manato Kuroda, “Clean Architecture with GO Introducing Clean architecture with Go | by Manato Kuroda | Medium,” Nov 7, 2019 [Online] Available: https://manakuro.medium.com/clean-architecture-with-go-bce409427d31 [Accessed May 12, 2023] [6] Googol Lee, “socketio package - github.com/googollee/go-socket.io - Go Packages,” Feb 8, 2023 [Online] Available: https://pkg.go.dev/github.com/googollee/go-socket.io [Accessed Jun 3, 2023] [7] Jeff Atwood et al, “Highest scored questions – Stack Overflow,” Sept 15, 2008 [Online] Available: https://stackoverflow.com/questions [Accessed Jun 29, 2023] [8] Thanh Trung Bach, “theNEXTVoz,” Jan 27, 2001 [Online] Available: https://voz.vn/ [Accessed Jun 15, 2023] [9] Steve Huffman et al, “Reddit – Dive into anything,” Jun 10, 2015 [Online] Available: https://www.reddit.com/ [Accessed Jun 9, 2015] 88