Đồ án tìm hiểu về reactjs và xây dựng ứng dụng minh họa

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM ĐỒ ÁN MÔN HỌC ĐỒ ÁN ĐỀ TÀI TÌM HIỂU VỀ REACTJS VÀ XÂY DỰNG ỨNG DỤNG MINH HỌA LỚP: SE122.N11 CBHD: ThS Huỳnh Hồ Thị Mộng Trinh Thành viên nhóm: 13520599 Huỳnh Ngọc Pháp THÀNH PHỐ HỒ CHÍ MINH, 12/2022 LỜI CẢM ƠN Đầu tiên, 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 trang bị cho nhóm kiến thức tảng để thực đề tài Đặc biệt, em xin gửi lời cảm ơn lòng biết ơn sâu sắc tới Cô Huỳnh Hồ Thị Mộng Trinh, người trực tiếp tận tình hướng dẫn em suốt trình thực đồ án Không gợi ý tận tâm hướng dẫn em q trình tìm hiểu, đọc tài liệu, Cơ cịn tận tình bảo em kĩ phân tích, khai thác tài liệu để có tư liệu phù hợp với nội dung đồ án Hơn nữa, Cơ cịn nhiệt tình việc đốc thúc q trình viết báo cáo, đọc đưa nhận xét, góp ý để em hồn thành báo cáo đồ án cách tốt Một lần nữa, em xin chân thành cảm ơn NHẬN XÉT CỦA GIẢNG VIÊN TP HCM, ngày… tháng … năm …… Giảng viên hướng dẫn ThS Huỳnh Hồ Thị Mộng Trinh ĐẠ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 TP HCM, ngày… tháng … năm ……… ĐỀ CƯƠNG CHI TIẾT Tên đề tài: Tìm hiểu ReactJs Xây dựng ứng dụng minh họa Cán hướng dẫn: ThS Huỳnh Hồ Thị Mộng Trinh Thời gian thực hiện: Từ ngày 05/09/2022 đến ngày 28/12/2022 Sinh viên thực hiện: Huỳnh Ngọc Pháp - 13520599 Nội dung đề tài: Giới thiệu: Ngày ngành cơng nghệ lập trình website ngày phát triển , việc địi hỏi cơng nghệ ngày cao Bên cạnh lập trình web html ,css ,javascript Ông lớn Facebook cho đời Reactjs để giúp cho việc lập trình dễ dàng tốt Theo khảo sát năm cơng ty cơng nghệ địi hỏi lập trình viên phải có kiến thức react ngày cao React.js thư viện Javascript lên năm gần với xu hướng Single Page Application Trong framework khác cố gắng hướng đến mơ hình MVC hồn thiện React bật với đơn giản dễ dàng phối hợp với thư viện Javascript khác Nếu AngularJS Framework cho phép nhúng code javasscript code html thông qua attribute ng-model, ng-repeat với react library cho phép nhúng code html code javascript nhờ vào JSX, bạn dễ dàng lồng đoạn HTML vào JS.Tích hợp javascript HTML vào JSX làm cho component dễ hiểu Để minh họa Reactjs đầy đủ nhóm chúng em chọn đề tài :xây dựng website bán đồ ăn nhanh Giới thiệu website Good-food xây dựng cho khách hàng người có đam mê mua sắm đồ ăn hướng đến đối tượng học sinh, sinh viên nhân viên văn phịng Nhất thời điểm tình hình đặt hàng online ưa dùng Và Good-food cho đời với mục đích mang dịch vụ đặt ăn nhanh Nhiệm vụ website Vì xu hướng người thường gọi đồ ăn trực tuyến Do dự án Good-food xây dựng nên để đáp ứng nhu cầu tra cứu mua sắm ăn nhanh mà không cần đến trực tiếp Khách hàng cần nhà thực truy cập vào website thực chọn lựa đặt hàng sau sản phẩm giao đến tận nhà Mục tiêu:  Xây dựng hệ thống website gồm chức bản: o Quản lý trang chủ, đăng nhập người dùng o Quản lý thực đơn o Quản lý giỏ hàng o Quản lý toán  Xây dựng hệ thống phần mềm hình thức website mobile ,tablet ,desktop 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ý Trang chủ, trang đăng nhập, đăng ký o Quản lý trang thực đơn, chi tiết thực đơn o Quản lý Thông tin giỏ hàng, o Quản lý trang toán Đối tượng:  Người dùng học sinh, sinh viên, người tìm đặt hang online Phương pháp thực hiện:  Sử dụng create-react-app từ Facebook để xây dựng ứng dụng Công nghệ:  Front-end: ReactJs  Back-end:Firebase 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 bán đồ ăn nhanh  Á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 sản phẩm đề tài  Hoàn thiện ứng dụng bán đồ ăn nhanh, đáp ứng đủ nhu cầu  Có thể thay đổi giao diện cách linh động mở rộng thêm chức cho website sản phẩm đề tài để 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 Nội dung Phân cơng cơng việc 05/09/2022 Tìm hiểu đề tài , xác định Huỳnh Ngọc Pháp – chức hệ thống 18/09/2022 20/09/2022 – Tìm hiểu, nghiên cứu cơng Huỳnh Ngọc Pháp nghệ reactjs 20/10/2022 20/10/2022 Phân tích thiết kế hệ – thống website, lên layout 30/10/2022 Huỳnh Ngọc Pháp trang web - Tìm hiểu UI, UX thiết kế giao diện cho website 30/10/2022 – 20/12/2022 Xây dựng phát triển ứng dụng Huỳnh Ngọc Pháp 12/12/2022 – Kiểm thử hệ thống hoàn Huỳnh Ngọc Pháp thiện báo cáo 28/12/2022 Xác nhận CBHD TP HCM, ngày … tháng … năm … (Ký tên ghi rõ họ tên) Sinh viên (Ký tên ghi rõ họ tên) ThS Huỳnh Hồ Thị Mộng Trinh Huỳnh Ngọc Pháp MỤC LỤC CHƯƠNG 1: TỔNG QUAN VỀ ĐỀ TÀI 11 1.1 LÝ DO CHỌN ĐỀ TÀI 11 1.2 MỤC TIÊU 12 1.3 PHẠM VI 12 1.4 ĐỐI TƯỢNG SỬ DỤNG 13 1.5 PHƯƠNG PHÁP THỰC HIỆN 13 1.6 CÔNG NGHỆ SỬ DỤNG 13 1.7 KẾT QUẢ DỰ KIẾN 13 CHƯƠNG 2: CƠ SỞ LÝ THUYẾT 14 2.1 REACTJS 14 2.1.1 Giới thiệu Reactjs 14 2.1.2 Tại nên sử dụng Reactjs 16 2.2 FIREBASE 18 2.2.1 Giới thiệu Firebase 18 2.2.2 Tại nên sử dụng Firebase 18 CHƯƠNG 3: MƠ HÌNH USE CASE HỆ THỐNG 20 3.1 DANH SÁCH CÁC ACTOR 21 3.2 DANH SÁCH CÁC USE CASE 21 3.3 ĐẶC TẢ USE CASE 22 3.3.1 Đặc tả Use Case “Đăng Nhập” 22 3.3.2 Đặc tả Use Case “Đăng Ký” 23 3.3.3 Đặc tả Use Case “Thêm vào giỏ hàng” 23 3.3.4 Đặc tả Use Case “Đặt hàng” 24 3.3.5 Đặc tả Use Case “Tìm kiếm ăn” 25 3.3.6 Đặc tả Use Case “Review” 26 3.3.7 Đặc tả Use Case “Xem trang chi tiết” 27 3.3.8 Đặc tả Use Case “Thanh toán” 28 3.3.9 Đặc tả Use Case “Thêm ăn mới” 29 3.3.10 Đặc tả Use Case “Xóa ăn mới” 30 3.3.11 Đặc tả Use Case “Sửa ăn mới” 31 3.3.12 Đặc tả Use Case “Quản lý hóa đơn” 32 CHƯƠNG 4: PHÂN TÍCH THIẾT KẾ HỆ THỐNG VÀ HIỆN THỰC 34 4.1 THIẾT KẾ CƠ SỞ DỮ LIỆU 34 SƠ ĐỒ ERD 34 4.2 HIỆN THỰC 34 A)MÀNG HÌNH TRANG CHỦ 34 B)MÀNG HÌNH THỰC ĐƠN 35 4.3 CÁC CHỨC NĂNG CẬP NHẬT TRONG TƯƠNG LAI 42 CHƯƠNG KẾT LUẬN VÀ KIẾN NGHỊ 43 TÀI LIỆU THAM KHẢO 45 - Đăng nhập tài khoản admin Điều kiện thực hiện: Kết thực hiện: c) Thành công: - Xuất chức Xóa ăn d) Thất bại: - Hệ thống báo lỗi Kịch khai thác chính: Bước Hành động tác nhân Xử lý hệ thống Click chức xóa Hệ thống hiển thị trang danh sách ăn Click nut xóa Hệ thống thơng báo xóa thành cơng Xử lý lỗi Bước Hành động tác nhân Thông báo lỗi 3.3.11 Đặc tả Use Case “Sửa ăn mới” UC 11: Sửa ăn (cập nhật sau) Tác nhân: admin Điều kiện kích hoạt: - Xử lý hệ thống Đăng nhập tài khoản admin Điều kiện thực hiện: Kết thực hiện: e) Thành công: - Xuất chức Sửa ăn f) Thất bại: - Hệ thống báo lỗi Kịch khai thác chính: Bước Hành động tác nhân Xử lý hệ thống Click chức sửa Hệ thống hiển thị trang danh sách ăn Click nut sửa Hệ thống xuất trang chi tiết để sửa Sửa thông tin submit Sửa thành công Bước Hành động tác nhân Xử lý hệ thống Thông báo lỗi Xử lý lỗi 3.3.12 Đặc tả Use Case “Quản lý hóa đơn” UC 12: Quản lý hóa đơn (cập nhật sau) Tác nhân: admin Điều kiện kích hoạt: - Đăng nhập tài khoản admin Điều kiện thực hiện: Kết thực hiện: g) Thành cơng: - Xuất trang danh sách hóa đơn h) Thất bại: - Hệ thống báo lỗi Kịch khai thác chính: Bước Hành động tác nhân Click chức cập nhật/ xóa Hệ thống hiển thị trang danh Xử lý hệ thống sách hóa đơn Click nut xóa Hệ thống xóa thành cơng Tìm kiếm hóa đơn Hệ thống xuất hóa đơn Bước Hành động tác nhân Xử lý hệ thống Thông báo lỗi Xử lý lỗi Chương 4: PHÂN TÍCH THIẾT KẾ HỆ THỐNG VÀ HIỆN THỰC 4.1 Thiết kế sở liệu Sơ đồ ERD 4.2 Hiện thực a)Màng hình trang chủ Mơ tả màng hình trang chu nơi show quản cáo thông tin ăn nhà hang, khách hang đặt trực tiếp b)Màng hình thực đơn Mơ tả màng hình thực đơn nơi show ăn nhà hang, khách hang đặt trực tiếp Có khung tìm kiếm để khách hàng tìm theo tên xếp c)Màng hình giỏ hàng Mơ tả màng hình giỏ hàng nơi show ăn khách hang đặt mua d)Màng hình Cart Nhấn vào logo cart show ăn khách hàng lựa, đặt them số lượng e)Màng hình đăng, nhập đăng ký Khách hàng cần đăng nhập để tốn f)Màng hình hóa đơn Khi khách hàng đăng nhập có quyền truy cập hóa đơn để tiến hành tốn g)Trang chi tiết ăn người dùng click vào item ăn trang chi tiết xuất Trong trang chi tiết có phần dành cho khách hàng đánh giá Khách hàng nhập họ tên, emai để đánh giá 4.3 Các Chức Năng cập nhật tương lai a)Thêm tính them sản phẩm cho chủ nhà hàng b)Quản lý tài khoản người dùng them chức u thích ăn… Chương KẾT LUẬN VÀ KIẾN NGHỊ Kết Luận Qua thời gian thực hiện, hướng dẫn góp ý tận tình Cơ, em hồn thành đồ án theo thời gian quy định hoàn thành 90% dự dịnh ban đầu em ứng dụng Trong đồ án em thực cơng việc sau: tìm hiểu reactjs Xây dựng website bán đồ ăn nhanh Reactj, xây dựng Cơ Sở Dữ Liệu FireBase xây dựng thiết hệ thống theo sơ đồ ERD cho đồ án Với vốn kiến thức thời điểm em hồn thành website cịn vài lỗi website em tin sau thêm vài lần sửa chữa tương lai ứng dụng thể đưa tải lên mạng Ưu Điểm  Website có giao diện thân thiện với người dùng, mảng màu phù hợp với web bán đồ ăn nhanh  Chức tìm kiếm giỏ hàng , ăn, … thực nhanh chóng  Dễ dàng sử dụng quản lý  Trang quản lý hóa đơn rõ rang Hạn Chế  Chức xếp sản phẩm chưa đáp ứng  Chức bình luận chưa hồn thiện  Chưa thể toán thực tế Hướng Phát Triển Website xem công cụ cạnh tranh hiệu cho doanh nghiệp thời đại số Vì vậy, làm để tạo lợi cạnh tranh vững mạnh ứng dụng web? Thiết kế website ReactJS phương pháp công nghệ hiệu doanh nghiệp developer áp dụng để phát triển website Trong tương lai em cố gắng kiến thức reactjs thư viện bổ trợ để ngày tốt Link github đồ án: https://github.com/ngocphap/Good-food/tree/main/good-food TÀI LIỆU THAM KHẢO [1] Refsnes Data, “W3Schools”, [Online] Available: https://www.w3schools.com/ [1] Refsnes Data, “W3Schools”, [Online] Available: https://www.w3schools.com/ [2] © 2015–2022 Dan Abramov and the Redux documentation authors, “Redux-Toolkit Documentary” [Online] Available: Redux-Toolkit [3] Prosus, “Stack Overflow”, [Online] Available: stackoverflow [4] © 2022 Meta Platforms, Inc, “React Documentary” [Online] Avaialable: React [5] © 2022 Remix, “React Router Dom Documentary” [Online] Available : React-Router-Dom ... sau: tìm hiểu reactjs Xây dựng website bán đồ ăn nhanh Reactj, xây dựng Cơ Sở Dữ Liệu FireBase xây dựng thiết hệ thống theo sơ đồ ERD cho đồ án Với vốn kiến thức thời điểm em hoàn thành website vài... javascript nhờ vào JSX, bạn dễ dàng lồng đoạn HTML vào JS.Tích hợp javascript HTML vào JSX làm cho component dễ hiểu Để minh họa Reactjs đầy đủ nhóm chúng em chọn đề tài :xây dựng website bán đồ ăn nhanh...  Tìm hiểu, phân tích quy trình xây dựng website cơng nghệ đề  Phân tính, đánh giá ứng dụng tương tự  Tìm hiểu tổng quan reactjs thư viện liên quan  Hiện thực hệ thống 1.6 Công nghệ sử dụng