Vibe Coding Mobile App — Cursor + Expo สำหรับ React Native

คุณเคยอยากสร้าง mobile app แต่หยุดอยู่ที่ความคิดว่า "มันยากเกินไป" ไหม?

ในปี 2026 vibe coding mobile ทำให้สิ่งที่เคยใช้เวลาเป็นเดือนเหลือแค่ไม่กี่ชั่วโมง ด้วยคู่ผสม Cursor + Expo + Claude คุณสามารถสร้าง app จริงที่รันบน iOS และ Android ได้โดยไม่ต้องจำ syntax ทุกตัว ไม่ต้องเขียนโค้ดทีละบรรทัด

บทความนี้คือ guide แบบ step-by-step ที่จะพาคุณจาก 0 ไปถึง app ที่พร้อม submit App Store / Play Store ภายใน 1 ชั่วโมง

ถ้ายังไม่รู้จัก Vibe Coding เลย แนะนำอ่าน Vibe Coding คืออะไร? และ Vibe Coding สำหรับผู้เริ่มต้น ก่อน แล้วค่อยกลับมาที่นี่

---

1. ทำไม Expo คือทางเร็วสุดสำหรับ Vibe Coder ทำ Mobile App

ก่อนจะเริ่ม สิ่งสำคัญคือต้องเข้าใจว่าทำไม Expo ถึงเป็นตัวเลือกที่ดีที่สุดสำหรับ Vibe Coder

ปัญหาของ React Native ดิบๆ (Bare Workflow)

React Native แบบ Bare Workflow ต้องการ:

• ตั้งค่า Android Studio + Xcode เองทั้งหมด
• จัดการ native code (Java/Kotlin + Swift/Objective-C)
• linking library ด้วยตนเอง
• debug native crash ที่ AI ยังช่วยได้ยาก

สำหรับ Vibe Coder นี่คือ overhead ที่ไม่จำเป็น

Expo แก้ปัญหาทั้งหมดนี้

Expo คือ framework บน React Native ที่ abstract ความซับซ้อนออกไป:

สิ่งที่ต้องทำ	Bare React Native	Expo
ติดตั้ง Native dependencies	Manual linking	npx expo install
รัน app บน device	ต้องตั้งค่า emulator เอง	Expo Go app สแกน QR
Build สำหรับ production	Xcode + Android Studio	eas build cloud build
Camera, Location, Push	หา library + link เอง	expo-camera, expo-location พร้อมใช้
OTA Update	ไม่มี	Expo Updates (แก้ bug ไม่ต้อง re-submit)

สำหรับ Vibe Coding โดยเฉพาะ Expo มีอีกข้อดีหนึ่งที่สำคัญมาก: Claude รู้จัก Expo API ดีมาก เพราะ documentation ของ Expo ชัดเจนและเป็น TypeScript-first ทำให้ AI generate โค้ดถูกต้องสูงกว่า native React Native

ดูเพิ่มเติมเรื่อง setup ของ Cursor + Claude ได้ที่ Cursor + Claude Vibe Coding Setup

---

2. เตรียม Environment: Node, Expo CLI, Cursor, Simulator

สิ่งที่ต้องติดตั้งก่อน

ขั้นตอนที่ 1: ติดตั้ง Node.js

ไปที่ nodejs.org และดาวน์โหลด LTS version (แนะนำ 20.x หรือ 22.x)

ตรวจสอบหลังติดตั้ง:

node --version   # ควรขึ้น v20.x.x หรือสูงกว่า
npm --version    # ควรขึ้น 10.x.x หรือสูงกว่า

ขั้นตอนที่ 2: ติดตั้ง Expo CLI

npm install -g expo-cli
npx expo --version   # ตรวจสอบ version

ขั้นตอนที่ 3: ติดตั้ง Cursor

ดาวน์โหลดจาก cursor.sh และตั้งค่า Claude เป็น AI model หลัก ดู guide ละเอียดได้ที่ Cursor + Claude Vibe Coding Setup

ขั้นตอนที่ 4: ติดตั้ง Expo Go บน Mobile

เปิด App Store หรือ Play Store แล้วค้นหา "Expo Go" ติดตั้งบนมือถือจริงของคุณ นี่คือวิธีที่เร็วที่สุดสำหรับการ preview app ระหว่าง development

สำหรับคนอยากใช้ Simulator

iOS Simulator (Mac เท่านั้น):

• ติดตั้ง Xcode จาก App Store (ฟรี แต่ใช้พื้นที่เยอะ ~15GB)
• เปิด Xcode → Preferences → Components → ดาวน์โหลด iOS Simulator

Android Emulator:

• ติดตั้ง Android Studio
• สร้าง Virtual Device ผ่าน AVD Manager
• แนะนำ Pixel 7 API 34 หรือสูงกว่า

Tip สำหรับ Vibe Coder: ถ้าเพิ่งเริ่ม ใช้ Expo Go บนมือถือจริงแทน Simulator จะง่ายและเร็วกว่ามาก Simulator ค่อยตั้งเมื่อต้องการ test feature ที่จำเป็นต้องใช้

---

3. Step-by-Step: สร้าง App แรกใน 1 ชั่วโมง ด้วย Cursor + Claude

นี่คือ walkthrough จริงสำหรับการสร้าง Todo App ที่มี navigation ระหว่าง 2 screens, รายการ task, และปุ่ม Add/Delete

Step 1: สร้างโปรเจค (5 นาที)

เปิด Terminal แล้วรัน:

npx create-expo-app@latest MyFirstApp --template blank-typescript
cd MyFirstApp
npx expo start

หลังจาก npx expo start สแกน QR code ด้วย Expo Go บนมือถือ คุณจะเห็น "Hello World" ขึ้นทันที

Step 2: เปิดโปรเจคใน Cursor

cursor .

หรือเปิด Cursor แล้วใช้ File → Open Folder

Step 3: Prompt Claude ให้สร้าง App Structure

เปิด Cursor Composer (Cmd+I) แล้วพิมพ์:

ฉันกำลังสร้าง Todo App ด้วย Expo (TypeScript)
สร้าง:
1. HomeScreen ที่แสดง list of todos ด้วย FlatList
2. AddTodoScreen ที่มี TextInput และปุ่ม Save
3. Navigation ระหว่างสอง screen ด้วย @react-navigation/stack
4. ใช้ AsyncStorage เก็บข้อมูล
5. ทุก component ต้องเป็น TypeScript พร้อม type definitions

รัน: npx expo install @react-navigation/native @react-navigation/stack
react-native-screens react-native-safe-area-context @react-native-async-storage/async-storage
แล้วสร้างไฟล์ทั้งหมดที่จำเป็น

Claude จะ generate ทุกอย่างให้ รวมถึง:

• app/ หรือ screens/ folder structure
• Navigation setup ใน App.tsx
• TypeScript interface สำหรับ Todo
• AsyncStorage hooks

Step 4: ติดตั้ง Dependencies ที่ Claude แนะนำ

npx expo install @react-navigation/native @react-navigation/stack \
  react-native-screens react-native-safe-area-context \
  @react-native-async-storage/async-storage

ใช้ npx expo install เสมอ ไม่ใช่ npm install เพราะ Expo จะเลือก version ที่ compatible กับ SDK ของคุณโดยอัตโนมัติ

Step 5: Test บน Device

บันทึกไฟล์ → Expo Go จะ reload อัตโนมัติ (Hot Reload) ลอง interact กับ app ดู ถ้ามี error ให้ copy error message แล้วถาม Claude ใน Cursor ได้เลย

Step 6: Prompt ต่อยอด (Iterative Vibe Coding)

เมื่อโครงสร้างพื้นฐานทำงานได้แล้ว ค่อยเพิ่ม feature ทีละอย่าง:

เพิ่ม feature ให้ Todo มี:
- Priority (High/Medium/Low) ที่แสดงเป็น color badge
- Due date picker
- Swipe to delete gesture
ใช้ expo-haptics สำหรับ feedback เมื่อลบ

แนวทางนี้คือหัวใจของ vibe coding mobile — prompt → test → prompt ต่อ แทนที่จะเขียนทุกอย่างด้วยตัวเอง

---

4. Component หลักของ React Native ที่ต้องรู้

Claude จะ generate component เหล่านี้ให้ แต่การเข้าใจคร่าวๆ ช่วยให้ prompt ได้แม่นยำขึ้น

View และ Text — Building Blocks

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

export function MyCard({ title, subtitle }: { title: string; subtitle: string }) {
  return (
    <View style={styles.card}>
      <Text style={styles.title}>{title}</Text>
      <Text style={styles.subtitle}>{subtitle}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  card: {
    padding: 16,
    backgroundColor: '#fff',
    borderRadius: 12,
    shadowColor: '#000',
    shadowOpacity: 0.1,
    shadowRadius: 8,
    elevation: 3,  // Android shadow
  },
  title: { fontSize: 18, fontWeight: 'bold' },
  subtitle: { fontSize: 14, color: '#666', marginTop: 4 },
});

FlatList — สำหรับ List ขนาดใหญ่

FlatList render ทีละ item ที่อยู่ใน viewport ต่างจาก ScrollView ที่ render ทั้งหมดพร้อมกัน เหมาะกับ data จำนวนมาก:

import { FlatList } from 'react-native';

<FlatList
  data={todos}
  keyExtractor={(item) => item.id}
  renderItem={({ item }) => <TodoItem todo={item} />}
  ListEmptyComponent={<EmptyState />}
  refreshControl={
    <RefreshControl refreshing={isRefreshing} onRefresh={handleRefresh} />
  }
/>

Navigation — เชื่อมหลาย Screen

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Detail" component={DetailScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

TouchableOpacity และ Pressable — ปุ่มที่ responsive

import { Pressable, Text } from 'react-native';

<Pressable
  onPress={handlePress}
  style={({ pressed }) => [
    styles.button,
    pressed && styles.buttonPressed
  ]}
>
  <Text style={styles.buttonText}>กดที่นี่</Text>
</Pressable>

---

5. Native Module ที่ใช้บ่อยใน Expo

Camera — ถ่ายรูปและสแกน QR

npx expo install expo-camera expo-image-picker

import * as ImagePicker from 'expo-image-picker';

async function pickImage() {
  const result = await ImagePicker.launchImageLibraryAsync({
    mediaTypes: ImagePicker.MediaTypeOptions.Images,
    allowsEditing: true,
    aspect: [4, 3],
    quality: 0.8,
  });

  if (!result.canceled) {
    setImage(result.assets[0].uri);
  }
}

Location — GPS และ Map

npx expo install expo-location

import * as Location from 'expo-location';

async function getCurrentLocation() {
  const { status } = await Location.requestForegroundPermissionsAsync();
  if (status !== 'granted') return;

  const location = await Location.getCurrentPositionAsync({});
  setCoords({
    latitude: location.coords.latitude,
    longitude: location.coords.longitude,
  });
}

Push Notifications

npx expo install expo-notifications expo-device

Push Notifications ต้องการ EAS Project ID — Claude จะ generate setup code ให้ได้ แต่ต้องมี EAS account ก่อน (ดูหัวข้อถัดไป)

Vibe Coding Tip: ก่อน prompt Claude ให้สร้าง feature ที่ใช้ Native Module บอก module ที่ install ไปด้วย เช่น "ฉัน install expo-camera แล้ว ช่วยสร้าง screen ที่ถ่ายรูปและ upload ไป Supabase Storage" Claude จะ generate โค้ดที่ถูกต้องกว่ามาก

---

6. Build + Distribute ผ่าน EAS

EAS (Expo Application Services) คือ cloud build service ของ Expo ที่ทำให้คุณ build app โดยไม่ต้องมี Mac สำหรับ iOS หรือ Android Studio สำหรับ Android

ตั้งค่า EAS ครั้งแรก

Step 1: สมัครบัญชีที่ expo.dev (ฟรี tier มีให้ใช้)

Step 2: ติดตั้ง EAS CLI

npm install -g eas-cli
eas login

Step 3: ตั้งค่า EAS ในโปรเจค

eas build:configure

คำสั่งนี้จะสร้างไฟล์ eas.json ในโปรเจค ซึ่งมีหน้าตาประมาณนี้:

{
  "cli": {
    "version": ">= 12.0.0"
  },
  "build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal"
    },
    "preview": {
      "distribution": "internal"
    },
    "production": {}
  },
  "submit": {
    "production": {}
  }
}

Build สำหรับ Testing (Preview Build)

# iOS Preview (IPA ที่แชร์ให้ผู้ทดสอบได้)
eas build --platform ios --profile preview

# Android Preview (APK ที่ install ตรงบน Android ได้)
eas build --platform android --profile preview

# Build ทั้งคู่พร้อมกัน
eas build --platform all --profile preview

Build จะรันบน Expo cloud server ใช้เวลาประมาณ 5-15 นาที คุณจะได้ลิงก์ดาวน์โหลดเมื่อเสร็จ

Build สำหรับ Production

eas build --platform ios --profile production
eas build --platform android --profile production

---

7. Publish ไป App Store และ Play Store

Google Play Store (ง่ายกว่า เริ่มที่นี่ก่อน)

ต้องมี: Google Play Developer Account ($25 ครั้งเดียว)

Step 1: Build APK/AAB สำหรับ production

eas build --platform android --profile production

Step 2: Submit ผ่าน EAS Submit (อัตโนมัติ)

eas submit --platform android

หรือ upload ไฟล์ .aab ที่ได้จาก build เข้า Google Play Console ด้วยตนเอง

ขั้นตอนใน Play Console:

1. Create application → ตั้งชื่อ app
2. Store listing → ใส่ description, screenshots (อย่างน้อย 2 รูป), feature graphic
3. Content rating → ตอบ questionnaire
4. Pricing → เลือก Free หรือ Paid
5. Production track → Upload AAB → Review and publish

Apple App Store (ซับซ้อนกว่า แต่ทำได้)

ต้องมี: Apple Developer Program ($99/ปี) + Mac (สำหรับบางขั้นตอน)

Step 1: Build IPA

eas build --platform ios --profile production

Step 2: Submit ผ่าน EAS (แนะนำ)

eas submit --platform ios

EAS จะ upload ไปยัง App Store Connect โดยอัตโนมัติ คุณแค่ต้อง:

1. เข้า App Store Connect
2. ตั้งค่า app metadata, screenshots, pricing
3. Submit for Review

Review time: Apple ใช้เวลา 1-3 วันทำการในการ review app ใหม่

---

8. ข้อผิดพลาดและ Pitfall ที่มักเจอ

นี่คือ error ที่ Vibe Coder มือใหม่เจอบ่อยที่สุด:

1. "Unable to resolve module" หลัง Install Package

สาเหตุ: Metro bundler cache ไม่ update

วิธีแก้:

npx expo start --clear

2. ใช้ npm install แทน npx expo install

สาเหตุ: version ของ package ไม่ compatible กับ Expo SDK

วิธีแก้: ลบ node_modules แล้วติดตั้งใหม่

rm -rf node_modules
npx expo install   # ใช้อันนี้เสมอ

3. iOS Build ล้มเหลวเพราะ Signing Certificate

สาเหตุ: EAS ยังไม่มี Apple credentials

วิธีแก้:

eas credentials

แล้วเลือก "Let EAS handle the build credentials" — EAS จะ generate certificate ให้อัตโนมัติ

4. Android Emulator ช้ามากหรือไม่เปิด

สาเหตุ: ไม่ได้เปิด Hardware Acceleration (HAXM/Hyper-V)

วิธีแก้: ใช้ Physical Device + Expo Go แทน จะเร็วกว่ามาก

5. Claude Generate โค้ดที่ใช้ React Native Web API

สาเหตุ: Claude บางครั้งสับสนระหว่าง React Native กับ React web

วิธีแก้: ระบุให้ชัดในทุก prompt ว่า "นี่คือ Expo React Native ไม่ใช่ React web เบราว์เซอร์"

ตัวอย่าง prompt ที่ดีกว่า:

ใน Expo React Native (ไม่ใช่ React web)
ช่วยสร้าง component ที่...

6. Hot Reload ไม่ทำงาน

วิธีแก้ด่วน: Shake มือถือ → "Reload" หรือกด r ใน Terminal ที่รัน expo start

---

9. ขั้นตอนถัดไปหลังจากสร้าง App แรก

เมื่อ app แรกของคุณขึ้น App Store / Play Store แล้ว ขั้นตอนต่อไปที่ Vibe Coder มักทำ:

เพิ่ม Backend ด้วย Supabase: อ่าน Vibe Coding Supabase Database เพื่อเรียนรู้การเชื่อมต่อ app กับ database และ authentication

Deploy Web Version ควบคู่กัน: Expo รองรับ Expo Web ด้วย คุณสามารถ deploy version web ได้ที่ Vercel ดูได้ที่ Vibe Coding Deploy Vercel

เรียนรู้ Best Practices: อ่านเพิ่มเติมเรื่อง AI เรียน เชียงใหม่ 2026 สำหรับคนที่อยากเรียนแบบมีคนสอนและ community

---

สรุป: Vibe Coding Mobile ทำได้จริงภายใน 1 ชั่วโมง

Expo + Cursor + Claude คือ stack ที่เข้าใจกันดีที่สุดสำหรับ vibe coding mobile ในปี 2026:

• Expo จัดการ native complexity ให้คุณ
• Cursor ให้ AI เข้าถึง codebase ทั้งหมดพร้อมกัน
• Claude รู้จัก Expo API ดีมาก generate โค้ดถูกต้องสูง
• EAS ทำให้ build + publish ไม่ต้องมีความรู้ native

วิธีเริ่ม:

1. npx create-expo-app@latest MyApp --template blank-typescript
2. เปิดใน Cursor
3. Prompt Claude ให้ build feature ทีละอย่าง
4. Test บน Expo Go แบบ real-time
5. eas build เมื่อพร้อม submit

เริ่มต้นได้วันนี้เลยที่ /vibe-code-setup เพื่อดู setup guide ครบชุด หรือดู แพ็กเกจเรียน Vibe Coding ถ้าอยากมีคนสอนและ community คอยช่วย

---

เขียนโดย AI Unlocked Team — อัปเดตล่าสุด กรกฎาคม 2026