CÔNG NGHỆ WEB VÀ ỨNG DỤNG ĐỀ TÀI: Cửa hàng giới thiệu và bán sách online

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

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH

CÔNG NGHỆ WEB VÀ ỨNG DỤNG

ĐỀ TÀI: Cửa hàng giới thiệu và bán sách online

Giảng viên hướng dẫn: Trần Anh Dũng

Lớp: SE347.N12.PMCL

Sinh viên thực hiện:

TP Hồ Chí Minh

Nhận Xét

4.4.3.5 Lớp blogs 22

7 Kết luận và hướng phát triển 40

- 1 GIỚI THIỆU

Tài liệu này là báo cáo đồ án môn học Công nghệ Web và ứng dụng của nhóm 8 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 và 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

-

- 2 TỔNG QUAN DỰ ÁN

- Tên đề tài: BOOKSTORY (Trang web bán sách ebook online)

- Đối tượng người dùng: Người quản lý người dùng, sản phẩm (Admin); Người dùng quan tâm hoặc mua sách ebook (User)

- Nhiệm vụ của đề tài:

+ Tìm hiểu hoạt động của hệ thống thực

+ Phân tích chức năng, giao diện, dữ liệu của hệ thống thực

+ Thiết kế hệ thống

+ Cài đặt chương trình

+ Tạo ra 1 website giúp những người quan tâm đến ebook:

● Có thêm hình thức mua hàng thuận tiện, dễ dàng, nhanh chóng

● Giúp kết nối những người yêu sách, quan tâm đến sách lại với nhau Với chức năng giúp người dùng tạo blog về những chủ

đề sách mà mình quan tâm Còn có thể sửa và xóa được blog, tìm kiếm blog và xem những blog được đăng gần nhất

● Người mua trở thành người chủ với toàn quyền lựa chọn sản phẩm, tìm kiếm bất kỳ thông tin nào về sản phẩm theo nhu cầu,

so sánh giá cả, đặt mua hàng với hệ thống tính toán tiền tự động, đầy đủ, rõ ràng, trung thực và chính xác nhất

- Kết quả cần đạt được:

+ Hiểu và phân tích thiết kế hệ thống bán sách online

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

+ Xây dựng được một website bán hàng có đầy đủ các chức năng cơ bản

Mã Mô tả yêu cầu

1 Giao diện của hệ thống phải đáp ứng được tiêu chí quan trọng

nhất của dự án là giới thiệu sản phẩm, giao dịch trực tuyến thuận tiện và đảm bảo an toàn

2 Các điều khiển trên trang web cần quen thuộc, dễ thao tác với

người dùng Thông tin hình ảnh bao quát, đẹp và dễ dàng lựa chọn tìm kiếm

3 Giao diện chỉ có tiếng Anh

4 Hiển thị thông tin chi tiết khi khách lựa chọn

5 Nội dung thông tin hình ảnh động Kiểu của giao diện thay đổi

động tác giúp hạn chế sự đơn điệu

6 Tên các trường thông tin, chức năng phải thống nhất toàn bộ giao

diện

- 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

- 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

- 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

- Excel: phân chia công việc cho các thành viên thông qua Product backlog

8.xlsx

- Word: Viết các mô tả dự án, viết báo cáo

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

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

- 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: [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

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

- Đăng ký/Đăng nhập:

+ Tài khoản phải ký để sử dụng

+ Nếu chưa kích hoạt phải kích hoạt trước khi đăng nhập

+ Đăng nhập thành công được đưa đến trang chủ

- Quản lý sách:

+ Thêm mới, sửa, xóa sách

- Quản lý thông tin người dùng:

+ Thêm, sửa, xóa user

- Xem và sort sách theo từng loại sách (category):

+ Xem thông tin sách (title, tác giả, mô tả, giá tiền, loại sách)

+ Phân loại sách theo từng loại sách

- Tìm kiếm sách và blog:

+ Search sách theo title sách để tìm kiếm

+ Search blog theo title blog để tìm kiếm

- Xem profile user:

+ Xem những blog của user, tạo blog, tìm blog

- 2.2.5 Yêu cầu phi chức năng

- Giao diện thân thiện, dễ sử dụng

- Ứng dụng tiện dụng, dễ dùng cho người dùng Cả người có nền tảng tin học

và người không có nền tảng tin học

- Chương trình chạy ổn định, chính xác và có độ an toàn cao

- Dự án này sử dụng mô hình Agile Agile là phương pháp phát triển phần

mềm linh hoạt để làm sao đưa sản phẩm đến tay khách hàng càng nhanh càng tốt, là một hướng tiếp cận cụ thể cho việc quản lý dự án phần mềm Scrum là

1 dạng của mô hình Agile và là Framework phổ biến nhất khi thực hiện mô hình agile Scrum là mô hình phát triển phần mềm lặp đi lặp lại Những khoảng lặp cố định thường kéo dài 1,2 tuần được gọi lại Sprint hoặc Iteration [13] Trong dự án này mỗi Sprint sẽ tương ứng với 10 ngày

Những cuộc họp:

- Sprint Planning (họp kế hoạch Sprint): Nhóm phát triển họp với product owner

để lên kế hoạch làm việc cho 1 sprint Công việc lập kế hoạch bao gồm việc chọn lựa các yêu cầu cần phải phát triển, phân tích và nhận biết các công việc phải làm kèm theo các ước lượng thời gian cần thiết để hoàn tất các tác vụ [13]

- Daily Scrum (họp scrum hằng ngày): Vì các thành viên không có nhiều thời gian nên trong đồ án này cuộc họp này không được diễn ra [13]

- Sprint review (họp sơ kết sprint): Sau cuối mỗi sprint nhóm phát triển cũng với product owner sẽ rà soát lại các công việc đã hoàn tất trong sprint vừa qua

và đề xuất các chỉnh sửa hoặc thay đổi cần thiết cho sản phẩm

Vai trò

- Product Owner (PO): là người chịu trách nhiệm về sự thành công của dự án, người định nghĩa các yêu cầu và đánh giá cuối cùng đầu ra của các nhà phát triển phần mềm

- Development Team(Dev, Test ): Gồm 5 người Trong đó có 1 Teamleader giúp quản lý đội ngũ code

Lợi ích

- Cải thiện chất lượng phần mềm, dễ học và dễ sử dụng

- Rút ngắn thời gian phát hành phần mềm

- Nâng cao tinh thần đồng đội, tối ưu hóa hiệu quả và nỗ lực của đội phát triển

- Kiểm soát dự án tốt, cải tiến liên tục

- Giảm thiểu rủi ro khi xây dựng sản phẩm

- Quy tắc ứng xử:

+ Chủ động liên lạc với các thành viên trong nhóm để cập nhật thông tin liên quan đến dự án

+ Có tinh thần trách nhiệm, tập trung vào nhóm dự án

+ Tránh đề cao cái tôi cá nhân, mang các vấn đề cá nhân vào công việc

- Quy tắc khi làm việc:

+ Trung thực và cởi mở trong tất cả các hoạt động dự án

+ Khuyến khích sự đa dạng các ý tưởng trong khi làm việc theo nhóm + Tham gia đầy đủ các buổi họp nhóm, nếu vắng mặt phải có lý do chính đáng và phải tự cập nhật lại nội dung của buổi họp đầy đủ

+ Tránh không hoàn thành công việc được giao, gây trễ tiến độ làm việc của các thành viên khác

- Quy tắc trao đổi thông tin – Họp nhóm:

+ Quyết định hình thức trao đổi thông tin và dự án: Họp online qua MS team; nhắn tin trao đổi qua messenger; Lưu trữ các báo cáo dự án qua Google Drive, GitHub

+ Thống nhất thời gian họp nhóm để có nhiều thành viên tham gia nhất + Các thành viên có mặt đầy đủ theo lịch họp đã được thống nhất + Luôn có thành viên ghi lại các biên bản cuộc họp

+ Các thành viên phải chuẩn bị, tập hợp báo cáo nội dung, tiến độ công việc trước buổi họp

- 4 Mô hình hóa

- Use Case là “Một kỹ thuật được dùng trong kỹ thuật phần mềm và hệ thống

để nắm bắt yêu cầu chức năng hệ thống Use Case mô tả sự tương tác đặc trưng giữa người dùng bên ngoài (Actor) và hệ thống [14]

ST

Xem danh sách sách Xem thông tin chi tiết sách

Đăng ký Tìm kiếm Đưa sản phẩm vào giỏ hàng Đặt Mua

Xem danh sách sách Quản lý sách

Đăng nhập Thêm, sửa, xóa blog Quản lý profile cá nhân

2

thêm một số chức năng khác và yêu cầu Đăng Nhập mới được sử dụng:

Xem danh sách đơn hàng Cập nhật đơn hàng Cập nhật sản phẩm Cập nhật đơn giá Ghi nhận đơn hàng

sửa, xóa blog)

User, admin

8 Đưa sản phẩm vào giỏ

hàng

User, admin

- Use Case “Đăng ký”

Tóm tắt: Khách hàng sử dụng usecase “Đăng ký” để tạo tài khoản cho mình

trên website

Actor: User Các dòng sự kiện chính B1: Trên giao diện màn hình chính, Khách hàng chọn Đăng ký

B2: Hệ thống sẽ hiển thị giao diện đăng ký và Khách hàng viếng thăm nhập thông tin vào giao diện để lưu vào cơ sở dữ liệu

B3: Kết thúc Usecase

Các dòng sự kiện khác: Không có

Các yêu cầu đặc biệt: Không có

Trạng thái hệ thống khi bắt đầu thực hiện Use- case: Trước khi bắt đầu thực hiện Use- case không cần điều kiện gì

Trạng thái hệ thống sau khi thực hiện Use- case: Sau khi thực hiện Use- case

hệ thống sẽ thông báo tài khoản tạo thành công hay chưa

Điểm mở rộng: Không có

- Use Case “Đưa sản phẩm vào giỏ hàng”

Tóm tắt: Khách hàng sử dụng use case “Đưa sản phẩm vào giỏ hàng” để đặt những sản phẩm mình cần mua vào không gian lưu trữ tạm thời trên web Actor: User

Các yêu cầu đặc biệt: Không có

Trạng thái hệ thống khi bắt đầu sử dụng Use- case: Sau khi khách hàng xem danh sách sản phẩm hoặc thông tin sản phẩm

Trạng thái sau khi sử dụng Use- case: Sau khi thực hiện Use- case hệ thống

sẽ xuất thông tin của sản phẩm ra giao diện Giỏ hàng

Điểm mở rộng: Tại giao diện giỏ hàng sẽ có các chức năng: Xóa giỏ hàng, Tiếp tục mua, Cập nhật số lượng cho sản phẩm đã đặt

- Use Case “Đăng nhập”

Tóm tắt: Khách hàng thành viên sử dụng use case “Đăng nhập” để tham gia mua hàng trực tuyến

Actor: Khách hàng thành viên

Các dòng sự kiện chính:

B1: Trên giao diện màn hình chính, khách hàng thành viên chọn Đăng nhập B2: Hệ thống sẽ hiển thị giao diện đăng nhập và Khách hàng thành viên nhập thông tin vào giao diện để kiểm tra tài khoản đã có hay chưa

B3: Kết thúc Usecase

Các dòng sự kiện khác: Nếu Khách hàng thành viên không muốn đăng nhập thì chọn Thoát

Các yêu cầu đặc biệt: Không có

Trạng thái khi bắt đầu thực hiện Use- case: Trước khi bắt đầu thực hiện Use- case yêu cầu phải Đăng ký

Trạng thái sau khi thực hiện Use- case: Sau khi thực hiện Use- case hệ thống

sẽ thông báo đăng nhập thành công hay chưa

Điểm mở rộng: Khách hàng thành viên có thể chọn thoát khỏi đăng nhập bất

cứ khi nào( yêu cầu trước đó đã đăng nhập thành công)

- Use Case “Đặt mua”

Tóm tắt: Khách hàng thành viên sử dụng use case “Đặt mua” để tham gia mua hàng trực tuyến

Actor: Khách hàng

Các dòng sự kiện chính

B1: Trên giao diện giỏ hàng, Khách hàng chọn Đặt mua

B2: Hệ thống sẽ hiển thị giao diện chứa thông tin khách hàng và danh sách các sản phẩm khách hàng đặt mua Sau khi nhập đầy đủ thông tin thì khách hàng xác nhận đã đặt mua

Trạng thái hệ thống sau khi thực hiện Use- case: Sau khi thực hiện Use- case

hệ thống sẽ thông báo đăng nhập thành công hay chưa

Điểm mở rộng: Khách hàng thành viên có thể chọn thoát khỏi chế độ đăng nhập bất cứ khi nào( yêu cầu trước đó đã đăng nhập thành công)

- Sơ đồ tuần tự cho ta cái nhìn tổng quát về trình tự xử lý của hệ thống đối với từng chức năng cụ thể Nó chỉ ra luồng chức năng xuyên qua các UseCase,

nó là biểu đồ mô tả tương tác giữa các đối tượng và tập trung vào mô tả trật

tự các thông điệp theo thời gian [15]

- 4.2.1 Quy trình đưa sản phẩm vào giỏ hàng

Sơ đồ tuần tự quy trình đưa sản phẩm vào giỏ hàng

- 4.2.2 Quy trình đặt mua

Sơ đồ tuần tự quy trình đặt hàng

- 4.2.3 Quy trình thêm sản phẩm

Sơ đồ tuần tự quy trình thêm sản phẩm

- 4.3 Sơ đồ lớp

Tên thuộc tính Kiểu dữ liệu Mô tả

chính)

Tên thuộc tính Kiểu dữ liệu Mô tả

ngoại)

Tên thuộc tính Kiểu dữ liệu Mô tả

chính)

ngoại)

- 4.4.3.4 Lớp category

Tên thuộc tính Kiểu dữ liệu Mô tả

chính)

Tên thuộc tính Kiểu dữ liệu Mô tả

chính)

-

Tên thuộc tính Kiểu dữ liệu Mô tả

tạo blog (Khóa ngoại)

- 4.4.4 Quan hệ giữa các lớp

Mô tả: Mỗi khách hàng có thể thanh toán nhiều lần Mỗi lượt thanh toán đều thuộc

về một khách hàng xác định Mối quan hệ giữa user và cart là quan hệ 1-n (một - nhiều)

Mô tả: Bởi vì là sách ebook nên chỉ cần đặt mua sách 1 lần là có thể sở hữu sản phẩm -> Mỗi lượt đặt hàng chỉ có thể đặt được 1 sách Dẫn đến việc mỗi sách cũng chỉ thanh toán được 1 lần Mối quan hệ giữa book và cart là quan hệ 1-1 (một - một)

- 4.4.4.3 Quan hệ giữa book và category

Mô tả: Một sách có thể có được nhiều loại sách và một loại sách cũng có thể có nhiều sách cùng loại Mối quan hệ giữa book và category là quan hệ n-n (nhiều - nhiều)

Mô tả: Một blog chỉ có thể được tạo ra bởi 1 user nhất định Và 1 user có thể tạo ra được nhiều blog Mối quan hệ giữa user và blog là quan hệ 1-n (một - nhiều)

Mô tả: Một comment chỉ có thể được tạo ra bởi 1 user nhất định Và 1 user có thể tạo ra được nhiều comment Mối quan hệ giữa user và comment là quan hệ 1-n (một - nhiều)

Mô tả: Một sách có thể có nhiều comment Và 1 comment có thể comment được vào 1 sách Mối quan hệ giữa book và comment là quan hệ 1-n (một - nhiều)

- 5 Thiết kế giao diện

- 5.1.2 Kiến trúc giao diện trang chi tiết sách

- 5.1.3 Kiến trúc giao diện trang profile user

- Giao diện

- 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

đăng kí

- Giao diện

- Mô tả: Giao diện trang đăng ký xuất hiện khi người dùng bấm vào chữ

register trong trang đăng nhập 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 ký 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 ký : Gồm 3 ô input nhập email, nhập mật khẩu và xác nhận lại mật khẩu

+ Nút register: khi nhập đúng form email và phần xác nhận mật khẩu đúng với mật khẩu ban đầu thì sẽ xác nhận thông báo thành công và chuyển sang trang home

- Giao diện

- 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