Khóa luận tốt nghiệp Kỹ thuật máy tính: Nghiên cứu sử dụng nền tảng flutter trong thiết kế đồng hồ số cho phương tiện hai bánh

Xuất phát từ vai trò của một sinh viên Khoa Kĩ thuật máy tính, nhóm chúng em thấyđược nhưng tiềm năng phát triển và được sự hỗ từ Công ty TNHH Bosch GlobalSoftware Technologies nên em đã

ĐẠI HỌC QUỐC GIA TP HÒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

KHOA KĨ THUẬT MÁY TÍNH

TRAN VŨ HOÀNG

TRẢN PHẠM TIỀN PHƯƠNG

KHÓA LUẬN TÓT NGHIỆP

THIET KE DONG HO CHO PHUONG TIEN HAI BANH

APPLYING FLUTTER PLATFORM TO DESIGN DIGITAL

CLUSTER FOR TWO WHEEL VEHICLES

KY SU Ki THUAT MAY TINH

TP HO CHi MINH, 2022

ĐẠI HỌC QUÓC GIA TP HÒ CHÍ MINH

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

KHOA KĨ THUẬT MÁY TÍNH

TRAN VU HOANG - 18520786

TRAN PHAM TIEN PHUONG - 18521278

KHOA LUAN TOT NGHIEP

NGHIEN CUU SU DUNG NEN TANG FLUTTER TRONG

THIET KE DONG HO CHO PHUONG TIEN HAI BANH

APPLYING FLUTTER PLATFORM TO DESIGN DIGITAL

CLUSTER FOR TWO WHEEL VEHICLES

KY SƯ Ki THUAT MAY TÍNH

GIANG VIEN HUONG DAN

TS Doan Duy

ThS Bùi Lê Thuận, Công ty TNHH Bosch Global Software Technologies

TP HO CHi MINH, 2022

THONG TIN HOI DONG CHAM KHÓA LUẬN TOT NGHIỆP

Hội đồng chấm khóa luận tốt nghiệp, thành lập theo Quyết định số

528/QD-DHCNTT ngày 19 tháng 07 năm 2022 của Hiệu trưởng Trường Đại học Công nghệ Thông tin.

LỜI CẢM ƠN

Ngày nay cụm đồng hồ hiển thị kĩ thuật số được phát triển một cách mạnh mẽ, phổbiến trên các dòng xe ô tô, vẫn còn hạn chế trên xe hai bánh Việc đưa đồng hồ kĩ thuật

số vào xe hai bánh giúp làm tăng trải nghiệm người dùng một cách đáng kể

Xuất phát từ vai trò của một sinh viên Khoa Kĩ thuật máy tính, nhóm chúng em thấyđược nhưng tiềm năng phát triển và được sự hỗ từ Công ty TNHH Bosch GlobalSoftware Technologies nên em đã chon đề tài: “Nghiên cứu sử dụng nền tang Fluttertrong thiết kế đồng hồ số cho phương tiện hai bánh” làm đề tài khóa luận tốt nghiệp

Em xin chân thành cảm ơn Giảng viên Doan Duy, Khoa Kĩ thuật máy tính, trường

đại học Công Nghệ Thông Tin trong thời gian đã tan tình hướng dẫn chúng em trong suốt

quá trình làm đề tài khóa luận

Em xin chân thành cảm ơn anh Bùi Lê Thuận, Công ty TNHH Bosch Global

Software Technologies và anh Tống Anh Quân, đã giúp đỡ chúng em rất nhiều trong việcgiúp chúng em có hướng đi, sửa lỗi và chia sẻ những nguồn thông tin nội bộ liên quanđến đề tài khóa luận tốt nghiệp

Với thời gian nghiên cứu hạn chế, sự hiểu biết có hạn, khóa luận không thể tránhkhỏi những thiếu sót Em rất mong nhận được sự đóng góp của thay, cô, các anh, cùngvới những người quan tâm đề nội dung khóa luận được hoàn thiện hơn

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

Sinh viên

Trần Vũ Hoàng Trần Phạm Tiến Phương

MỤC LỤC

CHƯƠNG 1 GIỚI THIỆU DE TAL -2- 222222 2E++2E££E++2EE+2ES+zE+trxrrrxrsrsee |

1.1 Giới thiệu về đề tài -¿- 2¿2x+22x2221222122112711271221221211211.11 211 re |

1.2_ Mục tiêu của đề tài 5:22 1221 2221221122112711211211211211 1.1 cree 21.2.1 Mục tiêu tổng quát ¿5+2 212 1271221211271711211211 1121.1111 re 2

1.2.2 Muc tidy chi g8 .ÀÀ 21.3 Đối tượng và phạm vi nghiên cứu -¿- 2¿++22++2z++2E+tzx+erxezrxrsrxrres 2

1.3.1 Đối tượng nghiên cứu 2 2+S++E+2E£2EE£EE£EEE2E2E1211211211221 1e ce 2

I3 ¡02001320120 1n 3

CHƯƠNG 2 TONG QUAN CƠ SỞ LÝ THUYET VA PHAN CỨNG SỬ DỤNG 4

2.1 Dart 888222 rổ SA 5

2.1.1 Giới thiệu ngơn ngữ ÏDaF( (5 2c 321121113118 E11EEEkrrkrerkrrke 5

2.1.2 Đặc điểm của ngơn ngữ Dạt - 2: 22222 EE2EE222122122121121 21x 62.1.3 Những ưu điểm của Dart 2-22:©2++22+2ES22EE22EE+2EEtEExerExerxrerkrerxee 6

2.1.4 Dart: n6 6> ˆ^ cncecccceececeennetsesennentenseneaes 7

2.2 Flutter SMU > £ << J7 ẶẤĐẴ`ằẴằ`^ằẰ ẤT ket 8

2.2.1 Giới thiệu về Flutter ccccecccseeccssesscssessessessessesesssessesseseessesvessssevsaesneene 82.2.2 Uu diém cita Flutter ốốố.ốốốố.ố.ố 102.2.3 Các thành phan quan trong Flutter cccccccccssesscessessessesssessessessessesseeses 10

2.2.4 Rendering va layout trong Flutter cececcseeseeseeeecseeeseeseeeeeeeeeaeenes 12

2.3 Giới thiệu ( -. S1 1221112111111 1111111111111 111110111 0111111111 1111 111211 te 14

2.5 Các công cụ được sử dụng dé đo hiệu TANG Gà Set 18

2.5.1 QML Profiler (dành cho Qt) - - c2 2 22132133 EEsrrreresvrs 18

2.5.2 Dart Devtools (dành cho Flutter) - - c3 + ‡+Esexeereerssrssrrs 20

P81) 27

2.6.1 G006 2ì080%)0 5i 4£ 27

2.6.2 Phần cứng -:-+ s©E2+EE+2EE2212212717117112111211.211211 111.111 e6 28 2.6.3 Cài đặt cơ bản cho Raspberry PIH - óc + + *+ vs skkirsrkrssrseee 30 CHƯƠNG 3 THIET KE HỆ THÓNG : 2222:22222v2222vv2EEEvvrtrkrvrrsrrrred 31 3.1 Tổng quan công ViGC ceecceccesssesssesssesssessssssessesssesssesssessesssecssesesesasesssesseesseeess 31 3.2 Nghiên cứu va chạy kiêm thử Flutter trên hệ điều hành Raspberry OS 31

3.3 Won at 31

3.4 Rang buộc các ham C/C++ vào trong dự án FÏuff€r -««+-s+ 32 3.5 Thiết kế giao diệu TS ce, ree oo cee /, << 34 3.6 Do hiệu năng - - c1 91111111 H1 H1 TH HH HT TT TH Hàn kh 36 3.6.1 Thiết lập QML Profiler (Q†) 2-52 252222EE2EE2E22E122E2E1221EEeErex 36 3.6.2 Thiết lập Devtools (FÏuff€T) - 2: 2+ 2+Ss£SE£2E2EE£EE2EE2EEEEEEEzExerxers 37 CHUONG 4 KET QUA DO THEO TUNG THONG SO 52- 2552: 38 9 0 38

ALL Qt (9100 38

1001/9900 40

C0011 0a 42

"9n 42

00c 43

4.3 FPS trung Dinh 0n 44

4.3.1 Qt (FPS trung 80007 44

4.3.2 Flutter (FPS trung bình) 0 cece ceceeecceceecceceeceeeeeeeeeeeeeseeaeeeeeeseetereeeaees 45

4.4 Thời gian khởi động ứng dụng - ceeseeeceeceeeeeeeeeeeeseeaeteeeseeeeeseeeeneens 47

4.4.1 Qt (Thời gian khởi động) - - 5c S11 St Sky ri, 47

4.4.2 Flutter (Thời gian khởi động) - - - -¿- c St * + *++EEseeeereererrrrsresxes 48

4.5 Thời gian chuyên giữa các màn hình ¿- 2£ s2s£+z£+£x+£x+zxzzzxerxeee 484.5.1 Qt (Thời gian chuyển màn hình) , - 2: 5+ 2£ x£x2z++£zz£xzxzzxez 484.5.2 Flutter (Thời gian chuyển màn hình), - ¿2 2 s+£s++£++£xzxzsez 49

CHƯƠNG 5 DANH GIÁ KET QUA ĐO - - St 2E EEEEEEEEEEEEEEkEEkrrkerrree 50CHƯƠNG 6 KET LUẬN VÀ HƯỚNG PHÁT TRIÊN - 2-52 szc++xzzczs+ 52

6.1 Kết luận <7 mã —— 5 526.2 Hướng phát triỂn -.-2 52- 2 12 2 12E1221121121127122112112110711211 21 1111 52

DANH MỤC HÌNH

Hình 1.1 Đồng hồ cơ truyền thống - 2 2£ + £+SE+EE+EE£+E2EEEEEEEEEEEEEEEEEEerkkrrrsree 1Hình 1.2 Đồng hồ điện tite eccecccecceccecessesssssessesssessessessesssessessessvsssessessuesssssessesseaseeses |Hình 2.1 Giao diện đồng hồ kỹ thuật số cho xe 2 bánh viết bằng Qt 4

Hinh 2.2 Open library 0177 8

Hinh 2.3 Look-up ham 00 : 8

Hình 2.4 Các tang trong nền tang Flutter c ccccccccsccssessesseessessessesssessessessesssesseeseesees 9

Hình 2.5 Widget tree trong FÏUff€T 5 Sc 2c S2 t2 9 1111111 tt re 11

Hình 2.6 Stateless Widget vs Statefull WIdget óc net 12

Hinh 2.7 Widget tree eee um.Ả 12

Hình 2.8 Build Phase, generate Element Tree - ¿5+5 +5 *+s++vxseexeerssss 13 Hình 2.9 Build Phase, tao Render 'TT€C - - - 2 2213321112113 erke 13

Hình 2.10 Constraint va Size - - L2 Tnhh TH TH TT HH Hàng 14

Hình 2.11 Hệ thống CAN Ðus 2-2: ©522S222E SES2E2E1921221221221212211211 21220, 16

Hình 2.12 Cửa sô làm việc QML Profiler - 2c s2 2+ E+EE£2E2E++EEeEEerEzreerxers 19

Hình 2.13 Cửa số làm việc DevTOolS -.-: 52 S2 S22ESE5E11323255511E2E1511132E121131x2xxE 21

Hình 2.14 Performance VI€W -.- - + t3c 3 t2 ST TH HH TT TH HH rệp 22

Hình 2.15 Biéu đồ ngọn lửa xem hiệu suất 2-22 2+E+E£+E++EEeEEtzEezrkrrxcree 22

Hình 2.16 Biểu đồ xem ngọn lửa CPU -:- 22 22E2EE+2EEt2EE2EEEEEESEEtrrkrrrree 24

Hinh 2.17 Call tree 1 4 24

Ip0)828.8510ii0ii0ii 00077 - 25

50) 8060:0801 26

Hinh 2.20 Khoi dong sysstat 0 26

Hình 2.21 Xem mức độ sử dung CPU - - c2 +2 St E+vseererreerrrrrrrrrsrs 26

Hình 2.22 Xem mức độ sử dụng CPU với 5 lần 1 giây -¿- 5z5+¿ 26

Hình 2.23 Xem dit liệu chi tiết mức độ sử dung CPU 2-22 sz+sz+cszcxeez 26

Hình 2.24 xem mức sử dụng tài nguyên của tiến trình dang chạy - 27

Hình 2.25 xem mức độ sử dụng bộ nhớ 5 lần 1 giây 2-2: 5¿©z+cz+cxzsz 27

Hình 2.26 Raspberry pi 4 model E s5 + SE THnHTHTH HH Hư 27

Hình 3.1 Bước | - Trong thư viện CAN, viết các Adapter Function hỗ trợ binding

0:0 33

Hình 3.2 Bước 2 - Look-up các hàm Adapter đã viết -: -:- s©csccszscs+2 33

Hình 3.3 Bước 3 - Test các hàm lay từ thư viện CAN - khi chưa cắm module CAN

—— 33

Hình 3.4 Bước 4 - Test các ham lấy từ thư viện CAN — khi đã cắm module CAN 34

Hinh 3.5 €0009 00) i0001nn 5 34

Hình 3.7 đoạn mã chỉnh sửa 1COTI - ¿+ 2E 22 EEE 22111953181 58 EEEE2EEEESkkrrsreere 35

Hình 3.8 GUI: màn hình chính tao ra bằng Flutter 2-22 2 s2 sz+sz2xszzxeez 35Hình 3.9 GUI: Menu Screen tạo ra bằng Flufter - 2: 222z+£z++£xsrxzrxrrrsee 36

Hinh 1088, 4/101.807 0 ^“-3 37

Hình 4.1 Sysstat: Khi ứng dụng Qt nhận tín hiệu CAN nhưng xe đang đứng yên 38

Hình 4.2 Sysstat: Ung dung Qt khi xe bắt đầu chuyên động -: 39

Hình 4.3 Task manager: Khi ứng dung Qt nhận CAN, nhưng xe đứng yên 39

Hình 4.4 Sysstat: Khi ứng dụng Flutter bắt đầu nhận tín hiệu CAN, nhưng giao diện

không thay đổi (xe đang đứng yên), hàng màu xám là tiến trình của ứng dung 40

Hình 4.5 Sysstat: Khi xe bắt đầu chuyên động - 2-5 ©52+cxccxezxzrerxrree 41

Hình 4.6 Task manager: Khi ứng dung Flutter nhận CAN, xe đứng yên 41

Hình 4.7 Task Manager: Khi xe bat đầu chuyền động, thông số tốc độ trên man hìnhthay đối liên tỤC -¿-+sz2x2Ex2E12211221127112711211211711711211.11211 11 121.1 ce 42Hình 4.8 Sysstat: %memory hệ thống khi chưa mở ứng dụng, build, và bắt đầu khởi

động ứng dung, xe GUNG VÊN - - G2 311911111111 TT TH go TH ng Hy 42

Hình 4.9 Sysstat: %memory khi chưa mở ứng dụng và bắt đầu khởi động ứng dụng

"— 43

Hinh 4.10 FPS trong 00 Xa '.:.-®-"-.:.”'”"-.:- 44

Hình 4.11 Devtools: FPS trung bình trong 40s dau tiên sau khi chạy ứng dụng 45

Hình 4.12 Devtools: FPS trung bình trong 200s đầu tiên sau khi chạy ứng dụng 45

Hình 4.13 Devtools: FPS trung bình trong 400s đầu tiên sau khi chạy ứng dụng 46

Hình 4.14 Devtools: FPS trung bình sau 400s, én định ở mức 52 FPS 46

Hình 4.15 FPS tại một thời điểm ngẫu 10101 (ol a 47

Hình 4.16 Thời gian startup QT app - c1 32 1 19 net 47

Hình 4.17 UI Thread tại thời điểm startup Thread -:- 22 ©2sz25z+2s+zzxzscs+z 48

Hình 4.18 Raster Thread tai thời điểm khởi động ứng dung -: 48

Hình 4.19 Thời gian chuyển giữa các màn hình của ứng dụng Qt - 48

Hình 4.20 UI Thread tại thời điểm chuyền màn hình -2- 2-52 22 s52 49

Hình 4.21 Raster Thread tại thời điểm chuyên màn hình -2-2 2552552 49

DANH MỤC BANG

Bảng 2.1 Danh sách khai báo giá trị cho các biến - 2-2: 52 22£E+£x+zE+zEsrxz 7

Bảng 2.2 Thông số phan cứng Raspberry - 2-22 s2x+2E22EE+EE+EEtEEEzExerserrerex 29

Bảng 3.1 Đường đi của dữ liệu từ Xe - - S2 St S2 S2 2 141111111 re 32

Bảng 4.1 FPS trong các khoảng thời Ø1an + 3233 EseEeeeresrerrrrrsee 45

Bang 5.1 Tổng kết thông 86 đo - 2-2 5S9S22EE‡EESEE2EEEE1E711211271271211211 11 xe, 50

DANH MUC TU VIET TAT

Automotive Grade Linux Software Development Kit

Iphone Operating System

Controller Area Network

Foreign Function Interface

Command-Line Interface

Engine Control Unit

Advanced Driver Assistance Systems

Central Processing Unit

Graphic Processing Unit

TOM TAT KHÓA LUẬN

Nhóm nghiên cứu nền tảng Flutter trong phát triển ứng dụng di động và nghiêncứu thiết kế đồng hồ kĩ thuật số cho phương tiện giao thông hai bánh và so sánh vớigiao diện Qt trong phát triển đồng hồ kĩ thuật sd

Kế hoạch ban đầu của đề tài là phát triển trên hệ điều hành Automotive Grade

Linux AGL là một dự án mã nguồn mở với cốt lõi là linux, từ đó đề tài sẽ so sánh

với nền tảng Qt chạy trên AGL được cung cấp bởi Bosch

Ban đầu nhóm tiếp cận với AGL là một trong những hệ điều hành dành riêngcho ô tô để nghiên cứu và phát triển đồng hồ kĩ thuật số cho xe hai bánh sử dụng

nền tảng Flutter, nhưng trong quá trình nghiên cứu và phát triển, nhóm gặp một vấn

đề đó là chưa có bộ SDK của Flutter phù hợp với hệ điều hành AGL Từ đó nhómđưa ra các hướng giải quyết như sau:

1 Xây dung lại bộ SDK của Flutter phù hợp với AGL.

2 Đổi từ hệ điều hành AGL sang Raspberry OS

Với hướng giải quyết thứ nhất, việc xây dựng lại toàn bộ SDK là một thử tháchrất lớn Đề xây dựng lại bộ SDK của Flutter phù hợp với AGL thì nhóm cần thêm

nhân lực và thời gian Nhất là việc thời gian hoan thành va bảo vệ khóa luận là có

hạn do đó hướng giải quyết thứ nhất không khả thi

Với hướng giải quyết thứ hai, việc chạy Flutter ứng dụng trên google app là có

khả thi Bởi vì đã có một vài Flutter Embedder được xây dựng cho Raspberry OS,

điển hình như của Sony, hay của Ardera, đồng thời, ngay cả Google cũng có hỗ trợ

SDK phù hợp để có thể chạy trên Raspberry OS vì thế chúng em chọn hướng giảiquyết thứ hai

Dựa theo hướng giải quyết thứ hai, đề tài đã xây dựng và tạo ra một số kết quảnhất định như là giao điện đồng hồ kĩ thuật số sử dụng nền tảng Flutter Và với sự

hỗ trợ đến từ các kĩ sư của Bosch, nhóm đã có thể truyền và nhận tín hiệu thời gianthực từ xe hai bánh lên đồng hồ kĩ thuật số Đồng thời phía Bosch cũng đã chỉnhsửa đề Qt có thể chạy trên Raspberry, qua đó nhóm đã có thê so sánh được hiệu suất

sử dụng của hai nên tảng nay.

CHƯƠNG 1 GIỚI THIỆU ĐÈ TÀI

1.1 Giới thiệu về đề tài

Cụm đồng hồ hiển thị kỹ thuật số đã được phát triển và ứng dụng rộng rãi trongcác phương tiện vẫn chuyền từ nhiều thập niên qua, phổ biến trên hầu hết xe ô tô.Việc sử dụng đồng hộ kỹ thuật số dé hiển thị thông tin hỗ trợ giám sát và điều khiển

mô tô đã được nghiên cứu và phát triển trong những năm gần đây Đồng hồ kỹ thuật

số giúp hiển thị được nhiều thông tin hơn, thuận tiện tương tác và hỗ trợ kiếm soát

phương tiện tốt hơn, cho phép ứng dụng nhiều kỹ thuật mới giúp nâng cao độ antoàn và hiệu quả trong sử dụng phương tiện Các tính năng của đồng hỗ số là vượttrội so với đồng hồ cơ truyền thống Hình 1.1 và 1.2 minh họa hình ảnh về hai loạiđồng hồ kỹ thuật số và đồng hồ cơ truyền thống

sự quan tâm của đông đảo cộng đồng phát triển ứng dụng, nhóm đã quyết định sử

dụng nền tang Flutter dé nghiên cứu và phát triển đồng hồ kĩ thuật số Flutter mang

ưu điểm vượt trội nhằm giải quyết các vấn đề về Fast Development và Native

Performance Flutter có thể cho phép xây dựng giao diện người dùng nhanh chóng

và dễ dàng thử nghiệm và thêm tính năng và sửa lỗi nhanh hơn Flutter còn cho

phép tải lại lần thứ hai, mà không làm mắt trạng thái trên các thiết bi mô phỏng haythiết bị thực

1.2 Mục tiêu của đề tài

1.2.1 Mục tiêu tổng quát

Với sự hỗ trợ của Công ty Bosch Global Software Technologies, nghiên cứu

nền tang Flutter trong phát triển ứng dụng di động và nghiên cứu thiết kế đồng hồ kĩ

thuật số cho phương tiện giao thông hai bánh Sử dụng nền tảng Flutter và phát triển

trên Raspberry Pi 4 model B.

1.2.2 Mục tiêu chỉ tiết

- Nghiên cứu nền tảng mới Flutter dé phát triển ứng dụng di động

- Sử dụng nén tang Flutter dé thiết kế đồng hồ hiền thị kĩ thuật số cho phương

tiện xe hai bánh chạy trên Raspberry.

- Sử dụng và chạy lại đồng hồ hiển thị kĩ thuật số sử dụng nền tảng Qt đượccung cấp và hỗ trợ bởi công ty Bosch Global Software Technologies

- Do hiệu năng của Flutter và Qt dé có thé đưa ra những chi số, so sánh giữa hai

nên tảng.

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

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

Đối tượng nghiên cứu chính trong khóa luận là Flutter, nền tảng mã nguồn mở

được phát triển bởi Google

Sau đó nhóm tiếp tục nghiên cứu giao điện đồng hồ kỹ thuật số cho xe hai

bánh, và sử dụng nền tang Flutter để xây dựng giao diện đồng hồ kĩ thuật số cơ bảncho xe hai bánh chạy trên phần cứng là Raspberry Pi 4 Model B

1.3.2 Phạm vi nghiên cứu

Nghiên cứu về khả năng xây dựng ứng dụng nhúng cho các thiết bị nhúng của

Flutter, tiêu biéu là xây dựng đồng hồ kĩ thuật số cho xe hai bánh Và cuối cùng là

so sánh hiệu quả sử dung Flutter với việc sử dụng Qt.

CHƯƠNG 2 TONG QUAN CƠ SỞ LÝ THUYET VÀ PHAN CỨNG SỬ

DỤNG

Là một nền tảng rất mới, Flutter (được ra mắt lần đầu vào năm 2017) cũng chưa

có quá nhiều nghiên cứu chuyên sâu Tuy có các nghiên cứu giữa Flutter và các nền

tảng khác, tiêu biểu là so sánh giữa Flutter va react native, giữa Flutter(dart) và các

ngôn ngữ khác như Kotlin, Java [1][2], nhưng chi là trong lĩnh vực di động và các

môi trường desktop như Window, Ubuntu, đồng thời chưa có nhiều nghiên cứu

chính thức với các ứng dụng nhúng.

Về việc triển khai các embedder cho Flutter trên Embedded Linux (như AGL,Raspberry OS), thì về bên phía Sony, cũng đã phát triển một embedder phục vụ choviệc này [3] Mặc dù có công khai source code, nhưng họ không cung cấp tài liệuhướng dẫn về việc cai đặt, xây dựng và kiểm thử

Với việc sử dụng Flutter để phát triển đồng hồ kỹ thuật số cho xe, chỉ mới có

một số mã nguồn trên mạng của một số cá nhân thích nghiên cứu và chưa được sử

Tuy nhiên, Qt cũng có một vài nhược điểm trong việc phát triển giao diện đồng

hồ kỹ thuật số:

e_ Không trực quan cho người thiết kế khi thiết kế giao diện

e Tiêu tốn nhiều thời gian cho việc thiết kế giao diện

Vì vậy công ty Bosch Global Software Technologies cũng đang tìm một nềntảng khác để khắc phục các nhược điểm của Qt, va Flutter là một trong số các nền

tảng đó Nhóm chúng em, trùng hợp là sau khi đã tìm hiểu qua về Flutter ở đồ án 1

và nhận thấy có nhiều ưu điểm của Flutter, nên đã tham gia vào Capstone Project

Với dé tài này, chúng em tập trung vào việc so sánh hiệu quả của Flutter và Qt

Đồng thời sử dụng Flutter dé tạo ra một giao điện thân thiện hơn với người dùng

2.1 Dart

2.1.1 Giới thiệu ngôn ngữ Dart

Dart là ngôn ngữ lập trình dạng hướng đối tượng, nó cho phép viết mã một lần

và biên dịch ở nhiều nền tảng khác nhau Nhưng khác với Java, thay vì tạo ra nhữngmôi trường trung gian giữa mã thực thi và môi trường thiết bị thì Dart sử dụng

những trình biên dịch khác nhau dé biên dich ra mã máy tương ứng Hiện tại Dart

đang hỗ trợ dé tạo ra những ứng dụng trên iOS, Android, Fuchsia và Web Riêng

với Web Application, Dart biên dịch bản thân thành code Javascript (ở trường hợp nay, Dart được coi như là một cú pháp cho Javascript).

Dart đồng thời cũng là một ngôn ngữ hỗ trợ bất đồng bộ, mã được biên dịch

tuần tự từ trên xuống Mã được đưa vào hàng đợi và hoàn toàn có thứ tự khi được

thực thi.

e Dart là ngôn ngữ lập trình mới, được phát triển bởi Google, hiện đã

được chấp thuận bởi tổ chức Ecma

e Dart được sử dụng để xây dựng các loại ứng dụng: web, server, di động

(iOS và Android với công cu Flutter).

e Dart là ngôn ngữ hỗ trợ lập trình hướng đối tượng, cú pháp kiểu C, mã

code Dart có thé biên dịch thành JavaScript dé chạy trên trình duyệt Nó

hỗ trợ những khái niệm lập trình hiện đại như giao diện lớp, lớp trừu

tượng

e Tir ngôn ngữ lập trình Dart, Google giới thiệu SDK Flutter dé sử dụng

ngôn ngữ Dart phát triển ứng dụng di động chạy đa nền tảng (Một lầnviết code build ra ứng dụng cho iOS và Android

> Tại sao lựa chọn ngôn ngữ Dart?

Các nhà phát triển tại Google và các nơi khác sử dung Dart dé tạo các ứng dụng

chat lượng cao, quan trọng cho iOS, Android và web Với các tính năng nhắm đến

sự phát triển phía khách hàng, Dart rất phù hợp cho cả ứng dụng di động và web

Dart giúp ta tạo ra những trải nghiệm đẹp, chất lượng cao trên tất cả các màn hình,

VỚI:

e_ Một ngôn ngữ được tôi ưu hóa cho khách hàng

e Nền tảng mạnh mẽ

e Công cụ linh hoạt.

2.1.2 Đặc điểm của ngôn ngữ Dart

Dart đi kèm với trình soạn thảo nhẹ, có thể dùng Dart Editor để viết, chạy và gỡlỗi các ứng dụng Dart, nó có thể giúp phát hiện các lỗi tiềm năng Giúp viết mã tốt

và nhanh hơn và được thiết kế để biên dịch sang JavaScript

2.1.3 Những ưu điểm của Dart

Cu pháp của ngôn ngữ Dart rõ rang và súc tích, công cụ của nó đơn giản nhưng

mạnh mẽ Type-safe giúp ta xác định sớm các lỗi cú pháp.

Đồng thời, Dart có các thư viện cốt lõi và một hệ sinh thái gồm hàng ngàn gói

Đối với các developer hiện tại, dart rất đễ học và quen thuộc, nhờ vào cú pháp

và định hướng đối tượng rất giống với C/C++, Java Nếu đã biết C++/C# hoặc Java,

ta có thê làm việc hiệu quả với Dart chỉ sau vài ngày

2.1.4 Dart: ffi

Dart:ffi là một thư viện do Dart cung cấp, dùng để tích hợp các thư viện

(dynamic library/shared library) từ các ngôn ngữ khác vào trong Dart Project

(Flutter Project cũng là 1 Dart Project) FFI (Foreign Function Interface) cho phép

chúng ta gọi các ham từ C/C++, trên các nền tảng khác nhau mà không cần tạo liênkết Java/Objective-C tới nền tảng đó

Đề sử dụng dart:ffi để gọi hàm từ C/C++ library, ta tiến hành các bước sau: [6]

Bước 1: Khai báo ham thay thé trong Dart: Ta cần khai báo giá trị trả về của

hàm, tham sô đâu vào, với các kiêu dữ liệu Native theo bang sau:

Bảng 2.1 Danh sách khai báo giá trị cho các biến

Int8, Int1ó, Int32, Int64, Uint8, Uint16,

Int (signed 64 bit)

Int (signed 64 bit)

float, double, bool Float, Double, Int8 float, double, int (0 as

false and any number greate than 0 as

true)

struct, void, * (pointer), Struct, Void, Pointer, Struct, void, Pointer,

char Pointer<Utf8> Pointer<Utf8>

(can be malloc and free on both side)

array or int8 t, intl6_t, Pointer of Int8, Int1ó, typed data matching the

int32, Int32 with integer size

total size matching array 8, 16, 32, 64

length

Bước 2: Khai báo đường dan tới thu viện chứa ham đó:

‘platform’, ‘core’, ‘libsdl2w_core.so');

dylib -open(libraryPath) ;

Hinh 2.2 Open library

Bước 3: Look-up ham cần binding từ C/C++ library va bind chúng vào hàmthay thé mà ta tạo ở bước 1

gCDummyRandomPointer

gCDummyRandom = gCDummyRandomPointer.asFunction<GCD >()5

Hinh 2.3 Look-up ham C.

Bước 4: Sử dung hàm bang cách gọi hàm thay thé, chương trình sẽ tự động gọi

hàm từ C/C++.

2.2 Flutter

2.2.1 Giới thiệu về Flutter

Flutter là một nền tảng mã nguồn mở hỗ trợ nhà phát triển tạo ra các ứng dụngđiện thoại có chất lượng tốt và hiệu năng cáo hoạt động tốt trên các hệ điều hànhnhư Android và iOS Nó cung cấp một SDK đơn giản, mạnh mẽ, hiệu qua và déhiểu dé có thé tạo ra ứng dụng điện thoại được viết bằng ngôn ngữ riêng của Google

là Dart.

Flutter được viết chia làm hai tầng Tầng ở trên sử dụng ngôn ngữ cung cấp các

đoạn mã xây dựng lên một ứng dụng Flutter Các đoạn mã này cũng cấp phương

tiện dé có thé thay đổi và chỉnh sửa chúng Từ đó giúp ứng dụng của lập trình viên

có thê được tùy chỉnh theo mong muốn Tầng Application này giúp lập trình viên có

8

thể thay đổi mã nguồn ứng dụng ở thời điểm complie time Tầng thứ hai của Flutternằm ở sâu bên dưới và được viết bằng C++ Tầng Shell này chưa các công cụ trợgiúp ứng dụng Flutter trong quá trình chạy Nồi bật cần lưu ý ở tầng này là máy ảo

Dart VM Khái niệm máy ảo là khái niệm về một ứng dụng chạy song song với mã

nguồn chính như một phan của ứng dụng

Dart Isolate Setup System Events

Dart Runtime Mgmt Frame Scheduling Asset Resolution

Frame Pipelining

Embedder : : :

Platform-specific Render Surface Setup Native Plugins App Packaging

Thread Setup Event Loop Interop

Hinh 2.4 Cac tang trong nén tang Flutter

e Google cung cấp gói SDK dé phat triển giao diện cho các thiết bị di

động như Android và iOS dựa trên nền tảng Flutter Nó là một nền tảng

mã nguồn mở được sử dụng bởi các nhà phát triển và các tô chức trên

khắp thé giới

e Flutter có các công cụ và thư viện dé giúp dé dàng đưa ra ý tưởng của

mình vào cuộc sống trên iOS và Android Nếu chưa có kinh nghiệm

phát triển trên thiết bị di động, thi Flutter là một lựa chọn dé dang và

nhanh chóng để xây dựng các ứng dụng di động thân thiện Nếu đối vớimột nhà phát triển trên iOS hoặc Android có kinh nghiệm, họ có thé sử

dung Flutter cho các View, va tận dụng nhiều mã Java/Kotlin/

Object-C/ Swift hiện có.

e Flutter sử dung Dart, một ngôn ngữ nhanh, hướng đối tượng với nhiều

tính năng hữu ích như Mixin, Generic, Isolate, và Stactic type.

e Flutter có các thành phan UI của riêng nó, cùng với một cơ chế dé kết

xuất chúng trên nền tang Android và iOS Hầu hết các thành phan giaodiện người dùng, đều sẵn dùng, phù hợp với các nguyên tắc của

Material Design.

2.2.2 Ưu điểm của Flutter

Fast Development: Tính năng Hot Reload hoạt động trong miliseconds dé hiển

thi giao diện tới người dùng Sử dung tập hop các Widget có thé được tùy chỉnh dé

xây dựng giao diện trong vai phút Ngoài ra Hot Reload, Hot Restart còn giúp ta

thêm các tính năng, sử lỗi tiết kiệm thời gian hơn mà không cần phải thông qua máy

ảo, máy Android hoặc iOS.

Expressive and Flexible UI: có rất nhiều các thành phan dé xây dựng giao diệncủa Flutter vô cùng đẹp mắt theo phong cach Material Design va Cupertino, hỗ trợnhiều các APIs chuyên động, smooth scrolling

Native Performance: Cac Widget của Flutter kết hợp các sự khác biệt của các

nên tảng vi dụ như scrolling, navigation, icons, font để cung cấp một hiệu năng tốt

nhất tới iOS và Android

2.2.3 Các thành phần quan trọng Flutter

s* Widget

Widget chịu trách nhiệm hình thành cấu trúc của Diagnosticable Tree (một cau

trúc dir liệu dang cây hỗ trợ việc định nghĩa cấu trúc giao diện được vẽ lên trong

ứng dụng viết bằng Flutter, hay còn gọi là Widget Tree) trong khi Class Element

chịu trách nhiệm quản ly trạng thái của từng Widget trên cái cây đó Y tưởng cơ bảncua Flutter giống như đặt ra một tam bảng (canvas) và vẽ tat ca mọi thứ lên đó

Hình 2.5 là một ví dụ cho cây Widget của Flutter

10

MyHomePage

Hình 2.5 Widget tree trong Flutter.

Khi trạng thái của dữ liệu thay dồi, ví dụ như người dùng chuyển màn hình, haythay đổi dữ liệu trên màn hình, thì chương trình sẽ phan ứng thông qua việc xóa cácWidget cũ đi và vẽ các Widget mới lên Chính vì vậy thay vì phải biết đến các

StoryBoard (trong iOS) hay các Activity (trong Android), Flutter đưa tat cả các khái

niệm liên quan đến giao diện về một khái niệm duy nhất gọi là Widget Việc quản

ly trạng thái của các Widget cũng đưa về cho lập trình viên thực hiện Trong Flutter,khi muốn điều chỉnh trạng thái về kích thước hay vị trí của một Widget, ta không

thực hiện việc đó trong Widget hiện tại mà nên boc Widget đó trong một Widget

nào đó chỉ chuyên làm việc này (Widget Center, Column, Row, ) Điều này khiến

cho tính chất “Trong Flutter thì mọi thứ đều là Widget “ lại càng chuẩn hơn bao giờ

hết Màn hình là Widget, thành phần giao diện cũng là Widget, thậm chí cả thông

tin về layout cũng là Widget

Trong Flutter, có 2 loại Widget chính mà ta cần quan tâm, đó là Stateful Widget

va Stateless Widget:

e Stateful Widget

La Widget mà trang thái của chúng có thé thay đổi Dé tao State thì

StatefulWidget phải gọi phương thức createState().

Khi tạo mới một StatefulWidget, ta quan tâm đến hai lớp là StatefulWidget vàtrang thái của Widget đó StatefulWidget là phần không thay đổi trong WidgetTree,thay vào đó, State là phần được thay đổi Mỗi khi Widget bị thay đối, State củaWidget đó sẽ được khởi tạo lại thông qua việc gọi đến phương thức StatefulWidget

11

Thuộc tính này chính là ví dụ của StatefulWidget đã tạo ra State đó Chính nhờ vậy,

từ trong State hoàn toàn có thể lấy được những giá trị được truyền vào bên trongStateful Widget thay vì phải truyền vào thông qua hàm khởi tạo

Hinh 2.6 Stateless Widget vs Statefull Widget

Theo hình trên, StatefulWidget cung cấp cấp phương thức setState() dé có théthay đổi State của lớp, trong khi StatelessWidget không có phương thức đó nên

không thé cập nhật trang thái sau khi đã được Render xong

2.2.4 Rendering và layout trong Flutter

1, “ứ N , N

: ), RawImage ‹ ; ‘ ; RichText

Hinh 2.7 Widget tree

12

Khi Flutter cần render một đoạn code (hình bên trái), thì nó gọi phương thứcbuildQ, tạo ra một Widget Tree dựa trên đoạn code Phương thức build cũng đồngthời thêm vào một số các Widget cần thiết khác cho việc render các Widget đã được

khai báo trong code, trong ví dụ trên là ColoredBox, Rawlmage, RichText.

Widgets Element Tree

Container ComponentELement

ỉ | CoLoredBox RenderObjectElement

Row —»> RenderObjectElement

Image Text ComponentELement

RawImage 4 ` ì ; ) RichText RenderObjectElement

Hinh 2.8 Build Phase, generate Element Tree

Trong build phase, Flutter chuyên Widget Tree thành Element Tree, mỗi phan

tử trong Element Tree dai diện cho một Widget trong Widget Tree Hay nói cách

khác, các Widget trong Widget Tree được ánh xạ qua các phan tử ở trong Element

Tree Có hai loại phan tử trong Element Tree:

ComponentElement: Phan tử bao gồm các phan tử khác trong cây (host)

RenderObjectElement: Phan tử tham gia vào công việc layout và paint

Widgets Element Tree Render Tree

RawImage ị : í h RichText e e RenderObjectElement

Hinh 2.9 Build Phase, tao Render Tree

) ComponentElement

13

Sau đó, Flutter tiếp tục tạo ra Render Tree từ các RenderObJectElement trongElement Tree Và sau đó, đưa Renđer Tree vào Paint Phase đề bắt đầu vẽ.

Như em đã đề cập ở trên, để layout một Widget, ta đưa Widget đó vào bên

trong một Widget khác chuyên dùng để layout Ví dụ như Widget Center(), Row(),

Column() Các Widget được tô chức theo cấu trúc cha con theo cây

Trong Layout Phase, các Widget cha sẽ truyền xuống 1 giới hạn về kích thước

cho các Widget con của mình Các Widget con sau đó sẽ lựa chọn kích thước sao

cho không bị vượt quá giới hạn mà Widget cha đưa xuống, và gửi trả lại thông tin

kích thước mà Widget con đã lựa chọn.

Qt là một nền tảng đa nền tảng thường được sử dụng như một bộ công cụ đồ

họa, mặc dù nó cũng rất hữu ích trong việc tạo các ứng dụng CLI Nó chạy trên ba

hệ điều hành máy tính để bản chính, cũng như trên hệ điều hành di động, chăng hạn

như Symbian, Nokia Belle, Meego Harmattan, MeeGo hoặc BB10 và trên các thiết

bị nhúng Các công dành cho Android và iOS cũng đang được phát triển

Qt với các mô-đun như:

e_ QtCore: cung cấp vùng chứa, quan lý luồng, quản lý sự kiện và hơn thé

nữa

© QtGui và QtWidgets: công cụ GUI cho Máy tinh để bàn, cung cấp rất

nhiều thành phan đồ họa dé thiết kế các ứng dụng

© QtNetwork: cung cấp một tập hợp các lớp hữu ích dé đối phó với truyền

thông mạng

14

e QtWebkit: công cụ webkit, cho phép sử dụng các trang web va ứng

dung web trong ứng dụng Qt.

© QtSQL: một lớp trừu tượng SQL RDBM day đủ tính năng có thé mở

rộng với các trình điều khiển riêng, hỗ trợ ODBC, SQLITE, MySQL và

PostgreSQL có sẵn ngay lập tức e_ QtXML: hỗ trợ phân tích cú pháp XML đơn giản (SAX) và DOM

e QiXmlPatterns: hỗ trợ xác thực XSLT, XPath, XQuery va Schema

2.4 Thư viện CAN

Để cho giao diện có thể giao tiếp được với phần cứng xe máy, ta cần đọc các tín

hiệu thể hiện cho trạng thái từ xe Bên phía công ty Bosch Global Software

Technologies sử dụng và cung cấp giao tiếp CAN để truyền tải tín hiệu từ phần

cứng xe lên trên giao diện Đây là thư viện sử dụng trong nội bộ công ty, nên chúng

em xin phép chỉ nhắc tới chứ không cung cấp hình ảnh hay nói kĩ hơn về phần này

2.4.1 CAN là gì?

CAN là viết tắt của Controller Area Network CAN là một giao thức truyềnthông nối tiếp không đồng bộ được giới thiệu vào năm 1986 bởi Robert Bosch Giao

thức CAN là một giao thức dựa trên thông điệp không dựa trên địa chỉ là dữ liệu

được truyền có sẵn cho tất cả các nút và sự lựa chọng của người nhận để nhận dữ

liệu hay không.

Các nút CAN được kết nối trên hai dây (CAN_H và CAN L) cáp xoắn đôi(được gọi là bus CAN) được kết thúc bằng điện trở 120O dé ngăn chặn sự phản xa

Về cơ bản CAN được thiết kế dé thay thé hệ thống dây điện thông thường được

sử dụng ngày xưa trong ô tô dé liên lạc giữa các ECU

Trong hệ thống ô tô hiện đại, có nhiều ECU cho các hệ thống phụ khác nhau

như bộ điều khiển động cơ, hệ thống lai, hệ thống treo, ADAS, v.v Kết nối vớinhau là điều cần thiết, điều này sẽ rất tốn kém và phức tạp thông qua hệ thống dây

thông thường trong khi có thé cung cấp một giải pháp kinh tế và thích hợp

Hình 2.11 là một ví dụ về giao tiếp CAN

15

CAN Node CAN Node CAN Node

Ban dau CAN duoc phat triển bởi Bosch dé liên lạc trong xe 6 tô chở khách

nhưng ngày nay đã ngày càng phong phú do các tính năng của nó, nó được sử dụng

trong nhiều ngành công nghiệp

e Trong hệ thống giao tiếp (phương tiện đường sắt, máy bay, hang hải,

V.V.)

e Tu động hóa trong nhà và tòa nhà

e Trong hệ thống điều khiển máy công nghiệp

e Trong máy di động (thiết bị xây dựng và nông nghiệp)

e Trong các thiết bị y tế và tự động hóa phòng thí nghiệm

2.4.3 Các tính năng của giao thức CAN

Giao thức CAN rất phong phú trong các tính năng thúc đây người ta nên sửdụng dé liên lạc dữ liệu:

e Tính linh hoạt trong cấu hình: Tất cả các nút được kết nối trên một các

vi sai được kết thúc bằng một thanh ghi Bất kì nút nào cũng có thểđược kết nối hoặc ngắt kết nối mà không làm ảnh hưởng đến các nút

khác trên mạng.

16

CAN là giao thức dựa trên thông điệp: Bất kỳ nút nào cũng thể phátthông báo trên CAN Bus và tất cả các nút khác có thể nghe thông báo

đã phát này bao gồm cả mát phát nhưng người nhận có lựa chọn nhận

thông báo hay không, tức là đó không phải là giao thức dựa trên địa chỉ

sử dụng cho truyền tải ngang hàng

CAN cung cấp giao tiếp đa tổng thể: như chúng ta đã thảo luận ở trên,

bat kỳ nút nào cũng có thé truyền / nhận bat kì lúc nào có nghĩa là bat kì

ai cũng có thé điều khiển CAN bus va bắt đầu giao tiếp và tính năng

này làm cho CAN thích ứng hơn trong ngành công nghiệp ô tô vì có

nhiều ECU quan trọng về an toàn như nguồn và các thông báo từ cácECU này cần hành động ngay lập tức

CAN cung cấp ưu tiên thông báo: Trong một chiếc xe, nhiều ECU rất

quan trọng về an toàn, do đó, thông báo sẽ được xử lý ở mức độ ưu tiên

cao hơn và giao thức CAN thực hiện điều đó bang cách gan giá trị nhậndạng thấp hơn Vì thế nhà sản xuất có thé quyết định ở mức độ ưu tiên

của thông báo bằng cách gán cho chúng giá trị số nhận dạng

CAN có tính năng CSMA/CA và CSMA/CD có sẵn: Tính năng tránh

va cham đa truy cập cảm nhận sóng mang được sử dung dé kiểm tra

trạng thái bus và nếu nó rảnh thì nút sẽ truyền dữ liệu hoặc nó sẽ đợi

trạng thái không hoạt động CSMA/CD là phát hiện xung đột có nghĩa

là nó sẽ chỉ đạo dừng truyền nếu dit liệu bị hỏng trên CAN bus (có

nghĩa là dữ liệu bị trộn lẫn với dữ liệu Node khác tức là xung đột) Cách

truyền này tiết kiệm thời gian và đữ liệu được truyền khi bus nhàn rỗi

Tính năng phát hiện lỗi và cấu hình lỗi - Mọi nút CAN đều có trạng

thái tự phục hồi và chân đoán lỗi Mỗi nút đều có TEC (Bộ đếm lỗi

truyền) và REC (Bộ đếm lỗi nhận) dé phân loại trạng thái lỗi của nó (lỗi

Hoạt động, BỊ động, Tắt xe buýt) Nếu nút CAN đạt đến trạng thái

Bus-OFF thì nó sẽ tự ngắt kết nối khỏi Mạng CAN mà không làm phiền các

nút khác Tính năng này làm cho giao thức CAN rat đáng tin cậy débiết thêm về phát hiện lỗi và sửa chữa

17

e_ CAN Cung cấp tốc độ tốt với tinh năng giảm nhiễu - Giao thức CAN

cung cấp tốc độ tối đa lên đến 1 Mbps cho chiều dai bus CAN 40 m

BusAN sử dung cáp vi sai giúp giảm đàm thoại chéo (nhiễu) va nhiễu

điện từ Dé biết thêm chi tiết về lớp vật lý

e Ngoài các giao thức CAN này có các tính năng mạnh mẽ khác Nó cung

cấp các tính năng tích hợp trong bộ điều khiển CAN như đồng bộ hóa

các nút, khung kiểm tra tính toàn vẹn thông qua cơ chế CRC

2.5 Các công cụ được sử dụng để đo hiệu năng

2.5.1 QML Profiler (đành cho Qt)

2.5.1.1 QML Profiler là gi?

Ta có thé sử dung QML Profiler dé tìm nguyên nhân gây ra các sự cô hiệu

suất điển hình trong ứng dụng của mình, chăng hạn như sự chậm chap va giao

diện người dùng không phản hồi Nguyên nhân điển hình bao gồm thực thi quánhiều JavaScript trong quá ít khung Tất cả JavaScript phải trả về trước khiluồng GUI có thể tiếp tục và các frame sẽ bị trễ hoặc loại bỏ nếu luồng GUI

chưa sẵn sàng

Một nguyên nhân điển hình khác cho các vấn đề về Performance là tạo, vẽ

hoặc cập nhật các mục không nhìn thay, điều này làm mat thời gian trong chuỗi

GUI [5]

2.5.1.2 Sử dung QML profiler:

Dé có thé lập hồ sơ một ứng dung, ta phải thiết lập gỡ lỗi QML cho dự

án Trong chế độ Projects, chọn một kit có phiên bản Qt 4.7.4 trở lên Chọn

Analyze > QML Profiler dé profile ứng dụng hiện tại Chọn nút Start dé khởi

động ứng dụng từ QML profiler.

Khi bắt đầu phân tích một ứng dụng, ứng dụng đó sẽ được khởi chạy và

QML profiler ngay lập tức bắt đầu thu thập dir liệu Điều này được biểu thi bằng

thời gian chạy trong Elapsed field.

18

Dữ liệu được thu thập cho đến khi ta chọn nút Enable Profiling Việc thu

thập dữ liệu cần có thời gian và do đó, có thé có độ trễ trước khi dữ liệu đượchiển thị

Chọn nút Disable Profiling dé tắt tính năng tự động bắt đầu thu thập dữ liệu

khi một ứng được khởi chạy Việc thu thập dữ liệu bắt đầu khi ta bam nút một

lần nữa

2.5.1.3 Phân tích dữ liệu đã thu thập:

Timeline View hiển thị các biểu diễn đồ hoa của việc thực thi QML vàJavaScript và hình anh của tất cả các sự kiện được ghi lại

QML Profiler >| FE

Selection

Siart 798ms End: 248 ms

Hình 2.12 Cửa số làm việc QML Profiler

Mỗi hàng trong timeline (6) mô tả một loại sự kiện QML đã được ghi lại Di

chuyển con trỏ trên một event trên một hàng dé xem event đó mat bao lâu và vị

trí trong source code mà sự kiện đang được gọi Dé chỉ hiển thị thông tin khi

một sự kiện được chọn, hãy tắt nút View Event Information trên Mouseover (4)

19

Outline (10) tóm tắt khoảng thời gian dữ liệu được thu thập Kéo phạm vi thu

phóng (8) hoặc nhấp vào đường viền dé di chuyền trên đường viền Ta cũng có

thể đi chuyển giữa các event bằng cách chọn nút Jump to Previous Event

và Jump to Next Event (1).

Chọn nút Show Zoom Slider (2) dé mở một thanh trượt mà có thé sử dung

dé đặt mức thu phóng Ta cũng có thé kéo các tay cầm thu phóng (9) Dé đặt lạimức thu phóng mặc định, hãy nhấp chuột phải vào dòng thời gian dé mở menu

đài của range cho biệt frame rate của sự kiện.

Ta cũng có thé sử dụng Event Range dé đo độ trễ giữa hai sự kiện liên tiếp

nhau Đặt một range giữa điểm kết thúc của event đầu tiên và điểm bắt đầu củaevent thứ hai Trường Duration hiên thị độ trễ giữa các sự kiện tinh bằng mili

giây.

Đề phóng to Event Range, ta nhấp đúp vào Event Range đó

Để thu hẹp phạm vi hiện tại trong các chế độ xem Timeline, Statistics vàFlame Graph, ta nhấp chuột phải vào range và chọn Analyze Current Range Để

quay lại full range, hay chon Analyze Full Range trong menu ngữ cảnh.

Để loại bỏ một phạm vi sự kiện, hay đóng hộp thoại Selection

2.5.2 Dart Devtools (dành cho Flutter)

2.5.2.1 DevTools là gi?

DevTools là một bộ công cu gỡ lỗi và đo hiệu suất cho Dart va Flutter [4]

20