มาทำ React Native App แบบง่ายๆด้วย Expo กันเถอะ

ปัจจุบันการพัฒนา mobile application นี่ก้าวไปไกลมากเลยนะครับ จากแต่เดิมที่ hybrid mobile application มีประสิทธิภาพด้อยกว่าการพัฒนาด้วย app มากกก แต่ปัจจุบันเรามีทั้ง React Native, Flutter และตัวอื่นๆ อีกมากมาย ประสิทธิภาพก็ดีขึ้นเยอะ ใช้งานอุปกรณ์ต่างๆ ของมือถือเช่นกล้องหรือเซนเซอร์ได้เกือบจะสมบูรณ์เลยละครับ

ถ้าสมมติคุณเคยเขียน Reactjs มาก่อน คุณน่าจะพอได้ยินสิ่งที่เรียกว่า create-react-app กันบ้างนะครับ คือเอาจริงๆ มันไม่ค่อย friendly สำหรับมือใหม่เท่าไหร่เพราะมันเปน library ที่ต้องมาลง dependencies ต่างๆ เยอะ และต้อง configure webpack เป็นด้วยถึงจะใช้งานได้ดี พอตา Dan ออก create-react-app มาโดยจุดประสงค์คือ ให้คนเริ่ม dev ได้ไวที่สุดโดยไม่ต้องกังวลกับ setting (React) Native ต่างๆมากนักในช่วงแรก

ซึ่งจากประสบการณ์ของตัวผมเอง กลายเป็นว่าการแนะนำให้คนอื่นใช้ create-react-app นั้นทำให้คนที่สนใจมา focus ในเรื่องการเขียน code react จริงๆ และผมว่ามันน่าสนใจได้ง่ายกว่าให้ไป setting project เองตั้งแต่ต้น
ที่นี้กลับมาที่เรื่องของเราก่อนเนอะ แล้วทางด้าน React Native มีอะไรคล้ายๆแบบนี้มั้ย? ตอบเลยว่ามีครับ เรียกว่า create-react-native-app ซึ่งทำให้การพัฒนาของคุณง่ายขึ้นกว่าเดิมมากก
แต่เอาจริงๆแล้ว create-react-native-app ก็พัฒนามาจาก expo นี่ละครับ จนในที่สุด create-react-native-app ก็หยุดพัฒนาเมื่อ expo-cli ทำได้ทุกอย่างและพร้อมที่จะเป็น core ในการพัฒนาโดยไม่ต้องถูกครอบด้วย create-react-native-app อีกแล้ว นั่นละครับ

แล้ว Expo คืออะไร?

Expo SDK คือชื่อเรียกของชุดlibraries ที่ทำให้ javascript support native functionality ได้ พูดง่ายๆคือมันทำให้เราสามารถเรียกใช้งาน กล้อง รายชื่อผู้ติดต่อ การแจ้งเตือน หรือที่เก็บข้อมูลภายในเครื่องได้โดยไม่ต้องลง android SDK เลยล่ะครับ (ที่มันทำได้เพราะเดี๋ยวเราจะให้ expo build แทนให้ครับ 55) โดยถ้าในการพัฒนา
ต่างกับการใช้ React Native ปกติยังไง?
จุดที่ง่ายที่สุดคือเราไม่ต้องลง Android Studio หรือ Xcode เลยครับ เนื่องจากระบบของ Expo จะ build binary มาให้เราได้เลยทั้ง 2 OS
และอีกจุดนึงที่เด่นมากๆคือการที่เราสามารถนำแอพของเราไป test บนเครื่องอื่นได้ง่ายๆทั้งโดยการให้เครื่องนั้นๆลงแอพ Expo และ scan QR เพื่อใช้งาน โดยวิธีนี้เนี่ยสามารถใช้งานได้ 3 mode คือ Local,LAN และ Tunnel ครับ
และที่สำคัญคือ Expo ยังมี https://snack.expo.io/ ให้ลองเล่นดู คล้ายๆ Codepen หรือ JSFiddle นั่นละครับ โดยโค้ดที่เราเล่นใน snack นี้จะ สามารถรันผ่านการ scan QR ด้วย Expo app ได้เลยครับ

Build

แล้วการให้ Expo build ให้เรานี่ต้องทำยังไง
ไม่ยากครับ แค่เมื่อเราต้องการจะ build เป็น binary เราก็แค่สั่งว่า

expo build:android

หรือ

expo build:ios

Channel

การใช้งาน Expo เนี่ยมันจะมีสิ่งนึงที่สะดวกมากๆนั่นก็คืออ channel นั่นเองครับ
Channel คืออะไร มันคือการกำหนด release channel ของการ build นั้นๆ เช่น staging หรือ production นั่นเองครับ ยกตัวอย่างง่ายๆถ้าจะ build iOS app ใน channel staging ก็แค่ใช้ command ดังนี้
expo build:ios –release-channel production
เท่านี้ก็เรียบร้อยครับ ง่ายมั้ยล่ะ จุดที่ทำให้ channel มันใช้งานได้ดีนั่นคือ มันสามารถกำหนด channel ได้ทั้งการ build และ publish เลยครับ
เรามาลองกัน ด้านบนเราลอง build iOS app ใน channel staging ไปแล้ว พอไปใช้จริงปรากฏว่ามีปัญหานิดหน่อย พอแก้เสร็จถ้าปกติคือเราก็ต้องลงแอพใหม่ให้เครื่องที่ใช้ทดสอบทั้งหมดใช่มั้ยครับ? expo มีทางออกง่ายว่านั้นให้ลองเล่นดู นั่นคือ OTA นั่นเอง

OTA

Feature OTA นั้นมันดีขนาดนั้นเชียวเร้อ แล้วมันคืออะไรกันละเนี่ย? พูดง่ายๆมันคือการ update app อัตโนมัติเมื่อเปิดแอพขึ้นมา โดยไม่ต้อง update binary นั่นเองครับ

ขุ่นพระ!

เราสามารถ publish app เราเพื่อให้ไปทำ OTA บน binary ที่เรา build มาด้านบนได้เลยด้วย command ดังนี้

expo publish --release-channel staging

เท่านี้เองครับ..เมื่อเปิด app ขึ้นมาให้ app ที่ build ด้วย channel staging จะถูก update อัตโนมัติครับ ง่ายสุดๆปลัดบอก 🙂

มาพูดถึงข้อดีของ OTA กันครับ
แน่นอนครับ สะดวกสบายสุด คล่องตัว ไม่ต้องรอ review
แต่ถ้าเอาจริงๆแล้ว มันก็มีข้อเสียอยู่นะ
นั่นคือการใช้งานจริงนั้นอาจจะเปิด app นานขึ้นนิดนึงนะครับ ux อาจจะเสียนิดหน่อย แต่เราสามารถเลือกให้มัน manual update ด้วยโค้ดได้ตามนี้ครับ

try {
const update = await Expo.Updates.checkForUpdateAsync();
if (update.isAvailable) {
await Expo.Updates.fetchUpdateAsync();
// ... notify user of update ...
Expo.Updates.reloadFromCache();
}
} catch (e) {
// handle or log error
}

Library

expo เองนั้นมี Library ดีๆ ให้ใช้เยอะครับ มีพวก library ที่ช่วยจัดการพวก native module ทั้งหลายเช่น กล้องหรือเซ็นเซอร์ต่างๆ ได้ด้วย อย่างที่บอกครับ ถ้ามันไม่ยากหรือเฉพาะทางจริงๆ expo นี่พร้อมชนเสมอเลยจ้า
ฮั่นแน่ ชอบใช้ lib ก็ไม่ชอบ Developer Experience ดีมากครับ เมื่อไฟล์มีการเปลี่ยนแปลงเช่นการ save แล้ว แอพทุกตัวที่เปิดด้วย expo app จะถูก render ใหม่พร้อมๆกัน ทำให้เห็นข้อแตกต่างและแก้ไขง่ายมากๆครับ
Documentation และ Stackoverflow (ฮ่า)
อนิจจา ข้อมูลในโลกอินเตอร์เน็ตเกี่ยวกับ expo ตรงๆ ช่างน้อยเหลือเกินพี่เอ๋ย…นี้ว่าน้อยละ Expo นี่หนักกว่าเยอะครับ แต่โชคดีที่ตัว doc ของ expo เองค่อนข้างอธิบายได้ดีและเข้าใจง่ายเลยไม่ค่อยมีปํญหาที่หาทางแก้ไม่เจอ (มันก็มีแหละคุณ แต่ผมจำไม่ได้ แหะๆ)

แล้วจะตัดสินยังไงว่าควรใช้หรือไม่ควรใช้?

ก่อนอื่นต้องบอกว่า แน่นอนครับ expo นั้นทำอะไรได้ไม่ลึกอยู่แล้ว เช่นเดียวกับ React Native เองก็ไม่สามารถทำได้เท่าที่ Native จริงๆจะทำได้เช่นกัน
และแน่นอน การเพิ่ม layer อีกชั้นนึงย่อมตามมาด้วยความลำบากในการจัดการ dependencies โดยเราจะใช้ version ไหนได้ก็จะขึ้นอยู่กับว่า expo-cli ที่เราใช้อยู่นั้นรันอยู่ใน React Native version ไหน และถ้า app ที่เรากำลังจะสร้างดั้นนนต้องการใช้อะไรที่ expo ไม่มีนี่งานเข้าเลยนะครับ ถ้าไม่ได้จริงๆ อาจจะต้อง eject expo ออกและใช้พัฒนาต่อเลยครับ
ถ้าแอพของคุณไม่ได้ซับซ้อน และอยากลองของใหม่ๆ ลองได้เลยครับ ผมบอกได้เลยว่ามันใช้งานได้แน่นอน (ถ้าถึงจุดนึงแล้วประสิทธิภาพมันไม่ดีพอก็ eject ยังได้) สะดวกและไม่มีอะไรต้องเรียนรู้มากมายครับ

สุดท้ายนี้ตาม pattern การเขียนบทความมันก็ต้องมีอะไรแปะท้ายซักหน่อยไม่ให้มันห้วนไปละเนอะ ก็ขอสรุปเอาเองเลยละกันครับว่า expo ค่อนข้างช่วยได้เยอะถ้าจะเริ่มใช้งานในโปรเจคที่เล็กๆ หรือไม่ได้ซับซ้อนมาก ลองเอาไปใช้ดูครับ
..วันนี้ผมใช้ expo แล้ว ท่านละใช้หรือยัง?

ฝากติดตาม blog อื่นๆใน Happioteam ด้วยครับ
blog.happioteam.com