App Workshop 3 : API แสดงข้อมูล Native Base
API ที่ใช้แสดงข้อมูลด้วย NativeBase ใน React Native จะ เป็นการ ดึงข้อมูลจาก API ภายนอกก่อน จากนั้นจึงนำข้อมูลเหล่านั้นมาแสดงผล ผ่านคอมโพเนนต์ของ NativeBase. ตัวอย่างเช่น คุณสามารถใช้ API อย่าง Coffee API เพื่อดึงรายการข้อมูลกาแฟ แล้วนำมาแสดงผลเป็นรายการ (list) หรือตารางโดยใช้คอมโพเนนต์ของ NativeBase เช่น FlatList หรือ ScrollView ที่ปรับแต่งได้
ขั้นตอนการใช้งาน
ดึงข้อมูลจาก API:
นำข้อมูลมาแสดงผลด้วย NativeBase:
ทดลองสร้างตาราง และดึงข้อมูล API
1. สร้างตารางสำหรับเก็บข้อมูล
1.1 เปิด XAMPP เพื่อเปิดการใช้งานฐานข้อมูล phpmyadmin
(Capture หน้าจอ)
1.2 เปิด phpmyadmin ที่ Database ของคุณ Import ตาราง ชื่อ products
(สามารถ Download file ตารางที่สร้างสำเร็จแล้ว ได้จากไดร์ฟ ที่โฟลเดอร์ Example)
(Capture หน้าจอ)
2. สร้าง Project เพื่อเรียกใช้ API (ข้อมูลสินค้าในตาราง products ที่สร้างจากข้อ 1.)
2.1 เปิด VS code ขึ้นมา และ Open Folder api
(สามารถ Download folder api ที่สร้างสำเร็จแล้ว ได้จากไดร์ฟ ที่โฟลเดอร์ Example)
2.2 ติดตั้งตัวทรัพยากรที่เกี่ยวข้องกับการเรียกใช้ api
(express ดูได้จากใบงานก่อนหน้านี้เรื่อง ทดลองเรียกใช้ API จาก DB แล้วกำหนด port จาก 8888 เป็น 6749)
ในข้อนี้ให้ทำการ Capture หน้าจอ ขั้นตอนการทำแบบละเอียด
(คะแนน workshop นี้ รวมทั้งสิ้น 30 คะแนน)
3. ทดลองเรียกใช้ App เรียกดูข้อมูลในตาราง
3.1 ทดลองเรียกใช้ app ดูข้อมูลในตาราง ผลลัพธ์ดังนี้
(อัดคลิปหน้าจอตามตัวอย่างคลิปนี้ ตั้งชื่อเป็น appWorkshop3 และส่งคลิปนี้บนไดรฟ์)