web analytics

Flutter : การเรียก RESTful API กับ JSON ใน Flutter

สวัสดีผู้อ่านครับ ไม่ได้เขียนบล็อกสักพักเนื่องจากติดงานแล้วก็หลายๆอย่าง บล็อกนี้จริงๆค้างคามาสักพัก โดยบล็อกนี้จะพาไปลองเล่นเรื่องการ call RESTful API ไปที่ server แล้วเราจะนำข้อมูลมาใช้ใน Flutter ซึ่งเรื่องนี้สำคัญมาก เพราะแทบทุกแอปในปัจจุบันล้วนต้อง call API ทั้งสิ้น มาลองใช้งานกัน

เริ่มต้น

คงไม่ต้องอธิบายว่า API , RESTful , JSON คืออะไร เพราะสามารถอ่านได้จาก internet นะ เริ่มจาก สร้าง Flutter Project ให้พร้อม

เพิ่ม Dependencies

การ call API หรือส่ง request ไปยัง server เราจะใช้ package ชื่อว่า http ดังนั้นให้เพิ่มมันใน pubspec.yaml

ลองเรียกใช้ API

ในตัวอย่างนี้ผมจะเริ่มจาก API ง่ายๆ คือ API ส่มรูปของสุนัข ซึ่งเราสามารถเรียก http get ธรรมดาๆ ตามลิงค์นี้

https://dog.ceo/api/breeds/image/random

สิ่งที่ server ตอบกลับมาคือ JSON ที่มีโครงสร้างง่ายๆ คือ มี key ที่ชื่อว่า message ที่ข้างในมี url ของรูปภาพ

ต่อมา มาเขียนที่ Flutter บ้าง เราจะต้องสร้าง class สำหรับเรียก get API ดังกล่าว ซึ่งในที่นี้ ผมใช้ชื่อว่า DogService วิธีการใช้ก็ง่ายมากแค่ เรียก http.get(url) ได้เลย จากนั้นลองปริ้นผลลัพธ์ออกมา

ลองนำ DogService ไปเรียกใช้ใน HomePage ที่ initState เพื่อดูว่า แอปได้เรียก API ตามที่เราตั้งใจไว้หรือไม่

มาแล้ว ถ้า print JSON ออกมาแบบนี้แสดงว่า http ของเราทำงานได้

สร้าง Data Access Object

ขั้นตอนต่อมา คือเราต้องสร้างคลาสที่รองรับการแปลง JSON มาเป็น dart เรียกว่า Data access object หรือ dao ซึ่งใน JSON 1 ไฟล์ อาจจะมีหลาย object ภายใน ดังนั้นอาจทำให้เรามี dao คลาสไปด้วย

โดยภายใน dao จะทำงานหลักๆ คือแปลง json เป็น object กับแปลง object ไปเป็น json ซึ่งตัว JSON จริงๆมันคือ String แต่การนำมาใช้ใน dart เราจะใช้ในรูปแบบ Map ที่มี key , value ก่อน สังเกต code ด้านล่าง fromJson ก็แค่ดึงค่าจาก map ออกมาใส่ตัวแปรใน object ส่วน toJson ก็ทำกลับกัน

ซึ่งคลาส dao ที่ผมบอก เราจะเขียนเองก็ได้ถ้าเราเห็น JSON แต่ว่าก็มีเครื่องมือช่วยแปลง JSON มาเป็น dart dao ได้ง่ายๆ แค่ copy JSON ไปวางแล้วกด ตกลง

https://javiercbk.github.io/json_to_dart/

ดังนั้น ไม่ว่า JSON จะซับซ้อนแค่ไหน เราก็สามารถสร้าง dao ได้ง่ายๆ ซึ่ง JSON ก็มีแค่ object กับ list ซึ่งแบบ list เดี๋ยวผมจะพาไปทำในตัวอย่างถัดไป

เรียกใช้ API และ Dao

หลังจากได้ dao แล้วเราก็นำ dao มาใช้งาน โดยการการนำ json มา decode ได้ Map จากนั้นก็เรียก fromJson จะได้ Dao

สังเกตว่า method นี้จะต้อง return เป็น Future และเป็น async เพื่อว่า method นี้จะต้องรอผลลัพธ์ตอบกลับโดยไม่รู้เวลาที่แน่นอน

ลองรัน Url ยังมาอยู่นะ

แสดงรูปภาพ

ต่อมา เราลองเรียก API แล้วเอา url รูปภาพมาแสดงในแอป วิธีการคือใช้ Widget ที่ชื่อว่า FutureBuilder หน้าที่ของมันคือเรียก method แบบ async จากนั้นก็ return Widget ออกมา

เราก็แค่กำหนดการเรียก service randomDog ของเราให้ FutureBuilder พอมันโหลดเสร็จเราจะได้ snapshot ซึ่งในนั้นมี data อยู่ ซึ่งก็คือ dao ของเรานั่นเอง เราก็เอา
dao มาใช้

ลองรัน

เพิ่มปุ่ม refresh

เพิ่มปุ่ม action ด้านบนขวาให้กดแล้ว สุ่มภาพอื่นๆมา ก็ไม่มีอะไรมากแค่เรียก setState ก็จบแลย

Plugin

อีกวิธีนึงของการสร้าง dao คือใช้ plugin ใน Android Studio โดยผมจะลองเอา API อีกตัวมาใช้ คือ API สำหรับสุ่มคำคม

https://rapidapi.com/andruxnet/api/random-famous-quotes?endpoint=592c903de4b05d38a42e9e3e

ไปที่หน้า Setting > Plugin > Browse Repositories ค้นหาคำว่า dart json จะเจอ plugin ตัวนึง คือ Dart Json Serialization Generator ให้กดติดตั้งซะ

จากนั้นเราก็มาเขียน คลาสของเราคร่าวๆ ว่ามีตัวแปรอะไรบ้าง

จากนั้นกด Alt + Ins เลือก fromJson factory มันก็จะสร้าง fromJson ให้เลย

อีกตัวก็ทำหมือนกัน เลือก toJson ง่ายใช่มัยล่ะ

เราก็จะได้ dao ออกมาเหมือนกัน แต่วิธีนี้จะต้องระบุตัวแปรลงไปในคลาสก่อน ก็อาจจะเหมาะกับการใช้การแปลง json แบบในแอปของเราเอง

จากนั้นก็เขียน Service ให้เรียกใช้ API สังเกตว่ารอบนี้ api รายชื่อคำคมที่ส่งมาจาก RapidAPI มันจะเป็น list มานะ ดังนั้นเราต้องใช้ list.map เพื่อแปลง json แต่ละตัวเป็น object

ในหน้า Home ก็ใช้ท่าเดิมคือ FutureBuilder นำ dao มาแสดงค่า

ได้แล้วจ้า หน้าจอสุ่มภาพสุนัข กับสุ่มคำคม

สรุป

สรุปการใช้ RESTful API กับ Flutter จะใช้ package ชื่อ http สิ่งที่ได้กลับมาคือ JSON ที่เป็น String เราก็ทำการ decode แล้วจะได้ Map<> ขั้นตอนถัดมาคือเอา Map ไปแปลงไปเป็น Dao (Data Access Object) ให้ได้ โดยวิธีการสร้างก็มีทั้งแบบใช้เว็บช่วย generate กับแบบใช้ Plugin จากนั้นเราก็เอา Dao ไปใช้งานต่อไป