Quản lý bảo hành bảo trì sửa chữa máy pha cà phê

Quản lý bảo hành bảo trì sửa chữa máy pha cà phê- Định kỳ có các nhân viên theo dõi và tiến hành thông báo và bảo trì máy phacho khách hàng.. Use-case Đăng nhập Bảng 2.4.1.1.1.1.1: Kịch

Trang 1

ĐẠI HỌC ĐÀ NẴNG TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT

Trang 2

Đà Nẵng, tháng 06/2022

Trang 3

ĐẠI HỌC ĐÀ NẴNG TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT

KHOA CÔNG NGHỆ SỐ

ĐỒ ÁN TỐT NGHIỆP

ĐẠI HỌC

NGÀNH: CÔNG NGHỆ THÔNG TIN

CHUYÊN NGÀNH: CÔNG NGHỆ THÔNG TIN

ĐỀ TÀI:

QUẢN LÝ BẢO HÀNH BẢO TRÌ

SỬA CHỮA MÁY PHA CÀ PHÊ

Sinh viên thực hiện : Bạch Trung Kiên

Người hướng dẫn : ThS Đỗ Phú Huy

Giảng viên hướng dẫn duyệt

Trang 4

Đà Nẵng, tháng 06/2022

Trang 5

NHẬN XÉT CỦA NGƯỜI HƯỚNG DẪN

Trang 6

NHẬN XÉT CỦA NGƯỜI PHẢN BIỆN

Trang 7

TÓM TẮT

Tên đề tài: Quản lý bảo hành bào trì sửa chữa máy pha cà phê

Sinh viên thực hiện: Bạch Trung Kiên

và mỗi khách hàng Tính năng lọc danh sách để dễ dàng tìm kiếm khi có nhiều thôngtin Có thể xem thống kê của quá trình bảo hành bảo trì sửa chữa

App với các chức năng chính như : Cập nhật thông tin cá nhân, cập nhật lịch bảotrì Cho phép xem thông tin chi tiết của mỗi lịch bảo trì Chức năng đặt lịch bảo trìdành cho khách hàng

Trang 8

NHIỆM VỤ ĐỒ ÁN TỐT NGHIỆP

Giảng viên hướng dẫn: ThS Đỗ Phú Huy

Sinh viên thực hiện: Bạch Trung Kiên Mã SV: 1811505310121

1 Tên đề tài

Quản lý bảo hành bảo trì sửa chữa máy pha cà phê

2 Các số liệu, tài liệu ban đầu

 Dựa trên nhu cầu sử dụng máy cà phê của khách hàng ngày càng gia tăng

3 Nội dung chính của đồ án

Quá trình xây dựng website và app quản lý bảo hành bảo trì sửa chữa máy pha cà phê:

 Khảo sát nghiệp vụ thực tế

 Phân tích thiết kế các chức năng của hệ thống

 Thiết kế giao diện cho các chức năng

 Phân tích thiết kế cơ sơ dữ liệu

 Cào và lưu trữ dữ liệu

 Xây dựng hệ thống website

 Kiểm thử và cài đặt

 Hoàn thành bài báo cáo

4 Các sản phẩm dự kiến

 Website và app quản lý hệ thống

 File báo cáo hoàn chỉnh

Trang 9

LỜI NÓI ĐẦU

Em xin gửi lời cảm ơn chân thành và sâu sắc tới thầy Đỗ Phú Huy đã hướng dẫn,giúp đỡ em trong suốt thời gian thực hiện đề tài

Em xin chân thành cảm ơn các thầy cô bộ môn đã tận tình giảng dạy, truyền đạtkiến thức cho em trong các kỳ học vừa qua

Xin chân thành cảm ơn tất cả bạn bè đã động viên, giúp đỡ em trong thời gian họctập và hoàn thành đồ án

Mặc dù đã cố gắng nhiều nhưng sẽ không thể tránh khỏi những thiếu sót Em kínhmong nhận được sự góp ý của quý Thầy Cô và các bạn để hoàn thành tốt hơn nữa

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

Đà Nẵng, ngày 20 tháng 06 năm 2022

Sinh viên thực hiện

i

Trang 10

CAM ĐOAN

Em xin cam đoan:

1 Những nội dung trong luận văn này do em thực hiện dưới sự hướng dẫncủa thầy Đỗ Phú Huy

2 Mọi tham khảo trong luận văn đều được trích dẫn rõ ràng tên tác giả, têncông trình ,thời gian,địa điểm công bố

3 Mọi sao chép không hợp lệ, vi phạm quy chế đào tạo, hay gian trá, emxin chịu hoàn toàn trách nhiệm

Sinh viên thực hiện,

ii

Trang 11

MỤC LỤC

MỤC LỤC iii

DANH MỤC BẢNG BIỂU ix

DANH MỤC HÌNH VẼ xi

DANH MỤC CHỮ VIẾT TẮT TIẾNG VIỆT xiii

DANH MỤC CHỮ VIẾT TẮT TIẾNG ANH xiv

MỞ ĐẦU 1

1 Mục tiêu đề tài 1

2 Đối tượng nghiên cứu và phạm vi nghiên cứu 2

a Đối tượng nghiên cứu 2

b Phạm vi nghiên cứu 2

3 Phương pháp nghiên cứu 2

4 Giải pháp công nghệ 2

5 Cấu trúc đồ án 2

Chương 1 CƠ SỞ LÝ THUYẾT 4

1.1 Ngôn ngữ lập trình Java 4

1.1.1 Java là gì? 4

1.1.2 Lịch sử phát triển 4

1.2 Bootstrap Framework 5

1.2.1 Đôi nét về lịch sử 5

1.2.2 Tổng quan về Boostrap 5

1.3 Tổng quan về hệ quản trị cơ sở dữ liệu MySQL 6

1.4 Restful API (RestController Spring Boot) 6

1.5 12Typescript và ReactNative Framework 7

iii

Trang 12

1.5.1 TypeScript 7

1.5.2 ReactNative 7

1.5.2.1 React Native là gì 7

1.5.2.2 Native Components (Các thành phần native) 7

1.5.2.3 Asynchronous Execution (xử lý không đồng bộ) 7

1.5.2.4 Touch Handling (xử lý tương tác chạm) 8

1.5.2.5 Flexbox and Styling 8

1.5.2.6 Extensibility (Khả năng mở rộng) 8

1.5.2.7 Tạo modules cho iOS 8

1.5.2.8 Tạo iOS views 8

Chương 2 PHÂN TÍCH THIẾT KẾ HỆ THỐNG 9

2.1 Khảo sát hệ thống 9

2.1.1 Khảo sát thực tế 9

2.1.2 Khảo sát người dùng 9

2.2 Đặc tả yêu cầu phần mềm 9

2.2.1 Xác định các tác nhân 9

2.2.2 Các yêu cầu chức năng 9

2.2.2.1 Quản trị viên 9

2.2.2.2 Nhân viên 10

2.2.2.3 Khách hàng 10

2.2.3 Yêu cầu phi chức năng 10

2.3 Biểu đồ Use Case 11

2.4 Kịch bản cho Use Case 11

2.4.1 Actor Quản trị viên 11

2.4.1.1 Use-case Đăng nhập 11

iv

Trang 13

2.4.1.2 Use-case Đăng xuất 12

2.4.1.3 Use-case đổi mật khẩu 12

2.4.1.4 Use-case quản lý thông tin bảo trì 12

2.4.1.5 Use-case quản lý thông tin nhân viên 13

2.4.1.6 Use-case quản lý thông tin khách hàng 14

2.4.1.7 Use-case thống kê, báo cáo 15

2.4.2 Actor Nhân viên 15

2.4.2.3 Use-case xem lịch bảo trì 16

2.4.2.4 Use-case cập nhật thông tin 16

2.4.2.5 Use-case Cập nhật thông tin bảo trì 16

2.4.3 Actor khách hàng 17

2.4.3.3 Use-case xem lịch bảo trì 18

2.4.3.4 Use-case nhắc lịch bảo trì 18

2.4.3.5 Use-case đặt lịch bảo trì 18

2.4.3.6 Use-case nhận xét bảo trì 19

2.5 Sơ đồ hoạt động 20

2.5.1 Đăng nhập 20

2.5.2 Quản lý lịch bảo trì 21

2.5.3 Quản lý nhân viên 22

2.5.4 Quản lý khách hàng 23

2.5.5 Xem thống kê 24

v

Trang 14

2.5.6 Đặt lịch bảo trì 25

2.5.7 Cập nhật thông tin 26

2.6 Sơ đồ tuần tự 27

2.6.1 Đăng nhập 27

2.6.2 Tạo lịch bảo trì 28

2.6.3 Danh sách lịch bảo trì 28

2.6.4 Đặt lịch bảo trì 29

2.6.5 Thêm nhân viên 29

2.6.6 Danh sách nhân viên 30

2.6.7 Đổi mật khẩu 30

2.7 Sơ đồ ERD 31

2.8 Thiết kế bảng cơ sở dữ liệu 31

2.8.1 Bảng Thanh Pho 31

2.8.2 Bảng Quan 31

2.8.3 Bảng Phuong 32

2.8.4 Bảng DiaChi 32

2.8.5 Bảng NhaSanXuat 32

2.8.6 Bảng NhaCungCap 33

2.8.7 Bảng Quyen 33

2.8.8 Bảng NV_ Quyen 33

2.8.9 Bảng NhanVien 33

2.8.10 Bảng KhachHang 34

2.8.11 Bảng BaoTri 34

2.8.12 Bảng ThietBi 35

2.8.13 Bảng ChiTietBaoTri 35

vi

Trang 15

2.8.14 Bảng LoaiThietBi 36

2.8.15 Bảng TrangThaiBaoTri 36

2.8.16 Bảng BinhLuan 36

2.8.17 Bảng DanhGia 36

Chương 3 XÂY DỰNG CHƯƠNG TRÌNH 37

3.1 Công cụ xây dựng chương trình 37

3.2 Giao diện chương trình 37

3.2.1 Quản trị viên 37

3.2.1.1 Giao diện trang đăng nhập 37

3.2.1.2 Giao diện trang chủ 38

3.2.1.3 Giao diện danh mục chính của trang web 39

3.2.1.4 Giao diện trang tạo lịch bảo trì 40

3.2.1.5 Giao diện trang danh sách lịch bảo trì 40

3.2.1.6 Giao diện trang cập nhật lịch bảo trì 41

3.2.1.7 Giao diện thông báo xóa 41

3.2.1.8 Giao diện trang thêm nhân viên 42

3.2.1.9 Giao diện trang danh sách nhân viên 42

3.2.1.10 Giao diện trang cập nhật nhân viên 43

3.2.1.12 Giao diện trang thêm khách hàng 44

3.2.1.13 Giao diện trang danh sách khách hàng 44

3.2.1.14 Giao diện trang cập nhật khách hàng 45

3.2.1.16 Giao diện đổi mật khẩu 46

3.2.1.17 Giao diện trang thống kê 47

vii

Trang 16

3.2.2 Khách hàng 48

3.2.2.1 Giao diện màn hình đăng nhập 48

3.2.2.2 Giao diện màn hình danh sách lịch bảo trì 51

3.2.2.3 Giao diện màn hình chi tiết lịch bảo trì 52

3.2.2.4 Giao diện cài đặt 54

3.2.2.5 Giao diện đặt lịch bảo trì 55

3.2.3 Nhân viên 56

3.2.3.1 Giao diện màn hình đăng nhập 56

3.2.3.2 Giao diện màn hình danh sách lịch bảo trì 59

3.2.3.3 Giao diện màn hình chi tiết lịch bảo trì 60

3.2.3.4 Giao diện cài đặt 62

KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 64

3.3 Kết luận 64

3.3.1 Về công nghệ 64

3.3.2 Về ứng dụng 64

3.4 Hướng phát triển 64

TÀI LIỆU THAM KHẢO 65

viii

Trang 17

DANH MỤC BẢNG BIỂU

Bảng 2.1: Kịch bản cho usecase “Đăng nhập”(Admin) 11

Bảng 2.2: Kịch bản cho usecase “Đăng xuất”(Admin) 12

Bảng 2.3: Kịch bản cho usecase “Đổi mật khẩu”(Admin) 12

Bảng 2.4: Kịch bản cho usecase “Quản lý thông tin bảo trì”(Admin) 12

Bảng 2.5: Kịch bản cho usecase “Quản lý thông tin nhân viên”(Admin) 13

Bảng 2.6: Kịch bản cho usecase “Quản lý thông tin khách hàng”(Admin) 14

Bảng 2.7: Kịch bản cho usecase “Thống kê, báo cáo”(Admin) 15

Bảng 2.8: Kịch bản cho usecase “Đăng nhập”(Nhân viên) 15

Bảng 2.9: Kịch bản cho usecase “Đăng xuất”(Nhân viên) 15

Bảng 2.10: Kịch bản cho usecase “Xem lịch bảo trì”(Nhân viên) 16

Bảng 2.11: Kịch bản cho usecase “Cập nhật thông tin”(Nhân viên) 16

Bảng 2.12: Kịch bản cho usecase “Cập nhật thông tin bảo trì”(Nhân viên) .16 Bảng 2.13: Kịch bản cho usecase “Đăng nhập”(Khách hàng) 17

Bảng 2.14: Kịch bản cho usecase “Đăng xuất”(Khách hàng) 17

Bảng 2.15: Kịch bản cho usecase “Xem lịch bảo trì”(Khách hàng) 18

Bảng 2.16: Kịch bản cho usecase “Nhắc lịch bảo trì”(Khách hàng) 18

Bảng 2.17: Kịch bản cho usecase “Đặt lịch bảo trì”(Khách hàng) 18

Bảng 2.18: Kịch bản cho usecase “Nhận xét bảo trì”(Khách hàng) 19

Bảng 2.19: ThanhPho 31

Bảng 2.20: Quan 31

Bảng 2.21: Phuong 32

Bảng 2.22: DiaChi 32

Bảng 2.23: NhaSanXuat 32

Bảng 2.24: NhaCungCap 33

ix

Trang 18

Bảng 2.25: Quyen 33

Bảng 2.26: NV_ Quyen 33

Bảng 2.27: NhanVien 33

Bảng 2.28: KhachHang 34

Bảng 2.29: BaoTri 34

Bảng 2.30: ThietBi 35

Bảng 2.31: ChiTietBaoTri 35

Bảng 2.32: LoaiThietBi 36

Bảng 2.33: TrangThaiBaoTri 36

Bảng 2.34: BinhLuan 36

Bảng 2.35: DanhGia 36

x

Trang 19

DANH MỤC HÌNH VẼ

Hình 2.1: Usecase đăng nhập 11

Hình 2.2: Activity “Đăng nhập” 20

Hình 2.3: Activity “Quản lý lịch bảo trì” 21

Hình 2.4: Activity “Quản lý nhân viên” 22

Hình 2.5: Activity “Quản lý khách hàng” 23

Hình 2.6: Activity “Xem thống kê” 24

Hình 2.7: Activity “Đặt lịch bảo trì” 25

Hình 2.8: Activity “Cập nhật thông tin” 26

Hình 2.9: Sequence đăng nhập 27

Hình 2.10: Sequence tạo lịch bảo trì 28

Hình 2.11: Sequence danh sách lịch bảo trì 28

Hình 2.12: Sequence đặt lịch bảo trì 29

Hình 2.13: Sequence thêm nhân viên 29

Hình 2.14: Sequence danh sách nhân viên 30

Hình 2.15: Sequence đổi mật khẩu 30

Hình 2.16: Sơ đồ ERD 31

Hình 3.1: Giao diện trang đăng nhập 37

Hình 3.2: Giao diện trang chủ 38

Hình 3.3: Giao diện danh mục chính 39

Hình 3.4: Giao diện trang tạo lịch bảo trì 40

Hình 3.5: Giao diện danh sách lịch bảo trì 40

Hình 3.6: Giao diện trang cập nhật lịch bảo trì 41

Hình 3.7: Giao diện thông báo xóa 41

Hình 3.8: Giao diện trang thêm nhân viên 42

Hình 3.9: Giao diện danh sách nhân viên 42

Hình 3.10: Giao diện trang cập nhật nhân viên 43

Hình 3.12: Giao diện trang thêm khách hàng 44

Hình 3.13: Giao diện danh sách khách hàng 44

xi

Trang 20

Hình 3.14: Giao diện trang cập nhật khách hàng 45

Hình 3.16: Giao diện đổi mật khẩu 46

Hình 3.17: Giao diện trang thống kê 47

Hình 3.18: Giao diện màn hình đăng nhập 48

Hình 3.19: Giao diện màn hình đăng nhập khi không nhập thông tin 49

Hình 3.20: Giao diện màn hình đăng nhập khi nhập sai thông tin 50

Hình 3.21: Giao diện màn hình danh sách lịch bảo trì 51

Hình 3.22: Giao diện màn hình chi tiết lịch bảo trì_1 52

Hình 3.24: Giao diện cài đặt 54

Hình 3.25: Giao diện đặt lịch bảo trì 55

Hình 3.26: Giao diện màn hình đăng nhập 56

Hình 3.27: Giao diện màn hình đăng nhập khi không nhập thông tin 57

Hình 3.28: Giao diện màn hình đăng nhập khi nhập sai thông tin 58

Hình 3.29: Giao diện màn hình danh sách lịch bảo trì 59

Hình 3.32: Giao diện cài đặt_1 62

Hình 3.33: Giao diện cài đặt_2 63

xii

Trang 21

DANH MỤC CHỮ VIẾT TẮT TIẾNG VIỆT

Stt Chữ viết tắt Giải nghĩa

xiii

Trang 22

DANH MỤC CHỮ VIẾT TẮT TIẾNG ANH

xiv

Trang 23

Quản lý bảo hành bảo trì sửa chữa máy pha cà phê

MỞ ĐẦU

Khác với những đồ gia dụng như tivi, tủ lạnh, , máy pha cà phê gia dụng hoặc chuyên nghiệp cần được chăm sóc thường xuyên bởi cả người dùng và kỹ thuật có tay nghề

Máy pha cà phê là một sản phẩm công nghệ phức hợp gồm hệ thống chuyển động

cơ học, hệ thống điện, và hệ điều khiển vi mạch Máy chỉ hoạt động tốt nếu các hệ thống này vận hành và phối hợp trơn tru Ly cà phê chỉ đạt chuẩn khi các yếu tố nhiệt

độ, áp suất, và thời gian chiết xuất đạt chuẩn Ly cà phê chỉ ngon khi chiếc máy pha đãđược làm sạch trước đó

Lợi ích của việc bảo dưỡng máy pha định kỳ là không thể bỏ qua như ngăn chặn sớm những hư hỏng & kéo dài tuổi thọ của máy pha cà phê espresso Điều kiện khí hậu và thời tiết ở Việt Nam tương đối khắc nghiệt: độ ẩm cao, chuột bọ và côn trùng phá hoại… Khách hàng không thể phát hiện được hư hỏng kịp thời nếu không kiểm tra, do đó ảnh hưởng đến an toàn khi vận hành và độ bền của máy

Vì vậy, dịch vụ sau bán hàng của nhà cung cấp máy pha cà phê là yếu tố rất quan trọng trong quyết định mua, mượn, hay thuê máy của khách hàng

Tham luận này đề cập đến sự cần thiết của một hệ thống quản lý quá trình bảohành bảo trì máy pha cà phê, đề xuất các bước đi cần thiết của việc tiến tới quản lýđược trơn tru và hiệu quả hơn

Để tiếp cận và góp phần đẩy mạnh sự phát triển của những ly cà phê nói riêng vàmáy pha cà phê nói chung, em đã tìm hiểu và cài đặt “Hệ thống quản lý quá trình bảohành bảo trì máy pha cà phê”

1 Mục tiêu đề tài

- Một kế hoạch bảo trì thiết bị bài bản, được tiến hành định kỳ sẽ mang đến nhiềulợi ích cho khách hàng về thời gian, chi phí, tăng uy tín của khách hàng, tăng hiệu quảsản xuất, tăng tuổi thọ sử dụng trang thiết bị… Có thể nói, các hoạt động bảo trì đượcxem như giải pháp quản lý tài sản khách hàng, giúp tăng hiệu suất sản xuất, đảm bảochất lượng sản phẩm, kéo dài tuổi thọ và giá trị của thiết bị, tài sản

- Khách hàng có thể dễ dàng theo dõi thời hạn bảo hành cũng như bảo trì củamáy pha cà phê để tạo ra những ly cà phê thơm ngon nhất

Trang 24

- Định kỳ có các nhân viên theo dõi và tiến hành thông báo và bảo trì máy phacho khách hàng

- Rút ngắn thời gian bảo trì cũng như thời gian lập kế hoạch bảo trì bảo dưỡngđịnh kỳ hàng năm

- Việc đưa ứng dụng tin học vào việc quản lý quá trình bảo trì là yêu cầu bứcthiết vì số lượng khách hàng sử dụng máy cà phê trong nước ngày càng tăng đáp ứngnhu cầu tăng trưởng kinh tế, công nghiệp Theo ước tính việc ứng dụng cơ sở dữ liệu

có thể tiết kiệm mỗi năm hàng tỷ đồng, giảm tối thiểu việc lưu trữ bằng giấy tờ Hơnnữa tin học hóa các lĩnh vực đời sống kinh tế xã hội là điều tất yếu trong thời đại ngàynay

2 Đối tượng nghiên cứu và phạm vi nghiên cứu

a Đối tượng nghiên cứu

Phân tích thiết kế chức năng quản lý bảo hành bảo trì sửa chữa

b Phạm vi nghiên cứu

Đề tài áp dụng cho cả nước và sau này có thể mở rộng ra phạm vi ra nước ngoài

3 Phương pháp nghiên cứu

 Phương pháp nghiên cứu lý thuyết thu thập thông tin qua sách, các tài liệu,

trang web để tìm được các cơ sở lý thuyết liên quan vấn đề mình nghiên cứu

 Phương pháp triển khai thực nghiệp: xây dựng website

Cấu trúc đồ án tốt nghiệp gồm các phần như sau:

- Mở đầu: Nghiên cứu, tìm hiểu và đưa ra lý do chọn đề tài, mục tiêu và mục đíchkhi xây dựng và phát triển đề tài Xác định rõ phạm vi và đối tượng hướng đến, giảipháp công nghệ để triển khai, xây dựng đề tài đồng thời phân tích đặc tả yêu cầunghiệp vụ

Trang 25

- Chương 1: Tìm hiểu, giới thiệu tổng quát các kiến thức về ngôn ngữ lập trìnhJava, Typescript, Bootsrap Framework, ReactNative Framework và hệ quản trị cơ sở

dữ liệu MySQL

- Chương 2: Phân tích các tác nhân và chức năng của từng tác nhân, yêu cầu phichức năng của hệ thống Thiết kế sơ đồ use-case, sơ đồ hoạt động, sơ đồ ERD Thiết

kế cơ sở dữ liệu Xây dựng kịch bản cho từng use-case trong hệ thống

- Chương 3: Xây dựng giao diện và chức năng của hệ thống

- Kết luận: Kết luận chung cho các chương trong đồ án Trình bày những vấn đề

đã giải quyết đồng thời trình bày hướng phát triển

Trang 26

Chương 1

CƠ SỞ LÝ THUYẾT1.1 Ngôn ngữ lập trình Java

1.1.1 Java là gì?

Java là một ngôn ngữ lập trình dạng lập trình hướng đối tượng (OOP) Khác vớiphần lớn ngôn ngữ lập trình thông thường, thay vì biên dịch mã nguồn thành mã máyhoặc thông dịch mã nguồn khi chạy, Java được thiết kế để biên dịch mã nguồn thànhbytecode, bytecode sau đó sẽ được môi trường thực thi (runtime environment) chạy

Cú pháp Java được vay mượn nhiều từ C và C++ nhưng có cú pháp hướng đối tượngđơn giản hơn và ít tính năng xử lý cấp thấp hơn Do đó việc viết một chương trìnhbằng Java dễ hơn, đơn giản hơn, đỡ tốn công sửa lỗi hơn.[4]

2010, Oracle đã mô tả họ là "người quản lý công nghệ Java với cam kết không ngừng

để bồi dưỡng một cộng đồng tham gia và minh bạch" Lịch sử phiên bản java:

 Java SE 6 (còn gọi là Mustang), được công bố 11 tháng 12 năm 2006

 Java SE 7 (còn gọi là Dolphin), được bắt đầu từ tháng 8 năm 2006 và công bốngày 28 tháng 7 năm 2011

 Java SE 8 ngày 18 tháng 3 năm 2014

Trang 27

1.2 Bootstrap Framework

1.2.1 Đôi nét về lịch sử

19/8/2011 trên GitHub, Bootstrap được “ra mắt” như một mã nguồn mở với têngọi ban đầu là Twitter Blueprint Đây là một sản phẩm sáng tạo của Mark Otto vàJacob Thornton tại Twitter

31/1/2012, Bootstrap phiên bản 2 được phát hành Phiên bản này được bổ sung

bố cục lưới 12 cột, thiết kế tùy chỉnh có thể tương thích linh hoạt với kích thước nhiềumàn hình

19/8/2013, Bootstrap 3 ra đời với giao diện tương thích với smartphone, trởthành No.1 project trên GitHub

Tháng 10/2014, Mark Otto công bố phiên bản Bootstrap 4 đang được phát triển.Phiên bản alpha đầu tiên của Bootstrap 4 đã được triển khai vào tháng 8/2015

Phiên bản mới nhất là Bootstrap 4.5

Đến nay, Bootstrap vẫn là một trong những framework thiết kế website đượcnhiều developer đánh giá cao.[2]

1.2.2 Tổng quan về Boostrap

 Bootstrap là Font-end Framework được viết bằng SASS và biên dịch thành

CSS Bootstrap là một bộ thư viện mạnh mẽ được tích hợp nhiều CSS có sẵngiúp cho việc lập trình HTML & CSS trở nên đơn giản và dễ dàng hơn

 Đối với CSS thuần chúng ta tường gặp khó khăn và mất rất nhiều thời gian đểkiểm tra và điều chỉnh tính tương thích trên các trình duyệt và các thiết bị khácnhau Đôi khi website của chúng ta sẽ hiển thị đẹp trên thiết bị trình duyệt nàynhưng lại tan hoang trên trình duyệt hay thiết bị khác Thế nhưng chỉ cần sửdụng Bootstrap mọi thứ lại trở nên ez (dễ dàng) hơn rất nhiều

 Bootstrap quản lý layout của một trang web bằng cách chia nó ra thành 960

Grid gồm 12 cột, mỗi cột 80Grid và đây chính lả chuẩn thiết kế HTML & CSScủa Bootstrap Nó có hỗ trợ hầu hết các module của một trang web như menu,tabs, tooltip, popup,

Trang 28

 Bên cạnh đó để xử lý các hiệu ứng cấp cao Bootstrap cũng sử dụng jquery nên

để sử dụng được Bootstrap bắt buộc bạn phải bổ sung thêm thư viện jQuery.Hiện nay Version mới nhất là phiên bản Bootstrap v5.0.0-beta1 và dự là sẽ cònđược nâng cấp lên phiên bản cao hơn nữa

1.3 Tổng quan về hệ quản trị cơ sở dữ liệu MySQL

 MySQL là hệ quản trị cơ sở dữ liệu tự do nguồn mở phổ biến nhất thế giới vàđược các nhà phát triển rất ưa chuộng trong quá trình phát triển ứng dụng VìMySQL là cơ sở dữ liệu tốc độ cao, ổn định và dễ sử dụng, có tính khả chuyển,hoạt động trên nhiều hệ điều hành cung cấp một hệ thống lớn các hàm tiện íchrất mạnh Với tốc độ và tính bảo mật cao, MySQL rất thích hợp cho các ứngdụng có truy cập CSDL trên internet MySQL miễn phí hoàn toàn cho nên bạn

có thể tải về MySQL từ trang chủ Nó có nhiều phiên bản cho các hệ điều hànhkhác nhau: phiên bản Win32 cho các hệ điều hành dòng Windows, Linux, Mac

OS X, Unix, FreeBSD, NetBSD, Novell NetWare, SGI Irix, Solaris, SunOS, …

 MySQL là một trong những ví dụ rất cơ bản về Hệ Quản trị Cơ sở dữ liệu quan

hệ sử dụng Ngôn ngữ truy vấn có cấu trúc (SQL)

1.4 Restful API (RestController Spring Boot)

 Khác với @Controller là sẽ trả về một template @RestController trả về dữ liệudưới dạng JSON Các đối tượng trả về dưới dạng Object sẽ được Spring Bootchuyển thành JSON

 Các đối tượng trả về rất đa dạng, bạn có thể trả về List, Map, … Spring Boot sẽconvert hết chúng thành JSON, mặc định sẽ dùng Jackson converter để làmđiều đó Nếu bạn muốn API tùy biến được kiểu dữ liệu trả về, bạn có thể trả vềđối tượng ResponseEntity của Spring cung cấp Đây là đối tượng cha của mọiresponse và sẽ wrapper các object trả về

 Vì xây dựng API, nên các thông tin từ phía Client gửi lên Server sẽ nằm trongBody, và cũng dưới dạng JSON luôn Tất nhiên là Spring Boot sẽ làm giúpchúng ta các phần nặng nhọc, nó chuyển chuỗi JSON trong request thành mộtObject Java bạn chỉ cần cho nó biết cần chuyển JSON thành Object nào bằngAnnotation @RequestBody

 Ngoài thông tin trong Body của request, thì cái chúng ta cần chính là cái con số

12 nằm trong URL Phải lấy được con số đó thì mới biết được đối tượng To-docần thao tác là gì Lúc đó Anotation @PathVariable tham chiến [3]

Trang 29

1.5 Typescript và ReactNative Framework

1.5.1 TypeScript

 TypeScript (TS) là một superset của JavaScript (JS), được phát triển bởiMicrosoft Có thể transpile thành code JS để chạy trên môi trường của Browserhoặc Nodejs.[5]

 Tuân thủ chặt chẽ specs mà ECMAScript (ES) đề ra, do đó tất cả những đoạncode hợp lệ trong JS thì sẽ hợp lệ ở TS

 Support rất nhiều tính năng nâng cao trong các bản ES mới nhất

 TypeScript đang được hỗ trợ rất mạnh, từ cộng đồng, IDE/Editor, đến cáclibrary/framework

1.5.2 ReactNative

1.5.2.1 React Native là gì

React Native là một frameworkework cho phép bạn xây dựng một ứng dụng trênnative platforms sử dụng kinh nghiệm của lập trình viên bằng javascript và React Trọng tâm của React Native là hiệu quả của nhà phát triển trên tất cả các nền tảng màbạn quan tâm - Học một lần, viết trên bất cứ nền tảng nào Facebook sử dụng ReactNative trên nhiều ứng dụng và tiếp tục đầu tư vào React Native.[1]

1.5.2.2 Native Components (Các thành phần native)

Với React Native, Bạn có thể sử dụng các thành phần cơ bản mặc định của nềntảng như UITabBar trên iOS và Drawer trên Android Điều này cho phép ứng dụng có

sự nhất quán với phần còn lại của nền tảng, và giữ cho chất lượng sản phẩm cao Cácthành phần này có thể dễ dàng tích hợp vào ứng dụng của bạn sử dụng Reactcomponent counterparts, chẳng hạn như TabBarIOS and DrawerLayoutAndroid

1.5.2.3 Asynchronous Execution (xử lý không đồng bộ)

Mọi hoạt động giữa JavaScript code và native platform đều được thực hiện khôngđồng bộ, và các native module cũng có thể sử dụng thêm các threads khác tốt Điềunày có nghĩa là chúng ta có thể giải mã ảnh không nằm tren main thread, lưu vào bộnhớ trong luồng background, Tính toán và sắp xếp giao diện sẽ không làm đơ giaodiện, và còn nhiều hơn thế nữa Kết quả là ứng dụng được viết bằng React Native hoạtđộng và đáp ứng giống như app được viết bằng native Các phương án giao tiếp cũngđược hỗ trợ đầy đủ, cho phép bạn sử dụng Chrome Developer tool để debug javascriptkhi chạy các ứng dụng hoàn chỉnh trên công cụ mô phỏng hoặc thiết bị thật

Trang 30

1.5.2.4 Touch Handling (xử lý tương tác chạm)

React Native đã thực hiện một hệ thống mạnh mẽ để xử lý các thao tác chạm trêngiao diện và cung cấp các công cụ như TouchableHighlight tích hợp các giao diện cóthể cuộn được và nhiều phần tử khác mà không cần cấu hình gì thêm

1.5.2.5 Flexbox and Styling

Sắp xếp, bố trí giao diện cần được thực hiện một các dễ dàng, đó là lý do vì sao React Native sử dụng chế độ Flexbox layout từ web vào React Native Flexbox khiến việc xây dựng hầu hết các giao diện cơ bản trở thàn h công việc dễ dàng, như giao diệnstacked và nested boxes với margin và padding React Native cũng hỗ trợ các web styles phổ biến như fontWeight, và StyleSheetStyleSheet cung cấp một các tối ưu để giải quyết các vấn đề về thiết kế giao diện

1.5.2.6 Extensibility (Khả năng mở rộng)

Điều tuyệt vời là bạn có thể xây dựng một ứng dụng bằng React Native mà khôngcần viết cho mỗi nền tảng, tuy nhiên React Native cũng được thiết kế để dễ dàng mở rộng với các views và modules native đã được tuỳ biến Điều này có nghĩa là bạn có thể tái sử dụng tất cả những gì bạn đã xây dựng trước đó, hoặc có thể sử dụng các thư viện native mà bạn thích

1.5.2.7 Tạo modules cho iOS

Để tạo modules trên iOS bạn tạo một class kế thừa RCTBridgeModule prototcol,

và viết hàm bạn muốn có bên javascript trong hàm RCT_EXPORT_METHOD Ngoài

ra chính class phải được exported rõ ràng với RCT_EXPORT_MODULE();

1.5.2.8 Tạo iOS views

Tuỳ chỉnh iOS views có thể kế thừa class RCTViewManager, thực hiện hàm (UIView *) và đăng ký các thuộc tính với RCT_EXPORT_VIEW_PROPERTYmacro

Trang 31

Chương 2 PHÂN TÍCH THIẾT KẾ HỆ THỐNG2.1 Khảo sát hệ thống

2.1.1 Khảo sát thực tế

Sử dụng máy pha cà phê ngày càng trở nên phổ biến đối với chủ quán cà phêtrong những năm gần đây Máy pha cà phê tài sản của bạn hay là cỗ máy giúp chonhững ly cà phê của bạn trở nên hoàn hảo hơn, thì việc chăm sóc bảo dưỡng định kỳđều rất cần thiết “Không có gì là bền bỉ mãi mãi”

Tuy nhiên, nhiều khách hàng vẫn chưa quan tâm đến việc chăm sóc bảo dưỡngđịnh kỳ cho những cỗ máy pha yêu quý của mình

Dẫn đến nhu cầu cần xây dựng một hệ thống quản lý quá trình bảo hành bảo trìmáy pha cà phê dành cho những quản lý cũng như khách hàng để có thể dễ dàng kiểmsoát tình trạng máy của mình

2.2.2.1.3 Quản lý thông tin bảo trì

Admin sẽ chia nhân viên để thực hiện việc bảo trì

Trang 32

Thêm/Sửa/Xóa lịch bảo trì

2.2.2.1.4 Quản lý thông tin nhân viên

Thêm/Sửa/Xóa nhân viên

2.2.2.1.5 Quản lý thông tin khách hàng

2.2.2.2.4 Cập nhật thông tin bảo trì

Thay đổi tiến độ bảo trì

Thay đổi trạng thái bảo trì

2.2.3 Yêu cầu phi chức năng

 Giao diện đơn giản, dễ sử dụng

 Có tính bảo mật, an toàn

 Tốc độ xử lý nhanh chóng, dễ dàng

Trang 33

2.3 Biểu đồ Use Case

Hình 2.3.1.1.1.1: Usecase đăng nhập

2.4 Kịch bản cho Use Case

2.4.1 Actor Quản trị viên

2.4.1.1 Use-case Đăng nhập

Bảng 2.4.1.1.1.1.1: Kịch bản cho usecase “Đăng nhập”(Admin)

ST

T

Use case name Đăng Nhập

1 Description Quản trị viên đăng nhập

2 Actors Quản trị viên

3 Input Quản trị viên nhập tên đăng nhập và mật khẩu

4 Output Thông báo Đăng nhập thành công hoặc thất bại

5 Basic flow -Chọn “Đăng nhập”

-Nhập tên đăng nhập và mật khẩu-Nhấn “Đăng nhập”

Nếu đăng nhập sai làm lại bước 2

Hiện trang chủ

Trang 34

2.4.1.2 Use-case Đăng xuất

Bảng 2.4.1.2.1.1.1: Kịch bản cho usecase “Đăng xuất”(Admin)

ST

T Use case name Đăng xuất

1 Description Quản trị viên đăng xuất

3 Input Quản trị viên đã đăng nhập trước đó

4 Output Trở về màn hình trang chủ, chưa đăng nhập tài

khoản

5 Basic flow -Bấm chọn “Đăng xuất”

-Hiện trang đăng nhập

2.4.1.3 Use-case đổi mật khẩu

Bảng 2.4.1.3.1.1.1: Kịch bản cho usecase “Đổi mật khẩu”(Admin)

ST

T

Use case name Đổi mật khẩu

1 Description Quản trị viên cập nhật mật khẩu

3 Input Quản trị viên đã đăng nhập, và bấm vào đổi mật

-Nhận thông báo thành công hoặc thất bại

2.4.1.4 Use-case quản lý thông tin bảo trì

Bảng 2.4.1.4.1.1.1: Kịch bản cho usecase “Quản lý thông tin bảo trì”(Admin)

ST

T

Use case name Quản lý thông tin bảo trì

1 Description Quản trị viên quản lý bảo trì

3 Input Quản trị viên đã đăng nhập, bấm vào “Bảo trì”

4 Output Thông báo thực hiện thành công

5 Basic flow I Đăng nhập thành công vào trang quản trị

Trang 35

2 Nhập tiêu đề, mô tả, chọn thiết bị, chọn khách hàng, chọn nhân viên

+Trường hợp có: Trang bảo trì load lại,thông tin vừa xóa đã không còn xuấthiện trong bảng

2.4.1.5 Use-case quản lý thông tin nhân viên

Bảng 2.4.1.5.1.1.1: Kịch bản cho usecase “Quản lý thông tin nhân viên”(Admin)

ST

T

Use case name Quản lý thông tin nhân viên

1 Description Quản trị viên quản lý bảo trì

3 Input Quản trị viên đã đăng nhập, bấm vào “Bảo trì”

5 Basic flow I Đăng nhập thành công vào trang quản trị viên

II Trên danh mục chính chọn “Nhân viên”

TH1: Thêm nhân viên mới

1 Nhấn “Thêm nhân viên mới”

2 Nhập họ tên, chọn ngày sinh, giới tính, nhậpemail, số điện thoại, tài khoản, mật khẩu, địa chỉ, chọn thành phố, quận huyện

Trang 36

sửa những thông tin cần sửa

2.4.1.6 Use-case quản lý thông tin khách hàng

Bảng 2.4.1.6.1.1.1: Kịch bản cho usecase “Quản lý thông tin khách hàng”(Admin)

ST

T

Use case name Quản lý thông tin khách hàng

1 Description Quản trị viên quản lý khách hàng

3 Input Quản trị viên đã đăng nhập, bấm vào “Khách

hàng”

II Trên danh mục chính chọn “Khách hàng”

TH1: Thêm khách hàng mới

1 Nhấn “Thêm khách hàng mới”

2 Nhập họ tên, doanh nghiệp, số điện thoại, tài khoản, mật khẩu, địa chỉ, chọn thành phố, quận huyện

Trang 37

+Trường hợp không: Không có gì thayđổi, vẫn ở trang danh sách khách hàng+Trường hợp có: Trang danh sách nhânviên load lại, khách hàng vừa xóa đãkhông còn xuất hiện trong bảng

2.4.1.7 Use-case thống kê, báo cáo

Bảng 2.4.1.7.1.1.1: Kịch bản cho usecase “Thống kê, báo cáo”(Admin)

ST

T

Use case name Thống kê, báo cáo

1 Description Quản trị viên xem thống kê, báo cáo

3 Input Quản trị viên đã đăng nhập, bấm vào “Thống kê,

báo cáo”

4 Output Trang thống kê hoặc báo cáo

II Trên danh mục chính chọn “Thống kê, Báo cáo”

TH1: Xem thống kê

1 Nhấn “Thống kê”

2 Xuất hiện trang hiện biểu đồ trạng thái bảo trì và biểu đồ số lượng bảo trì của các thành phố

TH2: Xem báo cáo

Use case name Đăng Nhập

1 Description Nhân viên đăng nhập

2 Actors Nhân viên

3 Input Nhân viên nhập tên đăng nhập và mật khẩu

5 Basic flow -Nhập tên đăng nhập và mật khẩu

-Nhấn “đăng nhập”

Nếu Đăng nhập sai làm lại bước 2

Trang 38

Bảng 2.4.2.2.1.1.1: Kịch bản cho usecase “Đăng xuất”(Nhân viên)

ST

T

Use case name Đăng xuất

1 Description Nhân viên đăng xuất

3 Input Nhân viên đã đăng nhập trước đó

4 Output Trở về màn hình đăng nhập, chưa đăng nhập tài khoản

5 Basic flow -Chọn vào biểu tượng 3 gạch ngang để mở menu

-Xuất hiện list chức năng con -Bấm chọn “Đăng xuất”

-Trở về màn hình đăng nhập

2.4.2.3 Use-case xem lịch bảo trì

Bảng 2.4.2.3.1.1.1: Kịch bản cho usecase “Xem lịch bảo trì”(Nhân viên)

ST

T

Use case name Xem lịch bảo trì

1 Description Nhân viên xem lịch bảo trì

3 Input Nhân viên đã đăng nhập trước đó

4 Output Màn hình lịch bảo trì

-Xuất hiện list chức năng con -Bấm chọn “Lịch bảo trì”

-Xuất hiện màn hình danh sách lịch bảo trì (theo từngnhân viên)

2.4.2.4 Use-case cập nhật thông tin

Bảng 2.4.2.4.1.1.1: Kịch bản cho usecase “Cập nhật thông tin”(Nhân viên)

ST

T

Use case name Cập nhật thông tin

1 Description Nhân viên cập nhật thông tin(Số điện thoại, Email,

Địa chỉ, Mật khẩu, …)

3 Input Nhân viên đã đăng nhập, và bấm vào “Cài đặt”

4 Output Thông báo cập nhật thông tin thành công hoặc thất bại

5 Basic flow - Chọn vào biểu tượng 3 gạch ngang để mở menu

-Xuất hiện list chức năng con -Bấm chọn “Cài đặt”

-Hiện trang thông tin cá nhân của nhân viên

Trang 39

-Nhập những thông tin cần sửa-Bấm “Lưu”

-Nhận thông báo thành công hoặc thất bại

2.4.2.5 Use-case Cập nhật thông tin bảo trì

Bảng 2.4.2.5.1.1.1: Kịch bản cho usecase “Cập nhật thông tin bảo trì”(Nhân viên)

ST

T

Use case name Cập nhật thông tin bảo trì

1 Description Nhân viên khi thực hiện việc bảo trì máy cho khách

hàng cần phải cập nhật thông tin bảo trì để Admin dễquản lý

3 Input Người quản lý đã đăng nhập thành công

Nhấn vào “Lịch bảo trì”

4 Output Cập nhật thông tin bảo trì thành công

5 Basic flow - Đăng nhập thành công

- Chọn vào biểu tượng 3 gạch ngang để mở menu

- Xuất hiện list chức năng con

3 Input Khách hàng nhập tên đăng nhập và mật khẩu

5 Basic flow -Nhập tên đăng nhập và mật khẩu

-Nhấn “Đăng nhập”

Nếu Đăng nhập sai làm lại bước 2

Bảng 2.4.3.2.1.1.1: Kịch bản cho usecase “Đăng xuất”(Khách hàng)

ST

T

Use case name Đăng xuất

Trang 40

1 Description Khách hàng đăng xuất

2 Actors Khách hàng

3 Input Khách hàng đã đăng nhập trước đó

4 Output Trở về màn hình đăng nhập, chưa đăng nhập tài

khoản

-Xuất hiện list chức năng con -Bấm chọn “Đăng xuất”

-Trở về màn hình đăng nhập

2.4.3.3 Use-case xem lịch bảo trì

Bảng 2.4.3.3.1.1.1: Kịch bản cho usecase “Xem lịch bảo trì”(Khách hàng)

ST

T

Use case name Xem lịch bảo trì

1 Description Khách hàng xem lịch bảo trì

3 Input Khách hàng đã đăng nhập trước đó

4 Output Màn hình lịch bảo trì

-Xuất hiện list chức năng con -Bấm chọn “Lịch bảo trì”

-Xuất hiện màn hình danh sách lịch bảo trì (theo từngkhách hàng)

2.4.3.4 Use-case nhắc lịch bảo trì

Bảng 2.4.3.4.1.1.1: Kịch bản cho usecase “Nhắc lịch bảo trì”(Khách hàng)

ST

T

Use case name Nhắc lịch bảo trì

1 Description Khi khách hàng sắp tới hạn bảo trì, có thể dùng nhắc

lịch bảo trì để gởi thông báo đến cho admin hoặc nhânviên để xử lý

3 Input Khách hàng đã đăng nhập, và bấm vào “Nhắc lịch bảo

trì”

4 Output Gởi nhắc lịch bảo trì thành công

5 Basic flow - Chọn vào biểu tượng 3 gạch ngang để mở menu

-Xuất hiện list chức năng con -Bấm chọn “Nhắc lịch bảo trì”

-Hiện lịch bảo trì định kỳ-Bấm “Nhắc hẹn”

-Nhận thông báo thành công

Tiêu đề	Quản Lý Bảo Hành Bảo Trì Sửa Chữa Máy Pha Cà Phê
Tác giả	Bạch Trung Kiên
Người hướng dẫn	ThS. Đỗ Phú Huy
Trường học	Đại học Đà Nẵng
Chuyên ngành	Công nghệ thông tin
Thể loại	Đồ án tốt nghiệp
Năm xuất bản	2022
Thành phố	Đà Nẵng

Định dạng
Số trang	87
Dung lượng	2,99 MB