.6 Thiết kế giao diện

Một phần của tài liệu 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) (Trang 33)

- Giao diện được thiết kế trên figma.

- Link: https://www.figma.com/file/gkZihQ6GkacSacT9pSXj3s/Book- Selling?node-id=221%3A32 III.6.1 Danh sách các màn hình STT Tên màn hình Ghi chú 1 Màn hình đăng nhập 2 Màn hình đăng ký 3 Màn hình quên mật khẩu 4 Màn hình trang chủ 5 Màn hình sản phẩm 6 Màn hình profile 7 Màn hình thanh tốn 8 Màn hình dashboard 9 Màn hình quản lý sản phẩm 10 Màn hình quản lý khách hàng 11 Màn hình thêm sản phẩm 12 Màn hình quản lý đơn hàng

27

III.6.2 Chi tiết các màn hình

III.6.2.1 Màn hình đăng nhập

III.6.2.2 Màn hình đăng ký

28

29

30

31

III.6.2.7 Màn hình thanh tốn

32

III.6.2.9 Màn hình quản lý sản phẩm

33

34

35

III.7 Đặc tả Usecase

36

III.7.2 Đặc tả chi tiết usecase

III.7.2.1 Đặc tả usecase đăng ký tài khoản

Tên yêu cầu Đăng ký tài khoản

Mô tả Đăng ký tài khoản cho người dùng Tác nhân Người dùng

Điều kiện trước Khơng có Điều kiện sau Khơng có Ngoại lệ Khơng có Luồng xử lý

chính

I. Đăng ký tài khoản

1. Truy cập trang chủ 2. Chọn đăng ký tài khoản

3. Điền thông tin đăng ký tài khoản 4. Đăng ký tài khoản

Luồng xử lý phụ

- Hệ thống thông báo thực hiện thao tác thành công - Hệ thống thông báo lỗi

37

III.7.2.2 Đặc tả usecase đăng nhập tài khoản

Tên yêu cầu Đăng nhập tài khoản

Mô tả Đăng nhập tài khoản cho người dùng Tác nhân Người dùng

Điều kiện trước Khơng có Điều kiện sau Khơng có Ngoại lệ Khơng có Luồng xử lý

chính

I. Đăng nhập tài khoản 1. Truy cập trang chủ

2. Chọn đăng nhập tài khoản

3. Điền thông tin tài khoản và mật khẩu 4. Đăng nhập

Luồng xử lý phụ

- Hệ thống thông báo thực hiện thao tác thành công - Hệ thống thông báo lỗi

38

III.7.2.3 Đặc tả usecase cập nhật thông tin cá nhân

Tên yêu cầu Cập nhật thông tin tài khoản

Mô tả Cập nhật thông tin cho người dùng Tác nhân Người dùng

Điều kiện trước Đăng nhập tài khoản Điều kiện sau Khơng có

Ngoại lệ Khơng có Luồng xử lý

chính

I. Cập nhật thơng tin tài khoản

1. Truy cập trang thông tin tài khoản 2. Chọn cập nhập thông tin tài khoản 3. Điền thông tin cần cập nhập 4. Lưu

Luồng xử lý phụ

- Hệ thống thông báo thực hiện thao tác thành công - Hệ thống thông báo lỗi

39

III.7.2.4 Đặc tả usecase tạo đơn hàng người dùng

Tên yêu cầu Tạo đơn hàng

Mô tả Tạo đơn hàng cho người dùng Tác nhân Người dùng

Điều kiện trước Đăng nhập tài khoản Điều kiện sau Khơng có

Ngoại lệ Khơng có Luồng xử lý

chính

I. Tạo đơn hàng

1. Truy cập trang chủ và trang sản phẩm 2. Chọn sản phẩm cần thêm vào giỏ hàng 3. Truy cập trang giỏ hàng

4. Điền thông tin đơn hàng 5. Chọn phương thức thanh toán 6. Tạo đơn hàng

Luồng xử lý phụ

- Hệ thống thông báo thực hiện thao tác thành công - Hệ thống thông báo lỗi

40

III.7.2.5 Đặc tả usecase quản lý người dùng

Tên yêu cầu Quản lý người dùng

Mô tả Giúp quản trị viên có thể xóa và thay đổi quyền truy cập người dùng

Tác nhân Quản trị viên

Điều kiện trước Đăng nhập tài khoản quản trị viên Điều kiện sau

Ngoại lệ Khơng có Luồng xử lý

chính

I. Xóa người dùng

1. Truy cập quản lý người dùng 2. Chọn người dùng cần xóa 3. Xác nhận xóa người dùng II. Sửa quyền truy cập người dùng

1. Truy cập quản lý người dùng

2. Chọn người dùng cần thay đổi quyền truy cập 3. Xác nhận

Luồng xử lý phụ

- Hệ thống thông báo thực hiện thao tác thành công - Hệ thống thông báo lỗi

41

III.7.2.6 Đặc tả usecase quản lý hố đơn

Tên u cầu Quản lý hóa đơn

Mơ tả Giúp quản trị viên có thể thay đổi trạng thái hóa đơn Tác nhân Quản trị viên

Điều kiện trước Đăng nhập tài khoản quản trị viên Điều kiện sau

Ngoại lệ Khơng có Luồng xử lý

chính

I. Quản lý hố đơn

1. Truy cập quản lý hóa đơn

2. Chọn hóa đơn để thay đổi trạng thái 3. Xác nhận thay đổi trang thái

Luồng xử lý phụ

- Hệ thống thông báo thực hiện thao tác thành công - Hệ thống thông báo lỗi

42

Tên yêu cầu Mua sản phẩm

Mô tả Giúp người dùng có thể mua sản phẩm Tác nhân Người dùng

Điều kiện trước Đăng nhập tài khoản người dùng Điều kiện sau

Ngoại lệ Khơng có Luồng xử lý chính I. Xem sản phẩm 1. Chọn sản phẩm 2. Truy cập trang sản phẩm II. Thêm vào giỏ hàng

1. Chọn sản phẩm

2. Truy cập trang sản phẩm 3. Nhấn vào nút mua sản phẩm Luồng xử lý

phụ

- Hệ thống thông báo thực hiện thao tác thành công - Hệ thống thông báo lỗi

III.7.2.8 Đặc tả usecase quản lý sản phẩm

Tên yêu cầu Quản lý sản phẩm

Mô tả Giúp quản trị viên có thể quản lý sản phẩm Tác nhân Quản trị viên

Điều kiện trước Đăng nhập tài khoản quản trị viên Điều kiện sau

Ngoại lệ Khơng có

43 chính 1. Vào trang quản lý sản phẩm

II. Thêm sản phẩm

1. Vào trang thêm sản phẩm 2. Truy cập trang thêm sản phẩm 3. Điền thông tin

4. Nhấn vào nút thêm sản phẩm III. Sửa sản phẩm

1. Vào trang quản lý sản phẩm 2. Chọn sản phẩm cần chỉnh sửa 3. Điền thông tin cần chỉnh sửa 4. Chọn lưu để chỉnh sửa sản phẩm IV. Xoá sản phẩm

1. Vào trang quản lý sản phẩm 2. Chọn sản phẩm cần xoá 3. Xác nhận xoá sản phẩm 4. Xác nhận để xoá sản phẩm Luồng xử lý

phụ

- Hệ thống thông báo thực hiện thao tác thành công - Hệ thống thông báo lỗi

III.7.2.9 Đặc tả usecase quản lý loại sản phẩm

Tên yêu cầu Quản lý loại sản phẩm

Mô tả Giúp quản trị viên có thể quản lý loại sản phẩm Tác nhân Quản trị viên

44 Điều kiện sau

Ngoại lệ Khơng có Luồng xử lý

chính

I. Xem danh sách các loại sản phẩm 1. Vào trang quản lý sản phẩm II. Thêm loại sản phẩm

1. Vào trang quản lý sản phẩm 2. Chọn thêm loại sản phẩm 3. Điền thông tin

4. Nhấn vào nút thêm loại III. Sửa loại sản phẩm

1. Vào trang quản lý sản phẩm 2. Chọn loại sản phẩm cần chỉnh sửa 3. Điền thông tin

4. Chọn lưu để chỉnh sửa IV. Xoá loại sản phẩm

1. Vào trang quản lý sản phẩm 2. Chọn loại sản phẩm cần xoá 3. Xác nhận xoá loại sản phẩm 4. Xác nhận để xoá

Luồng xử lý phụ

- Hệ thống thông báo thực hiện thao tác thành công - Hệ thống thông báo lỗi

45

Tên yêu cầu Quản lý các tag

Mơ tả Giúp quản trị viên có thể quản lý các tag Tác nhân Quản trị viên

Điều kiện trước Đăng nhập tài khoản quản trị viên Điều kiện sau

Ngoại lệ Khơng có Luồng xử lý

chính

I. Xem danh sách các tag

1. Vào trang quản lý sản phẩm II. Thêm tag

1. Vào trang quản lý sản phẩm 2. Chọn thêm tag

3. Điền thông tin

4. Nhấn vào nút thêm tag III. Sửa loại sản phẩm

1. Vào trang quản lý sản phẩm 2. Chọn tag cần chỉnh sửa 3. Điền thông tin

4. Chọn lưu để chỉnh sửa IV. Xoá loại sản phẩm

1. Vào trang quản lý sản phẩm 2. Chọn tag cần xoá

3. Xác nhận xoá tag

4. Xác nhận xoá tag để xoá tag Luồng xử lý

phụ

- Hệ thống thông báo thực hiện thao tác thành công - Hệ thống thông báo lỗi

46

III.8 Sơ đồ hoạt động

III.8.1 Danh sách các sơ đồ III.8.2 Chi tiết các sơ đồ III.8.2 Chi tiết các sơ đồ

47

48

49

50

III.8.2.5 Sơ đồ hoạt động theo dõi danh sách đơn hàng

51

52

53

54

55

56

57

58

59

60

61

IV TỔNG HỢP IV.1 Kết quả IV.1 Kết quả

IV.1.1 Các tính năng đã làm được

- Kết thúc giai đoạn phát triển, đồ án đã đạt được các tính năng và yêu cầu mà nhóm đã đề ra.

- Phần mềm đã có đầy đủ các tính năng đã đặt ra một trang web bán hàng. - Những tính năng chí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

- Có một số trang cịn chưa responsive 100%

- Khi chuyển trang truy vấn dữ liệu nhiều khi bị chậm.

IV.2 Hướng phát triển tiếp theo

- Dự án đã đi đến giai đoạn có thể sử dụng với đầy đủ tính năng liên quan đến bán hàng, kiểm tra đơn hàng, quản lý sách nhưng để đáp ứng đầy đủ nhu cầu của khách hàng và người quản lý trang web thì vẫn có những tính năng chưa được hồn thiện và tối ưu 100%. Hơn nữa đồ án hiện tại khi nhận được phản hồi của người dùng cũng có thể được cải thiện hơn về tính năng, giao diện sao cho phù hợp với người dùng nhất. Sau đó có thể mở rộng dự án với các tính năng mới, độc nhất để thu hút thêm người dùng.

- Một số tồn tại cần được cải thiện:

o Một số trang chưa được responsive 100%

o Nâng cấp giao diện một số phần sao cho người dùng dễ sử dụng. o Tính năng lịch sử giá có thể dễ dàng truy cập và sử dụng hơn.

- Đối với người dùng có nhu cầu muốn mua sách: Có hai hướng phát triển chính o Hướng phát triển thứ nhất: Xây dựng một cộng đồng những người yêu sách

62

▪ Cộng đồng sẽ có một vài người có sức ảnh hưởng lớn. Họ có thể đăng bài review và được cấp cho một link đặc biệt liên quan đến sản phẩm. Khi người dùng click vào link đó và mua sản phẩm thì những người đăng bài sẽ được nhận tiền hoa hồng từ người bán.

▪ Xây dựng một cộng đồng như Goodread, ln có những bài đăng bàn luận về các cuốn sách hay, những cuốn sách nên đọc, viết cảm nhận sau khi đọ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á và tạo những trải nghiệm mới cho người mua sách trong quá trình mua sách và đọc sách.

▪ Xây dựng hệ thống lưu trữ sách như Steam đối với các cuốn sách điện tử. Người dùng có thể mua sách hoặc tặng sách, chia sẻ sách điện tử cho người khác.

▪ Xây dựng tính năng đọc sách phù hợp đối với tất cả những thiết bị mà người dùng có thể sử dụng. Sao cho người đọc chỉ cần lên trang web thì có thể đọc sách ở bất cứ thời gian, bất cứ địa điểm nào. - Song song với hai hướng phát triển trên thì đồ án trên cũng có thể phát triển thêm tính năng:

o Gợi ý sách cho từng người dùng cụ thể dựa theo lịch sử tìm kiếm sách và sách đã mua của người dùng.

o Tìm kiếm từ khố trong một cuốn sách bất kỳ mà người dùng đã mua hoặc trong danh sách cuốn sách điện tử có thể xem trước để dễ dàng xem và tìm kiếm nguồn tài liệu hay một đoạn sách theo ý muốn.

- Đối với người quản lý trang web:

o Sử dụng các biểu đồ hay các hình ảnh trực quan hơn trong q trình tổng hợp dữ liệu và phân tích dữ liệu.

o Tăng cường các tính năng quản lý của người quản lý:

▪ Xem chi tiết số đơn hàng của người dùng: Đơn hàng đã bán, tỉ lệ nhận hàng, tỉ lệ huỷ đơn hàng của từng người dùng.

63 • Sản phẩm được thêm vơ giỏ hàng của bao nhiêu người dùng

• Sản phẩm được mua bao nhiêu lần kể từ khi 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?node- id=221%3A32

64

IV.5 Bảng phân công công việc

STT Tên công việc

Thành viên

Phi Phước

1 Chuẩn bị, lên kế hoạch x x

2 Khảo sát, đặc tả yêu cầu x x

3 Thiết kế kiến trúc x x

4 Thiết kế dữ liệu x x

5 Thiết kế giao diện x

6 Xây dựng trang chủ x

7 Xây dựng trang chi tiết sách x

8 Xây dựng trang giỏ hàng x

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

12 Xây dựng trang dashboard x

13 Đăng nhập, đăng ký quên mật khẩu x

14 Bình luận và đánh giá của người dùng x

15 Kiểm tra và sửa lỗi x x

16 Viết và tổng hợp báo cáo x x

Tỷ lệ công việc phân công 50% 50%

65

TÀI LIỆU THAM KHẢO

1. Trang web chính thức của NextJS: https://nextjs.org/

2. Trang web chính thức của MongoDB: https://www.mongodb.com/ 3. Diễn đàn cơng nghệ của lập trình viên: https://stackoverflow.com/

4. Dao Quang Huy(2019), Tìm hiểu về NextJS: https://viblo.asia/p/tim-hieu-ve- nextjs-p1-djeZ1bNjlWz

5. Nguyễn Thanh Tùng(2021), Tìm hiểu về framework NextJS:

https://viblo.asia/p/tim-hieu-ve-framework-nextjs-WAyK86JElxX 6. Wikipedia NexrJS: https://en.wikipedia.org/wiki/Next.js

Một phần của tài liệu 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) (Trang 33)

Tải bản đầy đủ (PDF)

(72 trang)