1. Trang chủ
  2. » Luận Văn - Báo Cáo

Khóa luận tốt nghiệp Kỹ thuật máy tính: 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

77 0 0
Tài liệu đã được kiểm tra trùng lặp

Đang tải... (xem toàn văn)

Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống

THÔNG TIN TÀI LIỆU

Thông tin cơ bản

Tiêu đề 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ác giả Võ Hoài Nam, Lê Trọng Duy
Người hướng dẫn TS. Doan Duy
Trường học Đại học Quốc gia TP. Hồ Chí Minh
Chuyên ngành Kỹ thuật máy tính
Thể loại Khóa luận tốt nghiệp
Năm xuất bản 2022
Thành phố TP. Hồ Chí Minh
Định dạng
Số trang 77
Dung lượng 24,57 MB

Nội dung

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 3

THÔ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 4

LỜ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 5

Mụ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 6

3 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 7

Danh 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 9

Danh 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 10

DANH 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 11

TÓ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 12

Chươ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 13

1.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 14

1.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 15

Chươ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 16

2.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 18

a 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 19

tượ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 20

2.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 21

Mask 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 22

Bang 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 24

from 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 25

Bạ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 26

Cá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 27

2.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 28

Cấ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 29

Khở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 33

Tai 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 34

ReactJs 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 35

2.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 37

thể 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 38

Axios 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

Ngày đăng: 23/10/2024, 02:11

TÀI LIỆU CÙNG NGƯỜI DÙNG

TÀI LIỆU LIÊN QUAN

w