การพัฒนา Mobile App ด้วย React Native (ตอนที่ 1/10) การติดตั้งเครื่องมือที่จำเป็น

บทความชุดนี้ ขอไม่เน้นทฤษฏีเยอะ เน้นเป็นเชิง Lab ปฏิบัติทำตามทีละขั้นตอน เหมาะสำหรบผู้เริ่มต้นกับ React Native ที่อยากพัฒนาแอพของตนเอง

ที่มาของบทความนี้ คือจากการสอนใน Course: Mobile Application Development สำหรับผู้ประกอบการ ที่มีพื้นฐานในการพัฒนาแตกต่างกัน จึงอยากเขียนสรุป เพื่อให้สามารถนำไปพัฒนาแอพ ที่ไม่ซับซ้อนมากนัก แต่ใช้งานได้จริง

ปล. พยายามหาบทความที่เค้าเขียนๆ ทิ้งไว้กัน ก็ละเอียดไม่พอ เนื่องจาก Expo มีการปรับแต่งนิดหน่อย กับ บางอันไม่ได้ระบุโปรแกรมที่ต้องการเบื้องต้น เลยลงทุนเขียนบทนี้ใหม่ให้ (Update Apr-2019)

วิธีการพัฒนา Mobile App

  • พัฒนา iOS App ด้วย XCode โดยใช้ MacOS ใช้ภาษา Swift
  • พัฒนา Android App ด้วย Android Studio โดยใช้ Window/MacOS โดยใช้ภาษk Java/Kotlin
  • พัฒนา ทั้ง iOS/Android ด้วยภาษา Hybrid เช่น PhoneGap, Ionic, Framework7, Fluter, React Native

วิธีการพัฒนาด้วย React Native

  • ใช้ Expo ในการสร้างโปรเจ็ก ข้อดี คือง่ายในการพัฒนา โดยมีแค่ Visual Studio Code ก็สามารถพัฒนาได้แล้ว ทดสอบแอพได้ง่าย ข้อเสีย ขนาดของแอพ ใหญ่
  • ใช้ React Native CLI ในการสร้างโปรเจ็ก  ข้อดี แอพมีขนาดเล็ก มี plug-in เยอะ ข้อเสีย ต้องติดตั้ง Android Studio และสภาพแวดล้อมอื่นๆ เยอะ
  • ใช้ snack.expo.io ในการพัฒนาเบื้องต้น แล้ว export มาเขียนบน Expo ข้อดี เริ่มได้ง่าย เขียนผ่านเว็ปได้เลยแล้วค่อย Export ออกมาทำต่อ ข้อเสีย บางอย่างจะใช้งานไม่ได้ เช่น plug-in บางตัว

** ในช่วงแรกของ Series นี้ จะใช้วิธีการเขียนและทดสอบผ่าน Expo เป็นหลัก ในตอนท้ายจะแนะนำวิธีการ convert ไปเป็น React Native project. ครับ

การติดตั้ง Environment (สภาพแวดล้อมการพัฒนา)

ขั้นตอนการติดตั้งสามารถดูได้ในเว็ปไซต์ React Native ของ Facebook ได้เลย ถ้าเป็นแบบติดตั้งโดยใช้ Expo สรุปโดยย่อตามนี้

โปรแกรมที่ควรต้องติดตั้งก่อน

  • ติดตั้ง Node.js เลือกตัวซ้ายมือ (LTS) เมื่อติดตั้งเสร็จ สามารถเปิด command line (กดปุ่ม Win + R: พิมพ์ cmd แล้ว enter) เพื่อ ทดสอบ พิมพ์. node -v และ npm -v เพื่อทดสอบว่าสามารถเรียกใช้งานได้
  • ติดตั้ง Git-SCM เพื่อให้สามารถใช้งาน Git ในการดึงไฟล์ต่างๆ ผ่าน command line ได้ ทดสอบการติดตั้งโดยพิมพ์ git -v
  • ติดตั้ง Visual Studio Code (VS Code) สำหรับใช้ในการเขียนโปรแกรม
  • ติดตั้ง แอพ Expo Client บนมือถือ เพื่อใช้ในการทดสอบ สำหรับ iOS  และ สำหรับ Android

rn01-01_full

ภาพการตรวจสอบ environment.ว่าติดตั้งแล้วเรียกใช้งานได้หรือไม่

การติดตั้งและใช้งาน Expo โดยใช้คำสั่งต่อไปนี้

ติดตั้งโปรแกรม expo-cli ลงในระบบ โดยใช้ option -g โดยใช้คำสั่ง npm install

npm install -g expo-cli

สร้างโปรเจ็กแอพแรก โดยใช้คำสั่ง expo init [ชื่อแอพ] เลือกชนิดแอพเป็น Blank และ พิมพ์ชื่อแอพ สำหรับตั้งต้น

expo init myapp

ขั้นตอนคือ 1. กด Enter เพื่อเลือก Blank , 2. พิมพ์ชื่อ project (ในตัวอย่างใช้ myapp) กด Enter , 3. ถ้ามีถามให้ Install Yarn กด Enter อีกครั้ง

rn01-02

ขั้นตอนการ สร้าง project ด้วยคำสั่ง expo init [ชื่อแอพ] **ในจังหวะที่ให้พิมพ์ชื่อ project จะไม่มีเคอเซอร์ ให้กดพิพม์ไปเลย**

เข้าไปยัง folder โปรเจ็กที่สร้างขึ้น โดยการ cd เข้าไป แล้วรันโปรเจ็กโดยใช้คำสั่ง npm start

cd myapp

npm start

การทดสอบแอพของเรา

วิธีการทดสอบแอพ สามารถทำได้หลายแบบ

  • ทดสอบผ่าน Emulator. บนเครื่อง โดยติดตั้ง XCode บนเครื่อง MacOS หรือ Android Studio , Genemotion, Nox, Blue Stace สำหรับ Android
  • ทดสอบผ่าน อุปกรณ์จริง โดยต่อสาย USB (โดย Android ต้องปลดล๊อก devloper mode ก่อน ให้ค้นใน google : enable developer mode [ชื่อรุ่น โทรศัพท์])
  • ทดสอบผ่าน แอพ Expo Client โดยการสแกน QR-Code (ของ iOS ใช้วิธีเปิดแอพกล้อง แล้วสแกน จะวิ่งไปที่ Expo เอง)
  • นอกจากนั้นยังสามารถส่งเมล์ หรือโยนตัว project ขึ้นไปบน cloud ของ Expo เพื่อทดสอบได้

rn01-03

ภาพการรัน app ของเราสำหรับทดสอบ (1) คือชื่ออุปกรณ์ที่กำลังเชื่อมต่อ (2) กดเพื่อเลือกวิธีการทดสอบ (3) เลือกวิธีการเชื่อมต่อ

สำหรับรูปแบบการเชื่อมต่อ (Connection)

  • Tunnel  หมายถึง ตัวเครื่องโทรศัพท์ที่ลงแอพ Expo สามารถต่อผ่าน 4G หรืออยู่คนละ network กันก็ได้
  • LAN หมายถึง ตัวเครื่องที่รัน project กับ โทรศัพท์ ต้องอยู่บน network เดียวกัน เช่น ต่อ WiFi ชื่อเดียวกัน
  • Local หมายถึง ใช้กับการทดสอบผ่าน Emulator ที่รันบนเครื่องที่รับ project

การปรับแต่ง App ด้วย VS Code

  1. เปิดโปรแกรม Visual Studio Code
  2. ไปที่เมนู File -> Open Folder สำหรับ window, File -> Open  สำหรับ MacOS
  3. เลือก folder ที่เราสร้างขึ้นก่อนหน้านี้ ในที่นี้คือ myapp
  4. เปิดไฟล์ App.js แก้ไขโปรแกรม บรรทัดที่ 8
  5. บันทึกการแก้ไข โดยไปที่ File -> Save หรือ กดปุ่ม Ctrl+S สำหรบ window, Command + S สำหรับ MacOS

แก้ไขบรรทัดที่ 8 ของไฟล์ App.js

จาก

<Text>Open up App.js to start working on your app!</Text>

 

ให้เป็น

<Text style={{fontSize:60}}>
     Helo MyApp
</Text>

โปรแกรมจะทำการ re-build เพื่ออัพเดท การเปลี่ยนแปลง สังเกตที่หน้าจอโทรศัพท์ ตอนนี้ข้อความจะเปลี่ยนไปเรียบร้อยแล้ว

rn01-04

ภาพ การแก้ไข แอพ ของเรา ด้วย Visual Studio Code

บทความนี้เอาแค่นี้ก่อนนะครับ แนะนำให้ทดลอง สร้าง project หลายๆรอบ เล่นดู เพื่อเพิ่มความชำนาญ การจัดการกับสภาพแวดล้อม ถือเป็นสิ่งจำเป็นเรื่องแรก เพราะถ้าเครื่องมือไม่พร้อม จะไม่สามารถไปต่อได้ การฝึกฝน และทำซ้ำ จำเป็นที่สุดสำหรับงานสายนี้ ทำบ่อยๆจนไม่ต้องมานั่งดูคู่มือ แนะนำให้ศึกษาล่วงหน้าที่เว็ป React Native

บทความเสริม

  1. การออกแบบ UX/UI ด้วย Adobe XD
  2. พื้นฐานภาษา JavaScript ES6
  3. การใช้งาน Firebase
  4. การติดตั้ง โฆษณาของ AdMob ไว้ทำเงิน

ติดตามทุกตอนของ Series นี้ (กำหนดการคือ อย่างน้อย สัปดาห์ละ 1 ตอน)

  1. การติดตั้งเครื่องมือที่จำเป็น
  2. โครงสร้างการออกแบบ และ คอมโพเน้นพื้นฐาน
  3. การใช้ Style , Font และ Icon
  4. การสร้าง Component แล้วนำกลับมาใช้ใหม่
  5. การใช้งาน Navigation เชื่อมหลายหน้าจอ
  6. การดึงข้อมูลจาก JSON มาใช้งาน และการใช้ Local Storage
  7. การดึงข้อมูลจาก Firebase และเนื้อหาจากเว็ป
  8. การใช้งาน กล้อง การอ่านและแสดง QR-Code
  9. การใช้งาน Link, Share และการโทร
  10. การ build APK เพื่อนำขึ้น Store

 

rn01-screen-shot

ภาพสุดท้าย ของ Series นี้ จะได้แอพสั่งอาหาร อย่างง่าย ส่งข้อมูลเก็บไว้ใน Firebase พร้อมฝั่งเว็ป ดึงขึ้นมาแสดงผลรายการสั่งซื้อ (แรงบันดาลใจจากร้านลาบเจ้าโปรดใกล้ๆ ม.)

ลองไปรันเล่นผ่าน Appetize.io ได้ที่ Demo App SpeedFood  (กดที่ Tap to Play) ส่วนผลการสั่งซื้อไปดูได้ที่ Speed Food Web (Refresh ทุก 30 วิ)

 

ขอบคุณที่ติดตามอ่านครับ บทความชุดนี้จะเน้นให้ทำตามได้ง่ายๆ ค่อยๆทำ ใจเย็นๆ เหมาะสำหรับผู้เริ่มต้น ระดับความยากจะเพิ่มขึ้นเรื่อยๆ ขอให้ติดตามต่อเนื่อง รับรองได้แอพไว้ใช้งานแน่นอน

ติดตามข้อมูลผ่าน FanPage เข้าไปกด Like ที่: https://www.facebook.com/AjBeeMePage

กับฝากติดตาม FanPage สาขาวิศวกรรมซอฟต์แวร์ @ MFU ที่ https://www.facebook.com/sitsemfu/