สร้าง Cross Platform Mobile App อย่างง่าย ๆ ด้วย Create React Native App
หากใครอยากเขียนแอพประสิทธิภาพค่อนข้างดี + เขียนทีเดียวรองรับทั้ง android และ ios + ดูผลลัพธ์ของโปรแกรมได้แบบ realtime แล้วล่ะก็ ผมคิดว่าการสร้างด้วย create-react-native-app ก็เป็นทางเลือกที่ดีนะ
Create React Native App คืออะไร
create-react-native-app คือ nodejs packages หนึ่งที่ช่วยสร้างโปรเจค react native ด้วย expo ซึ่งขณะที่กำลังเขียนบทความนี้ (16/12/2561) create-react-native-app ได้รวมเข้ากับ expo-cli เรียบร้อยแล้ว นั่นหมายความว่าสามารถใช้คำสั่ง expo-cli แล้วได้ผลลัพธ์เดียวกับ create-react-native-app เลย
มีความแตกต่างเพียงเล็กน้อยเท่านั้น อ่านได้จาก Expo Document นี้
แล้วเขียนบทความ Create React Native App ทำไม
หากใครชินกับการเขียนเว็บด้วย react มา จะคุ้นกับ create-react-app ที่ช่วยสร้างโปรเจค react สำเร็จรูปให้ แล้วเราก็โค้ด react ได้ตามปกติ แต่ create-react-native-app ต่างกันนะ มันคือ platform ใหม่ชื่อ expo เลย ซึ่งมันหุ้ม react native อีกทีเพื่อทำให้ใช้งาน react native ได้ง่ายขึ้น แต่ก็ไม่สามารถทำอะไรแบบ react navtive ได้ทั้งหมด
จึงอยากเขียนเพื่อเตือนตัวเอง และเตือนคนอื่นไว้ ณ ที่นี้
สรุปสั้น ๆ create-react-native-app คือสร้างโปรเจค expo นะ เผื่อใครหลงมา มันคือคนละตัวกับ react native
React Native และ Expo คืออะไร ใช้อะไรดี
แนะนำให้ศึกษาจากบทความนี้เลย ผมคิดว่าเขาเขียนไว้ดีมากแล้ว
สร้างโปรเจคด้วย Create React Native App
ใครเข้าใจแล้วว่า create-react-native-app ก็คือ expo แล้วจะเปลี่ยนไปใช้ expo-cli ก็ปิดบทความนี้ไปได้เลย แล้วไปหา expo-cli อ่านแทน
(Optional) ใครยังไม่ได้ลง create-react-native-app แต่ยังอยากใช้อยู่ สามารถติดตั้งได้ด้วยคำสั่ง
npm install -g create-react-native-appสำหรับใครที่หลงตัวมาแล้วและคิดว่า create-react-native-app ยังน่าสนใจอยู่ก็ตามมา (สามารถแปลงเป็นโปรเจค react-native ได้ในภายหลัง)
- เปิด Command-line interpreter
Windows: Command Prompt หรือ PowerShell
Mac/Linux: Terminal
2. สร้างโปรเจค ด้วยคำสั่ง `create-react-native-app ชื่อโปรเจค` เช่น
create-react-native-app react-native-test
3. เลือกรูปแบบโปรเจค
เมื่อรันคำสั่งในขั้นตอนที่ 2 แล้ว จะมีคำถามขึ้นมาให้เลือกว่าอยากได้โปรเจคแบบไหน
- blank คือ เป็นแอพหน้าจอเปล่า ๆ มีตัวหนังสือนิดหน่อย
- tabs คือ เป็นแอพที่มีสองหน้าจอ มี tab ให้กดเปลี่ยนหน้าได้
กดลูกศร ขึ้น-ลง บนแป้นพิมพ์เพื่อเลือกรูปแบบที่ต้องการ และกด Enter เพื่อเลือก
** บทความนี้เลือกใช้ blank **
3. เข้าไปในโปรเจคที่เราสร้าง
cd react-native-test
4. สั่งเริ่มการทำงานโปรแกรม
npm start
ถ้าไม่มีอะไรผิดพลาด จะได้หน้าต่างแสดง QR Code, คำสั่งการทำงานต่าง ๆ และเว็บ Expo Developer Tools ขึ้นมา
ทดสอบแอพด้วยอุปกรณ์จริง
เมื่อเริ่มการทำงานโปรแกรมแล้ว เราสามารถทดสอบได้ 2 วิธีหลัก ๆ คือ 1. ทดสอบด้วย Emulator ต่าง ๆ (เหมือนภาพปกของบทความนี้ แต่บทความนี้จะไม่ทำ 555) และทดสอบด้วยอุปกรณ์จริง ๆ ซึ่งจะต้องทำการติดตั้งแอพ Expo บนอุปกรณ์ทดสอบก่อน โดยมีวิธีการดังนี้
- ติดตั้งแอพ Expo บนอุปกรณ์ที่ต้องการทดสอบ
Android: https://play.google.com/store/apps/details?id=host.exp.exponent
iOS: https://itunes.apple.com/us/app/expo-client/id982107779
2. สแกน QR Code
ถึงแม้จะใช้ Windows ในการสร้างก็ตาม แต่ก็สามารถทดสอบแอพบน iOS ได้ เพียงมีอุปกรณ์จริงและติดตั้ง Expo Client
ผมจะแสดงให้เห็นว่าทดสอบใน iOS ได้จริง ๆ ด้วยการใช้ iPad mini 4 ที่มีอยู่ในการทดสอบ โดยเจ้า Expo แนะนำให้ใช้แอพกล้องธรรมดา ๆ เนี่ยแหละสแกน QR Code
ใน iOS สามารถใช้ Camera สแกน QR ได้เลย ถ้าหากติดตั้ง Expo Client เรียบร้อยแล้ว จะแสดง Pop-up ดังภาพ
Trip Tick: เราสามารถทดสอบแอพบนอุปกรณ์ที่ไม่ได้อยู่ใน network เดียวกันได้ โดยกดดู QR Code ที่โหมด Tunnel แทน LAN
เมื่อกดที่ Pop-up ก็จะเปลี่ยนมา Expo Client โดยอัตโนมัติ ที่เหลือก็แค่รอซักครู่เพื่อให้ Expo Client ดาว์นโหลดแอพจาก Computor มาแสดงผล
เมื่อดาว์นโหลดเสร็จสิ้น จะแสดงผล expo app แบบ blank ดังภาพ ถือเป็นอันสมบูรณ์
เพียงเท่านี้ก็เล่นแอพบนอุปกรณ์ได้จริง ๆ แล้ว เย้!
ทดลองแก้ไข UI แบบง่าย ๆ
ในตอนนี้ บนแอพของเรามีเพียงหน้าจอขาว ๆ และแสดงข้อความ “Open up App.js to start working on your app!” เพียงเท่านั้น
React Native นั้นใช้ JavaScript ES6+ ในการพัฒนา และมีโครงสร้างเหมือน React ดังนั้นถ้าหากเรียนรู้อย่างน้อย ๆ ก็ Javascript ES6 มาก่อนจะง่ายต่อการพัฒนาและการทำความเข้าใจกว่านะครับ ยิ่งถ้าได้ React ด้วยยิ่งดีใหญ่
ผมจะลองแก้ไขข้อความดู โดยแก้ได้จากไฟล์ App.js โดยโค้ดเดิมเรามีหน้าตาแบบนี้
แก้ไขข้อความง่าย ๆ ที่เหล่าโปรแกรมเมอร์ทั้งหลายคุ้นเคย
จะสังเกตเห็นบน Expo Client บนอุปกรณ์จะ Reload ใหม่เองอัตโนมัติ และใช้เวลาเพียงไม่นานก็แสดงผลข้อความ “Hello World!” ตามที่แก้ไขเรียบร้อย
อยากสร้าง UI ต้องทำยังไง
เนื่องด้วย create-react-native-app คือการสร้างโปรเจค expo เพราะฉนั้นเวลาจะโค้ดอะไรให้ศึกษาว่ามี component และ api อะไรและใช้งานยังไง ได้จาก document ของ expo.io ได้เลยจาก https://docs.expo.io/
ทดลองสร้าง UI แบบง่าย ๆ
หลังจากศึกษา component มาแล้ว มาทดลองสร้างปุ่มกดกัน โดยการสร้างปุ่มกดใช้ Component ชื่อ Button
ใน Document ได้แนะนำ Example Code ไว้เรียบร้อยแล้ว นั่นก็คือ
import { Button } from 'react-native';
...
<Button
onPress={onPressLearnMore}
title="Learn More"
color="#841584"
accessibilityLabel="Learn more about this purple button"
/> เรามาลองแทรกโค้ดเหล่านี้ลงในโค้ดของเรากัน
อันดับแรก จะสังเกตเห็นว่าใน Example Code มีการ import Button จาก react-native ดังนั้นเราก็เพิ่ม Button ใน import ของเราบ้าง
ถัดมา เพิ่มแท๊ก Button และ Property ต่าง ๆ ลงในโค้ด โดยผมอยากให้แสดงปุ่มกดบริเวณล่างข้อความ “Hello World!” จึงเดาว่าน่าจะเอามาไว้ข้างล่าง Text คงใช้ได้
โอ๊ะโอ! Error ซ่ะงั้น บอกว่าไม่รู้จัก onPressLearnMore
กลับไปอ่าน Document ดู Property onPress คือจะทำการทำงาน function อะไรเมื่อกดปุ่ม โดย input คือใส่ function
แบบนี้คือแก้ได้ 2 วิธีคือ 1. เพิ่ม function ให้ซ่ะ หรือ 2. ลบ onPress ออกไปก่อน
ผมได้เลือกวิธีที่ 2 เพราะยังไม่ต้องการเห็น action ใด ๆ จากการกดปุ่ม
และมันได้ผล! อาการ Error ได้หายไปพร้อมปรากฏปุ่มกดอย่างที่ต้องการจริง ๆ แต่ว่ามี Warning ขึ้นนิดหน่อย โดยเตือนว่าปุ่มกดจำเป็นต้องมี onPress นะ
โอเค ใส่ onPress ก็ได้ มาลองใส่ Alert ให้กับปุ่มของเรากัน โดยการทำงานที่ต้องการคือ เมื่อกดปุ่มแล้วจะขึ้นหน้าต่าง Alert อะไรบางอย่างออกมา
เริ่มต้นด้วยการ import Alert เพิ่มก่อน
เสร็จแล้วสร้างฟังคชันใหม่ซักชื่อนึง ผมตั้งว่า showAlert พร้อมใส่โค้ดจาก Example
Alert.alert(
'Alert Title',
'My Alert Msg',
[
{text: 'Ask me later', onPress: () => console.log('Ask me later pressed')},
{text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
{text: 'OK', onPress: () => console.log('OK Pressed')},
],
{ cancelable: false }
)
เสร็จแล้วใส่ลงไปใน onPress ใน Button
เสร็จเรียบร้อย ไร้ Error และลองกดดู
เสร็จเรียบร้อย แอพแรกของเรา เย้ !!! ~~~
โดย soure code ทั้งหมดมีดังนี้
ควรทำอะไรต่อไปดี
จริง ๆ ยังเหลืออะไรอีกเยอะแยะให้ทำ แต่อยากให้ศึกษาต่อเป็นการบ้าน ถือเป็นการทบทวนไปในตัวครับ เพราะสุดท้ายแล้วแม้จะอ่านมาเยอะแค่ไหนก็ไม่ดีเท่าลงมือทำ
“สิบปากว่าไม่เท่าตาเห็น สิบตาเห็นไม่เท่าลงมือทำ”
ซึ่งแนะนำคร่าว ๆ ได้ดังนี้
- ฝึกแก้ไข CSS
- ฝึกใช้ Props และ State
- เรียนรู้ Comonents อื่น ๆ ทั้งหมด
- สร้างหน้า UI หลาย ๆ หน้า
สรุป
หลังจากการทำขั้นตอนต่าง ๆ ทั้งหมด ทั้งมวลแล้ว เราก็ได้ Cross Platform Mobile App ขึ้นมาตัวนึง ที่สามารถทำงานได้ทั้ง Android และ iOS
โดยมีข้อความ “Hello World!” และมีปุ่มกด “Learn More” ปุ่มนึงที่เมื่อกดแล้วจะมีหน้าต่าง Alert ออกมา
ทีนี้ก็ลองนำไปประยุกต์กันดูนะครับ ให้เป็นแอพต่าง ๆ ตามจินตนาการเลย
หวังว่าเนื้อหาทั้งหมดนี้จะช่วยให้สามารถพัฒนา Cross Platform Mobile App ด้วย Create React Native App (Expo.io) เป็นหรือเข้าใจขึ้นไม่มากก็น้อย
หากถูกใจ เห็นว่าเนื้อหามีประโยชน์ต่อตนเองหรือคนรอบข้าง รบกวนแชร์กันต่อ ๆ ไปด้วยนะครับ ขอบคุณครับ ^_^
สำหรับบทความนี้ขอจบเพียงเท่านี้ สวัสดีครับ -/\-
