đồ án 1 phát hiện khuôn mặt

38 0 0
Tài liệu đã được kiểm tra trùng lặp
đồ án 1 phát hiện khuôn mặt

Đ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

Các ứng dụng tiềm năng có thể từ việc nâng cao biện pháp an ninh thông qua hệ thống nhận diện khuôn mặt đến việc tạo ra giao diện người dùng được cá nhân hóa dựa trên thông tin dân số..

Trang 1

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

KHOA CÔNG NGHỆ PHẦN MỀM

BÙI THỊ NHƯ Ý PHÙ ĐỨC QUÂN

ĐỒ ÁN 1

PHÁT HIỆN KHUÔN MẶT

Trang 2

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

KHOA CÔNG NGHỆ PHẦN MỀM

BÙI THỊ NHƯ Ý – 21520129 PHÙ ĐỨC QUÂN – 21521335

ĐỒ ÁN 1

PHÁT HIỆN KHUÔN MẶT

GIẢNG VIÊN HƯỚNG DẪN TS NGUYỄN DUY KHÁNH

Trang 3

1.6 Bố cục của báo cáo 4

Chương 2 CÁC MODEL, BỘ DỮ LIỆU, CÔNG NGHỆ ĐƯỢC SỬ DỤNG 6

Chương 3 QUÁ TRÌNH THỰC HIỆN 18

3.1 Thiết lập Cloudinary để lưu trữ ảnh 18

3.2 Xây dựng API cho ứng dụng bằng Flask 20

3.3 Host server miễn phí trên Render 23

3.4 Xây dựng ứng dụng phía client trên React Native 23

Chương 4 HOÀN THIỆN ỨNG DỤNG 27

4.1 Giới thiệu ứng dụng 27

4.2 Chức năng phát hiện khuôn mặt trên ảnh và video 28

4.3 Chức năng tải ảnh xuống và chia sẻ ảnh 30

Chương 5 KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 31

5.1 Kết luận 31

5.2 Hướng phát triển 32

TÀI LIỆU THAM KHẢO 33

Trang 4

DANH MỤC HÌNH

Hình 1.1 Ảnh có khuôn mặt nhỏ so với khung hình, đeo khẩu trang gây khó

cho việc nhận dạng 3

Hình 2.1 Kiến trúc mạng của SSD 7

Hình 2.2 Ma trận confusion ước tính tuổi trên điểm chuẩn Adience 10

Hình 2.3 Một số ảnh được lấy từ bộ dữ liệu Audience Benchmark 11

Hình 2.4 Logo của Flask 11

Hình 2.5 Logo Render 12

Hình 2.6 Logo React Native 13

Hình 2.7 Logo Cloudinary 16

Hình 3.1 Sơ đồ cách hoạt động của ứng dụng 18

Hình 3.2 Các khóa của môi trường 18

Hình 3.3 Presets đã được tạo để gọi API 19

Hình 3.4 Nhóm import và sử dụng cloudinary trong mã nguồn phía backend 20

Hình 3.5 Mã nguồn cho các route của ứng dụng sử dụng Flask 21

Hình 3.6 Hàm xử lý đối với dữ liệu gửi lên là ảnh 21

Hình 3.7 Mã nguồn xử lý phát hiện khuôn mặt trên ảnh 22

Hình 3.8 Hàm xử lý đổi với dữ liệu gửi lên là video 22

Hình 3.9 Mã nguồn cài đặt giao diện Home 24

Hình 3.10 Mã nguồn các hàm xử lý được khai báo sử dụng trong trang Home 25

Hình 3.11 Một số thư viện được khai báo sử dụng ở trang Home 26

Hình 4.1 Activity Diagram của ứng dụng 27

Hình 4.2 Giao diện màn hình Home của ứng dụng 29

Hình 4.3 Màn hình hiển thị kết quả sau khi detect ảnh/video 29

Hình 4.4 Biểu tượng nút lưu và chia sẻ trên màn hình kết quả 30

Hình 5.1 Poster của ứng dụng và QR code để tải ứng dụng 32

Trang 5

DANH MỤC BẢNG

Bảng 1 Mô tả đầu vào và đầu ra của bài toán 2

Trang 6

Động lực cho dự án này đến từ vai trò ngày càng mở rộng của trí tuệ nhân tạo (AI) trong cuộc sống hàng ngày, đặc biệt là trong lĩnh vực công nghệ phát hiện và nhận diện khuôn mặt Khả năng phát hiện khuôn mặt một cách chính xác, xác định tuổi tác và nhận biết giới tính mang lại ảnh hưởng sâu rộng trong nhiều lĩnh vực, từ an ninh và giám sát đến trải nghiệm cá nhân hóa cho người dùng Các ứng dụng tiềm năng có thể từ việc nâng cao biện pháp an ninh thông qua hệ thống nhận diện khuôn mặt đến việc tạo ra giao diện người dùng được cá nhân hóa dựa trên thông tin dân số

1.2 Phát biểu bài toán

Đầu vào của bài toán là một bức ảnh hoặc video, và đầu ra là ảnh hoặc video đã được xử lý phát hiện khuôn mặt cùng với nhận dạng tuổi và giới tính của khuôn mặt được phát hiện

Trang 7

Đầu vào Đầu ra

Bảng 1 Mô tả đầu vào và đầu ra của bài toán

1.3 Các thách thức

Thách thức về bài toán:

- Thách thức lớn nhất đối diện khi xây dựng một ứng dụng phát hiện khuôn mặt là đạt được độ chính xác cao trong quá trình phát hiện khuôn mặt và phân loại - Khuôn mặt của mỗi người là độc đáo và đa dạng, ảnh chụp cũng có nhiều góc

độ, độ sáng và độ phân giải khác nhau Thách thức đặt ra là làm thế nào để mô hình có thể nhận diện hiệu quả trên nhiều dạng khuôn mặt khác nhau, từ độ tuổi, giới tính đến đặc điểm văn hóa và chủng tộc

- Thiết kế giao diện người dùng để tương tác một cách thuận lợi và không làm xâm phạm quyền riêng tư là một thách thức thiết yếu Người dùng cần được thông báo và có sự kiểm soát về việc sử dụng thông tin khuôn mặt của họ

Trang 8

Hình 1.1 Ảnh có khuôn mặt nhỏ so với khung hình, đeo khẩu trang gây khó cho việc nhận dạng

- Model được sử dụng trong ứng dụng có độ chính xác không quá cao Thách thức về server:

- Vì sử dụng server không trả phí nên thời gian phản hồi khi gửi ảnh/video hoặc nhận ảnh/video về máy mất nhiều thời gian

- Dung lượng lưu trữ có giới hạn Thách thức về framework:

- Khó khăn trong việc tìm cách đồng nhất định dạng dữ liệu từ server và cách hiển thị dạng dữ liệu đó lên ứng dụng

1.4 Mục tiêu và phạm vi nghiên cứu

- Mục tiêu: Mục tiêu của bài toán là phát triển một ứng dụng hoặc hệ thống có khả năng cho tự động phát hiện và phân loại giới tính cũng như tuổi của khuôn mặt xuất hiện trong bức ảnh đó Bài toán sử dụng mô hình đã được huấn luyện sẵn để nhận diện khuôn mặt có nhiều ứng dụng tiềm năng để mở rộng trong tương lai, bao gồm kiểm soát truy cập an ninh, nhận dạng người dùng trong ứng dụng di động, tạo

Trang 9

hiệu ứng thú vị trong trò chơi thực tế ảo, theo dõi thái độ của người dùng, và nhiều ứng dụng khác trong việc cải thiện trải nghiệm người dùng và an toàn

- Phạm vi:

+ Các model:

▪ res10_300x300_ssd_iter_140000.caffemodel ▪ age_net.caffemodel

▪ gender_net.caffemodel + Bộ dữ liệu:

▪ Adience Benchmark được sử dụng để đánh giá các mô hình phân loại tuổi và giới tính Bộ dữ liệu này chứa 26.580 hình ảnh khuôn mặt từ 2.284 người, được chia thành 8 nhóm tuổi và được gán nhãn giới tính

+ Phạm vi của ứng dụng: Ứng dụng di động trên framework React Native + Xem xét và cập nhật các biện pháp an ninh để bảo vệ dữ liệu khuôn mặt, đồng thời đảm bảo rằng ứng dụng tuân thủ các quy định về quyền riêng tư và bảo mật dữ liệu

+ Tổ chức các phiên duyệt và thu thập phản hồi từ người dùng để cải thiện tính năng và trải nghiệm người dùng của ứng dụng

- Trình bày các thách thức cũng như hướng phát triển của đề tài trong tương lai

1.6 Bố cục của báo cáo

Phần còn lại của báo cáo được trình bày theo bố cục như sau:

Trang 10

CHƯƠNG 2 – CÁC MODEL, BỘ DỮ LIỆU, CÔNG NGHỆ ĐƯỢC SỬ DỤNG:

trình bày ba model và các công nghệ được sử dụng trong quá trình xây dựng ứng dụng phát hiện khuôn mặt

CHƯƠNG 3 – QUÁ TRÌNH THỰC HIỆN: trình bày quá trình xây dựng server,

đưa model lên server để thực hiện phát hiện khuôn mặt, cũng như xây dựng giao diện,

hoàn thiện ứng dụng di động

CHƯƠNG 4 – HOÀN THIỆN ỨNG DỤNG: trình bày kết quả các chức năng của

ứng dụng di động phát hiện khuôn mặt

CHƯƠNG 5 – KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN: trình bày kết luận của

nhóm sau quá trình xây dựng ứng dụng, đưa ra nhận định về hướng phát triển của ứng dụng trong tương lai.

Trang 11

Chương 2 CÁC MODEL, BỘ DỮ LIỆU, CÔNG NGHỆ ĐƯỢC SỬ

Nói chi tiết hơn, mô hình phát hiện khuôn mặt này là một hệ thống đa mục tiêu hiệu quả, cho phép đồng thời phát hiện nhiều khuôn mặt trên một khung hình Điểm độc đáo của mô hình nằm ở việc sử dụng kiến trúc ResNet-10 (Residual Network) làm mạng cơ sở cho bước phát hiện

SSD (Single Shot MultiBox Detector):

SSD, hay Single Shot MultiBox Detector, là một trong những mô hình phát hiện đối tượng hàng đầu trong lĩnh vực thị giác máy tính và trí tuệ nhân tạo Được giới thiệu bởi Wei Liu và nhóm nghiên cứu của mình vào năm 2016, SSD đặc biệt nổi bật với khả năng phát hiện đa mục tiêu trên một lưới đồng thời và là một trong những ứng dụng quan trọng của Deep Learning trong xử lý hình ảnh Mô hình SSD sử dụng một kiến trúc đa tầng với các lớp phát hiện được tích hợp tại các tầng khác nhau của mạng nơ-ron Điều này cho phép mô hình có khả năng nhận diện các đối tượng ở cả các tỷ lệ kích thước khác nhau trong ảnh SSD không chỉ dự đoán lớp của đối tượng mà còn dự đoán độ chính xác (confidence score) cùng với vị trí của đối tượng thông qua các hộp giới hạn (bounding boxes) Điều này tạo ra một phương thức phát hiện chi tiết và chính xác Mô hình SSD tạo ra một lưới của các hộp giới hạn và các trạng thái của

Trang 12

các lớp đối tượng khác nhau tại mỗi ô của lưới Điều này cho phép mô hình dự đoán các đối tượng ở các tỷ lệ và vị trí khác nhau trong ảnh

SSD đặc biệt thích hợp cho các ứng dụng yêu cầu phát hiện đa mục tiêu nhanh chóng trên ảnh hoặc video Nó đã trở thành một trong những công cụ quan trọng trong lĩnh vực nhận diện đối tượng tự động, nhận diện khuôn mặt, giám sát an ninh và nhiều lĩnh vực khác đòi hỏi khả năng phát hiện chính xác và hiệu quả

Hình 2.1 Kiến trúc mạng của SSD

Kiến Trúc ResNet-10:

ResNet-10 là một biến thể của Residual Network, một dạng mạng nơ-ron sâu đã chứng tỏ sự hiệu quả trong việc học và trích xuất đặc trưng phức tạp Với cấu trúc residual, mạng có khả năng huấn luyện tốt hơn và giúp tránh được vấn đề suy giảm độ gradient trong quá trình lan truyền ngược, đặc biệt là khi xây dựng các mô hình sâu

Kích Thước Đầu Vào và Đầu Ra:

Mô hình chỉ chấp nhận ảnh đầu vào có kích thước cố định là 300x300 điểm ảnh Điều này nhằm tối ưu hóa hiệu suất và giảm chi phí tính toán, đồng thời duy trì độ chính xác trong quá trình phát hiện

Phương Pháp Hoạt Động:

Qua quá trình lan truyền tiến, thông qua mạng CNN ResNet-10, mô hình học cách trích xuất đặc trưng từ ảnh đầu vào để dự đoán vị trí của các "box" chứa khuôn mặt Mỗi "box" này đại diện cho một khuôn mặt được phát hiện trong khung hình Quá

Trang 13

trình này được thực hiện một cách nhanh chóng và chính xác nhờ vào kiến trúc SSD, làm cho mô hình phù hợp cho các ứng dụng yêu cầu phát hiện và định vị khuôn mặt trong thời gian thực

Tóm lại, mô hình SSD sử dụng kiến trúc ResNet-10 là một kết hợp mạnh mẽ giữa khả năng học sâu và phương pháp phát hiện đa mục tiêu, mang lại khả năng định vị chính xác và hiệu suất ổn định trong việc phát hiện nhiều khuôn mặt trên một khung hình ảnh

2.1.2 Model age_net.caffemodel & gender_net.caffemodel

Model được xây dựng dựa trên bộ dữ liệu Adience Benchmark Mô hình có kiến trúc phức tạp và mạch lạc, đặc trưng bởi ba lớp tích chập (convolutional layers) với kích thước kernel khác nhau, được thiết lập để trích xuất đặc trưng từ ảnh đầu vào Mỗi lớp tích chập chứa hàng trăm nút (nodes) để học cách biểu diễn đặc trưng phức tạp của ảnh và hình ảnh khuôn mặt

Lớp Convolutional với 96 Nodes và Kernel Kích Thước 7:

Đây là lớp tích chập đầu tiên của mô hình Với 96 nodes, mỗi node chịu trách nhiệm trích xuất đặc trưng cụ thể từ một phần nhỏ của ảnh thông qua việc sử dụng kernel kích thước 7x7 Kích thước lớp này giúp mô hình học cách nhận diện các đặc trưng lớn và toàn diện từ ảnh đầu vào

Lớp Convolutional với 256 Nodes và Kernel Kích Thước 5:

Lớp tiếp theo có 256 nodes và sử dụng kernel kích thước 5x5 Điều này giúp mô hình tìm ra những đặc trưng cụ thể hơn và phức tạp hơn so với lớp trước đó Việc tăng số lượng nodes giúp tăng khả năng học được sự biểu diễn đa dạng của ảnh

Lớp Convolutional với 384 Nodes và Kernel Kích Thước 3:

Lớp tích chập thứ ba của mô hình có 384 nodes và sử dụng kernel kích thước 3x3 Việc giảm kích thước kernel giúp mô hình tập trung vào những đặc trưng chi tiết và nhỏ hơn Các nodes trong lớp này chịu trách nhiệm tìm ra các biểu diễn chuyên sâu và tinh tế từ ảnh

Trang 14

Hai Lớp Fully Connected với 512 Nodes:

Sau các lớp tích chập là hai lớp fully connected với mỗi lớp có 512 nodes Các lớp này giúp tạo ra các đặc trưng tổng hợp từ thông tin chi tiết đã được trích xuất từ lớp tích chập Việc có hai lớp giúp mô hình học cách biểu diễn thông tin một cách phức tạp và trừu tượng hóa thông tin đầu vào

Lớp Đầu Ra với Softmax Activation:

Lớp cuối cùng của mô hình là lớp đầu ra với hàm kích hoạt softmax Lớp này chịu trách nhiệm chuyển đổi đầu ra từ các nodes trước đó thành xác suất dự đoán cho từng lớp Trong trường hợp này, các node của lớp softmax là đại diện cho các phân loại tuổi và giới tính, mô hình age_net.caffemodel sẽ có 8 nodes đại diện cho các độ tuổi và mô hình gender_net.caffemodel sẽ có 2 nodes đại diện cho giới tính “Male” và “Female”

Kết luận lại, kiến trúc của mô hình này là một sự kết hợp tinh tế của các lớp tích chập và fully connected, tạo ra một hệ thống có khả năng học và trích xuất đặc trưng từ ảnh khuôn mặt để dự đoán tuổi và giới tính với độ chính xác cao

2.2 Bộ dữ liệu

Bộ dữ liệu được sử dụng để huấn luyện mô hình là Adience Benchmark, được công bố lần đầu vào năm 2014 thông qua một bài báo quan trọng về việc ước tính độ tuổi và giới tính từ ảnh khuôn mặt Bộ dữ liệu này là một tài nguyên quan trọng trong lĩnh vực thị giác máy tính và nhận diện khuôn mặt, với mục tiêu đặt ra là cung cấp một bộ dữ liệu đa dạng và phong phú để nghiên cứu về nhận diện độ tuổi và giới tính Adience Benchmark bao gồm tổng cộng 26.580 ảnh khuôn mặt được thu thập từ 2.284 cá nhân khác nhau, tạo nên một bộ dữ liệu đa dạng với sự đại diện từ nhiều nhóm dân số Bộ dữ liệu này được chia thành 8 nhóm tuổi, mỗi nhóm đại diện cho một khoảng độ tuổi cụ thể, từ trẻ sơ sinh (0 - 2 tuổi) đến nhóm người cao tuổi (60 - 100 tuổi), cụ thể hơn là: (1) 0 – 2, (2) 4 – 6, (3) 8 – 12, (4) 15 – 20, (5) 25 – 32, (6) 38 – 43, (7) 48 – 53, (60 – 100) Việc chia thành các nhóm tuổi như vậy giúp mô hình có khả năng

Trang 15

học và nhận diện sự biến đổi trong các đặc trưng khuôn mặt theo thời gian Mặc dù kết quả của model gender_net.caffemodel có kết quả khá tốt, tuy nhiên với age_net.caffemodel lại có kết quả không như mong đợi

Hình 2.2 Ma trận confusion ước tính tuổi trên điểm chuẩn Adience

Ta thấy được qua ma trận:

• Các nhóm tuổi 0-2, 4-6, 8-13 và 25-32 được dự đoán với độ chính xác tương đối cao ( xem các phần tử đường chéo )

• Đầu ra thiên về nhóm tuổi 25-32 (xem hàng thuộc nhóm tuổi 25-32 ) Điều này có nghĩa là mạng rất dễ bị nhầm lẫn giữa tuổi từ 15 đến 43 Vì vậy, ngay cả khi độ tuổi thực tế là từ 15-20 hoặc 38-43, vẫn có khả năng cao rằng độ tuổi dự đoán sẽ là 25-32

Ngoài ra, Adience còn đánh nhãn giới tính của mỗi cá nhân trong bộ dữ liệu, phân thành hai lớp là Male (Nam) và Female (Nữ) Điều này mở rộng khả năng ứng dụng của mô hình để có thể đồng thời dự đoán cả giới tính, làm cho nó trở thành một công cụ linh hoạt cho nhiều ứng dụng nhận diện khuôn mặt

Đặc biệt, Adience Benchmark được thiết kế để phản ánh nhiều điều kiện thực tế nhất có thể Các hình ảnh trong bộ dữ liệu được chụp dưới nhiều điều kiện ánh sáng, góc độ chụp, và tư thế khác nhau Ngoài ra, sự đa dạng của biểu cảm khuôn mặt cũng được đánh giá, từ đó tạo ra một môi trường đa dạng giúp mô hình có khả năng tự động hóa quá trình học từ các biểu hiện khuôn mặt đa dạng của con người

Trang 16

Hình 2.3 Một số ảnh được lấy từ bộ dữ liệu Audience Benchmark

2.3 Công nghệ 2.3.1 Flask

Hình 2.4 Logo của Flask

Flask là một Web Framework rất nhẹ của Python, dễ dàng giúp người mới bắt đầu học Python có thể tạo ra website nhỏ và trung bình Điểm mạnh của Flask nằm ở sự đơn giản và tối giản Nó cung cấp một cơ chế xử lý yêu cầu HTTP, routing, và một cách tiếp cận linh hoạt cho việc xây dựng các ứng dụng web Flask không ép buộc người dùng sử dụng một cấu trúc dự án cụ thể hoặc các thành phần phức tạp, giúp chúng ta tự do tổ chức mã nguồn của mình theo cách bản thân mong muốn Flask

Trang 17

được biết đến như là một micro-framework, tức là bản thân Flask không chứa nhiều các thành phần phức tạp khác nhau, nó chỉ gồm các thành phần cơ bản nhất, các thành phần khác sẽ được thêm qua các extension Theo trang chủ của Flask: "Flask is a microframework for Python based on Werkzeug, Jinja 2 and good intentions And before you ask: It's BSD licensed!" Flask không chỉ nhấn mạnh vào sự đơn giản và linh hoạt, mà còn tận dụng sức mạnh của ngôn ngữ Python Với mô hình routing đơn giản, Flask giúp xác định và xử lý yêu cầu từ phía người dùng một cách hiệu quả Sự tích hợp với Jinja2 mang lại một hệ thống template mạnh mẽ cho việc quản lý giao diện người dùng

Với cộng đồng lớn và tích hợp dễ dàng với các công cụ khác trong hệ sinh thái Python, Flask là một lựa chọn tốt cho việc phát triển các ứng dụng web từ nhỏ đến trung bình, cũng như cho các dự án thử nghiệm và các ứng dụng có tính năng tối giản Đặc biệt Flask sử dụng ngôn ngữ Python nên thuận tiện cho việc thực thi các model

2.3.2 Render

Hình 2.5 Logo Render

Render hosting là một dịch vụ hosting và quản lý ứng dụng web và ứng dụng chuyên

nghiệp, được thiết kế để giúp các nhà phát triển và doanh nghiệp triển khai ứng dụng trực tuyến một cách dễ dàng và hiệu quả Render cung cấp một nền tảng đám mây đáng tin cậy cho việc chạy ứng dụng web, cơ sở dữ liệu, và các dịch vụ khác để xây dựng và duy trì các dự án trực tuyến

Render được đánh giá cao bởi tính đơn giản và tiện lợi Dịch vụ này loại bỏ rào cản phức tạp trong việc triển khai ứng dụng bằng cách cung cấp một trải nghiệm làm việc dựa trên Git, tự động triển khai (CI/CD), và quản lý môi trường ứng dụng Người

Trang 18

dùng có thể triển khai ứng dụng của mình chỉ với một vài lệnh đơn giản hoặc tích hợp dịch vụ Render với hệ thống quản lý mã nguồn

Render cũng chú trọng đến hiệu suất và bảo mật Dịch vụ này cung cấp cơ sở hạ tầng mạnh mẽ, bao gồm các tài nguyên đám mây mạnh mẽ, cơ sở dữ liệu, và bảo mật mạnh mẽ để đảm bảo ứng dụng luôn hoạt động một cách ổn định và an toàn

Với Render hosting, người dùng có thể tập trung vào việc phát triển ứng dụng của mình mà không cần lo lắng về việc quản lý hạ tầng hoặc quá trình triển khai phức tạp, giúp tối ưu hóa hiệu suất làm việc của bạn và giảm bớt thời gian và công sức đầu tư vào việc quản lý máy chủ và hệ thống

Render hỗ trợ nhiều ngôn ngữ lập trình và framework như Node.js, Python, Ruby, Go, và nhiều framework như Express, Ruby on Rails, Django, và Flask

2.3.3 React Native

Hình 2.6 Logo React Native

JavaScript Framework là thư viện được xây dựng dựa trên JS phục vụ cho từng mục đích và lĩnh vực khác nhau JavaScript Framework là thư viện được xây dựng dựa vào ngôn ngữ lập trình JavaScript Từ đó, mỗi framework được tạo ra để phục cho từng lĩnh vực khác nhau Trong dự án này nhóm sử dụng Framework React Native – một Framework dùng cho việc xây dựng ứng dụng mobile

Trang 19

Ra mắt lần đầu vào năm 2015, React Native là một framework phát triển ứng dụng di động mã nguồn mở do Facebook tạo ra React Native sử dụng ngôn ngữ lập trình JavaScript để tạo các ứng dụng di động trên các hệ điều hành iOS và Android với một cơ sở mã duy nhất Điều này giúp các lập trình viên tiết kiệm rất nhiều thời gian, công sức khi phát triển ứng dụng di động có thể chạy được trên cả Android và IOS React Native dựa trên thời gian chạy JavaScriptCore và các máy biến áp Babel Với thiết lập này, React Native hỗ trợ các tính năng JavaScript (ES6 +) mới, ví dụ như arrow function, async / await,… React Native sử dụng JavaScript để biên dịch giao diện người dùng của ứng dụng, nhưng sử dụng chế độ xem native-OS Đối với các tính năng phức tạp hơn, nó cho phép triển khai mã bằng ngôn ngữ gốc của hệ điều hành (Swift và Objective-C cho iOS, Java và Kotlin cho Android)

React Native hoạt động trên ba thread:

- Chuỗi giao diện người dùng (UI Thread): Chuỗi ứng dụng chính có quyền truy cập vào giao diện người dùng của ứng dụng

- Shadow Thread: Thread nền sử dụng thư viện React để tính toán bố cục của ứng dụng

- Chuỗi JavaScript (JavaScript Thread): Chuỗi thực thi có chứa mã React (JavaScript)

Trong đó Main Thread sẽ có vai trò cập nhật giao diện người dùng (UI) và xử lý tương tác của người dùng, JavaScript Thread là nơi thực thi và xử lý mã Javascript Để tương tác được với nhau hai Thread sẽ sử dụng một Bridge (cầu nối) Cho phép chúng giao tiếp mà không phụ thuộc lẫn nhau, chuyển đổi dữ liệu từ Thread này sang Thread khác Dữ liệu từ hai Thread được vận hành khi tiếp nối dữ liệu cho nhau Có nhiều lý do khiến chúng ta nên sử dụng React Native để xây dựng ứng dụng moblie:

- React Native có ưu điểm lớn nhất là có thể tái sử dụng khoảng 90% mã cho các nền tảng Android và IOS mà không cần phải tạo ra các mã riêng biệt, điều này giúp rút ngắn thời gian công bố sản phẩm và cần ít hơn các nỗ lực bảo trì

Ngày đăng: 15/05/2024, 09:29

Tài liệu cùng người dùng

  • Đang cập nhật ...

Tài liệu liên quan