1.2 Mục tiêuPhát triển hệ thống các giải pháp ứng dụng trên thiết bị đi động và website để giúp người nông dan có thể chuẩn đoán bệnh, tra cứu cách phòng trị, kết nối chuyên gia là một n
Trang 1ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THONG TIN
KHOA KY THUẬT MAY TÍNH
Võ Hoài Nam
Lé Trọng Duy
l KHÓA LUẬN TOT NGHIỆP
-THIET KE HE THONG HO TRỢ TƯ VAN CHAM SOC BENH TREN LA CAY CA CHUA UNG DUNG
KY THUAT MAY HOC
DESIGNING A TREATMENT ASSISTANT SYSTEM FORTOMATO LEAF DISEASE USING MACHINE LEARNING
TECHNIQUE
TP Hồ Chí Minh, Năm 2022
Trang 2ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THONG TIN
KHOA KY THUẬT MAY TÍNH
V6 Hoai Nam - 17520786
Lé Trong Duy - 17520396
; l KHÓA LUẬN TOT NGHIỆP
-THIET KE HE THONG HO TRỢ TƯ VAN CHAM SOC BENH TREN LA CAY CA CHUA UNG DUNG
KY THUAT MAY HOC
DESIGNING A TREATMENT ASSISTANT SYSTEM FORTOMATO LEAF DISEASE USING MACHINE LEARNING
Trang 3THÔNG TIN HỘI ĐỒNG CHẤM KHÓA LUẬN TỐT NGHIỆPHội đồng chấm khóa luận tốt nghiệp, thành lập theo Quyết định số 62/QD-DHCNTT ngày
14 tháng 02 năm 2022 của Hiệu trưởng Trường Dai hoc Công nghệ Thong tin.
Trang 4LỜI CẢM ƠN
"Trước tiên, chúng em xin được chân thành cảm ơn quý Thay, Cô, Ban giám hiệu trường Daihọc Công nghệ Thông tin, đặc biệt là Thầy, Cô trong khoa Kỹ thuật Máy tính đã tận tìnhgiảng dạy và truyền đạt hết những kiến thức, kinh nghiệm quý báu cho chúng em trong suốtthời gian qua.
Với những kiến thức học trong suốt 4 năm, cùng với những kiến thức mới khi thực hiện
nghiên cứu, nhóm chúng em đã vận dụng chúng vào đề tài này Bên cạnh đó, để thực hiện
đề tài một cách tốt nhất cần nhờ đến sự hướng dẫn của TS Doan Duy - Khoa Kỹ thuật May
tính, anh Tạ Xuân Trường và chị Nguyễn Thị Hoài trong nhóm "Nghiên cứu Nông nghiệp
chính xác" Chúng em muốn bày tỏ lời cảm ơn sâu sắc đến thầy, anh, chị, những người đãquan tâm, tận tình chỉ bảo, hướng dẫn chúng em trong suốt quá trình thực hiện đề tài
Do chưa có nhiều kinh nghiệm làm đề tài cũng như những hạn chế về mặt kiến thức, nênchắc chắn sẽ không tránh khỏi những thiếu sót Rất mong nhận được sự nhận xét, ý kiến
đóng góp quý báu từ phía Thay, Co để bài khoá luận được hoàn thiện hơn
Lời cuối cùng, kính chúc quý Thầy, Cô trường Dại học Công nghệ Thông tin nói chung
và Khoa Kỹ thuật Máy tính nói riêng luôn dồi dào sức khoẻ để đồng hành cùng sinh viên
chúng em trên con đường học tập Nhóm chúng em xin chân thành cảm ơn.
TP.Hồ Chi Minh, năm 2022
Trang 5Mục lục
1 GIỚI THIỆU TONG QUAN 10
12 Mục tiên Qua 11
1.3 Giới hạn của đề tai ee 12
2 GIỚI THIỆU CAC KỸ THUAT DUGC SỬ DUNG 13
212 Xửlýánh 6 5⁄2 eM Ðộ ` — 14 2.1.3 Computer Vision Annotation Tool- CVAT 15
2.15 Python Z @.@ea+.đ4 \ / 16
2.1.6 Convolutional Neural Networks(CNN) 18
2.17 Giới thiệu sơ lược về PyTorch 2 ee 20
2.1.8 Giới thiệu sơ lược về Deteetron2 ee 21 2.1.9 Google Colaboratory (Colab) 200 22
Trang 63 HIEN THUC HỆ THỐNG GIẢI PHÁP NHẬN BIẾT BỆNH
31 Xây dựng bộ dữ liệu
3.11 Thu thập dữ liệu
3.1.2 Phan loại và gan nhãn
3.2 Huấn luyện
3.2.1 Lí do lựa chọn thuật toán
3.2.2 Quá trình huấn luyện
3.3 Hệ thống dụng trên di động và website 3.3.1 Đăng ký và đăng nhập
3.3.2 Ứng dụng
4 KẾT QUA CUA NGHIÊN CỨU 4.1 Về ứng dụng mấy học
411 Bộ dữliệu
412 Độ chnh xác
4.1.3 Total loss 4.1.4 Thời gian phan hdi
4.2 Giao diện ứng dụng hỗ trợ nhà nông
42.1 Đăngký c
4.2.2 Đăng nhập
4.2.3 Ung dụng phân tích bệnh .
4.2.4 Một số tính năng khác
4.3 Giao diện ứng dụng trên website
43.1 Dăngký
43.2 Dang nhập : ‹.
43.3 Trangchủ
4.3.4 Ứng dụng phân tích bệnh .
43.5 Thời tiế
4.3.6 Quản lý người dùng
4.3.7 Hỗ trợ từ chuyên gia
5 KET LUẬN 51 Kếtluận
5.2 Định hướng nghiên cứu trong tương lai
TÀI LIỆU THAM KHẢO
43 43 43 44 44
44
44 46
AT
51
55 55
55
55 57
57
58 58
59
61 63 66 66 67
68
68
69
70 71
73
73
73
75
Trang 7Danh sách hình vẽ
2.2 Mô hình các bước xử lý ảnh we ee
2.3 Gan nhãn cho một lá bằng CVAT 2 2
24 Thao tác lấy file JSON được tạo ra bằng CVAT 2.5 Quản ly Dataset bằng công cụ Fifty One cv 2.6 Một số thư viện python hỗ trợ machine learning
2.7 Cấu trúc của CNN ng ee 2.8 Sơ đồ hoạt động của Mask-RCNN Quy 2.9 Ví dụ Mask-RCNN 0 ee ee 2.10 Các loại Object Detection mà Detectron2 hỗ trợ
2.11 Cấu hình Detectron2 0 ch va 2.12 Giao diện lập trình của Android StudiO eee 2.13 Virtual DOM và Real DOM 2.14 Nguyên lý hoạt động Redux 2.0 ee 2.15 Nguyên lý hoạt động của WebSocket 2.2 0 ee 2.16 Stream Socket “UD ee eee 2.17 Datagram Socket kg ky kg 2.18 Sơ đồ hoạt động của WebSocket ee 2.19 Kết nối cloudinary ee 3.1 Hình ảnh lá cây cà chua trong tập dữ liệu
3.2 Công thức tính lÓU Q0 vo 3.3 Sơ đồ hệ thống 3.4 Sơ đồ hoạt động chức năng đăng ký cố co 3.5 Biểu đồ tuần tự chức năng đăng ký ee 3.6 Sơ đồ hoạt động chức năng đăng nhập -5
3.7 Biểu đồ tuần tự chức năng đăng nhập co. 3.8 Sơ đồ hoạt động chức năng phân tích bệnh
3.9 Sơ đồ hoạt động chức năng xem thời tiết
3.10 Sơ đồ hoạt động chức năng tương tác với chuyên gia
3.11 Sơ đồ hoạt động chức năng quản lý người dùng
41 Biểu đồ độ chính xác Ï[OU c2
43 45 46 AT 48
49
50 51 52 53
rc
53 56
Trang 8“Thời gian phan hồi của máy chủ khi chạy CPU và GPU
Giao diện đăng Ký HH hà ee Giao diện xác nhận đăng ký ee
Giao diện đăng nhập và quên mật khẩu
Giao diện phân tích bệnh
Giao điện chuyển tab và phân tích bệnh
Giao điện thời tiét 2.0 TQ va
Giao điện đổ chuông 2Q ee
Giao điện cuộc 8Q ee Giao diện quản lý người dùng Ặ ee Giao diện đăng Ký Q Q Q Q HH ee
Giao điện thời tiét 2 ee
Giao điện quản lý người dùng (hồ sơ) ee
Giao diện quản lý người dùng (chỉnh sửa)
Giao diện quản lý người dùng (kết qua) ee eee
Giao điện nhắn tin ee
Giao diện gọi video hình ảnh ch xo
Trang 9Danh sách bảng
2.1 Bảng so sánh độ chính xác của các thuật toán trên bộ dữ liệu Fujian 20
2.2 Cấu hình có sẵn của Google Colab_ ee 23
3.1 Thông số cấu hình máy tính cccSS So 443.2 Các tham số huấn luyện Detectron2 45
3.3 Bang đặc tả chức năng đăng ký 2.2 202.2 2.2 000 48 3.4 Bảng đặc tả chức năng đăng nhép 2.200005 50
4.1 Bảng mô tả 10 nhãn được sử dung trong hệ thống chuẩn đoán 55
Trang 10DANH SÁCH TỪ VIẾT TẮT
IOT Internet of Things 10
CVAT Computer Vision Annotation Tool 14
CNN Convolutional Neural Networks 16
CPU Central Processing Unit 20
GPU Graphics Processing Unit 20
TPU Tensor Processing Unit 20
IDE Integrated Development Environment 22
SDK Software Development Kit 22
DOM Document Object Model 26
API Application Programming Interface 30
TCP Tranmission Control Protocol 31
UDP User Datagram Protocol 31
IOU Intersection over Union 45
Trang 11TÓM TẮT KHÓA LUẬN
“Trong ngành nông nghiệp, mầm bệnh là nguyên nhân chính ảnh hưởng tới chất lượng và
sản lượng của cây trồng Việc chuẩn đoán sớm các bệnh và nhanh chóng tìm ra giải pháp
khắc phục sẽ mang lại hiệu quả cao trong quá trình canh tác và tránh được các tổn thất
về thời gian và kinh tế Do đó, nhóm nghiên cứu quyết định sẽ xây dựng một hệ thống ứng
dụng giúp chuẩn đoán sớm bệnh trên cây trồng, gợi ý giải pháp phòng trị phù hợp, nhanh
chóng Cây cà chua là một trong những loại cây phổ biến được sản xuất với số lượng lớn vớigiá trị thương mại cao, phù hợp với các đối tượng nhà nông, hay cá nhân có điều kiện về
kinh tế hạn chế Vì là một trong những loài cây phổ ăn quả phổ biến nhất nên khi có mầm
bệnh, sẽ gây ảnh hưởng lớn đến chất lượng của cây và nền kinh tế trong nông nghiệp
Nhận biết bệnh trên lá cây cà chua cần phải áp dụng kỹ thuật xử lý hình ảnh với độ chínhxác cao Vì vậy thuật toán phân đoạn đối tượng(Instance segmentation) sẽ là thuật toán tối
itu hơn so với các thuật toán khác Cụ thể hơn là sử dụng mô hình máy học Mask-RCNN
với hơn 10000 ảnh đã qua xử lý (segmentation) Hệ thống ứng dụng được thiết kế trên nền
tảng di động và website để có thé dé dang tiếp cận tới mọi đối tượng người dùng, đặc biệt
là người nông dân.
Khoá luận tốt nghiệp này đã xây dựng một hệ thống ứng dụng giúp chuẩn đoán bệnh và
gợi ý giải pháp có thể giúp người nông dân gia tăng năng suất canh tác, giảm thiểu rủi ro
về kinh tế Ứng dụng với thiết kế đơn giản dé dùng, đặc biệt có khả năng giao tiếp trực tiếp
với chuyên gia qua email hoặc video call để giải đáp những thắc mắc, gia tăng độ chính xáckhi tìm cách giải quyết mầm bệnh
Trang 12Chương 1
GIỚI THIEU TONG QUAN
1.1 Ly do thực hiện đề tài
Cuộc Cách mạng công nghiệp 4.0 và mạng kết nối vạn vật (Internet of Things - IoT) dang
làm thay đổi mô hình phát triển nông nghiệp trên toàn thế giới Xu hướng phát triển nông
nghiệp hiện nay tại các quốc gia, đặc biệt tại các quốc gia phát triển đang chuyển dịch dần
sang mô hình mới “Nong nghiệp chính xác (Precise agriculture - PA)", mô hình nông nghiệp
được áp dụng các thành tựu khoa học để tạo ra hệ sinh thái nông nghiệp và cung cấp các
dịch vụ cho người nông dân tham gia Nhiều quốc gia đã áp dụng mô hình nông nghiệp
chính xác trong nhiều năm qua như Nhật Bản, Uc, An Độ, Băng-la-desh Nhiều loại cây
trồng là đối tượng nghiên cứu, phổ biến nhất là cà chua, xoài và táo
Tại Việt Nam, phát triển nông nghiệp chính xác đã được bắt đầu trong thập niên gần đâyvới một số công trình nghiên cứu và mô hình canh tác mới Cụ thể, năm 2017, tác giả Nguyễn
Đình Thành và các cộng sự giới thiệu nghiên cứu “Xây dựng giải pháp Ứng dụng công nghệ
IoT và Thủy canh hồi lưu trong sản xuất sạch đạt tiêu chuẩn Vietgap” giúp thay đổi mô hình
canh tác truyền thông và 4p dụng công nghệ vào quản lý quy trình chăm sóc [11] Nhóm
giải pháp NextFarm xây dựng hệ sinh thái cho nông nghiệp công nghệ cao trong ngành
trồng trọt [12] Nhóm giải pháp gồm 4 nhóm sản phẩm ứng dụng chính: NextCRM - Phần
mềm quản lý bán hàng, NextERP - Phần mềm tự động hóa quy trình nông trại, NextFarmFertikit - Hệ thống cham phân dinh dưỡng tự động, NextFarm QR Check - Phần mềm truyxuất nguồn gốc
Mặc dù có nhiều công trình nghiên cứu và các mô hình giải pháp đã được giới thiệu, nhưng
đa số các công trình nghiên cứu là những sản phẩm rời rạc, chưa có sự kết nối, chưa cungcấp các dịch vụ mà người nông dân có thể tham gia trực tiếp ngoài thao tác tra cứu thông
tin đơn thuần Đặc biệt, các giải pháp vẫn chưa có sự kết nối và tư vấn của các chuyên gia
nông nghiệp để hỗ trợ người nông dân một cách trực tiếp và kịp thời
Trang 131.2 Mục tiêu
Phát triển hệ thống các giải pháp ứng dụng trên thiết bị đi động và website để giúp người
nông dan có thể chuẩn đoán bệnh, tra cứu cách phòng trị, kết nối chuyên gia là một nhucầu lớn và có tiềm năng phát triển trong tương lai gần Do đó, nhóm thực hiện đề xuất dé
tài “Thiết kế hệ thống hỗ trợ tư vấn chăm sóc bệnh trên lá cây cà chua ứng dụng kỹ thuật
máy học” Đề tài cung cấp các ứng dụng trên thiết bị di động và website để người nông dân
có thể dé dàng tham gia vào hệ sinh thái nông nghiệp, quản lý quá trình canh tác và tương
tác trực tiếp với các chuyên gia nông nghiệp Trong đề tài nghiên cứu này nhóm chọn cây càchua làm mục tiêu nghiên cứu của mình Bên cạnh đó, nhóm cũng hướng đến xây dựng cơ
sở dữ liệu về bệnh trên cây cà chua phục vụ các nghiên cứu chuyên sâu trong nông nghiệp
Cà chua (tên sinh học: Solanum lycopersicum) phát triển trên hầu hết mọi loại đất thoát
nước tốt và 9/10 nông dân trồng cà chua trên ruộng của họ Nhiều người làm vườn cũng
trồng cà chua trong vườn của họ để sử dụng cà chua tươi và có thể cảm nhận được hương vị
ngon của thực phẩm tươi mát Tuy nhiên, người nông dân và người làm vườn đôi khi khôngthể biết được liệu vườn cà chua của mình có thực sự được phát triển một cách tốt nhất haykhông Đôi khi cà chua có thể có những đốm den trông xấu và nhiễm bệnh ở phần dưới cùnghoặc đôi khi các bệnh xuất hiện mà mắt thường không thể thấy được
Vì vậy trong đề tài nghiên cứu này, nhóm đã đề xuất ra phương pháp là thiết kế ra một
dụng có thể xác định bệnh trên cây cà chua sau khi phân tích hình ảnh của lá Công việc
này sẽ giải quyết các vấn đề của nông dân về xác định bệnh hại của cây trồng và được tưvấn chăm sóc cây trồng một cách nhanh chóng và hiệu quả Điều này sẽ giúp họ chữa khỏi
bệnh cho cây trồng kịp thời, giúp tăng cả về chất lượng và sản lượng thành phẩm, đồng thời
giúp tăng lợi nhuận cho người nông dân Với mục đích thử nghiệm, nhóm đã sử dụng bộ dữ
liệu về lá cà chua được cung cấp bởi Viện Cây ăn trái Miền Nam [13] Phạm vi trong đề tài
nghiêm cứu gồm chín bệnh phổ biến là: bệnh vàng xoăn lá, bệnh đốm lá Septoria, bệnh đốm
vi khuẩn, bệnh úa muộn, bệnh cháy lá sớm, bệnh kham lá, bệnh mốc xám, bệnh ve nhện,
bệnh đốm vòng [7,8| Do đối tường phân tích bệnh là lá cây nên cần phải có mô hình máy
học và thuật toán phù hợp để đạt được kết quả tốt nhất Qua phân tích và tìm hiểu [1-6]
nhóm đã lựa chọn mô hình máy học phù hợp là Mask-RCNN với thuật toán phân đoạn đối
tượng, thuật toán giúp chúng ta có thể phân đoạn các đối tượng một cách chính xác.
Sử dụng kết quả nhận biết bệnh của mô hình máy học, nhóm sẽ phát triển ứng dụng cho
phép người dùng có thể chụp ảnh lá cây bị bệnh ngay trên thiết bị di động của mình, qua
quá trình phân tích sẽ đưa ra kết quả, tình trạng bệnh trên lá cây đồng thời đề xuất cáccách phòng trị phù hợp Hơn nữa, hệ thống ứng dụng còn hỗ trợ tính năng tạo kết nối với
các chuyên gia giúp người dùng hiểu rỏ hơn về các loại bệnh, trau dồi kiến thức của mình
và cũng có thể được hỗ trợ giải đáp các thắc mắc liên quan Ứng dụng cũng sẽ có các bàiviết và tài thiệu liên quan để mọi người cùng nhau tìm hiểu và nang cao kiến thức về các
bệnh trên cây trồng [9, 10]
Trang 141.3 Giới hạn của đề tài
1 Cơ sở dit liệu bệnh trên cà chua với hơn 10.000 ảnh được gắn nhãn, khoanh vùng đối
tượng (segmentation).
2 Hệ thống máy học chẩn đoán bệnh hỗ trợ các chức năng phan tích các loại bệnh, đưa
ra các biện pháp chăm sóc phù hợp với từng loại.
3 Các tính năng chính của ứng dụng:
® Cho phép chụp anh lá cây bị bệnh ngay trên thiết bi di động.
e Phân tích các loại bệnh trên lá cây cà chua.
» Gợi ý các phương pháp chăm sóc phù hợp cho từng loại bệnh.
œ Hỗ trợ kênh liên lạc trực tiếp với chuyên gia về công nghệ và nông nghiệp.
© Các bài viết, tài liệu về nông nghiệp liên quan
Trên đây là giới thiệu tổng quan về lý do thực hiện, mục tiêu và giới hạn của đề tài O
chương sau chúng ta sẽ đi sâu hơn về phần phân tích và giới thiệu về các kỹ thuật được
dùng trong quá trình nghiên cứu và phát triển ứng dụng
Trang 15Chương 2
GIỚI THIỆU CÁC KỸ THUẬT
ĐƯỢC SỬ DỤNG
Ỏ chương này, chúng ta sẽ tìm hiểu về mặt lý thuyết các công cụ, kỹ thuật được sử dụng
trong suốt quá trình thực hiện dự án Nội dung được chia thành 3 phần chính:
Dữ liệu được thu thập dựa trên sự hợp tác với các chuyên gia nông nghiệp từ Trung tâm
chuyển giao Công nghệ thông tin, Viện Cây ăn trái Miền Nam, các tài liệu tham khảo có
sẵn từ các nghiên cứu trước, để xây dựng cơ sở dữ liệu về bệnh lá cây cà chua (trên 10.000
ảnh) Tổng cộng có 10 loại nhãn khác nhau, tương ứng với 9 loại bệnh lá và lá khoẻ mạnh
Trang 162.1.2 Xử lý ảnh:
Xử lý ảnh là đối tượng nghiên cứu của lĩnh vực thị giác máy, là quá trình biến đổi từ một
ảnh ban đầu sang một ảnh mới với các đặc tính và tuân theo ý muốn của người sử dụng
Xử lý ảnh có thể gồm quá trình phân tích, phân lớp các đối tượng, làm tăng chất lượng,
phân đoạn và tách cạnh, gán nhãn cho vùng hay quá trình biên dịch các thông tin hình ảnh
của ảnh Cũng như xử lý dữ liệu bằng đồ hoạ, xử lý ảnh số là một lĩnh vực của tin học ứngdụng Xử lý dit liệu bằng đồ họa đề cập đến những ảnh nhân tạo, các ảnh này được xem xétnhư là một cấu trúc dữ liệu và được tạo bởi các chương trình Xử lý ảnh số bao gồm các
phương pháp và kỹ thuật biến đổi, để truyền tải hoặc mã hoá các ảnh tự nhiên Mục đích
của xử lý ảnh gồm:
© Biến đổi ảnh làm tăng chất lượng ảnh
® Tự động nhận dạng ảnh, đoán nhận ảnh, đánh giá các nội dung của ảnh.
Nhận biết và đánh giá các nội dung của ảnh là sự phân tích một hình ảnh thành những
phần có ý nghĩa để phân biệt đối tượng này với đối tượng khác, dựa vào đó ta có thể mô tảcấu trúc của hình ảnh ban đầu Có thể liệt kê một số phương pháp nhận dạng cơ bản nhất
nhận dạng ảnh của các đối tượng trên ảnh, tách cạnh, phân đoạn hình ảnh,
Các bước xử lý ảnh được thể hiện chỉ tiết trong hình 2.2, quá trình xử lý gồm 5 bước:
Biểu diễn và mô Nhận dạng và
© Tiền xử lý: sau bộ phận thu nhận ảnh,ảnh có thể bị nhiễu hoặc độ tương phản thấp
nên cần đưa vào bộ tiền xử lý để nâng cao chất lượng ảnh.
® Chức năng: lọc nhiễu, tăng hoặc giảm độ tương phan.
® Phân đoạn ảnh : là tách ảnh đầu vào thành các vùng để biểu diễn , phân tích và nhận
dạng ảnh.
Trang 17® Biểu diễn ảnh : các vật thể sau khi được phân đoạn có thể được mô tả dưới dạng chuỗi
các điểm và biểu diễn ảnh thường được sử dụng khi ta quan tâm đến đặc tính bên
trong của vùng ảnh Vd : đường cong, hình dang Quá trình biểu dién ảnh là việc biến
đổi các số liệu của ảnh thành dạng thích hợp và cần thiết cho quá trình xử lý bằng
máy tính.
® Nhận dạng và nội suy : là quá trình phân loại vật thể dựa trên cơ sở các chỉ tiết mô tả
vật thể và nhận dạng ảnh là quá trình xác định ảnh và quá trình này thu được bằng
cách so sánh với mẫu đã được lưu trữ từ trước.
® Co sở tri thức : các quá trình xử lý liệt kê trong hình thức xử lý ảnh Dược thực hiện
dưới sự giám sát và thực hiện dựa trên cơ sở các kiến thức về lĩnh vực xử lý ảnh
2.1.3 Computer Vision Annotation Tool - CVAT
Giới thiệu
CVAT(Computer Vision Annotation Tool) là công cu dùng để hỗ trợ gần nhãn cho thuật
toán về thị giác máy tính được phát triển bởi Intel CVAT hỗ trợ các công việc như là: object
detection, image classification, và image segmentation Dé xử lý dữ liệu chuẩn bị cho quá
trình train, ta sử dụng tool CVAT để gán nhãn cho từng bộ ảnh.
ones
Hình 2.3: Gán nhãn cho một lá bằng CVAT
Sau khi gần nhãn xong bộ dữ liệu cần sử dụng, bước tiếp theo ta sẽ tiến hành trích xuất file
thông tin gần nhãn(annotation file) để sử dung cho việc xây dựng mô hình huấn luyện(quá
trình training).
2.1.4 Fifty One
Giới thiệu
Fifty One là công cu mã nguồn mở dùng quản lý, xây dụng bộ dataset chất lượng cao phục
vụ cho mô hình thị giác máy tính.
Trang 18a 48 Septoria Jeat spot
en Aclem Ÿ
&b 1á Tomato Yellow Leaf Curt Virus
& =
Hình 2.4: Thao tác lấy file JSON được tạo ra bằng CVAT
Sự thành công của một mô hình thị giác máy tính được quyết định phần lớn bởi bộ
dataset Và nếu không có các công cụ phù hợp thì việc cải thiện chất lượng dataset sẽ rấttốn thời gian và không hiệu quả Chính vì thế, Fifty One cung cấp các hỗ trợ có sẵn để tối
ưu quá trình phân tích dataset của bạn Nó có thể giúp bạn quản lý nhãn, đánh giá mô hình
máy học, tìm kiễm lỗi chú thích, Ngoài ra, Fifty One được hỗ trợ chạy trên khá nhiều nền
tang quen thuộc giúp ban dé dang cài dat và sử dụng.
2.1.5 Python
Giới thiệu
Python là ngôn ngữ lập trình hướng đối tượng, cấp cao, mạnh mẽ, được tạo ra bởi Guido
van Rossum Nó dé dàng để tìm hiểu và dang nổi lên như một trong những ngôn ngữ lập
trình nhập môn tốt nhất cho người lần đầu tiếp xúc với ngôn ngữ lập trình Python hoàn
toàn tạo kiểu động và sử dụng cơ chế cấp phát bộ nhớ tự động Python có cấu trúc dữ liệucấp cao mạnh mẽ và cách tiếp cận đơn giản nhưng hiệu quả đối với lập trình hướng đối
Trang 19tượng Cú pháp lệnh của Python là điểm cộng vô cùng lớn vì sự rõ ràng, dễ hiểu và ách gõ
linh động làm cho nó nhanh chóng trở thành một ngôn ngữ lý tưởng để viết script và pháttriển ứng dụng trong nhiều lĩnh vực, ở hầu hết các nền tang
Các đặc điểm của Python
® Ngữ pháp đơn giản, dé đọc.
e Vừa hướng thủ tục (procedural-oriented), vừa hướng đối tượng (object-oriented)
® Hỗ trợ module và hỗ trợ gói (package).
e Xử lý lỗi bằng ngoại lệ (Exception).
© Kiểu dữ liệu động ở mức cao
© Có các bộ thư viện chuẩn và các module ngoài, đáp ứng tất cả các nhu cầu lập trình
© Có khả năng tương tác với các module khác viết trên C/C++ (Hoặc Java cho Jython,
hoặc Net cho IronPython).
® Có thể nhúng vào ứng dụng như một giao tiếp kịch ban (scripting interface)
Python trong Machine learning
Python có rất nhiều thư viện hỗ trợ liên quan tới Machine learning như là: Numpy, Keras,Tensorflow, OpenCV, Vì vậy nó là một trong những ngôn ngữ thong dụng nhất khi dùnglập trình Machine Learning.
Python Libraries for Machine Learning
Trang 202.1.6 Convolutional Neural Networks (CNN)
Giới thiệu
CNN(Convolutional Neural Networks) là một trong những mô hình học sâu phổ biến và có
ảnh hưởng nhiều nhất trong cộng đồng Thị giác Máy tính CNN được dùng trong trongnhiều bài toán như nhân dạng ảnh, phân tích video, ảnh MRI, hoặc cho các bài toán củalĩnh vực xử lý ngôn ngữ tự nhiên, và hầu hết đều giải quyết tốt các bài toán này
CNN cũng có lịch sử khá lâu đời Kiến trúc gốc của mô hình CNN được giới thiệu bởi
một nhà khoa học máy tính người Nhật vào năm 1980 Sau đó, năm 1998 Yan LeCun lần
đầu huấn luyện mô hình CNN với thuật toán backpropagation cho bài toán nhận dang chữviết tay Tuy nhiên, mãi đến năm 2012, khi một nhà khoa học máy tính người Ukraine Alex
Krizhevsky (đệ của Geoffrey Hinton) xây dựng mô hình CNN (AlexNet) và sử dung GPU détăng tốc quá trình huấn luyện deep nets để đạt được top 1 trong cuộc thi Computer Vision
thường niên ImageNet với độ lỗi phân lớp top 5, giảm hơn 10% so với những mô hình truyền
thống trước đó, đã tạo nên làn sóng mãnh mẽ sử dung deep CNN với sự hỗ trợ của GPU dé
giải quyết càng nhiều các vấn đề trong Computer Vision
Trang 21Mask Region-based Convolutional Neural Networks(Mask-RCNN)
Mask Region-based Convolutional Neural Networks (Mask-RCNN) là một thuật toán image segmentation dựa trên CNN Khi chúng ta cho một hình ảnh vào Mask-RCNN sẽ trả ra
nhãn, bounding box và mask của đối tượng cụ thể trong ảnh
'— it
Hình 2.8: Sơ đồ hoạt động của Mask-RCNN
Dưới đây là một vi dụ về output của một ảnh sau khi đưa vào Mask-RCNN và bảng so
sánh tỉ lệ chính xác của các thuật toán.
® Input: Hình ảnh cần detect.
ø® Output: Hình ảnh được trả về kèm theo nhãn, bounding box, mask mỗi màu một đối
tượng riêng biệt.
RolAlign| „.
Hình 2.9: Ví dụ Mask-RCNN
Từ bang 2.1 ta có thể thấy phương pháp Mask-RCNN có độ chính xác trung bình cao
nhất(mAP) là 0.8996
Trang 22Bang 2.1: Bang so sánh độ chính xác của các thuật toán trên bộ dữ liệu Fujian.
Phương pháp mAP
Faster R-CNN-VGG 0.6958 Faster R-CNN-ResNet101 | 0.8976 Mask R-CNN-ResNet101 | 0.8996
2.1.7 Giới thiệu sơ lược về PyTorch
Giới thiệu
PyTorch được định nghĩa là một thư viện machine learning mã nguồn mở cho Python Nó
được sử dụng cho các ứng dụng như xử lý ngôn ngữ tự nhiên Ban đầu nó được phát triểnbởi nhóm nghiên cứu trí tuệ nhân tạo của Facebook và phần mềm Uber's Pyro để lập trình
xác suất
PyTorch được Hugh Perkins phát triển như một trình bao bọc Python cho LusJIT dựatrên khuôn khổ Torch
PyTorch thiết kế lại và triển khai Torch bằng Python trong khi chia sẻ cùng các thư viện
€ lõi cho code phụ trợ Các nhà phát triển PyTorch đã điều chỉnh ma back-end này để chạy
Python một cách hiệu quả Họ cũng giữ nguyên khả năng tăng tốc phần cứng dựa trên GPU
cũng như các tính năng mở rộng đã tạo nên Torch dựa trên Lua-based.
Tinh năng
Các tính năng chính của PyTorch
ø Giao diện thân thiện - PyTorch cung cấp API dé sử dụng; do đó nó được coi là rất đơn
giản để vận hành và chạy trên Python Việc thực thi mã trong khuôn khổ này khá dễ
dàng.
© Sử dung Python - Thư viện này được coi là Pythonic tích hợp trơn tru với ngăn xếp
khoa học dữ liệu Python Do đó, nó có thể tận dụng tất cả các dịch vụ và chức năng
được cung cấp bởi môi trường Python
» Dồ thị tính toán - PyTorch cung cấp một nền tảng tuyệt vời cung cấp đồ thị tính toán
động Do đó người dùng có thể thay đổi chúng trong thời gian chạy Điều này rất hữuích khi nhà phát triển không biết cần bao nhiêu bộ nhớ để tạo mô hình mạng nơron.PyTorch được biết đến với ba cấp độ trừu tượng như được đưa ra dưới đây:
e Tensor - Mang n-chiều bắt buộc chạy trên GPU.
® Variable - Nút trong đồ thị tính toán Lưu trữ dit liệu và gradient
» Module - Lớp mạng nơ-ron sẽ lưu trữ trạng thái hoặc trọng số có thé học được.
Trang 23Ưu điểm
© Dễ dàng để gỡ lỗi và hiểu mã
® Gồm rất nhiều hàm mất mát(loss function).
© Có thé coi đây là phần mở rộng NumPy cho GPU
ø® Cho phép xây dựng các mạng có cấu trúc phụ thuộc vào chính tính toán.
2.1.8 Giới thiệu sơ lược về Detectron2
Giới thiệu
Detetron2 là một Framework để xây dựng bài toán Objeet Detetion and Segmentation Dược
phát triển bới nhóm Facebook AI Research Phiên bản Detectron2 này được cải tiến từ phiên
bản trước đó Detectron2 sử dung Pytorch, điều đặc biệt làm Detectron2 trở lên mạnh mẽ
là bởi vì nó có pre-trained models có sẵn tại Model Zoo.
Keypoint
Panoptic segmentation
Hình 2.10: Các loại Object Detection ma Detectron2 hỗ trợ
Thiét lập cài đặt cơ bản để chạy Detectron2
Cấu hình của Detectron2
Detectron2 được cấu hình dựa trên các thống số như hình 2.11
Trang 24from detectron2.engine import DefaultTrainer
cfg = get_cfg()
cfg.merge_from_file(model_zoo.get_config_file("COCO-InstanceSegmentation/mask_rcnn_X_101_32x8d_FPN_3x.yam1")) cfg.DATASETS.TRAIN = (dataset_train,)
cfg.DATASETS.TEST = (dataset_val,)
cfg.MODEL.NEIGHTS = model_zoo.get_checkpoint_ur1("COCO-InstanceSegmentation/mask_rcnn_X_101_32x8d_FPN_3x.yaml") cfg.SOLVER.IMS_PER BATCH = 2
Hinh 2.11: Cau hinh Detectron2
2.1.9 Google Colaboratory (Colab)
Với A.I, DeepLearning, Google không chi có những sản phẩm dự án đã va dang phat triển.Google còn có công cụ giúp cho các developer phát triển, train model, một cách đễ đàng
nhất đó chính là Google Colab
Giới thiệu
Colaboratory hay còn gọi là Google Colab, là một sản phẩm từ Google Research, nó cho
phép chạy các dòng code python thông qua trình du đặc biệt phù hợp với Data analysis,
machine learning và giáo dục Colab không cần yêu cầu cài đặt hay cấu hình máy tính, mọi
thứ có thể chạy thông qua trình duyệt, bạn có thể sử dụng tài nguyên máy tính từ CPU tốc
độ cao và cả GPUs và cả TPUs đều được cung cấp cho bạn
Colab cung cấp nhiều loại GPU, thường là Nvidia K80s, T4s, P4s and P100s, tuy nhiên
người dùng không thể chọn loại GPU trong Colab, GPU trong Colab thay đổi theo thời gian
Vì là dịch vụ miễn phí, nên Colab sẽ có những thứ tự ưu tiên trong việc sử dụng tài nguyên
hệ thống, cũng như giới hạn thời gian sử dụng, thời gian sử dụng tối đa lên tới 12 giờ
Tại sao nên sử dụng Colab
Sự phát triển mạnh mẽ của Machine learning và Deep learning trong những năm gần đâykhông chỉ bởi các thuật toán, các mô hình tân tiến liên tiếp ra đời mà còn bởi sự phát triểnkhông ngừng của phần cứng, đặc biệt là GPU Việc tính toán về toán học cho Deep Learning
trên CPU có thể mất hàng tháng Nhưng những tính toán này có thể được gán cho GPU để
thực hiện nhanh hơn Việc train Neural Network trên CPU không được khuyến nghị GPU
cần thiết cho việc tính toán ở mức độ cao
Như chúng ta đều biết, GPU rất đắt tiền và các nền tảng đám mây như AWS và GCP
cũng vậy Vậy bạn có thể lấy GPU ở đâu? Colab xuất hiện để giúp giải quyết vấn dé này!Colab cung cấp cho ban GPU Nvidia Tesla K80 m
(tương đương hơn 53 triệu đồng) va là một “con quái
phí có giá khoảng 1,7 lakh Rupee
" thực sự về hiệu suất
Trang 25Bạn có thể sử dụng GPU này để train Neural Network trên đám mây và tận hưởng hiệu
suất nhanh chóng, không có bất kỳ rắc rối nào, cũng như tập trung vào các vấn đề hơn là
đợi hàng giờ để train rồi điều chỉnh hoặc gỡ lỗi cho mô hình.
Hỗ trợ TPU cũng có
TPU, mặc dù hiện tại nó chưa ổn định Tuy nhiên, ban vẫn có thể thử nghiệm với nó
ăn trên Colab Có vẻ như Google Colab hiện cũng đang cung cấp
Bảng 2.2: Câu hình có sẵn của Google Colab
STT | Phần cứng Mô tả
Vi xử lý Intel Xeon với 2
1 CPU lõi @2.30GHz va 13 GB
RAM Tesla K80 với 12GB
2 GPU VRAM GDDR5, vi xử lý
Intel Xeon với 2 lõi
@2.30GHz và 13 GB RAM TPU đám mây với 180
teraflops trên 1 đơn vi
3 TPU tính toán, vi xử lý Intel
Xeon với 2 lõi 2.30 GHz và
Platform: Bất cứ môi trường phần cứng hoặc phần mềm nào mà trong đó có một chương
trình chạy, thì được hiểu như là một Platform Với môi trường runtime riêng cho mình (JRE)
va API, Java được gọi là Platform.
Ngôn ngữ lập trình Java ban đầu được phát triển bởi Sun Microsystems do James Gosling
khởi xướng và phát hành vào năm 1995 Phiên bản mới nhất của Java Standard Edition là
Java SE 8 Với sự tiến bộ của Java và sự phổ biến rộng rãi của nó, nhiều cấu hình đã đượcxây dựng để phù hợp với nhiều loại nền tảng khác nhau Ví dụ: J2EE cho các ứng dụng
doanh nghiệp, J2ME cho các ứng dụng di động.
Các phiên bản J2 mới đã được đổi tên thành Java SE, Java EE và Java ME Phương châm
của Java là "Write Once, Run Anywhere" - viết một lần chạy nhiều nơi, nghĩa là bạn chỉ
cần viết một lần trên window chẳng hạn, sau đó vẫn chương trình đó bạn có thể chạy trên
Linux, Android, các thiết bị J2ME
Trang 26Các tính năng nổi bật của ngôn ngữ lập trình Java
Hướng đối tượng - Trong Java, mọi thứ đều là một Object Java có thổ dé dang mở
rộng và bảo tri vì nó được xây dựng dựa trên mô hình Object.
Nền tang độc lập - Không giống nhiều ngôn ngữ lập trình khác bao gồm cả C và C++,khi Java được biên dịch, nó không được biên dịch thành ngôn ngữ máy nền tảng cụ
thể, thay vào mã byte - nền tảng độc lập Mã byte này được thông dịch bởi máy ảo
(JVM) trên nền tang nào đó mà nó đang chạy
Đơn giản - Java được thiết kế để dé học Néu bạn hiểu khái niệm cơ bản về OOP Java,
sẽ rất dé để trở thành master về java
Bảo mật - Với tính năng an toàn của Java, nó cho phép phát triển các hệ thống không
có virut, giả mạo Các kỹ thuật xác thực dựa trên mã hoá khóa công khai.
Kiến trúc - trung lập - Trình biên dịch Java tạo ra định dạng tệp đối tượng kiến trúctrung lập, làm cho mã biên dich được thực thi trên nhiều bộ vi xử lý, với sự hiện diện
của hệ điều hành Java
Portable - Là kiến trúc tập trung và không có khía cạnh thực hiện phụ thuộc của đặc
tả này làm cho Java khả chuyển Trình biên dịch trong Java được viết bằng ANSI C,
dựng các ứng dụng tương tác có thể chạy trơn tru hơn.
Thông dịch - Mã byte Java được dịch trực tiếp tới các máy tính gốc và không đượclưu trữ ở bất cứ đâu
Hiệu năng cao - Với việc sử dụng trình biên dịch Just-In-Time, Java cho phép thực
hiện hiệu năng cao.
Phân tán - Java được thiết kế cho môi trường phân tấn của Internet
Năng động - Java là năng động hơn C hoặc C++ vì nó được thiết kế dé thích nghỉ với
môi trường đang phát triển Các chương trình Java có thể mang một lượng lớn thôngtin tai runtime mà có thể được sử dung dé xác minh và giải quyết các truy cập vào
các đối tượng tại runtime
Trang 272.2.2 Android Studio
Giới thiệu
Android Studio là IDE chính thức được sử dụng trong phát triển ứng dụng Android dựa
trên IntelliJ IDEA.
Chức năng chính của Android Studio là cung cấp các giao diện giúp người dùng có thể tạo
các ứng dụng và xử lý các công cụ file phức tap sau hậu trường Ngôn ngữ lập trình được
sử dụng trong Android Studio là Java và nó sẽ được cài đặt sẵn trên thiết bị của bạn
Khi sử dụng Android Studio thì bạn chỉ cần viết, chỉnh sửa và lưu trữ chúng trên các dự
án của mình và các file nằm trong dự án đó Déng thời, Android Studio còn cung cấp quyền
truy cập vào Android SDK.
Hình 2.12: Giao diện lập trình của Android Studio
Ngoài ra, bạn có thể xem Android Studio là đuôi cho code Java cho phép nó chạy trơn
tru trên các thiết bị Android rồi tận dụng được lợi thế của phần cứng gốc Bạn chỉ cần sử
dụng ngôn ngữ lập trình Java để có thể viết chương trình, khi đó Android SDK sẽ có nhiệm
vụ kết nối các phần này lại với nhau
Khi đó, Android Studio sẽ kích hoạt để thực hiện chạy code và thông qua trình giả lập
hoặc dựa vào bất kỳ phần cứng giúp kết nối với thiết bị Sau đó, bạn có thể gỡ rối cho
chương trình của mình ngay khi nó chạy và nhận phản hồi giúp giải thích các sự có,
Cho đến hiện nay, Google đã và đang rất nỗ lực để giúp cho Android Studio sẽ trở nên
mạnh mẽ và hữu ích hơn Khi bạn gõ code, nó sẽ giúp bạn cung cấp danh sách gợi ý hoàn
thành để giúp người dùng có thể hoàn thiện được dong code đó Đây là một trong những
chức năng rất hữu ích đề phòng cho trường hợp người dùng không nhớ chính xác cú phápgiúp bạn tiết kiệm thời gian hiệu quả hơn
Trang 28Cấu hình yêu cầu để cài Genymotion
© Hệ điều hành: Windows 10 64 bit
® Bo nhớ trong: Tối thiểu 4GB RAM, yêu cầu 8GB RAM
° 6 cứng: Tối thiêu 8GB 6 trống (IDE + Android SDK + Giả lap Android).
vời dùng để dành cho việc thử nghiệm ứng dụng Dự án này đã phát triển từ phiên bản
AndroidVM cũ và bây giờ, Genymotion đã đến tay nhà phát triển với giao diện và tính năng
mới trong cài đặt và nhiều hơn thế nữa Theo đánh giá của giới lập trình viên thì đây làmáy ảo chạy nhanh rất nhiều lần so với Android Emulator và giúp tiết kiệm thời gian khi
test ứng dụng.
Genymotion sử dụng công nghệ tạo máy ảo từ VirtualBox nên có thể tạo và chạy nhiều
máy ảo cùng lúc Do đó, để sử dụng được phần mềm gid lập android Genymotion, máy tính
bạn cần có bản Android SDK và trình máy ảo VirtualBox mới nhất, còn tài khoản từ phần
mềm được đăng ký hoàn toàn miễn phí Bạn có thể lựa chọn các máy ảo khác nhau như
HTC One, Xperia Z, Samsung Galaxy $4, Nexus, một số tablet
Genymotion có khả năng tăng tốc độ xử lý đồ hoa của OpenGL để có chất lượng xem 3Dtốt hơn, bạn có thể chạy nhiều ứng dụng Android trên máy tính, chơi nhiều trò chơi đặc sắcchỉ hỗ trợ trên di động Một ưu điểm là chương trình cho phép cài đặt các ứng dụng trực
tiếp từ Google Play, xem ở chế độ toàn màn hình và trải nghiệm nhiều tính năng bất ngờthú vị trên máy tính.
Genymotion cũng giúp quản lý các loại cảm biến như trình trạng pin của laptop, GPS,
máy ảnh trên di động Người dùng cũng có thể kiểm soát các máy ảo từ máy chủ, kiểm soát
độ phân giải màn hình, dung lượng bộ nhớ, dung lượng CPU từ máy ảo Đây là ứng dụng
được đánh giá rất tốt từ nhiều người dùng, hơn cả BlueStacks
Một số ưu điểm của Genymotion
© Tăng tốc độ xử lý đồ họa của OpenGL để mang tới cho người dùng một trải nghiệm
xem 3D với chất lượng tốt nhất
© Cài đặt ứng dụng trực tiếp từ Google Play.
© Có chế độ xem "full" màn hình.
Trang 29Khởi động và chạy các máy ảo cùng lúc.
Tùy chỉnh máy ảo: độ phân giải màn hình, dung lượng bộ nhớ, dung lượng CPU.
hình yêu cầu để cài Genymotion
Card đồ họa OpenGL 2.0
CPU hỗ trợ VT-x hoặc AMD-V và kích hoạt thiết lập BIOS
RAM: Tối thiểu 2 GB.
Dung lượng trống của ổ cứng: Ít nhất là 2GB để cài đặt Genymotion và các máy ảo
chạy Genymotion (đây chỉ là mức yêu cầu tối thiểu, bởi nếu bạn sử dụng nhiều máy
ảo cùng lúc và có nhiều ứng dụng, phần mềm cài đặt thì dung lượng trống có thể được
yêu cầu nhiều hơn gấp 4 lần)
Đảm bảo có kết nối Internet
Độ phân giải màn hình: ít nhất 1024 x 768 pixel
Oracle VirtualBox 4.1 trở lên.
Cần có tài khoản để sử dụng
2.3 Nền tảng website
Ỏ phần thiết kế ứnng dụng website nhóm sử dung một số thư viện, framework cũng như
một số kỹ thuật khác như:
Thư viện reacjs: để xây dung giao diện người dùng, framework ExpressJs: để cung
cấp nhiều tính năng mạnh mẽ trên nền tang web hỗ rợ các phương thức HTTP và
middleware tạo ra một API vô cùng mạnh mẽ và dé sử dụng.
Thu viện redux: giúp quản lý các trạng thái cho các ứng dụng JavaScript, duy tri tính
nhất quán trong suốt ứng dụng của bạn, giúp gỡ lỗi và kiểm tra dé dang hơn
Thu viện axios: giúp chúng ta thực hiện thao tác với các website hoặc API nó hỗ trợ
cho việc xây dựng các ứng dụng API từ đơn giản đến phức tạp giúp xây dựng những
ứng dụng font-end linh hoạt mạnh mẽ và có thể được sử dung cả ở trình duyệt hay
NodeJs.
RESTful API: là một tiêu chuẩn dùng trong việc thiết kế các API cho các ứng dung
web để quản lý các resource
Cloudinary: là một cloud-based service, nó cung cấp một giải pháp quản lý hình ảnh
bao gồm upload, lưu trữ, thao tác, tối ưu hóa và delivery
Trang 30© WebSocket giúp liên kết giao tiếp hai chiều (two-way communication) giữa hai chương
trình chạy trên mạng Nghĩa là một Socket được sử dụng để cho phép một tiến trình
nói chuyện với một tiến trình khác.
e JSX là một cú pháp mở rộng cho JavaScript để biểu thị UI components
Ngoài ra còn một số thư viện UI khác để hỗ trợ thiết kế sẽ được giới thiệu chỉ tiết bên dưới
2.3.1 NodeJs
Giới thiệu NodeJs
NodeJs là một nền tảng (Platform) phát triển độc lập được xây dựng ở trên JavaScriptRuntime của Chrome mà chúng ta có thể xây dựng được các ứng dụng mạng một cách
nhanh chóng và dé dàng mở rộng NodeJs sử dung mô hình I/O hướng sự kiện, không chặn,
giúp nó trở nên nhẹ nhàng và hiệu quả, hoàn hảo cho các ứng dụng thời gian thực sử dụngnhiều dữ liệu chạy trên các thiết bị phân tán
NodeJs được xây dựng và phát triển từ năm 2009, bảo trợ bởi công ty Joyent, trụ sở tạiCalifornia, là một môi trường chạy mã nguồn mở, đa nền tảng dé phát triển các ứng dụngmạng và phía máy chủ Các ứng dụng NodeJs được viết bằng JavaScript và có thể chạy
trong thời gian chạy NodeJs trên OS X, Microsoft Windows và Linux.
NodeJs cũng cung cấp một thư viện phong phú gồm các mô-đun JavaScript khác nhau,
giúp đơn giản hóa việc phát triển các ứng dung web sử dụng NodeJs ở một mức độ lớn
Đặc điểm và tính năng hữu ích của NodeJs
e Phan Core bên dưới của NodeJs được viết hầu hết bằng C++ nên cho tốc độ xử lý vàhiệu năng khá cao.
© Với hiệu suất tuyệt vời! NodeJs được thiết kế để tối ưu hóa thông lượng va khả năng
mở rộng trong các ứng dụng web và là giải pháp tốt cho nhiều vấn đề phát triển webphổ biến, giúp tạo ra được các ứng dụng có tốc độ xử lý nhanh, realtime thời gian
thực.
® Trình quản lý gói nút (NPM) cung cấp quyền truy cập vào hàng trăm nghìn gói có
thể sử dụng lại Nó cũng có độ phan giải phụ thuộc tốt nhất trong lớp và cũng có thểđược sử dụng để tự động hóa hầu hết các chuỗi công cụ xây dựng
® NodeJs có tính di động Nó có sẵn trên Microsoft Windows, macOS, Linux, Solaris,
FreeBSD, OpenBSD, WebOS va NonStop OS Hơn nữa, nó được hỗ trợ tốt bởi nhiều
nhà cung cấp dịch vụ lưu trữ web, thường cung cấp cơ sở hạ tầng và tài liệu cụ thể để
lưu trữ các trang Node.
® NodeJs có một hệ sinh thái bên thứ ba và cộng đồng nhà phát triển rất tích cực, với
rất nhiều người sẵn sàng trợ giúp
Trang 31® NodeJs áp dung cho các sản phẩm có lượng truy cập lớn, cần mở rộng nhanh, cần đổi
mới công nghệ, hoặc tạo ra các dự án Startup nhanh nhất có thể
Những ứng dụng nên viết bằng NodeJs
Rõ ràng, không phải cứ hot và mới là NodeJs làm gi cũng tốt, ví dụ như một ứng dung cần
tính ổn định cao, logic phức tạp thì các ngôn ngữ PHP hay Ruby vẫn là sự lựa chọn tốthơn Còn dưới đây là những ứng dụng có thể và nên viết bằng NodeJs:
® WebSocket Server: Các máy chủ web Socket như là Online Chat, Game Server.
® Fast File Upload Client: là các chương trình upload file tốc độ cao.
® Ad Server: Các máy chủ quảng cáo.
® Cloud Services: Các dịch vụ đám may.
e RESTful API: đây là những ứng dụng mà được sử dụng cho các ứng dụng khác thong
qua API.
® Any Real-time Data Application: bat kỳ một ứng dụng nào có yêu cầu về tốc độ thời
gian thực Micro Services: Ý tướng của micro services là chia nhỏ một ứng dụng lớn
thành các dịch vụ nhỏ và kết nối chúng lại với nhau NodeJs có thé làm tốt điều này
2.3.2 Express.Js
Giới thiệu ExpressJs
Express là một framework dành cho NodeJs Nó cung cấp cho chúng ta rất nhiều tính năngmạnh mẽ trên nền tảng web cũng như trên các ứng dụng di động Express hỗ rợ các phương
thức HTTP và middleware tạo ra một API vô cùng mạnh mẽ và dễ sử dụng Có thể tổng
hợp một số chức năng chính của express như sau:
® Thiết lập các lớp trung gian dé trả về các HTTP request
® Dinh nghĩa router cho phép sử dụng với các hành động khác nhau dựa trên phương
Trang 32® Body-parser: Day là lớp trung gian, xử ly JSON, text và mã hóa URL
© Cookie-parser: Chuyển đổi header của cookie và phân bố đến các req.cookies
Để cài đặt các module trên, lần lượt chạy các lệnh:
npm install body-parser
npm install cookie-parser
2.3.3 ReactJs
Gidi thiéu ReactJs
ReactJs là một thư viện giao diện người dùng JavaScript đơn giản, giàu tính năng, dựa trên
các thành phần Nó có thể được sử dụng để phát triển các ứng dụng nhỏ cũng như các ứng
dụng lớn, phức tap ReaetJs cung cấp bộ tính năng tối thiểu và chắc chắn để khởi động một
ứng dung web Cộng đồng ReactJs khen ngợi thư viện ReactJs bằng cách cung cấp một tập
hợp lớn các thành phần làm sẵn để phát triển ứng dụng web trong thời gian kỷ lục Cộng
đồng ReactJs cũng cung cấp các khái niệm nâng cao như quản lý trạng thái, định tuyến,
vv.
ReactJs là một thu viện JavaScript đang nổi lên trong những năm gần đây với xu hướng
Single Page Application Trong khi những Framework khác cố gắng hướng đến một mô hình
MVC hoàn thiện thì ReactJs nổi bật với sự đơn giản va dé dang phối hợp với những thư viện
JavaScript khác Nếu như AngularJS là một Framework cho phép nhúng code Javasscript
trong code HTML thông qua các thuộc tính như: ng-model, ng-repeat thì với ReactJs là
một thư viện cho phép nhúng code HTML trong code JavaScript nhờ vào JSX, bạn có thé
dé dang lồng các đoạn HTML vào trong JavaScript Tích hợp giữa JavaScript và HTML vào
trong JSX làm cho các thành phan (component) dé hiểu hơn
ReactJs là một thư viện UI phát triển tại Facebook để hỗ trợ việc xây dựng những thành
phan (components) UI có tính tương tác cao, có trạng thái và có thể sử dụng lại được Một
số trang web phổ biến được cung cấp bởi thư viện ReactJs như:
® Facebook : ứng dụng truyền thông xã hội phổ biến.
® Instagram : ứng dụng chia sẻ ảnh phổ biến
Netflix : ứng dụng phát trực tuyến đa phương tiện phổ biến.
© Code Academy : ứng dụng đào tạo trực tuyến phổ biến
» Reddit : ứng dụng chia sẻ nội dung phổ biến.
Một trong những điểm hấp dẫn của ReactJs là thư viện này không chỉ hoạt động trên phíaClient, mà còn được render trên Server và có thể kết nối với nhau ReactJs so sánh sự thay
đổi giữa các giá trị của lần render này với lần render trước và cập nhật ít thay đổi nhất trên
DOM.
Trang 33Tai sao nên sử dụng ReactJs
1 Dễ sử dụng: ReactJs là một thư viện GUI nguồn mở JavaScrip ttập trung vào một điều
cụ thể, hoàn thành nhiệm vụ UI hiệu quả N6 được phân loại thành kiểu “V” trong mô
hình MVC (Model-View-Controller).
2 Nó hỗ trợ Reusable Component trong Java: ReactJs cho phép bạn sử dung lại
Com-ponents đã được phát triển thành các ứng dụng khác có cùng chức năng Tính năng
tái sử dụng Component là một lợi thế khác biệt cho các lập trình viên
3 Viết Component dé dàng hơn: React Component dễ viết hơn vì nó sử dụng JSX, mởrộng cú pháp tùy chon cho JavaScript cho phép bạn kết hợp HTML với JavaScript
JSX là một sự pha trộn tuyệt vời của JavaScript và HTML Nó làm rõ toàn bộ qué
trình viết cấu trúc trang web Ngoài ra, phần mở rộng cũng giúp render nhiều lựa chọn
dé dàng hơn Chúng ta sẽ tìm hiểu về JSX sâu hơn ở phần sau
4 Hiệu suất tốt hơn với Virtual DOM
Virtual DOM
Virtual DOM là công nghệ DOM ảo giúp tăng hiệu năng cho ứng dụng Việc chi 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ộ, đồng nghĩa với việc DOM treecũng sẽ phải thay doi một phần, điều này sẽ ảnh hưởng đến tốc độ xử lý ReactJs sử dụngVirtual DOM (DOM áo) để cải thiện vấn đề nay Virtual DOM là một object JavaScript,
mỗi object chứa đầy đủ thông tin cần thiết để tạo ra mot DOM, khi dữ liệu thay đổi nó sẽ tính toán sự thay đổi giữa object và tree thật, điều này sẽ giúp tối ưu hoá việc re-render
DOM tree thật.
Hinh 2.13: Virtual DOM va Real DOM
Trang 34ReactJs sử dụng cơ chế one-way data binding - luồng dữ liệu 1 chiều Dữ liệu được truyền
từ lớp cha (parent) đến lớp con (child) thông qua các thuộc tinh (props) Luồng dữ liệu đơn
giản giúp chúng ta dễ dàng kiểm soát cũng như sửa lỗi.
Với các đặc điểm ở trên, ReactJs dùng để xây dung các ứng dụng lớn mà dữ liệu của chúngthay đổi liên tục theo thời gian Dữ liệu thay đổi thì hầu hết kèm theo sự thay đổi về giao
điện Ví dụ như Facebook: trên Newsfeed của ban cùng lúc sẽ có các status khác nhau và
mỗi status lại có số like, share, comment liên tục thay đổi Khi đó ReactJs sẽ rất hữu ích để
const element = <h1>Hello Worldl< /h1>
Cú pháp thé này không phải là một chuỗi hay là HTML Nó được gọi là JSX, và nó là
một cú pháp mở rộng cho JavaScript Facebook sử dụng JSX để biểu thi UI components.
JSX = JavaScript + XML.
Nó chuyển đổi cú pháp dang gần như XML về thành JavaScript Giúp người lap trình có
thé code ReactJs bằng cú pháp của XML thay vì sử dụng JavaScript Các thành phần XML,thuộc tính (attributes) và các lớp con (children) được chuyển đổi thành các đối số truyền
vào hàm React.createElement().
Tai sao nên sử dụng JSX
Việc sử dụng JSX trong ReactJs là không bắt buộc Bạn có thổ sử dụng chỉ JavaScript thuần
thôi Nhưng có rất nhiều lý do cho việc nên sử dụng JSX trong ReactJs cần lưu ý:
e JSX với cú pháp gần giống XML, cấu trúc cây khi biểu thị các thuộc tính, điều đó
giúp ta dễ dàng định nghĩa, quản lý được các thành phần phức tạp, thay vì việc phải
định nghĩa và gọi ra nhiều hàm hoặc object trong JavaScript Khi nhìn vào cấu trúc
on
đó cũng dé dàng doc hiểu được ý nghĩa của các thành phan Code JSX ngắn hơn,
hiểu hơn code JavaScript
® JSX không làm thay đổi ngữ nghĩa của JavaScript
© Với cách viết gần với các thẻ HTML, JSX giúp những developers thông thường (ví d ụ
như các designer) có thể hiểu được một cách dễ dang, từ đó có thể viết hoặc sửa code
mà không gặp nhiều khó khăn
Trang 352.3.5 Redux
Redux là một thu viện cho phép quan lý các trang thái cho các ứng dung JavaScript
(pre-dictable state management tool) Redux là một vùng chứa trạng thái có thể dự đoán được
cho các ứng dụng JavaScript Khi ứng dụng phát triển, thật khó để giữ cho nó có tổ chức
và duy trì luồng dữ liệu Redux giải quyết vấn đề này bằng cách quản lý trạng thái của ứngdụng với một đối tượng toàn cầu duy nhất được gọi là Store Các nguyên tắc cơ bản của
Redux giúp duy trì tính nhất quán trong suốt ứng dụng của bạn, giúp gỡ lỗi và kiểm tra
dễ dàng hơn Quan trọng hơn, nó cung cấp cho bạn khả năng chỉnh sửa mã trực tiếp kết
hợp với trình gỡ lỗi du hành thời gian Có thể linh hoạt đi với bất kỳ lớp chế độ xem nào
như React, Angular, Vue, Nguyên tắc của Redux dựa dựa trên khả năng dự đoán của
nó Redux giúp bạn viết các ứng dụng hoạt động một cách nhất quán, chạy trong các môitrường khác nhau (Client, Server, and native) và dễ dàng để kiểm tra Redux ra đời lấy cảm
hứng từ tư tưởng của ngôn ngữ Elm và kiến trúc Flux của Facebook Do vay Redux thườngdùng kết hợp với React Js
Cách Redux làm việc
Cái cách mà Redux hoạt động là khá đơn giản Nó có một kho lưu trữ toàn bộ trạng thái
của app Mỗi thành phần có thể truy cập trực tiếp đến các trạng thái được lưu trữ thay vì
phải gữi các thuộc tính (Props) từ thành phần này đến thành phần khác Có 3 thành phần
của Redux: Actions, Store, Reducers:
1 Action: don giản là các sự kiện Chúng là cách ma chúng ta gữi dữ liệu từ ứng dụng
đến kho lưu trữ Redux Những dữ liệu này có thể là từ sự tương tác của người dùngvới ứng dụng hoặc cũng có thể là từ việc gũi các biểu mau
2 Reducer: là các hàm nguyên thủy chúng lấy trang thái hiện tai của ứng dụng, thựchiện một hành động và trả về một trạng thái mới Những trạng thái này được lưu như
những đối tượng (objects) và chúng định rõ các trang thái của một ứng dụng thay đổi
trong việc phản hồi một hành đọng được gửi đến kho lưu trữ (store)
3 Store: lưu trữ các trạng thái của ứng dung va nó là duy nhất trong bat kỳ một ứng
dụng Redux nào Bạn có thể truy cập các trạng thái được lưu, cập nhật trạng thái, và
đăng ký hoặc hủy đăng ký các trạng thái lắng nghe qua phương thức helper
Nguyên lý vận hành
Quá trình xây dựng Redux các chuyên gia đã dựa vào 3 nguyên lý cơ bản sau:
© Sử dụng nguồn dữ liệu đáng tin cậy duy nhất Các trạng thái của tất cả ứng dụng đều
nằm trong một cây đối tượng nằm trong một Store duy nhất
© Chỉ được phép đọc trạng thái: Có nghĩa rằng, để thay đổi trạng thai (State) của ứng
dung thì chỉ có cách duy nhất là phát một hành động (Action)
Trang 36© Sử dung hàm thuần túy để thay đổi, với mục đích chỉ ra các trạng thái (State) đượcbiến đổi từ hành đọng (Aetion) Vì thế, chúng ta cần sử dụng các hàm thuần túy hay
còn gọi là Reducer.
Lý do nên sử dụng Redux
Bởi vì Redux được xem như một thư viện và nó cho phép bạn có thể quản lý trạng thái cótrong ứng dụng JavaScript Vì vậy, nếu bạn kết hợp nó trong ReactJs sẽ mang lại sự hỗ trợ
vô cùng tốt Ngoài ra, một số lý do giúp cho redux được dùng ngày càng phổ biến là:
Hỗ trợ giải quyết những bài toán quan trọng như chia sẻ trạng thái Việc chia sẻ trạng
thái giữa các thành phần với nhau sẽ dựa theo các thức truyền khác nhau Vì vậy, nó rất
rắc rối và phức tạp nên cần có sự hỗ trợ của Redux
Vi dụ minh họa: Nếu bạn cần truyền dit liệu từ thành phần A sang C thì bắt buộc cần
phải thông qua thành phần B Khi đó, bắt buộc ta cần phải chia sẻ dữ liệu giữa các thành
phần với nhau bằng cách sử dụng props và thông qua các thành phần trung gian Vì thế, để
việc truyền dữ liệu được tối ưu hóa và đơn giản nhất bạn cần lưu dữ liệu vào một Store.Như vậy, việc cấp phát dữ liệu cho các thành phần cần thiết sẽ dễ hơn Chính lúc này,Store có nhiệm vụ trung gian nhằm chứa và phân phát các dữ liệu Như vậy, khi bạn cần
truyền di liệu từ thành phần A sang C thì chi việc day trạng thái vào Store Khi đó, Store
sẽ thực hiện cấp phat dữ liệu sang thành phần C Day chính là cách mà Redux đã sử dung
để kiểm soát dữ liệu tối tu và dé dang hơn
Redux thunk
Khi nhắc đến Redux thi không thể khong nhớ đến Redux Thunk va Redux Persist Dinh
nghĩa nay đã được các chuyên gia nhận định như sau: Redux Thunk là một Middleware có
Trang 37thể cho phép người dùng viết các hành đông trả về một hàm Thay vì đơn giản phải sử dụng
một đối tương JavaScript bằng cách trì hoãn quá trình đưa hành động đến redueer Ngoài
ra, Redux Thunk còn được sử dụng nhằm mục đích xử lý các logic bất đồng bộ phức tạp.Những đồng bộ này cần truy cập đến Store hoặc lấy dữ liệu như Ajax request
Redux Persist
Redux Persist là dang gói tự động hóa cho quy trình duy tri trạng thái từ cửa hang Redux
của bạn đến với bộ nhớ của thiết bị cục bộ Ví dụ như: Redux Persist có nhiệm vụ thực hiệntái tạo cửa hàng Redux trong các lần khởi chạy ứng dụng Các tiện ích này sẽ giúp người
dùng giảm thiểu công việc cũng như quá trình để duy trì được dit liệu trên thiết bị Co thé
là mã thông báo xác thực hoặc các cài đặt tài khoản.
Việc sử dụng Redux Persist sẽ giúp bạn thực hiện công việc hoàn toàn tự động mà chỉ
cần lượng nhỏ bản ghi sẵn cho quá trình khởi tạo Gói tự động này hoạt động rất hiệu quả
và sở hữu nhiều bộ giảm được thiết kế vô cùng tốt Ngoài ra, nó còn có thể giúp cho các bộ
giảm bớt chỉ tiết khi cần thiết hoặc khi ứng dụng đang ngày càng phức tạp Nhờ vậy mà
quy trình quản lý Store Redux sẽ trở nên đơn giản mà hiệu quả hơn.
gửi đi các request HTTP bất đồng bộ đến các REST endpoint và thực hiện các chức năng
hiều bạn chưa biết đến: HTTP Client
là có thể là phần mềm, thư viện có thể thực hiện các yêu cầu (request) dạng HTTP đến máy
ử dung trong các ứng dụng font-end Vue.js, ReactJs, Angular Sử dụng Axios dé dang
CRUD Chúng ta gặp phải một số khái niệm có thé
chủ HTTP và nhận về các hồi đáp (reponse) Dơn giản hơn bạn có thể coi nó gần với một
trình duyệt web.
JavaScript Promise là một đối tượng giúp kiểm soát kết quả hoàn thành hay thất bại của
một hành động bất đồng bộ trong JavaScript (Tham khảo thêm Kiến thức về JavaScriptPromise) Vue.js, ReactJs, Angular là những Framework JavaScript hiện đang rất hot, giúp
xây dựng những ứng dụng font-end linh hoạt hoạt động nhanh và mạnh mẽ REST endpoint
là những điểm (URL) cung cấp các chức năng API cho phép chúng ta tương tác với một hệ
thống, ví dụ khi chúng ta muốn tương tác với Lazada chúng ta có thể gửi các request HTTP
đến các REST API do Lazada cung cấp
CRUD viết tắt của Create, Read, Update, Delete là một thuật ngữ lập trình nói đến 4
phương thức quen thuộc khi làm việc với kho dữ liệu.
Trang 38Axios là một thư viện rất tốt trong JavaScript giúp chúng ta thực hiện thao tác với cácwebsite hoặc API nó hỗ trợ cho việc xây dựng các ứng dụng API từ đơn giản đến phức tạp
giúp xây dựng những ứng dụng font-end linh hoạt mạnh mẽ và có thổ được sử dụng cả ở
trình duyệt hay NodeJs.
Đặc điểm Axios
® Tạo XMLHttpRequests từ trình duyệt.
® Thực hiện các HTTP request từ NodeJs.
Hỗ trợ Promise API.
® Chan request và response.
Chuyển đổi dit liệu request va response
e Huy requests.
e Tự động chuyển đổi về dữ liệu JSON
e Hỗ trợ phía Client để chống lại XSRF