Mobile App — Build + Publish

Expo / React Native — iOS + Android จาก codebase เดียว

รัน Dev

cd ecommerce-mobile
npm install
npx expo start

• กด i → iOS Simulator
• กด a → Android Emulator
• scan QR ด้วยแอป Expo Go บนมือถือจริง

ตั้ง API URL

ecommerce-mobile/.env:

EXPO_PUBLIC_API_BASE=https://api.yourshop.com/api/v1
EXPO_PUBLIC_APP_NAME=YourShop

⚠ Dev — ใช้ LAN IP ของเครื่อง dev (ไม่ใช่ localhost):

ipconfig getifaddr en0  # Mac
hostname -I              # Linux
ipconfig                 # Win → IPv4

ผลลัพธ์ตัวอย่าง: 192.168.1.100 → ใส่ใน .env:

EXPO_PUBLIC_API_BASE=http://192.168.1.100:3000/api/v1

ใส่ branding

App icon + splash

แทนที่ไฟล์ใน ecommerce-mobile/assets/:

• icon.png (1024×1024) — app icon
• adaptive-icon.png (1024×1024) — Android
• splash.png (2048×2048) — splash screen
• favicon.png — web

แก้ app.json:

{
  "expo": {
    "name": "YourShop",
    "slug": "yourshop",
    "scheme": "yourshop",
    "ios": {
      "bundleIdentifier": "com.yourcompany.yourshop"
    },
    "android": {
      "package": "com.yourcompany.yourshop"
    }
  }
}

Build production

สมัคร Expo (ฟรี)

npm install -g eas-cli
eas login

Build Android

eas build --platform android --profile production

รอ ~15-20 นาที → ดาวน์โหลดไฟล์ .aab จาก expo.dev

Build iOS

ต้องมี Apple Developer Account ($99/ปี)

eas build --platform ios --profile production

ระบบจะถามเรื่อง certificate — ให้ EAS จัดการ (auto generate)

ผลลัพธ์: .ipa

Build ทั้งคู่

eas build --platform all --profile production

Publish

Google Play Store

1. สมัคร Google Play Console ($25 ครั้งเดียว)
2. สร้าง app listing:
   • ชื่อ + คำอธิบาย
   • screenshots (mobile + tablet)
   • feature graphic (1024×500)
   • app icon
3. อัปโหลด .aab
4. ส่ง review (1-3 วัน)

Apple App Store

1. สมัคร Apple Developer Program ($99/ปี)
2. สร้าง app ใน App Store Connect:
   • ชื่อ + bundle ID + category
   • screenshots (iPhone + iPad)
   • app icon
   • app description
3. อัปโหลด .ipa ผ่าน Transporter หรือ EAS submit
4. ส่ง review (1-3 วัน — Apple เข้มกว่า)

eas submit --platform ios
eas submit --platform android

OTA Update (อัปเดตเร็ว ไม่ต้อง resubmit)

eas update --branch production --message "Fix bug X"

ลูกค้าได้ update ตอนเปิดแอปครั้งต่อไป — ใช้ได้แค่ JS/TS (ไม่ใช่ native code/permissions)

Push Notification

ใช้ Expo Push Service (ฟรี):

Setup

1. ใน ecommerce-mobile/app.json:

"plugins": ["expo-notifications"]

2. ขอ permission ใน app:

import * as Notifications from 'expo-notifications'
const { status } = await Notifications.requestPermissionsAsync()
const token = await Notifications.getExpoPushTokenAsync()
// ส่ง token ไปเก็บใน DB

3. ส่งจาก api:

import { Expo } from 'expo-server-sdk'
const expo = new Expo()
await expo.sendPushNotificationsAsync([{
  to: pushToken,
  title: 'คำสั่งซื้อ #1234',
  body: 'จัดส่งแล้ว — รอรับสินค้าได้เลย',
}])

Notification เมื่อไหร่

• ออเดอร์เปลี่ยนสถานะ
• สลิปถูกตรวจ (verify / reject)
• สินค้าใหม่ของหมวดที่ลูกค้าชอบ
• โปรโมชันพิเศษ
• cart abandoned 24 ชม

ปัญหาที่เจอ

“Network request failed” ตอนเปิดแอป

→ API URL ใช้ localhost แทนที่จะเป็น LAN IP

Expo Go ใช้ไม่ได้

→ อัปเดต Expo Go ใน App Store / Play Store

Build error เรื่อง bundleIdentifier

→ ใน app.json ต้องระบุ ios.bundleIdentifier + android.package ที่ unique (ห้ามซ้ำกับแอปอื่น)

iOS build ติด Provisioning Profile

→ ตั้งให้ EAS จัดการ auto:

eas credentials
# เลือก "Set up build credentials"

ขั้นต่อไป

• ปรับ theme + content → 07 — Customization
• Deploy → 08 — Deployment