Internet và công nghệ web Đồ án sách ebook
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (1.25 MB, 14 trang )
ĐẠ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 và bán sách online
BOOK STORY
Sinh viên thực hiện:
STT
Họ tên
1
Nguyễn Thanh Hiếu
2
Đỗ Công Lâm
3
Trương Quốc Thắng
MSSV
20521328
20521001
20520930
TP. HỒ CHÍ MINH – 12/12/2022
Đồ án môn học Internet và Công nghệ Web - IE104
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 tồn bộ q 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:
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, ngồ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).
Nguyễn
Thanh
Hiếu
-
Đỗ
Công
Lâm
-
Trương
Quốc
Thắng
Trang 0
Đồ án môn học Internet và Công nghệ Web - IE104
-
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.
Nguyễn
Thanh
Hiếu
-
Đỗ
Công
Lâm
-
Trương
Quốc
Thắng
Trang 1
Đồ án môn học Internet và Công nghệ Web - IE104
-
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ả
Nguyễn
Thanh
Hiếu
-
Đỗ
Công
Lâm
-
Trương
Quốc
Thắng
Trang 2
Đồ án môn học Internet và Công nghệ Web - IE104
-
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.
Nguyễn
Thanh
Hiếu
-
Đỗ
Công
Lâm
-
Trương
Quốc
Thắng
Trang 3
Đồ án môn học Internet và 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 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
Nguyễn
Thanh
Hiếu
-
Đỗ
Công
Lâm
-
Trương
Quốc
Thắng
Trang 4
Đồ án môn học Internet và Công nghệ Web - IE104
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 tố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 tố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 tốn: sau khi bấm sẽ thực hiện quy trình thanh tốn, hiển thị
thành cơng và chuyển về trang home.
- 2.3.10. Trang blog
Nguyễn
Thanh
Hiếu
-
Đỗ
Công
Lâm
-
Trương
Quốc
Thắng
Trang 5
Đồ án môn học Internet và Công nghệ Web - IE104
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
Nguyễn
Thanh
Hiếu
-
Đỗ
Công
Lâm
-
Trương
Quốc
Thắng
Trang 6
Đồ án môn học Internet và 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 7
Đồ án môn học Internet và 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 8
Đồ án môn học Internet và Công nghệ Web - IE104
Hình e: Kiến trúc giao diện trang thanh tốn
3.
KẾT LUẬN
- 3.1. Nhận xét
Sau q 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 hồn thành. Trong q trình hồ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 hồn thiện đầy
đủ. Ngồ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.
Nguyễn
Thanh
Hiếu
-
Đỗ
Cơng
Lâm
-
Trương
Quốc
Thắng
Trang 9
Đồ án môn học Internet và Công nghệ Web - IE104
TÀI LIỆU THAM KHẢO
[1] Yarn là gì? Link: />[2] Tổng quan về NPM. Link: a/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: />[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:a/p/bai-1-bootstrap-la-gi-gioi-thieu-ve-bootstrap-DzVkpLbDknW
[7] Lấy dữ liệu sách. Link: />[8] Tham khảo thuộc tính css. Link: />[9] Trang lấy icon. Link: />[10] Tham khảo react js. Link: />[11] Template bootstrap. Link: />[12] Cơng Cụ vẽ Quy trình làm nghề hành chính nhân sự nên biết
Link: />
Nguyễn
Thanh
Hiếu
-
Đỗ
Công
Lâm
-
Trương
Quốc
Thắng
Đồ án môn học Internet và Công nghệ Web - IE104
PHỤ LỤC PHÂN CÔNG NHIỆM VỤ
STT
1
Thành viên
Nhiệm vụ
Nguyễn Thanh Hiếu
-
-
2
Đỗ Công Lâm
-
-
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.
Thiết kế đặc tả 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
Công
Lâm
-
Trương
Quốc
Thắng
Đồ án môn học Internet và Công nghệ Web - IE104
3
Trương Quốc Thắng
-
-
-
Nguyễn
Thanh
Hiếu
-
Đỗ
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
Công
Lâm
-
Trương
Quốc
Thắng
