NGHIÊN CỨU LẬP TRÌNH DI ĐỘNG ĐA NỀN TẢNG VÀ XÂY DỰNG ỨNG DỤNG CHO THUÊ PHÒNG TRỌ DỰA TRÊN SỰ KẾT HỢP FLUTTER, GOLANG VÀ GRAPHQL

Nhưng các vấn đề liên quan đến chi trả, cần bàn bạc, traođổi, hợp đồng đều không thể trao đổi qua mạng xã hội mà cần một ứng dụng cóthể quản lí những giao dịch, trao đổi giữa người đi th

BÁO CÁO THỰC TẬP TỐT NGHIỆP

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

ĐỀ TÀI

NGHIÊN CỨU LẬP TRÌNH DI ĐỘNG ĐA NỀN TẢNG

VÀ XÂY DỰNG ỨNG DỤNG CHO THUÊ PHÒNG TRỌ DỰA TRÊN SỰ KẾT HỢP FLUTTER, GOLANG VÀ GRAPHQL

Giảng viên hướng dẫn: TS Nguyễn Thị Ngọc Anh

Nhóm thực hiện: Trịnh Nhật Hạ Vy – 18CNTT3

Nguyễn Đình Toản – 18CNTT4

Đà Nẵng, tháng 02 năm 2022

Đà Nẵng, ngày … tháng … năm …

Cán bộ hướng dẫn

Đà Nẵng, ngày … tháng … năm …

Hội đồng phản biện

Chúng em tên là Trịnh Nhật Hạ Vy – 18CNTT3 và Nguyễn Đình Toản –18CNTT4 Chúng em xin cam đoan đây là đề tài do chúng em thực hiện Các nộidung và kết quả nghiên cứu được trình bày trong báo cáo tốt nghiệp này là trungthực và mọi tham khảo đều được trích dẫn, chỉ rõ nguồn tham khảo theo đúng quyđịnh.

Sinh viên thực hiện

Đầu tiên, em xin chân thành cảm ơn Quý Thầy/Cô trong khoa Tin học đãtrang bị những kiến thức cho chúng em trong suốt quá trình học tập tại TrườngĐại học Sư phạm – Đại học Đà Nẵng vừa qua Chính nhờ công lao giảng dạy,chỉ bảo tận tình của Quý Thầy/Cô mà chúng em mới trang bị được kiến thứcchuyên ngành công nghệ thông tin để có thể thực hiện tiếp chặng đường học tập,vận dụng và sáng tạo ra những sản phẩm hữu ích góp phần phục vụ các lĩnh vựckhác nhau.

Với lòng kính trọng và biết ơn sâu sắc, chúng em xin gửi lời cảm ơn đếngiảng viên hướng dẫn, TS Nguyễn Thị Ngọc Anh đã tận tình giúp đỡ chúng em

từ những bước đầu tiên khi xây dựng ý tưởng nghiên cứu, đề cương cũng nhưtrong suốt quá trình thực hiện và hoàn thiện báo cáo tốt nghiệp này

Chúng em cũng xin gửi lời cảm ơn chân thành tới anh/chị đồng nghiệp ởđơn vị thực tập The Bay City đã tạo mọi điều kiện thuận lợi và giúp đỡ chúngtrong thời gian học tập và nghiên cứu thực hiện báo cáo tốt nghiệp này này

Mặc dù chúng em đã rất cố gắng và nổ lực để hoàn thành báo cáo tốtnghiệp này nhưng trong phạm vi và khả năng cho phép, chắc chắn báo cáo sẽkhông tránh khỏi những thiếu sót Chúng em rất mong nhận được sự thông cảm,góp ý và tận tình chỉ bảo của Quý Thầy/Cô để báo cáo được hoàn thiện nhất

Chúng em xin chân thành cảm ơn!

Nhóm sinh viên thực hiện

Nội dung công việc Người thực hiện

Thời gian thực hiện

và Kết quả đạt được Chương 1: Cơ sở lí thuyết

1.1 Tổng quan về ngôn ngữ Dart

Trịnh Nhật Hạ Vy

14/02/2022 – 18/02/2022

Hoàn thành nội dung và viết báo cáo chương 1

1.2 Tổng quan về framework Flutter

1.3 Tổng quan về ngôn ngữ Javascript

1.4 Tổng quan về framework ReactJS

1.5 Tổng quan về ngôn ngữ Golang

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

2.1 Phân tích yêu cầu đề tài

Trịnh Nhật Hạ VyNguyễn Đình Toản

21/02/2022 – 01/04/2022

Hoàn thành nội dung và viết báo cáo chương 2

Hoàn thiện mã nguồn cho tất cả chức năng của ứng dụng và trang web (bao gồm Frontend

2.6 Biểu đồ tuần tự Nguyễn Đình Toản

2.7 Thiết kế cơ sở dữ liệu Nguyễn Đình Toản

Lập trình giao diện cơ bản ứng dụng

Lập trình trang web cho người quản trị

Lập trình giao diện tin nhắn ứng dụng

Lập trình giao diện phương thức

thanh toán cho ứng dụng

Lập trình API cơ bản Nguyễn Đình Toản

Lập trình API cho người thuê

Lập trình API cho người quản trị

Lập trình API tin nhắn

Lập trình API phương thức thanh toán

Chương 3: Cài đặt chương trình và kết quả

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

Trịnh Nhật Hạ VyNguyễn Đình Toản

04/04/2022 – 08/04/2022Hoàn thành nội dung và viết báo cáo chương 3.3.2 Kết quả chương trình

Chương 4: Kết luận và hướng phát triển

4.1 Kết luận

Trịnh Nhật Hạ VyNguyễn Đình Toản

11/04/2022 – 15/04/2022Hoàn thành chương 4 Hoàn thiện sản phẩm và báo cáo TTTN4.2 Định hướng phát triển

MỤC LỤC LỜI CAM ĐOAN

LỜI CẢM ƠN

KẾ HOẠCH THỰC HIỆN ĐỀ TÀI CỦA NHÓM

MỤC LỤC i

DANH MỤC BẢNG BIỂU vi

DANH MỤC HÌNH VẼ vii

LỜI MỞ ĐẦU 2

1 Lí do chọn đề tài 2

2 Mục tiêu nghiên cứu 3

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

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

5 Ý nghĩa của đề tài 4

6 Bố cục của đề tài 4

7 Đóng góp của đồ án 5

CHƯƠNG I: CƠ SỞ LÝ THUYẾT 7

1.1 Tổng quan về ngôn ngữ Dart 7

1.1.1 Khái niệm của Dart 7

1.1.2 Lịch sử hình thành ngôn ngữ Dart 7

1.1.3 Tại sao sử dụng ngôn ngữ Dart 8

1.1.4 Tính năng của Dart 8

1.2 Tổng quan về framework Flutter 10

1.2.1 Khái niệm của Flutter 10

1.2.2 Kiến trúc của Flutter 11

1.2.3 Đặc điểm của Flutter 12

1.2.4 Tính năng của Flutter 13

1.2.5 Ưu và nhược điểm của Flutter 14

1.3 Tổng quan về ngôn ngữ Javascript 15

1.3.1 Khái niệm về Javascript 15

1.3.2 Lịch sử của Javascript 16

1.3.3 Đặc điểm của Javascript 17

1.3.4 Ưu điểm và nhược điểm của Javascript 18

1.3.5 Sự khác nhau giữa Javascript với các ngôn ngữ lập trình web khác 20

1.4 Tổng quan về framework ReactJS 21

1.4.1 Khái niệm về ReactJS 21

1.4.2 Đặc trưng của ReactJS 21

1.4.3 Ưu và nhược điểm của ReactJS 23

1.4.4 Sự phát triển của ReactJS 24

1.5 Tổng quan về ngôn ngữ Golang 25

1.5.1 Khái niệm Golang 25

1.5.2 Lịch sử hình thành ngôn ngữ Golang 25

1.5.3 Đặc điểm của Golang 26

1.5.4 Ưu và nhược điểm của Golang 27

1.5.5 Các lĩnh vực ứng dụng Golang 28

1.6 Tổng quan về gRPC 28

1.6.1 Khái niệm gRPC 28

1.6.2 Các kiểu gRPC APIs 30

1.6.3 Ưu và nhược điểm của gRPC 31

1.7 Tổng quan về GraphQL 31

1.7.1 Khái niệm GraphQL 31

1.7.2 Cấu trúc GraphQL 32

1.7.3 Đặc điểm GraphQL 33

1.7.4 Ưu và nhược điểm GraphQL 34

1.8 Hệ quản trị cơ sở dữ liệu PostgetQL 34

1.8.1 Khái niệm về PostgetQL 34

1.8.2 Tính năng của PostgetQL 35

1.8.3 Vai trò của PostgetSQL 36

1.8.4 So sánh PostgetSQL và MySQL 36

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

2.1 Phân tích yêu cầu đề tài 40

2.1.1 Phát biểu bài toán 40

2.1.2 Yêu cầu bài toán 42

2.2 Nghiên cứu hiện trạng 43

2.3 Đặc tả hệ thống 44

2.4 Biểu đồ ca sử dụng 44

2.4.1 Biểu đồ ca sử dụng của hệ thống 46

2.4.2 Biểu đồ ca sử dụng quản lí (dành cho người quản trị) 46

2.4.3 Biểu đồ ca sử dụng nhắn tin của hệ thống 47

2.5 Biểu đồ hoạt động 47

2.5.1 Biểu đồ hoạt động đăng kí 49

2.5.2 Biểu đồ hoạt động đăng nhập 50

2.5.3 Biểu đồ hoạt động khôi phục mật khẩu 50

2.5.4 Biểu đồ hoạt động tạo toà nhà 51

2.5.5 Biểu đồ hoạt động chỉnh sửa toà nhà 51

2.5.6 Biểu đồ hoạt động xoá toà nhà 51

2.5.7 Biểu đồ hoạt động thêm phòng 52

2.5.8 Biểu đồ hoạt động chỉnh sửa phòng 52

2.5.9 Biểu đồ hoạt động xoá phòng 52

2.5.10 Biểu đồ hoạt động tạo hoá đơn 52

2.5.11 Biểu đồ hoạt động chỉnh sửa hoá đơn 53

2.5.12 Biểu đồ hoạt động xoá hoá đơn 53

2.5.13 Biểu đồ hoạt động đặt cọc 53

2.5.14 Biểu đồ hoạt động xác nhận đặt cọc 54

2.5.15 Biểu đồ hoạt động rút lại tiền đặt cọc 54

2.5.16 Biểu đồ hoạt động thanh toán hoá đơn 55

2.5.17 Biểu đồ hoạt động xác nhận trạng thái hoá đơn 55

2.5.18 Biểu đồ hoạt động tạo cuộc trò chuyện 55

2.5.19 Biểu đồ hoạt động tạo nhóm hội thoại 56

2.5.20 Biểu đồ hoạt động cập nhật cuộc hội thoại nhóm 56

2.5.21 Biểu đồ hoạt động xoá cuộc hội thoại 56

2.5.22 Biểu đồ hoạt động nhắn tin 57

2.5.23 Biểu đồ hoạt động gửi hình ảnh 57

2.5.24 Biểu đồ hoạt động xoá tin nhắn 57

2.6 Biểu đồ tuần tự 57

2.6.1 Biểu đồ tuần tự đăng kí với email 60

2.6.2 Biểu đồ tuần tự đăng nhập với email 60

2.6.3 Biểu đồ tuần tự tạo toà nhà 61

2.6.4 Biểu đồ tuần tự chỉnh sửa toà nhà 61

2.6.5 Biểu đồ tuần tự xoá toà nhà 62

2.6.6 Biểu đồ tuần tự thêm phòng 62

2.6.7 Biểu đồ tuần tự chỉnh sửa phòng 63

2.6.8 Biểu đồ tuần tự xoá phòng 63

2.6.9 Biểu đồ tuần tự đặt phòng 64

2.6.10 Biểu đồ tuần tự tạo hoá đơn 65

2.6.11 Biểu đồ tuần tự chỉnh sửa hoá đơn 66

2.6.12 Biểu đồ tuần tự thanh toán hoá đơn 66

2.7 Thiết kế cơ sở dữ liệu 67

2.7.1 Thiết kế bảng dữ liệu 67

2.7.2 Thiết kế biểu đồ lớp 75

2.7.3 Mô hình cơ sở dữ liệu 76

CHƯƠNG III: CÀI ĐẶT CHƯƠNG TRÌNH VÀ KẾT QUẢ 77

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

3.1.1 Cài đặt chương trình hệ thống 77

3.1.2 Cài đặt ứng dụng 77

3.1.3 Cài đặt trang web quản lí 77

3.2 Kết quả chương trình 78

3.2.1 Giao diện khởi động 78

3.2.2 Giao diện đăng nhập/đăng kí 78

3.2.3 Giao diện tạo tài khoản doanh nghiệp 79

3.2.4 Giao diện tìm kiếm toà nhà 79

3.2.5 Giao diện chi tiết toà nhà 80

3.2.6 Giao diện chi tiết căn hộ 81

3.2.7 Giao diện đặt cọc phòng 81

3.2.8 Giao diện rút lại tiền cọc 82

3.2.9 Giao diện hoá đơn của người dùng 83

3.2.10 Giao diện thanh toán hoá đơn 83

3.2.11 Giao diện hợp đồng 84

3.2.12 Giao diện quản lí toà nhà 85

3.2.13 Giao diện quản lí căn hộ 85

3.2.14 Giao diện thêm toà nhà 86

3.2.15 Giao diện chỉnh sửa toà nhà 86

3.2.16 Giao diện xoá toà toà nhà 87

3.2.17 Giao diện thêm căn hộ 88

3.2.18 Giao diện chỉnh sửa căn hộ 88

3.2.19 Giao diện xoá căn hộ 89

3.2.20 Giao diện tài chính 89

3.2.21 Giao diện yêu cầu đặt cọc 90

3.2.22 Giao diện danh sách hợp đồng và hoá đơn 91

3.2.23 Giao diện tạo hoá đơn 91

3.2.24 Giao diện chỉnh sửa hoá đơn 92

3.2.25 Giao diện xoá hoá đơn 93

3.2.26 Giao diện xác nhận thanh toán 93

3.2.27 Giao diện danh sách cuộc trò chuyện 94

3.2.28 Giao diện chi tiết cuộc trò chuyện 95

3.2.29 Giao diện thông tin cuộc trò chuyện 95

3.2.30 Giao diện tạo nhóm trò chuyện 96

3.2.31 Giao diện thêm người dùng vào nhóm trò chuyện 96

3.2.32 Giao diện thông báo của ứng dụng 97

3.2.33 Giao diện tài khoản 98

3.2.34 Giao diện cập nhật tài khoản 98

3.2.35 Giao diện đăng nhập (website quản lí) 98

3.2.36 Giao diện quản lí người dùng (website quản lí) 99

3.2.37 Giao diện quản lí toà nhà, căn hộ (website quản lí) 101

3.2.38 Giao diện quản lí hợp đồng (website quản lí) 106

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

1 Kết quả đạt được 109

2 Hạn chế của đề tài 110

3 Hướng phát triển 110

TÀI LIỆU THAM KHẢO 110

DANH MỤC BẢNG BIỂ

Bảng 1: So sánh PostgetSQL và MySQL 36

Bảng 2: Đặc tả hệ thống 44

Bảng 4: Thực thể USER 67

Bảng 5: Thực thể BUILDING 68

Bảng 6: Thực thể APARTMENT 69

Bảng 7: Thực thể CONTRACT 69

Bảng 8: Thực thể BILL 70

Bảng 9: Thực thể BUILDING_COMMENT 71

Bảng 10: Thực thể Booking 71

Bảng 11: Thực thể NOTIFICATION 72

Bảng 12: Thực thể CHAT_ROOM 72

Bảng 13: Thực thể CHAT_MESSAGE 73

Bảng 14: Thực thể CHAT_MEMBER 73

Bảng 15: Thực thể USER_MESSAGE 74

Bảng 16: Thực thể USER_CHAT_ROOM 74

Bảng 17: Thực thể CITY 74

Bảng 18: Thực thể DISTRICT 75

Bảng 19: Thực thể WARD 75

DANH MỤC HÌNH V

Hình 1: Tính năng của ngôn ngữ Dart 8

Hình 2: Kiến trúc của Flutter 11

Hình 3: Cách hoạt động của Javascript 18

Hình 4: Thành phần Vitural DOM 22

Hình 5: Mô hình giao tiếp client/server trong RPC 29

Hình 6: Cấu trúc GraphQL 33

Hình 7: Các kí hiệu của biểu đồ ca sử dụng 46

Hình 8: Biểu đồ ca sử dụng của hệ thống 46

Hình 9: Biểu đồ ca sử dụng quản lí (dành cho người quản trị) 47

Hình 10: Biểu đồ ca sử dụng nhắn tin 47

Hình 11: Kí hiệu các hoạt động trong biểu đồ hoạt động 48

Hình 12: Kí hiệu đồng hoá các hoạt động trong biểu đồ hoạt động 48

Hình 13: Kí hiệu đồng hoá có điều kiện trong biểu đồ hoạt động 49

Hình 14: Kí hiệu quyết định trong biểu đồ hoạt động 49

Hình 15: Kí hiệu quyết định kết hợp trong biểu đồ hoạt động 49

Hình 16: Biểu đồ hoạt động đăng kí 50

Hình 17: Biểu đồ hoạt động đăng nhập 50

Hình 18: Biểu đồ hoạt động khôi phục mật khẩu 51

Hình 19: Biểu đồ hoạt động tạo toà nhà 51

Hình 20: Biểu đồ hoạt động chỉnh sửa toà nhà 51

Hình 21: Biểu đồ hoạt động xoá toà nhà 52

Hình 22: Biểu đồ hoạt động thêm phòng 52

Hình 23: Biểu đồ hoạt động chỉnh sửa phòng 52

Hình 24: Biểu đồ hoạt động xoá phòng 52

Hình 25: Biểu đồ hoạt động tạo hoá đơn 53

Hình 26: Biểu đồ hoạt động chỉnh sửa hoá đơn 53

Hình 27: Biểu đồ hoạt động xoá phòng 53

Hình 28: Biểu đồ hoạt động đặt cọc 54

Hình 29: Biểu đồ hoạt động xác nhận đặt cọc 54

Hình 30: Biểu đồ hoạt động rút lại tiền cọc 55

Hình 31: Biểu đồ hoạt động thanh toán hoá đơn 55

Hình 32: Biểu đồ hoạt động xác nhận trạng thái hoá đơn 55

Hình 33: Biểu đồ hoạt động tạo cuộc trò chuyện 56

Hình 34: Biểu đồ hoạt động tạo nhóm hội thoại 56

Hình 35: Biểu đồ hoạt động cập nhật cuộc hội thoại nhóm 56

Hình 36: Biểu đồ hoạt động xoá cuộc hội thoại 56

Hình 37: Biểu đồ hoạt động nhắn tin 57

Hình 38: Biểu đồ hoạt động gửi hình ảnh 57

Hình 39: Biểu đồ hoạt động xoá tin nhắn 57

Hình 40: Kí hiệu đối tượng trong biểu đồ tuần tự 57

Hình 41: Kí hiệu thời gian hoạt động trong biểu đồ tuần tự 58

Hình 42: Kí hiệu cách gửi thông điệp trong biểu đồ tuần tự 58

Hình 43: Kí hiệu thông điệp trả về trong biểu đồ tuần tự 58

Hình 44: Kí hiệu thông điệp gửi trong biểu đồ tuần tự 59

Hình 45: Kí hiệu tạo/huỷ phương thức trong biểu đồ tuần tự 59

Hình 46: Kí hiệu lặp thông điệp trong biểu đồ tuần tự 59

Hình 47: Kí hiệu lặp thông điệp có điều kiện trong biểu đồ tuần tự 59

Hình 48: Kí hiệu gửi phụ thuộc có điều kiện trong biểu đồ tuần tự 60

Hình 49: Kí hiệu đệ quy trong biểu đồ tuần tự 60

Hình 50: Biểu đồ tuần tự đăng kí với email 60

Hình 51: Biểu đồ tuần tự đăng nhập với email 61

Hình 52: Biểu đồ tuần tự tạo toà nhà 61

Hình 53: Biểu đồ tuần tự chỉnh sửa toà nhà 62

Hình 54: Biểu đồ tuần tự xoá toà nhà 62

Hình 55: Biểu đồ tuần tự thêm phòng 63

Hình 56: Biểu đồ tuần tự chỉnh sửa phòng 63

Hình 57: Biểu đồ tuần tự xoá phòng 64

Hình 58: Biểu đồ tuần tự đặt phòng 65

Hình 59: Biểu đồ tuần tự tạo hoá đơn 66

Hình 60: Biểu đồ tuần tự chỉnh sửa hoá đơn 66

Hình 61: Biểu đồ tuần tự thanh toán hoá đơn 67

Hình 62: Biểu đồ lớp của hệ thống 76

Hình 63: Sơ đồ quan hệ cơ sở dữ liệu 76

Hình 64: Giao diện khởi động 1 78

Hình 65: Giao diện khởi động 2 78

Hình 66: Giao diện khởi động 3 78

Hình 67: Màn hình tạo tài khoản 79

Hình 68: Màn hình đăng kí 79

Hình 69: Màn hình đăng nhập 79

Hình 70: Màn hình tạo tài khoản doanh nghiệp 1 79

Hình 71: Màn hình tạo tài khoản doanh nghiệp 2 79

Hình 72: Màn hình tìm kiếm 80

Hình 73: Màn hình tuỳ chỉnh 80

Hình 74: Màn hình xem bản đồ 80

Hình 75: Màn hình chi tiết 80

Hình 76: Màn hình bình luận toà nhà 80

Hình 77: Màn hình bản đồ vị trí của toà nhà 80

Hình 78: Màn hình chi tiết căn hộ 1 81

Hình 79: Màn hình chi tiết căn hộ 2 81

Hình 80: Màn hình chọn phương pháp 82

Hình 81: Màn hình thông báo 82

Hình 82: Màn hình rút lại tiền cọc 82

Hình 83: Màn hình xác nhận rút lại tiền cọc 82

Hình 84: Giao diện danh sách hoá đơn 83

Hình 85: Màn hình chi tiết hoá đơn 83

Hình 86: Màn hình chọn phương thức thanh toán 84

Hình 87: Màn hình xác nhận thanh toán thành công 84

Hình 88: Màn hình chờ xác nhận đã thanh toán 84

Hình 89: Màn hình danh sách hợp đồng 84

Hình 90: Màn hình chi tiết hoá đơn (của người dùng) 84

Hình 91: Màn hình quản lí toà nhà 85

Hình 92: Màn hình chi tiết toà nhà 85

Hình 93: Màn hình căn hộ 85

Hình 94: Màn hình căn hộ (1) 85

Hình 95: Màn hình căn hộ (2) 85

Hình 96: Màn hình thêm toà nhà (1) 86

Hình 97: Màn hình thêm toà nhà (2) 86

Hình 98: Màn hình ghim vị trí toà nhà trên bản đồ 86

Hình 99: Màn hình chọn chỉnh sửa 87

Hình 100: Màn hình chỉnh sửa toà nhà (1) 87

Hình 101: Màn hình chỉnh sửa toà nhà (2) 87

Hình 102: Màn hình xoá toà nhà (1) 87

Hình 103: Màn hình xoá toà nhà (2) 87

Hình 104: Màn hình thêm phòng mới (1) 88

Hình 105: Màn hình thêm phòng mới (2) 88

Hình 106: Màn hình chỉnh sửa phòng (1) 89

Hình 107: Màn hình chính sửa phòng (2) 89

Hình 108: Màn hình chỉnh sửa phòng (3) 89

Hình 109: Màn hình xoá phòng (1) 89

Hình 110: Màn hình xoá phòng (2) 89

Hình 111: Màn hình quản lí tài chính 90

Hình 112: Màn hình danh sách các yêu cầu đặt cọc 90

Hình 113: Màn hình danh sách các hợp đồng 91

Hình 114: Màn hình danh sách các hoá đơn 91

Hình 115: Màn hình tạo hoá đơn mới (1) 92

Hình 116: Màn hình tạo hoá đơn (2) 92

Hình 117: Màn hình chi tiết hoá đơn 92

Hình 118: Màn hình chỉnh sửa hoá đơn (1) 92

Hình 119: Màn hình chỉnh sửa hoá đơn (2) 92

Hình 120: Màn hình xoá hoá đơn 93

Hình 121: Màn hình xác nhận xoá hoá đơn 93

Hình 122: Màn hình xác nhận thanh toán 94

Hình 123: Màn hình thanh toán thành công 94

Hình 124: Màn hình danh sách các cuộc trò chuyện 94

Hình 125: Màn hình cuộc trò chuyện 1-1 95

Hình 126: Màn hình cuộc trò chuyện nhóm 95

Hình 127: Màn hình thông tin người trò chuyện 95

Hình 128: Màn hình thông tin trò chuyện nhóm 95

Hình 129: Màn hình danh bạ người dùng 96

Hình 130: Màn hình tạo nhóm trò chuyện 96

Hình 131: Màn hình chi tiết nhóm 97

Hình 132: Màn hình thêm người dùng 97

Hình 133: Màn hình sau khi thêm thành công 97

Hình 134: Màn hình thông báo (1) 97

Hình 135: Màn hình thông báo (2) 97

Hình 136: Màn hình tài khoản người dùng 98

Hình 137: Màn hình chỉnh sửa tài khoản 98

Hình 138: Màn hình chỉnh sửa mật khẩu 98

Hình 139: Trang web đăng nhập dành cho người quản lí 99

Hình 140: Trang web quản lí người dùng 99

Hình 141: Thông tin chi tiết của tài khoản 100

Hình 142: Form thêm mới tài khoản 100

Hình 143: Form chỉnh sửa tài khoản 101

Hình 144: Xoá tài khoản 101

Hình 145: Trang web quản lí toà nhà 102

Hình 146: Chi tiết toà nhà 102

Hình 147: Form thêm mới toà nhà 103

Hình 148: Form chỉnh sửa toà nhà 103

Hình 149: Xoá toà nhà 104

Hình 150: Chi tiết căn hộ 104

Hình 151: Form thêm mới căn hộ 105

Hình 152: Form chỉnh sửa căn hộ 106

Hình 153: Xoá căn hộ 106

Hình 154: Trang web quản lí hợp đồng 107

Hình 155: Chi tiết hợp đồng 107

Hình 156: Chỉnh sửa hợp đồng 108

Hình 157: Xác nhận kết thúc hợp đồng 108

LỜI MỞ ĐẦU

1 Lí do chọn đề tài

Ngày nay thuê trọ là vấn đề được nhiều người quan tâm, đặc biệt là Sinhviên và Người lao động vì công việc, học hành mà sống xa nhà, mong muốn tìmđược một nơi ở thích hợp, an ninh, sạch sẽ; đồng thời phải thuận tiện cho việc đếntrường, làm việc là một điều cần thiết Nhà trọ, phòng trọ thường được xây dựng ởnhững nơi mặt tiền đường Tuy nhiên, với nhu cầu hiện nay thì nhà trọ cũng đượcxây dựng ở các hẻm, ngõ, ở những vị trí khác nhau thì chi phí thuê cũng khác nhau

Về vấn đề quản lí người thuê trọ, một dãy nhà trọ có quy mô nhỏ cũng phải

có 10 - 20 phòng Còn nhà trọ lớn quy mô đôi khi lên đến cả trăm phòng trọ Mỗicăn phòng trọ lại là một khách hàng, bao nhiêu phòng trọ thì sẽ có bấy nhiêu vấn

đề xảy ra Đó là chưa kể đối tượng khách hàng mà loại hình này nhắm tới khárộng, đủ mọi tầng lớp Từ sinh viên, người mới đi làm, công nhân, hộ gia đình trẻchưa có nhà ở, người lao động nhập cư Bởi sự đa dạng và mỗi người một kiểunên việc quản lý người thuê trọ là bài toán khá nan giải với nhiều người kinhdoanh Bên cạnh đó, khi quản lý 10 - 20 hay cả trăm phòng trọ thì khối lượngcông việc cần phải giải quyết sẽ là rất khủng khiếp Bởi lẽ, cũng là hình thức kinhdoanh cho thuê nên để giữ chân được khách trọ, người đầu tư cũng cần phải cóbiện pháp xử lý các vấn đề, đáp ứng được mong muốn của người thuê Chẳng hạnnhư sửa chữa các hư hỏng phát sinh trong quá trình thuê Rồi sau một thời mộtthời gian cũng phải tiến hành tân trang, sửa sang, nâng cấp lại khu nhà trọ Haychỉ riêng việc quản lý an ninh, đi nhắc nhở các phòng vi phạm quy định Ghi chỉ

số đồng hồ điện nước, nhắc khách thuê đóng tiền nhà thôi cũng đã đủ đau đầu,bởi không phải vị khách nào cũng có ý thức, cũng chủ động chấp hành các quyđịnh

Về vấn đề đi tìm phòng trọ, đối tượng đi tìm trọ có thể là Sinh viên hoặcNgười lao động vì học hành mà sống xa nhà nên khi chọn phòng trọ họ luôn cầnquan tâm đến nhiều yếu tố Về chất lượng phòng ở, các vấn đề như tường cóchắc chắn hay không, chất lượng sơn phủ có ổn không hay đã bong tróc, nếu cóvấn đề thì chủ nhà trọ có sửa lại luôn không Các cửa chính, ổ khóa có đảm bảo

an toàn phòng chống trộm không Trong phòng trọ cần phải có đủ cửa sổ, cửathông gió và có mái che để tránh phòng quá bí bức, hay quá ẩm thấp Đườngống nước, vòi nước liệu có đang bị rò rỉ, hỏng hay tắc không… Về vấn đề vị trí

và an ninh, đây là vấn đế đáng được quan tâm để có một chỗ ở tốt Người đithuê nhà cũng cần thận trọng khi đi giao dịch với người chủ/người môi giới.Thường xảy ra các trường hợp bị lừa gạt về tiền của hay bị thiệt về lợi ích vìngười chủ/môi giới có thiếu những giấy tờ liên quan như: giấy tờ sở hữu nhà chothuê cùng các giấy tờ pháp lý khác để chứng minh họ có đủ điều kiện quyết địnhvới nhà Tiếp theo là về giá cả, giá cả cũng là một tiêu chí được quan tâm hàngđầu mỗi khi các bạn sinh viên đi thuê nhà Mỗi quận huyện lại có mức giá thuêkhác nhau, và nó cũng tùy vào dạng căn nhà Càng về khu vực trung tâm haycàng ở những khu chung cư chất lượng cao, giá thuê sẽ lại càng cao Ngoài tiềnthuê phòng, người thuê cũng cần biết trước những khoản phí khác như tiền điện,tiền nước, tiền wifi, tiền gửi xe,… Hiện nay thay vì đi tìm nhà trọ tận nơi mộtcách thủ công như trước thì người đi thuê đã có thêm nhiều phương pháp đơngiản hơn như tìm kiếm trên Google, Facebook Trên những trang này giờ đã cócác hội nhóm chuyên tìm và cho thuê trọ Tại đây, người đi thuê sẽ được cungcấp rõ thông tin về vị trí nhà, tiện ích, giá thuê cũng như xem được những hìnhảnh trực quan về nhà Nhưng các vấn đề liên quan đến chi trả, cần bàn bạc, traođổi, hợp đồng đều không thể trao đổi qua mạng xã hội mà cần một ứng dụng cóthể quản lí những giao dịch, trao đổi giữa người đi thuê và người cho thuê.

Bên cạnh đó, sự hỗ trợ mạnh mẽ của các ngôn ngữ lập trình, cùng với sự ra

đời của các framework đã thúc đẩy nhóm em chọn đề tài “Nghiên cứu lập trình di

động đa nền tảng và xây dựng ứng dụng cho thuê phòng trọ dựa trên sự kết hợp Flutter, Golang Và GraphQL” để thực hiện thực tập tốt nghiệp nhằm đáp ứng

theo chương trình đào tạo đồng thời mong muốn ứng dụng công nghệ đó vào việctìm hiểu và đưa ra một giải pháp tốt nhằm giải quyết công việc cho thuê phòng trọonline

2 Mục tiêu nghiên cứu

Mục tiêu của đồ án là tìm ra giải pháp hiệu quả để giải quyết công chothuê phòng trọ Các mục tiêu cụ thể của đề tài gồm:

- Tìm ra phương pháp hiệu quả trong việc cho thuê phòng trọ của người chothuê

- Tìm ra phương pháp hiệu quả trong việc đi tìm phòng trọ của người đithuê

- Tìm ra phương pháp quản lí hiệu quả các hợp đồng cho thuê, hoá đơn chitrả điện, nước, tiền thuê hàng tháng,…

- Ứng dụng ngôn ngữ Dart và công nghệ Flutter vào xây dựng ứng dụng diđộng cho thuê phòng trọ.

- Ứng dụng ngôn ngữ GoLang và công nghệ GraphQL và GRPC vào xâydựng backend cho ứng dụng

- Ứng dụng công nghệ React JS vào xây dựng website quản lí cho người quảntrị

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

Đối tượng nghiên cứu gồm:

- Các chức năng của người cho thuê, người đi thuê

- Thông tin các tỉnh/thành, quận/huyện, phường/xã

- Thông tin liên quan đến hợp đồng cho thuê

- Thông tin liên quan đến hoá đơn thanh toán

- Cổng thanh toán ví điện tử

- Các chức năng nhắn tin riêng và nhắn tin nhóm

Giới hạn phạm vi nghiên cứu trong đề tài gồm:

- Tập trung xây dựng hệ thống giúp cho thuê và người đi thuê trọ có thể dễdàng tiếp cận nhau Người cho thuê có thể dễ dàng đăng tải và quản lí thông tinphòng mà mình muốn thuê Người đi thuê có thể dễ dàng tìm kiếm được phòngvới giá cả, tiện ích hợp lí Hai bên có thể quản lí hợp đồng thanh toán, cho thuêmột cách tiện lợi

- Đề tài được xây dựng bởi các ngôn ngữ lập trình như: Dart, Javascript,

Go, HTML, CSS, với công nghệ Flutter, GoLang, GraphQL, GRPC và ReactJS

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

- Phương pháp lý thuyết: Nghiên cứu các tài liệu liên quan đến các nộidung nghiên cứu: Tài liệu về các ngôn ngôn ngữ lập trình, các frameworkFlutter, GoLang và ReactJS, các nhu cầu của người cho thuê, người đi thuê

- Phương pháp thực nghiệm: Nghiên cứu, xây dựng các phương pháp đặt cọc,thuê phòng, tìm phòng, trao đổi thông tin qua lại dưới dạng tin nhắn và quản lí hiệuquả cho việc thuê phòng trọ Phát triển ứng dụng thuê phòng trọ và đánh giá kết quả

5 Ý nghĩa của đề tài

Đề tài đang hướng vào ứng dụng công nghệ thông tin trong lĩnh vực bấtđộng sản, cụ thể là ứng dụng cho thuê phòng trọ Việc ứng dụng công nghệ thôngtin vào lĩnh vực này nhằm đẩy mạnh quá trình áp dụng công nghệ thông tin vào

cuộc sống Và đề tài hướng đến người sử dụng là tất cả mọi người, đặc biệt có íchđối với các sinh viên, người lao động sống xa nhà, hay người môi giới,… Đónggóp chính của đề tài là đề xuất phương pháp thích hợp cho người đi thuê và ngườicho thuê một cách nhanh chóng và rõ ràng, gồm đầy đủ các bản hợp đồng, hoáđơn thanh toán và các cuộc trao đổi qua tin nhắn.

6 Bố cục của đề tài

Trên cơ sở các nội dung nghiên cứu, để đạt mục tiêu đề ra và đảm bảo tính

logic, ngoài phần mở đầu và phần kết luận, đồ án được tổ chức thành các chương như

sau:

Chương 1 Cơ sở lý thuyết Chương này trình bày kết quả nghiên cứu về lập

trình đa nền tảng; trình bày các cơ sở lí thuyết về ngôn ngữ lập trình: Dart, GoLang,Javascript cùng các framework tương ứng Flutter, GraphQL, GRPC, ReactJS được

sử dụng trong việc xây dựng đề tài

Chương 2: Phân tích và thiết kế hệ thống Chương này giới thiệu bài toán

và đưa ra các mô hình hệ thống; đề xuất các ý tưởng, chức năng cho phần mềm;trình bày các mô hình thực thể quan hệ, sơ đồ phân cấp chức năng Phân tích chitiết các chức năng của người sử dụng và người quản lí; thiết kế giao diện ngườidùng và thiết dữ liệu, chức năng cho hệ thống

Chương 3: Cài đặt chương trình và kết quả Trong chương này, nêu kết

quả thực hiện được của đề tài và trình bày cách cài đặt chương trình

7 Đóng góp của đồ án

Trong đồ án thực tập tốt nghiệp này, chúng em đã vận dụng linh hoạtnhững kiến thức đã được học trên giảng đường để thực hiện đề tài Bên cạnh đó,chúng em cũng đã cùng nhau trao đổi, bàn bạc, đưa ra ý tưởng và đề xuất hướngcác tác vụ của người dùng cùng với đơn vị thực tập, nhằm xây dựng một đồ ánthực tập tốt nghiệp hoàn chỉnh cũng như một sản phẩm thân thiện cho người sửdụng Những đóng góp chính của đồ án thực tập tốt nghiệp:

Phân tích rõ ràng vai trò của người sử dụng trong hệ thống

- Đối với người đi thuê trọ/căn hộ, người dùng có thể tìm kiếm các toà nhà/dãy trọ và đặt cọc phòng mà mình muốn thuê Người dùng có thể tiến hànhthanh toán các hoá đơn tiền điện, nước, chi phí thuê phòng và quản lí được mọihoá đơn trên ứng dụng nhằm đảm bảo tính rõ ràng và chính xác giữa người đi

thuê và cho thuê Hợp đồng thuê phòng cũng được thể hiện một cách cụ thể vàđầy đủ các thông tin cần thiết.

- Đối với người cho thuê trọ/căn hộ, họ có thể đăng tải thông tin cần toànhà/dãy trọ và các phòng trọ/căn hộ gồm các thông tin liên quan, tiện ích và giáđặt cọc, giá thuê Họ cũng là người xác nhận các yêu cầu đặt cọc phòng chongười thuê để tạo hợp đồng cho người thuê Người chủ có thể tạo các hoá đơnđiện, nước, chi phí thuê ứng với phòng đó và quản lí việc chi trả hoá đơn trênứng dụng

- Đối với người quản lí, họ có thể quản lí toàn bộ các thông tin người dùng,toà nhà, căn hộ, hoá đơn, hợp đồng của hệ thống

Phân tích và thiết kế chức năng thanh toán hoá đơn trực tuyến

Nghiên cứu và triển khai thực nghiệm chức năng thanh toán hoá đơn trựctuyến nhằm đáp ứng được sự nhanh chóng, tiện dụng, tiết kiệm thời gian củangười dùng Bên cạnh đó, khi thanh toán trực tuyến, người dùng dễ dàng quản lí,kiểm soát được tài chính, trạng thái hoá đơn của mình Ngoài ra, việc thanh toántrực tuyến làm tăng tính chuyên nghiệp trong kinh doanh cũng như quy trìnhhoạt động của ứng dụng

Thiết kế chức năng nhắn tin cá nhân và nhắn tin nhóm cho ứng dụng

Việc liên lạc giữa người cho thuê và người đi thuê là thực sự cần thiết đểtrao đổi về các vấn đề liên quan đến hợp đồng, hoá đơn, điện nước hay các vấn

đề liên quan đến phòng đang thuê Chức năng nhắn tin cá nhân hoặc nhắn tinnhóm nhằm đáp ứng nhu cầu trao đổi một cách thuận tiện cho người dùng màkhông cần phải sử dụng thông qua một ứng dụng khác để trao đổi các vấn đềliên quan

CHƯƠNG I: CƠ SỞ LÝ THUYẾT 1.1 Tổng quan về ngôn ngữ Dart

1.1.1 Khái niệm của Dart

Dart là một ngôn ngữ lập trình hiện đại có mục đích chung, cấp cao, đượcphát triển ban đầu bởi Google Đây là ngôn ngữ lập trình mới xuất hiện vào năm

2011, nhưng phiên bản ổn định của nó đã được phát hành vào tháng 6 năm 2017.Dart không quá phổ biến vào thời điểm đó, nhưng nó đã trở nên phổ biến khiđược sử dụng bởi Flutter[1]

Dart là một ngôn ngữ lập trình động, dựa trên lớp, hướng đối tượng vớiphạm vi đóng và từ vựng Về mặt cú pháp, nó khá giống với Java, C và JavaScript.Nếu bạn biết bất kỳ ngôn ngữ lập trình nào trong số này, bạn có thể dễ dàng họcngôn ngữ lập trình Dart

Dart là một ngôn ngữ lập trình mã nguồn mở được sử dụng rộng rãi đểphát triển ứng dụng di động, ứng dụng web hiện đại, ứng dụng máy tính để bàn

và Internet of Things (IoT) bằng cách sử dụng khung Flutter Nó cũng hỗ trợmột số khái niệm nâng cao như giao diện, mixin, lớp trừu tượng, tổng thể trường

và giao diện kiểu Nó là một ngôn ngữ biên dịch và hỗ trợ hai loại kỹ thuật biêndịch[1]

- AOT (Ahead of Time) – Nó chuyển đổi mã Dart sang mã JavaScript đượctối ưu hóa với sự trợ giúp của trình biên dịch dar2js và chạy trên tất cả các trìnhduyệt web hiện đại Nó biên dịch mã tại thời điểm xây dựng[1]

- JOT (Just-In-Time) – Nó chuyển đổi mã byte trong mã máy (mã gốc),nhưng chỉ mã cần thiết[1]

1.1.2 Lịch sử hình thành ngôn ngữ Dart

Dart được tiết lộ lần đầu tiên trong hội nghị GOTO vào tháng 10 – 12tháng 10 năm 2011 tại Aarhus, Đan Mạch Ban đầu nó được thiết kế bởi Lars vàKespar và được phát triển bởi Google Phiên bản 1.0 đầu tiên của Dart đượcphát hành vào ngày 14 tháng 11 năm 2013, nhằm mục đích thay thế JavaScript.Vào tháng 7 năm 2014, ấn bản đầu tiên của ngôn ngữ Dart đã được EcmaInternational thông qua tại Đại hội đồng lần thứ 107 của tổ chức này Phiên bảnđầu tiên đã bị chỉ trích do sự cố trên web và kế hoạch này đã bị loại bỏ vào năm

2015 với bản phát hành 1.9 của Dart Phiên bản thứ hai của Dart 2.0 được pháthành vào tháng 8, bao gồm một hệ thống âm thanh Phiên bản gần đây Dart 2.7

được bổ sung thêm phương thức mở rộng, cho phép người dùng thêm bất kỳ loạichức năng nào[1].

1.1.3 Tại sao sử dụng ngôn ngữ Dart

Dart là một ngôn ngữ độc lập với nền tảng và hỗ trợ tất cả các hệ điềuhành như Windows, Mac, Linux, v.v Nó là một ngôn ngữ mã nguồn mở, cónghĩa là nó có sẵn miễn phí cho tất cả mọi người Nó đi kèm với giấy phép BSD

và được công nhận bởi tiêu chuẩn ECMA Nó là một ngôn ngữ lập trình hướngđối tượng và hỗ trợ tất cả các tính năng của oops như kế thừa, giao diện và cáctính năng kiểu tùy chọn Dart rất hữu ích trong việc xây dựng các ứng dụng thờigian thực vì tính ổn định của nó Dart đi kèm với trình biên dịch dar2js để truyền

mã Dart thành mã JavaScript chạy trên tất cả các trình duyệt web hiện đại Máy

ảo Dart độc lập cho phép mã Dart chạy trong môi trường giao diện dòng lệnh[2]

Mọi thứ trong Dart được coi như một đối tượng bao gồm, số, Boolean,hàm, v.v giống như Python Tất cả các đối tượng kế thừa từ lớp Đối tượng.Công cụ Dart có thể báo cáo hai loại sự cố trong khi mã hóa, cảnh báo và lỗi.Cảnh báo là dấu hiệu cho thấy mã của bạn có thể có một số vấn đề, nhưng nókhông làm gián đoạn quá trình thực thi của mã, ngược lại lỗi có thể ngăn chặnviệc thực thi mã Dart hỗ trợ gõ âm thanh

1.1.4 Tính năng của Dart

Dart là một ngôn ngữ lập trình hướng đối tượng, mã nguồn mở, chứa nhiềutính năng hữu ích Đây là ngôn ngữ lập trình mới và hỗ trợ một loạt các tiện ích lậptrình như giao diện, bộ sưu tập, lớp, kiểu gõ động và tùy chọn Nó được phát triểncho máy chủ cũng như trình duyệt Dưới đây là danh sách các tính năng quan trọngcủa Dart

Hình 1: Tính năng của ngôn ngữ Dart

Mã nguồn mở: Dart là một ngôn ngữ lập trình mã nguồn mở, có nghĩa là

nó có sẵn miễn phí Nó được phát triển bởi Google, được phê duyệt bởi tiêuchuẩn ECMA và đi kèm với giấy phép BSD[2]

Nền tảng độc lập: Dart hỗ trợ tất cả các hệ điều hành chính như

Windows, Linux, Macintosh, v.v Dart có Máy ảo riêng được gọi là Dart VM,cho phép chúng tôi chạy mã Dart trong mọi hệ điều hành[2]

Hướng đối tượng: Dart là một ngôn ngữ lập trình hướng đối tượng và hỗ

trợ tất cả các khái niệm oops như lớp, kế thừa, giao diện và các tính năng gõ tùychọn Nó cũng hỗ trợ các khái niệm nâng cao như mixin, abstract, các lớp, hệthống kiểu chung được sửa đổi và mạnh mẽ[2]

Đồng nhất: Dart là một ngôn ngữ lập trình không đồng bộ, có nghĩa là nó

hỗ trợ đa luồng sử dụng Isolates Các vùng cách ly là các thực thể độc lập cóliên quan đến các luồng nhưng không chia sẻ bộ nhớ và thiết lập giao tiếp giữacác quá trình bằng cách truyền thông điệp Thông điệp nên được nối tiếp nhau

để tạo hiệu quả truyền thông Việc tuần tự hóa thông báo được thực hiện bằngcách sử dụng một ảnh chụp nhanh được tạo ra bởi đối tượng đã cho và sau đótruyền đến một vùng cách ly khác để giải mã[2]

Thư viện mở rộng: Dart bao gồm nhiều thư viện tích hợp hữu ích bao

gồm SDK (Bộ phát triển phần mềm), lõi, toán học, không đồng bộ, toán học,chuyển đổi, html, IO, v.v Nó cũng cung cấp cơ sở để tổ chức mã Dart thành cácthư viện với không gian tên riêng Nó có thể sử dụng lại bằng câu lệnh nhập

Dễ học: Như chúng ta đã thảo luận trong phần trước, học Dart không phải là

nhiệm vụ của Hercules vì cú pháp của Dart tương tự như Java, C #, JavaScript,

kotlin, v.v nếu bạn biết bất kỳ ngôn ngữ nào trong số này thì bạn có thể học Dart

dễ dàng

Biên dịch linh hoạt: Dart cung cấp sự linh hoạt để biên dịch mã và nhanh

chóng Nó hỗ trợ hai loại quy trình biên dịch, AOT (Ahead of Time) và JIT(Just-in-Time) Mã Dart được truyền bằng ngôn ngữ khác có thể chạy trong cácnhà sản xuất web hiện đại[2]

Nhập an toàn: Dart là ngôn ngữ an toàn kiểu, có nghĩa là nó sử dụng cả

kiểm tra kiểu tĩnh và kiểm tra thời gian chạy để xác nhận rằng giá trị của mộtbiến luôn khớp với kiểu tĩnh của biến, đôi khi nó được gọi là kiểu gõ âm thanh.Mặc dù loại là bắt buộc, nhưng chú thích loại là tùy chọn vì loại nhiễu Điều nàylàm cho mã dễ đọc hơn Ưu điểm khác của ngôn ngữ an toàn kiểu chữ là khichúng ta thay đổi phần mã, hệ thống sẽ cảnh báo chúng ta về sửa đổi mà chúng

ta đã sửa trước đó

Các đối tượng: Dart coi mọi thứ như một đồ vật Giá trị gán cho biến là

một đối tượng Các hàm, số và chuỗi cũng là một đối tượng trong Dart Tất cảcác đối tượng kế thừa từ lớp Đối tượng

Hỗ trợ trình duyệt: Dart hỗ trợ tất cả các trình duyệt web hiện đại Nó đi

kèm với trình biên dịch Dart2JS để chuyển đổi mã Dart thành mã JavaScriptđược tối ưu hóa phù hợp với tất cả các loại trình duyệt web[2]

Cộng đồng: Dart có một cộng đồng lớn trên toàn thế giới Vì vậy, nếu

bạn gặp vấn đề trong khi viết mã thì rất dễ dàng tìm được trợ giúp Nhóm cácnhà phát triển chuyên dụng đang làm việc để nâng cao chức năng của nó

1.2 Tổng quan về framework Flutter

1.2.1 Khái niệm của Flutter

Flutter là một framework lập trình để xây dựng các ứng dụng di động đanền tảng Nguồn gốc của nó bắt nguồn từ Google Chrome và những nỗ lực củamột nhóm chuyên tinh chỉnh cho web chạy nhanh hơn Eric Seidel là người sánglập dự án Flutter và trong cuộc phỏng vấn trên SE Daily, anh kể lại cách anh vàmột vài đồng nghiệp trong nhóm Chrome quyết định xem họ có thể làm Chrometải các trang nhanh hơn Họ đã phát hiện ra rằng phần lớn code của Chromeđang làm chậm việc load trang web và chỉ có để cung cấp khả năng tương thíchvới một bộ phận các trang web rất nhỏ Họ loại bỏ những bộ phận đó ra để xem

có thể làm nó nhanh như thế nào Nỗ lực này đã chứng minh rằng có rất nhiềutiềm năng trong việc tạo ra một framework giao diện người dùng đa nền tảng

thực sự nhanh chóng Không may, nếu Eric và nhóm của anh ấy muốn nhanhchóng đưa framework UI đa nền tảng vào tay các lập trình viên thì đó sẽ phải làmột thứ gì đó không phải là web, vì họ nhận ra rằng web cập nhật rất chậm khi

áp dụng các tiêu chuẩn mới Do đó, dự án Flutter ra đời[3]

Flutter là một SDK mới của Google dành cho các thiết bị di động giúpdevelopers và designers xây dựng nhanh chóng ứng dụng dành cho các thiết bị

di động (Android, iOS) Flutter là dự án mã nguồn mở đang trong giai đoạn thửnghiệm Flutter bao gồm Reactive framework và công nghệ hiển thị 2D (2Drendering engine) và các công cụ phát trển (development tool) Các thành phầnnày làm việc cùng nhau giúp ta thiết kế, xây dựng, test, debug ứng dụng Không

có gì ngạc nhiên khi Flutter giúp các nhà phát triển tạo ra các ứng dụng nativeđẹp mắt và giúp họ phát triển các ứng dụng đa nền tảng một cách dễ dàng[3]

Flutter thường bao gồm 2 thành phần chính quan trọng như sau:

- Một SDK (Software Development Kit): Đây là một bộ sưu tập bao gồmcác công cụ có thể hỗ trợ cho người dùng có thể phát triển được các ứng dụngnền của mình Những điều này thường bao gồm các công cụ có trình để biêndịch mã thành các mã gốc dành riêng cho hệ điều hành iOS và Android[3]

- Một Framework (UI Library based on widgets): Mỗi một tập hợp nhữngthành phần giao diện của người dùng đều có thể thực hiện tái sử dụng vô cùng dễdàng nên người sử dụng có thể cá nhân hóa tùy theo nhu cầu riêng của bản thânmình[3]

1.2.2 Kiến trúc của Flutter

Hình 2: Kiến trúc của Flutter

Vẽ pixel trên màn hình là mục tiêu của tất cả các framework UI Flutterkhác với các framework nền tảng chéo khác ở chỗ nó hiển thị trực tiếp lên mànhình thông qua OpenGL Các cách tiếp cận khác hoạt động ở mức độ trừu tượngcao hơn, nói chuyện với các framework UI của các hệ thống cơ bản tương ứng,

từ đó điều khiển render pixel của các thành phần UI[3]

Ưu điểm của phương pháp này là cần ít giao tiếp qua lại giữa mã cơ bản

và mã Flutter Có một số sự chậm chạp có thể xảy ra do phải kết nối giữa cácngôn ngữ, theo quan sát của Eric, và cách tiếp cận của Flutter tránh được phầnlớn sự chậm chạp này[3]

Nhược điểm là không còn có thể dựa vào vật lý hoạt hình đã được tíchhợp trong iOS và Android Mỗi nền tảng có một cách tiếp cận khác nhau mộtcách tinh tế đối với cách UI phản hồi khi cuộn, tải trang, v.v Và như Eric nhớlại, việc viết tương tác vật lý của riêng bạn là khó khăn nhưng cần thiết để đápứng sự mong đợi của người dùng về một điều gì đó về tương tác trong việc sửdụng từng nền tảng tương ứng[3]

Flutter chạy tất cả mã của nó trên một luồng riêng biệt từ các khía cạnh cụthể của hệ điều hành của ứng dụng Giao tiếp giữa mã Dart và mã cụ thể của hệđiều hành thông qua một JSON đơn giản

Về mặt đồ họa trên màn hình, Flutter sử dụng Skia, đây là thư viện đồ họatương tự được sử dụng trên Chrome và Android Để bố trí văn bản, Flutter mượn

mã đã được phát triển cho Android

Từ góc độ software stack, Flutter có thể được coi là bao gồm các lớp sau:

- Lớp thấp nhất là lớp runtime được xây dựng trong C++, cần nói chuyệnvới HĐH theo một số cách hạn chế – đến Open GL, API truy cập, tệp và mạng

IO, v.v … Phía trên cùng của lớp này là API chuyển sang mã Dart[4]

- Một lớp liên kết chủ yếu là cho thiết lập ban đầu

- Một lớp render là một mô hình view điển hình với các đối tượng tồn tạilâu Lớp này xử lý những thứ như bố cục, vẽ, chỉnh sửa văn bản, cử chỉ, v.v

- Một lớp widget bao gồm các thứ có thời gian tồn tại ngắn mô tả giao diệnngười dùng sẽ trông như thế nào trong một framework duy nhất Flutter áp dụng

mô hình lập trình reactive trong đó UI được xây dựng lại mỗi khi trạng thái thayđổi

- Một lớp thể hiện thẩm mỹ thiết kế cụ thể, ví dụ Thiết kế Vật liệu choAndroid

1.2.3 Đặc điểm của Flutter

Cấu trúc của Flutter

- Dart Platform: Tất cả các ứng dụng từ Flutter được viết bởi ngôn ngữ lậptrình riêng là Dart Trên Windows, MacOS và Linux, Flutter chạy bằng ngônngữ máy ảo Dart (giả lập mobile), cho phép thực thi JIT (Just-in-Time)[4].

- Flutter Engine: Cung cấp hỗ trợ kết xuất mức thấp bằng cách sử dụng thưviện đồ họa Skia của Google Ngoài ra, nó kết nối với các SDK dành riêng chonền tảng, như các SDK được cung cấp bởi Android và iOS[4]

- Flutter Framework: Tập hợp nền tảng, bố cục, và các widgets

- Foundation Library: Cung cấp các lớp và các hàm cơ bản để sử dụngtrong việc xây dựng các ứng dụng từ Flutter

- Môi thứ đều là widget, ngay cả bản thân Flutter cũng là một widget.Widgets trong Flutter là một phức hợp gồm các widget liên kết với nhau Ngườidùng có thể thay đổi, sắp xếp các widget để tạo ra phức hợp Widgets tùy vào ýthích và nhu cầu, từ đó phát triển ứng dụng của mình

Ngôn ngữ lập trình được sử dụng trong Flutter

Để lập trình với Flutter, bạn cần sử dụng một ngôn ngữ lập trình gọi làDart Dart là ngôn ngữ lập trình còn khá mới và chưa thông dụng bằng các ngônngữ khác như C, C++ hay Python, Java… Tuy nhiên, Dart luôn được cải thiện

kể từ khi được Google tạo ra vào năm 2011 Là ngôn ngữ dùng để xây dựngFlutter Framework Dart tập trung phát triển Front-end, với tiêu chí xây dựngnên các ứng dụng đa nền tảng, từ ứng dụng di động đến ứng dụng web[3]

Ngôn ngữ Dart như là sự kết hợp giữa Java và Javascript nên những người

đã có nền tảng hai ngôn ngữ trên sẽ dễ học hơn Dart không dùng để thay thếJavascript, mà là một lựa chọn cải tiến hơn, hỗ trợ cả hai trình biên dịch AOT vàJIT Trong khi ngôn ngữ gõ tĩnh chỉ có trình biên dịch AOT Dart tuy là mộtngôn ngữ mới so với các loại ngôn ngữ khác nhưng lại có phần vượt trội hơn vềtrình biên dịch, nó có cả trình biên dịch AOT (chỉ có ở những ngôn ngữ tĩnh) vàJIT (chỉ có ở những ngôn ngữ động)[3]

Một số khía cạnh của Dart khiến nó phù hợp với Flutter là:

- Nó có một garbage collector thế hệ rất nhanh Điều này rất hữu ích vìFlutter tuân theo mô hình lập trình reactive trong đó các đối tượng UI được tạo

và hủy nhanh chóng

- Trình biên dịch trước thời hạn của Dart cho phép biên dịch trực tiếp

mã Điều này cho phép khởi động nhanh và đạt hiệu suất phù hợp

- Dart tập trung vào trải nghiệm tốt cho lập trình viên

- Dart có thuật toán tree shaking – chỉ các phần của framework Flutter đãđược sử dụng mới được đưa vào ứng dụng cuối cùng

1.2.4 Tính năng của Flutter

Tính năng phát triển nhanh chóng các ứng dụng: Hầu hết, mọi tính

năng hot reload của Flutter giúp cho người dùng có thể sử dụng thử nghiệmnhanh chóng và dễ dàng hơn rất nhiều Với khả năng xây dựng giao diện chongười dùng cộng thêm các tính năng về sửa lỗi nhanh chóng nên Flutter đangthu hút không ít người sử dụng lựa chọn Ngoài ra, các trải nghiệm về thực hiệntải lại lần thứ hai đều rất dễ dàng mà không làm mất đi trạng thái ở trênemulator, simulator và device cho cả iOS và Android[4]

UI đẹp mắt và có tính biểu cảm: Flutter thỏa mãn người sử dụng nhờ

các widget built-in vô cùng đẹp mắt dựa theo Material Design và Cupertino(iOS-flavor), thì các API sẽ thực hiện chuyển động theo nhiều hướng phongphú, scroll tự nhiên và mượt mà nên có thể tự động nhận thức được các nền tảngcần thiết[4]

Quá trình truy cập với nhiều tính năng và SDK native: Nhờ vậy, các

ứng dụng sẽ trở nên sống động hơn rất nhiều nhờ vào API của platform, SDKcủa các bên thứ ba và native code Từ đó, nó sẽ cho phép lập trình viên sử dụnglại được mã Java, Swift và ObjC hiện tại của mình Nhờ vậy, các truy cập sẽthực hiện được mọi tính năng mà SDK native dựa trên iOS và Android[4]

Có khả năng phát triển các ứng dụng thống nhất: Nhờ sở hữu các

công cụ cũng như thư viện nên người sử dụng có thể dễ dàng đưa ra được ýtưởng của mình vào chính trong cuộc sống trên hệ điều hành iOS và Android.Chính vì thế, nếu là người chưa có nhiều kinh nghiệm cho mục đích phát triểncác thiết bị di động thì việc lựa chọn Flutter được xem là một phương pháp dễdàng và rất nhanh chóng trong việc xây dựng ra một ứng dụng di động tuyệtđẹp Ngoài ra, nếu là một nhà phát triển cho iOS hoặc Android có kinh nghiệmlâu đời thì bạn hoàn toàn có thể sử dụng Flutter dành cho các View Từ đó tậndụng việc viết ra nhiều code từ Java/Kotlin /ObjC/Swift hiện có[4]

1.2.5 Ưu và nhược điểm của Flutter

Ưu điểm của Flutter

- Flutter được đánh giá cao nhờ khả năng mạnh về hiệu ứng cũng nhưhiệu suất ứng dụng cao

- Sở hữu khả năng giao tiếp gần như được xem là trực tiếp với hệ thống

- Là dạng ngôn ngữ kiểu tĩnh với các cú pháp hiện đại tương tự như JS,Python, Java Ngoài ra, compiler còn được đánh giá là linh động ngay khidùng AOT (dành cho các sản phẩm cuối) và JIT (dành cho các quá trình nàyphát triển với các hot reload)[3]/

- Flutter có thể chạy được trên các giả lập mobile ngay trên trang web có thểtiện cho việc phát triển Các bộ đo lường thường chỉ các hiệu suất được hỗ trợgiúp cho lập trình viên có thể kiểm soát tốt hơn các hiệu suất của ứng dụng Ngoài

ra, nó còn thể sử dụng để xây dựng được các nền tảng gắn với ứng dụng native để

có thể gia tăng hiệu suất[3]

Nhược điểm của Flutter

- Bộ render UI đã được nhóm phát triển viết lại hầu hết nên thường không cònliên quan tới UI đã có sẵn trong UI Framework native Từ đó, dẫn đến việcmemory sẽ sử dụng tương đối nhiều Ngoài ra, các UI sẽ không còn đi chung với

OS mà chủ yếu chỉ được phát triển riêng và chúng có thể được xem cùng một phiênbản Futter ngay khi tạo ra được ứng dụng dành riêng cho iOS thì iOS 8.x 12.xđều sẽ tương tự nhau và tương tự như với Android Tuy nhiên, các UI của Androidđương nhiên sẽ khác hơn rất nhiều so với iOS[3]

- Bổ sung thường xuyên ngôn ngữ DART: Theo điều tra thì số lượng lập trìnhviên biết về DART là không lớn và có nhiều rủi ro rằng khi học xong DART thìDeveloper có thể sẽ dính liền luôn với DART ở công việc phát triển cho các ứngdụng mobile Chính vì vậy, vấn đề làm việc uyển chuyển JS hay Python hay có thểlinh động qua lại giữa front, back hay AI…sẽ không còn khả năng thực hiện[3]

- Một mô hình dữ liệu hoàn toàn mới: Khi hướng đến phát triển ReactNative thì bạn sẽ mất rất nhiều thời gian cho việc học thêm các mô hình dữ liệutrong Flutter, đây là một công việc không bị đánh giá khó

- Chính vì Flutter là con cưng được sản xuất bởi Google nên sẽ dính phảinhiều phốt là điều vô cùng dễ dàng, chính vì vậy bạn cần cân nhắc khi sử dụng

Tuy nhiên, vẫn nhiều chuyên gia khẳng định rằng Flutter rất tốt và được cho làtốt hơn rất nhiều lần so với Angular mà Google đã từng làm ra trước đây

1.3 Tổng quan về ngôn ngữ Javascript

1.3.1 Khái niệm về Javascript

JavaScript thường được viết tắt là JS, là một ngôn ngữ lập trình kịch bảnphía máy khách (client-side) dựa vào đối tượng phát triển có sẵn hoặc tự địnhnghĩa, JavaScript được sử dụng rộng rãi trong các ứng dụng website Cùngvới HTML và CSS, JavaScript là một trong ba công nghệ cốt lõi của WorldWide Web JavaScript được hỗ trợ hầu như trên tất cả các trình duyệt nhưFirefox, Chrome,… thậm chí với các trình duyệt trên thiết bị di động[5]

JavaScript được biết đến lần đầu tiên là Mocha và chỉ ngay sau đó mộtthời gian nó lại được đổi tên thành LiveScript và cuối cùng Netscape đã đổi tênthành JavaScript, bởi vì sự phổ biến của Java như là một hiện tượng lúc bấy giờ.Sau đó Netscape đã chuyển JavaScript đến ECMA International để làm công tácchuẩn hóa và viết đặc tả,… Cái tên ECMAScript đã được hình thành từ đây.Phần core của ngôn ngữ này đã được nhúng vào hầu hết các trìnhduyệt Netscape, Internet Explorer, Chrome, Firefox,…[5]

JavaScript nên được bao gồm trong một tài liệu HTML cho việc mã hóa

để được thông dịch bởi trình duyệt JS được tích hợp và nhúng trong HTMLgiúp website sống động hơn vì nó cho phép kiểm soát các hành vi của trang webtốt hơn so với khi chỉ sử dụng mỗi HTML Javascript được sử dụng rất rộng rãi

và linh hoạt, từ các slideshow trên website tới các pop-up quảng cáo hay nhữngform điền thông tin, bản đồ tương tác, tính năng tự động điền, những đồ họa 2D,3D, trên website Đây là lớp thứ ba của công nghệ web tiêu chuẩn sau HTML

và CSS: HTML là ngôn ngữ đánh dấu để tạo cấu trúc và bố cục nội dungwebsite CSS là ngôn ngữ định kiểu đoạn tầng để áp dụng kiểu dáng cho nộidung HTML Javascript là ngôn ngữ kịch bản cho phép tạo nội dung động, kiểmsoát đa phương tiện, hình ảnh động và hầu hết mọi thứ khác[5]

1.3.2 Lịch sử của Javascript

Sun Microsystems đã phát minh thành một ngôn ngữ phức tạp và mạnh mẽ

mà chúng ta đã biết đó là ngôn ngữ Java Mặc dù Java có tính khả dụng cao nhưng

nó lại phù hợp nhất đối với các nhà lập trình có kinh nghiệm và cho các công việcphức tạp hơn Netscape Communications đã thấy được nhu cầu đối với một ngôn

ngữ “nửa nọ nửa kia” – một ngôn ngữ sẽ cho phép các cá nhân thiết kế các trangWeb có khả năng tương tác với người dùng hoặc với Java applets nhưng sẽ đòi hỏiphải có kinh nghiệm lập trình tối thiểu LiveScript chỉ là một ngôn ngữ phát thảohơn là thực tế, nhưng nó lại khiến cho người ta tin rằng nó “bắt cầu” cho ý tưởngtốt hơn LiveScript được thiết kế theo tinh thần của nhiều ngôn ngữ script đơn giảnnhưng nó lại có tính khả dụng cao được thiết kế đặc biệt để xây dựng các trangWeb (chẳng hạn như HTML và các form tương tác) Để giúp “bán chạy” ngôn ngữmới này, Netscape hợp tác với Sun cho ra đời ngôn ngữ JavaScript Trên thực tế,Microsoft là người tiên phong thực thi phiên bản của JavaScript (còn có tên làJscript), nhưng họ vẫn chưa tham chiếu đến những đặc tả chính thức củaJavaScript[5].

Mục tiêu của JavaScript là nhằm cung cấp cho các nhà phát triển trangWeb một số khả năng và sự điều khiển trên chức năng của một trang Web MãJavaScript có khả năng nhúng trong tài liệu HTML để điều khiển nội dung củatrang Web và xác nhận tính hợp lý của dữ liệu mà người dùng nhập vào Khimột trang hiển thị trong trình duyệt, các câu lệnh được trình duyệt thông dịch vàthực thi JavaScript là ngôn ngữ script dựa trên đối tượng nhằm phát triển cácứng dụng Internet dựa trên client và server Javascript được ra đời và tháng 5năm 1995, cha đẻ là Brendan Eich một nhà công nghệ Mỹ, đồng sáng lậpMozilla và là một lập trình viên của Netscape[5]

Các phiên bản của JavaScript cho đến nay:

- Các năm tiếp theo JS ra tiếp các phiên bản ES7, ES8, … Và hiện tại làES12 với các tính năng rất nổi bật.

1.3.3 Đặc điểm của Javascript

Nhiệm vụ chính của ngôn ngữ Javascript cơ bản là xây dựng website Có 3ngôn ngữ chính để lập trình web bao gồm HTML, CSS và Javascript và vai trò củaJavascript chính là lập trình chức năng và chịu trách nhiệm cho các yếu tố liên quantới tương tác của người dùng bao gồm trang liên hệ, các cửa sổ, ghi nhận thông tin,biểu thức, hình động, bản đồ, trình phát video tương tác,…[5]

Phản hồi nhanh: Ngôn ngữ Javascript có thể hoạt động trên nhiều trình

duyệt, nền tảng và giúp người dùng giảm thiểu việc kiểm tra thủ công khi truy xuấtqua hệ cơ sở dữ liệu

Tương tác tốt: Khi sử dụng ngôn ngữ này, lập trình viên có thể dễ dàng

tạo các giao diện phản ứng khi người dùng sử dụng

Hạn chế tương tác máy chủ: Javascript được tiến hành thông qua vi bộ

xử lý của chính người dùng, do đó nó giúp tiết kiệm lưu lượng máy chủ

Dễ dàng sử dụng: Là một ngôn ngữ dễ học, đơn giản, thân thiện với người

dùng nên lập trình viên có thể bắt đầu lập trình ngay với vài bài tập Javascript cơbản

Tạo nhiều tính năng bổ sung: Ngôn ngữ Javascript giúp bạn dễ dàng mở

rộng tính năng của website thông qua bên thứ ba

Javascript là một ngôn ngữ đơn luồng (Single Thread) hay nói cách khác

Javascript chỉ có duy nhất một call stack, một heap và trong cùng một thời điểm chỉchạy duy nhất một dòng lệnh JS có thể chạy được trên trình duyệt là nhờ vào

các JavaScript Engine Các engine này sẽ chuyển đổi code JS thành mã máy mà

máy tính có thể hiểu được Có rất nhiều các Javascript Engine phổ biến nhưSpiderMonkey (Firefox), Chakra, Rhino, Carakan, JavaScriptCore, Tamarin, … và

nổi tiếng nhất là Google V8 được sử dụng trong Google Chrome và NodeJS

runtime[5]

Hình 3: Cách hoạt động của Javascript

1.3.4 Ưu điểm và nhược điểm của Javascript

Ưu điểm của Javascript Javascript hỗ trợ đa nền tảng: Javascript hỗ trợ được đa nền tảng, trên tất cả

trình duyệt và thậm chí là các trình duyệt trên thiết bị di động, vậy nên các nhà lậptrình cũng có thể dùng JS để xây dựng những web game hay thậm chí là appmobile[6]

JavaScript nhanh hơn và nhẹ hơn các ngôn ngữ lập trình khác: Người

dùng có thể xác nhận đầu vào (input) người sử dụng trước khi gửi trang tới Server.Điều này làm tiết kiệm lưu lượng tải ở Server, nghĩa là Server của bạn tải ít hơn

Từ đó, JS trở thành ngôn ngữ nhanh và nhẹ hơn các ngôn ngữ lập trình khác[6]

Tăng tương tác cho website: Bạn có thể tạo ra giao diện mà người sử dụng

có thể tương tác dễ dàng bởi vài cú click chuột hoặc chạm vào màn hình Ngoài ra,

JS còn hỗ trợ lập trình các chương trình phản hồi ngay lập tức cho khách hàng: Họkhông cần phải tải lại trang web để thấy họ nhập thiếu thông tin nào đấy[6]

Giao diện phong phú hơn: Bạn có thể sử dụng JavaScript để bao gồm

những mục như các thành phần Drag và Drop (DnD) và các con trượt (Slider) đểcung cấp một Rich Interface (Giao diện giàu tính năng) tới site khách truy cập củabạn Một lần nữa, JavaScript là một ngôn ngữ chương trình thông dịch, nhẹ mà chophép bạn xây dựng khả năng tương tác trong các trang HTML tĩnh

Các công cụ phát triển JavaScript: Một trong những điểm mạnh lớn nhất

của JavaScript là nó không yêu cầu các công cụ phát triển tốn kém Bạn có thể bắtđầu với một bộ biên soạn văn bản đơn giản như Notepad, và vì nó là một ngôn ngữthông dịch bên trong context của một trình duyệt web, bạn không cần phải muamột Compiler (bộ phiên dịch)[6]

Triển khai tập lệnh phía máy khách: Nhờ Javascript, các lập trình viên có

thể dễ dàng viết tập lệnh phía máy khách, tích hợp các tập lệnh một cách liền mạchvào HTML, cho phép website tương tác, trả lời người dùng ngay lập tức và tạo ragiao diện hiển thị phong phú hơn

Đơn giản hóa phát triển ứng dụng web phức tạp: Javascript cho phép

các nhà phát triển đơn giản hóa thành phần của ứng dụng, qua đó đơn giản hóaviệc phát triển các ứng dụng web phức tạp

Thiết kế web responsive: JavaScript cho phép thiết kế web responsive – tối

ưu trên cả máy tính và thiết bị di động chỉ với một bộ mã

Nhiều bộ chuyển đổi: Mặc dù thiếu một số tính năng phức tạp được cung

cấp bởi các ngôn ngữ lập trình hiện đại như Java và C#, JavaScript vẫn có thể dễdàng mở rộng bằng cách sử dụng các bộ chuyển đổi như CoffeeScript, TypeScript,DukeScript và Vaadin

Nhiều thư viện hỗ trợ: Hiện nay có rất nhiều thư viện và frame được viết từ

Javascript như:

- jQuery: Chuyên về hiệu ứng.

- AngularJS: Chuyên xây dựng ứng dụng trang cá nhân.

- ReactJS: Chuyên viết ứng dụng mobile.

- Một số thư viện khác như ExtJS, Sencha Touch,…

JavaScript là ngôn ngữ lập trình dễ học: JavaScript có mã nguồn mở, thư

viện phong phú, lượng người dùng lớn cho nên đây là ngôn ngữ dễ học Hơn nữa,lỗi của JavaScript dễ phát hiện hơn và vì vậy dễ sửa hơn Những nhà lập trình “taymơ” đều có thể thử JS mà không gặp quá nhiều khó khăn

Nhược điểm của Javascript

Không thể xem JavaScript như là một ngôn ngữ chương trình chính thức(full-fledged) Nó thiếu các tính năng quan trọng sau:

- Client-side JavaScript không cho phép đọc và ghi các file, bởi vì lý do bảomật

- JavaScript không được sử dụng cho việc kết nối mạng các ứng dụng bởi

vì không có những hỗ trợ có sẵn

- JavaScript không có bất kỳ khả năng đa luồng hoặc đa xử lý

- Có thể được dùng để thực thi mã độc trên máy tính của người dùng.

- Bởi sự phổ biến, Javascript có thể bị các hacker khai thác lỗ hổng bảo mật

- Có thể bị triển khai khác nhau tùy từng thiết bị dẫn đến việc không đồngnhất Thậm chí, giao diện sẽ là rất khác nhau ở các thiết bị

Không ngôn ngữ lập trình nào là hoàn hảo và không có khuyết điểm BởiJavaScript là ngôn ngữ lập trình phổ biến, được sử dụng rộng rãi trên nền tảngwebsite, vì vậy nó cũng là đối tượng tiềm năng của một lượng lớn hacker,scammer – những kẻ chuyên tìm kiếm lỗ hổng và các lỗi bảo mật và thâm nhập,đánh cắp dữ liệu nội bộ

1.3.5 Sự khác nhau giữa Javascript với các ngôn ngữ lập trình web khác

Bỏ qua một số thiếu sót cần khắc phục thì Javascript vẫn được coi như làmột ngôn ngữ lập trình chính khi lập trình website bởi nó có tính linh hoạt,tương tác, hỗ trợ khá tốt So sánh dựa trên một số yếu tố cơ bản dưới đây để làm

rõ sự khác nhau giữa các ngôn ngữ lập trình web với Javascript:

Javascript với HTML: Đây là một trong số các ngôn ngữ lập trình phổ

biến nhất hiện nay, nó được dùng để xây dựng phần khung chính của một website.HTML được coi là kiến trúc của một căn nhà thì ngôn ngữ Javascript sẽ là các yếu

tố trang trí của căn nhà đó Tất nhiên bạn hoàn toàn có thể xây nhà mà không cóyếu tố trang trí nhưng thế thì trông thật thiếu sót phải không nào? Đó cũng chính là

sự khác nhau cơ bản nhất giữa hai loại ngôn ngữ này Bên cạnh đó, khác vớiJavascript, HTML không thực sự được coi là một ngôn ngữ lập trình, nó không thểdùng để tạo ra các chức năng động mà chỉ được dùng để bố cục và định dạngwebsite[5]

Javascript với CSS: CSS là viết tắt của Cascading Style Sheets – hiểu một

cách đơn giản thì nhiệm vụ của CSS là nó xác định nội dung sẽ xuất hiện chongười dùng thấy như thế nào Ngôn ngữ này ảnh hưởng tới toàn bộ bố cục và giaodiện của website Trong khi đó, ngôn ngữ lập trình JavaScript đảm nhiệm phần lậptrình confirmation boxes, calls-to-action, và thêm thông tin mới vào thông tin hiệncó…[5]

Javascript với PHP: Và cuối cùng là PHP Ngôn ngữ PHP được viết đầy

đủ là Hypertext Preprocessor, nó đảm nhiệm vai trò xử lý các biểu mẫu, lưu file

dữ liệu, trả lại data cho người dùng, thu thập data từ các file và nhiều hơn thế nữa

trong khi JavaScript được thiết kế để tạo các ứng dụng tập trung vào mạng Ngônngữ này được tích hợp nhiều cơ sở dữ liệu khác nhau như Postgre SQL, Oracle,Sybase, SQL và MySQL[5].

1.4 Tổng quan về framework ReactJS

1.4.1 Khái niệm về ReactJS

ReactJS hay react là một thư viện, được viết bằng JavaScript, dùng để xâydựng giao diện người dùng Tính đến thời điểm hiện tại, đã có khoảng 1300developer và hơn 94000 trang web đang sử dụng ReactJS được hiểu nôm na làmột thư viện, có chứa nhiều JavaScript mã nguồn và “cha đẻ” đó chính làFacebook Mục đích chính đó chính là mỗi website sử dụng reactJS thì phảichạy thật mượt hoặc thật nhanh, có khả năng mở rộng cao và đơn giản thực hiện

Về cơ bản, các tính năng của reactJS thường xuất phát từ việc tập trung cácphần mềm riêng lẻ, cho phép các developer có chức năng phá vỡ giao diện củangười dùng từ một cách phức tạp và biến nó trở thành các phần mềm đơn giản Hiểuđơn giản thì các render dữ liệu không chỉ được thực hiện ở vị trí server mà còn ở vịtrí client khi sử dụng reactJS[7]

Hiện nay, reactJS thường được dùng để thiết kế bố cục cho trang web,nhưng hạn chế đó chính là cấu trúc khó Thay vào đó sử dụng JSX và nhúng vàocác đoạn HTML và javascript, bạn sẽ thấy cú pháp dễ hiểu hơn và JSX cũng có thểtối ưu các code khi biên soạn, vừa giúp ích cho người lập trình tiện cho việc biêndịch

1.4.2 Đặc trưng của ReactJS

Virtual DOM: công nghệ DOM ảo giúp tăng hiệu năng cho ứng dụng Việc

chỉ node gốc mới có trạng thái và khi nó thay đổi sẽ tái cấu trúc lại toàn bộ, đồngnghĩa với việc DOM tree cũng sẽ phải thay đổi một phần, điều này sẽ ảnh hưởngđến tốc độ xử lý React JS sử dụng Virtual DOM (DOM ảo) để cải thiện vấn đềnày.Virtual DOM là một object Javascript, mỗi object chứa đầy đủ thông tin cầnthiết để tạo ra một DOM, khi dữ liệu thay đổi nó sẽ tính toán sự thay đổi giữaobject và tree thật, điều này sẽ giúp tối ưu hoá việc re-render DOM tree thật[7]

Hình 4: Thành phần Vitural DOM

Luồng dữ liệu một chiều (Single-way data flow): React sử dụng cơ chế

one-way data binding – luồng dữ liệu 1 chiều Dữ liệu được truyền từ parent đếnchild thông qua props Luồng dữ liệu đơn giản giúp chúng ta dễ dàng kiểm soátcũng như sửa lỗi Với các đặc điểm ở trên, React dùng để xây dựng các ứng dụnglớn mà dữ liệu của chúng thay đổi liên tục theo thời gian Dữ liệu thay đổi thì hầuhết kèm theo sự thay đổi về giao diện[7]

Thành phần JSX: là một dạng ngôn ngữ cho phép viết các mã HTML

trong Javascript Đặc điểm: Nhanh hơn JSX thực hiện tối ưu hóa trong khi biêndịch sang mã Javacsript Các mã này cho thời gian thực hiện nhanh hơn nhiều sovới một mã tương đương viết trực tiếp bằng Javascript An toàn hơn Ngược vớiJavascript, JSX là kiểu statically-typed, nghĩa là nó được biên dịch trước khichạy, giống như Java, C++ Vì thế các lỗi sẽ được phát hiện ngay trong quá trìnhbiên dịch Ngoài ra, nó cũng cung cấp tính năng gỡ lỗi khi biên dịch rất tốt[7]

Thành phần Component: React được xây dựng xung quanh các

component, chứ không dùng template như các framework khác Trong React,chúng ta xây dựng trang web sử dụng những thành phần (component) nhỏ.Chúng ta có thể tái sử dụng một component ở nhiều nơi, với các trạng thái hoặccác thuộc tính khác nhau, trong một component lại có thể chứa thành phần khác.Mỗi component trong React có một trạng thái riêng, có thể thay đổi, và React sẽthực hiện cập nhật component dựa trên những thay đổi của trạng thái Mọi thứReact đều là component Chúng giúp bảo trì mã code khi làm việc với các dự ánlớn Một react component đơn giản chỉ cần một method render Có rất nhiềumethods khả dụng khác, nhưng render là method chủ đạo[7]

Props và State: Props: giúp các component tương tác với nhau,

component nhận input gọi là props, và trả thuộc tính mô tả những gì component