React Native | Setting up the development environment

React Native คือ Framework ที่ใช้เขียน Mobile Application ที่สามารถ Run ได้ทั้ง IOS และ Android ด้วย Source Code เพียงชุดเดียว อำนวยความสะดวกให้กับ Developer เมื่อต้องการพัฒนา Application ทั้ง IOS และ Android

การเตรียมตัวสำหรับพัฒนา Mobile Application ด้วย React Native

ในบทความนี้จะแนะนำการตั้งค่าแบบพื้นฐานด้วย Tools ที่เป็น Open Source โดย Tools ประกอบด้วย

1. Node JS https://nodejs.org/en/download/
2. VS Code https://code.visualstudio.com/#alt-downloads
3. Expo **ติดตั้งบนโทรศัพท์มือถือผ่าน App Store หรือ Play Store

การติดตั้ง Node JS + VS Code สามารถทำตามวิธีจาก Link

เริ่มต้นการตั้งค่า

ติดตั้ง expo-cli

1. เปิดโปรแกรม VS Code แล้วตรวจสอบว่ามี Node JS และ npm หรือไม่ ด้วยคำสั่ง
   $node -v
$npm -v
   
   
2. ติดตั้ง expo-cli ด้วยคำสั่ง
   $npm install -g expo-cli
   
   เมื่อติดตั้งเรียบร้อยจะพอคำเตือนตามถาพด้านล่าง
   
   จากนี้ให้ใช้คำสั่ง
   $npm audit
   
   จะพบ Error ไม่ต้องตกใจ ให้ใช้คำสั่งต่อไปนี้
   $npm i --package-lock-only
   
3. เสร็จสิ้นการติดตั้ง expo-cli ในส่วนเครื่องคอมพิวเตอร์

สร้าง Project React Native ด้วย expo-cli

1. ใช้คำสั้ง expo เพื่อการสร้าง Project
   $expo init awesomeproject
   Project Template เลือกเป็น Blank
   
   สร้างโปรแจ็กเรียบร้อย
   
   จะมี Folder : awesomeproject
   
2. เปิด File : App.js เพื่อดูว่า Code เขียนอย่างไร
   
   Source Code ของ React Native จะคล้ายกับ React JS แตกต่างเพียง Component ที่เป็น Mobile Component แทน Web Component
   <Text> คือ Component ของ Mobile ใช้แสดงข้อความ เป็นต้น
3. ทดสอบ Run Project ด้วยคำสั่ง
   $cd awesomeproject
$npm start
   ที่ Terminal จะได้ QR Code สำหรับใช้กับ Expo App บนโทรศัพท์
   
   และจะเปิด Default Web Browser โดยอัตโนมัติด้วย
   
4. ในส่วนของเครื่องคอมพิวเตอร์สำหรับเขียน Application เสร็จเรียบร้อยแล้ว ต่อจากนี้จะเป็นการตั้งค่าในส่วนของ Expo Mobile App

ทดสอบ App ด้วย Expo Mobile App

ในบทความจะแสดงตัวอย่างการทำสอบ Application บนระบบ Android สำหรับผู้ใช้งาน IOS สามารภ Install Expo บน IOS แล้วทำตามวิธีบนระบบ Android ได้เลย

1. Install Expo จาก Play Store
   Search Expo ด้วย Keyword : expo
   
   กดปุ่ม Install และรอจนสำเร็จ
   
   เมื่อติดตั้งสำเร็จจะได้ App อยู่ที่หน้า Mobile Desktop
   
2. เปิด Expo App บนโทรศัพท์ ต้องเชื่อม WIFI เป็น Network เดียวกับ คอมพิวเตอร์ ที่เขียนโปรแกรมด้วย
   
3. กดที่ Scan QR Code แล้ว Allow ให้ Expo App เข้าถึง Camera ได้
   
   จากนั้น Scan QR Code ที่ได้จาก $npm start ในขั้นการเขียนโปรแกรม
   
   รอโปรแกรม Build ในระหว่างการ Build จะเห็น Building Progress ในฝั่งของเครื่องคอมพิวเตอร์ด้วย
   ฝั่ง Computer
   
   ฝั่ง Mobile App
   
4. เมื่อ Build เสร็จสิ้นข้อความใน <Text> ใน App.js จะแสดงที่หน้าโทรศัพท์มือถือ
   
5. เมื่อกลับมาที่หน้า Home ของ Expo App จะเห็นชื่อ Project: awesomeproject อยู่ในหน้า Home การใช้งานครั้งถัดไปจึงไม่ต้อง Scan QR Code อีก
   
6. การปิด Application บน มือถือ และ เครื่องคอมพิวเตอร์
   การปิดบนมือถือ ใช้วิธีการปิดเช่นเดียวกับการปิด Application ปกติ และสามารถ Kill Process ได้เช่นกัน
   การปิดโปรแกรมบนเครื่องคอมพิวเตอร์ ให้กลับไปที่ Terminal บน VS Code แล้ว Crtl+C เพื่อปิดการ Run Program
   
7. เสร็จสิ้นการ Set up Environment อย่างง่ายไ เพื่อพัฒนา Mobile Application ด้วย React Native

สรุป

บทความนี้เป็นบทความที่พยายามอธิบายขั้นตอนการตั้งค่าคอมพิวเตอร์และโทรศัพท์ให้สามารถพัฒนาโปรแกรมด้วย React Native Framework ได้อย่างง่ายที่สุด เพื่อให้ทราบถึงจุดสำคัญต่างๆ และเครื่องมือที่จำเป็นต้องใช้ โดยผู้อ่านสามารถต่อยอดความยากได้ และทางผู้เขียนจะนำบทความนี้ไปต่อยอดเพื่อเป็นตัวอย่างการพัฒนา Application ต่อไป

แหล่งข้อมูล

• https://reactnative.dev/docs/environment-setup

• Facebook
• Twitter
• Line