ExpoSDK #1 : สร้าง Mobile App ด้วย Expo
การเริ่มต้นสร้าง Mobile App ด้วย React-Native อาจจะเป็นเรื่องยากของใครหลายคนในการจะต้องทำการเรียกใช้งาน Library ที่จำเป็นต่าง ๆ โดยต้องทำการ Config ใน Xcode หรือ Android Studio
Expo คืออะไร?
Expo เป็น SDK ชุดหนึ่งที่เข้ามาช่วยให้การพัฒนา App ด้วย React-Native เป็นมิตรมากขึ้นด้วยการจัดการสิ่งต่าง ๆ ที่จำเป็นในการทำงานให้กับ React-Native เช่น Maps, ImagePicker, Font, Permission, Video, Push Notification etc. โดยไม่ต้องเข้าจัดการเขียน Native Module อีกทั้งพ่วงมาด้วย Expo XDE / exp CLI ช่วยในการจัดการดู Log การทำงานต่าง ๆ , การทดสอบ App ผ่านอุปกรณ์จริง โดยไม่ต้องใช้สายเชื่อมต่อ (ส่ง Link ผ่าน SMS, Email), นำ App Pubilsh ให้ผู้ใช้ทั่วไปผ่าน Expo App Client ได้ทั้ง iOS และ Android โดยไม่จำเป็นต้องผ่าน App Store / Play Store
อีกเรื่องที่เราจะไม่พูดถึงไม่ได้เลย คือ เราสามารถพัฒนา iOS / Android แบบ Native ได้ทั้งบน Windows และ Linux และท้ังหมดที่ว่ามานี้ FREE!!! ครับ
เริ่มต้นสร้าง Project กับ Expo XDE กันดีกว่า
ในบทความนี้อยากสร้างความรู้สึกเป็นมิตรในการพัฒนา จึงขอเริ่มต้นด้วย Expo XDE ก่อน ซึ่งทุกคนจะได้เข้าใจถึงความง่ายของมัน
1. Download Expo XDE ผ่านทาง https://github.com/expo/xde
2. ทำ Sign In เพื่อเข้าใช้งาน Expo XDE หากไม่มี Account ให้สมัครก่อนเพื่อเข้าใช้งาน
3. เมื่อเข้ามาจะเห็นหน้าต่าง ๆ แบบนี้ ให้ทำการคลิ๊กเลือก Project -> New Project
4. เลือกรูปแบบการสร้างโปรเจ็คโดยมี 2 รูปแบบ
Blank Project — ภายใน App จะมีเพียงหน้าเดียว เหมาะสำหรับผู้ที่ชอบจัดระเบียบด้วยตัวเอง
Tabs Navigation— ภายใน App หน้าตัวอย่างให้ 3 หน้า พร้อมกับการทำ Navigation, ตัวอย่างการใช้งาน Expo Component ต่าง ๆ เหมาะสำหรับผู้เริ่มต้นศึกษาและการใช้งาน Expo
ทำการเลือก Tabs Navigation จากนั้นเลือก Create
5. เลือก Send Link
จากนั้นกรอกข้อมูล Email หรือ โทรศัพท์หากใช้เป็นเบอร์โทรศัพท์ในประเทศไทยให้ขึ้นต้นด้วยรหัสประเทศ (+66)
6. Download Expo Client App
ซึ่งสามารถ Download ได้ทั้ง 2 Store
7. Copy Link จากข้อที่ 5 มาเปิดใน Expo.io Client App
เลือก Open from Clipboard หากใครไม่มี เลือก Explore (สามารถดู Project ที่ Publish แล้วได้ใน Menu นี้เช่นกัน อย่าง เช่น React Conf 2017 blah blah) จากนั้นนำ Link ที่มีไปใส่ในช่องการค้นหา จากนั้นเลือกผลลัพธ์ที่ได้
เราก็จะได้ผลลัพธ์เป็น App ของเรานั่นเอง
ตามธรรมเนียมของ Developer ทั่วโลก
สิ่งที่ขาดไปไม่ได้ของการเริ่มเรียนรู้ภาษาหรือเฟรมเวิร์คใหม่ ๆ เรียกได้ว่า “กฎเหล็ก” จะเป็นอะไรไปไม่ได้ คือ “Hello World”
เริ่มด้วยเปิด Source Code ขึ้นมาก่อน หากไม่ทราบว่าอยู่ไหน สามารถเปิดด้วย Expo XDE ได้ เลือก Project -> Open In Editor
แก้ไข File ใน screens -> HomeScreen.js แก้ไขใน renden() ดังนี้
return ( <View style={styles.container}> <ScrollView style={styles.container} contentContainerStyle={styles.contentContainer}> <Text style={styles.getStartedText}> Hello World </Text> </ScrollView> </View>);
In the Future
จากการใช้งาน Expo เป็นเวลาอันยาวนานม๊ากกก (2 วัน) ในการทดสอบการใช้งาน ทำให้ผมประทับใจในตัว Expo มันช่วยแก้ปัญหาในการเรียกใช้งาน Component ที่จำเป็นลงไปได้มาก ซึ่งให้มาแล้วค่อนข้างครบถ้วน ลดการเข้าไปยุ่งยากในการจัดการ Native Module การส่งงานให้ลูกค้าทดสอบ App เป็นไปได้ง่ายมากขึ้น เราสามารถแก้ไขงานให้ลูกค้าดูได้ทันทีเลย ไม่ต้องทำการผ่าน App Store หรือ Play Store อีกต่อไป
ผมเชื่อว่า Expo ตัวนี้น่าจะมีอนาคตให้ศึกษา หากคนที่ใช้งาน React เป็นอยู่แล้ว แทบจะเรียกได้ว่า Create แล้วสร้าง Mobile App ง่าย ๆ ได้ทันเลย อีกทั้งมี Create-react-native-app ก็ได้ใช้ Expo เข้าไปเป็นส่วนหนึ่งในการทำงาน
What Next?
ถึงแม้ว่า Expo จะมี Components ต่าง ๆ มาให้มากมาย แต่ความต้องการของมนุษย์เรามีไม่สิ้นสุด ทำให้ Components ที่ให้มาคงไม่เพียงพอต่อการใช้งาน ในตอนที่ 2 ผมจะมาทำการอธิบายการทำงานเมื่อเราต้องการเพิ่ม Native Module เราจะสามารถทำงานร่วมกับ Expo ได้อย่างไรนะครับ ตอนนี้ขอไปปั่นงานก่อนนะครับ
