Đang tải... (xem toàn văn)
Tài liệu này là báo cáo đồ án môn học Internet và công nghệ Web của nhóm 2bao gồm toàn bộ quá trình phân chia và quản lý tiến độ công việc của các thành viêntrong nhóm, những nội dung, cách sử dụng trang web.Những năm gần đây, ở Việt Nam, cùng với sự phát triển vượt bậc của khoa họccông nghệ, ebook (sách điện tử) đã không còn là khái niệm xa lạ. Giới trẻ ngày nay đãquá quen thuộc với ebook, nhất là khi hàng loạt dự án sách điện tử đang ra đời với tốcđộ chóng mặt. Theo thống kê của hãng bán lẻ trực tuyến Amazon (Mỹ), cứ 100 cuốnsách giấy bán ra thì có tương ứng 143 cuốn sách điện tử được người đọc tiếp cận. Điềunày cho thấy, một trào lưu văn hoá đọc mới trên thế giới đang bắt đầu hình thành, tràolưu đọc sách điện tử Ebook 3. Với lẽ đó BOOK STORY là một trang thương mạiđiện tử về ebook đã ra đời nhằm mục đích đưa sách gần hơn đến với giới trẻ. Với mongmuốn rằng với mỗi người dùng khi đến với BOOK STORY, khi tự đọc những cuốnsách, những câu chuyện của người khác họ sẽ tự viết lên câu chuyện và cuốn sách củachính họ.
ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN Cửa hàng giới thiệu bán sách online BOOK STORY Sinh viên thực hiện: STT Họ tên Nguyễn Thanh Hiếu Đỗ Công Lâm Trương Quốc Thắng MSSV 20521328 20521001 20520930 TP HỒ CHÍ MINH – 12/12/2022 Đồ án mơn học Internet Công nghệ Web - IE104 GIỚI THIỆU Tài liệu báo cáo đồ án môn học Internet cơng nghệ Web nhóm bao gồm tồn q trình phân chia quản lý tiến độ cơng việc thành viên nhóm, nội dung, cách sử dụng trang web Những năm gần đây, Việt Nam, với phát triển vượt bậc khoa học công nghệ, ebook (sách điện tử) không khái niệm xa lạ Giới trẻ ngày quen thuộc với ebook, hàng loạt dự án sách điện tử đời với tốc độ chóng mặt Theo thống kê hãng bán lẻ trực tuyến Amazon (Mỹ), 100 sách giấy bán có tương ứng 143 sách điện tử người đọc tiếp cận Điều cho thấy, trào lưu văn hoá đọc giới bắt đầu hình thành, trào lưu đọc sách điện tử - Ebook [3] Với lẽ BOOK STORY trang thương mại điện tử ebook đời nhằm mục đích đưa sách gần đến với giới trẻ Với mong muốn với người dùng đến với BOOK STORY, tự đọc sách, câu chuyện người khác họ tự viết lên câu chuyện sách họ Đồ án khơng sử dụng template có sẵn Cả nhóm tự bàn bạc, thiết kế lại figma Link figma: link figma Nhóm lấy data sách trang web: https://bookshop.org NỘI DUNG - 2.1 Công cụ hỗ trợ - - Figma: Cơng cụ giúp nhóm thiết kế giao diện ban đầu cho website bán sách Trong trình làm đồ án nhóm điều chỉnh lại giao diện nên website không giống 100% thiết kế figma ban đầu Link figma: link figma Draw.io: [12] website cung cấp tảng cho người dùng vẽ biểu đồ, mơ hình, sơ đồ đơn giản Link drive lưu sơ đồ: Drive ie104 Visual studio code: Dùng để soạn thảo đoạn code, hỗ trợ trình thực xây dựng, thiết kế website Github: Dùng để lưu source code, ngồi cịn kết nối cách merge code thành viên lại với Link github: github/e-book Excel: phân chia công việc cho thành viên thông qua Product backlog với mơ hình Agile/Scrum Link product backlog: ProductBacklog-nhóm 2.xlsx Word: Viết mơ tả dự án, viết báo cáo Google meet: Mỗi tuần vào meet họp việc làm tuần qua chia sẻ khó khăn, cải thiện điểm tốt làm lên kế hoạch cho tuần sau (1 sprint product backlog) Nguyễn Thanh Hiếu - Đỗ Công Lâm - Trương Quốc Thắng Trang Đồ án môn học Internet Công nghệ Web - IE104 - Microsoft Teams: Nơi để thành viên chia sẻ hình cho fix bug sửa lỗi cho Drive: nơi lưu trữ tài liệu liên quan đến dự án: Link drive: Drive IE104 Yarn: [1] cơng cụ quản lý gói phần mềm (Package) cho phép người dùng sử dụng chia sẻ gói phần mềm với lập trình viên NPM: [2] (Node Package Manager) công cụ tạo quản lý thư viện javascript cho Nodejs NPM kho lưu trữ trực tuyến cho package/module Trello: Sử dụng để quản lý tiến độ dự án, phân công nhiệm vụ ghi Link trello: Trello nhóm - 2.2 Thư viện hỗ trợ - - - ReactJS: [4] thư viện Javascript dùng để để xây dựng tương tác với thành phần website Điểm bật ReactJS việc render liệu không thực Server mà Client Firebase (noSQL): [5] dịch vụ sở liệu hoạt động tảng đám mây – cloud Giúp người lập trình đơn giản hóa thao tác với sở liệu Bootstrap: [6] framework HTML, CSS, JavaScript cho phép người dùng dễ dàng thiết kế website theo chuẩn định Trong website dùng bootstrap cho trang web dùng form đơn giản login, register, … Kiến trúc mơ hình: Client-Server: bao gồm thành phần máy chủ server máy khách client - 2.3 Nội dung xây dựng - 2.3.1 Trang đăng nhập Mô tả Giao diện trang đăng nhập xuất bắt đầu truy cập đường link trang web, giao diện trang bao gồm : - Phần ảnh bìa: nằm bên trái thay đổi admin Thanh đăng nhập tài khoản mạng xã hội : hiển thị icon bấm chuyển sang đăng nhập tài khoản mạng xã hội tương ứng Nguyễn Thanh Hiếu - Đỗ Công Lâm - Trương Quốc Thắng Trang Đồ án môn học Internet Cơng nghệ Web - IE104 - Phần đăng nhập : Gồm ô input nhập mật email đăng ký Nút login :khi nhập email mật bấm login sang trang home Phần đăng ký : Nếu chưa có tài khoản bấm đăng ký để sang trang đăng kí - 2.3.2 Giao diện trang đăng ký Mô tả - Giống với trang đăng nhập nhiên thêm ô input xác nhận lại mật - 2.3.3 Thanh navbar trang chủ Mô tả Giao diện navbar trang chủ bao gồm : - Phần tab thông báo : bao gồm avatar , tên người dùng, nút logout thông báo bên phải Phần logo : có navbar trang thành phần Thanh search : dùng để search title sách theo keyword lưu database Nút category : hover menu chứa loại sách, click vào loại sách cụ thể để di chuyển tới trang loại sách đó: category/:category_id Biểu tượng cart : button để chuyển sang trang tốn Phần hiển thị trang bìa sách : hiển thị bìa sách sách bật , bấm vào thay đổi background nội dung header Phần mô tả : hiển thị tên sách, tên tác giả, mô tả sách nút see more chuyển tới trang chi tiết trang sách chọn Thanh menu: gồm trang home, trang hiển thị tất sản phẩm, trang blogs, trang toán - 2.3.4 Navbar trang khác Mô tả Nguyễn Thanh Hiếu - Đỗ Công Lâm - Trương Quốc Thắng Trang Đồ án môn học Internet Công nghệ Web - IE104 - Phần logo : chuyển trang trang /home Phần menu: gồm trang home, trang hiển thị tất sản phẩm, trang blogs, trang toán Thanh search : dùng để search nội dung phụ thuộc theo trang ( search blog title trang blogs, search user trang profile …) - 2.3.5 Footer Mô tả Giao diện trang footer nằm trang home trang thành phần, bao gồm thông tin chủ sở hữu website ( địa chỉ, số điện thoại, tài khoản mạng xã hội, email, quyền) thông tin loại sách - 2.3.6 List sách trang chủ Mô tả Phần list sách trang chủ nằm giao diện trang homepage, phần navbar footer, bao gồm : - Sản phẩm hiển thị theo bìa sách, title, tác giả giá tiền Bấm vào phần title để chuyển đến trang chi tiết sách Hover phần bìa sách hiển thị phần tóm tắt nội dung sách Và đầy đủ tên sách phần tooltip bên Nguyễn Thanh Hiếu - Đỗ Công Lâm - Trương Quốc Thắng Trang Đồ án môn học Internet Công nghệ Web - IE104 - 2.3.7 Phần chi tiết sách Mô tả Giao diện trang mô tả chi tiết sách nằm trang book/:book_id, giao diện trang bao gồm : - Phần bìa sách hiển thị bên trái Phần thông tin chi tiết bên phải : + Title sách: Tên sách + Category : Hiển thị loại sách sách + Phần thông tin : hiển thị giá, mô tả, tác giả sách + Phần select format : chọn audio ebook + Phần button : thêm vào giỏ hàng, nút buy chuyển đến trang toán, nút preview chuyển trang đến trang đọc sách - 2.3.8 Phần comment sách gợi ý trang chi tiết sách Nguyễn Thanh Hiếu - Đỗ Công Lâm - Trương Quốc Thắng Trang Đồ án môn học Internet Công nghệ Web - IE104 Mô tả Phần comment sách gợi ý trang chi tiết sách nằm trang chi tiết sách, giao diện bao gồm : - Phần post comment : ô input cho phép người người dùng nhập comment Nút post comment: bấm để gửi comment Phần hiển thị comment: phần comment hiển thị dạng (avatar người comment, tên, nội dung comment) Phần recommend: hiển thị sách có loại sách giống với sách hiển thị phần chi tiết, hiển thị dạng ảnh bìa sách, hover hiển thị tên tên sách giá tiền, click để chuyển tới trang chi tiết sách - 2.3.9 Trang tốn Mơ tả Trang tốn hiển thị người dùng bấm vào nút pay trang chi tiết sách bấm vào biểu tượng cart trang home menu, trang tốn bao gồm: - - Logo: bấm chuyển trang home, tên trang Phần hiển thị sản phẩm : hiển thị sách thêm giỏ hàng người dùng bấm add to cart trang chi tiết sách Gồm cột: hình ảnh bìa sách, tên, forma, tên tác giả giá tiền, dòng hiển thị kèm checkbox Phần total: hiển thị tổng giá sản phẩm chọn checkbox Phần toán : gồm toán momo thẻ ngân hàng Nút toán: sau bấm thực quy trình tốn, hiển thị thành công chuyển trang home - 2.3.10 Trang blog Nguyễn Thanh Hiếu - Đỗ Công Lâm - Trương Quốc Thắng Trang Đồ án môn học Internet Công nghệ Web - IE104 Mô tả Trang blog hiển thị bấm vào nút blog menu Trang blog gồm: - Bên trái: Gồm ảnh bìa blog, người tạo blog, tên blog, nội dung nút view more để chi tiết blog Bên phải: Gồm Button tạo blog, search blog, trang blog đăng gần - 2.3.11 Trang profile user Mô tả Trang profile user hiển thị bấm vào avatar user Trang profile gồm: - Gồm avatar user, tên user Bên trái: gồm tất blog mà người dùng đăng Bên phải: Gồm Button tạo blog, Button sửa profile,thanh search blog - 2.4 Kiến trúc website Nguyễn Thanh Hiếu - Đỗ Công Lâm - Trương Quốc Thắng Trang Đồ án môn học Internet Công nghệ Web - IE104 Hình a: kiến trúc giao diện trang chủ Hình b: Kiến trúc giao diện trang chi tiết sách Nguyễn Thanh Hiếu - Đỗ Công Lâm - Trương Quốc Thắng Trang Đồ án môn học Internet Công nghệ Web - IE104 Hình c: Kiến trúc giao diện trang phân loại sách Hình d: kiến trúc giao diện trang profile user Nguyễn Thanh Hiếu - Đỗ Công Lâm - Trương Quốc Thắng Trang Đồ án môn học Internet Cơng nghệ Web - IE104 Hình e: Kiến trúc giao diện trang toán KẾT LUẬN - 3.1 Nhận xét Sau q trình làm đồ án nhóm đã: - Hiểu số giải pháp, quy trình xây dựng website Có kinh nghiệm phát triển web reactJS firebase Xây dựng website bán hàng có đầy đủ chức Phần lớn chức phần mềm hoàn thành Trong trình hồn thành đồ án, nhóm gặp nhiều khó khăn việc lập trình, viết báo cáo quản lý, xếp thời gian họp nhóm cho thành viên tham gia đầy đủ buổi họp Một số phần báo cáo cịn sai sót chưa hồn thiện đầy đủ Ngồi ra, số lỗi mà nhóm cần khắc phục trình thực đồ án như: - Các lỗi tiềm ẩn xảy trình thực thi phần mềm Hiệu suất phần mềm cần phải cải thiện Bổ sung thêm số tính để tăng tương tác user phần mềm - 3.2 Hướng phát triển - Phần mềm phát triển, mở rộng thêm nhiều chức Xây dựng ứng dụng Mobile, Responsive, Thêm số chức như: Chat realtime người dùng với nhau, chat người dùng với shop, đánh giá khách hàng, toán sản phẩm, Thu thập thêm loại sản phẩm ebook khác để đa dạng hóa sản phẩm Nguyễn Thanh Hiếu - Đỗ Công Lâm - Trương Quốc Thắng Trang Đồ án môn học Internet Công nghệ Web - IE104 TÀI LIỆU THAM KHẢO [1] Yarn gì? Link:https://vietnix.vn/yarn-la-gi/ [2] Tổng quan NPM Link: https://viblo.asia/p/tong-quan-ve-npm-4P856dy3ZY3 [3]Văn hóa đọc: Sử dụng cơng nghệ phát triển Link: Văn hóa đọc [4] ReactJS gì? Link: https://200lab.io/blog/reactjs-la-gi/ [5] Firebase gì? Giải pháp lập trình khơng cần Backend từ Google Link:Firebase [6] Bootstrap gì? Link:https://viblo.asia/p/bai-1-bootstrap-la-gi-gioi-thieu-ve-bootstrap-DzVkpLbDknW [7] Lấy liệu sách Link: https://bookshop.org/lists/new-releases-this-week [8] Tham khảo thuộc tính css Link: https://www.w3schools.com/css/ [9] Trang lấy icon Link: https://react-icons.github.io/react-icons/icons?name=fa [10] Tham khảo react js Link: https://reactjs.org/ [11] Template bootstrap Link: https://mdbootstrap.com/ [12] Công Cụ vẽ Quy trình làm nghề hành nhân nên biết Link: https://famhrm.net/blog-chia-se/lam-chu-cong-cu-ve-draw-io/ Nguyễn Thanh Hiếu - Đỗ Công Lâm - Trương Quốc Thắng Đồ án môn học Internet Cơng nghệ Web - IE104 PHỤ LỤC PHÂN CƠNG NHIỆM VỤ STT Thành viên Nhiệm vụ Nguyễn Thanh Hiếu - - Đỗ Công Lâm - - Nguyễn Thanh Hiếu - Đỗ Thiết kế sơ đồ draw.io Thiết kế figma hình trang chủ Giao diện + Màn hình + Navbar hình + Footer trang web + Trang blog + Trang category + Hiệu ứng sách + Trang toán Chức + Search + Menu routing (di chuyển) đến trang + Hiển thị list sách + Thêm sách vào giỏ hàng Viết báo cáo word Phân chia công việc, quản lý tiến độ đồ án nhóm Thiết kế đặc tả yêu cầu đặc tả tính Thiết kế figma hình phân loại sách Giao diện + Đăng nhập + Đăng ký + Phần comment chi tiết sách + Navbar phụ + Trang profile user Chức + Đăng nhập + Đăng ký + Hiển thị list sách + Phân loại sách theo category + Thêm blog + Sửa profile user Viết báo cáo word Công Lâm - Trương Quốc Thắng Đồ án môn học Internet Công nghệ Web - IE104 Trương Quốc Thắng - - - Nguyễn Thanh Hiếu - Đỗ Vẽ sơ đồ usecase mô tả Viết file README để hướng dẫn người khác Thiết kế figma hình chi tiết sách Giao diện + Trang profile user + Trang category + Hiệu ứng sách + Phần recommend chi tiết sách + Trang toán + Trang chi tiết blog Chức + Menu routing (di chuyển) đến trang + Đăng xuất + Phân loại sách theo category + Noti (thông báo thực login, comment, add thành công) + comment + Hiển thị sách recommend Viết báo cáo word Làm slide powerpoint Công Lâm - Trương Quốc Thắng .. .Đồ án môn học Internet Công nghệ Web - IE104 GIỚI THIỆU Tài liệu báo cáo đồ án môn học Internet công nghệ Web nhóm bao gồm tồn q trình phân chia quản lý tiến độ công việc thành... Nguyễn Thanh Hiếu - Đỗ Công Lâm - Trương Quốc Thắng Trang Đồ án môn học Internet Công nghệ Web - IE104 Mô tả Phần comment sách gợi ý trang chi tiết sách nằm trang chi tiết sách, giao diện bao gồm... Thắng Trang Đồ án môn học Internet Công nghệ Web - IE104 Hình e: Kiến trúc giao diện trang toán KẾT LUẬN - 3.1 Nhận xét Sau trình làm đồ án nhóm đã: - Hiểu số giải pháp, quy trình xây dựng website