Internet và công nghệ web Đồ án sách ebook

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ọ.

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

Cửa hàng giới thiệu và bán sách online

BOOK STORY

Sinh viên thực hiện:

1 Nguyễn Thanh Hiếu 20521328

3 Trương Quốc Thắng 20520930

TP HỒ CHÍ MINH – 12/12/2022

-

1 GIỚI THIỆU

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 2 bao 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ên trong 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ọc cô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ốn sá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ều nà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ào lư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 mong muốn rằng với mỗi người dùng khi đến với BOOK STORY, khi tự đọc những cuốn sá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ủa chính họ

Đồ án không sử dụng template có sẵn Cả nhóm tự bàn bạc, thiết kế lại bằng figma Link figma: link figma

Nhóm lấy data sách trên trang web: https://bookshop.org

2 NỘI DUNG

- 2.1 Công cụ hỗ trợ

- Figma: Công cụ giúp nhóm thiết kế ra giao diện ban đầu cho website bán sách Trong quá 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] là một website cung cấp nền tảng cho người dùng vẽ các 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 các đoạn code, hỗ trợ trong quá trình thực hiện xây dựng, thiết kế website

- Github: Dùng để lưu source code, ngoài ra còn kết nối bằng cách merge code của các thành viên lại với nhau Link github: github/e-book

- Excel: phân chia công việc cho các 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 các mô tả dự án, viết báo cáo

- Google meet: Mỗi tuần sẽ vào meet họp những việc đã làm được trong 1 tuần qua chia sẻ những khó khăn, những cải thiện và những điểm tốt đã làm được và lên kế hoạch cho tuần sau (1 sprint trong product backlog)

- Microsoft Teams: Nơi để các thành viên chia sẻ màn hình cho nhau và fix bug sửa lỗi cho nhau

- Drive: nơi lưu trữ tài liệu liên quan đến dự án: Link drive: Drive IE104

- Yarn: [1] là công cụ quản lý gói phần mềm (Package) cho phép người dùng sử dụng và chia sẻ các gói phần mềm với lập trình viên

- NPM: [2] (Node Package Manager) là một công cụ tạo và quản lý các thư viện javascript cho Nodejs NPM là kho lưu trữ trực tuyến cho các package/module

- Trello: Sử dụng để quản lý tiến độ dự án, phân công nhiệm vụ và ghi chú Link trello: Trello nhóm 2

- 2.2 Thư viện hỗ trợ

- ReactJS: [4] là một thư viện Javascript được dùng để để xây dựng các tương tác với các thành phần trên website Điểm nổi bật nhất của ReactJS là việc render dữ liệu không chỉ thực hiện trên Server mà còn ở dưới Client

- Firebase (noSQL): [5] là dịch vụ cơ sở dữ liệu hoạt động trên nền tảng đám mây – cloud Giúp người lập trình đơn giản hóa các thao tác với cơ sở dữ liệu

- Bootstrap: [6] là 1 framework HTML, CSS, và JavaScript cho phép người dùng

dễ dàng thiết kế website theo 1 chuẩn nhất định Trong website này chỉ dùng bootstrap cho những trang web dùng form đơn giản như login, register, …

- Kiến trúc mô hình: Client-Server: bao gồm 2 thành phần chính là máy chủ server

và 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 hiện khi 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 và có thể thay đổi bởi admin

- Thanh đăng nhập bằng tài khoản mạng xã hội : hiển thị 3 icon khi bấm sẽ chuyển sang đăng nhập bằng tài khoản mạng xã hội tương ứng

- Phần đăng nhập chính : Gồm 2 ô input nhập mật khẩu và email đã đăng ký

- Nút login :khi nhập đúng email và mật khẩu bấm login và 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 tuy nhiên thêm 1 ô input xác nhận lại mật khẩu

- 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 của người dùng, nút logout và thanh thông báo ở bên phải

- Phần logo : có ở navbar các trang thành phần

- Thanh search : dùng để search title sách theo keyword được lưu trong database

- Nút category : hover hiện menu chứa các 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 thanh toán

- Phần hiển thị 3 trang bìa sách : hiển thị bìa sách của 3 quyển sách nổi bật , bấm vào sẽ thay đổi background và nội dung trên header

- Phần mô tả : hiển thị tên sách, tên tác giả, mô tả sách và nút see more chuyển tới trang chi tiết của trang sách được chọn

- Thanh menu: gồm trang home, trang hiển thị tất cả sản phẩm, trang blogs, trang thanh toán

- 2.3.4 Navbar những trang khác

Mô tả

- Phần logo : chuyển trang về trang /home

- Phần menu: gồm trang home, trang hiển thị tất cả sản phẩm, trang blogs, trang thanh 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 trong trang home và các trang thành phần, bao gồm thông tin của chủ sở hữu website ( địa chỉ, số điện thoại, tài khoản mạng xã hội, email, bản quyền) và 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 trong giao diện của trang homepage, giữa phần navbar và footer, bao gồm :

- Sản phẩm hiển thị theo bìa sách, title, tác giả và 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 sẽ hiển thị phần tóm tắt nội dung sách Và hiện đầy đủ tên sách ở phần tooltip bên trên

- 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 trong 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ị các loại sách của cuốn sách

+ Phần thông tin : hiển thị giá, mô tả, tác giả của sách

+ Phần select format : chọn audio hoặc ebook

+ Phần button : thêm vào giỏ hàng, nút buy sẽ chuyển đến trang thanh toán, nút preview sẽ chuyển trang đến trang đọc sách

- 2.3.8 Phần comment và sách gợi ý ở trang chi tiết sách

Mô tả

Phần comment và sách gợi ý trang chi tiết sách nằm trong 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 sẽ được hiển thị ở đây dưới dạng (avatar người đã comment, tên, nội dung comment)

- Phần recommend: hiển thị những cuốn sách có loại sách giống với cuốn sách được hiển thị trên phần chi tiết, nó sẽ hiển thị dưới dạng ảnh bìa sách, khi hover hiển thị tên tên sách và giá tiền, click để chuyển tới trang chi tiết sách đó

- 2.3.9 Trang thanh toán

Mô tả

Trang thanh toán hiển thị khi người dùng bấm vào nút pay trong trang chi tiết sách hoặc bấm vào biểu tượng cart ở trang home chính và trong menu, trang thanh toán bao gồm:

- Logo: khi bấm sẽ chuyển về trang home, tên trang

- Phần hiển thị sản phẩm : hiển thị sách đã thêm trong giỏ hàng khi người dùng bấm add to cart trang chi tiết sách Gồm 4 cột: hình ảnh bìa sách, tên, forma, tên tác giả và giá tiền, mỗi dòng hiển thị đi kèm checkbox

- Phần total: hiển thị tổng giá những sản phẩm được chọn ở checkbox

- Phần thanh toán : gồm thanh toán bằng momo và thẻ ngân hàng

- Nút thanh toán: sau khi bấm sẽ thực hiện quy trình thanh toán, hiển thị thành công và chuyển về trang home

- 2.3.10 Trang blog

Mô tả

Trang blog hiển thị khi bấm vào nút blog trong 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 và nút view more để hiện chi tiết blog

- Bên phải: Gồm Button tạo blog, thanh search blog, thanh hiện những trang blog đăng gần đây nhất

- 2.3.11 Trang profile user

Mô tả

Trang profile user hiển thị khi 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 cả 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

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

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

Hình e: Kiến trúc giao diện trang thanh toán

3 KẾT LUẬN

- 3.1 Nhận xét

Sau quá trình làm đồ án nhóm đã:

- Hiểu được một số giải pháp, quy trình xây dựng website

- Có kinh nghiệm phát triển web bằng reactJS và firebase

- Xây dựng được một website bán hàng có đầy đủ các chức năng cơ bản Phần lớn các chức năng trong phần mềm đều hoàn thành Trong quá trình hoàn thành đồ án, nhóm gặp khá nhiều khó khăn trong việc lập trình, viết báo cáo cũng như

là quản lý, sắp xếp thời gian họp nhóm sao cho các thành viên đều tham gia đầy đủ ở các buổi họp Một số phần trong báo cáo vẫn còn sai sót và chưa được hoàn thiện đầy

đủ Ngoài ra, một số lỗi mà nhóm cần khắc phục trong quá trình thực hiện đồ án như:

- Các lỗi tiềm ẩn xảy ra trong quá 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 hơn nữa

- Bổ sung thêm một số tính năng để tăng tương tác giữa user và phần mềm

- 3.2 Hướng phát triển

- Phần mềm sẽ được phát triển, mở rộng thêm nhiều chức năng hơn

- Xây dựng ứng dụng trên Mobile, Responsive,

- Thêm một số chức năng mới như: Chat realtime giữa người dùng với nhau, chat giữa người dùng với shop, đánh giá của khách hàng, thanh toán sản phẩm,

- Thu thập thêm các loại sản phẩm ebook khác để đa dạng hóa sản phẩm

TÀI LIỆU THAM KHẢO

[1] Yarn là gì? Link:https://vietnix.vn/yarn-la-gi/

[2] Tổng quan về NPM Link: https://viblo.asia/p/tong-quan-ve-npm-4P856dy3ZY3

[3]Văn hóa đọc: Sử dụng công nghệ hiện đại để phát triển Link: Văn hóa đọc

[4] ReactJS là gì? Link: https://200lab.io/blog/reactjs-la-gi/

[5] Firebase là gì? Giải pháp lập trình không cần Backend từ Google

Link:Firebase là gì

[6] Bootstrap là gì?

Link:https://viblo.asia/p/bai-1-bootstrap-la-gi-gioi-thieu-ve-bootstrap-DzVkpLbDknW

[7] Lấy dữ 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 chính nhân sự nên biết

Link: https://famhrm.net/blog-chia-se/lam-chu-cong-cu-ve-draw-io/

PHỤ LỤC PHÂN CÔNG NHIỆM VỤ

1 Nguyễn Thanh Hiếu - Thiết kế sơ đồ tuần tự bằng draw.io

- Thiết kế figma màn hình trang chủ

- Giao diện

+ Màn hình chính + Navbar màn hình chính + Footer của trang web + Trang blog

+ Trang category + Hiệu ứng sách + Trang thanh toán

- Chức năng

+ Search + Menu routing (di chuyển) đến các 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 của nhóm

2 Đỗ Công Lâm - Thiết kế đặc tả yêu cầu và đặc tả tính

năng

- Thiết kế figma màn hình phân loại sách

- Giao diện

+ Đăng nhập + Đăng ký + Phần comment trong chi tiết sách + Navbar các màn phụ

+ Trang profile user

- Chức năng

+ Đă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

3 Trương Quốc Thắng - Vẽ sơ đồ usecase và mô tả

- Viết file README để hướng dẫn người khác

- Thiết kế figma màn hình chi tiết sách

- Giao diện

+ Trang profile user + Trang category + Hiệu ứng sách + Phần recommend trong chi tiết sách

+ Trang thanh toán + Trang chi tiết blog

- Chức năng

+ Menu routing (di chuyển) đến các trang

+ Đăng xuất + Phân loại sách theo category + Noti (thông báo khi thực hiện 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