Tìm hiểu về NEXTJS và xây dựng ứng dụng bán sách (báo cáo cuối kì đồ án 1)

ĐẠ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 BÁO CÁO ĐỒ ÁN MÔN HỌC ĐỒ ÁN – SE121.M21 ĐỀ TÀI: TÌM HIỂU VỀ NEXTJS VÀ XÂY DỰNG ỨNG DỤNG BÁN SÁCH Giảng viên hướng dẫn: Thầy Huỳnh Tuấn Anh Sinh viên thực hiện: 19522006 – Nguyễn Công Phi 19522055 – Lương Thiện Phước Thành phố Hồ Chí Minh, tháng năm 2022 ĐẠ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 BÁO CÁO ĐỒ ÁN MÔN HỌC ĐỒ ÁN – SE121.M21 ĐỀ TÀI: TÌM HIỂU VỀ NEXTJS VÀ XÂY DỰNG ỨNG DỤNG BÁN SÁCH Giảng viên hướng dẫn: Thầy Huỳnh Tuấn Anh Sinh viên thực hiện: 19522006 – Nguyễn Công Phi 19522055 – Lương Thiện Phước Thành phố Hồ Chí Minh, tháng năm 2022 Nhận xét giảng viên: …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… LỜI CẢM ƠN Lời đầu tiên, nhóm xin cảm ơn đến thầy Huỳnh Tuấn Anh tận tình hướng dẫn nhóm, hỗ trợ giải đáp thắc mắc nhóm cung cấp kiến thức công nghệ vấn đề thực ý tưởng suốt thời gian thực đồ án “Tìm hiểu NextJS xây dựng ứng dụng bán sách” Hi vọng với giúp đỡ, hỗ trợ từ thầy, nhóm tiếp tục phát triển ứng dụng theo hướng mà nhóm đề với mục đích mở rộng đề tài, tối ưu hoá trải nghiệm người dùng Tuy vậy, kinh nghiệm nhóm cịn hạn chế nhóm q trình vừa tìm hiểu cơng nghệ mới, vừa áp dụng cơng nghệ để thực ứng dụng nên vẫm cịn hạn chế, thiếu sót Chúng em mong nhận đóng góp ý kiến thầy bạn để đề tài hoàn thiện Chúng em xin chân thành cảm ơn! Thành Phố Hồ Chí Minh, ngày 10/6/2022 LỜI MỞ ĐẦU Từ xưa đến nay, sách công cụ dùng để ghi chép, lưu trữ, lưu truyền kiến thức phổ biến sử dụng rộng rãi Hầu hết kiến thức, liệu lưu truyền đến thời ghi lại sách Tuy nhiên, tại, việc đọc sách với giởi trẻ dần bị lãng qn có nhiều hình thức giải trí làm người có thời gian ngại dành thời gian cho việc đọc sách Nhằm để hỗ trợ giúp cho người muốn đọc sách có cách tiếp cận với sách tốt hơn, chúng em muốn tạo nên ứng dụng hỗ trợ bán sách giúp tối ưu hoá trải nghiệm người dùng quản lý việc bán sách, tiến đến mở rộng ứng dụng hỗ trợ tốt cho người dùng Các tính webapp hỗ trợ là: quản lý sách, quản lý đơn hàng, quản lý thông tin cá nhân với tính đặc biệt hỗ trợ sách điện tử để phù hợp với người dùng, hỗ trợ tìm kiếm sách, gợi ý sách cho người dùng Ứng dụng thời gian phát triển đủ tính để người dùng sử dụng ứng dụng, từ nhận phản hồi người dùng để cải thiện sản phẩm cho phù hợp với người sử dụng MỤC LỤC I GIỚI THIỆU TỔNG QUAN I.1 Thông tin nhóm I.2 Tổng quan đề tài I.2.1 Tổng quan công nghệ I.2.3 Ứng dụng vào đồ án II TÌM HIỂU VỀ NEXTJS II.1 NextJS ? II.1.1 Khái niệm II.1.2 Lịch sử đời II.1.3 Tại nên sử dụng NextJS II.1.4 So sánh với công nghệ khác II.2 Frontend: II.2.1 Nền ReactJS II.2.2 Điểm NextJS II.2.3 Các công nghệ khác sử dụng kết hợp 10 II.3 Backend 11 II.4 Database 11 II.5 Ưu nhược điểm NextJS 12 II.6 Các bước thiết lập cấu trúc đồ án: 13 III ÁP DỤNG CÔNG NGHỆ VÀO ĐỒ ÁN “ỨNG DỤNG BÁN SÁCH” 16 III.1 Giới thiệu chung đồ án 16 III.1.1 Lý chọn đề tài 16 III.1.2 Báo cáo khả thi 16 III.1.3 Tầm nhìn phạm vi 19 III.2 Quy trình thực đồ án 20 III.3 Danh sách tính 20 III.4 Yêu cầu phi chức 22 III.5 Thiết kế database 23 III.5.1 Danh sách bảng 23 III.5.2 Chi tiết bảng 23 III.6 Thiết kế giao diện 26 III.6.1 Danh sách hình 26 III.6.2 Chi tiết hình 27 III.7 Đặc tả Usecase 35 III.7.1 Sơ đồ usecase tổng quát 35 III.7.2 Đặc tả chi tiết usecase 36 III.8 Sơ đồ hoạt động 46 III.8.1 Danh sách sơ đồ 46 III.8.2 Chi tiết sơ đồ 46 IV Tổng hợp 61 IV.1 Kết 61 IV.1.1 Các tính làm 61 IV.1.2 Những điều chưa làm 61 IV.2 Hướng phát triển 61 IV.3 Đường dẫn Github 63 IV.4 Đường dẫn Figma 63 IV.5 Bảng phân công công việc 64 TÀI LIỆU THAM KHẢO 65 I GIỚI THIỆU TỔNG QUAN I.1 Thông tin nhóm - Thành viên o MSSV: 19522006 o Tên: Nguyễn Công Phi o Email: 19522006@gm.uit.edu.vn - Thành viên o MSSV: 19522055 o Tên: Lương Thiện Phước o Email: 19522055@gm.uit.edu.vn I.2 Tổng quan đề tài Với doanh nghiệp thời đại công nghệ, website công cụ vô cần thiết Nó mang lại hàng loạt tiện ích tuyệt vời, giúp việc kinh doanh trở nên dễ dàng nhanh chóng hết Do đó, việc thiết kế, phát triển ứng dụng web hỗ trợ cho doanh nghiệp tăng trưởng mạnh mẽ Hiện nay, có nhiều framework thư viện hỗ trợ việc phát triển ứng dụng web cách nhanh chóng, tiện lợi đảm bảo tính bảo mật thơng tin khách hàng I.2.1 Tổng quan công nghệ I.2.1.1 NextJS - Đây cơng nghệ sử dụng đồ án - Nextjs React Framework, đặt bạn vào đường dễ dàng để xây dựng React application Nextjs sử dụng hàng nghìn website nhiều website lớn giới Vì cộng đồng hỗ trợ lớn giúp bạn dễ dàng xây dựng ứng dụng cách nhanh chóng đầy đ NextJS giúp nhà phát triển tạo giao diện website theo hệ thống component dễ dàng quản lý, bảo trì mở rộng ứng dụng Các thư viện hỗ trợ cho thư viện giúp nhà phát triển tạo trang web thân thiện với người dùng, giao diện thu hút khách hàng I.2.1.2 MongoDB - MongoDB database hướng tài liệu (document), dạng NoSQL database Vì thế, MongoDB tránh cấu trúc table-based relational database để thích ứng với tài liệu JSON có schema linh hoạt gọi BSON Các collection MongoDB cấu trúc linh hoạt, cho phép liệu lưu trữ không cần tuân theo cấu trúc định I.2.1.3 Tailwind - Tailwind utility-first CSS framework, giống Bootstrap, có class built-in mà dùng Tailwind CSS có nhiều class bao gồm thuộc tính CSS khác quan trọng, dễ dàng mở rộng tạo class class I.2.3 Ứng dụng vào đồ án - Trong sống đại ngày nay, với bùng nổ công nghệ kĩ thuật số, vai trị thiết bị thơng minh điện thoại, máy tính trở nên khơng thể tách rời công việc, học tập nhu cầu giải trí ngày người Đặc biệt đại dịch COVID-19 khiến cho nhiều nhà sách trì trệ đóng cửa Việt Nam nói riêng giới nói chung Đọc sách giúp lĩnh hội kiến thức lĩnh vực sống, chìa khóa vươn tới thành cơng nhanh chóng Mỗi sách bậc thang nhỏ mà bước lên, tiến tới gần quan niệm sống tốt đẹp sống Vì bọn em muốn tạo website bán sách online với mục tiêu giúp người dễ dàng tiếp cận với cuồn sách mà u thích - Nhằm để thực ý tưởng đó, chúng em cần cơng nghệ để hỗ trợ SEO tốt deploy lên internet dễ viết, dễ sửa lỗi, có nguồn tài liệu cộng đồng hỗ trợ dồi dào, đơng đảo Sau thời gian tìm hiểu, nhóm em chọn công nghệ NextJS, framework hỗ trợ lập trình web với ReactJS – cơng nghệ hot thời gian gần II TÌM HIỂU VỀ NEXTJS II.1 NextJS ? II.1.1 Khái niệm II.1.2 Lịch sử đời - Next.js phát hành lần dạng dự án mã nguồn mở GitHub vào ngày 25 tháng 10 năm 2016 Ban đầu, NextJS phát triển sựa nguyên tắc: o Sử dụng hàm tiện ích mà không cần phải thiết lập o Tất chức viết JavaScript o Tự động phân tách mã kết xuất máy chủ o Tìm nạp liệu định cấu hình o Dự đốn, phân tích u cầu o Đơn giản hóa việc triển khai - Tháng năm 2017, Next.js 2.0 có cải tiến giúp web hoạt động trang web nhỏ tốt làm tăng hiệu xây dựng cải thiện khả mở rộng tính module đóng - Tháng năm 2018, Next.js 7.0 cải thiện khả xử lý lỗi, hỗ trợ API React để cải thiện việc xử lý route, nâng cấp lên webpack - Tháng năm 2019, Next.js 8.0 đời giúp triển khai ứng dụng không máy chủ, mã chia thành hàm lambda để chạy theo yêu cầu, phiên giảm tài nguyên cần thiết, export tĩnh cải thiện prefetch - Tháng năm 2020, Next.js 9.3 phát hành với khả tối ưu hố với Sass tồn cục hỗ trợ CSS module - Tháng năm 2020, Next.js 9.5 có khả thêm tái tạo tĩnh, hỗ trợ redirect - Tháng năm 2021, Next.js 11 đời hỗ trợ webpack 5, code chỉnh sửa chạy thời gian thực, chuyển đổi để tương thích với ReactApp - Vào ngày 26 tháng 10 năm 2021, Next.js 12 phát hành nay, bổ sung trình biên dịch Rust, giúp trình biên dịch nhanh hơn, hỗ trợ AVIF, Edge Functions & Middleware Native ESM & URL Import III.8.2.7 Sơ đồ hoạt động thêm sản phẩm 51 III.8.2.8 Sơ đồ hoạt động sửa sản phẩm 52 III.8.2.9 Sơ đồ hoạt động xoá sản phẩm 53 III.8.2.11 Sơ đồ hoạt động xem dashboard 54 III.8.2.12 Sơ đồ hoạt động xoá người dùng 55 III.8.2.13 Sơ đồ hoạt động mua sản phẩm 56 III.8.2.14 Sơ đồ hoạt động đánh giá sản phẩm 57 III.8.2.15 Chỉnh sửa quyền truy cập người dùng 58 III.8.2.14 Chỉnh sửa trạng thái hoá đơn 59 III.8.2.15 Sơ đồ hoạt động tạo đơn hàng cho người dùng 60 IV TỔNG HỢP IV.1 Kết IV.1.1 Các tính làm - Kết thúc giai đoạn phát triển, đồ án đạt tính u cầu mà nhóm đề - Phần mềm có đầy đủ tính đặt trang web bán hàng - Những tính làm được: o Quản lý sản phẩm o Quản lý thông tin o Quản lý đơn hàng o Quản lý người dùng o Xem sản phẩm, đánh giá sản phẩm IV.1.2 Những điều chưa làm - Có số trang cịn chưa responsive 100% - Khi chuyển trang truy vấn liệu nhiều bị chậm IV.2 Hướng phát triển - Dự án đến giai đoạn sử dụng với đầy đủ tính liên quan đến bán hàng, kiểm tra đơn hàng, quản lý sách để đáp ứng đầy đủ nhu cầu khách hàng người quản lý trang web có tính chưa hồn thiện tối ưu 100% Hơn đồ án nhận phản hồi người dùng cải thiện tính năng, giao diện cho phù hợp với người dùng Sau mở rộng dự án với tính mới, độc để thu hút thêm người dùng - Một số tồn cần cải thiện: o Một số trang chưa responsive 100% o Nâng cấp giao diện số phần cho người dùng dễ sử dụng o Tính lịch sử giá dễ dàng truy cập sử dụng - Đối với người dùng có nhu cầu muốn mua sách: Có hai hướng phát triển o Hướng phát triển thứ nhất: Xây dựng cộng đồng người yêu sách 61 ▪ Cộng đồng có vài người có sức ảnh hưởng lớn Họ đăng review cấp cho link đặc biệt liên quan đến sản phẩm Khi người dùng click vào link mua sản phẩm người đăng nhận tiền hoa hồng từ người bán ▪ Xây dựng cộng đồng Goodread, ln có đăng bàn luận sách hay, sách nên đọc, viết cảm nhận sau đọc sách o Hướng phát triển thứ hai: Tối ưu hoá trải nghiệm người dùng, tạo đột phá tạo trải nghiệm cho người mua sách trình mua sách đọc sách ▪ Xây dựng hệ thống lưu trữ sách Steam sách điện tử Người dùng mua sách tặng sách, chia sẻ sách điện tử cho người khác ▪ Xây dựng tính đọc sách phù hợp tất thiết bị mà người dùng sử dụng Sao cho người đọc cần lên trang web đọc sách thời gian, địa điểm - Song song với hai hướng phát triển đồ án phát triển thêm tính năng: o Gợi ý sách cho người dùng cụ thể dựa theo lịch sử tìm kiếm sách sách mua người dùng o Tìm kiếm từ khố sách mà người dùng mua danh sách sách điện tử xem trước để dễ dàng xem tìm kiếm nguồn tài liệu hay đoạn sách theo ý muốn - Đối với người quản lý trang web: o Sử dụng biểu đồ hay hình ảnh trực quan trình tổng hợp liệu phân tích liệu o Tăng cường tính quản lý người quản lý: ▪ Xem chi tiết số đơn hàng người dùng: Đơn hàng bán, tỉ lệ nhận hàng, tỉ lệ huỷ đơn hàng người dùng ▪ Xem chi tiết quản lý sản phẩm: 62 • Sản phẩm thêm vơ giỏ hàng người dùng • Sản phẩm mua lần kể từ thêm vào giỏ hàng IV.3 Đường dẫn Github - https://github.com/LuongThienPhuoc/SellingBook-FE IV.4 Đường dẫn Figma - https://www.figma.com/file/gkZihQ6GkacSacT9pSXj3s/Book-Selling?nodeid=221%3A32 63 IV.5 Bảng phân công công việc Thành viên STT Tên công việc Phi Phước Chuẩn bị, lên kế hoạch x x Khảo sát, đặc tả yêu cầu x x Thiết kế kiến trúc x x Thiết kế liệu x x Thiết kế giao diện x Xây dựng trang chủ Xây dựng trang chi tiết sách Xây dựng trang giỏ hàng x Xây dựng trang thông tin người dùng x 10 Xây dựng trang quản lý đơn hàng x 11 Xây dựng trang quản lý sản phẩm 12 Xây dựng trang dashboard x 13 Đăng nhập, đăng ký quên mật x 14 Bình luận đánh giá người dùng x 15 Kiểm tra sửa lỗi x x 16 Viết tổng hợp báo cáo x x Tỷ lệ công việc phân công 50% 50% Mức độ hoàn thành 100% 100% x x x 64 TÀI LIỆU THAM KHẢO Trang web thức NextJS: https://nextjs.org/ Trang web thức MongoDB: https://www.mongodb.com/ Diễn đàn cơng nghệ lập trình viên: https://stackoverflow.com/ Dao Quang Huy(2019), Tìm hiểu NextJS: https://viblo.asia/p/tim-hieu-venextjs-p1-djeZ1bNjlWz Nguyễn Thanh Tùng(2021), Tìm hiểu framework NextJS: https://viblo.asia/p/tim-hieu-ve-framework-nextjs-WAyK86JElxX Wikipedia NexrJS: https://en.wikipedia.org/wiki/Next.js 65 ... HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM BÁO CÁO ĐỒ ÁN MÔN HỌC ĐỒ ÁN – SE121.M21 ĐỀ TÀI: TÌM HIỂU VỀ NEXTJS VÀ XÂY DỰNG ỨNG DỤNG BÁN SÁCH Giảng viên hướng dẫn: Thầy Huỳnh Tuấn Anh Sinh... vấn đề thực ý tưởng suốt thời gian thực đồ án ? ?Tìm hiểu NextJS xây dựng ứng dụng bán sách? ?? Hi vọng với giúp đỡ, hỗ trợ từ thầy, nhóm tiếp tục phát triển ứng dụng theo hướng mà nhóm đề với mục đích... II.5 Ưu nhược điểm NextJS 12 II.6 Các bước thiết lập cấu trúc đồ án: 13 III ÁP DỤNG CÔNG NGHỆ VÀO ĐỒ ÁN ? ?ỨNG DỤNG BÁN SÁCH” 16 III.1 Giới thiệu chung đồ án 16 III.1.1