API แสดงข้อมูล Native Base

App Workshop 3 : API แสดงข้อมูล Native Base

API ที่ใช้แสดงข้อมูลด้วย NativeBase ใน React Native จะ เป็นการ ดึงข้อมูลจาก API ภายนอกก่อน จากนั้นจึงนำข้อมูลเหล่านั้นมาแสดงผล ผ่านคอมโพเนนต์ของ NativeBase. ตัวอย่างเช่น คุณสามารถใช้ API อย่าง Coffee API เพื่อดึงรายการข้อมูลกาแฟ แล้วนำมาแสดงผลเป็นรายการ (list) หรือตารางโดยใช้คอมโพเนนต์ของ NativeBase เช่น FlatList หรือ ScrollView ที่ปรับแต่งได้

ขั้นตอนการใช้งาน
ดึงข้อมูลจาก API:

ใช้ฟังก์ชันหรือไลบรารีสำหรับดึงข้อมูล เช่น fetch หรือ axios เพื่อเรียกข้อมูลจาก API ภายนอก (เช่น Coffee API)

ข้อมูลที่ได้มักจะอยู่ในรูปแบบ JSON ซึ่งต้องนำมาประมวลผลต่อ

นำข้อมูลมาแสดงผลด้วย NativeBase:

นำข้อมูลที่ได้จาก API มาจัดเก็บในสถานะ (state) ของคอมโพเนนต์ React Native

ใช้คอมโพเนนต์ NativeBase เช่น FlatList หรือ ScrollView เพื่อแสดงผลข้อมูลเป็นรายการ

ภายใน FlatList หรือ ScrollView ให้ใช้คอมโพเนนต์ NativeBase อื่นๆ เช่น Text, Image, Box เพื่อสร้างองค์ประกอบย่อยสำหรับแต่ละรายการข้อมูล

คุณสามารถปรับแต่งการจัดวางและรูปลักษณ์ของแต่ละรายการได้ด้วยคุณสมบัติ (props) ของคอมโพเนนต์ NativeBase

ทดลองสร้างตาราง และดึงข้อมูล API

1. สร้างตารางสำหรับเก็บข้อมูล

1.1 เปิด XAMPP เพื่อเปิดการใช้งานฐานข้อมูล phpmyadmin

1.2 เปิด phpmyadmin ที่ Database ของคุณ สร้างตารางชื่อ products (สามารถ Download file ตารางที่สร้างสำเร็จแล้ว ได้จากไดร์ฟ ที่โฟลเดอร์ใบงาน)

2. สร้าง Project เพื่อเรียกใช้ API (ข้อมูลสินค้าในตาราง products ที่สร้างจากข้อ 1.)

2.1 เปิด VS code ขึ้นมา และ Open Folder api (สามารถ Download folder api ที่สร้างสำเร็จแล้ว ได้จากไดร์ฟ ที่โฟลเดอร์ใบงาน)

2.2 ติดตั้งตัวทรัพยากรที่เกี่ยวข้องกับการเรียกใช้ api (express ดูได้จากใบงานก่อนหน้านี้ กำหนด port เป็น 8888)

3. ทดลองเรียกใช้ App เรียกดูข้อมูลในตาราง

3.1 ทดลองเรียกใช้ app ดูข้อมูลในตาราง ผลลัพธ์ดังนี้