สร้าง Cross Platform Mobile App อย่างง่าย ๆ ด้วย Create React Native App

Sirawit Sek
6 min readDec 16, 2018

--

โค้ดเหมือนเขียนเว็บอยู่เลย แต่ได้เป็น mobile app แหละ ว้าววว *0*

หากใครอยากเขียนแอพประสิทธิภาพค่อนข้างดี + เขียนทีเดียวรองรับทั้ง 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 init แทน create react native app ได้เลย (อ้างอิงจาก git hub: create reate 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

สร้างโปรเจคด้วย 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 ได้ในภายหลัง)

  1. เปิด Command-line interpreter

Windows: Command Prompt หรือ PowerShell

Mac/Linux: Terminal

ผมใช้ Windows 10 เพราะฉนั้นจึงใช้ Command Prompt และมา Path ที่ต้องการสร้าง Project ให้เรียบร้อย

2. สร้างโปรเจค ด้วยคำสั่ง `create-react-native-app ชื่อโปรเจค` เช่น

create-react-native-app react-native-test
คำสั่งสร้างโปรเจค expo ด้วย create-react-native-app

3. เลือกรูปแบบโปรเจค

เมื่อรันคำสั่งในขั้นตอนที่ 2 แล้ว จะมีคำถามขึ้นมาให้เลือกว่าอยากได้โปรเจคแบบไหน

  • blank คือ เป็นแอพหน้าจอเปล่า ๆ มีตัวหนังสือนิดหน่อย
  • tabs คือ เป็นแอพที่มีสองหน้าจอ มี tab ให้กดเปลี่ยนหน้าได้

กดลูกศร ขึ้น-ลง บนแป้นพิมพ์เพื่อเลือกรูปแบบที่ต้องการ และกด Enter เพื่อเลือก

** บทความนี้เลือกใช้ blank **

โหมดในการสร้างโปรเจค create-react-native-app พร้อมคำอธิบาย
หน้าตาเมื่อทำการติดตั้งเสร็จสิ้น (มีคำแนะนำขั้นตอนต่อไปด้วย)

3. เข้าไปในโปรเจคที่เราสร้าง

cd react-native-test
เมื่อสร้างโปรเจคเสร็จ ต้องเข้าไปในโฟเดอร์ที่สร้างก่อน เพื่อไปสั่งโปรแกรมข้างใน

4. สั่งเริ่มการทำงานโปรแกรม

npm start

ถ้าไม่มีอะไรผิดพลาด จะได้หน้าต่างแสดง QR Code, คำสั่งการทำงานต่าง ๆ และเว็บ Expo Developer Tools ขึ้นมา

หน้าตาหลังสั่งเริ่มการทำงาน
หน้าเว็บ Expo Developer Tools จะถูกเปิดขึ้นมาอัตโนมัติเมื่อสั่งเริ่มการทำงาน

ทดสอบแอพด้วยอุปกรณ์จริง

เมื่อเริ่มการทำงานโปรแกรมแล้ว เราสามารถทดสอบได้ 2 วิธีหลัก ๆ คือ 1. ทดสอบด้วย Emulator ต่าง ๆ (เหมือนภาพปกของบทความนี้ แต่บทความนี้จะไม่ทำ 555) และทดสอบด้วยอุปกรณ์จริง ๆ ซึ่งจะต้องทำการติดตั้งแอพ Expo บนอุปกรณ์ทดสอบก่อน โดยมีวิธีการดังนี้

  1. ติดตั้งแอพ 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

สแกน QR Code จาก Expo Developer Tools ด้วย Camera บน iOS

ใน iOS สามารถใช้ Camera สแกน QR ได้เลย ถ้าหากติดตั้ง Expo Client เรียบร้อยแล้ว จะแสดง Pop-up ดังภาพ

Trip Tick: เราสามารถทดสอบแอพบนอุปกรณ์ที่ไม่ได้อยู่ใน network เดียวกันได้ โดยกดดู QR Code ที่โหมด Tunnel แทน LAN

Expo Client กำลังทำการโหลดไฟล์ Bundle ต่าง ๆ จาก Host มาแสดงผล

เมื่อกดที่ Pop-up ก็จะเปลี่ยนมา Expo Client โดยอัตโนมัติ ที่เหลือก็แค่รอซักครู่เพื่อให้ Expo Client ดาว์นโหลดแอพจาก Computor มาแสดงผล

การแสดงผล Project Expo แบบ blank

เมื่อดาว์นโหลดเสร็จสิ้น จะแสดงผล expo app แบบ blank ดังภาพ ถือเป็นอันสมบูรณ์

เพียงเท่านี้ก็เล่นแอพบนอุปกรณ์ได้จริง ๆ แล้ว เย้!

ทดลองแก้ไข UI แบบง่าย ๆ

ในตอนนี้ บนแอพของเรามีเพียงหน้าจอขาว ๆ และแสดงข้อความ “Open up App.js to start working on your app!” เพียงเท่านั้น

React Native นั้นใช้ JavaScript ES6+ ในการพัฒนา และมีโครงสร้างเหมือน React ดังนั้นถ้าหากเรียนรู้อย่างน้อย ๆ ก็ Javascript ES6 มาก่อนจะง่ายต่อการพัฒนาและการทำความเข้าใจกว่านะครับ ยิ่งถ้าได้ React ด้วยยิ่งดีใหญ่

ผมจะลองแก้ไขข้อความดู โดยแก้ได้จากไฟล์ App.js โดยโค้ดเดิมเรามีหน้าตาแบบนี้

App.js ที่ได้จาก create-react-native-app

แก้ไขข้อความง่าย ๆ ที่เหล่าโปรแกรมเมอร์ทั้งหลายคุ้นเคย

ไหว้ครูด้วย Hello World!
หน้าตา App ที่เปลี่ยนไปตามที่โค้ด

จะสังเกตเห็นบน Expo Client บนอุปกรณ์จะ Reload ใหม่เองอัตโนมัติ และใช้เวลาเพียงไม่นานก็แสดงผลข้อความ “Hello World!” ตามที่แก้ไขเรียบร้อย

อยากสร้าง UI ต้องทำยังไง

เนื่องด้วย create-react-native-app คือการสร้างโปรเจค expo เพราะฉนั้นเวลาจะโค้ดอะไรให้ศึกษาว่ามี component และ api อะไรและใช้งานยังไง ได้จาก document ของ expo.io ได้เลยจาก https://docs.expo.io/

ทดลองสร้าง UI แบบง่าย ๆ

หลังจากศึกษา component มาแล้ว มาทดลองสร้างปุ่มกดกัน โดยการสร้างปุ่มกดใช้ Component ชื่อ Button

ตัวอย่าง Component Button ใน Expo Document

ใน 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 ของเราบ้าง

import Button จาก react-native

ถัดมา เพิ่มแท๊ก Button และ Property ต่าง ๆ ลงในโค้ด โดยผมอยากให้แสดงปุ่มกดบริเวณล่างข้อความ “Hello World!” จึงเดาว่าน่าจะเอามาไว้ข้างล่าง Text คงใช้ได้

แทรก Button ภายใต้ View

โอ๊ะโอ! Error ซ่ะงั้น บอกว่าไม่รู้จัก onPressLearnMore

Error: Can’t find variable: onPressLearnMore

กลับไปอ่าน Document ดู Property onPress คือจะทำการทำงาน function อะไรเมื่อกดปุ่ม โดย input คือใส่ function

onPress Props ของ Button

แบบนี้คือแก้ได้ 2 วิธีคือ 1. เพิ่ม function ให้ซ่ะ หรือ 2. ลบ onPress ออกไปก่อน

ผมได้เลือกวิธีที่ 2 เพราะยังไม่ต้องการเห็น action ใด ๆ จากการกดปุ่ม

ทดสอบลบ onPress

และมันได้ผล! อาการ Error ได้หายไปพร้อมปรากฏปุ่มกดอย่างที่ต้องการจริง ๆ แต่ว่ามี Warning ขึ้นนิดหน่อย โดยเตือนว่าปุ่มกดจำเป็นต้องมี onPress นะ

โอเค ใส่ onPress ก็ได้ มาลองใส่ Alert ให้กับปุ่มของเรากัน โดยการทำงานที่ต้องการคือ เมื่อกดปุ่มแล้วจะขึ้นหน้าต่าง Alert อะไรบางอย่างออกมา

ตัวอย่างหน้าต่าง Component Alert จาก Expo Document

เริ่มต้นด้วยการ 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 และลองกดดู

หน้าต่าง Alert หลังจากกด Buton

เสร็จเรียบร้อย แอพแรกของเรา เย้ !!! ~~~

โดย 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) เป็นหรือเข้าใจขึ้นไม่มากก็น้อย

หากถูกใจ เห็นว่าเนื้อหามีประโยชน์ต่อตนเองหรือคนรอบข้าง รบกวนแชร์กันต่อ ๆ ไปด้วยนะครับ ขอบคุณครับ ^_^

สำหรับบทความนี้ขอจบเพียงเท่านี้ สวัสดีครับ -/\-

--

--