Báo cáo Đề Án khoa học máy tính Đề tài xây dựng Ứng dụng thông tin và kết nối trực tuyến cho sinh viên Đại học

Ứng dụng này sẽ được xây dựng bằng ngôn ngữ React Native, kết hợp với Firebase, không chỉ để tạo ra một nền tảng mạnh mẽ và tối ưu hóa trải nghiệm người dùng, mà còn là cơ hội để em tìm

TRƯỜNG ĐẠI HỌC KINH TẾ QUỐC DÂN

MỤC LỤ

C

CHƯƠNG 1 : CƠ SỞ LÝ THUYẾT 4

I.GIỚI THIỆU CHUNG VỀ ỨNG DỤNG 4

ĐẠI HỌC KINH TẾ QUỐC DÂN

TRƯỜNG CÔNG NGHỆ

Khoa công nghệ thông tin

BÁO CÁO ĐỀ ÁN KHOA HỌC MÁY TÍNH

Đề tài : Xây dựng ứng dụng thông tin và kết nối trực

tuyến cho sinh viên đại học

Thực hiện : Bùi Quốc Văn

Mã sinh viên : 11226879

Lớp : Khoa học máy tính K64

Lớp học phần : Đề án - Khoa học máy tính(124)_01

Giảng viên hướng dẫn : Ths.Tống Thị Minh Ngọc

Hà Nội, ngày 18 tháng 11 năm 2024

1 Khái niệm 4

2.Phân loại ứng dụng 4

3.Cấu trúc ứng dụng 5

4.Xu hướng phát triển ứng dụng di động 2024 6

II.TỔNG QUAN VỀ CÔNG NGHỆ REACT NATIVE 7

1.Lịch sử phát triển và tầm quan trọng của React Native 7

2.Nguyên tắc hoạt động của React Native 8

3 Cách thức hoạt động của React Native 8

4.Ưu nhược điểm của React Native 9

5.Một số ứng dụng được xây dựng dựa trên React-Native 11

III.CƠ SỞ LÝ THUYẾT VÀ CÔNG CỤ PHÁT TRIỂN 12

1.Kiến trúc của ứng dụng React Native 12

2 Công cụ phát triển và môi trường làm việc 17

3 Các thư viện phổ biến trong React Native 19

CHƯƠNG 2 : PHÂN TÍCH VÀ THIẾT KẾ, DEMO APP 24

I Mô hình hóa yêu cầu 24

1 Xác nhận yêu tố tác nhân 24

2 Xác định các trường hợp sử dụng 25

3.Yêu cầu hệ thống 26

II Thiết kế và demo giao diện 27

1.Giao diện màn hình Welcome 27

2.Giao diện trang login 28

3.Giao diện trang register 28

4.Giao diện trang Information 29

5.Giao diện trang show thông tin khoa, viện, trường 29

6.Giao diện trang chat 30

7 Giao diện trang Settings 30

8.Giao diện trang Profile 31

Tài liệu tham Khảo 32

KẾT LUẬN 33

LỜI MỞ ĐẦU

Trong môi trường học tập tại Đại học Kinh tế Quốc dân, sinh viên thường cần truycập nhanh chóng và dễ dàng vào các thông tin quan trọng liên quan đến học tập và các dịch vụ sinh viên Những thông tin như sơ đồ lớp học, quy trình tuyển sinh, quy đổi điểm IELTS, yêu cầu chứng chỉ, quy trình nhận bằng tốt nghiệp, cũng như các chương trình học bổng và hỗ trợ tài chính,…Hiện đang được phân tán trên nhiều nền tảng khác nhau như website của trường và ứng dụng NEUStudentApp Điều này có thể gây bất tiện khi sinh viên cần tra cứu và quản lý thông tin một cách thuận lợi

Ứng dụng di động mới được đề xuất không chỉ tập trung tích hợp tất cả các thông tin quan trọng vào một nền tảng duy nhất, mà còn cung cấp tính năng nhắn tin, cho phép sinh viên trực tiếp liên hệ và trao đổi với bộ phận quản lý để giải quyết các thắc mắc hoặclàm rõ những thông tin còn chưa hiểu rõ Với tính năng này, sinh viên có thể dễ dàng gửi câu hỏi, nhận phản hồi nhanh chóng, và thậm chí theo dõi các yêu cầu đã gửi mà không cần phải chuyển sang các kênh liên lạc khác như email hay điện thoại

Ứng dụng này sẽ được xây dựng bằng ngôn ngữ React Native, kết hợp với

Firebase, không chỉ để tạo ra một nền tảng mạnh mẽ và tối ưu hóa trải nghiệm người dùng, mà còn là cơ hội để em tìm hiểu sâu hơn về lập trình di động, quản lý cơ sở dữ liệu thời gian thực và tích hợp các công nghệ hiện đại trong phát triển ứng dụng Việc sử dụngmáy ảo Android Studio cũng giúp em làm quen với quy trình kiểm thử và triển khai ứng dụng trong môi trường giả lập thực tế, từ đó chuẩn bị tốt hơn cho các dự án công nghệ trong công việc tương lai

Trong quá trình xây dựng ứng dụng, do thời gian có hạn, em đã cố gắng tận dụng tối đa khoảng thời gian của mình để hoàn thành các yêu cầu chính của dự án Tuy nhiên,

em nhận thấy ứng dụng vẫn còn một số hạn chế cần khắc phục Em hy vọng rằng trong tương lai, em sẽ có cơ hội cải thiện và phát triển ứng dụng này một cách hoàn thiện hơn

Em chân thành cảm ơn cô Tống Thị Minh Ngọc đã tạo cơ hội để em thực hiện dự

án này Đây không chỉ là một bài học về kỹ thuật mà còn là một hành trình để em rèn luyện tư duy, kỹ năng giải quyết vấn đề và sự tự tin khi đối mặt với các thách thức trong lập trình Những kiến thức và kinh nghiệm này sẽ là nền tảng quý giá giúp em phát triển

sự nghiệp trong tương lai !

CHƯƠNG 1 : CƠ SỞ LÝ THUYẾT

I.GIỚI THIỆU CHUNG VỀ ỨNG DỤNG

1 Khái niệm.

Ứng dụng di động, hay còn gọi là app, là một phần mềm được thiết kế để chạy trêncác thiết bị di động như điện thoại thông minh, máy tính bảng, và các thiết bị di động khác Các ứng dụng di động thường được phát triển để thực hiện các chức năng cụ thể, từgiải trí, học tập, đến hỗ trợ công việc và quản lý thông tin cá nhân Với sự phát triển của công nghệ, ứng dụng di động đã trở thành một phần không thể thiếu trong cuộc sống hàng ngày, giúp người dùng thực hiện nhiều công việc phức tạp chỉ với một vài thao tác trên màn hình cảm ứng

Ứng dụng di động được xây dựng trên nhiều nền tảng khác nhau, bao gồm iOS, Android, và các hệ điều hành khác Sự phổ biến của ứng dụng di động đã thúc đẩy sự phát triển của các công nghệ và công cụ phát triển phần mềm mới, nhằm đáp ứng nhu cầungày càng đa dạng của người dùng trên toàn cầu

2.Phân loại ứng dụng

2.1.Phân loại theo chức năng

Ứng dụng giải trí (Entertainment Apps): Bao gồm các ứng dụng âm nhạc, video, trò chơi điện tử và mạng xã hội Những ứng dụng này giúp người dùng thư giãn và kết nối với bạn bè, gia đình.Một số ứng dụng nội bật như : Spotify ( âm nhạc), Netflix

(video), Facebook ( mạng xã hội),…

Ứng dụng năng suất (Productivity Apps): Các ứng dụng hỗ trợ công việc như lịch, quản lý công việc, ghi chú, email, và các công cụ văn phòng Những ứng dụng này giúp người dùng quản lý thời gian và công việc hiệu quả hơn.Một số ứng dụng nổi bật như : Microsoft Outlook (email), Google Calendar (lịch), Trello (quản lý công việc), Evernote (ghi chú),…

Ứng dụng giáo dục (Educational Apps): Bao gồm các ứng dụng học ngoại ngữ, khoa học, toán học, và các lĩnh vực khác Các ứng dụng giáo dục giúp người dùng tiếp cận kiến thức mới một cách tiện lợi và thú vị.Một số ứng dụng phổ biến như : Duolingo (học ngoại ngữ), Khan Academy (học khoa học và toán học), Coursera (khóa học trực tuyến),…

Ứng dụng sức khỏe và thể dục (Health & Fitness Apps): Ứng dụng theo dõi sức khỏe, quản lý chế độ ăn uống, luyện tập thể thao và giấc ngủ, giúp người dùng duy trì một lối sống lành mạnh MyFitnessPal (quản lý chế độ ăn uống), Strava (theo dõi luyện tập thể thao), Sleep Cycle (giám sát giấc ngủ),…

2.2.Phân loại theo công nghệ phát triển

Ứng dụng gốc (Native Apps): Được phát triển riêng cho từng hệ điều hành như iOS hoặc Android, sử dụng các ngôn ngữ lập trình và công cụ phát triển tương ứng (Swiftcho iOS, Java/Kotlin cho Android) Ứng dụng gốc thường có hiệu suất cao và tích hợp sâu với các chức năng của thiết bị

Ứng dụng đa nền tảng (Cross-Platform Apps): Được phát triển để chạy trên nhiều

hệ điều hành khác nhau bằng cách sử dụng các framework như React Native, Flutter hoặcXamarin Ứng dụng đa nền tảng giúp tiết kiệm thời gian và chi phí phát triển.

Ứng dụng web (Web Apps): Là các ứng dụng chạy trên trình duyệt web của thiết

bị di động và không yêu cầu cài đặt Chúng thường được phát triển bằng HTML, CSS, vàJavaScript

2.3.Theo phương thức cung cấp

Ứng dụng miễn phí (Free Apps): Người dùng có thể tải xuống và sử dụng mà không phải trả phí Thông thường, những ứng dụng này kiếm tiền qua quảng cáo hoặc các giao dịch mua trong ứng dụng (in-app purchases)

Ứng dụng trả phí (Paid Apps): Người dùng phải mua ứng dụng trước khi có thể tảixuống và sử dụng Các ứng dụng trả phí thường không chứa quảng cáo và cung cấp các tính năng cao cấp hơn

Ứng dụng freemium (Freemium Apps): Kết hợp giữa miễn phí và trả phí, người dùng có thể tải xuống và sử dụng các tính năng cơ bản miễn phí, nhưng phải trả phí để

mở khóa các tính năng nâng cao

3.Cấu trúc ứng dụng

3.1.Giao diện người dùng (User Interface - UI) :

Màn hình chính (Home Screen): Là điểm truy cập đầu tiên của người dùng, hiển thị các chức năng chính của ứng dụng

Menu điều hướng (Navigation Menu): Cung cấp các liên kết đến các phần khác nhau của ứng dụng, giúp người dùng dễ dàng di chuyển giữa các màn hình

Các thành phần tương tác (Interactive Elements): Bao gồm nút bấm, biểu mẫu, danh sách, và các yếu tố tương tác khác giúp người dùng thực hiện các tác vụ trên ứng dụng

3.2.Tầng xử lý logic (Logic Layer) :

Xử lý dữ liệu (Data Processing): Quản lý việc xử lý dữ liệu đầu vào từ người dùng, bao gồm tính toán, phân tích, và lưu trữ dữ liệu

Tích hợp dịch vụ (Service Integration): Kết nối ứng dụng với các dịch vụ bên ngoài như API, cơ sở dữ liệu, và các dịch vụ đám mây để cung cấp nội dung và chức năng cho người dùng

Quản lý phiên làm việc (Session Management): Đảm bảo an toàn và liên tục trong việc sử dụng ứng dụng bằng cách quản lý các phiên làm việc của người dùng

3.3.Tầng lưu trữ dữ liệu (Data Storage Layer) :

Cơ sở dữ liệu cục bộ (Local Database): Lưu trữ dữ liệu trên thiết bị người dùng, cho phép truy cập nhanh chóng và hoạt động ngoại tuyến (offline)

Cơ sở dữ liệu đám mây (Cloud Database): Lưu trữ dữ liệu trên máy chủ từ xa, giúp đồng bộ hóa dữ liệu giữa các thiết bị và cung cấp khả năng mở rộng

3.4.Tầng bảo mật (Security Layer) :

Xác thực người dùng (User Authentication): Đảm bảo chỉ có người dùng hợp lệ mới có thể truy cập vào ứng dụng và dữ liệu của họ

Mã hóa dữ liệu (Data Encryption): Bảo vệ dữ liệu người dùng bằng cách mã hóa thông tin trước khi lưu trữ hoặc truyền tải

Quản lý quyền (Permissions Management): Kiểm soát quyền truy cập của ứng dụng vào các chức năng hệ thống và dữ liệu cá nhân trên thiết bị

3.5.Tầng hiệu suất và tối ưu hóa (Performance and Optimization Layer):

Tối ưu hóa hiệu suất (Performance Optimization): Cải thiện tốc độ xử lý và phản hồi của ứng dụng bằng cách tối ưu hóa mã nguồn và giảm thiểu tải trọng hệ thống

Quản lý tài nguyên (Resource Management): Quản lý việc sử dụng bộ nhớ, pin, vàcác tài nguyên khác của thiết bị để đảm bảo ứng dụng hoạt động mượt mà và ổn định

4.Xu hướng phát triển ứng dụng di động 2024

Theo báo cáo của VNPT năm 2024 chính là kỷ nguyên của smartphone lên ngôi, Việt Nam sẽ có khoảng 60 triệu người sử dụng điện thoại thông minh, do đó nhu cầu sử dụng smartphone trung bình của người Việt sẽ là 3-5 giờ/ngày Vì vậy việc đầu tư phát triển app mobile là hết sức khôn ngoan cho các doanh nghiệp trong tương lai

Sự tiến bộ của công nghệ và trải nghiệm người dùng đang thúc đẩy sự phát triển của thị trường thiết kế ứng dụng di động Cứ mỗi bản cập nhật mới của các hệ điều hành mới sẽ tạo ra những cải tiến mới về thiết kế mobile app và tính năng để đáp ứng nhu cầu của người dùng hơn

4.1.Công nghệ 5G

Mạng lưới di động thế hệ thứ 5 được kỳ vọng sẽ cách mạng hóa hệ thống thông tinliên lạc, cùng với nhiều lĩnh vực khác như giao thông đô thị Hình ảnh chiếc xe không người lái vận hành an toàn trên phố được mong chờ có thể hành hiện thực Apple đã thật

sự rất thành công trong lĩnh vực thanh toán và các thiết bị ngoại vi như tai nghe không dây AirPods

Tai nghe thông minh, loa và các thiết bị gia đình kết nối với “Internet vạn vật” được dự đoán sẽ nằm trong những lĩnh vực phát triển mạnh trong năm 2024 Một xu hướng khác phải kể đến việc tăng cường các dịch vụ truyền phát trực tuyến các chương trình truyền hình (TV streaming), sau khi Apple và Disney tham gia vào mảng này cùng với Netflix và Amazon Vì vậy ứng dụng trực tuyến mua sắm, giải trí sẽ luôn chiếm thị phần rất lớn trong những năm tới đây

4.2.Công nghệ trí tuệ nhân tạo AI

Công nghệ AI (viết tắt của Artifical Intelligence) hoặc trí thông minh nhân tạo là công nghệ mô phỏng các quá trình suy nghĩ và học tập của con người cho máy móc, đặc

chuyên gia, nhận dạng tiếng nói và thị giác máy tính (nhận diện khuôn mặt, vật thể hoặc chữ viết)

Công nghệ này được con người lập trình với mục đích giúp các thiết bị công nghệ thông minh có thể tự động hóa các hành vi thông minh như con người Nó sẽ làm thay đổi toàn bộ cách chúng ta tương tác với các ứng dụng di động

Trí tuệ nhân tạo – AI ngoài việc giúp ứng dụng trở nên trực quan hơn Chúng còn giúp mang lại trải nghiệm tốt hơn cho người dùng Vì tất cả thông tin của người dùng được chuyển qua các thuật toán Từ đó có thể tạo đề xuất phù hợp với sở thích và vị trí của người dùng Nó giúp con người có dễ dàng trong việc thu thập thông tin, đặt lịch hẹn,sắp xếp lịch trình Và giúp chúng ta tối ưu hóa năng suất làm việc tốt hơn

4.3.Điện toán đám mây di dộng

Với ứng dụng điện toán đám mây di động MCC để giúp các ứng dụng di động trở nên phong phú và người dùng có thể trải nghiệm liền mạch trên nhiều thiết bị Điều này rất có lợi cho các công ty để phục vụ người dùng trên thiết bị di động Ví dụ như các ứng dụng di động chăm sóc sức khỏe của các dịch vụ khám chữa bệnh cần xử lý thông tin để cung cấp chẩn đoán từ xa thì không thể thiếu phần tích hợp giải pháp điện toán đám mây

di động

II.TỔNG QUAN VỀ CÔNG NGHỆ REACT NATIVE

1.Lịch sử phát triển và tầm quan trọng của React Native.

React Native là một framework phát triển ứng dụng di động đa nền tảng được tạo bởi Facebook Nó cho phép các nhà phát triển xây dựng ứng dụng di động cho cả nền tảng iOS và Android bằng việc sử dụng JavaScript và React, một thư viện JavaScript phổ biến được sử dụng để xây dựng giao diện người dùng

Một trong những ưu điểm chính của React Native là khả năng chia sẻ mã nguồn giữa các nền tảng khác nhau, giúp tiết kiệm thời gian và công sức cho việc phát triển ứng dụng di động đa nền tảng React Native sử dụng một số thành phần giao diện người dùng được cung cấp sẵn và cho phép bạn tạo các ứng dụng với giao diện gần giống với ứng dụng native, có hiệu suất tương đương

Các phiên bản chính của React Native đã mang lại nhiều cải tiến về tính năng, hiệusuất, và khả năng tương thích với các phiên bản mới của iOS và Android Từ những ngày đầu, React Native đã không ngừng phát triển với sự đóng góp từ cộng đồng và sự hỗ trợ mạnh mẽ từ Facebook, giúp nó trở thành một trong những framework hàng đầu cho việc phát triển ứng dụng di động hiện nay

1.1.Lịch sử ra đời của React Native.

Vào những năm đầu tiên khi phát triển dịch vụ di động của mình, Facebook đã lựachọn sử dụng một trang web di động dựa trên HTML5 thay vì xây dựng các ứng dụng native trên các nền tảng iOS và Android Tuy nhiên, giải pháp này đã gặp nhiều khó khăn

về hiệu suất và trải nghiệm người dùng Mark Zuckerberg thậm chí đã thừa nhận sai lầm này và cam kết cải thiện trải nghiệm di động của Facebook.

Sau đó, Jordan Walke đã có một khám phá mới vào năm 2013 Ông tìm ra cách sử dụng JavaScript để tạo các phần tử giao diện người dùng cho ứng dụng iOS Tiếp theo, ông đã cùng với đội ngũ phát triển của Facebook tiếp tục biến ý tưởng này thành React Native Facebook cũng tổ chức cuộc thi Hackathon đánh giá khả năng hoạt động của React Native

Kết quả là, vào năm 2015, React Native đã ra mắt và trở thành một giải pháp phát triển ứng dụng di động đa nền tảng tiên phong, giúp giảm thời gian, nguồn lực cần thiết cho việc phát triển ứng dụng trên cả hai hệ điều hành iOS và Android

2.Nguyên tắc hoạt động của React Native.

React Native là một framework cho phép phát triển ứng dụng di động đa nền tảng bằng cách sử dụng JavaScript và JSX (JavaScript XML), một ngôn ngữ đánh dấu giống với XML để mô tả giao diện người dùng Framework này có khả năng thao tác với cả 2 luồng là “main thread” và “JS thread”

Main thread (luồng chính): Main thread đảm nhiệm vai trò cập nhật giao diện người dùng và xử lý tương tác người dùng Nó là nơi các sự kiện giao diện như nhấn nút, chạm vào màn hình và cập nhật giao diện được xử lý

JS thread (luồng JavaScript): JS thread đảm bảo hệ thống hoạt động hiệu quả thông qua việc thực thi và xử lý mã nguồn JavaScript Điều này cho phép bạn xử lý logic ứng dụng, truy vấn dữ liệu và tương tác với các API bên ngoài

React Native hoạt động dựa trên một nguyên tắc tương tự với React, nhưng khác với React trong việc không sử dụng thao tác với DOM và HTML Thay vào đó, nó chạy một quá trình xử lý nền với nền tảng gốc

Một phần quan trọng của cách React Native hoạt động là “Bridge” (cầu nối) Mặc

dù JavaScript và mã native được viết bằng các ngôn ngữ khác nhau hoàn toàn, Bridge vẫn là tính năng cầu nối giúp thao tác 2 chiều giữa 2 luồng có thể thực hiện dễ dàng hơn Bridge cho phép mã JavaScript và mã native gửi và nhận thông điệp lẫn nhau, giúp tươngtác giữa 2 phần này trong ứng dụng React Native

3 Cách thức hoạt động của React Native.

React Native hoạt động theo các bước sau:

Bước 1 - Viết mã JavaScript: Lập trình viên sử dụng JavaScript để viết mã ứng dụng di động trong React Native Mã này mô tả giao diện người dùng và tương tác với các thành phần và API của hệ điều hành

Bước 2 - Bridge kết nối mã JavaScript và ứng dụng native: Mã JavaScript chạy trong môi trường JavaScript runtime của React Native Nó tương争 tác với các thành phần bridge để gửi yêu cầu và nhận kết quả từ ứng dụng native.

Bước 3 - Các thành phần UI được tạo ra: React Native sử dụng các thành phần UI

để xây dựng giao diện người dùng Các thành phần này tương tự như các thành phần của ứng dụng native, và có thể được tạo ra từ mã JavaScript

Bước 4 - Thành phần bridge chuyển đổi yêu cầu: Khi mã JavaScript gửi yêu cầu tương tác với các thành phần native, các thành phần bridge chuyển đổi yêu cầu này thành các lệnh và thông điệp tương ứng để gửi đến ứng dụng native

Bước 5 - Ứng dụng native xử lý yêu cầu: Ứng dụng native nhận và xử lý các yêu cầu được gửi từ thành phần bridge Nó tương争 tác với các API và các thành phần native khác để thực hiện các tác vụ và trả về kết quả

Bước 6 - Kết quả được trả về cho mã JavaScript: Khi ứng dụng native hoàn thành

xử lý yêu cầu, kết quả được trả về qua các thành phần bridge và đưa lại cho mã

JavaScript Mã JavaScript có thể tiếp tục tương tác với kết quả này hoặc cập nhật giao diện người dùng nếu cần

Qua quá trình này, React Native cho phép lập trình viên sử dụng mã JavaScript để xây dựng ứng dụng di động với giao diện người dùng tương tự như ứng dụng native và tích hợp tốt với các tính năng của hệ điều hành

4.Ưu nhược điểm của React Native

4.1.Ưu điểm

4.1.1Phát triển đa nền tảng ( Cross-Platform).

React Native cho phép lập trình viên sử dụng một mã nguồn duy nhất để phát triểnứng dụng cho cả iOS và Android, giúp tiết kiệm công sức, thời gian Nhờ vậy, doanh nghiệp, lập trình viên có thể tiết kiệm chi phí vì không cần phát triển hai ứng dụng riêng biệt Một mã nguồn chung cũng giúp việc bảo trì, nâng cấp ứng dụng dễ dàng hơn, chỉ cần thay đổi một lần thay vì hai nền tảng Chính vì thế, React Native phù hợp cho các độingũ phát triển nhỏ hoặc khi yêu cầu tiến độ hoàn thành nhanh chóng

4.1.2Tốc độ phát triển nhanh chóng.

Với sự hỗ trợ của các thư viện phong phú cùng khả năng tái sử dụng code giữa cácnền tảng, React Native hỗ trợ đẩy nhanh tiến độ phát triển ứng dụng Các thư viện UI sẵn

có giúp tạo ra giao diện dễ dàng mà không cần phải viết từ đầu, đồng thời React Native

có hệ sinh thái module phong phú cho phép xử lý hầu hết các tác vụ thông thường một cách nhanh chóng Việc này giúp giảm bớt khối lượng công việc lặp lại, cho phép các nhàphát triển tập trung vào các tính năng chính của ứng dụng, cải thiện hiệu quả, năng suất làm việc

4.1.3Hiệu suất cao.

React Native kết hợp giữa mã JavaScript và mã gốc của hệ điều hành, giúp ứng dụng có hiệu suất gần giống như ứng dụng gốc Đây là điều đặc biệt quan trọng khi phát triển các ứng dụng có yêu cầu xử lý phức tạp hoặc nhiều chức năng tương tác cao do hiệusuất là yếu tố then chốt ảnh hưởng đến trải nghiệm người dùng Các API gốc có thể được tích hợp trực tiếp, giúp ứng dụng hoạt động mượt mà hơn mà không gặp các vấn đề về hiệu suất như một số công cụ phát triển đa nền tảng khác.

4.1.4Tính linh hoạt và khả năng mở rộng

React Native giúp tích hợp dễ dàng với mã gốc, cho phép ứng dụng tùy biến linh hoạt để đạt hiệu suất cao nhất cho các tính năng đặc thù Nó rất hữu ích khi cần tối ưu sâu

về hiệu suất cho các phần mềm đòi hỏi đồ họa hoặc xử lý phức tạp Ví dụ, khi cần tối ưu hóa trải nghiệm người dùng với các tính năng như camera, AR/VR hoặc các API nền tảngđặc thù, React Native cho phép tích hợp với mã iOS, Android một cách trực tiếp, đảm bảo tính năng mượt mà, hiệu quả nhất

4.2.Nhược điểm

4.2.1.Hiệu suất kém hơn so với ứng dụng gốc

Dù React Native có thể cung cấp hiệu suất tốt, nhưng nó vẫn không đạt mức tối ưunhư các ứng dụng được viết hoàn toàn bằng mã gốc Khi cần xử lý các tác vụ phức tạp hoặc yêu cầu cao về hiệu suất như game đồ họa cao hoặc các ứng dụng AR/VR, React Native có thể gặp hạn chế Đây là do React Native phải dựa vào một cầu nối giữa mã

JavaScript và mã gốc, gây ra độ trễ nhất định, có thể ảnh hưởng đến tốc độ xử lý.

chuyên sâu về nền tảng gốc của cả iOS, Android

4.2.3.Giao diện không nhất quán giữa các nền tảng

Một trong những mục tiêu của React Native là mang lại giao diện nhất quán giữa các hệ điều hành Tuy nhiên, các thành phần giao diện vẫn có thể hiển thị khác nhau trên iOS và Android, do mỗi hệ điều hành có quy chuẩn riêng về thiết kế Do vậy, đôi khi các lập trình viên phải thực hiện các tùy chỉnh giao diện riêng biệt cho từng nền tảng để đảm bảo trải nghiệm người dùng đồng nhất, gây mất đi tính đơn giản của việc phát triển đa nền tảng

4.2.4.Cầu nối Javacript – Native gây phức tạp.

Một trong các vấn đề kỹ thuật lớn của React Native là sự phụ thuộc vào cầu nối giữa JavaScript và mã gốc để giao tiếp với nhau Đối với các tác vụ yêu cầu xử lý nhanh,

sự phụ thuộc này có thể làm chậm tốc độ của ứng dụng, gây ra các lỗi không mong muốn.Cầu nối Javascript – Native cũng làm tăng thêm độ phức tạp trong việc quản lý lỗi vì mỗiphần có thể gây lỗi riêng biệt, làm cho việc gỡ lỗi trở nên khó khăn.

4.2.5.Hạn chế về tính năng gốc.

Mỗi khi React Native được cập nhật, đặc biệt là các thay đổi lớn, các thư viện và mô-đun bên thứ ba cũng phải cập nhật để tương thích, gây ra các vấn đề không mong muốn nếu các thư viện chưa kịp cập nhật, khiến ứng dụng có thể gặp lỗi hoặc phải chờ đợi cho đến khi các thư viện này hoàn thiện Nó cũng góp phần làm tăng thêm thời gian bảo trì, tốn công sức từ phía lập trình viên, nhất là khi các bản cập nhật thường xuyên, không tương thích ngược

5.Một số ứng dụng được xây dựng dựa trên React-Native

5.2.Skype.

Skype đã chuyển sang sử dụng React Native để phát triển lại ứng dụng di động của mình, nhằm cải thiện hiệu suất, tốc độ trải nghiệm Với React Native, Skype có thể nhanh chóng triển khai các tính năng mới, tạo trải nghiệm người dùng nhất quán Khả năng tái sử dụng mã nguồn trên cả iOS, Android của React Native đã giúp Skype tối ưu hóa quy trình phát triển, từ đó cung cấp các bản cập nhật cho người dùng nhanh hơn, ổn định hơn

5.3.Pinterest

Pinterest cũng đã sử dụng React Native trong các thành phần của ứng dụng để tối

ưu hóa trải nghiệm người dùng trên di động Với React Native, Pinterest có thể phát triển các tính năng mới một cách nhanh chóng trên cả hai hệ điều hành, đồng thời tận dụng tính năng tái sử dụng mã nguồn để giảm thời gian, chi phí phát triển Điều này giúp Pinterest cung cấp các tính năng mới mẻ đến với người dùng sớm hơn, đồng thời duy trì

sự ổn định, hiệu quả của ứng dụng

III.CƠ SỞ LÝ THUYẾT VÀ CÔNG CỤ PHÁT TRIỂN

1.Kiến trúc của ứng dụng React Native.

1.1.Cấu trúc thư mục cơ bản

 Tệp README.md là tệp tài liệu giới thiệu dự án của bản

1.2.Mô hình Bridge trong React Native

Mô hình Bridge trong React Native là cơ chế cho phép giao tiếp hai chiều giữa mãJavaScript và mã Native (các nền tảng gốc như iOS hoặc Android) Đây là phần cốt lõi của React Native, giúp bạn xây dựng ứng dụng với logic và giao diện bằng JavaScript, nhưng vẫn sử dụng sức mạnh của mã Native để tương tác với phần cứng hoặc hệ điều hành

Mô hình Bridge được chia làm 3 thành phần chính, với vai trò như sau:

 Javascript thread : là nơi mà logic ứng dụng và giao diện được viết bằng

Javascript, xử lý các yêu cầu từ người dùng ( ví dụ : nhấn nút, cuộn trang,…), tạo

và gửi các lệnh Bridge tới mã Native để xử lý

 Bridge layer : là thành phần trung gian chịu trách nhiệm dịch các lệnh từ

JavaScript sang ngôn ngữ Native và ngược lại, giao tiếp bằng cách sử dụng Json hoặc các thông điệp được tuần tự hóa, không thực thi lệnh mà chỉ đóng vai trò vận chuyển dữ liệu

 Native thread : là nơi mã gốc thực thi lệnh từ Javascript, cung cấp quyền truy cập vào các API gốc, phần cứng ( camera, cảm biến, GPS ), hệ điều hành, trả kết quả

về cho Javascript thông qua Bridge

Lợi ích của mô hình Bridge giúp tái sử dụng mã Javascript vì bạn chỉ cần viết một lần logic bằng JavaScript và sử dụng lại trên cả IOS và Android Dễ dàng tích hợp các API hoặc thư viện mã gốc, chẳng hạn như camera, GPS, hoặc xử lý hình ảnh hiệu năng cao

Ví dụ cụ thể

Giả sử bạn cần hiển thị một hình ảnh trong ứng dụng React Native

Mã JavaScript yêu cầu hiển thị hình ảnh

Lệnh JavaScript sẽ được tuần tự hóa thành thông điệp

Mã Native xử lý lệnh

Trên IOS :

Trên android :

Kết quả trả về :

 Native xử lý xong và hiển thị ảnh lên màn hình

 Nếu có lỗi, thông tin lỗi sẽ được gửi lại JavaScript qua Bridge

1.3.Các thành phần chính của React Native

1.3.1.Component

Khái niệm : Component là các khối xây dựng chính của giao diện trong React Native, mỗi thành phần đại diện cho một phần giao diện của người dùng, có thể tái sử dụng và kết hợp với nhau để tạo ra các ứng hoàn chỉnh

Phân loại :

 Functional Components (Thành phần hàm) : là các hàm JavaScript nhận đầu vào (props) và trả về giao diện

 Class Components (Thành phần lớp) : Là các lớp ES6 kế thừa từ

React.Component, sử dụng cho các thành phần có trạng thái phức tạp và cần quản

lý vòng đời

Khái niệm : State đại diện cho dữ liệu hoặc trạng thái của một component tại một thời điểm cụ thể, trạng thái có thể thay đổi theo thời gian dựa trên các hành động của người dùng hoặc logic của ứng dụng

Quản lý state :

 Khởi tạo state: State được khởi tạo trong constructor hoặc bằng hook useState

 Thay đổi state: Sử dụng phương thức setState (với class component) hoặc set tronghook useState

Ví dụ

 Class component :

 Functional Component với useState

Khái niệm : Props (viết tắt của Properties) là dữ liệu được truyền từ component cha đến component con Props không thể thay đổi (immutable) và chỉ đọc được (read-only)

Cách sử dụng : Props được truyền vào dưới dạng thuộc tính khi sử dụng

component, có thể truyền bất kỳ kiểu dữ liệu nào qua props: chuỗi, số, mảng, đối tượng, hoặc cả hàm

Ví dụ :

2 Công cụ phát triển và môi trường làm việc.

Để xây dựng ứng dụng React Native, cần thiết lập môi trường làm việc với các công cụ hỗ trợ cần thiết Các bước bao gồm cài đặt công cụ phát triển, thiết lập môi trường và kiểm tra hoạt động

Bước 1 : Cài Node.js và npm