React Native / OTA Update (Expo Updates)

OTA Update (Expo Updates)

Аппаа App Store / Play Store-д нийтэлсэн. Гэтэл жижиг алдаа олдлоо. Дэлгүүрт дахин submit хийж, Apple-н шалгалтыг хоёр хоног хүлээх үү? Үгүй — Expo Updates ашиглаж JavaScript кодын өөрчлөлтийг хэдэн минутын дотор хэрэглэгч бүрт хүргэх боломжтой. Энэ бол Expo-н хамгийн хүчирхэг онцлогуудын нэг.

OTA Update гэж яаж ажилладаг вэ?

React Native апп хоёр давхаргатай:

Native давхарга — iOS/Android-н жинхэнэ код. Энийг өөрчлөхөд заавал дэлгүүрт дахин нийтлэх шаардлагатай.
JavaScript давхарга — таны бичсэн бүх React Native код. Энийг OTA-р шинэчилж болно.

код

Хэрэглэгч апп нээнэ
    ↓
Expo Updates серверт шинэ bundle байгаа эсэхийг шалгана
    ↓
Шинэ bundle байвал татаж авна (background-д)
    ↓
Дараагийн удаа нээхэд шинэ код ажиллана

Screen component, API endpoint, дизайн, логик — эдгээрийг бүгдийг OTA-р шинэчилж болно. Шинэ native module нэмэх, permissions өөрчлөх зэрэгт л дэлгүүр шаардлагатай.

Expo Updates суулгах ба тохируулга

bash

npx expo install expo-updates

app.json-д updates тохируулгыг нэмнэ:

json

{
  "expo": {
    "name": "Миний Апп",
    "slug": "minii-app",
    "updates": {
      "enabled": true,
      "fallbackToCacheTimeout": 0,
      "url": "https://u.expo.dev/your-project-id"
    },
    "runtimeVersion": {
      "policy": "appVersion"
    }
  }
}

runtimeVersion нь native давхарга хоорондоо нийцтэй эсэхийг шалгадаг. appVersion policy ашиглавал app.json-н version утгатай таарах update л хэрэглэгдэнэ — буруу update тархахаас сэргийлнэ.

Update нийтлэх

JavaScript кодоо өөрчилсний дараа EAS Update ашиглан нийтэлнэ:

bash

# EAS Update суулгана (нэг удаа)
npm install -g eas-cli

# Update нийтлэнэ — дэлгүүрт submit шаардлагагүй!
eas update --branch production --message "Нэвтрэх дэлгэцийн алдаа засав"

# Тодорхой платформд
eas update --platform android --branch production --message "Android layout засав"

# Preview branch-д (туршилтын хэрэглэгчдэд)
eas update --branch preview --message "Шинэ feature туршиж байна"

Команд ажиллаад дуусахад хэдэн секундын дотор серверт байршина. Аппаа нээж буй хэрэглэгчид дараагийн удаа нээхэд шинэчлэл автоматаар хэрэглэгдэнэ.

Кодоос update хянах

Хэрэглэгч update-г хүлээлгүй шууд авахыг хүсвэл кодоос хянах боломжтой:

typescript

import { useEffect, useState } from 'react';
import * as Updates from 'expo-updates';
import { View, Text, TouchableOpacity, StyleSheet, Alert } from 'react-native';

export function UpdateChecker() {
  const [checking, setChecking] = useState(false);
  const [updateAvailable, setUpdateAvailable] = useState(false);

  async function checkForUpdate() {
    // Development mode-д ажиллахгүй — production build-д л хэрэгтэй
    if (__DEV__) return;

    setChecking(true);
    try {
      const update = await Updates.checkForUpdateAsync();

      if (update.isAvailable) {
        setUpdateAvailable(true);
        // Шинэчлэлийг татаж авна
        await Updates.fetchUpdateAsync();
      }
    } catch (error) {
      console.error('Update шалгах алдаа:', error);
    } finally {
      setChecking(false);
    }
  }

  function applyUpdate() {
    Alert.alert(
      'Шинэчлэл бэлэн',
      'Аппыг дахин эхлүүлэх үү?',
      [
        { text: 'Болих', style: 'cancel' },
        {
          text: 'Тийм',
          onPress: () => Updates.reloadAsync(),
        },
      ]
    );
  }

  useEffect(() => {
    checkForUpdate();
  }, []);

  if (!updateAvailable) return null;

  return (
    <View style={styles.banner}>
      <Text style={styles.text}>🔄 Шинэчлэл бэлэн болоод байна</Text>
      <TouchableOpacity style={styles.button} onPress={applyUpdate}>
        <Text style={styles.buttonText}>Шинэчлэх</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  banner: {
    backgroundColor: '#0f172a',
    borderTopWidth: 1,
    borderTopColor: '#22d3ee',
    padding: 12,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  text: { color: '#94a3b8', fontSize: 14 },
  button: { backgroundColor: '#22d3ee', paddingHorizontal: 16, paddingVertical: 6, borderRadius: 6 },
  buttonText: { color: '#0b1120', fontWeight: 'bold', fontSize: 14 },
});

Branch стратеги

Том багийн хэрэглэгчдэд өөр өөр update хүргэхэд branch ашиглана:

bash

# Хөгжүүлэгчдэд шинэ feature туршуулах
eas update --branch staging --message "Шинэ профайл дэлгэц"

# Бүх хэрэглэгчдэд нийтлэх
eas update --branch production --message "Профайл дэлгэц баталгаажлаа"

# Тодорхой хувилбарт холбох
eas channel:edit production --branch production

OTA Update нь хөгжүүлэгчдэд асар том эрх чөлөө өгдөг — алдааг хурдан засах, туршилтуудыг хурдан нийтлэх боломж. Энэ функцийг ашигла!

Дараагийн хичээлд:

Эцсийн төсөл — курсад сурсан бүх зүйлээ нэгтгэж бодит апп бүтээнэ. Navigation, Supabase backend, authentication, push notification, EAS Build — бүгдийг хамруулсан иж бүрдэл апп хийнэ.

← Өмнөх хичээлApp Store / Play Store нийтлэх Дараах хичээл →Эцсийн төсөл