มาเรียก API กันเถอะ ซีรีย์ มาเล่น React Native กันเถอะ EP.3
และแล้วเราก็เดินทางมาถึง EP.3 กันแล้ว ในบทความนี้จะพูดถึงการเรียกใช้ API (Application Programming Interface) โดยจะเรียก API ของ https://www.coingecko.com/en ซึ่งเป็น API สำหรับการทดสอบในบทความนี้ โดยจะแสดงราคา Cryptocurrency กับ USA โดยเรียงมูลค่าจากมากไปน้อย
https://api/v3/coins/markets?vs_currency=usd&order=market_cap_descมาเริ่มกันเลยครับ อันดับแรกเราต้องศึกษาก่อนว่า API ที่เราใช้นั้นประกอบไปด้วยอะไรบ้าง โดยเราต้องลองเรียก API ดูเราสามารถใช้ Web Browser, curl, Post man หรืออื่น ๆ สำหรับผมของเรียกโดยใช้ Web Browser นะครับ ง่ายดีเพราะใช้แค่เรียกข้อมูลเฉย ๆ
หลังจากที่เราได้ดูเราก็เห็นว่าข้อมูลที่ถูกส่งออกมานั้นประกอบไปด้วยข้อมูลหลายอย่างแต่ที่เราจะโพกัสคือ id symbol name image และ current_price ที่เราจะนำมาแสดงที่แอปพลิเคชันเรา ก่อนอื่นเรามาออกแบบโดยหยาบ ๆ กันก่อนว่าเราจะแสดงอะไรบางเปิด draw.io มาเลยครับผม
หลังจากออกแบบแล้วมาเริ่มกัน ก่อนอื่นไปที่โฟร์เดอร์ components และสร้างไฟล์ชื่อ ListItem.tsx และเพิ่มโค้ดตามต่อไปนี้
หลังจากทำการสร้าง component แล้วต่อมานำ component ไปใช้งานต่อโดยนำไปแสดงใน FlatList ซึ่งจะทำการเรียก API ก่อนซึ่งจะใช้งาน fetch สำหรับการเรียก API โดยจะใช้ฟังค์ชัน useState เพื่อการเก็บค่า และ useEffect จะทำหน้าที่เรียกเมื่อเริ่มหน้า HomeScreen ขึ้น (โค้ดการเขียนเป็นแนวการใช้ React Hook) เมื่อข้อมูลได้พร้อมแล้วจะถูกนำไปอัพเดทสเตทและ List จะถูก Render ขึ้นมาแสดง โค้ดดังรูปด้านล่าง
สำหรับโค้ดตัวอย่างการเรียก API แบบง่าย ๆ เป็นอันเสร็จแล้วครับ สำหรับผมคิดว่าความรู้พื้นฐานทั้งสาม EP นั้นสามารถที่จะนำไปต่อยอดและนำไปใช้ได้ สำหรับ Source Code ตัวอย่างอยู่ในลิงค์นี้เลยครับ https://github.com/teerapon19/react-native-navigation-example
สำหรับ ซีรีย์ มาเล่น React Native กันเถอะ ขอฝากไว้ 3 episodes นี้ก่อนนะครับ ครั้งหน้าอาจจะมีบทความอื่น ๆ ที่อาจจะมีหลาย ๆ เรื่อง ช่วงนี้ขี้เกียจก็เลยไม่รู้จะหาอะไรทำให้หายขี้เกียจเลยตัดสินใจเขียนบทความนี้ขึ้นครับ (ฮ่า ๆ)
สุดท้ายนี้ผมหวังว่าบทความนี้จะมีประโยชน์ทั้งผู้ที่หลงเข้ามาอ่านและตั้งใจเข้ามาอ่าน ถ้าเจอคำผิดหรือข้อมูลพลาดอื่น ๆ แจ้งได้เลยนะครับ ขอบคุณครับผม
