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

NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪNHà Nội, ngày tháng năm 20…Giảng viên hướng dẫnhghieh euu hhah giohg ih vitro uhi dieu tim hoc bihh dehdrobium choxmum lihld bahg ky thuat huoi eay lat mo

Trang 1

HỌC VIỆN CÔNG NGHỆ BƯU CHÍNH VIỄN THÔNGKHOA CÔNG NGHỆ THÔNG TIN 1

78Thursday, June 13, 20249:25:43 PM9:25:43 PM78Thursday, June 13, 20249:25:43 PM9:25:43 PM78Thursday, June 13, 20249:25:43 PM9:25:43 PM

hghieh euu hhah giohg ih vitro uhi dieu tim hoc bihh dehdrobium choxmum lihld bahg ky thuat huoi eay lat mohghghieh euu hhah giohg ih vitro uhi dieu tim hoc bihh dehdrobium choxmum lihld bahg ky thuat huoi eay lat mohghghieh euu hhah giohg ih vitro uhi dieu tim hoc bihh dehdrobium choxmum lihld bahg ky thuat huoi eay lat mohghghieh euu hhah giohg ih vitro uhi dieu tim hoc bihh dehdrobium choxmum lihld bahg ky thuat huoi eay lat mohghghieh euu hhah giohg ih vitro uhi dieu tim hoc bihh dehdrobium choxmum lihld bahg ky thuat huoi eay lat mohghghieh euu hhah giohg ih vitro uhi dieu tim hoc bihh dehdrobium choxmum lihld bahg ky thuat huoi eay lat mohghghieh euu hhah giohg ih vitro uhi dieu tim hoc bihh dehdrobium choxmum lihld bahg ky thuat huoi eay lat mohghghieh euu hhah giohg ih vitro uhi dieu tim hoc bihh dehdrobium choxmum lihld bahg ky thuat huoi eay lat mohghghieh euu hhah giohg ih vitro uhi dieu tim hoc bihh dehdrobium choxmum lihld bahg ky thuat huoi eay lat mohghghieh euu hhah giohg ih vitro uhi dieu tim hoc bihh dehdrobium choxmum lihld bahg ky thuat huoi eay lat mohghghieh euu hhah giohg ih vitro uhi dieu tim hoc bihh dehdrobium choxmum lihld bahg ky thuat huoi eay lat mohghghieh euu hhah giohg ih vitro uhi dieu tim hoc bihh dehdrobium choxmum lihld bahg ky thuat huoi eay lat mohghghieh euu hhah giohg ih vitro uhi dieu tim hoc bihh dehdrobium choxmum lihld bahg ky thuat huoi eay lat mohghghieh euu hhah giohg ih vitro uhi dieu tim hoc bihh dehdrobium choxmum lihld bahg ky thuat huoi eay lat mohghghieh euu hhah giohg ih vitro uhi dieu tim hoc bihh dehdrobium choxmum lihld bahg ky thuat huoi eay lat mohghghieh euu hhah giohg ih vitro uhi dieu tim hoc bihh dehdrobium choxmum lihld bahg ky thuat huoi eay lat mohg

hghieh euu hhah giohg ih vitro uhi dieu tim hoc bihh dehdrobium choxmum lihld bahg ky thuat huoi eay lat mohghghieh euu hhah giohg ih vitro uhi dieu tim hoc bihh dehdrobium choxmum lihld bahg ky thuat huoi eay lat mohghghieh euu hhah giohg ih vitro uhi dieu tim hoc bihh dehdrobium choxmum lihld bahg ky thuat huoi eay lat mohghghieh euu hhah giohg ih vitro uhi dieu tim hoc bihh dehdrobium choxmum lihld bahg ky thuat huoi eay lat mohghghieh euu hhah giohg ih vitro uhi dieu tim hoc bihh dehdrobium choxmum lihld bahg ky thuat huoi eay lat mohghghieh euu hhah giohg ih vitro uhi dieu tim hoc bihh dehdrobium choxmum lihld bahg ky thuat huoi eay lat mohghghieh euu hhah giohg ih vitro uhi dieu tim hoc bihh dehdrobium choxmum lihld bahg ky thuat huoi eay lat mohghghieh euu hhah giohg ih vitro uhi dieu tim hoc bihh dehdrobium choxmum lihld bahg ky thuat huoi eay lat mohg

78hghieh euu hhah giohg ih vitro uhi dieu tim hoc bihh dehdrobium choxmum lihld bahg ky thuat huoi eay lat mohgThursday, June 13, 2024

Trang 2

HỌC VIỆN CÔNG NGHỆ BƯU CHÍNH VIỄN THÔNGKHOA CÔNG NGHỆ THÔNG TIN 1

Trang 3

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

hghieh euu hhah giohg ih vitro uhi dieu tim hoc bihh dehdrobium choxmum lihld bahg ky thuat huoi eay lat mohghghieh euu hhah giohg ih vitro uhi dieu tim hoc bihh dehdrobium choxmum lihld bahg ky thuat huoi eay lat mohghghieh euu hhah giohg ih vitro uhi dieu tim hoc bihh dehdrobium choxmum lihld bahg ky thuat huoi eay lat mohghghieh euu hhah giohg ih vitro uhi dieu tim hoc bihh dehdrobium choxmum lihld bahg ky thuat huoi eay lat mohg782413069:25:43 PM9:25:43 PM782413069:25:43 PM9:25:43 PM782413069:25:43 PM9:25:43 PM

hghieh euu hhah giohg ih vitro uhi dieu tim hoc bihh dehdrobium choxmum lihld bahg ky thuat huoi eay lat mohghghieh euu hhah giohg ih vitro uhi dieu tim hoc bihh dehdrobium choxmum lihld bahg ky thuat huoi eay lat mohghghieh euu hhah giohg ih vitro uhi dieu tim hoc bihh dehdrobium choxmum lihld bahg ky thuat huoi eay lat mohghghieh euu hhah giohg ih vitro uhi dieu tim hoc bihh dehdrobium choxmum lihld bahg ky thuat huoi eay lat mohg78Thursday, June 13, 20249:25:43 PM9:25:43 PM78Thursday, June 13, 20249:25:43 PM9:25:43 PM78Thursday, June 13, 20249:25:43 PM9:25:43 PM

Trang 4

NHẬN XÉT CỦA GIẢNG VIÊN PHẢN BIỆN

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

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

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ảocủ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ầutrong 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 tuỵ dạy dỗ em trong quá trình học tập, rèn luyện suốt thời gian qua, giúpem có được những kiến thức, kỹ năng để hoàn thiện đồ án, cũng như phục vụ cho họctậ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 ơnbố 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ùngtô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ố gắng để 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 để đồ án tốt nghiệp của em được hoàn thiện hơn.

Em xin chân thành cảm ơn!

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

Nguyễn Đức Hiếu

123docz.net - File bi loi xin lienhe: lethikim34079@hotmail.com

Trang 6

1.2.1 Phía server backend: 2

1.2.2 Phía client web: 9

1.2.3 Phía client app mobile: 11

Trang 7

3.2.2 Thuê tên miền: 58

3.2.3 Đăng ký chứng chỉnh SSL cho tên miền: 59

TÀI LIỆU THAM KHẢO 67

Trang 8

Bảng 2-9 Kịch bản thêm nhân viên 42

Bảng 2-10 Kịch bản sửa thông tin nhân viên 44

Trang 9

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

Hình 1-13 Framework React Native 11

Hình 1-14 Công nghệ Code Push 12

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

Hình 1-16 Server Nginx 13

Hình 1-17 Công nghệ CI/CD 14

Hình 2-1 Use Case tổng quan web 22

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

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

Hình 2-2 Giao diện đăng nhập ứng dụng di động 24

Trang 10

Hình 2-6 Màn hình quét mã QR 27

Hình 2-7 Màn hình quét mã QR lỗi 28

Hình 2-8 Màn hình thông tin chi tiết sản phẩm 28

Hình 2-9 Màn hình danh sách cuộc trò chuyện 30

Hình 2-10 Màn hình tim kiếm cuộc trò chuyện 30

Hình 2-11 Màn hình cuộc trò chuyện 31

Hình 2-12 Màn hình thông tin cá nhân người dùng 32

Hình 2-13 Màn hình chỉnh sửa thông tin người dùng 33

Hình 2-27 Màn hình danh sách nhân viên 43

Hình 2-28 Màn hình thêm mới nhân viên 43

Hình 2-29 Màn hình chỉnh sửa nhân viên 45

Trang 11

Hình 2-32 Màn hình chỉnh sửa sản phẩm 48

Bảng 2-13 Kịch bản xem thống kê doanh thu 49

Hình 2-33 Màn hình thống kê doanh thu theo từng tháng trong năm 50

Hình 2-34 Màn 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 51

Hình 2-36 Biểu đồ lớp thiết kế 52

Hình 2-37 Lược đồ CSDL 52

Hình 3-1 Giao diện quản lý tên miền 54

Hình 3-2 Giao diện quản lý máy chủ của Google Cloud 55

Hình 3-3 Giao diện quản lý của Cloudflare 56

Hình 3-4 Giao diện GitHub quản lý source code 56

Hình 3-5 Giao diện tạo máy chủ của Google Cloud 57

Hình 3-7 Giao diện kết nối SSH đến máy chủ 58

Hình 3-8 Giao diện thuê tên miền của Freenom 59

Hình 3-9 Giao diện đăng ký chứng chỉ SSL cho tên miền 59

Hình 3-10 Giao diện thêm biến môi trường trên GitHub 60

Hình 3-11 Cấu hình CI/CD 61

Hình 3-12 Giao diện tạo record của Cloudflare 61

Hình 3-13 Tạo ra các file cấu hình nginx 62

Hình 3-14 Nội dung file hnme-be 62

Hình 3-15 Nội dùng file hnms-fe 63

Hình 3-16 Nội dung file hnms-minio 63

Hình 3-17 Nội dung file hnms-minio-console 64

Trang 12

LỜI MỞ ĐẦU

Hiệ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 đô thị sầm uất mà 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ầnphả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ệuquả Cũng trong thời đại này, công nghệ cũng đang phát triển cực nhanh nếu khôngmuố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ệ để 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ảithiệ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ỏ rarấ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ảiquản lý các chuỗi cửa hàng tại nhiều nơi.

Chính vì tính hữu dụng của việc ứng dụng công nghệ thông tin vào quản lý doanhnghiệp nên em đã chọn đề tài đồ án là: “THIẾT KẾ TRANG WEB VÀ ỨNG DỤNGDI ĐỘNG ĐỂ QUẢN LÝ CHUỖI CỬA HÀNG BÁN ĐIỆN THOẠI” Đồ án này baogồm các phần mở đầu, nội dung và kết luận Phần 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ử dụng.Chương 2: Phân tích và thiết kế hệ thống.

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

Trang 13

CHƯƠNG 1: TỔNG QUAN HỆ THỐNG VÀ GIỚI THIỆU VỀ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ặthằng trong từ kho của mỗi chi nhánh Giúp cho nhân viên kế toán dễ dàng quản 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áncò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ánhà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áchhà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ớitừ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ệnthoạ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

Hình 1-1 Sơ đồ tổng quan công nghệ

Trang 15

 Nodejs, Nestjs:

Hình 1-2 Framework NestJs

Dựa vào quy mô của dự án để lựa chọn các công nghệ phù hợp là một điều rấtquan 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ềntảng đượ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 để phát 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ợpvớ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 trangdocument cực kỳ chi tiết và dễ đọc Vì vậy Nestjs đã và đang được rất đông đảo cáclậ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 đầună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:

Hình 1-3 Dịch vụ MySQL

Một hệ thống backend thì không thể nào thiếu Database Vậy nên em đã sử dụngMySql để 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à hầu như lập trình viên nào cũng biết đến Quan trọngnhấ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ôngcầ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 để quản lý database.

Phiên bản sử dụng: MySQL:8.0 Minio:

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íaserver Có rất nhiều ông lớn cung cấp dịch vụ này phải kể đến như Google hayAmazon 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ủadự á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ênmứ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 emsử dụng dịch vụ Minio để thay thế S3 của AWS Minio là một dịch vụ phía server lưutrữ đối tượng dạng phân tán với hiệu năng cao Nói dể hiểu hơn thì Minio là một fileserver giúp chúng ta có thể dễ dàng upload hay download file như Amazon hayGoogle Đ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à để triểnkhai Minio phía server thì hơi phức tạp một chút để có thể sử dụng trơn chu Đó là đốivới đồ án này, còn trong thực tế thì Minio được triển khai phía môi trường local Khitriể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:

Hình 1-5 Nền tảng 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ệ thống lên một môi trường hoàn toàn mới thì việc tạomô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 vấn đề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ễ dàng bằng cách sử dụng các containers(trên nền ảo hoá) Ban đầu viếtbằng Python, hiện tại đã chuyển sang Golang Nền tảng 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ácdịch vụ được tự động kéo về và chạy một cách nhanh chóng như Nodejs, MySQL hayMinio 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:

Hình 1-6 Thư viện socket.io

Socket: Socket là một điểm cuối(end-point) của liên kết giao tiếp hai chiều giữahai chương trình chạy trên mạng Nghĩa là một socket được sử dụng để 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 để 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à dữ liệu sẽ được gửi tới Áp 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.

Trang 19

JWT Authentication: JWT(JSON Web Token) là một chuẩn mở định nghĩa mộtcách nhỏ gọn và khép kín để truyền một cách an toàn thông tin giữa các bên dưới dạngđố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ộtpublic/private key sử dụng mã hoá RSA Ở hệ thống này JWT được sử dụng để xácthự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 để biết được đó là người dùng nào và chỉ 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èmtheo 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 giả đểđá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ì vậy 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ơchế bảo mật nhất trong thời điểm hiện tại.

Hình 1-8 Công nghệ Migration

Migration: Migration là một cách thuận tiện để thay đổi cấu trúc bảng và dữ liệutrong 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ếtSQL bằng tay hay chỉnh sửa database thủ công, nó có thể giúp bạn thay đổi databasemột cách độc lập, mỗi migration tương ứng với một version của database Ban đầu

Trang 20

schema là rỗng, mỗi lần chạy migration thì sẽ thay đổi cấu trúc của database Từ bấtkỳ 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úcdatabase 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 taphả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ốngmới có thể chạy trơn tru được Khi sử dụng migration thì mỗi lần cần thêm 1 bảng haymộ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 filemigration và chạy nó trong các môi trường Database sẽ tự động được cập nhật tớiphiên bản mới nhất rất dễ dàng.

Hình 1-9 Công cụ Swagger

Swagger: Đây là một công cụ mã nguồn mở để xây dựng OpenAPI specificationsgiúp ta có thể thiết kế, xây dựng tài liệu và sử dụng REST APIs Swagger cung cấpcho chúng ta ba công cụ chính: Swagger-editor, Swagger-codegen, Swagger-ui Trongcác tools trên Swagger-ui được sử dụng nhiều nhất, nó giúp sinh ra giao diện cho tàiliệ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ưnghoà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:

Hình 1-10 Framework React

Reactjs là một thư viện Javascript phổ biến nhất để 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ăm2013 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 bất giờ Reactjs đang đượ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, eBayvà Instagram.

Phiên bản sử dụng: React ^17.0.2 Webpack:

Trang 22

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

Phiên bản sử dụng: Webpack ^5.60.0 Các công nghệ khác:

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

Ant design: Đây 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ử dụng 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:

Hình 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ăngkhô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 Reactnative 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 nativetạo ra ứng dụng native chứ không phải hybird app như ionic Với 100% Native UI,React native tạo nên sợ “mợt mà” 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 tảng.

Phiên bản sử dụng: React native ^0.65.1 Các công nghệ khác:

Hình 1-14 Công nghệ Code Push

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ủangườ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 để triển khai source code lên đó Có rất nhiều bênthứ 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 chi 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 nhucầ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ộtnă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 đó.

Trang 25

Nginx là open source để phục vụ web, reverse proxying, caching, load blancing,media streaming Nó bắt đầu như một máy chủ web được thiết kế để có hiệu suất vàsự ổn đị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 chủ 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để phục vụ nội dung HTTP động trên mạng bằng cách sử dụng FastCGI, SCGI cho tậplệnh, máy chủ ứng dụng WSGI hoặc mô-đun Phusion Passenger và nó có thể đóng vaitrò 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ệnkhô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ệnmô-đun của Nginx có thể cung cấp hiệu suất dễ dự đoán hơn dưới tải trọng cao.

 CI/CD:

Hình 1-17 Công nghệ 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 rằng cách tiếp cận này giảm thiểu vấn đề 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 phầntesting bên cạnh việc sử dụng 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 bài test này bao gồm UI testing,load testing, integration testing, API testing Nó tự động hoàn toàn quy trình releasephầ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 để 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 tayngười dùng Mỗi thay đổi đến phần mềm sẽ đi qua một quy trình phức tạp để đượcphá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 haybị nhầm lẫn với nhau Nếu Continuous Delivery là triển khai code lên môi trườngstaging, và deploy thủ công lên môi trường production, thì Continuous Deployment lạilà kỹ thuật để triển khai code lên môi trường production một cách tự động, và cũngnên là mục tiêu của hầu hết công ty.

Trang 27

CHƯƠNG 2: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG.

2.1 Yêu cầu: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ặthàng đ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 tinmặ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 tháng Dữ liệu được lưu trữ trên máy chủ và người dùng có thể truycập bất kỳ lúc nào trên Internet.

 Xây dựng server để 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 dựng ứng dụng 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 quản 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 để 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ậphệ 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 đầy đủ thôngtin 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 vào sẽ được lưu lại trong hệ thống

Trang 28

 Nhân viên bán 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 hàng đã bán sẽ được lưu lại trong hệ thống và được thống kê lạitrong phần 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

 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ênkhá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ấnvà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 dụng 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ăngquét mã QR trên ứng dụng di động

Trang 29

 Nhân viên quét mã QR được dán trên mặt hàng Thông tin mặt hàng đó 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: Đăng 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 giữa các nhân viên Chỉnh sửa thông tin cá nhân Server lưu trữ các thông tin sau:

 Thông tin các nhân và 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 bất cứ lúc nào Tươngtá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 gianthực

Bảo mật Chỉ cấp quyền truy cập hệ thống cho người dùng nhất định.Xửlý được SQL Injection

Bảng 2-1 Yêu cầu phi chức năng

Trang 30

2.2.1.4 Xây dựng bảng thuật ngữ:

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ất3 Accountant Kế toán Nhân viên kế toán cửa hàng4 Sale employee Nhân viên bán

Nhân viên bán hàng cửa cửa hàng

5 Item Mặt hàng Những mặt hàng mà cửa hàng buônbán

6 Branch Chi nhánh Chi nhánh cửa hàng7 Customer Khách hàng Khách hàng của cửa hàng8 CSDL Cơ sở dữ liệu Cơ sở dữ liệu hệ thống

9 Use Case Ca sử dụng Các trường hợp sử dụng hệ thống10 Scenario Kịch bản Kịch bản sử dụng hệ thống

Tất cả người dùng

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ình3 Sửa thông tin cá

6 Nhập hàng Chỉ admin hệ thống và nhân viênkế toán có thể nhập mặt hàng mớitrên ứng dụng di động

Admin hệ thống vànhân viên kế toán

7 Bán hàng Chỉ admin hệ thống và nhân viênbán hàng có thể bán hàng chokhách hàng trên ứng dụng di động

Admin hệ thống vànhân viên bán hàng

8 Xem thông tinnhân viên

Admin hệ thống xem được thôngtin của nhân viên

15 Thêm mặt hà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 hàng mớivào hệ thống

nhân viên kế toán

16 Sửa mặt hàng Chỉ admin hệ thống và nhân viênkế toán có thể chỉnh sửa thông tinmặt hàng

17 Xem lương nhânviên

Chỉ admin hệ thống và nhân viênkế toán có thể xem chi tiết lươngcủa nhân viên

18 Xuất phiếulương cho nhânviên

Chỉ admin hệ thống và nhân viênkế toán có thể xuất phiếu lươngcho nhân viên

19 Xem thông tinkhách hàng

Người dùng có thể xem thông tincủa khách hàng trong hệ thống

20 Thêm kháchhàng

Người dùng có thể thêm kháchhàng mới vào hệ thống

Trang 33

Sơ đồ Uese Case Tổng quát

Hình 2-1 Use Case tổng quan web

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:

Tên Use Case Đăng nhập

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 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ôngvà 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ụngNgoạ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 để trống ô tên đăng nhập2.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 để trống ô mật khẩu2.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 6ký 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

Trang 35

Giao diện:

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

Hình 2-2 Giao diện đăng nhập ứng dụng di động

Trang 36

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

Tên Use Case Tra cứu thông tin mặt hàngTá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

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

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ẩm2.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 phẩm2.2.3 Hệ thống hiện giao diện thông tin chi 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 phẩm đố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

Trang 38

Trang 39

Hình 2-7 Màn hình quét mã QR lỗi

Hình 2-8 Màn hình thông tin chi tiết sản phẩm