เริ่ม React Native ด้วย Expo.io ทำไมมันดีจัง ทำไมมันดีกว่าชาวบ้านเค้า


สวัสดีครับผมแมกซ์นะครับ อีกครั้ง !วันนี้จะมาคุยเรื่อง Expo.io ซึ่งขอเรียกง่ายๆ ว่าเป็นชุดเครื่องมือช่วยเรา สำหรับการเริ่มพัฒนาโปรเจค React-Native แบบครบเครื่องไม่ต้อง Config มี UI ให้คลิกๆบู้ม ได้แอพ iOS , Android

เริ่ม ไปกันอย่างไวๆ Expo.io มี XDE ชื่ออย่างหรูคือ The Expo Development Environment คอนเซปจะคล้าย create-react-native-app ที่เป็น CLI ไว้ใช้ในการสร้างโปรเจคเปล่าๆขึ้นมา โดยที่เราไม่ต้องไปตั้งค่า package.json .babelrc อะไรทั้งหลาย ที่เราต้องเตรียมก่อนการเดินทาง…


XDE ให้อะไรเรา ? มันให้เราได้สมกับชื่อ Development Environment จริงๆ อย่างแรกเรา Sign in เข้ามา ก็เริ่มสร้างโปรเจคได้เลย New Project เรียบร้อย มีให้เลือกโปรเจคเปล่าๆ หรือ แบบมี Navigate Bar ให้แล้ว สะดวกมาก


Dev ไปดูผลลัพธ์ไป ขณะนี้เราอยู่ใน Development mode เราสามารถ Share เป็น QRCode หรือนำ Link ไปเข้าผ่านโทรศัพท์มือถือของเรา โดย Expo.io จะให้ติดตั้ง App Expo เพื่อเปิด App ที่เรากำลัง Dev (งงไหม ???) อธิบายง่ายๆคือ App Expo บน GooglePlay , AppStore เป็น Expo Store ที่ให้แอพเราขึ้นไปอยู่และทดลองใช้ผ่านขณะ Dev

จะอธิบายให้ถูกหลักจริงๆคือ Expo เปิด Tunnel ที่เครื่องของเราติดต่อกับเซิฟเวอร์ และ Device ที่เข้า App เรา ขณะนั้นจะสามารถส่งข้อมูลไป-กลับ ระหว่างเครื่องและ Device ได้ Log ก็ออกให้เห็นๆ โอ้ววว…

และความดีงามคือ Realtime มันทำ Hot Reloading ได้ แค่เขย่าอุปกรณ์หน้านี้จะปรากฎ ก็เปิดมันซะ แก้โค้ดปุ๊บ ออกหน้าจอปั๊ป ได้ Feedback ที่เห็นได้เลยในขณะนั้นแถม Debug ได้อีก หรือถ้าใครมี Android Emulator , iOS Simulator ลงไว้ในเครื่อง ก็กดที่ Device สั่งรันไปยังเครื่องได้เลย


ไม่มี iPhone ไม่มีเครื่อง Mac T^T อุตส่าเขียน App เป็น React Native Cross-Platform อยากเห็นหน้าตาฝั่ง iOS จะไปบอกเพื่อนให้เปิดแอพแล้วแคปหน้าจอมาก็เกรงใจ คงต้องให้แคปหลายๆรอบ เพราะแก้ Style ไปอยากเห็น Realtime ลอง https://snack.expo.io ตัวนี่เลย ผมใช้ท่าโกงนิดๆ ปกติ Snack เป็นเว็บ IDE ที่ให้เราสามารถพัฒนา App บนเว็บและลองใช้ได้เลยในขณะนั้น ตัวเว็บประกอบด้วย Component ที่สามารถลากมาวาง แทบไม่ต้อง Code สักบรรทัด มีมากมายให้เลือกได้ใช้ประโยชน์จริง ยกตัวอย่าง MapView , Facebook Login , BarCodeScanner และอื่นๆ เข้าไปดูใน Doc ของ Expo.io ก็จะเจอ Componant เพียบเลย

ท่าโกงยังไง ? Snack จะรันแอพใน Project บนเว็บแต่ผมอยากให้มันรันแอพจาก XDE บนเครื่องผม ผมเลยกดปุ่ม Home บน iOS Simulator บนเว็บ แล้วแอบปิดแอพที่รันอยู่ทิ้ง แล้วเอา Link จากเครื่องผมไปใส่แทน อิอิ ได้แล้ว App ที่ผมกำลังพัฒนาบน iPhone แต่จริงๆแล้วเวอร์ชั่นหลังๆนี้ คุณแทบจะ Dev บนเว็บได้เลย เรียกได้ว่า ที่ไหนเมื่อไหร่ก็ได้ เอาแท็ปเลต Dev ยังได้ เพราะ Editor ก็อยู่บนเว็บแล้ว และฉลาดเอาเรื่อง มี ESlint , Auto Format แถม Emu Android iOS ออนไลน์


พัฒนาเสร็จแล้ว Publish ขึ้นไปบน Expo Store ไว้ Test ไว้ดูหน้าตากันก่อน ลงตัวหรือยัง ก่อน Build ขึ้น Store จริงของแต่ละเจ้า


จบแล้วจร้า… สำหรับบทความนี้อาจจะไม่ละเอียด แบบเริ่มต้นอย่างไรโน้นนี่นั่นเพราะมาโม้ล้วนๆ ถูกบ้างมั่วบ้าง จากประสบการณ์ว่ามันดีอย่างไรทำอะไรได้บ้าง ถ้าใครสนใจขึ้นมาแล้ว ก็แวะไปหาข้อมูลเพิ่มเติมได้ที่ https://docs.expo.io/latest อ่านง่าย โง่ๆอังกฤษแบบผมยังคลำๆไปได้ มีตัวอย่างโค้ดด้วยไม่หลงทางแน่นอน 
จริงแล้วได้รู้จัก Expo.io จาก (Phatthana Batt Tongon) ตอนหนึ่งใน GuCode Live ตอนที่มาขายของ ผมแวะมาลองติดใจเลย ขอบคุณที่แชร์ครับ ผมแชร์ต่อ ขอบคุณทุกคนครับที่แวะมา เจอกันใหม่ ^^