Thiết kế trang web và ứng dụng di động để quản lý chuỗi cửa hàng bán điện thoại

Tổng quan hệ thống và giới thiệu về các công nghệ sử dụng@ Nodejs, Nestjs: Y nest Hinh 1-2 Framework Nest/s Dựa vào quy mô của dự an dé lựa chọn các công nghệ phù hop là một điều rat qua

Trang 1

KHOA CÔNG NGHỆ THÔNG TIN 1

THIẾT KE TRANG WEB VÀ UNG DỤNG DI DONG DE

QUAN LÝ CHUOI CUA HANG BAN ĐIỆN THOẠI

Giang viên hướng dẫn : TS ĐÀO NGỌC PHONG

Sinh viên thực hiện : NGUYEN ĐỨC HIẾULớp : DI7CNPM01

Khóa : 2017-2022

Hệ : ĐẠI HỌC CHÍNH QUY

HÀ NỘI - 2021

Trang 2

HỌC VIEN CÔNG NGHỆ BƯU CHÍNH VIÊN THONG

KHOA CÔNG NGHỆ THÔNG TIN 1

THIẾT KE TRANG WEB VÀ UNG DỤNG DI DONG DE

QUAN LÝ CHUOI CUA HANG BAN ĐIỆN THOẠI

Giang viên hướng dẫn : TS ĐÀO NGỌC PHONG

Sinh viên thực hiện : NGUYEN ĐỨC HIẾULớp : DI7CNPM01

Khóa : 2017-2022

Hệ : ĐẠI HỌC CHÍNH QUY

HÀ NỘI - 2021

Trang 3

Đồ án tốt nghiệp Đại học

NHẠN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN

Hà Nội, ngày tháng năm 20

Giảng viên hướng dẫn

Nguyễn Đức Hiếu - B17DCCN231

Trang 4

NHẠN XÉT CUA GIANG VIÊN PHAN BIEN

Điểm: (Bằng chữ: )

Hà Nội, ngày tháng năm 20

Giảng viên phản biện

Nguyễn Đức Hiếu - B17DCCN231 i

Trang 5

LỜI NÓI ĐẦU

Em xin bày tỏ lòng biết ơn sâu sắc đến TS Đào Ngọc Phong, thầy đã tận tình giúp

đỡ em trong suốt quá trình nghiên cứu và thực hiện đồ án tốt nghiệp Với sự chỉ bảo

của thầy, em đã có những định hướng tốt trong việc triển khai và thực hiện các yêu cầu

trong quá trình làm đồ án

Em cũng xin bày tỏ lòng biết ơn chân thành tới các thầy cô giáo trong Học việnCông nghệ Bưu chính Viễn thông, đặc biệt là các thầy cô trong khoa Công nghệ thôngtin I đã tận tuy dạy dỗ em trong quá trình học tập, rèn luyện suốt thời gian qua, giúp

em có được những kiến thức, kỹ năng dé hoàn thiện đồ án, cũng như phục vụ cho học

tập và làm việc sau này.

Đặc biệt, lời cảm ơn thiêng liêng nhât con xin được gửi tới bô mẹ Con xin cảm ơn

bô mẹ đã luôn yêu thương, tin tưởng con, luôn động viên, ủng hộ, tạo điêu kiện và

luôn là chỗ dựa tinh thần vững chắc cho con trong suốt thời gian ngôi trên ghế nhà trường.

Và cuối cùng tôi xin gửi lời cảm ơn tới những người bạn luôn ở bên, chia sẻ cùng

tôi những lúc khó khăn, đóng góp ý kiến và giúp đỡ trong quá trình học tập, nghiêncứu và hoàn thành đồ án tốt nghiệp

Trong quá trình thực hiện đồ án, mặc dù đã có gang dé hoàn thiện đề tài tốt nhất có

thẻ, nhưng chắc chắn không thể tránh khỏi những thiếu sót Vì vậy, em rất mong nhậnđược sự góp ý của thầy cô và các bạn dé đồ án tốt nghiệp của em được hoàn thiện hơn

Em xin chân thanh cảm on!

Hà Nội, ngày 03 tháng 01 năm 2022

Sinh viên

Nguyễn Đúc Hiếu

Nguyễn Đức Hiếu - B17DCCN231 ii

Trang 6

LỜI MỞ DAU pieeeecscssssesssesssesssessssessvesssesssesssecssesssvsssusssssssesssesssessssesssesssesssesssecssectseesaseesses |

CHƯƠNG 1: TONG QUAN HE THONG VÀ GIỚI THIỆU VỀ CÁC CÔNG NGHỆ

SỬ DỤNG ¿55-22122122 1221122122112T1211211121 1112121121111 rree 2

1.1 Tổng quan hệ thống: - 22 2£ ©2£+E£2EE+EEE9EEEEE12E12112711211711271711271211 11 xe 2

1.2 © v30 2 1.2.1 Phía server backend: - < + + 2< + + +22 1332113 9113 23 12111291 11g vn ng cư 2 1.2.2 Phía client w€b:: - - c2 1121110311111 v ng v ng TH ng kg kkt 9 1.2.3 Phia client app oi 1177 II

1.2.4 Phần triển khai hệ thống: -¿- 2 2 1 E£E2EE2EE2EE2EE2EEEEEEEEEEEEEEEEEkrrkrred 12CHƯƠNG 2: PHAN TÍCH VA THIẾT KE HỆ THÓNG 2-25 l62.1 YOU CẦU: -2-©22-©E2SEE22E1E212212211271211271211271121111121111111.11 011.111.111 e l6

2.2.5 Thiết kế hệ thongs c.cececcescesessessessesssssscssessessessessessssssesuessesuessessesaeesscsnseseeneees 52

2.3 Kết luận chương: - ¿+2 s+SE2Ex£E112E171127112112111211111 11111011 11 1kg 53

CHƯƠNG 3: TRIEN KHAI HE THONG cecccsscsssessessesssessesssesssessesssessesssessssseesseess 54

3.1 Ý tưởng thực hiỆn: 2-2 s2 1 E12 1E2112711211211211 111211211 11.11 11x e1xerree 54

E6 0ì (vi vi 01175 ae 57 3.2.1 Thuê va cài đặt môi trường lên máy chủ: - 5c +2 *++*++x+v+sxsxss 57 Nguyễn Đức Hiếu - B17DCCN231 iv

Trang 7

3.2.2 Thuê tên miÈN: - 2: 2© ©S£+SE+2EE£EE2SEEEEE12712112711211711271711271211 712 xe 583.2.3 Dang ký chứng chỉnh SSL cho tên miễn: 2-2 2 22 ++£Ez+£xezEeze 593.2.4 Thiết lập CI/CTD: - 2 2 Ss+SE9EE£EE£EEEEEE2112112112111111111111211211 111111 603.2.5 Cau hình Nginx và trỏ tên miền tới máy chủ: - 2-22 sz+cs+zszced 613.2.6 Cau hình dé chạy ứng dụng di d6ng? cescecceccecesceseesessessessesssestesesessesseesees 64

3.3 Kết luận CHU OTIG 2107172727 = 65

PHAN KẾT LUẬN -2-22-55222E92E52E1221127112712112712112111211111211211 11.1111 66TÀI LIEU THAM KHAO M0 ccccecccsssessesssesssessesssessvcssessvessesssessecssessssssecasessecanessecssesssesses 67

Nguyễn Đức Hiếu - B17DCCN231 Vv

Trang 8

DANH MỤC BANG BIEU

Bang 2-1 Yêu cầu phi chức năng - 22-22 22+2+++2EE+2EE2EE+2EEEEEEEE2EE2E1 22t 18

Bảng 2-1 Bảng thuật ngữ - -.- Q0 220112111211 111 1111110111111 011 911 H1 HH HH nh Hy 19 Bảng 2-2 Bảng ca sử dụng - - G12 12112112 1111111111111 0111 1 111111111111 11 H1 nh rệt 21 Bang 2-3 Kịch ban đăng nhap ccc ce eccccecceeseeseeseeeseeseeseeeeeeseesececeaeeaeeeeeseeaeeneeeeeeaeeats 23 Bang 2-4 Kịch ban tra cứu thông tin mặt hàng - + + ni, 25

Bang 2-5 Kịch bản gửi tin nhắn ¿- 2-2 se S2E2E121121127111 1112112112111 111111 xe 29

Bảng 2-6 Kịch bản sửa thông tin cá nhân - - c3 22331121131 12E11EEE1Eerrrke 32 Bảng 2-7 Kịch bản nhập hàng - c2 2222211111121 1231 1111122111111 111111 1E 34 Bang 2-8 Kịch bản ban hàng - - - + 2+ 1 vn HH TH TH nh HH Hàn nhàn 38 Bảng 2-9 Kịch bản thêm nhân viÊn - - 2 2c 3632112113911 111111121111 xe 42 Bảng 2-10 Kịch ban sửa thông tin nhân viÊn - - 3c St *+t*EEvtEsererrrrrrrsrrrres 44

Bang 2-11 Kịch bản thêm mới sản phẩm 2-2: 2SS£2SE£EE£2EE£EEE2EEZEESEErrExrrrrrr 46Bang 2-12 Kịch bản chỉnh sửa sản phẩm 2-2 2 SSS‡EE‡EEE2EE2EE2E12E1EEXEEEEerxee 48

Nguyễn Đức Hiếu - B17DCCN231 vi

Trang 9

DANH MỤC HÌNH ẢNH

Hình 1-1 Sơ đồ tổng quan công nghỆ 2-2 2© £+SE+EE2EE£EEEEEEEEEEEEEEEEEEEEEEEkrrrrrrg 3

Hinh 1-2 Framework 01110 T8 4 4 Hinh 1-3 Dich vu MySQL 15 5 Hình 1-4 Dich vụ MIiTHO - G2 2 2211122111253 115311125111 911 11111 119g vn kg ng kg cư 5

Hình 1-5 Nền tảng Do ker 2-22 s2 E9EE2EEEEE12E157115711211711211711211 111111 11 xe 6

Hình 1-6 Thư viện socK€f.1O << E2 11112231111 11931 11119530 1111853111111 1kg kg xà 7 Hinh 1-7 JWT Authentication 7 Hình 1-8 Công nghệ MIBTaftIOT - - G2 221211321123 131 1111911111111 1111111 111111111 1e, 8

li i0 5600-ãuì 8x11 1n ố 9

Hình 1-11 Công cụ Webpack - - c1 112112111 110111111 11011111 01101 11 001 11 81 xxx re 10 Hình 1-12 Thư viên Ant ÏDesIgn - c2 2c 3211211151151 111 11111111111 1111111111 11 11 xe, 11 Hình 1-13 Framework React Native ccccccceecesccecseseeeeseeeeceseeseceeeeeeaeeeeeseeaeeneeeeeeaeens 11 Hình 1-14 Công nghệ Code Push - c2 2221221113113 1511111111111 E811 1 ke rrep 12

Hình 1-15 Nền tang Google Platform với VM instance 2- 5+5 z+x+Esrxered 13

bi :000/26).1-3.:) 80//090 1n 14

Hình 2-1 Use Case tổng quan web - -++s+2E2+Ex+2EE2EE2E1271122171127121171 22 xe 22

Hình 2-2 Use Case tổng quan app 2-52 5++SE+2E2EEt2EE2EE12E1271127171171.211 21 xe 22

Hình 2-1 Giao diện đăng nhập web - - 2 2c 32122312 1151115111111 1 1111111 tk rrkg 24 Hình 2-2 Giao diện đăng nhập ứng dụng di động - s5 nxsssesererrek 24

Hình 2-3 Màn hình danh sách sản phẩm 2- ¿52 2 £+EE£EE£EE£EEZEEZEEzEEzEkerxrred 26Hình 2-4 Màn hình tìm kiếm sản phẩm - 2-22 22S22EE£2EE£EEE2EEEEEEEEEEEEEerxrrrxerg 26Hình 2-5 Màn hình hién thị nút quét mã QR 2-22 2+ £+EE+2EE£EE2EEeEEzExerresred 27

Nguyễn Đức Hiếu - B17DCCN231 vii

Trang 10

Hình 2-6 Màn hình quét mã JR - - ¿G222 3221331135133 ExeE 27 Hình 2-7 Màn hình quét mã QR lỗi 2-2 ¿+SSE+SE+E£+E£EEEEEEEEEEEEEEEEEEEEEErEerkrrkee 28

Hình 2-8 Màn hình thông tin chỉ tiết sản phâm - 2: 2¿25¿22S222S£+2E+v2zxzzxvz 28

Hình 2-9 Màn hình danh sách cuộc trò chuyỆn - 5 225 +22 13+ £skEserrserrserres 30

Hình 2-10 Màn hình tim kiếm cuộc trò chuyện 22-2 52 +E+£E++EEerx+zrxrreee 30

Hình 2-11 Màn hình cuộc trò chuyỆN - 5c 2223221211312 111111 1111k rkkrek 31 Hình 2-12 Màn hình thông tin cá nhân người dùng - eee eneeeeeeeeeeteeseeneeeeees 32 Hình 2-13 Màn hình chỉnh sửa thông tin người dùng - c5 2c 2+ xsvsssssrsee 33 Hình 2-14 Màn hình chính nhập hàng - - c2 3221311232512 Eexrrke 34

Hình 2-15 Màn hình tìm kiếm sản phẩm nhập vào 2-2-2 52 £+£x++£x+zxzzrxez 35

Hình 2-17 Màn hình nhập giá nhập VảO (G2 2211112112111 511111 1tr 36 Hình 2-19 Màn hình quét mã QR - - G2 3232213111511 11 1511111111111 E11 E111, 36 Hình 2-20 Màn hình bán hàng 5c 5 323211351151 E5112 1151111211111 111111 1E rrke 38

Hình 2-21 Màn hình tìm kiếm mặt hàng cần bán 2-2 + +E2E++E£+E+2E+z£xerxees 39

Hình 2-22 Màn hình các mặt hàng bán đã chọn - 2 52 S22 *22*+*£+v+eEsererssrs 39 Hình 2-23 Màn hình chọn khách hàng - - 6 6 6 2E S*E SE rrkrrskrskrrerree 40 Hình 2-24 Màn hình thêm mới khách hàng ¿5 2 32+ *+*v++v++e+eeeseeesssss 40 Hình 2-25 Màn hình quét mã ÓR - - 2 222132213211 33511551 1511511111111 11 E11 1 rry 4I

Hình 2-26 Màn hình mặt hàng đã hẾt - 2-2 t+EE2EE£EEE2EE2E127122E1711221 212 Xe 41

Hình 2-27 Màn hình danh sách nhân viÊn - - ¿52 5+ St *+2E+*EE+EEerxrerrrrrrrrrrrkrrke 43 Hình 2-28 Màn hình thêm mới nhân viÊn - 5 5+ 2£ 22 £+EE+EE+eEserrrrrrrererrerrke 43 Hình 2-29 Màn hình chỉnh sửa nhân viên - - + 3233 E SE EEEEEsrrrrrerrrrrre 45

Hình 2-30 Màn hình danh sách sản phẩm - 2-2 ¿+ 2+EE+2EE+EE++EEt£EEzEEzEerrrezr 46Hình 2-31 Màn hình thêm mới sản phâm 2-22 522 E+EE£2EE+EEE2EE+ZEESEEezErrrrrers 47

Nguyễn Đức Hiếu - B17DCCN231 viii

Trang 11

Hình 2-32 Màn hình chỉnh sửa sản phẩm 2 2 2 E£EE£2E£EE2EE2EE2EEEEEeEEerrerree 48Bang 2-13 Kịch ban xem thống kê doanh thu -22- 2 522 E+2E+2EE£+EE+£E++EEzxezrxez 49Hình 2-33 Màn hình thống kê doanh thu theo từng tháng trong năm 50Hình 2-34 Man hình thống kê doanh thu theo từng ngày trong tháng 50

Hình 2-35 Biểu đồ lớp phân tích - 2 2 ++Ex+EE2EE£2EEEEE2EEEEEE2E1211211211 E1 ctxe 51

Hình 2-36 Biểu đồ lớp thiết k6 c.cecceccecccessesssessesssessvessesssessesssessusssesssessecssessecssesssesses 52

Hình 2-37 Lược đồ CSDL 2¿¿-+22E++++22EEEEkttirttEEkrrrrttrrrrrrrriirrrrrrie 52

Hình 3-1 Giao điện quản lý tên miễn - 2-5 2 E+SE+EE£EEEEEEEEEEEE2EE2EE2E1EExEEEervreg 54

Hình 3-2 Giao diện quản lý máy chủ của Google CÏoud :- 5+5 +++s++s+ssss2 55 Hình 3-3 Giao diện quan lý của CloudfÏare - c2: 3+ +22 +EEEsrserrerrrrrrrrrrree 56 Hình 3-4 Giao diện GitHub quan lý source €Od -. 5 3c 3+3 ssvssereeeeseeres 56 Hình 3-5 Giao diện tạo máy chủ của Google Cloud - c5 scc + x+svxsexsssssess 57

Hình 3-7 Giao diện kết nối SSH đến máy chủ - 2-2 52 E+E£EE+2EEeEE+2EEerrrers 58Hình 3-8 Giao diện thuê tên miền của Freenom - + s5 +E£EE£EE£EEzEerxerxerezsee 59Hình 3-9 Giao diện đăng ký chứng chi SSL cho tên miễn - 2-2-5 522525222 59Hình 3-10 Giao điện thêm biến mơi trường trên GitHub - 22 2 22s s2 60Hình 3-11 Cấu hình CI/CD ¿¿552+++2222Y++22EEEY2EEEEtttEEttrttttttrrrrtrrrrrrrrrrrre 61

Hình 3-12 Giao diện tao record của Cloudfare - 5555253 + +23 ‡++£#++zeezeeesese 61

Hình 3-13 Tạo ra các file cấu hình nginx - 2 2 2+SE+EE+EE£EE£EEEEEEEEEEEEkeEkerxers 62

Hình 3-14 Nội dung file hnme-be - G2322 1311211211251 151 1511111111111 11 ke 62 Hình 3-15 Nội dùng file hnrmS-ÍC - 2+ t1 vn ng ng ng như 63 Hình 3-16 Nội dung file hnms-Im1T11O s5 6 3 21*23E 1 SE ghe 63 Hình 3-17 Nội dung file hnms-minio-conSoÏ€ sc St *t 3+ vEEssrsrrrrrrrrrrreree 64

Nguyễn Đức Hiếu - B17DCCN231 ix

Trang 12

LỜI MỞ ĐẦUHiện nay, tại nước ta các chuỗi cửa hàng kinh doanh đang phát triển rất nhanh vàchưa có dấu hiệu hạ nhiệt Các cửa hàng kinh doanh về các mặt hàng rất đa dạng, từcác mặt hàng thiết yếu hằng ngày đến những mặt hàng phục vụ rất ít số đông mọingười Bên cạnh đó các chuỗi cửa hàng về đồ công nghệ, đặc biệt là điên thoại, máytính bảng hay máy tính xác tay đang trên đà phát triển rất mạnh Các chủ doanh nghiệpkhông chỉ tìm kiếm thị từ tại các đô thi sam uất ma còn len lỏi tại các khu ngoại thành,các vùng nông thôn Có được như vậy là do chúng ta đang ở thời đại 4.0 và nhu cầu sửdụng các món đồ công nghệ cũng từ đó mà tăng lên nhanh chóng, khiến thị trường đồcông nghệ nói chung đang nóng hơn bảo giờ hết Các chủ doanh nghiệp vừa và lớn cần

phải có những chính sách quản lý doanh nghiệp của mình một các khoa học và hiệu

quả Cũng trong thời đại này, công nghệ cũng đang phát triển cực nhanh nếu không

muốn nói là phát triển một cách chóng mặt Vì đó nên các chủ doanh nghiệp đã tìmđến những giải pháp công nghệ dé quản lý doanh nghiệp của mình Nhờ vào các phầnmềm công nghệ mà các doanh nghiệp đã quản lý được nhân viên, hàng hoá, mọi thứ

một các nhanh chóng, chính xác, tự động và công minh Năng suất cũng từ đó được cải

thiện rõ rệt Việc ứng dụng công nghệ thông tin vào việc quản lý doanh nghiệp tỏ ra

rất hữu ích và trở lên rất cần thiết đối với những doanh nghiệp vừa và lớn, cần phải

quản lý các chuôi cửa hàng tại nhiêu nơi.

Chính vì tính hữu dung của việc ứng dụng công nghệ thông tin vào quản ly doanh

nghiệp nên em đã chọn đề tài đồ án là: “THIẾT KE TRANG WEB VÀ UNG DUNG

DI DONG DE QUAN LÝ CHUOI CUA HÀNG BAN ĐIỆN THOẠI” Đồ án này baogồm các phan mở dau, nội dung và kết luận Phan nội dung gồm các chương sau:

Chương 1: Tổng quan hệ thống và giới thiệu về các công nghệ sử dung

Chương 2: Phân tích và thiết kế hệ thống

Chương 3: Triển khai hệ thống

Nguyễn Đức Hiếu - B17DCCN231 1

Trang 13

Đồ án tốt nghiệp Đại học Chương 1 Tổng quan hệ thống và giới thiệu về các công nghệ sử dụng

CHƯƠNG 1: TONG QUAN HE THONG VÀ GIỚI THIỆU VE

CÁC CÔNG NGHỆ SỬ DỤNG.

1.1 Tổng quan hệ thống:

Đây là một hệ thống quản lý chuỗi cửa hàng có nhiều chi nhánh ở khắp nơi trên

đất nước Sản phâm chủ yếu là điện thoại, máy tính bảng, máy tính laptop và các phụ

kiện đi kèm Phần mềm như một hệ thống quản lý kho, tình trạng còn lại của các mặthang trong từ kho của mỗi chi nhánh Giúp cho nhân viên kế toán dé dang quan lý cácmặt hàng, số lượng bán ra cũng như số lượng nhập vào theo thời gian cụ thể Kế toán

còn có thê thông kê tiền lương của nhân viên theo từng tháng Đối với nhân viên bán

hàng thì ngoài tiền lương cứng, họ còn được hưởng tiền thưởng theo doanh số bánhàng, nghĩa là nếu họ bán được nhiều sản phẩm thì tiền thưởng của họ càng nhiều Hệthống còn giúp cho nhân viên bán hàng thao tác chọn và bán các mặt hàng cho khách

hàng Hệ thống còn lưu lại thông tin khách hàng để có các chương trình ưu đãi đối với

từng đối tượng khách hàng Còn đối với admin hệ thống thì ngoài các chức năng kểtrên, họ còn có thé quản lý các nhân viên trong hệ thông, quản lý các chi nhánh và xem

được thống kê doanh thu theo từng tháng trong năm và theo từng ngày trong tháng Hệ

thống hỗ trợ các nhân viên giao tiếp với nhau qua kênh chat của ứng dụng trên điện

thoại di động.

Phạm vi thiết bị: web, app mobile(android & ios)

1.2 Các công nghệ sử dung:

1.2.1 Phía server backend:

Các công nghệ, môi trường, dịch vụ : Nodejs, Nestjs, MySQL, Minio, Docker và các công nghệ cùng với các thư viện hồ trợ khác.

Trang 14

3

v

5 5

Trang 15

@ Nodejs, Nestjs:

Y nest

Hinh 1-2 Framework Nest/s

Dựa vào quy mô của dự an dé lựa chọn các công nghệ phù hop là một điều rat

quan trọng trong bước khởi đầu xây dựng một hệ thống phần mềm Nodejs là một nền

tang được xây dựng trên “V8 Javascript engine” được viết bằng C++ và Javascript

Đối với một kệ thống nhỏ, vừa hoặc không quá lớn thì sử dụng Nodejs + Express để

xây dựng nên hệ thống backend cực kỳ phù hợp Với khả năng triển khai nhanh chóng,

gọn nhẹ thì chi phí và nhân lực dé phat triển cực kỳ được tối ưu

Còn đối với hệ thống lớn thì chúng ta có một Framework hộ trợ cũng cực kỳ tốt đó là

Nestjs Framework này giúp ta xây dựng hệ thống theo hướng module hoá và tích hợp

với các thư viện khác một cách trơn chu Bên cạnh đó Nestjs còn sở hữu một trang

document cực kỳ chi tiết và đễ đọc Vì vậy Nestjs đã và đang được rất đông đảo các

lập trình viên sử dụng trong vài năm gần đây Được ra đời từ năm 2017 và đến đầu

năm 2020 Nestjs đã chạm mốc 23k stars trên Github và được tải xuống 180k lần trungbình mỗi tuần trên NPM Cho nên Nestjs được đánh giá là Framework phát triểnnhanh nhất trong các năm vừa qua

Phiên bản sử dụng: Nodejs v17.2.0, Nestjs “8.0.0

Trang 16

® MySQL:

MySQL.

Hinh 1-3 Dich vu MySQL

Mot hé thong backend thi không thé nao thiéu Database Vay nén em da su dungMySql dé triển khai lưu những dữ liệu cần thiết MySql là một hệ thống quản lý

database vô cùng phổ biến mà hau như lập trình viên nào cũng biết đến Quan trọng

nhất là MySql là mã nguồn mở, nó miễn phí mà những tính năng nó đem lại thì không

cần phải bàn cãi MySql cũng được biết đến là một hệ thống rất mạnh, linh hoạt và là

hệ thống mã nguồn mở phé biến nhất trên thế giới dé quản ly database

Trang 17

Tiếp theo một dịch vụ cũng rất cần thiết khác đó là dịch vụ lưu trữ tệp tin phía

server Có rất nhiều ông lớn cung cấp dịch vụ này phải kế đến như Google hay

Amazon Với em thấy thì dịch vụ S3 của AWS được sử dụng rất nhiều Vì quy mô của

dự án chỉ dừng lại ở mức đồ án và không thành sản phâm để triển khai sử dụng nên

mức chi phí cũng vì vậy mà rất eo hẹp và cần được tối ưu hết mức có thé Vậy nên em

sử dụng dịch vụ Minio dé thay thế S3 của AWS Minio là một dich vu phía server lưu

trữ đối tượng dang phân tán với hiệu năng cao Nói dé hiểu hon thì Minio là một file

server giúp chúng ta có thé dé dang upload hay download file như Amazon hay

Google Điều đặc biệt ở đây là Minio cũng cấp các api giống hệt như S3 của AWS Do

đó nếu muốn chuyền đổi từ Minio sang S3 trở nên cực kỳ dé Có phần khác là dé triển

khai Minio phía server thì hơi phức tạp một chút để có thể sử dụng trơn chu Đó là đối

với đồ án này, còn trong thực tế thì Minio được triển khai phía môi trường local Khi

triển khai lên Development, Staging hay Production thì việc cài đặt chuyên đổi từ

Minio sang S3 vô cùng dễ dàng.

Phiên bản sử dụng: Minio version RELEASE.2021-08-05T22-01-19Z

® Docker:

Còn một nền tảng mà em muốn nhắc đến ở đây, đó là Docker Một vấn đề đượcđặt ra là khi muốn triển khai hệ thong lên một môi trường hoàn toan mới thì việc taomôi trường trở nên rất vất vả và ngôn của lập trình viên rất nhiều thời gian Chưa kéđến vấn đề không tương thích giữa các phiên bản phần mềm khiến cho hệ thống xảy ranhững lỗi không mong muốn Giải quyết vấn đề này thì trước đó có VirualBox ra đời

Trang 18

và sau này thì chúng ta có Docker Nhưng Docker có gì mà lại giải quyết được van dénam giải như vậy? Docker là một nền tảng cung cấp cách để building, deploying vàrunning rất dé dang bằng cách sử dụng các containers(trên nền ảo hoá) Ban dau viếtbang Python, hiện tại đã chuyển sang Golang Nền tang này cho phép ta đóng gọi mọithứ cần thiết cho hệ thống của mình Chỉ cần một lệnh chạy, tất cả môi trường hay các

dịch vụ được tự động kéo về và chạy một cách nhanh chóng như Nodejs, MySQL hay

Minio Có Docker việc triển khai hệ thống lên server rất nhanh chóng

@ Các công nghệ khác:

socket.io

Hinh 1-6 Thư viện socket.io

Socket: Socket là một điểm cudi(end-point) của liên kết giao tiếp hai chiều giữahai chương trình chạy trên mang Nghĩa là một socket được sử dụng dé cho phép mộttiễn trình nói chuyện với một tiến trình khác Các lớp socket được sử dụng dé kết nốigiữa client và server Nó được ràng buộc với một công port để các tầng TCP có thê

định danh ứng dụng mà dif liệu sẽ được gửi tới Ap dụng điều đó, hệ thống này có

chức năng chat giữa mọi người với nhau, vì vậy cần hiển thị tin nhắn theo thời gianthực Lúc này giao thức WebSocket tỏ ta rất hữu dụng khi xử lý bắt sự kiện ngườidùng gửi tin nhắn qua lại

“JƯUTWhat is JWT and Why Should You use JWT

Hinh 1-7 JWT Authentication Nguyễn Đức Hiếu - B17DCCN231 7

Trang 19

JWT Authentication: JWT(JSON Web Token) là một chuẩn mở định nghĩa mộtcách nhỏ gon và khép kin dé truyền một cách an toàn thông tin giữa các bên dưới dangđối tượng JSON Thông tin này có thé được xác minh và đáng tin cậy vì nó có chữ ký

số JWTs có thể được ký bằng một thuật toán bí mật(với thuật toán HMAC) hoặc một

public/private key sử dụng mã hoá RSA Ở hệ thống này JWT được sử dụng để xác

thực người dùng mỗi lần client request đến server, phía server sẽ dựa vào token mà

phía client gửi kèm theo dé biết được đó là người dùng nào và chi cấp quyền phù hợpcho từng đối tượng cụ thé đó Token sẽ được phía server tạo ra mỗi khi người dùngđăng nhập Phía client sẽ lưu token đó lại để mỗi lần request sau đó sẽ gửi lên kèm

theo token Token này không cần phải giữ bí mật vì khi biết được token thì chỉ xem

được thông tin payload trong token đó mà không thé chỉnh sửa hay tạo 1 token gia déđánh lừa phía backend Đề được như vậy phía backend sẽ có một key bảo mật khôngđược public ra bên ngoài, có được key đó thì mới có thể tạo ra token Chính vì vay cơchế bảo mật này hiện nay vẫn đang được sử dụng phổ biến như là 1 trong những cơ

nest { = TYPEORMTM

Hinh 1-8 Công nghệ Migration

Migration: Migration là một cách thuận tiện dé thay đôi cấu trúc bang va dữ liệu

trong database một cách dễ dàng Sử dụng công nghệ này chúng ta không cần phải viết

SQL bằng tay hay chỉnh sửa database thủ công, nó có thê giúp ban thay đổi database

một cách độc lập, môi migration tương ứng với một version cua database Ban đâu Nguyễn Đức Hiếu - B17DCCN231 8

Trang 20

schema là rỗng, mỗi lần chạy migration thì sẽ thay đổi cau trúc của database Từ bat

kỳ thời điểm nào trong quá khứ cũng có thể update phiên bản mới nhất của database.Vậy tại sao chúng ta lại cần đến công nghệ này? Lại nói tới câu chuyện đồng nhất giữacác môi trường phát triển, nhưng ở đây là về đồng nhất về cấu trúc của database Thửtưởng tượng nếu như chúng ta không sử dụng migration, thì việc thay đổi cấu trúc

database trong quá trình phát triển tiềm ân rất nhiều rủi ro Vì khi thay đổi cấu trúc ta

phải thay đôi bằng tay từng môi trường phát triển cho giống với nhau, khi đó hệ thống

mới có thé chạy tron tru được Khi sử dung migration thì mỗi lần cần thêm 1 bang hay

một trường hoặc chỉ đơn giản là thay đổi kiểu dữ liệu, chúng ta chỉ cần khai báo 1 file

migration và chạy nó trong các môi trường Database sẽ tự động được cập nhật tới

phiên bản mới nhất rất dé dàng

@) Swagger.

Supported by SMARTBEAR

Hinh 1-9 Công cu Swagger

Swagger: Day là một công cụ mã nguồn mở dé xây dung OpenAPI specifications

giúp ta có thé thiết kế, xây dựng tài liệu và sử dung REST APIs Swagger cung cấp

cho chúng ta ba công cụ chính: Swagger-editor, Swagger-codegen, Swagger-ui Trong

các tools trên Swagger-ui được sử dụng nhiều nhất, nó giúp sinh ra giao diện cho tài

liệu từ file config dưới chuân OpenAPI Giao diện được hiện ra rõ ràng và tường minh

Dễ dàng đọc hiểu cho cả lập trình viên lẫn cả người dùng Sử dụng file config nhưng

hoàn toàn tách biệt tác vụ với nhau.

1.2.2 Phía client web:

Công nghệ sử dụng: Reactjs, Webpack, các công nghệ và thư viện hỗ trợ khác.

Trang 21

® Reactjs:

Reactjs là một thư viện Javascript phổ biến nhất dé xây dựng giao diện ngườidùng(UI) Nó cho tốc độ phản hồi tuyệt vời khi user nhập liệu bằng cách sử dụngphương pháp mới để render trang web Components của công cụ này được phát triểnbởi Facebook Nó được ra mắt như một công cụ Javascript mã nguồn mở vào năm

2013 Hiện tại nó đã đi trước các đối thủ chính như Angular và Bootstrap, hai thư việnbán chạy nhất thời bat giờ Reactjs dang được sử dụng bởi hàng trăm công ti trên thégiới phải ké đến như Netflix, Airbnb, American Express, Facebook, WhatsApp, eBay

Trang 22

Webpack là công cụ giúp chúng ta compile các module javascript Nó hay được gọi là “Module bundle”

Phiên bản sử dụng: Webpack “5.60.0

@ Cac công nghệ khác:

<>

Hình 1-12 Thư viên Ant Design

Ant design: Day là một thư viện hỗ trợ việc rất sâu UI, được phát triển từ trungquốc

Phiên bản sử dung Ant 4 17.0-alpha.9

1.2.3 Phía client app mobile:

Công nghệ sử dụng: React native, Code push và các thư viện hỗ trợ khác.

@ React native:

Hinh 1-13 Framework React Native

Trang 23

React native được phát triển bởi Facebook với mục địch ban đầu là áp dụng vàomạng xã hội lớn nhất hành tinh: Facebook Do đặc tính công nghệ của mạng xã hội,Facebook cần cải tạo ra nền tảng phát triển ứng dụng di động đa nền tảng có hiệu năng

không thua kém so với ứng dụng được phát triển độc lập cho từng nền tảng React

native hiện tại chỉ phát triển ứng dụng di động trên hệ điều hành Android và iOS

React native chính thức trở thành mã nguồn mở vào tháng 3 năm 2015 Cho đến nay,

React native được áp dụng trong nhiều ứng dụng của ta và cả nước ngoài React native

tạo ra ứng dung native chứ không phải hybird app như ionic Với 100% Native UI,

React native tạo nên sợ “mot ma” trong việc render UI và xoá nhoà khoảng cách vềhiệu năng giữa ứng dụng đa nền tảng so với ứng dụng độc lập nền tang

Phiên bản sử dung: React native ^0.65.I

@ Các công nghệ khác:

Code push: CodePush là một tính năng của App Center Build được cung cấp và

phát triển bởi Microsoft, cho phép các nhà phát trién Cordova và React Native triểnkhai các bản cập nhật ứng dụng dành cho thiết bị di động trực tiếp đến thiết bị của

người dùng.

1.2.4 Phần triển khai hệ thống:

Các công nghệ sử dụng: VM instance Google Cloud, Nginx, CI/CD

Trang 24

@ VM instance Google Cloud:

Hình 1-15 Nền tảng Google Platform với VM instance

Một hệ thống sẽ cần một server dé triển khai source code lên đó Có rất nhiều bên

thứ ba cung cấp dịch vụ cho thuê máy chủ phải kế đến như Amazon hay Google Ở

đây em chọn sử dụng của phía Google do đồ án có mức chỉ phí eo hẹp và khi thêm thẻ

Visa lần đầu Google cho ta $300 sử dụng trong vòng 3 tháng, khá là phù hợp với nhu

cầu làm đồ án hiện tại Còn phía AWS thì họ cho ta một gói dùng thử thời hạn một

năm, nhưng máy chủ dùng thử có cấu hình rất yếu không đủ với nhu cầu chạy cả

backend và frontend web trên đó.

® Nginx:

NGINX.

Hinh 1-16 Server Nginx Nguyễn Đức Hiếu - B17DCCN231 13

Trang 25

Nginx là open source để phục vụ web, reverse proxying, caching, load blancing,

media streaming Nó bat đầu như một máy chủ web được thiết kế để có hiệu suất và

sự 6n định tối đa Ngoài các khả năng của máy chủ HTTP, Nginx cũng có thé hoạtđộng như một máy chu proxy cho email (IMAP, POP3, SMTP) và một trình cân bằngtải và proxy ngược cho các máy chủ HTTP, TCP, UDP Nginx có thé được triển khai

dé phục vụ nội dung HTTP động trên mang bằng cách sử dung FastCGI, SCGI cho tậplệnh, máy chủ ứng dụng WSGI hoặc mô-đun Phusion Passenger và nó có thê đóng vai

trò là bộ cân băng tải phần mềm Nginx sử dụng cách tiếp cận theo hướng sự kiện

không đồng bộ, thay vì các luồng để xử lý các yêu cầu Kiến trúc hướng sự kiện

mô-đun của Nginx có thé cung cấp hiệu suất dé dự đoán hơn dưới tải trong cao.

® CI/CD:

CI là Continuous Integration Nó là phương pháp phát triển phần mềm yêu cầu cácthành viên của team tích hợp công việc của họ thường xuyên, mỗi ngày ít nhất một lần

Mỗi tích hợp được "build" tự động (bao gồm cả test) nhằm phát hiện lỗi nhanh nhất có

thé Cả team nhận thấy rang cách tiếp cận này giảm thiểu van dé tích hợp và cho phépphát triển phần mềm nhanh hơn

Trong khi Continuous Integration là quy trình để build và test tự động, thì

Continuous Delivery (tạm dịch là chuyên giao liên tục) lại nâng cao hơn một chút,

bằng cách triển khai tất cả thay đổi về code (đã được build và test) đến môi trường

Trang 26

testing hoặc staging Continuous Delivery cho phép developer tự động hóa phantesting bên cạnh việc sử dung unit test, kiểm tra phần mềm qua nhiều thước đo trướckhi triển khai cho khách hàng (production) Những bai test này bao gồm UI testing,

load testing, integration testing, API testing Nó tự động hoàn toàn quy trình release

phần mềm

Continuous Delivery được thực hiện bằng cách sử dụng Deployment Pipeline

Deployment Pipeline chia quy trình chuyển giao phần mềm thành các giai đoạn

Mỗi giai đoạn có mục tiêu xác minh chất lượng của các tính năng mới từ một góc độ

khác nhau dé kiểm định chức năng và tránh lỗi ảnh hưởng đến người dùng Pipeline sẽcung cấp phản hồi cho nhóm trong việc cung cấp tính năng mới Ở góc độ trừu tượnghơn, deployment pipeline là quy trình để chuyển phần mềm từ version control đến tay

người dùng Mỗi thay đổi đến phần mềm sẽ đi qua một quy trình phức tạp để được

phát hành.

Có một khái niệm nữa là Continuos Deployment, và hai khái niệm này thường hay

bị nhằm lẫn với nhau Nếu Continuous Delivery là triển khai code lên môi trường

staging, và deploy thủ công lên môi trường production, thì Continuous Deployment lại

là kỹ thuật để triển khai code lên môi trường production một cách tự động, và cũng

nên là mục tiêu của hâu hêt công ty.

Trang 27

Đồ án tốt nghiệp Đại học Chương 2 Phân tích và thiết kế hệ thống

CHƯƠNG 2: PHAN TÍCH VÀ THIET KE HỆ THONG.

2.1 Yéu cau:

2.1.1 Các yêu cầu:

Xây dựng một hệ thống quản lý chuỗi cửa hàng cho phép quản lý tình trạng mặt

hang đang có trong từng kho tại mỗi chi nhánh, quản lý thông tin nhân viên, thông tin

mặt hàng cũng như thông tin của khách hàng và các thông tin khác liên quan đến hệthống cửa hàng Lưu lại thông tin những lần nhập hàng và bán hàng, thống kê số liệudoanh thu hằng thang Dữ liệu được lưu trữ trên máy chủ và người dùng có thé truycập bat kỳ lúc nao trên Internet

@ Xây dung server dé lưu trữ dữ liệu hệ thống

@ Xây dựng trang web giúp người dùng quản lý thông tin hệ thống

@ Xây dung ứng dung di động giúp người dùng thao tác sử dụng

@ Nên tảng website và app mobile(android & ios)

2.1.2 Kịch bản hệ thống:

2.1.2.1 Kịch bản admin hệ thống thêm nhân viên:

Admin vào chức năng quan lý nhân viên trên website

Admin vào chức năng thêm nhân viên và nhập đầy đủ thông tin cần thiết

Admin xem lại thông tin và lưu lại

Hệ thống lưu lại thông tin của nhân viên

Admin cung cấp thông tin tài khoản cho nhân viên dé nhân viên truy cập hệ thống

2.1.2.2 Kịch bản nhân viên kế toán nhập hàng:

® Nếu mặt hàng chưa được nhập trong quá khứ thì nhân viên kế toán phải truy cập

hệ thống quản lý trên website đề thêm thông tin mặt hàng

@ Nhân viên kế toán vào chứ năng thêm mặt hàng trên website ,nhập day đủ thông

tin mặt hàng và lưu lại

® Nhân viên kế toán truy cập chức năng nhập hàng trên ứng dụng di động

@ Nhân viên kế toán chọn các mặt hàng nhập vào, nhập những thông tin cần thiết,

kiểm tra lại thông tin và nhập hàng

@ Thông tin mặt hàng được nhập vao sẽ được lưu lại trong hệ thống

Trang 28

2.1.2.3 Kịch bản nhân viên bán hàng bán hàng:

@ Nhân viên bán hàng truy cập chức năng bán hàng trên ứng dụng di động

@ Nhân viên bán hàng chọn những mặt hàng khách mua, chon sỐ lượng

TM Néu khách hang lần đầu mua hàng tại cửa hang thì nhân viên bán hàng có thé

thêm khách hàng mới ngay tại ứng dụng di động hoặc truy cập phần quản lý

khách hàng trên website

@ Nhân viên ban hàng chọn được khách hàng và nhắn nút bán hàng

@ Thông tin các mặt hang đã bán sẽ được lưu lại trong hệ thống và được thong ké lai

trong phan thống kê danh thu trên website và chỉ được admin hệ thống truy cập

được

2.1.2.4 Kịch bản nhân viên giao tiếp với nhau sử dụng chức năng chat của

ứng dụng di động:

@ Nhân viên truy cập chức năng chat trên ứng dụng di động

@ Nhân viên có thé chọn cuộc trò chuyện trên màn hình danh sách hiện ra

TM Nếu muốn mở cuộc trò chuyện mới thì nhân viên có thể tìm kiếm nhân viên

khác trong thanh tìm kiếm và mở cuộc trò chuyện mới

@ Nhân viên viết tin nhắn và nhấn gửi

2.1.2.5 Kịch bản nhân viên thay đổi thông tin cá nhân:

® Nhân viên truy cập vào thông tin cá nhân trên ứng dụng điện thoại di động và nhắn

vào chức năng chỉnh sửa

@ Nhân viên thay đôi thông tin cá nhân theo mong muốn

@ Nhân viên kiểm tra lại thông tin và lưu lại

@ Hệ thống lưu lại thông tin thay đối của nhân viên

2.1.2.6 Kịch bản nhân viên xem thông tin mặt hàng:

@ Nhân viên truy cập vào danh sách mặt hàng trên ứng dung di động hoặc website

® Nhân viên tìm kiếm mặt hàng theo tên

® Nhân viên nhấn vào mặt hàng muốn xem

_ Trên ứng dụng di động có chức năng quét mã QR, nhân viên vào chức năng

quét mã QR trên ứng dụng di động Nguyễn Đức Hiếu - B17DCCN231 17

Trang 29

M@ Nhân viên quét mã QR được dán trên mặt hang

@ Thông tin mặt hang đó sẽ hiện ra cho nhân viên

2.2 Phân tích hệ thống:

2.2.1 Yêu cầu nghiệp vụ:

2.2.1.1 Yêu cầu chức năng:

® Hệ thống có các chức năng sau:

M Dang nhập hệ thống

Xem thống kê doanh thu

Quản lý thông tin khách hàng Quản lý thông tin mặt hàng Quản lý thông tin chi nhánh Nhập hàng

Bán hàng Xem thông tin mặt hàng Chat giao tiép gitta các nhân viên Chỉnh sửa thông tin cá nhân

@ Server luu trữ các thông tin sau:

_ Thông tin các nhân va tài khoản của nhân viên

Thông tin khách hàng Thông tin chi nhánh Thông tin và tình trạng mặt hàng Thông tin các cuộc trò chuyện của nhân viên

2.2.1.2 Yêu cầu phi chức năng:

Yêu câu Mô tả

Hiệu năng Hệ thống sẵn sàng phục vụ người dùng bat cứ lúc nào Tương

tác giữa người dùng và hệ thống phụ thuộc vào tốc độ của kếtnối mạng CSDL của hệ thống được cập nhật theo thời gian

Trang 30

2.2.1.3 Xác định tác nhân:

Kế toán: Đăng nhập hệ thống, quản lý các mặt hàng, quản lý khách hàng, quản lý

lương của nhân viên, nhập hàng mới

Nhân viên bán hàng: Đăng nhập hệ thống, quản lý khách hàng, xem danh sách mặt

STT | Thuật ngữ Tiếng Việt Giải thích

1 User Người dùng Người sử dụng hệ thống

2 Admin Quản trị viên Người sử dụng có quyền cao nhất

3 Accountant Ké toan Nhân viên kế toán cửa hang

4 Sale employee Nhân viên bản | Nhân viên bán hàng cửa cửa hàng

hàng

5 Item Mat hang Những mat hang mà cửa hang buôn

bán

6 Branch Chi nhánh Chi nhánh cửa hàng

7 Customer Khách hàng Khách hàng của cửa hàng

8 CSDL Cơ sở dữ liệu Co sở dt liệu hệ thống

9 Use Case Ca su dung Các trường hop sử dung hệ thống

10 Scenario Kịch bản Kịch ban sử dụng hệ thong

Đảng 2-1 Bảng thuật ngữ

2.2.2 Ca sử dụng:

STT | Tên ca sử dụng | Mô tả Người được sử dụng

1 Dang nhap Người dùng đăng nhập vào hệ | Tất cả người dùng

thống để có thể sử dụng các chức

năng của mình

2 Xem thông tin | Người dùng tra cứu thông tin cá | Tất cả người dùng

Trang 31

cá nhân nhân của mình

3 Sửa thông tin cá | Người dùng chỉnh sửa thông tin cá | Tất cả người dùng

nhân nhân nếu có sai sót

4 Tra cứu thông | Người dùng xem thông tin chỉ tiết | Tất cả người dùng

tin mặt hàng của từng mặt hàng

5 Gửi tin nhắn Người dùng có thể trò chuyện với | Tất cả người dùng

người dùng khác qua kênh tin

nhắn

6 Nhập hàng Chi admin hệ thống và nhân viên |Admin hệ thống và

kế toán có thể nhập mặt hàng mới | nhân viên kế toán

trên ứng dụng di động

7 Bán hàng Chi admin hệ thống và nhân viên |Admin hệ thống và

bán hàng có thể bán hàng cho | nhân viên bán hàng

khách hàng trên ứng dung di động

8 Xem thông tin | Admin hệ thống xem được thông | Admin hệ thong

nhân viên tin của nhân viên

9 Thêm nhân viên | Admin hệ thống có thé thêm nhân | Admin hệ thống

viên mới vào hệ thống

10 | Sửa nhân viên | Admin hệ thống có thé chỉnh sửa | Admin hệ thống

lại thông tin của nhân viên

11 Xem thông tin | Admin hệ thống có thé xem thông | Admin hệ thong

chi nhánh tin của chi nhánh

12 Thêm chi nhánh | Admin hệ thong có thé thêm một | Admin hệ thống

chi nhánh mới

13 |Sửachinhánh | Admin hệ thống có thé sửa thông | Admin hệ thống

tin của chi nhánh

14 Xem danh thông | Người dùng có thể xem được | Tất cả người dùng

tin mặt hàng thông tin của mặt hàng trên web

quản lý

I5 | Thêm mặthàng | Chỉ admin hệ thống và nhân viên | Admin hệ thống và

Trang 32

kế toán có thé thêm mặt hang mới

vào hệ thống

nhân viên kê toán

16 Sua mat hang Chỉ admin hệ thống và nhân viên | Admin hệ thống và

kế toán có thể chỉnh sửa thông tin | nhân viên kế toán

mặt hàng

17 Xem lương nhân | Chỉ admin hệ thống và nhân viên | Admin hệ thống và

viên kế toán có thể xem chỉ tiết lương | nhân viên kế toán

của nhân viên

18 Xuất phiếu | Chi admin hệ thống và nhân viên | Admin hệ thống và

lương cho nhân | kế toán có thé xuất phiếu lương | nhân viên kế toán

viên cho nhân viên

19 Xem thông tin | Người dùng có thể xem thông tin | Tất cả người dùng

23 Xem thống kê Admin hệ thống có thể xem thống | Admin hệ thống

kê doanh thu theo từng tháng hoặc

Trang 33

Sơ đô Uese Case Tông quát

uc [Use Case Web]

Accountant

uc [Use Case App] J

Sale employee Accountant

Hình 2-2 Use Case tổng quan app

Trang 34

2.2.3 Kịch bản:

2.2.3.1 Kịch bản đăng nhập:

Tiên Use Case Dang nhap

Tac nhan chinh Tat cả người dùng hệ thống

Tiền điều kiện Người dùng truy cập vào hệ thống

Đảm bảo tối thiểu Hệ thống ở lại màn hình đăng nhập để

người dùng đăng nhập lại

Đảm bảo thành công Hệ thống thông báo đăng nhập thành công

và cho phép người dùng truy cập hệ thốngKích hoạt Người dùng truy cập vào hệ thống

Chuỗi sự kiện chính

1 Giao diện đăng nhập hệ thống hiển thị lên bao gồm: một ô nhập tên đăng nhập, một

ô nhập mật khâu và nút đăng nhập

2 Người dùng điền đầy đủ thông tin đăng nhập và nhắn vào nút đăng nhập

3 Hệ thống xác thực thông tin đăng nhập và chuyền về màn hình chính của ứng dụng

Ngoại lệ

2.1 Người dùng để trống tên đăng nhập

2.1.1 Hệ thống thông báo người dùng không được dé trống ô tên đăng nhập

2.2 Người dùng để trống ô mật khâu

2.2.1 Hệ thống thông báo người dùng không được dé trống 6 mật khẩu

2.3 Người dùng nhập mật khâu có độ dài nhỏ hơn 6 ký tự

2.3.1 Hệ hồng thông báo người dùng không được nhập mật khâu có độ dài nhỏ hơn 6

ký tự

2.4 Người dùng nhập sai thông tin đăng nhập

2.4.1 Hệ thống thông báo người dùng nhập tên tài khoản hoặc mật khâu không đúng

Bảng 2-3 Kịch bản đăng nhập

Trang 35

Đồ án tốt nghiệp Đại học Chương 2 Phân tích và thiết kế hệ thống Giao diện:

®9® 3 mms x +

M c Q & hnms-te.hiunguyn.efflogin „¡0Q #2 Li ae

G Google D3 Google service 73 Social 23 Study F3 Design F3 Movie O3 League of Legends Til Git Dil Coding Manager Dl PTIT Graduation D3 Amela 23 Other.

Hình 2-1 Giao diện đăng nhập web

Password

Hình 2-2 Giao diện đăng nhập ting dung di động

Nguyễn Đức Hiếu - B17DCCN231

Trang 36

2.2.3.2 Kịch bản tra cứu thông tin mặt hàng:

Tiên Use Case Tra cứu thông tin mặt hàng

Tác nhân chính Tất cả người dùng hệ thống

Tiền điều kiện Người dùng đã đăng nhập vào hệ thống

Đảm bảo tối thiểu Hệ thống hiển thị danh sách mặt hàng cho

người dụng chọn

Đảm bảo thành công Hệ thống hiển thị chi tiết mặt hàng cho

người dùng Kích hoạt Người dùng vừa đăng nhập vào ứng dụng

di động

Chuỗi sự kiện chính

1 Giao diện danh sách sản phẩm hiên lên với một ô nhập từ khoá tìm kiếm, danh sách

sản phẩm theo từ khoá, nút chọn quét mã QR

2.1 Người dùng nhập từ khoá tìm kiếm tên sản pham

2.1.1 Hệ thống hiện giao diện hiện danh sách các sản phẩm theo từ khoá

2.1.2 Người dùng nhắn vào sản phẩm mình muốn xem

2.1.3 Hệ thống hiện giao diện thông tin chi tiết của sản phẩm

2.2 Người dùng nhắn vào nút quét mã QR

2.2.1 Hệ thống chuyền sang giao diện quét mã QR

2.2.2 Người dùng đưa điện thoại lên quét mã QR được dán trên sản pham

2.2.3 Hệ thống hiện giao diện thông tin chỉ tiết của sản phẩm

Ngoại lệ

2.1.1.1 Hệ thống không tìm thấy sản phâm nào phù hợp với từ khoá

2.2.2.1 Hệ thống thông báo không tìm thấy sản pham đối với mã QR đã quét

Bảng 2-4 Kịch bản tra cúu thông tin mặt hàng

Trang 37

Laptop Macbook Pro 14" 2021

-iw M1 Pro 16 Core GPU/1TB

ie) Apple iPhone 12 - 64GB

iPhone 13 Pro Max

35.000.000 đ

qwertyuiioop asdfghj ki li

Trang 38

Trang 39

< Maytinh bang Apple iPa

May tinh bang Apple iPad Mini 6 - 8.3"

Tiêu đề	Thiết kế trang web và ứng dụng di động để quản lý chuỗi cửa hàng bán điện thoại
Tác giả	Nguyễn Đức Hiếu
Người hướng dẫn	TS. Đào Ngọc Phong
Trường học	Học viện Cộng nghệ Bưu chính Viễn thông
Chuyên ngành	Công nghệ thông tin
Thể loại	Đồ án tốt nghiệp Đại học
Năm xuất bản	2021
Thành phố	Hà Nội

Định dạng
Số trang	78
Dung lượng	15,49 MB