มือใหม่สร้าง Mobile App ด้วย React Native และเรียกใช้ API สำหรับแสดงข้อมูลน้องแมวหลาย ๆ ตัว😻

บทความนี้จะแนะนำสำหรับมือใหม่นะครับ ในการพัฒนา Mobile App พื้นฐานด้วยการใช้ React Native โดยมีตัวอย่างการใช้ Component, Props และการเรียกใช้ Rest API เพื่อแสดงข้อมูลและสืบค้นน้องแมวหลาย ๆ ตัวครับ 😸

Software Installation

• Node.js จาก https://nodejs.org
• Expo-cli เป็นตัวช่วยในการ build app นะครับ ใช้คำสั่งติดตั้งตามนี้เลยครับ:

npm install -g expo-cli
yarn global add expo-cli

• Expo Go ติดตั้งที่มือถือได้เลยครับ สำหรับทดสอบ mobile app บนมือถือเลย ไม่ต้องรัน simulator ให้เครื่องอืด 555 (รองรับทั้ง iOS และ Android)

สร้าง React Native App

จากนั้นเปิด Command Prompt หรือ Terminal ขึ้นมา และเรียกคำสั่ง expo init ตามด้านล่างสร้าง app ตั้งต้นขึ้นมา โดยระบุชื่อ app ต่อท้ายได้เลยครับ (ในตัวอย่างจะตั้งชื่อว่า cat-friends-react-native

expo init cat-friends-react-native

โดยเมื่อเรียกคำสั่งด้านบน จะมีให้เราเลือก template ของ app โดยให้เลือกเป็น blank นะครับ จะเป็นการสร้าง app เปล่า ๆ ขึ้นมา

เข้าไปในโฟลเดอร์ cat-friends-react-native ด้วยคำสั่ง cd, จากนั้น start app ด้วยคำสั่ง yarn start (expo-cli จะมีการถูกเรียกผ่านคำสั่งนี้)

cd cat-friends-react-native
yarn start

Expo developer tools จะปรากฏบน browser ให้นำมือถือของเราที่ติดตั้ง Expo Go แล้วมา Scan QR Code ที่แสดง จากนั้นจะเห็น app ตั้งต้นโผล่ขึ้นมาดังภาพด้านล่าง

ติดตั้ง Native Base CSS Framework

เพื่อให้ app ของเรามีความสวยงามบ้างนิดหน่อยนะครับ 555 เราจะเพิ่ม Native Base CSS Framework เข้าไปใน app ของเรากัน โดยเริ่มต้นให้หยุดการทำงานของ Expo ก่อนด้วยการกดปุ่ม Ctrl + C

ใช้คำสั่ง yarn add เพื่อเพิ่ม Native Base เข้าไปใน app ของเรา จากนั้นจึงสั่ง start app ของเราอีกครั้งด้วยคำสั่ง yarn start และทำการ scan QR Code อีกครั้งเพื่อคอยดูผลลัพธ์ของ app ผ่านมือถือของเราเอง

yarn add native-base --save
yarn start

สร้าง CatCard Component

เราจะเริ่มสร้าง React component สำหรับแสดงข้อมูลของน้องแมว โดยจะให้มีรูป ชื่อ และ email ของน้องแมว ดังภาพ

เราจะใช้ robohash.org เพื่อสร้างรูปแมวโดยใช้เป็น the URL https://robohash.org/<<anytext>>?set=set4 ให้เปลี่ยน <<anytext>> เป็นข้อความใดก็ได้และรูปของน้องแมวจะเปลี่ยนไปตามข้อความ

ตัวอย่างเช่น https://robohash.org/karnyong?set=set4

สร้าง Card.js สำหรับแสดงข้อมูลรูป ชื่อ และ email ของน้องแมว

แก้ไข App.js เพื่อเพิ่ม CatCard component เข้าไปใน app ของเรา

• Import Components ของ native-base (บรรทัดที่ 2)
• Import CatCard component จาก CatCard.js (บรรทัดที่ 3)
• แสดง native-base Components ต่าง ๆ เช่น Container, Header, Body, Title รวมถึง CatCard component บนหน้าจอ app (บรรทัดที่ 20–22)

ผลลัพธ์ที่ได้คือการแสดง CatCard component หลาย ๆ Component

สร้าง CardList Component

ถัดมาเราจะทำการแสดงรายการของ CatCard Component เพื่อแสดงข้อมูลน้องแมวหลาย ๆ ตัว

เริ่มต้นใช้ข้อมูล mockup จาก URL: https://jsonplaceholder.typicode.com/users โดยเปรียบได้กับการเรียกใช้ Rest API เพื่อให้ได้มาซึ่งข้อมูลในรูปแบบของ JSON ที่มีข้อมูล dummy ของ user จำนวน 10 user โดยเราจะใช้เฉพาะแค่ id, name และ email ในตัวอย่างนี้

สร้าง CardList.js

• ใน constructor ให้ระบุ state ที่มีชื่อว่า cats ที่เป็น array (บรรทัดที่ 5–10)
• เราจะใช้ method componentDidMount เพื่อเรียกข้อมูลจาก Rest API https://jsonplaceholder.typicode.com/users และบันทึกลงใน state cats (บรรทัดที่ 12–16)
• แสดง Cat component ตามจำนวนของข้อมูลใน state cats ที่เป็น array โดยกำหนด Props ดังต่อไปนี้ key, id, name และ email เพื่อส่งค่าของแต่ละสมาชิกใน array เข้าไปใน CatCard component (เริ่มตั้งแต่บรรทัดที่ 18 เป็นต้นไป)

แก้ไข CatCard.js เพื่อใช้ Props {name, email, id} ที่ถูกส่งค่ามาให้ CardList component.

แก้ไข App.js เพื่อเพิ่ม CardList component แทน CatCard (บรรทัดที่ 3 และ 20)

ผลลัพธ์:

เพิ่ม Input สำหรับค้นหาน้องแมว

แก้ไข App.js เพื่อเพิ่ม Input Component ของ react-base:

• เพิ่มการ import Components (Item, Icon และ Input) จาก native-base (บรรทัดที่ 2)
• เพิ่ม state searchfield (บรรทัดที่ 9)
• เพิ่มตัวแปร searchfield ที่ผูกกับ state ในชื่อเดียวกัน
• เพิ่ม Input component โดยใช้ onChangeText เพื่อแก้ไขค่า state searchfield เมื่อค่าของ Input มีการเปลี่ยนแปลง (บรรทัดที่ 24–27)
• ส่งค่าของ searchfield เข้าไปใน CardList component (บรรทัดที่ 30)

แก้ไข CardList.js:

• เพิ่ม state searchfield (บรรทัดที่ 9)
• เพิ่ม componentDidUpdate เพื่ออัพเดทค่าของ state searchfield จาก props searchfield
• เพิ่มตัวแปร filteredCats ที่เป็นการ filter ข้อมูลแมวด้วยจากชื่อของแมวด้วยค่าจาก searchfield (บรรทัดที่ 29–31)
• ไล่ลูป filteredCats เพื่อแสดง Cat component หลาย ๆ component (เริ่มตั้งแต่บรรทัดที่ 34)

ผลลัพธ์ที่ได้คือสามารถค้นหาน้องแมวจากชื่อได้แล้ว 😻

จบไปแล้วครับกับพื้นฐานการพัฒนา Mobile App ด้วย React Native ง่ายมาก ๆ ครับ ไว้ถ้ามีโอกาสจะมาเพิ่มเติมในส่วนของ React Redux ที่จะทำให้การจัดการ state ไม่งงมากนะครับ 555

สามารถดาวน์โหลด source code ของบทความได้จาก link ด้านล่างนะครับ

KarnYong/cat-friends-react-native

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