React Native Academy · บทเรียน

ปรับแต่ง ทดสอบ และเผยแพร่ไปยังทั้งสองสโตร์

เขียนการทดสอบหน่วยสำหรับฮุกหลัก เพิ่มโฟลว์ E2E ด้วย Maestro สำหรับเส้นทางสำคัญ ปรับขนาดชุดโปรแกรมให้เหมาะสม สร้างทรัพยากรสำหรับสโตร์ และส่งแอปไปยังทั้ง App Store และ Google Play

บทเรียน 4 จาก 413 ขั้นตอน

ปรับแต่ง ทดสอบ และเผยแพร่ไปยังทั้งสองสโตร์ เป็นบทเรียน React Native Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน React Native Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส React Native Academy มีบทเรียนทั้งหมด 4 บทเรียน

ช่วงสุดท้าย: ขัดเกลา ทดสอบ และเผยแพร่

ระยะสุดท้ายของโครงการแอปทุกโครงการเป็นช่วงที่ต้องใช้วินัยมากที่สุด ได้แก่ การขัดเกลา จุดบกพร่องเล็ก ๆ ที่ผู้ใช้สังเกตเห็นจริง การเขียนการทดสอบเพื่อค้นหาการถดถอยก่อนที่จะไปถึงระบบจริง และการดำเนินกระบวนการส่งแอปไปยังทั้งสองสโตร์ แต่ละงานดูเหมือนควรทำเสร็จได้อย่างรวดเร็ว ทว่าใช้เวลาไม่ต่างจากการพัฒนาฟีเจอร์ จึงควรจัดสรรเวลาให้เหมาะสม แอปที่ขัดเกลาอย่างดีและมีการทดสอบครอบคลุมจะเผยแพร่ได้อย่างมั่นใจ

ขัดเกลา UI: ระยะห่างและรูปแบบตัวอักษรที่สอดคล้องกัน

การขัดเกลาเริ่มจากโทเค็นการออกแบบ ซึ่งเป็นแหล่งข้อมูลกลางสำหรับระยะห่าง ขนาดตัวอักษร น้ำหนักตัวอักษร รัศมีขอบ และสี กำหนดค่าเหล่านี้ไว้ในไฟล์ theme.ts แล้วนำเข้าไปใช้ทุกที่ แทนการเขียน padding: 16 กระจายอยู่ตามหน้าจอต่าง ๆ ความสอดคล้องกันคือสิ่งที่ทำให้แอปดูมีคุณภาพสูง เมื่อปุ่มทุกปุ่มมีความสูงเท่ากัน หัวข้อทั้งหมดใช้แบบอักษรเดียวกัน และการ์ดทั้งหมดมีเงาแบบเดียวกัน UI ก็จะให้ความรู้สึกว่าได้รับการออกแบบมาอย่างตั้งใจ

// src/theme.ts
export const theme = {
  colors: {
    primary: '#007AFF',
    background: '#F2F2F7',
    surface: '#FFFFFF',
    text: '#000000',
    textSecondary: '#8E8E93',
    error: '#FF3B30',
    success: '#34C759',
  },
  spacing: {
    xs: 4, sm: 8, md: 16, lg: 24, xl: 32
  },
  typography: {
    largeTitle: { fontSize: 34, fontWeight: '700' },
    title: { fontSize: 22, fontWeight: '600' },
    body: { fontSize: 17, fontWeight: '400' },
    caption: { fontSize: 12, fontWeight: '400' },
  },
  borderRadius: { sm: 8, md: 12, lg: 16, full: 999 },
};

การตรวจสอบการเข้าถึง

การเข้าถึงเป็นทั้งข้อกำหนดทางกฎหมายและตัวชี้วัดคุณภาพ ตรวจสอบแอปของคุณในประเด็นต่อไปนี้: ป้ายกำกับที่เข้าถึงได้สำหรับปุ่มไอคอนทั้งหมด (accessibilityLabel), ขนาดพื้นที่สัมผัสขั้นต่ำ 44×44pt บน iOS และ 48×48dp บน Android, บทบาทด้านการเข้าถึงที่ถูกต้อง (accessibilityRole='button' สำหรับรายการที่แตะได้) และความเปรียบต่างของสีอย่างน้อย 4.5:1 สำหรับข้อความเนื้อหา ใช้ iOS Accessibility Inspector หรือ Android TalkBack เพื่อทดสอบการทำงานของโปรแกรมอ่านหน้าจอ

// Accessible icon button
<TouchableOpacity
  onPress={handleDelete}
  accessibilityLabel='Delete habit'
  accessibilityRole='button'
  accessibilityHint='Permanently removes this habit and its history'
  style={{ padding: 12 }}  // Ensures 44pt touch target with 20pt icon
>
  <Ionicons name='trash-outline' size={20} color='#FF3B30' />
</TouchableOpacity>

// Screen reader text for images
<Image
  source={{ uri: habit.icon }}
  accessibilityLabel={`${habit.name} habit icon`}
  accessible={true}
/>

การเขียนการทดสอบหน่วยสำหรับฮุกหลัก

ทดสอบหน่วยตรรกะทางธุรกิจที่ไม่ขึ้นกับ UI เช่น การคำนวณ ฮุกที่ใช้คำค้นหาจำลอง และฟังก์ชันอรรถประโยชน์ การคำนวณสตรีกเป็นตัวอย่างที่เหมาะสมมาก ควรทดสอบกรณีขอบ เช่น อาร์เรย์ว่าง วันที่มีเพียงวันเดียว มีวันที่ขาดหายตรงกลาง และยังไม่ได้ทำสำเร็จในวันนี้ ใช้ @testing-library/react-native ร่วมกับ renderHook เพื่อทดสอบฮุกแบบกำหนดเองที่ใช้สถานะและเอฟเฟกต์ของ React

// src/utils/__tests__/streaks.test.ts
import { calculateStreak } from '../streaks';

describe('calculateStreak', () => {
  it('returns 0 for empty completions', () => {
    expect(calculateStreak([])).toBe(0);
  });

  it('returns 1 when only today is completed', () => {
    const today = new Date().toISOString().split('T')[0];
    expect(calculateStreak([today])).toBe(1);
  });

  it('returns correct streak for consecutive days', () => {
    const dates = ['2026-06-21', '2026-06-20', '2026-06-19'];
    // Mock today as 2026-06-21 in tests
    expect(calculateStreak(dates)).toBe(3);
  });

  it('stops at a gap', () => {
    // Today=21, gap at 20, then 19
    const dates = ['2026-06-21', '2026-06-19'];
    expect(calculateStreak(dates)).toBe(1);
  });
});

การทดสอบคอมโพเนนต์ด้วย React Native Testing Library

เขียนการทดสอบคอมโพเนนต์สำหรับองค์ประกอบ UI ที่ใช้บ่อยที่สุด ได้แก่ HabitCard ที่แสดงชื่อกิจวัตรและสตรีก, CheckInButton ที่สลับสถานะเมื่อกด และ OfflineBanner ที่ปรากฏเฉพาะขณะออฟไลน์ จำลองการพึ่งพา เช่น Supabase และ React Query ที่ขอบเขตการทดสอบ เพื่อให้ทดสอบคอมโพเนนต์แยกจากส่วนอื่นได้โดยไม่ต้องเรียกเครือข่ายจริง

// src/components/__tests__/HabitCard.test.tsx
import { render, fireEvent } from '@testing-library/react-native';
import { HabitCard } from '../HabitCard';

const mockHabit = {
  id: '1', name: 'Morning Run', icon: 'run',
  color: '#007AFF', streak: 5
};

it('renders habit name and streak', () => {
  const { getByText } = render(<HabitCard habit={mockHabit} onPress={() => {}} />);
  expect(getByText('Morning Run')).toBeTruthy();
  expect(getByText('5 days')).toBeTruthy();
});

it('calls onPress when tapped', () => {
  const onPress = jest.fn();
  const { getByTestId } = render(
    <HabitCard habit={mockHabit} onPress={onPress} testID='habit-card' />
  );
  fireEvent.press(getByTestId('habit-card'));
  expect(onPress).toHaveBeenCalledTimes(1);
});

Maestro E2E: การทดสอบเส้นทางสำคัญ

เขียนโฟลว์ Maestro สำหรับเส้นทางการใช้งานสำคัญ: ลงชื่อเข้าใช้ สร้างกิจวัตร เช็กอิน ตรวจสอบว่าสตรีกอัปเดต และลงชื่อออก วิธีนี้ช่วยค้นหาข้อบกพร่องในการทำงานร่วมกันที่การทดสอบหน่วยอาจตรวจไม่พบ ทั้งสถานะการนำทาง การเรียกเครือข่าย และสถานะ UI ที่ทำงานร่วมกัน ให้รันทดสอบกับเครื่องจำลองหรืออุปกรณ์จริงในทุกบิลด์ของ CI ก่อนเลื่อนไปยังแทร็กการทดสอบถัดไป

# maestro/critical-path.yaml
---
appId: com.yourcompany.habittracker
---
- launchApp:
    clearState: true
- tapOn: 'Sign In'
- inputText: 'test@example.com'
- tapOn: 'Password'
- inputText: 'TestPass123!'
- tapOn: 'Sign In'
- waitForAnimationToEnd
- assertVisible: 'My Habits'
- tapOn: 'Add Habit'
- inputText: 'Morning Run'
- tapOn: 'Save'
- waitForAnimationToEnd
- assertVisible: 'Morning Run'
- tapOn:
    id: 'check-in-btn-1'
- waitForAnimationToEnd
- assertVisible: '1 day'  # Streak shows 1 day
- tapOn: 'Settings'
- tapOn: 'Sign Out'
- assertVisible: 'Sign In'

การเพิ่มประสิทธิภาพขนาดบันเดิล

ก่อนส่งแอป ให้วิเคราะห์และลดขนาดบันเดิล JS ใช้ react-native-bundle-visualizer เพื่อค้นหาการพึ่งพาที่มีขนาดใหญ่ วิธีลดขนาดที่พบบ่อย ได้แก่ เปลี่ยนจาก moment.js (280KB) เป็น date-fns (รองรับการตัดโค้ดที่ไม่ได้ใช้ เหลือประมาณ 5KB ต่อการนำเข้า), ลบชุดไอคอนที่ไม่ได้ใช้ โดยนำเข้าเฉพาะไอคอนที่ใช้งาน และใช้การโหลดแบบชะลอ (React.lazy + Suspense) สำหรับหน้าจอขนาดใหญ่ เช่น การตั้งค่าหรือการเริ่มต้นใช้งาน ซึ่งผู้ใช้มักไม่กลับมาเยี่ยมชมหลังเปิดแอปครั้งแรก

# Analyze bundle
npx react-native-bundle-visualizer

# Opens a visual treemap in browser showing:
# - node_modules breakdown by size
# - Your source code size
# - Duplicate modules

# Common large packages to replace:
# moment (280KB) -> date-fns tree-shaking
# lodash (full, 70KB) -> lodash-es specific imports
# FontAwesome all icons -> import only used icons

# Result: each 100KB reduction = ~50KB gzip reduction
# = faster first install + lower Play/App Store size

การสร้างทรัพยากรสำหรับสโตร์

สร้างทรัพยากรที่สโตร์กำหนดให้ครบก่อนส่งแอป ได้แก่ ไอคอนแอป (1024×1024 สำหรับ iOS, adaptive icon สำหรับ Android), หน้าจอเริ่มต้น (รูปแบบทุกขนาดผ่านการตั้งค่า splash ของ Expo), ภาพหน้าจอ (อย่างน้อย 3–6 ภาพต่อขนาดอุปกรณ์ที่กำหนด) และภาพโปรโมตฟีเจอร์ (1024×500 สำหรับ Android) ใช้เครื่องมือออกแบบอย่าง Figma ร่วมกับปลั๊กอินกรอบอุปกรณ์ เพื่อสร้างภาพหน้าจอที่ดูเป็นมืออาชีพโดยไม่ต้องมีนักออกแบบการตลาด

// app.json — icon and splash configuration
{
  'expo': {
    'icon': './assets/icon.png',        // 1024x1024 PNG
    'splash': {
      'image': './assets/splash.png',
      'resizeMode': 'contain',
      'backgroundColor': '#007AFF'
    },
    'ios': {
      'icon': './assets/icon.png'
    },
    'android': {
      'icon': './assets/icon.png',
      'adaptiveIcon': {
        'foregroundImage': './assets/adaptive-icon.png',
        'backgroundColor': '#007AFF'
      }
    }
  }
}

บิลด์สุดท้ายสำหรับระบบจริง

เริ่มสร้างบิลด์ EAS สำหรับระบบจริงของทั้งสองแพลตฟอร์ม ตรวจสอบหมายเลขเวอร์ชันและ version code ให้ถูกต้องก่อนสร้างบิลด์ เพราะหากเปลี่ยนหลังจากนั้นจะต้องสร้างบิลด์ใหม่ รันบิลด์ทั้งสองแบบขนานกันเพื่อประหยัดเวลา เมื่อเสร็จแล้ว ให้อัปโหลดไปยัง TestFlight และการทดสอบภายในของ Play Console เพื่อทดสอบการทำงานขั้นสุดท้ายบนไบนารีจริงของระบบ ก่อนส่งให้ตรวจสอบ

# Verify versions before building
cat app.json | grep '"version"'
# -> "version": "1.0.0"
# -> "versionCode": 1
# -> "buildNumber": "1"

# Build both platforms in parallel
eas build --platform ios --profile production &
eas build --platform android --profile production &
wait

# Or use the combined command:
eas build --platform all --profile production

# After builds complete, check status:
eas build:list --status finished --limit 2

ทดสอบบิลด์ระบบจริงแบบคัดกรองเบื้องต้น

ติดตั้งไบนารีจริงของระบบบนอุปกรณ์จริงก่อนส่งให้ตรวจสอบ ดาวน์โหลด .ipa ของ iOS ไปยัง TestFlight และ .aab ของ Android ไปยังการทดสอบภายในของ Play Console ทดสอบขั้นตอนการสมัครใช้งาน ฟีเจอร์หลัก การแจ้งเตือนแบบพุช และขั้นตอนการซื้อ หากเกี่ยวข้อง โดยเริ่มตั้งแต่ต้นจนจบ — อย่าคิดไปเองว่าพฤติกรรมของเวอร์ชันพัฒนาจะเหมือนกับบิลด์ระบบจริง บิลด์ระบบจริงใช้การลงนาม การย่อโค้ด และการตั้งค่า ProGuard ต่างจากสภาพแวดล้อมพัฒนา ซึ่งอาจเปิดเผยข้อบกพร่องที่ไม่พบระหว่างการพัฒนา

// Pre-submission smoke test checklist:

// Install production build on physical device
// (not simulator — push notifications require real device)

// Test:
// [ ] Fresh install and sign up flow
// [ ] Sign out and sign in with existing account
// [ ] Core feature: create, complete, view streak
// [ ] Push notification: schedule and receive
// [ ] Background behavior: close and reopen app
// [ ] Deep links from browser/email
// [ ] Offline: airplane mode then restore network
// [ ] Landscape orientation (if not locked)
// [ ] All tabs and major screens load without crash
// [ ] Performance: no jank on FlatList scroll

การส่งแอปไปยังทั้งสองสโตร์

ส่งแอปไปยังทั้งสองสโตร์พร้อมกัน เพื่อให้ระยะเวลาการตรวจสอบสอดคล้องกันและสามารถเปิดตัวทั้งสองแพลตฟอร์มได้ในวันเดียวกัน ใช้ eas submit สำหรับทั้งสองสโตร์ โดยทั่วไปการตรวจสอบของ App Store ใช้เวลา 1–3 วัน ส่วน Google Play ใช้เวลา 1–7 วันสำหรับแอปแรก และมักเร็วกว่าเมื่อเป็นการอัปเดต เตรียมทรัพยากรการตลาดให้พร้อม เช่น เว็บไซต์แอป โพสต์โซเชียล และชุดข้อมูลสำหรับสื่อ เพื่อประกาศเปิดตัวได้ทันทีที่ทั้งสองสโตร์อนุมัติ ตรวจสอบแดชบอร์ดการตรวจสอบของทั้งสองสโตร์ทุกวันในช่วงการตรวจสอบ

# Submit to App Store (TestFlight first, then App Review)
eas submit --platform ios --latest

# Submit to Play Console (internal -> production)
eas submit --platform android --latest

# Or submit both at once:
eas submit --platform all --latest

# After submission:
# iOS: App Store Connect > App > 1.0 Prepare for Submission
#      > Add for Review > Submit to App Review
# Android: Play Console > Production > Create release
#           > Promote internal build > Review > Start rollout

ตรวจสอบความเข้าใจอย่างรวดเร็ว

ทดสอบความเข้าใจแนวคิดการพัฒนาแอปมือถือด้วย React Native จากบทเรียนนี้

ทบทวนบทเรียน

ในบทเรียนนี้ คุณได้เรียนรู้วิธีตรวจสอบและขัดเกลาแอปด้วยโทเค็นการออกแบบ ป้ายกำกับการเข้าถึง และพื้นที่สัมผัสขั้นต่ำ วิธีเขียนการทดสอบหน่วยสำหรับตรรกะสตรีก และการทดสอบคอมโพเนนต์ด้วย RNTL และ วิธีเขียนโฟลว์ Maestro E2E สำหรับเส้นทางการใช้งานสำคัญ รวมถึงส่งแอปไปยัง App Store และ Play Store ขอแสดงความยินดี — คุณเรียนจบเส้นทางการพัฒนาแอปมือถือด้วย React Native แล้ว ตอนนี้คุณมีทักษะในการสร้าง ทดสอบ และเผยแพร่แอป React Native คุณภาพระดับระบบจริงไปยังทั้งสองแพลตฟอร์ม

เริ่มต้นได้ฟรี

เรียนรู้ JavaScript ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส
30
บทเรียน
120

คำถามที่พบบ่อย

บทเรียน “ปรับแต่ง ทดสอบ และเผยแพร่ไปยังทั้งสองสโตร์” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “ปรับแต่ง ทดสอบ และเผยแพร่ไปยังทั้งสองสโตร์” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส React Native Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส React Native Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “ปรับแต่ง ทดสอบ และเผยแพร่ไปยังทั้งสองสโตร์”

เขียนการทดสอบหน่วยสำหรับฮุกหลัก เพิ่มโฟลว์ E2E ด้วย Maestro สำหรับเส้นทางสำคัญ ปรับขนาดชุดโปรแกรมให้เหมาะสม สร้างทรัพยากรสำหรับสโตร์ และส่งแอปไปยังทั้ง App Store และ Google Play คุณปฏิบัติ React Native Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน React Native Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน React Native Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน

บทเรียน “ปรับแต่ง ทดสอบ และเผยแพร่ไปยังทั้งสองสโตร์” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน React Native Academy นี้ได้ไหม

ได้ บทเรียน React Native Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. การวางแผนสถาปัตยกรรมและชุดเทคโนโลยี
  2. ขั้นตอนการยืนยันตัวตนและเส้นทางที่มีการป้องกัน
  3. ฟีเจอร์หลัก: ฟีดข้อมูลพร้อมการรองรับการใช้งานออฟไลน์
  4. ปรับแต่ง ทดสอบ และเผยแพร่ไปยังทั้งสองสโตร์
← กลับไปที่ React Native Academy