ใช้ React Native และ API สร้าง Mobile Application ไม่ยากเลย 😁

บทความนี้จะสาธิตการใช้ React Native สร้าง Mobile Application แบบ Cross-platform นะครับ คือเขียนโค้ดครั้งเดียวใช้ได้หลาย Platform โดย React Native รองรับทั้ง Android และ iOS ครับ ใน App ที่จะทำนี้จะเรียกใช้ API จำลองข้อมูลแหล่งท่องเที่ยวบนเว็บไซต์ MeCallAPI.com หลักๆ คือเรียก API จาก URL นี้นะครับ

https://www.mecallapi.com/api/en/attractions (ภาษาอังกฤษ)
หรือใครจะเรียกแบบเป็นข้อมูลภาษาไทยก็ได้นะครับ
https://www.mecallapi.com/api/th/attractions (ภาษาไทย)

แปะ clip สามารถดูตามจาก clip ได้ครับ

ผลลัพธ์ที่จะได้ตามรูปครับ

Software Installation

• Node.js https://nodejs.org

เตรียมสภาพแวดล้อมของเครื่องตามที่อธิบายในเว็บไซต์ของ React Native: https://reactnative.dev/docs/environment-setup
โดยผมจะเลือกใช้เป็น React Native CLI จะให้ยกตัวอย่างการติดตั้งที่เครื่องของผมที่เป็น Windows และทดสอบด้วย Android Studio นะครับว่าต้องทำอย่างไรบ้าง

• ติดตั้ง Chocolatey

1.เปิด Windows PowerShell ด้วยสิทธิของ Admin ดังภาพ

2.เรียกคำสั่งด้านล่างเพื่อติดตั้ง Chocolatey อ้างอิงจาก Link

Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))

• ติดตั้ง openjdk8

1.เปิด Command Prompt ด้วยสิทธิของ Admin ดังภาพ

2.เรียกคำสั่งด้านล่างเพื่อติดตั้ง openjdk8

choco install -y nodejs.install openjdk8

• ติดตั้ง Android Studio

1.ดาวน์โหลดและติดตั้ง Android Studio จาก https://developer.android.com/studio

2.ดาวน์โหลด Android SDK เป็นตัว Android 10 (Q) ดังภาพ

3.ดาวน์โหลด Android Virtual Device (AVD) สำหรับเป็น emulator ทดสอบ app ของเรา ขั้นตอนดังภาพด้านล่าง

4.ตั้งค่า ANDROID_HOME และ path ใน system environment ขั้นตอนตามภาพ

เริ่มต้นสร้างแอป

npm install --global yarn
npx react-native init reactNativeBasic
cd reactNativeBasic
yarn add @react-navigation/native
yarn add @react-navigation/native-stack
yarn add react-native-screens react-native-safe-area-context
yarn add react-native-paper
yarn add react-native-vector-icons 
npx react-native link react-native-vector-icons
npx react-native run-android

• npx react-native เพื่อสร้าง App ตัวตั้งต้นขึ้นมา
• react-navigation สำหรับจัดการ Route การเปลี่ยนหน้าจอใน App ของเรา
  https://reactnavigation.org/
• react-native-paper สำหรับเป็น Component ต่างๆ ใน App ของเรานะครับ
  https://callstack.github.io/react-native-paper/index.html

Let’s Code!

แก้ไขไฟล์ babel.config.js

แก้ไขไฟล์ index.js

แก้ไขไฟล์ App.js

สร้างไฟล์ Attractions.js

สร้างไฟล์ AttractionCard.js

สร้างไฟล์ AttractionDetails.js

ผลลัพธ์

Build APK ทดสอบกับเครื่องจริง

npx react-native run-android --variant=release

ไฟล์ apk จะอยู่ที่ android/app/build/outputs/apk/release/app-release.apk

จบแล้วครับ ถ้ามีพื้นฐานไม่ยากเลยครับ จะยากนิดหน่อยตอนติดตั้งโปรแกรมครับ 555 ไว้ถ้ามีเวลาจะมาใส่คำอธิบายเพิ่มเติมนะครับ

บทความโดย อ.ดร.กานต์ ยงศิริวิทย์
วิทยาลัยนวัตกรรมดิจิทัลเทคโนโลยี มหาวิทยาลัยรังสิต