Đồ án tìm hiểu reactjs express framework

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM ĐỒ ÁN TÌM HIỂU REACTJS -EXPRESS FRAMEWORK Giảng viên hướng dẫn : ThS Nguyễn Công Hoan Sinh viên thực : Lê Quang Trung Mã sinh viên : 20520333 Sinh viên thực : Hà Phi Hùng Mã sinh viên : 20520526 Tp HCM, tháng năm 2023 ĐỀ CƯƠNG CHI TIẾT TÊN ĐỀ TÀI: Tìm hiểu ReactJS – Express Framework Tên đề tài tiếng Anh: Learn ReactJS – Express Framework Cán hướng dẫn: ThS Nguyễn Công Hoan Thời gian thực hiện: Từ ngày 18/03/2023 đến tháng 05/07/2023 Sinh viên thực hiện: Lê Quang Trung- 20520333 Hà Phi Hùng – 20520526 Nội dung đề tài: Giới thiệu: Javascript ngôn ngữ lập trình sử dụng rộng rãi nay, dễ đọc hỗ trợ nơi Mà Expressjs lại hỗ trợ Javascript, bạn biết đến Javascript chắn việc lập trình Express.js vô đơn giản Ngay người bắt đầu tham gia vào lĩnh vực phát triển web sử dụng Expressjs Javascript ngơn ngữ lập trình dễ học với người khơng có kiến thức ngơn ngữ lập trình khác Chính tính phổ biến, dễ học dễ sử dụng mà Express.js cho phép tài trẻ tham gia đạt nhiều thành công phát triển ứng dụng web Thông qua đề tài này, nhóm xây dựng website review phim Website review phim giúp người dùng xem lời đánh giá điểm số phim từ khán giả nhà phê bình chuyên nghiệp nhằm chọn phim ưng ý mua vé Ngoài ra, website giúp người dùng chia sẻ đánh giá lưu lại danh sách phim xem Website review phim xây dựng React, Express, với vài thư viện hỗ trợ khác Mục tiêu: - Xây dựng website review phim với số lượng phim phong phú, giao diện thân thiện, màu sắc hài hòa, bố cục hợp lý, đáp ứng chức cần thiết website review phim Phạm vi: • Phạm vi mơi trường: o Triển khai sản phẩm đề tài môi trường web • Phạm vi chức năng: o Quản lý thơng tin phim o Quản lý tài khoản người dùng o Quản lý thơng tin review o Tìm kiếm phim theo nhu cầu o Phân loại phim theo thể loại, hay top phổ biến, o Chia sẻ đánh giá điểm số ưng ý thân phim o Tính tốn thống kê điểm số trung bình tổng số đánh giá phim o Lưu trữ phim xem thân Đối tượng: - Người dùng có loại tài khoản bình thường - Người dùng có loại tài khoản chuyên gia Phương pháp thực hiện: - Tìm hiểu ReactJS, ExpressJs - Khảo sát website review phim có thị trường, từ tiến hành phân tích, xác định yêu cầu, tính cụ thể cho đề tài - Phân tích thiết kế hệ thống website - Tìm hiểu quy trình thiết kế UX/UI tiến hành thiết kế giao diện cho website - Xây dựng website cho loại người dùng - Tiến hành triển khai kiểm thử Cơng nghệ: • React Next.js • Express.js • PostgreSQL với Prisma ORM • Firebase Authentication • Docker • AWS Lightsail, S3 Kết mong đợi - Nắm bắt áp dụng công nghệ để xây dựng sản phẩm đề tài - Hiểu rõ nghiệp vụ, chức website review phim - Áp dụng kiến thức học phân tích thiết kế hệ thống phần mềm, quy trình phát triển phần mềm, quản lý triển khai dự án phần mềm để xây dựng website review phim - Xây dựng website review phim đáp ứng yêu cầu giao diện chức đề - Có thể thay đổi giao diện cách linh động mở rộng thêm chức cho website review phim để phù hợp với nhu cầu thực tiễn tương lai Kế hoạch thực hiện: Thời gian 18/03/2023 – 28/03/2023 Nội dung Tìm hiểu đề tài, đánh giá thị trường, xác định chức hệ thống 28/03/2023 – 24/04/2023 Tìm hiểu, nghiên cứu cơng nghệ 25/04/2023 – 15/05/2023 Phân tích thiết kế hệ thống website 16/05/2022 – 31/05/2023 Tìm hiểu quy trình thiết kế UX/UI thiết kế giao diện cho website 01/06/2023 – 22/06/2023 Cài đặt phần back-end, xử lý hệ thống 23/06/2023 – 05/07/2023 Kiểm thử hệ thống hoàn thiện báo cáo Xác nhận GVHD (Ký tên ghi rõ họ tên) ThS Nguyễn Công Hoang TP HCM, ngày tháng 07 năm 2023 Sinh viên Sinh viên (Ký tên ghi rõ họ tên) (Ký tên ghi rõ họ tên) Lê Quang Trung Hà Phi Hùng LỜI CẢM ƠN Đầu tiên, nhóm thực đề tài “Xây dựng website review phim” xin gửi lời cảm ơn đến quý thầy cô giảng dạy chúng em trường Đại học Công nghệ thông tin – Đại học quốc gia thành phố Hồ Chí Minh kiến thức tảng vững để nhóm tự tìm hiểu hoàn thiện đề tài cách tốt Đặc biệt, chúng em xin gửi lời cảm ơn tới Nguyễn Cơng Hoan tận tình hướng dẫn góp ý, đề xuất quý báu dành cho nhóm q trình thực đồ án Trong suốt thời gian qua, nhóm tự tìm hiểu công nghệ kết hợp với kiến thức tảng trình học tập, nghiên cứu vận dụng để thực đề tài Với quỹ thời gian có hạn kinh nghiệm xây dựng sản phẩm thiếu, sản phẩm đồ án cuối mắc phải số sai sót chúng em mong nhận góp ý để bổ sung, cải tiến sản phẩm nâng cao kiến thức để xây dựng sản phẩm chu hoàn thiện hơn, tích luỹ thêm cho kinh nghiệm quý giá để đáp ứng tốt cho công việc thực tế tương lai Một lần nữa, xin cảm ơn đồng hành chúng em suốt học kỳ II năm học Sinh viên thực Lê Quang Trung – Hà Phi Hùng NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN Tp.HCM, ngày … tháng năm 2023 GVHD ThS Nguyễn Công Hoan MỤC LỤC CHƯƠNG 1: GIỚI THIỆU ĐỀ TÀI 1.1 Tên đề tài 1.2 Mô tả đề tài 1.3 Lý do chọn đề tài 1.4 Khảo sát hiện trạng 8 1.5 Công nghệ sử dụng 1.6 Môi trường thiết kế 1.7 Công cụ hỗ trợ 8 CHƯƠNG 2: CƠ SỞ LÝ THUYẾT 2.1 Tổng quan về ReactJS: 2.1.1 Giới thiệu về ReactJS: 9 2.1.2 Khái niệm cơ bản trong ReactJS: 2.1.3 Ưu điểm, nhược điểm: 15 2.2 Tổng quan về Express.js 15 2.2.1 Giới thiệu 15 2.2.2 Các khái niệm cơ bản và cách thức hoạt động 16 2.2.3 Ưu điểm, nhược điểm 18 CHƯƠNG 3: PHÂN TÍCH THIẾT KẾ HỆ THỐNG 19 3.1 Sơ đồ Use-case: 19 3.1.1 Đăng nhập: 19 3.1.2 Đăng xuất: 21 3.1.3 Đăng ký thành viên: 23 3.1.4 Tạo review: 24 3.1.5 Hiển thị thông tin phim: 25 3.1.7 Tìm kiếm, lọc: 27 CHƯƠNG 4: THIẾT KẾ GIAO DIỆN 28 4.1 Trang đăng nhập, đăng ký: 28 4.1.1 Giao diện: 28 4.1.2 Mô tả: 29 4.2 Trang chủ: 29 4.2.1 Giao diện: 29 4.2.2 Mô tả: 30 Actor Điều kiện kích hoạt Người dùng Người dùng nhấn nút Submit trang thông tin phim Tiền điều kiện Đã đăng nhập tài khoản website Hậu điều kiện Người tạo review thành công Luồng kiện Hệ thống hiển thị hình thơng tin phim Người dùng nhập thông tin review Nếu tất thơng tin hợp lệ hệ thống thơng báo tạo review thành công  Kết thúc Use-case Luồng kiện phụ 3.1.5 Hiển thị thơng tin phim: 25 Hình 3.6: Sơ đồ use-case hiển thị thông tin phim Bảng 3.5: Đặc tả hiển thị thông tin phim: Use – Case Nội Dung Tên Use – Case Hiển thị thông tin phim  Mô tả Use-case hiển thị thông tin phim người dùng chọn phim Actor Điều kiện kích hoạt Hệ thống Người dùng chọn vào phim Tiền điều kiện Hậu điều kiện Hệ thống cung cấp cho người dùng thông tin phim chọn Luồng kiện Hệ thống tìm kiếm thơng tin phim Hệ thống hiển thị thơng tin phim Luồng kiện phụ Khơng tìm thấy thơng tin phim: Hệ thống hiển thị khơng tìm thấy thơng tin phim 26 3.1.7 Tìm kiếm, lọc: Hình 3.7: Sơ đồ use-case tìm kiếm, lọc Bảng 3.6: Đặc tả tìm kiếm, lọc Use – Case Nội Dung Tên Use – Case Tìm kiếm, lọc  Mơ tả Use-Case cho phép người dùng tìm kiếm, lọc danh sách phim, người dùng Actor Điều kiện kích hoạt Tất Người dùng nhập thơng tin tìm kiếm, lọc hình danh sách phim, người dùng Tiền điều kiện Không Hậu điều kiện Không 27 Luồng kiện Hệ thống hiển thị trang danh sách phim, người dùng Người dùng nhập thơng tin tìm kiếm, lọc Hệ thống hiển thị kết tìm kiếm Kết thúc Use-case Luồng kiện phụ Người dùng nhấn nút Clear: Hệ thống hiển thị danh sách phim, người dùng Quay lại bước Luồng kiện chính.   Chương 4: THIẾT KẾ GIAO DIỆN 4.1 Trang đăng nhập, đăng ký: 4.1.1 Giao diện: 28 Hình 4.1: Giao diện đăng nhập Hình 4.2: Giao diện đăng ký 4.1.2 Mơ tả: - Khi click vào nút Log in, dẫn vào trang đăng nhập Website - Khi click vào chữ sign up, dẫn vào trang đăng ký tài khoản Website - Sau đăng nhập thành công, trang tự chuyển hướng trang chủ 4.2 Trang chủ: 4.2.1 Giao diện: 29 Hình 4.3 Giao diện trang chủ 4.2.2 Mô tả: - Hiển thị phim tiếng gần 30 4.3 Trang thông tin phim: 4.3.1 Giao diện: Hình 4.4: Giao diện trang thơng tin chi tiết phim 31 Hình 4.5 Giao diện trang thông tin chi tiết phim 4.3.2 Mô tả: - Nhấn click vào nút watch, phim thêm vào danh sách phim xem - Nhấn nút Submit, thông tin đánh giá bạn thêm vào hệ thống - Nhấn review danh sách để chuyển tới trang thông tin review - Nhấn vào nút All Reviews để chuyển tới trang hiển thị toàn review phim - Trang cá nhân hiển thị chi tiết phim 4.4 Trang danh sách phim: 4.4.1 Giao diện: 32 Hình 4.6: Giao diện trang danh sách phim 4.4.2 Mô tả: - Mặc định, website hiển thị sẵn phim - Ấn vào phim danh sách để chuyển tới trang thông tin phim - Khi nhập thơng tin tìm kiếm, lọc thể kết loại phim phù hợp với yêu cầu - Khi ấn nút Clear, thơng tin tìm kiếm, lọc danh sách phim trở ban đầu 4.5 Trang thông tin review: 4.5.1 Giao diện: Hình 4.7: Giao diện thơng tin review 4.5.2 Mô tả: - Mặc định, hiển thị thông tin review - Nút Delete Save cho phép người dùng xố sửa đổi thơng tin review review người dùng 33 4.6 Trang danh sách người dùng: 4.6.1 Giao diện: Hình 4.8: Giao diện trang danh sách người dùng 4.6.2 Mô tả: - Hiển thị danh sách người dùng - Ấn vào người dùng danh sách để chuyển tới trang thông tin người dùng 34 4.7 Trang thông tin người dùng: 4.7.1 Giao diện: Hình 4.8: Giao diện trang danh sách người dùng 4.7.2 Mô tả: - Hiển thị thông tin người dùng - Ấn vào nút All Reviews để chuyển tới trang hiển thị toàn review người dùng - Ấn vào nút Thanked Reviews để chuyển tới trang hiển thị toàn review người dùng thank - Ấn vào nút Viewed movies để chuyển tới trang hiển thị toàn phim người dùng đánh dấu xem 35 4.8 Trang thông tin cá nhân: 4.8.1 Giao diện: Hình 4.8: Giao diện trang danh sách người dùng 4.8.2 Mô tả: - Hiển thị thông tin cá nhân - Ấn vào nút Choose Avatar để thực chọn avatar cá nhân - Ấn vào nút Save để thực thay đổi thông tin cá nhân - Ấn vào nút Reset để thực đưa ô thông tin cá nhân trở ban đầu - Ấn vào nút All Reviews để chuyển tới trang hiển thị toàn review cá nhân - Ấn vào nút Thanked Reviews để chuyển tới trang hiển thị toàn review cá nhân thank 36 - Ấn vào nút Viewed movies để chuyển tới trang hiển thị toàn phim cá nhân đánh dấu xem Chương 5: KẾT LUẬN 5.1 Nhận xét: 5.1.1 Thuận lợi: - Các tài liệu, video, giảng công nghệ sử dụng đồ án chia sẻ internet, giúp việc tìm hiểu chủ động chi phí bỏ thấp - Vận dụng quy trình xây dựng sản phẩm từ môn học trước áp dụng cho đồ án - Giảng viên hướng dẫn tận tình, ln hỗ trợ chia sẻ, góp ý q trình thực đồ án 5.1.2 Khó khăn: - Vì cơng nghệ sử dụng cho đồ án tiếp cận lần đầu nhóm nên việc q trình tìm hiểu cơng nghệ cịn tốn nhiều thời gian khơng hiệu - Khó khăn việc quản lý, bố cục code 5.1.3 Ưu điểm đồ án: - Hoàn thành chức website review phim - Thiết kế giao diện đại, dễ sử dụng 37 5.1.4 Nhược điểm đồ án: - Một số tính xử lý khơng tốt chưa tối ưu - Chưa xây dựng đầy đủ tính đề từ đầu 5.2 Hướng phát triển đồ án: - Thêm thống kê chi tiết, tích hợp đăng nhập google - Phát thêm chức comment review - Phát triển thêm tính đề xuất phim tới người dùng 38 TÀI LIỆU THAM KHẢO [1] React and Unidirectional Data Flow Understand this and your life will be a lot easier as a React developer: https://www.exploringreact.com/2020/11/18/react-andunidirectional-data-flow-understand-this-and-your-life-will-be-a-lot-easier-as-areact-developer/ [2] Difference between Virtual DOM and Real DOM: https://www.geeksforgeeks.org/difference-between-virtual-dom-and-real-dom/ [3] Expressjs: https://expressjs.com/ [4] Firebase: https://firebase.google.com/docs/auth [5] Nextjs: https://nextjs.org/docs [6] Prisma: https://www.prisma.io/docs [7] swr: https://swr.vercel.app/ [8] Material ui: https://mui.com/material-ui/getting-started/ [9] Axios: https://axios-http.com/docs/intro [10] React: https://react.dev/learn [11] Javascript tutorial: https://www.w3schools.com/js/ 39