nitip.at

nitip.at

บันทึกการสร้างแอพติดจรวดด้วย Expo

บันทึกการสร้างแอพติดจรวดด้วย Expo

Nitipat Lowichakornthikun's photo
Nitipat Lowichakornthikun
·Aug 31, 2018·

2 min read

ปฐมบทแห่งการเริ่มต้นด้วย React-native init

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

react-native init (ลองดูท่าได้ที่นี่จะพบความอิรุงตุงนังพอสมควร)

ความสนุกจึงตามมาครับ ผมต้องทำการติดตั้งตัว XCode ไล่มาจนตัว Android studio ต้องมานั่ง Config หลายสิ่งเพื่อที่จะทำให้สามารถรันแอพที่รับช่วงต่อนี้มาได้ เรียกว่าเวลาเกือบ 2 สัปดาห์คือการปล้ำกับการเซ็ตให้เครื่องผมสามารถทำงานได้ ทั้งยังต้องมีการแก้ไขโค๊ดในฝั่ง Native ของแต่ละ Platform ในการติดตั้ง Lib ต่าง ๆ เรียกว่าตอนนั้นหัวร้อนกันเลยทีเดียว

แต่แล้วสวรรค์ก็มาโปรด… เมื่อผมลองเริ่มต้นทุกอย่างใหม่ ด้วย Create react-native app (CRNA) สิ่งนี้มันทำให้ชีวิตง่ายขึ้นมาก เราไม่ต้องไป Config ตัว Editor ต่างๆ เพื่อ Compile / Build ของแต่ละ Platform ในแบบวิธีแรก

ผมไม่รอช้าลองสร้างแอพขึ้นมาใหม่หนึ่งตัวโดยทดลองทำตามจาก Tutorial นี้

หลังจากลองเล่นก็พบว่ามันใช้ง่ายมาก ทุกอย่างจบได้ด้วย Expo เบ็ดเสร็จ
ผมเลยทำการย้ายแอพมาอยู่บน Expo (โชคดีที่แอพตัวนี้ใช้ฟีเจอร์ทั่วไปทำให้สามารถไล่เปลี่ยนเป็น Package ที่ทาง Expo SDK นั้นรองรับ ซึ่งอย่างมากก็ปรับโค๊ดนิดหน่อยไม่ได้กระทบอะไรกับฟีเจอร์เดิม)

สำหรับส่วนการทำงานบน Expo นั้นจะใช้วิธีเหมือนกันกับ React-native init แต่จะแตกต่างกันในขั้นตอนการทดสอบตัวแอพพลิเคชั่นที่เราเขียน โดยเราต้องทำการดาวน์โหลดแอพ Expo client มาลงในเครื่อง สามารถใช้งานได้ทั้ง iOS และ Android จากนั้นเราก็ทำการเข้าทดสอบแอพผ่าน QR Code หรือ URL (ในวงเน็ตเวิร์คเดียวกัน)

เจ้าตัว Client นี้ก็จะไปโหลด JavaScript bundle มาจากเครื่องที่รัน Expo server (เครื่องที่เรากำลังพัฒนาอยู่) เพื่อมาแสดงมาเป็นแอพพลิเคชั่นให้ทันที จะเห็นว่ามันข้าม Workflow ของการต้องมานั่ง Build แอพผ่าน Xcode หรือ Android studio ทำให้นี่แหละครับคือความเจ๋งของมัน

https://docs.expo.io/versions/latest/workflow/how-expo-works

แล้วทีนี้ถ้าเราต้องการนำเอา App ของเราขึ้น Store จะต้องทำยังไงดี?

ความง่ายของการเขียนแอพด้วย Expo นั้นก็คือการที่เราสามารถสั่ง Build JS bundle จากเครื่องของเราเอง จากนั้นส่ง Bundle ขึ้นไปยัง​ Server ของ Expo แล้วเราก็สามารถสั่ง Build ออกมาเป็น IPA หรือ APK ได้แบบง่ายๆ ซึ่งเราก็จะได้ลิงค์สำหรับโหลดไฟล์ลงมาเมื่อทำการ Build สำเร็จ

https://docs.expo.io/versions/v29.0.0/introduction/project-lifecycle

จากภาพจะเห็นขั้นตอนสุดท้ายคือการสั่ง exp build เพื่อบอกให้ Expo build IPA หรือ APK ได้จาก Server เลย

หน้า Build Dashboard

หรือถ้าเราอยากเป็นอิสระจาก Expo เราก็สามารถสั่ง detach ซ่ะ เพื่อที่จะได้ Native project ออกมาไป Build เอง (ในกรณีที่อยากลง Package ที่ไม่มีอยู่ใน Expo SDK)

สรุปการใช้งานจากมุมผมเอง

จุดเด่น

  • รวดเร็ว แทบไม่ต้องไปทำอะไรกับฝั่ง Native สนใจแค่โค๊ด React-native ของเราอย่างเดียว เหมาะสำหรับคนที่ไม่คุ้นกับการพัฒนาแอพแบบตัวผม
  • Workflow ของการพัฒนานั้นคล่องตัวมาก เราสามารถทดลองแอพได้หลายเครื่องพร้อมกัน ในหลาย ๆ Platform ได้อย่างง่ายดาย
  • แอพเราสามารถทำเป็น OTA Update ได้ด้วยน่ะครับ (โดย Default มันจะเป็น OTA เลย) นั่นคือผู้ใช้ไม่จำเป็นต้องไปอัพเดทแอพผ่าน Store แค่เพียงเปิดแอพเราขึ้นมาตัวแอพก็จะไปทำการโหลดเอา Bundle js เวอร์ชั่นล่าสุดขึ้นมาแสดงได้เลย

https://docs.expo.io/versions/v29.0.0/workflow/how-expo-works

  • Document ดีมาก… ถึงมากที่สุด เรียกว่าเขียนไว้อย่างละเอียด หาอะไรไม่เจอก็มี Community ที่ใหญ่คอยให้การช่วยเหลือ ผมเคยเจอปัญหานึงก็มีทีมงานเข้ามาแก้ไขได้อย่างรวดเร็ว

ข้อด้อย

  • Expo SDK ยังมีรองรับในจำนวนไม่มากนัก ผมแนะนำว่าก่อนเริ่มลงมือทำให้ศึกษาดูจากลิงค์นี้ ว่าเราต้องใช้อะไรบ้างจะได้ไม่ลำบากตอนหลัง (ถ้าแอพคุณไม่ได้มีฟีเจอร์แบบท่ายากยังไงมันก็น่าจะมี API รองรับแหละครับ)
  • อาจเกิดความเสี่ยงที่เราต้องพึ่งพาเจ้า Expo server ไปตลอด ตั้งแต่การพัฒนาไปจนถึงการ Build รวมทั้งในการปล่อยแอพขึ้น Store ไปแล้วตัว Binary ที่เราได้มามันก็ยังมีการไปเรียกข้อมูลจาก Expo CDN เพื่อดึงเอาเวอร์ชั่นล่าสุดลงมาให้ผู้ใช้
  • ไฟล์ IPA หรือ APK ที่ได้ออกมาใหญ่มาก แอพผมเมื่อเทียบกันกับตอนแรกที่ใช้ท่าแรกคือ 10mb นิด ๆ แต่พอมาใช้ Expo แอพผมโตขึ้นเป็น 40mb++ เนื่องจาก Expo ต้องการทำงานได้แบบ OTA Update มันก็เลยยัดพวก SDK ทั้งหมดที่ Expo มีไม่ว่าจะใช้หรือไม่ใช้ก็ใส่มาเต็มทำให้ขนาดใหญ่ขึ้นจนน่าตกใจเลย
  • โลกของ Expo นั้นหลายอย่างยังคงอยู่ในขั้นตอนการพัฒนา ให้ลองไปดูที่ https://expo.canny.io/ จะพบว่ามีฟีเจอร์หลายอันที่กำลังอยู่ในคิว

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

สำหรับ IGEARGEEK เราก็ยังใช้การสร้างแอพในรูปแบบเดิมที่มีการ eject project ออกมาอยู่ เนื่องจากบางงานที่เราใช้หรือ Product ที่เราพัฒนามันต้องการฟีเจอร์ที่สูงเข้าใกล้กับ Native มากยิ่งขึ้นซึ่งถ้าใช้ Expo ก็จะทำให้เราเจอกำแพงในเรื่องนั้นได้

ดังนั้นควรเลือกใช้เครื่องมือให้ตรงกับโจทย์ของเรา มันไม่มีเครื่องมือไหนที่ทำได้ครอบจักรวาลครับ ทุกตัวมีจุดเด่น ก็ต้องมีจุดที่ด้อย เป็น trade-off กันเป็นเรื่องปกติ ดังนั้นอย่าเสียเวลาเลือกเครื่องมือที่ดีที่สุดเลยครับ หยิบมาแล้วทดลองเล่นมัน เรียนรู้จากมัน จากการทดลองกับโจทย์เสมือนจริง แล้วคุณจะสามารถตอบได้เอง “ว่าเมื่อไรที่เราควรใช้สิ่งนี้”

 
Share this