Posted inProgramming

Phát hành ứng dụng di động đầu tiên: Hướng dẫn thực tế về React Native và Expo

Programming tutorial - IT technology blog
Programming tutorial - IT technology blog

Cú bứt tốc trong 3 phút

Việc thiết lập môi trường di động từng là một cơn ác mộng với những bản tải xuống Android Studio nặng 30GB và lỗi đường dẫn Xcode. Sau khi phát hành ba ứng dụng thực tế trong năm nay, tôi đã thấy Expo biến thử thách kéo dài nhiều giờ đó thành một cú bứt tốc chỉ trong ba phút. Nếu bạn đã cài đặt Node.js, bạn có thể đi từ một terminal trống trơn đến một ứng dụng đang chạy trên điện thoại thật trước khi tách cà phê kịp nguội.

Bắt đầu bằng cách khởi tạo dự án của bạn:

npx create-expo-app@latest my-first-app
cd my-first-app

Sau khi các tệp được tạo, hãy khởi động server phát triển:

npx expo start

Một mã QR sẽ xuất hiện trong terminal của bạn. Hãy mở camera iPhone hoặc Android, quét mã đó và ứng dụng Expo Go sẽ tải dự án của bạn ngay lập tức. Vòng lặp phản hồi tức thì này là một cú hích lớn về năng suất so với các bản build native truyền thống vốn có thể mất 5-10 phút để biên dịch.

Tại sao Expo cuối cùng đã sẵn sàng cho môi trường Production

Tôi từng tránh dùng Expo vì lo sợ về “khu vườn khép kín” (walled garden)—thời điểm bạn cần một tính năng native tùy chỉnh nhưng lại thấy mình bị mắc kẹt. Hạn chế đó giờ đã không còn. Với sự ra đời của Development Builds, giờ đây bạn có thể viết các module C++ hoặc Swift tùy chỉnh mà vẫn tận hưởng được quy trình làm việc của Expo.

Lợi thế của Managed Workflow

Các dự án React Native tiêu chuẩn buộc bạn phải quản lý các thư mục /ios và /android. Các thư mục này chứa đầy logic build phức tạp như Gradle script và CocoaPods. Managed workflow của Expo giúp ẩn đi sự phức tạp này. Bạn chỉ cần tập trung vào TypeScript, và Expo sẽ tự tạo các khung native cần thiết trong quá trình build. Chỉ riêng điều này đã giúp đội ngũ của chúng tôi tiết kiệm được khoảng 4-5 giờ xử lý lỗi local mỗi tuần.

Các Component cốt lõi và Layout

Hãy quên HTML đi. Trong thế giới di động, <div> trở thành <View> và <span> trở thành <Text>. Việc tạo kiểu sử dụng hệ thống CSS-in-JS gọi là StyleSheet. Một chi tiết quan trọng: Flexbox trên di động mặc định là flex-direction: column, ngược lại hoàn toàn so với web.

import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Xây dựng nhanh hơn với Expo</Text>
      <TouchableOpacity 
        style={styles.button} 
        onPress={() => console.log('Hành động đã được kích hoạt')}
      >
        <Text style={styles.buttonText}>Bắt đầu ngay</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f8f9fa',
    alignItems: 'center', 
    justifyContent: 'center',
  },
  title: {
    fontSize: 26,
    fontWeight: '800',
    color: '#1a1a1a',
    marginBottom: 24,
  },
  button: {
    backgroundColor: '#007AFF',
    paddingVertical: 12,
    paddingHorizontal: 24,
    borderRadius: 12,
  },
  buttonText: {
    color: 'white',
    fontSize: 18,
    fontWeight: '600',
  }
});

Navigation: Không chỉ dừng lại ở một màn hình duy nhất

Hầu hết các bài hướng dẫn đều dừng lại ở “Hello World”, nhưng các ứng dụng thực tế cần điều hướng (navigation). Tôi thực sự khuyên dùng Expo Router. Nó mang cơ chế routing dựa trên tệp (file-based routing)—cùng một logic được sử dụng trong Next.js—vào ứng dụng di động. Bạn không còn phải định nghĩa thủ công một ngăn xếp điều hướng phức tạp trong một tệp khổng lồ duy nhất nữa.

Cấu trúc ứng dụng của bạn

Sử dụng template tabs, thư mục của bạn sẽ luôn ngăn nắp:

  • app/_layout.tsx: Provider toàn cục và wrapper điều hướng.
  • app/index.tsx: Màn hình chính của bạn.
  • app/settings.tsx: Một route phụ.

Việc điều hướng đơn giản như sử dụng component Link, mang lại cảm giác tự nhiên hơn nhiều cho các lập trình viên web đang chuyển sang làm di động.

Những bài học kinh nghiệm sau 6 tháng thực chiến

Xây dựng UI chỉ chiếm 20% chặng đường. 80% còn lại là triển khai, tối ưu hóa và sửa lỗi. Dưới đây là cách xử lý những công việc nặng nhọc đó.

1. Thuê ngoài việc build với EAS

Expo Application Services (EAS) là một sự khai sáng. Nó build các tệp thực thi ứng dụng (IPA và AAB) trên đám mây. Bạn không cần một chiếc MacBook trị giá 2.000 USD để build ứng dụng iOS nữa. Bằng cách chạy eas build --platform ios, bạn để các máy chủ của Expo xử lý các chứng chỉ (certificates) và provisioning profiles—những thứ thường khiến các lập trình viên phải bỏ cuộc trong thất vọng.

2. Xử lý hình ảnh đúng cách

Hình ảnh độ phân giải cao là lý do số một khiến ứng dụng di động có cảm giác chậm chạp. Component Image mặc định của React Native khá cơ bản. Hãy chuyển sang expo-image. Nó hỗ trợ WebP, tự động xử lý bộ nhớ đệm (disk caching) và cung cấp hiệu ứng làm mờ dần (blur-up) mượt mà khi đang tải, giúp ứng dụng của bạn trông chuyên nghiệp hơn đáng kể.

3. “Vũ khí bí mật”: Cập nhật Over-the-Air

Hãy tưởng tượng bạn phát hiện một lỗi chính tả nghiêm trọng trong logic tính giá chỉ 5 phút sau khi ra mắt. Thông thường, bạn sẽ phải gửi một bản build mới và đợi 24-48 giờ để Apple xét duyệt. Với EAS Update, bạn có thể đẩy một bản sửa lỗi JavaScript ngay lập tức. Người dùng sẽ nhận được bản cập nhật vào lần tiếp theo họ mở lại ứng dụng.

# Triển khai hotfix lên production trong vài giây
eas update --branch production --message "Đã sửa lỗi thanh toán nghiêm trọng"

Lời kết

Khoảng cách giữa phát triển web và di động chưa bao giờ nhỏ đến thế. Mặc dù bạn vẫn có thể cần code native tùy chỉnh cho các trò chơi hiệu năng cao hoặc các bộ lọc AR phức tạp, Expo đáp ứng hoàn hảo 95% các trường hợp sử dụng trong kinh doanh. Hãy bắt đầu từ những việc nhỏ. Nắm vững logic layout. Dựa vào EAS để xử lý các công việc triển khai nặng nhọc. Nếu bạn có thể xây dựng một trang web React, bạn đã đi được nửa chặng đường để phát hành một ứng dụng di động đẳng cấp thế giới rồi.

Share:
Tags: