ใช้ 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

เตรียมสภาพแวดล้อมของเครื่องตามที่อธิบายในเว็บไซต์ของ 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 ไว้ถ้ามีเวลาจะมาใส่คำอธิบายเพิ่มเติมนะครับ

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

--

--

Lecturer at Digital Innovation Technology, Rangsit University

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Karn Yongsiriwit

Karn Yongsiriwit

Lecturer at Digital Innovation Technology, Rangsit University