ปรับแต่ง ทดสอบ และเผยแพร่ไปยังทั้งสองสโตร์
เขียนการทดสอบหน่วยสำหรับฮุกหลัก เพิ่มโฟลว์ E2E ด้วย Maestro สำหรับเส้นทางสำคัญ ปรับขนาดชุดโปรแกรมให้เหมาะสม สร้างทรัพยากรสำหรับสโตร์ และส่งแอปไปยังทั้ง App Store และ Google Play
ปรับแต่ง ทดสอบ และเผยแพร่ไปยังทั้งสองสโตร์ เป็นบทเรียน 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 ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การวางแผนสถาปัตยกรรมและชุดเทคโนโลยี
- ขั้นตอนการยืนยันตัวตนและเส้นทางที่มีการป้องกัน
- ฟีเจอร์หลัก: ฟีดข้อมูลพร้อมการรองรับการใช้งานออฟไลน์
- ปรับแต่ง ทดสอบ และเผยแพร่ไปยังทั้งสองสโตร์