đồ án 1 tìm hiểu flutter

Thường được kết hợp với phát triển Backend, làm việc với logic phía máy chủ và quản lý dữ liệu, để tạo ra một ứng dụng phần mềm hoặc trang web hoàn chỉnh và chức năng.. Thời kỳ Jav

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TINKHOA CÔNG NGHỆ PHẦN MỀM

BÁO CÁO CUỐI KỲ MÔN HỌC ĐỒ ÁN 1

TÌM HIỂU FLUTTER

GIẢNG VIÊN HƯỚNG DẪN: THS NGUYỄN CÔNG HOAN

NHÓM SINH VIÊN THỰC HIỆN: NGUYỄN ĐỨC PHƯƠNG - 21521307

LÂM GIA KHÁNH - 19521678

TP HỒ CHÍ MINH, 2023

ii

LỜI CẢM ƠN

Trong suốt quá trình thực hiện Đồ án 1 với đề tài "Tìm hiểu Flutter", chúng em đã nhận được rất nhiều sự giúp đỡ, đóng góp ý kiến và chỉ bảo nhiệt tình của thầy Th.S Nguyễn Công Hoan, giảng viên hướng dẫn của chúng em

Thầy Hoan đã dành rất nhiều thời gian và tâm huyết để hướng dẫn nhóm em trong suốt quá trình thực hiện đồ án Thầy đã giúp em định hướng đề tài, xây dựng kế hoạch, dàn bài, triển khai các chức năng của hệ thống và hoàn thiện đồ án Thầy cũng đã đưa ra rất nhiều góp ý quý báu về ý nghĩa mà đồ án này mang lại, từ đó cho tụi em động lực quý báu để hoàn thiện đồ án này

Em xin chân thành cảm ơn thầy Hoan đã luôn đồng hành, hỗ trợ và giúp đỡ chúng em trong suốt quá trình thực hiện đồ án Chúng em cũng xin cảm ơn các thầy cô trường Đại học Công nghệ Thông tin đã giảng dạy và truyền đạt cho chúng em những kiến thức quý báu trong suốt quá trình học tập tại trường

Trong quá trình thực hiện đồ án có thể không tránh khỏi được sai sót, chúng em kính mong nhận được sự góp ý, hướng dẫn của quý thầy cô, đặc biệt là thầy Hoan để có thể hoàn thiện đồ án hơn nữa, và em cũng mong muốn được tiếp tục đồng hành cùng thầy Hoan trong những đồ án tiếp theo

Chúng em xin gửi lời cảm ơn chân thành nhất đến thầy

TP.HCM, ngày 30 tháng 12 năm 2023Nhóm sinh viên thực hiện

Nguyễn Đức Phương Lâm Gia Khánh

1.2.1 Thời kỳ desktop applications 3

1.2.2 Thời kỳ web applications 3

1.2.2.1 Thời kỳ JavaScript 3

1.2.2.2 Sự phát triển của CSS 5

1.2.2.3 Cách mạng jQuery 6

1.2.3 Thời kỳ mobile applications 7

1.2.4 Thời kỳ cross platform applications 8

1.2.5 Thời kỳ progressive web applications 9

1.2.6 Thời kỳ responsive design 10

1.2.7 Framework trỗi dậy 10

1.4.2 Các framework Frontend phổ biến 14

1.5.Các xu hướng công nghệ phổ biến 14

1.5.1 Artificial Intelligence và Machine Learning 14

1.5.2 Single-Page Application 15

1.5.3 Progressive Web Apps 15

1.5.4 Serverless Architecture 16

iv

1.5.5 Server-Side Rendering 16

1.5.6 Low Code Development 18

1.5.7 Micro Front End Architecture 19

1.5.8 GraphQL 19

1.5.9 Mobile-First Approach 21

1.5.10.Voice User Interface 21

Chương 2.CÁC KIẾN TRÚC PHỔ BIẾN 23

2.1.MVC 23

2.1.1 Khái niệm 23

2.1.2 Cấu trúc mô hình MVC 23

2.1.3 Hoạt động của mô hình MVC 23

2.1.4 Lợi ích của việc sử dụng mô hình MVC 25

2.1.5 Các ngôn ngữ và framework sử dụng mô hình MVC 26

2.1.6 Tổng kết 27

2.2.MVP 27

2.2.1 Khái niệm 27

2.2.2 Cấu trúc của mô hình MVP 27

2.2.3 Hoạt động của mô hình MVP 28

2.2.4 Sự khác biệt giữa MVC và MVP 28

2.2.5 Lợi ích của việc sử dụng mô hình MVP 30

2.2.6 Các ngôn ngữ và framework sử dụng mô hình MVP 30

2.2.7 Tổng kết 30

2.3.MVVM 31

2.3.1 Khái niệm 31

2.3.2 Cấu trúc của mô hình MVVM 31

2.3.3 Hoạt động của mô hình MVVM 31

v

2.3.4 Sự khác biệt giữa MVC/MVP và MVVM 32

2.3.5 Lợi ích của việc sử dụng mô hình MVVM 33

2.3.6 Các ngôn ngữ và framework sử dụng mô hình MVVM 33

2.3.7 Tổng kết 33

2.4.Component-based 34

2.4.1 Khái niệm 34

2.4.2 Cấu trúc của mô hình component-based 34

2.4.3 Hoạt động của mô hình component-based 35

2.4.4 Lợi ích của việc sử dụng mô hình component-based 35

2.4.5 Các ngôn ngữ và framework sử dụng mô hình component-based 35

2.4.6 Tổng kết 36

2.5.Micro Frontend 36

2.5.1 Khái niệm 36

2.5.2 Cấu trúc của mô hình micro Frontend 36

2.5.3 Hoạt động của mô hình micro Frontend 36

2.5.4 Lợi ích của việc sử dụng mô hình micro Frontend 37

2.5.5 Các công nghệ và framework sử dụng mô hình micro Frontend 37

2.5.6 Tổng kết 37

2.6.Kiến trúc Flux 38

2.6.1 Khái niệm 38

2.6.2 Cấu trúc của kiến trúc Flux 38

2.6.3 Hoạt động của kiến trúc Flux 40

2.6.4 Lợi ích của việc sử dụng kiến trúc Flux 40

2.6.5 Các công nghệ và framework sử dụng kiến trúc Flux 40

2.6.6 Tổng kết 40

2.7.Kiến trúc Redux 41

vi

2.7.1 Khái niệm 41

2.7.2 Cấu trúc của kiến trúc Redux 41

2.7.3 Hoạt động của kiến trúc Redux 42

2.7.4 So sánh kiến trúc Redux so với kiến trúc Flux 43

2.7.5 Các công nghệ và framework sử dụng kiến trúc Redux 43

2.7.6 Tổng kết 43

Chương 3.CÁC VẤN ĐỀ CƠ BẢN CỦA FRONTEND 45

3.1.Hiển thị UI (UI Rendering) 45

3.1.1 Định nghĩa 45

3.1.2 Phương thức xử lý 45

3.1.3 UI Rendering trong React 45

3.1.3.1 React Components 45

3.1.3.2 React Virtual DOM 46

3.1.4 UI Rendering trong Flutter 47

3.1.4.1 Flutter Widget 47

3.1.4.2 Flutter Render 47

3.2.Tương tác UI 48

3.2.1 Giải quyết vấn đề 48

3.2.2 Tương tác trong React 49

3.2.3 Tương tác trong Flutter 50

3.3.Form Validation 51

3.3.1 Vấn đề 51

3.3.2 Cách giải quyết 51

3.3.3 Form Validation với React 52

3.3.4 Form Validation với Flutter 54

3.4.Tạo Frontend động (dynamic form) 55

vii

3.4.1 Mô tả 55

3.4.2 Công nghệ BEEKAI 55

3.4.2.1 Form Builder 56

3.4.2.2 Xây dựng form với nhiều bước (multi-step form builder) 58

3.4.2.3 Theo dõi hồ sơ (Submission) 60

3.4.3 Công nghệ React-hook 61

3.4.3.1 Khái niệm 61

3.4.3.2 Các loại React Hooks 61

Chương 4.KHÁI QUÁT VỀ FLUTTER 63

4.7.1 Refactor mã thành Widget thay vì phương thức 71

4.7.2 Kiểm soát chi phí phương thức build 72

4.7.3 Sử dụng state management 72

4.7.4 Xác định rõ ràng kiến trúc 72

4.7.5 Tuân theo Dart style guide 74

4.7.6 Lựa chọn Package kỹ càng 74

viii

4.7.7 Hạn chế sử dụng MediaQuery/LayoutBuilder 74

4.7.8 Chỉ sử dụng Streams khi cần thiết 74

4.7.9 Sử dụng từ khóa const khi có thể 75

4.7.10.Giảm thiểu các hoạt động tốn kém 75

4.7.11.Sử dụng lazy builder 75

4.7.12.Giảm thiểu intrinsic operations 76

4.7.13.Sử dụng if thay vì conditional expression 76

4.7.14.Sử dụng ?? và ? operators 76

4.7.15.Pitfalls 77

4.8.Use cases 78

4.8.1 Trường hợp nên sử dụng 78

4.8.1.1 Phát triển ứng dụng di động đa nền tảng 78

4.8.1.2 Phát triển Web App 78

4.8.1.3 Phát triển ứng dụng yêu cầu ổn định cao 78

4.8.1.4 MVP development 78

4.8.2 Trường hợp không nên sử dụng 79

4.8.2.1 Ứng dụng có chức năng phụ thuộc cao đến hệ điều hành 79

4.8.2.2 Áp dụng thực tế tăng cường (Augmented Reality) 79

4.8.2.3 Khả năng Web hạn chế 79

4.9.Study cases 79

4.9.1 Social networking 79

4.9.2 Ecommerce platforms 80

4.9.3 Banking và Decentralized exchanges 82

Chương 5.SO SÁNH FLUTTER VỚI REACT NATIVE 84

5.1.Ngôn ngữ lập trình 84

5.1.1 Dart (Flutter) 84

5.7.Hỗ trợ tự động hóa Build và Release 93

5.7.1 Flutter Build and Release 93

5.7.2 React Native Build and Release 94

5.7.3 So sánh 94

Chương 6.PHÂN TÍCH THIẾT KẾ ỨNG DỤNG 96

x

6.1.Hiện trạng vấn đề 96

6.1.1 Hiện trạng 96

6.1.2 Phương hướng giải quyết 96

6.2.Phân tích yêu cầu ứng dụng 96

6.3.Phân tích thiết kế hệ thống 97

6.3.1 Biểu đồ Use Case 97

6.3.1.1 Danh sách actors 99

6.3.1.2 Danh sách Use Case 99

6.3.2 Đặc tả Use Case 100

6.3.2.1 Đặc tả Use Case đăng ký 100

6.3.2.2 Đặc tả Use Case đăng nhập 101

6.3.2.3 Đặc tả Use Case đăng xuất 102

6.3.2.4 Đặc tả Use Case đăng nhập với Google 103

6.3.2.5 Đặc tả Use Case xem danh sách bài đăng 105

6.3.2.6 Đặc tả Use Case thêm bài đăng 106

6.3.2.7 Đặc tả Use Case yêu thích bài đăng 107

6.3.2.8 Đặc tả Use Case xoá bài đăng 108

6.3.2.9 Đặc tả Use Case xem danh sách bình luận 110

6.3.2.10 Đặc tả Use Case thêm bình luận 111

6.3.2.11 Đặc tả Use Case xoá bình luận 112

6.3.2.12 Đặc tả Use Case chỉnh sửa thông tin tài khoản 113

6.3.3 Mô hình cơ sở dữ liệu 114

6.4.Mô tả giao diện ứng dụng 116

6.4.1 Giao diện đăng ký 116

6.4.2 Giao diện đăng nhập 117

6.4.3 Giao diện trang chủ 118

xi

6.4.4 Giao diện danh sách bình luận 120

6.4.5 Giao diện thêm bài đăng 122

6.4.6 Giao diện quản lý thông tin tài khoản 124

6.5.Cài đặt ứng dụng 126

xii

DANH MỤC HÌNH

Hình 1.1 HTML, CSS, JavaScript tạo nên trang web 2

Hình 1.2 Cách AJAX hoạt động 4

Hình 1.3 Các tính năng của NodeJS 5

Hình 1.4 Một số phương thức trong jQuery 7

Hình 1.5 Flutter 8

Hình 1.6 React Native 9

Hình 1.7 Luồng hoạt động của PWA 10

Hình 1.8 Số lượng framework đồ sộ khi chỉ mới tính riêng cho JS 11

Hình 1.9 IDE và text editor 12

Hình 1.10 Đa dạng ngôn ngữ lập trình 13

Hình 1.11 Server-side rendering 18

Hình 1.12 GraphQL 21

Hình 2.1 Mô phỏng luồng hoạt động của MVC 25

Hình 2.2 Các ngôn ngữ và framework sử dụng MVC 26

Hình 2.3 Mô hình MVP 29

Hình 2.4 Mô hình MVC 29

Hình 2.5 Cấu trúc mô hình MVVM 31

Hình 2.6 Các thành phần của kiến trúc Flux 38

Hình 2.7 Cấu trúc của kiến trúc Redux 41

Hình 3.1 React thể hiện component thành view 46

Hình 3.2 React Virtual DOM 47

Hình 3.3 Quy trình render Widget của Flutter 48

Hình 3.4 Mẫu mã lệnh sử dụng thư viện yup và react-hook-form 52

Hình 3.5 Mẫu mã lệnh sử dụng formik 53

Hình 3.6 Mẫu mã lệnh sử dụng react-hook-form 54

Hình 3.7 Mẫu mã lệnh sử dụng TextFormField 54

Hình 3.8 Gói form_bloc hỗ trợ cho Flutter 55

Hình 3.9 BEEKAI 55

Hình 3.10 Tổ chức cấu trúc trang và các form câu hỏi bằng bảng điều khiển (control panel) và phương thức drag-and-drop 56

Hình 3.14 Flow control của BEEKAI 59

Hình 3.15 BEEKAI có khả năng duy trì khả năng đáp ứng người dùng trên mọi nền tảng 59

Hình 3.16 Kết quả phân tích của BEEKAI 60

Hình 3.17 Giao diện theo dõi hồ sơ của BEEKAI 60

Hình 3.18 Xuất bản dữ liệu theo dõi người dùng 61

Hình 4.1 Ngôn ngữ Dart 63

Hình 4.2 Tóm tắt lịch sử Flutter 65

Hình 4.3 Kiến trúc Flutter 66

Hình 4.4 Mô tả roadmap của Flutter 71

Hình 4.5 Kiến trúc BLOC 73

Hình 4.6 Kiến trúc Provider sử dụng ChangeNotifier 73

Hình 4.7 Ví dụ sử dụng lazy builder 75

Hình 4.8 Ví dụ sử dụng toán tử ?? 77

Hình 4.9 Hạn chế của Flutter cho Web 79

Hình 4.10 Tencent Cloud Chat sử dụng Flutter 80

Hình 4.11 Chỉ số thành công của nhóm phát triển khi sử dụng Flutter 80

Hình 4.12 Ứng dụng Xianyu sử dụng Flutter 81

Hình 4.13 Chỉ số thành công của nhóm phát triển eBay 81

Hình 4.14 Ứng dụng eBay Motors 82

Hình 4.15 Chỉ số thành công của nhóm phát triển Nubank 83

Hình 4.16 Ứng dụng Nubank liên kết với thẻ vật lý 83

Hình 5.1 Skia – Flutter high performance rendering engine 84

Hình 5.2 Mô tả kiến trúc 2 luồng của React Native 85

Hình 5.3 React Native giao tiếp với nền tảng native thông qua cơ chế cầu nối Bridge 85

Hình 5.4 Mô tả Widget thông qua Widget tree của Flutter inspector 86

xiv

Hình 5.5 React Native lấy cảm hứng component từ React, chỉ khác môi trường chạy

ứng dụng 87

Hình 5.6 Ví dụ ứng dụng React Native 88

Hình 6.1 Sơ đồ Use Case tổng quát 97

Hình 6.2 Sơ đồ Use Case cho module bài đăng 98

Hình 6.3 Sơ đồ Use Case cho module bình luận 98

Hình 6.4 Giao diện đăng ký 116

Hình 6.5 Giao diện đăng nhập 117

Hình 6.6 Giao diện trang chủ 118

Hình 6.7 Giao diện trang chủ khi mở menu mở rộng của bài đăng 119

Hình 6.8 Giao diện danh sách bình luận 120

Hình 6.9 Giao diện danh sách bình luận khi mở menu mở rộng của bình luận 121

Hình 6.10 Giao diện thêm bài đăng 122

Hình 6.11 Giao diện thêm bài đăng khi mở menu mở rộng chọn ảnh 123

Hình 6.12 Giao diện quản lý thông tin tài khoản 124

Hình 6.13 Giao diện quản lý thông tin tài khoản khi mở menu mở rộng chọn ảnh 125

xv

DANH MỤC BẢNG

Bảng 5.1 So sánh hiệu suất của Flutter và React Native 88

Bảng 6.1 Danh sách actors 99

Bảng 6.2 Danh sách Use Case 99

Bảng 6.3 Đặc tả Use Case đăng ký 100

Bảng 6.4 Đặc tả Use Case đăng nhập 101

Bảng 6.5 Đặc tả Use Case đăng xuất 102

Bảng 6.6 Đặc tả Use Case đăng nhập với Google 103

Bảng 6.7 Đặc tả Use Case xem danh sách bài đăng 105

Bảng 6.8 Đặc tả Use Case thêm bài đăng 106

Bảng 6.9 Đặc tả Use Case yêu thích bài đăng 107

Bảng 6.10 Đặc tả Use Case xoá bài đăng 109

Bảng 6.11 Đặc tả Use Case xem danh sách bình luận 110

Bảng 6.12 Đặc tả Use Case thêm bình luận 111

Bảng 6.13 Đặc tả Use Case xoá bình luận 112

Bảng 6.14 Đặc tả Use Case chỉnh sửa thông tin tài khoản 113

Bảng 6.15 Danh sách các tập (NoSQL Collections) 114

Bảng 6.16 Tập users 115

Bảng 6.17 Tập posts 115

Bảng 6.18 Tập comments 115

Bảng 6.19 Mô tả giao diện đăng ký 116

Bảng 6.20 Mô tả giao diện đăng nhập 117

Bảng 6.21 Mô tả giao diện trang chủ 119

Bảng 6.22 Mô tả giao diện danh sách bình luận 121

Bảng 6.23 Mô tả giao diện thêm bài đăng 123

Bảng 6.24 Mô tả giao diện quản lý thông tin tài khoản 126

1

TÓM TẮT ĐỒ ÁN

Đồ án tập trung vào tìm hiểu và nghiên cứu về Flutter nói riêng và nhánh Frontend nói riêng, một trong những ngành nghề phổ biến nhất trong cộng đồng lập trình viên hiện nay

Đồ án tập trung nghiên cứu về quá trình phát triển của ngành Frontend, các xu hướng phát triển hiện nay như tích hợp AI, AR, responsive application và xu thế chuyển sang các ứng dụng chạy đa nền tảng

Đồ án cung cấp một cái nhìn rõ hơn về những điều cần lưu ý trong quá trình xây dựng một ứng dụng xét về mặt Frontend, những kiến trúc phổ biến và những best practice để tối ưu hiệu suất của ứng dụng Ở cuối đồ án là một ứng dụng mạng xã hội đơn giản, mục đích chính để thể hiện khả năng chạy đa nền tảng của Flutter

Phát triển front-end thường bao gồm sự kết hợp của các công nghệ, bao gồm HTML để cấu trúc nội dung, CSS để thiết kế và bố trí và JavaScript để thêm tính tương tác và chức năng vào các trang web Các nhà phát triển front-end làm việc để đảm bảo rằng giao diện người dùng thân thiện, hấp dẫn mắt và phản hồi trên các thiết bị và kích thước màn hình khác nhau

Phát triển Frontend là một khía cạnh quan trọng của phát triển web và phần mềm, vì nó ảnh hưởng trực tiếp đến cảm nhận của người dùng về chất lượng và khả năng sử dụng của ứng dụng Thường được kết hợp với phát triển Backend, làm việc với logic phía máy chủ và quản lý dữ liệu, để tạo ra một ứng dụng phần mềm hoặc trang web hoàn chỉnh và chức năng

Hình 1.1 HTML, CSS, JavaScript tạo nên trang web

3

1.2 Lịch sử phát triển

1.2.1 Thời kỳ desktop applications

Trong khoảng những năm của thập niên 1980 cho tới những năm đầu của thập niên 2000, với việc internet còn chưa thực sự phát triển và sự phổ biến của máy tính cá nhân, desktop app chiếm thế thượng phong trong thị trường ứng dụng với tốc độ tăng chóng mặt Desktop app giúp cho người dùng không phải dựa vào kết nối mạng nghèo nàn thời đó mà chỉ dựa vào sức mạnh phần cứng của máy tính cá nhân để thực hiện các tác vụ hằng ngày như soạn thảo văn bản, chỉnh sửa hình ảnh, v.v…

1.2.2 Thời kỳ web applications 1.2.2.1 Thời kỳ JavaScript

Vào năm 1995, Bredan Eich phát triển ngôn ngữ JavaScript khi làm việc tại Netscape, được thiết kế ban đầu là một ngôn ngữ nhẹ chạy ở trình duyệt, tương tác với DOM để thêm vào trang web tính tương tác như nhập dữ liệu, xác thực dữ liệu Tuy nhiên lúc này vẫn vẫn là các trang web tĩnh, tương tác với server và chờ đợi một file HTML mới trả về

Vào những năm tiếp theo, Netscape cho ra đời Netscape Navigator 2.0, là trình duyệt đầu tiên hỗ trợ Javascript, trong khi đó Microsoft giới thiệu một phiên bản của chính họ là JScript hoạt động trên trình duyệt IE Điều này khiến cho việc phát triển, thực thi các đoạn mã Javascript trên các trình duyệt khác nhau cũng khác nhau, sự đồng bộ của ngôn ngữ là chưa có khiến cho Javascript chưa được phát triển mạnh mẽ và sử dụng rộng rãi

Tới năm 1997, chuẩn ECMAScript được giới thiệu để chuẩn hoá Javascript và đảm bảo khả năng tương thích giữa các trình duyệt khác nhau Chuẩn ECMAScript định nghĩa những tính năng cốt lõi của Javascript và vẫn được phát triển qua nhiều phiên bản sau

Sau sự ra đời của chuẩn ECMAScript, từ những năm 1990 đến đầu 2000, Javascript được phát triển rộng rãi và mạnh mẽ trong cộng đồng thông qua các tính năng của nó Javascript mang lại một luồng gió mới khi nó có thể được sử dụng ở phía trình duyệt để xác thực form, cập nhật DOM, làm các hiệu ứng

Tới đầu năm 2000, kỹ thuật AJAX (Asynchronous JavaScript and XML), một trong những kĩ thuật quan trọng trong quá trình phát triển web, đã tạo nên một cuộc cách

4

mạng trong quá trình phát triển web application Kỹ thuật này thay thế cách một trang web thông thường lấy dữ liệu từ phía máy chủ đó là phải tải lại cả trang web, hay có thể xem như là đồng bộ bằng phương pháp mới, cho phép thực hiện truyền tải dữ liệu một cách bất đồng bộ Tức là thay vì phải chờ máy chủ trả về file HTML mới, làm cho quá trình tương tác của user bị giáng đoạn thì giờ đây trang web vẫn có thể tương tác được trong khi chờ dữ liệu trả về từ phía server, sau khi nhận dữ liệu, kỹ thuật này cho phép Javascript áp dụng dữ liệu này và thay đổi DOM để hiển thị lên trên trình duyệt, giúp cho trải nghiệp của người dùng mượt mà hơn, không bị giáng đoạn như trước

Hình 1.2 Cách AJAX hoạt động

Tới những năm tiếp theo, nhiều frameworks và thư viện ra đời để đơn giản hoá việc lập trình web bằng Javascript Đặc biệt phải kể đến jQuery được giới thiệu năm 2006 Sau sự ra đời của jQuery, nhiều framework hiện đại khác được ra đời, sớm nhất là Angular của Google giúp cho việc phát triển web càng ngày càng trở nên hiện đại, dễ dàng và nhiều tác vụ nâng cao hơn cũng được hiện thực hoá, làm cho trang web càng ngày càng có tính tương tác cao, bắt mắt với người dùng Lúc này trong cộng đồng lập trình web phân ra hai nhánh gồm Frontend và Backend, Frontend sẽ sử dụng JS để phát triển còn Backend sử dụng các ngôn ngữ server từ trước như C#, Java

Tới năm 2009, với sự ra đời của Node.js, đã đánh dấu bước ngoặt rằng JS là một ngôn ngữ fullstack khi có thể được sử dụng ở phía server Node.js là một môi trường

Trong suốt từ cuối thập niên 1990 và đầu thập niên 2000, các lập trình viên web đối diện với vấn đề tương tự với javascript, đó là css hoạt động trên các trình duyệt khác nhau một cách khác nhau

Từ giữa thập niên 2000 cho tới nay, CSS3 ra đời mà giới thiệu nhiều tính năng mới, tính năng nâng cao như bo góc cho viền, màu gradients, cung cấp từ khoá định nghĩa các hoạt hoạ chuyển động trên trang web, cung cấp các từ khoá để định nghĩa các media-query phục vụ cho việc phát triển trang web có thể hiển thị trên nhiều trình duyệt với độ rộng màn hình khác nhau, cũng như giới thiệu grid-layout, flexbox layout

6

Ngày nay, nhiều CSS frameworks ra đời, ví dụ như Bootstrap, Tailwinds hoặc các thư viện CSS Những framworks và thư viện này cung cấp những phần tử, components sẵn có giúp cho việc phát triển trang web có giao diện bắt mắt ngày càng dễ dàng hơn, mang lại trải nghiệm tốt hơn cho người dùng

1.2.2.3 Cách mạng jQuery

Chuẩn ECMAScript chỉ định nghĩa các phương thức cốt lõi của Javascript, các trình duyệt vẫn xử lí những tác vụ như cập nhật DOM, thực hiện AJAX request, xử lí sự kiện một cách riêng biệt theo tiêu chuẩn của nó, vì vậy jQuery đã ra đời để xử lí vấn đề nhức nhối này JQuery cung cấp các phương thức ở mức nâng cao, trừu tượng để lập trình viên xử lí các tác vụ nêu trên, trừu tượng hoá sự khác biệt giữa các trình duyệt, nhờ đó mà các dòng lệnh Javascript giữa các lập trình viên, giữa các mã nguồn trở nên đồng bộ hơn, các lập trình viên cũng không cần quan tâm các trình duyệt xử lí các dòng lệnh theo các cách khác nhau khi mà thư viện jQuery đã hỗ trợ việc đó cho họ Thư viện này còn đơn giản hoá các câu lệnh truy vấn DOM, thực hiện AJAX requets; giúp cho các tác vụ như cập nhật phần tử, thêm sửa xoá CSS và xử lý sự kiện cũng trở nên ngắn gọn Cụ thể hơn, khi viết một câu lệnh jQuery để thực hiện truy vấn DOM, thư viện này sẽ dựa vào trình duyệt đang chạy câu lệnh jQuery mà thực thi câu lệnh JS được hỗ trợ tương ứng JQuery đã tạo nên một cuộc cách mạng thật sự khi mà với jQuery và AJAX, việc lập trình Frontend đã trở nên dễ dàng hơn, lập trình viên với hai công cụ mạnh mẽ này có thể lập trình được hầu hết các tính năng được yêu cầu vào thời gian đó Nhờ vậy mà jQuery ngày càng được sử dụng rộng rãi, cộng đồng sử dụng ngày càng tăng và trở thành một cuộc cách mạng thật sự trong cộng đồng phát triển web

Trong những năm từ 1973 tới 2000, những sản phẩm điện thoại thương mại đầu tiên xuất hiện, kéo theo đó là những ứng dụng đơn sơ hạn chế trên những mẫu điện thoại này như lịch, máy tính, Những ứng dụng này bị giới hạn nhiều về mặt tính năng và được thiết kế riêng biệt cho một hệ điều hành cụ thể nào đó

Cho đến năm 2008, Apple cho ra mắt App Store và một năm sau đó Android Market được trình làng đã đánh dấu một bước cách mạng trong việc phân phối các ứng dụng dành cho thiết bị di động tới tay người dùng

Trong một khoảng thời gian dài sau đó là thời kì mà native app, những phần mềm được phát triển riêng cho một hệ điều hành, phát triển mạnh mẽ Trong thời gian này có hai hệ điều hành chính phổ biến hơn cả là iOS và Android Để phát triển ứng dụng dành cho iOS, các lập trình viên sẽ sử dụng ngôn ngữ Objective-C và sau này là Swift và lập trình trên Xcode Còn về phía ứng dụng Android, ban đầu sẽ sử dụng ngôn ngữ Java, sau này sử dụng Kotlin và lập trình trên Android Studio IDE Các ứng dụng lúc này đã có thể truy cập trực tiếp tới phần cứng của thiết bị như camera, micro, GPS, điều này giúp cho các ứng dụng native càng ngày càng có nhiều tính năng tiện lợi hỗ trợ người dùng một cách mạnh mẽ Thêm vào đó, các ứng dụng native cũng được tối ưu tốt hơn so với các loại app khác, tận dụng tối đa sức mạnh phần cứng của các thiết bị di động, mang lại thời gian phản hồi gần như ngay lập tức, tối ưu dung lượng sử dụng Ngoài ra, một điều giúp cho các ứng dụng này ngày càng được chấp thuận mạnh mẽ đó là tính bảo mật khi mà các ứng dụng muốn được đưa lên các cửa hàng phải tuân theo những hướng dẫn được đề ra trước, qua đó đảm bảo các ứng dụng này không gây hại cho máy người dùng

Trong những năm tiếp theo, nhờ sự phát triển mạnh mẽ của native app, lĩnh vực có mặt của native app càng ngày càng mở rộng và đa dạng, bao quát cuộc sống của con người

8

1.2.4 Thời kỳ cross platform applications

Trong quá trình phát triển native app, các lập trình viên phải đối mặt với vấn đề một bộ mã nguồn chỉ dành cho một hệ điều hành nhất định Điều này vừa khiến các lập trình viên muốn phát triển ứng dụng cho cả iOS và Android phải học 2 ngôn ngữ cũng như các API khác nhau đồng thời cũng khiến cho các doanh nghiệp phải đối mặt vói vấn đề chi phí khi phải vận hành hai nhóm riêng biệt để phát triển, vận hành và bảo trì

Trong những nỗ lực đầu tiên để giải quyết vấn đề này, các nhà lập trình viên đã ững dụng những công nghệ web (HTML, CSS, JavaScript) để tạo nên các ứng dụng hoạt động được trên nhiều hệ điều hành vì thông qua giao diện web Sau này có 2 phương thức để phát triển, đầu tiên là hybrid app kết hợp các tính năng của native app trong khi vẫn hiển thị giao diện dựa trên công nghệ web, thứ 2 là dựa hoàn toàn vào webapp và giao tiếp với thiết bị native thông qua trình duyệt

Sau này là sự ra đời của các cross-platform framwork như Xamarin (2011) sử dụng C#, React Native (2015) sử dụng JS với React và Flutter (2018) sử dụng Dart giúp phát triển các ứng dụng cross-platform có hiệu năng cao

Hình 1.5 Flutter

Năm 2015 đánh dấu lần đầu tiên cụm từ PWA được nhắc đến bởi Frances Berriman và Alex Russell

Những nguyên tắc chính của PWA gồm khả năng hoạt động ngay cả khi không có hoặc kết nối mạng chậm, cung cấp trải nghiệm tốt hơn cho người dùng Tiếp theo đó là giao diện có thể hoạt động trên nhiều màn hình có kích thước khác nhau và cuối cùng là đảm bảo các tính năng cơ bản đồng thời cung cấp thêm những tính năng nâng cao phù hợp với các trình duyệt khác nhau

Những tính năng chính của PWA gồm khả năng hoạt động offline, cung cấp các tính năng giống với native app như đẩy thông báo, routing trong app và hiệu suất cao cho các ứng dụng này

Các công nghệ sử dụng để tạo nên PWA gồm service workder, một dòng lệnh chạy ngầm để quản lí các kết nối mạng, cache lại nội dung trang web; một tập tin JSON tên Manifest để định nghĩa các thông tin cho ứng dụng như tên, icon, để hiển thị ứng dụng lúc tải về

1.2.7 Framework trỗi dậy

Trong những ngày đầu của việc phát triển ứng dụng web, với những công nghệ đời đầu như HTML, CSS, JS, việc phát triển những ứng dụng phức tạp tốn rất nhiều thời gian Từ đó nhu cầu về framework phát triển web cũng tăng lên

Những framework server-side đầu tiên gồm các framework như CodeIgniter (2006), CakePHP (2005), và Zend Framework (2006) cung cấp cho các nhà phát triển PHP các

Những framework này mang lại nhiều lợi ích cho các nhà lập trình viên bao gồm cung cấp sẵn những công cụ để xây dựng trang web giúp tiết kiệm thời gian phát triển ứng dụng, làm tăng tính mở rộng và bảo trì của ứng dụng và có một cộng đồng đông đảo sử dụng framework hỗ trợ lẫn nhau

Hình 1.8 Số lượng framework đồ sộ khi chỉ mới tính riêng cho JS 1.3 Công nghệ Frontend

1.3.1 Các công cụ

Ngày nay, công việc lập trình Frontend ngày càng trở nên thuận tiện cho các lập trình viên nhờ vào các công cụ được phát triển nhằm mục đích tiết kiệm thời gian, mang lại cú pháp, cách dùng thân thiện với con người hơn Các công cụ có thể kể đến như IDE như Visual Studio, đóng gói và cung cấp những trình biên dịch hoặc thông dịch các dòng lệnh để chạy ứng dụng, ngoài ra còn có các tính năng khác như trình gỡ lỗi, các trình quản lý đối tượng

12

Text editor, cung cấp ít tính năng hơn so với IDE và thường cần các extension bên ngoài để chạy ứng dụng Mục đích chính của text editor thường chỉ để soạn thảo các dòng lệnh

Các công cụ quản lý các thư viện bên thứ ba, các module, các nudget đi kèm như NPM, Yarn

Công cụ tối ưu hoá quá trình quản lý các phiên bản của mã nguồn như Git, SVN giúp bảo vệ mã nguồn khỏi các sơ suất làm mất mát dòng lệnh, quản lý các phiên bản của phần mềm được ra mắt với người dùng

Các công cụ để build và bundler mã nguồn như Webpack, Turbopack, Parcel được sử dụng để bunble và build mã nguồn (ví dụ như Javascript, CSS) để tối ưu hoá hiệu suất, tăng tốc độ tải trang, giảm kích thước trang cần tải về trình duyệt

Hình 1.9 IDE và text editor 1.3.2 Các ngôn ngữ lập trình và framework

Các ngôn ngữ lập trình được dùng phổ biến trong việc lập trình Frontend như PHP, Ruby, Java, C# trong thời kì đầu, sau này là sự xuất hiện của Javascript Với sự phát triển của công nghệ, các framework ra đời như Laravel, CakePHP cho ngôn ngữ PHP, Ruby on Rails, Spring cho Java, NET cho C#, Angular, VueJS, NextJS, Svelte, Solid cho Javasript

Các framework được sinh ra nhằm mục đích đơn giản hoá các bước cấu hình cho dự án, các hàm gọi dùng để render giao diện người dùng Việc sử dụng framework giúp cho bộ mã nguồn được cấu trúc theo một mẫu cấu trúc thư mục sẵn có, cung cấp hướng dẫn cho các lập trình nhằm đảm bảo tính thống nhất giữa các thành viên, đảm bảo khả năng bảo trì và nâng cấp của dự án Các framework còn giúp cho ứng dụng chạy mượt

1.4 Các Frontend framework 1.4.1 Định nghĩa

Framework là một tập các dòng lệnh được viết sẵn theo một tiêu chuẩn cụ thể, các thư viện, công cụ dùng để phát triển phần mềm Các framework tập trung vào việc tối ưu quá trình phát triển bằng cách cung cấp nhũng thành phần có thể tái sử dụng, áp dụng design-patern và một tập các luật để lập trình viên dựa theo đó để phát triển phần mềm một cách hiệu quả nhất Frontend framework cung cấp một cấu trúc dựng sẵn để xây

14

dựng giao diện và nâng cao trải nghiệm của người dùng khi sử dụng website hoặc webapp

1.4.2 Các framework Frontend phổ biến

a) NextJS: Được phát triển bởi Vercel dựa trên thư viện React, kế thừa cấu trúc component-based, tối ưu và cung cấp tính năng server-rendering để tối ưu hoá cho SEO cũng như giảm thời gian cần thiết để tải trang web

b) Angular 2: Được phát triển bởi Google, mà một phiên bản nâng cấp của Angular Cũng sử dụng kiến trúc component-based đồng thời cung cấp nhiều tính năng tối ưu cho trang web như tree-saking, dependency injection và data binding

c) VueJS: VueJS là một framework tương tự ReactJS, có điểm khác biệt ở cách sử dụng data binding, thay vì 1-way mà là 2-way Điều này giúp cho việc tiếp cận framework này trở nên dễ dàng

d) Bootstrap: Bootstrap là một CSS framework phát triển bởi Twitter hay X Framwork cung cấp một loạt những component được dựng sẵn, các style CSS và layout dựng sẵn giúp xây dựng trang web responsive Bootstrap thường được dùng với React hoặc AngularJS

e) TailwindCSS: là một CSS framework cung cấp những class dựng sẵn giúp nhanh chóng xây dựng những component mà lập trình viên có thể tự tuỳ chỉnh hiển thị

1.5 Các xu hướng công nghệ phổ biến

1.5.1 Artificial Intelligence và Machine Learning

Artificial Intelligence (AI) đề cập đến việc mô phỏng trí thông minh của con người trong các máy tính được lập trình để suy nghĩ và mô phỏng hành vi của con người AI bao gồm một loạt các kỹ thuật như giải quyết vấn đề, học tập, nhận diện ngôn ngữ và đưa ra quyết định

Machine Learning (ML) là một nhánh của AI liên quan đến việc phát triển các thuật toán và mô hình thống kê cho phép máy tính học hỏi và cải thiện từ kinh nghiệm, những quá trình học hỏi trước mà không cần được lập trình rõ ràng Thuật toán ML sử dụng dữ liệu để xác định mẫu, đưa ra dự đoán hoặc tối ưu hóa quy trình

AI và ML được áp dụng vào front-end thông qua nhiều tính năng như hệ thống gợi ý, cá nhân hoá dữ liệu người dùng, chat bot, gợi ý dữ liệu nhập vào, tự động tạo nội dung…

15

1.5.2 Single-Page Application

SPA là viết tắt của Single Page Application, một loại ứng dụng web hoạt động trong một trang web duy nhất Không giống như các trang web truyền thống nơi mỗi tương tác có thể dẫn đến việc tải một trang mới từ máy chủ, SPA tải một lần ban đầu và cập nhật nội dung động khi người dùng tương tác với ứng dụng

Các đặc điểm chính của SPA bao gồm:

a) Dynamic content loading: SPA sử dụng JavaScript để tải nội dung ở phía trình duyệt, mang lại trải nghiệm người dùng mượt mà và phản hồi nhanh hơn mà không cần tải lại toàn trang

b) Client-side rendering: Việc hiển thị nội dung và thao tác dữ liệu xảy ra ở phía client) bằng cách sử dụng các thư viện và framework JavaScript như React, Angular hoặc Vue.js, thay vì dựa vào máy chủ để hiển thị HTML

c) Routing: SPA thường sử dụng cơ chế định tuyến phía máy khách để quản lý điều hướng trong ứng dụng, cập nhật URL động mà không yêu cầu các trang mới từ máy chủ Điều này cho phép kiểm soát tốt hơn lịch sử duyệt web

d) Hiệu suất: SPA có thể cung cấp thời gian tải nhanh hơn sau lần tải đầu tiên vì trang web lấy dữ liệu từ API và cập nhật nội dung một cách linh hoạt mà không cần làm mới toàn bộ trang

e) Nâng cao trải nghiệm người dùng: Bằng cách cung cấp trải nghiệm liền mạch, SPA thường phản hồi và tương tác tốt hơn với người dùng, giống như các ứng dụng di động native

f) Phát triển với trung tâm là API: SPA thường tương tác với API phía máy chủ để tìm nạp dữ liệu hoặc thực hiện các hoạt động không đồng bộ, cho phép tách rời quá trình phát triển front-end và back-end

g) SPA cũng đối diện với nhiều mặt hạn chế như không tối ưu cho SEO khi các máy tìm kiếm không thể chạy code JavaScipt để lấy thông tin của trang web SPA cũng có thời gian load lần đầu cho trang web khá lâu khi trình duyệt cần tải hết mã nguồn về để chạy ứng dụng

1.5.3 Progressive Web Apps

PWA là viết tắt của Progressive Web Apps, là một loại ứng dụng web sử dụng công nghệ web để cung cấp cho người dùng trải nghiệm giống như ứng dụng native thông

PWA cung cấp cho các doanh nghiệp và nhà phát triển một giải pháp thay thế cho các ứng dụng di động gốc truyền thống, mang lại nhiều lợi thế, bao gồm phân phối dễ dàng hơn (không cần cửa hàng ứng dụng), khả năng tương thích đa nền tảng và giảm chi phí phát triển

1.5.4 Serverless Architecture

Kiến trúc serverless (tối giản server) là mô hình điện toán đám mây cho phép các nhà phát triển xây dựng và chạy các ứng dụng mà không cần quản lý cơ sở hạ tầng Mặc dù tên của kiến trúc là serverless, các server vẫn tham gia vào việc thực thi dòng lệnh, nhưng các lập trình viên không cần phải quản lí, bảo trì và nâng cấp máy chủ mà đưa lên các máy tính điện toán đám mây

Các nền tảng serverless phổ biến bao gồm AWS Lambda, Azure Functions, Google Cloud Functions và các dịch vụ như AWS API Gateway hoặc Azure Event Grid, hỗ trợ các kiến trúc hướng sự kiện và cho phép nhà phát triển xây dựng các ứng dụng serverless

Kiến trúc serverless rất phù hợp cho nhiều trường hợp sử dụng khác nhau, bao gồm ứng dụng web, API, xử lý dữ liệu theo thời gian thực, ứng dụng IoT Tuy nhiên, nó có thể không phù hợp với các ứng dụng yêu cầu kiểm soát chi tiết đối với cơ sở hạ tầng

Việc áp dụng kiến trúc serverless mang lại những lợi ích như khả năng mở rộng, giảm chi phí vận hành và chu kỳ phát triển tính năng nhanh hơn, khiến kiến trúc này trở thành lựa chọn hấp dẫn cho nhiều ứng dụng hiện đại và nhiều trường hợp sử dụng

1.5.5 Server-Side Rendering

Server-Side Rendering (SSR) là một kỹ thuật được sử dụng trong phát triển web trong đó server sẽ tạo HTML ban đầu cho trang web trước khi gửi nó đến client (trình duyệt) Cách tiếp cận này khác với client-side rendering (CSR), trong đó trình duyệt tải xuống một tệp HTML tối thiểu và sau đó JavaScript ở phía máy khách sẽ hiển thị nội dung

17

Các khía cạnh và lợi ích chính của Server-Side Rendering bao gồm:

a) Cải thiện hiệu suất và SEO: SSR thường giúp tải trang ban đầu nhanh hơn vì máy chủ gửi HTML được hiển thị đầy đủ tới trình duyệt Điều này có lợi cho việc tối ưu hóa công cụ tìm kiếm (SEO) vì trình thu thập thông tin của công cụ tìm kiếm có thể dễ dàng lập chỉ mục nội dung

b) First Contentful Paint (FCP): SSR có thể giúp đạt được FCP nhanh hơn vì trình duyệt nhận được nội dung HTML sớm hơn, cho phép người dùng xem và tương tác với trang nhanh hơn

c) Tăng khả năng tiếp cận của người dùng: Bằng cách cung cấp HTML, SSR đảm bảo rằng nội dung có sẵn ngay cả khi JavaScript không tải hoặc thực thi đúng cách ở phía máy khách, cải thiện khả năng truy cập và trải nghiệm người dùng, đặc biệt đối với người dùng trên các thiết bị chậm hơn hoặc điều kiện mạng hạn chế

d) Hỗ trợ trình thu thập dữ liệu web: SSR cung cấp nội dung chính xác cho các nền tảng truyền thông xã hội và trình thu thập dữ liệu web, cho phép các trang web hiển thị một phần giao diện xem trước tốt hơn khi chia sẻ liên kết và đảm bảo lập chỉ mục nội dung phù hợp

e) Bộ nhớ đệm: SSR hiệu quả đói với những phương thức caching, tối ưu hóa việc phân phối nội dung và giảm tải cho máy chủ cho các yêu cầu tiếp theo

SSR thường được triển khai bằng cách sử dụng các công nghệ và framework như Next.js cho React, Nuxt.js cho Vue.js hoặc Angular Universal cho Angular Các framework này tạo điều kiện thuận lợi cho quá trình hiển thị phía máy chủ và xử lý sự phức tạp của việc hiển thị nội dung ở cả phía máy chủ và phía máy khách thông qua công nghệ hydration

Mặc dù SSR mang lại lợi thế về hiệu suất và SEO, nhưng nó có thể có chi phí xử lý máy chủ cao hơn so với CSR Ngoài ra, thời gian tải trang lần đầu có thể bị ảnh hưởng nếu thời gian phản hồi của máy chủ chậm hoặc nếu độ phức tạp của ứng dụng ảnh hưởng đến tốc độ xuất file HTML trên máy chủ

Phát triển mã thấp phù hợp với nhiều ứng dụng, bao gồm các công cụ nội bộ, ứng dụng di động đơn giản Tuy nhiên, các ứng dụng phức tạp hoặc có tính chuyên môn cao vẫn có thể yêu cầu mã tùy chỉnh vì lý do logic về phạm trù kinh doanh phức tạp, khả năng mở rộng hoặc hiệu suất

Các nền tảng và công cụ phát triển low code phổ biến bao gồm Microsoft Power Platform (Power Apps, Power Automate, Power BI), Mendix, OutSystems, Appian và Salesforce Lightning Platform Các nền tảng này cung cấp nhiều chức năng, từ tạo ứng dụng cơ bản đến phát triển ứng dụng cấp doanh nghiệp, đáp ứng các yêu cầu kinh doanh khác nhau

Việc áp dụng công nghệ phát triển phần mềm low-code tiếp tục phát triển khi các tổ chức tìm cách đẩy nhanh quá trình phân phối ứng dụng, giảm chi phí phát triển và chi phí nhân sự khi không cần phải xây dựng một đội xây dựng phần mềm

19

1.5.7 Micro Front End Architecture

Kiến trúc Micro Front End là một cách tiếp cận xây dựng các ứng dụng web bằng cách chia tầng Frontend thành các đơn vị nhỏ hơn, có thể triển khai và quản lý độc lập được gọi là micro Frontend tương tự như microservice trong phát triển Backend

Kiến trúc Micro Frontend có thể được triển khai bằng nhiều chiến lược khác nhau như:

a) IFrames: Sử dụng iframe để nhúng và tách biệt các phần khác nhau của ứng dụng b) JavaScript framework: Tận dụng các JavaScript framework như Web Components, Angular Elements, hoặc các micro Frontend frameworks tuỳ biến

Việc áp dụng Kiến trúc Micro Frontend cho phép các tổ chức:

a) Cải thiện tốc độ phát triển: Các nhóm độc lập có thể làm việc đồng thời, đẩy nhanh tiến độ phát triển ứng dụng

b) Khả năng mở rộng và bảo trì: Bảo trì, mở rộng và cập nhật dễ dàng hơn cho các phần cụ thể của ứng dụng mà không ảnh hưởng đến các phần khác

c) Tính linh hoạt và lựa chọn công nghệ: tổ chức có thể tự do lựa chọn các công cụ và công nghệ tốt nhất, phù hợp cho nhu cầu cụ thể của từng Micro Frontend

Tuy nhiên, việc quản lý việc tích hợp nhiều Micro Frontend, đảm bảo tính nhất quán trong trải nghiệm người dùng và xác định các giao thức liên lạc giữa các Micro Frontend là những thách thức cần được xem xét và lập kế hoạch cẩn thận khi áp dụng kiến trúc này

1.5.8 GraphQL

GraphQL là ngôn ngữ truy vấn và thời gian chạy dành cho các API được Facebook phát triển và có nguồn mở vào năm 2015 Nó cung cấp một giải pháp thay thế linh hoạt, hiệu quả và mạnh mẽ cho các API REST truyền thống bằng cách cho phép khách hàng chỉ yêu cầu dữ liệu họ cần và nhận chính xác dữ liệu đó ở dạng có thể dự đoán được

Các tính năng và khái niệm chính của GraphQL bao gồm:

a) Định nghĩa lấy kiểu dữ liễu: Client có thể chỉ định chính xác dữ liệu mà họ yêu cầu bằng cách xác định các truy vấn theo một quy chuẩn Điều này hạn chế việc truy vấn dữ liệu quá mức hoặc truy vấn dữ liệu dưới mức cần thiết trong API REST

20

b) Một endpoint duy nhất: GraphQL thường hiển thị một điểm cuối duy nhất đóng vai trò là điểm đầu vào cho tất cả các hoạt động dữ liệu Điều này trái ngược với nhiều điểm cuối trong API RESTful

c) Cấu trúc phân cấp: Các truy vấn trong GraphQL giống với cấu trúc dữ liệu được yêu cầu Khách hàng có thể duyệt qua các mối quan hệ lồng nhau để truy xuất dữ liệu liên quan trong một câu truy vấn duy nhất

d) Schema: GraphQL sử dụng schema để xác định loại, trường dữ liệu và mối quan hệ giữa dữ liệu Schema này đóng vai trò như một cầu nối giữa client và server, cung cấp kiểu định nghĩa dữ liệu rõ ràng

e) Thay đổi dữ liễu: Ngoài việc truy vấn dữ liệu, GraphQL còn hỗ trợ các yêu cầu thay đổi dữ liệu, cho phép client sửa đổi dữ liệu trên server bằng cách xác định các thao tác và dữ liệu để thao tác

f) Công cụ đa dạng: GraphQL có một hệ sinh thái gồm các công cụ, thư viện và framework (ví dụ: Apollo Client, Relay) tạo điều kiện thuận lợi cho việc triển khai nó bằng nhiều ngôn ngữ và framework khác nhau

GraphQL thường được sử dụng khi:

a) Cần có khả năng truy xuất dữ liệu linh hoạt, đặc biệt là trong các cấu trúc dữ liệu phức tạp

b) Client có băng thông hạn chế yêu cầu truy vấn dữ liệu hiệu quả

c) Nhiều clients có yêu cầu truy vấn dữ liệu khác nhau sử dụng cùng một API endpoint

Khả năng giải quyết một số hạn chế của REST API truyền thống đã giúp cho GraphQL được áp dụng rộng rãi trên nhiều lĩnh vực và ngành khác nhau

21

Hình 1.12 GraphQL 1.5.9 Mobile-First Approach

Cách tiếp cận ưu tiên thiết bị di động là chiến lược thiết kế và phát triển giao diện ưu tiên cho thiết bị di động trước khi xem xét đến những thiết bị khác như máy tính hoặc các thiết bị có màn hình lớn hơn Chiến lược này bao gồm việc bắt đầu quá trình thiết kế với kích thước màn hình nhỏ nhất và sau đó cải tiến thiết kế cho màn hình lớn hơn

Cách tiếp cận ưu tiên thiết bị di động không bỏ qua việc thiết kế giao diện cho màn hình lớn hơn; thay vào đó, nó chuyển trọng tâm sang ưu tiên các thiết bị di động do mức độ phổ biến của chúng trong bối cảnh ngày nay Vì thiết bị di động có những hạn chế so với máy tính hoặc các thiết bị có màn hình lớn nên chiến lược này thúc đẩy quá trình thiết kế lấy người dùng làm trung tâm

Bằng cách bắt đầu với thiết bị di động, các nhà thiết kế và nhà phát triển đảm bảo rằng nội dung và chức năng cốt lõi được tối ưu hóa cho màn hình nhỏ nhất, mang lại nền tảng vững chắc để có thể mở rộng cho màn hình lớn hơn, thân thiện với người dùng hơn và dễ thích ứng hơn với những thay đổi của sản phẩm

1.5.10 Voice User Interface

Giao diện người dùng bằng giọng nói (Voice User Interface hay VUI) là công nghệ cho phép người dùng tương tác với máy tính, thiết bị hoặc ứng dụng bằng cách sử dụng lệnh nói hoặc ngôn ngữ tự nhiên Nó cho phép người dùng tương tác với công nghệ thông qua giọng nói, cho phép họ thực hiện nhiệm vụ, truy xuất thông tin hoặc điều

Các ví dụ phổ biến cho VUI có thể kể đến như loa thông minh (Alexa, Siri, Google Home) dùng để điều khiển nhà thông minh, thực hiện các tác vụ thông thường như phát nhạc, đọc thông tin, Thêm vào đó có thể kể đến trợ lý ảo là một dạng trợ lý ảo sử dụng giọng nói làm phương thức liên lạc chính với người sử dụng (ví dụ Siri, Cortana của MS, …) có thể dùng để thực hiện các tác vụ hỗ trợ người dùng

2.1.2 Cấu trúc mô hình MVC

Các thành phần chính trong mô hình MVC bao gồm:

a) Mô hình (Model): Model là thành phần chịu trách nhiệm quản lý dữ liệu và logic kinh doanh của ứng dụng Nó bao gồm các lớp và đối tượng biểu diễn cho dữ liệu, và xử lý các thay đổi trạng thái của nó Model không biết đến sự tồn tại của View và Controller

b) Hiển thị (View): View là thành phần chịu trách nhiệm hiển thị thông tin cho người dùng Nó nhận dữ liệu từ Model và biểu diễn nó theo cách được định nghĩa View không thay đổi dữ liệu, mà chỉ làm nhiệm vụ hiển thị

c) Controller (Controller): Controller là thành phần trung gian giữa Model và View Nó xử lý sự kiện từ người dùng, tương tác với Model để cập nhật dữ liệu và sau đó cập nhật View để hiển thị thông tin mới Controller là nơi điều phối luồng điều khiển của ứng dụng

2.1.3 Hoạt động của mô hình MVC

Ta có thể khái quát mô tả hoạt động qua các bước như sau: a) Người Dùng (User) tương tác với View:

Sự tương tác bắt đầu khi người dùng tương tác với View, như là bấm một nút hoặc nhập dữ liệu

b) View Tương Tác với Controller:

24

View ghi nhận dữ liệu người dùng và gửi nó đến Controller để xử lý Controller giải thích dữ liệu người dùng và quyết định cách xử lý nó c) Controller Tương Tác với Model:

Controller tương tác với Model để cập nhật dữ liệu hoặc logic kinh doanh của ứng dụng dựa trên dữ liệu người dùng

Model cập nhật trạng thái nội tại của mình theo hướng dẫn của Controller d) Model Thông Báo View:

Nếu trạng thái của Model thay đổi (do dữ liệu người dùng hoặc các yếu tố khác), nó thông báo cho các View đã đăng ký

Thông báo này thông báo cho View rằng chúng cần cập nhật bản thể để phản ánh những thay đổi trong dữ liệu

e) View Truy Xuất Dữ Liệu từ Model:

View, sau khi nhận thông báo, truy xuất dữ liệu đã được cập nhật từ Model View cập nhật bản thể của mình để phản ánh những thay đổi trong dữ liệu f) Controller Tương Tác với View (Tùy chọn):

Trong một số trường hợp, Controller có thể trực tiếp cập nhật View để phản ánh những thay đổi trong Model mà không đợi thông báo

Ví dụ: một người dùng cuối gửi một yêu cầu đến một máy chủ để nhận danh sách sinh viên đang học trong một lớp Sau đó, máy chủ sẽ gửi yêu cầu đó đến Controller cụ thể quản lý sinh viên Controller đó sau đó sẽ yêu cầu Model quản lý sinh viên trả về một danh sách của tất cả sinh viên đang học trong một lớp

25

Hình 2.1 Mô phỏng luồng hoạt động của MVC

Model sẽ truy vấn cơ sở dữ liệu để lấy danh sách tất cả sinh viên và sau đó trả lại danh sách đó cho Controller Nếu phản hồi từ Model thành công, Controller sẽ yêu cầu View liên quan đến sinh viên trả lại một bản trình bày về danh sách sinh viên View này sẽ lấy danh sách sinh viên từ Controller và hiển thị danh sách thành HTML có thể được sử dụng bởi trình duyệt

Controller sau đó sẽ lấy bản trình bày đó và trả lại cho người dùng, kết thúc yêu cầu Nếu trước đó Model trả về một lỗi, Controller sẽ xử lý lỗi đó bằng cách yêu cầu View xử lý lỗi tạo một bản trình bày cho lỗi cụ thể đó Bản trình bày lỗi đó sau đó sẽ được trả lại cho người dùng thay vì bản trình bày danh sách sinh viên

Như chúng ta có thể thấy từ ví dụ trên, Model xử lý tất cả dữ liệu View xử lý tất cả bản trình bày và Controller chỉ thông báo cho Model và View về những gì cần làm Đây là kiến trúc cơ bản và cách làm việc của framework MVC

2.1.4 Lợi ích của việc sử dụng mô hình MVC

a) Mã nguồn dễ bảo trì và có thể mở rộng một cách dễ dàng

b) Các thành phần của mô hình MVC có thể được kiểm thử một cách độc lập c) Các thành phần của MVC có thể được phát triển đồng thời