ไม่มีอะไรดีกว่าการสร้างแอปด้วย JavaScript เว้นแต่คุณสร้าง Mobile Apps JavaScript ใช้สร้าง Web Apps การนำมาสร้าง Native Mobile Apps เดิมทีเป็นไปไม่ได้ Web Developers ต้องเรียน Java, Objective-C หรือภาษาอื่นๆ
จนกระทั่ง Facebook ปล่อย React Native ทำลายกำแพงนี้ React Native มีข้อดีมากมาย เช่น สร้าง Cross-platform Apps สำหรับ Android และ iOS เดิมต้องเขียนโค้ด 2 รอบ แยก Platform ตอนนี้ไม่ต้องแล้ว
บทความนี้เป็นการแนะนำ React Native พร้อมเริ่มต้นกันเลย! 🚀
ทำไมต้อง React Native?
React Native ให้โซลูชันที่เทคโนโลยีอื่นไม่มี ดังนี้:
สร้าง Native Mobile Apps จริง
React Native ให้เขียน Native Apps ด้วย JavaScript สำหรับ iOS และ Android ใช้ Native Components ทั้งหมด: Gestures, Push Notifications, Camera, Location ไลบรารี JS อื่นๆ เช่น Ionic หรือ PhoneGap ใช้ WebView แอปที่สร้างไม่ใช่ Native จริง
สร้าง Cross-platform Apps (iOS และ Android)
React Native สร้างแอปรันบน iOS และ Android ได้ เดิมต้องสร้าง 2 ครั้ง โค้ดต่างกัน: iOS 用 Swift/Objective-C, Android 用 Java/Kotlin React Native แก้ปัญหานี้ เขียนครั้งเดียว รันได้ 2 Platform ว้าว! 🎉
เขียนโค้ดทั้งหมดด้วย JavaScript และ React
ขณะสร้าง React Native Apps คุณเขียน JavaScript จริงๆ ReactJS ช่วยสร้าง UI และ UX Components ได้ยอดเยี่ยม
เริ่มต้นกับ React Native
เริ่มต้น React Native น่าตื่นเต้น แต่ก็อาจสับสน ขั้นแรกคือติดตั้ง มีหลายวิธี:
ใช้ expo-cli:
expo-cli เป็น Command Line Tool ดาวน์โหลดและติดตั้ง React Native Boilerplate ให้ พร้อม Expo API (ดูคู่มือติดตั้ง ที่นี่) วิธีง่าย สำหรับมือใหม่แนะนำ
expo-cli ให้รันและทดสอบบนอุปกรณ์จริงโดยไม่ต้อง Config แสกน QR Code แอปจะเปิดใน Expo Mobile App สำรวจแอปอื่นๆ บน Browser ผ่าน Web Interface ชื่อ Appertize
ใช้ react-native-cli
react-native-cli ทำงานคล้าย expo-cli แต่แนวทางต่างออกไป มีข้อดีเพิ่มเติม แอปที่ติดตั้งด้วย react-native-cli สร้าง Native Modules เองได้ ไม่ต้อง Eject เพื่อเขียน Native Modules (Eject ทำให้เขียน Native Modules ได้ จะเจาะลึกในภาคต่อไป)
การพัฒนาบน Platform ต่างๆ มีกระบวนการต่างกัน บางครั้งต้อง Config เฉพาะ Platform เช่น Android ต้องใช้ Android SDK มาดูรายละเอียดกัน!
สร้าง Mobile Apps สำหรับ Android
ข้อกำหนดสำหรับพัฒนา Android: ดาวน์โหลดและตั้งค่า Android SDK และ Android Studio (ดาวน์โหลด ที่นี่)
หลังติดตั้ง Android Studio ต้องติดตั้ง APIs เพิ่ม เปิด Android Studio → Settings จะเห็นหน้าต่างนี้:
ติ๊ก ✔️ Platform ที่ต้องการใน SDK Platforms (เช่น Android 6.0 Marshmallow) แล้วไปที่ SDK Tools
ติ๊ก Android SDK Build-Tools, Android SDK tools, google play service ใน Build-Tools เลือก Platforms:
- 19.0.0 ถึง 20.0.0
- 22.0.0 ถึง 24.0.0
- 25.0.2, 26.0.1 ถึง 26.0.3
- 27.0.3 และ 28.0.1 ถึง 28.02
เสร็จ SDK และ Android Studio ขั้นต่อไปคือ Emulator มีหลายตัวเลือก:
- Android Studio Emulators (ดูวิธีสร้าง ที่นี่) - ผมไม่เคยใช้ ชอบ Genymotion หรือ Real Device มากกว่า
Genymotion
Genymotion เป็น Desktop App ให้ Virtual Emulator ทดสอบแอป เร็วมาก ⚡ สร้างโทรศัพท์จำลองปรับแต่งได้: เปิด WiFi, Location, Camera แนะนำให้ใช้ Genymotion แทน Android Studio Emulators
ใช้ Real Devices
ไม่มีอะไรดีกว่าอุปกรณ์จริง ทดสอบได้ว่าบนอุปกรณ์จริง UI เป็นอย่างไร รู้สึกความจริงของงานที่ Virtual Device ให้ไม่ได้ ถ้ามีอุปกรณ์ อย่าลังเลใช้
จนตอนนี้ Android OK แล้ว - iOS ยังไง?
สร้าง React Native Apps สำหรับ iOS
รัน React Native บน iOS ไม่ต่าง Android มาก แอปเดียวกันรันได้ทั้ง 2 Platform (มีข้อยกเว้น)
ถ้ารันบน iOS Device ต้องมี macOS เรื่อง macOS/iOS ไม่ต้องดาวน์โหลด SDK เพิ่มเหมือน Android
Emulators: Xcode มี Emulators สวยงามทดสอบได้ (ดูเทคนิค ที่นี่)
บน macOS รัน iOS และ Android ได้ ติดตั้ง Android Studio และ Genymotion บน Mac ได้ บน PC รัน Android Emulator ได้อย่างเดียว ไม่มี iOS Emulator ถ้ามี Mac ถือว่โชคดี 🍀
ตอนนี้มี Environment พร้อม ติดตั้งครบแล้ว โค้ด React Native เขียนยังไง? ง่ายมาก: เขียน ReactJS Code จริงๆ
ดูคู่มือทางการ ที่นี่ แนะนำบทความเก่ง "React Native YouTube Replica" สอนสร้างแอปแรกทีละขั้นตอน
เยี่ยม! จนตอนนี้โค้ด React Native ได้แล้ว 😎 แต่ต้อง Debug Errors และดู Logs ต้องมี Debugger!
Debugging React Native
Debug สำคัญไม่แค่ React Native ทุกภาษา ต้องรู้ว่าโค้ดทำอะไรอยู่ มีหลายวิธี Debug React Native:
Debug ด้วย Chrome DevTools
React Native ให้ใช้ Chrome DevTools ดู Logs บน Emulator กด Ctrl+M จะโผล่เมนู:
เลือก Debug Js Remotely จะเปิด Tab Chrome ที่ https://localhost:8081/debugger-ui/ นั่นคือ Chrome DevTools แล้ว ตัวเลือกอื่นมีอะไรบ้าง?
ใช้ React Native Debugger
React-native-debugger เครื่องมือ Debug ยอดเยี่ยม Desktop App พร้อม Redux DevTools และ React DevTools Integration Debug Style ได้ จริงๆ แล้วมันคือ Debugger ที่ดีที่สุดสำหรับ React Native และเป็นตัวที่ผมใช้ มีบน macOS, Windows, Linux ดูคู่มือติดตั้ง ที่นี่
พอเพียงสำหรับภาคแรก นี่คือ Absolute Guide สร้าง Mobile Apps ด้วย React Native ภาคหน้าจะเจาะลึก Technical Tips: Native Components, React Native API, Integration Libraries, Redux, GraphQL ฯลฯ สมัครรับอีเมลเพื่อรับอัปเดตภาคต่อไป ขอบคุณสำหรับเวลา 🙏
ติดตามผมได้ที่ Twitter 🐦
