Phát triển ứng dụng di động với React Native

Trong bối cảnh di động là nền tảng không thể thiếu, việc phát triển ứng dụng cho cả hai hệ điều hành iOS và Android một cách hiệu quả là ưu tiên hàng đầu của mọi doanh nghiệp. Khóa học Phát triển ứng dụng di động với React Native được thiết kế để trang bị cho bạn năng lực xây dựng các ứng dụng di động đa nền tảng (cross-platform) bằng cách sử dụng chính những kỹ năng React mà bạn đã biết.

React Native, một framework mạnh mẽ từ Meta (Facebook), cho phép bạn viết code một lần bằng JavaScript và React, sau đó biên dịch ra các ứng dụng có trải nghiệm hoàn toàn tự nhiên (truly native) trên cả iOS và Android. Chương trình sẽ hướng dẫn bạn từ việc thiết lập môi trường, xây dựng giao diện với các component cốt lõi, quản lý điều hướng, cho đến việc tương tác với các tính năng phần cứng của thiết bị và triển khai ứng dụng. Hoàn thành khóa học, bạn sẽ có khả năng tự mình phát triển một ứng dụng di động hoàn chỉnh từ đầu đến cuối.

Thời lượng: 42h

Hình thức đào tạo:

- Đào tạo trực tiếp tại lớp học
- Đào tạo trực tuyến
- Đào tạo hybrid (trực tuyến kết hợp trực tiếp)
- Đào tạo tại văn phòng khách hàng

KẾT QUẢ ĐẠT ĐƯỢC:

LÀM CHỦ HỆ SINH THÁI REACT NATIVE
Hiểu rõ kiến trúc và cách sử dụng các công cụ như Expo để khởi tạo, quản lý dự án.
XÂY DỰNG GIAO DIỆN NGƯỜI DÙNG NATIVE
Thành thạo sử dụng các Core Component và làm chủ Flexbox để xây dựng các giao diện phức tạp.
QUẢN LÝ ĐIỀU HƯỚNG VÀ TRẠNG THÁI ỨNG DỤNG
Sử dụng React Navigation để xây dựng các luồng điều hướng phức tạp (Stack, Tab, Drawer).
TÍCH HỢP VỚI CÁC TÍNH NĂNG CỦA THIẾT BỊ
Có khả năng sử dụng thư viện ngoài để tương tác với các API phần cứng như Camera, GPS.
NẮM VỮNG QUY TRÌNH HOÀN THIỆN VÀ TRIỂN KHAI
Thấu hiểu quy trình vận hành & triển khai gỡ lỗi, tối ưu và build ứng dụng thành file cài đặt (.apk, .ipa).

Đối tượng tham gia

Sinh viên

Muốn xây dựng sản phẩm cho cả iOS và Android một cách nhanh chóng.

Lập trình viên

Muốn mở rộng kỹ năng của mình sang lĩnh vực phát triển ứng dụng di động.

Nhân sự công nghệ

Muốn học một framework đa nền tảng để tăng tốc độ phát triển cho các dự án mới.

Nhà phát triển sản phẩm

Muốn trở thành một nhà phát triển xây dựng sản phẩm trên cả web và di động.

Nội dung khóa học

1. Giới thiệu React Native và Môi trường Phát triển

- Tổng quan về React Native:
  - Tìm hiểu React Native là gì, so sánh kiến trúc của nó với React cho web thông qua khái niệm Native Bridge.
- Lựa chọn môi trường:
  - Phân tích ưu nhược điểm và lựa chọn giữa việc sử dụng Expo và React Native CLI cho các loại dự án khác nhau.
- Thiết lập môi trường:
  - Hướng dẫn chi tiết các bước cài đặt và thiết lập môi trường phát triển cho cả hai hệ điều hành.
- Khởi tạo và chạy dự án:
  - Thực hành tạo dự án đầu tiên và chạy ứng dụng trên máy ảo (emulator/simulator) cũng như trên thiết bị thật.

2. Xây dựng Giao diện với Core Components

- Tìm hiểu các Core Component:
  - Nắm vững cách sử dụng các thành phần giao diện cơ bản và quan trọng nhất: View, Text, Image, TextInput, ScrollView.
- Styling trong React Native:
  - Học cách sử dụng StyleSheet API để tạo và quản lý các style cho giao diện một cách hiệu quả.
- Xử lý tương tác người dùng:
  - Làm chủ việc xử lý các sự kiện chạm, nhấn của người dùng với Button, TouchableOpacity, và Pressable.

3. Bố cục và Hiển thị Danh sách

- Làm chủ Flexbox:
  - Áp dụng Flexbox để xây dựng các layout phức tạp, linh hoạt và có khả năng responsive trên nhiều kích thước màn hình.
- Hiển thị danh sách:
  - Học cách hiển thị các danh sách dữ liệu dài một cách hiệu quả và tối ưu về hiệu năng với FlatList và SectionList.
- Tính năng nâng cao:
  - Thực hành xây dựng các component danh sách có tính năng “kéo để làm mới” (pull-to-refresh).

4. Điều hướng trong Ứng dụng với React Navigation

- Cài đặt và cấu hình:
  - Hướng dẫn cài đặt và cấu hình thư viện React Navigation, công cụ tiêu chuẩn cho việc điều hướng.
- Xây dựng các luồng điều hướng phổ biến:
  - Stack Navigator: Sử dụng cho các luồng tuần tự như từ danh sách sang chi tiết.
  - Tab Navigator: Sử dụng để tạo các màn hình chính của ứng dụng.
  - Drawer Navigator: Sử dụng để tạo các menu ẩn điều hướng bên cạnh.
- Truyền dữ liệu:
  - Học các kỹ thuật để truyền dữ liệu qua lại giữa các màn hình trong ứng dụng.

5. Quản lý Trạng thái và Lưu trữ Dữ liệu

- Quản lý state:
  - Ôn tập và áp dụng useState và useEffect để quản lý state cục bộ cho từng component.
  - Sử dụng Context API để quản lý các state toàn cục, có thể truy cập từ nhiều nơi trong ứng dụng.
- Lưu trữ dữ liệu offline:
  - Học cách sử dụng AsyncStorage để lưu trữ dữ liệu một cách bền vững ngay trên thiết bị của người dùng.

6. Tương tác với API và Thiết bị

- Gọi REST API:
  - Sử dụng fetch hoặc axios để gửi yêu cầu mạng và lấy dữ liệu từ các máy chủ backend.
- Xử lý trạng thái bất đồng bộ:
  - Quản lý và hiển thị các trạng thái giao diện tương ứng với quá trình gọi API: loading, error, success.
- Tích hợp Native Modules:
  - Sử dụng các thư viện bên ngoài để có thể truy cập vào các tính năng phần cứng của thiết bị như Camera, Thư viện ảnh, và Dịch vụ định vị (Geolocation).
- Quản lý quyền truy cập:
  - Học cách yêu cầu và quản lý các quyền truy cập (Permissions) từ người dùng trên cả iOS và Android.

7. Debugging, Tối ưu hóa và Hoàn thiện

- Gỡ lỗi (Debugging):
  - Hướng dẫn sử dụng các công cụ gỡ lỗi chuyên nghiệp như Flipper và React Native Debugger.
- Platform-specific code:
  - Tìm hiểu cách viết mã nguồn riêng biệt cho từng nền tảng (iOS/Android) khi cần thiết.
- Tối ưu hóa hiệu năng:
  - Giới thiệu các kỹ thuật cơ bản để tối ưu hóa hiệu năng cho ứng dụng React Native.
- Hoàn thiện ứng dụng:
  - Hướng dẫn cách quản lý các icon và màn hình chờ (splash screen) cho ứng dụng.

6. Đồ án cuối khóa

- Mục tiêu: Vận dụng toàn bộ kiến thức để xây dựng một ứng dụng di động đa nền tảng hoàn chỉnh, có giao diện chuyên nghiệp, tương tác với API thật và sử dụng các tính năng của thiết bị.
- Quy trình thực hiện:
  - Thiết kế: Lựa chọn đề tài (ví dụ: ứng dụng đọc tin tức, ứng dụng xem phim, mạng xã hội đơn giản), thiết kế giao diện (UI/UX) và luồng điều hướng.
  - Xây dựng: Phát triển các component, màn hình, và tích hợp React Navigation.
  - Tích hợp: Kết nối ứng dụng với một REST API, thực hiện các chức năng CRUD và quản lý trạng thái người dùng.
  - Hoàn thiện: Tích hợp ít nhất một tính năng phần cứng (ví dụ: sử dụng camera để cập nhật ảnh đại diện), xử lý quyền truy cập và tối ưu giao diện.
  - Build và Demo: Build ứng dụng thành file .apk (Android) và demo trực tiếp trên thiết bị thật.
- Yêu cầu đầu ra: Một ứng dụng di động hoạt động, mã nguồn được quản lý chuyên nghiệp trên GitHub, và file README.md mô tả chi tiết dự án.