Android Kotlin

Android Kotlin การดึงข้อมูล JSON Parser เข้า RecyclerView ผ่าน RetroFit2

เรามาลองดึง JSON ทำ JSON Parser เข้า Android Kotlin ทำงานร่วมกับ RecyclerView ผ่าน RetroFit2 กัน

บทเรียนการทำ JSON Parser ด้วยภาษา Kotlin บนแอปพลิเคชัน Android อย่างง่ายสำหรับมือใหม่ด้วย RetroFit2 ของ Square

ถ้าพูดด้ยเรื่องของการทำ JSON Parser ก็จะมีในใจอยู่ 2 ตัวคือ Volley และ RetroFit เจ้าของเดียวกับ Picasso อยู่ที่ว่าชอบตัวไหนอย่าง Volley นั้น Sync Gradle แค่ 1 บรรทัดส่วน RetroFit2 ก็จะ sync หลายบรรทัดหน่อย ตัวอย่างนี้เลยจะลองมาดูที่ RetroFit2 ก่อน

เปิด New Project ขึ้นมาเลยครับตั้งชื่อไรก็ได้, ใช้ Template Activity เป็น Empty Activity ได้เลย ระหว่างนี้เรามาดู JSON ของเราหน่อยดีกว่า ผมได้ทำ API ง่ายๆ รีวิวหนังไว้ให้แล้วที่ URL: https://antchatbot.firebaseio.com/movies.json

ซึ่ง Format JSON จะเป็นดังนี้

เราจะทำ List บน RecyclerView กันโดยใช้ Key เท่าที่จำเป็นคือ id, title, thumbnail และ excerpt ครับผม

เอาล่ะเปิด Project Solution หลังจากนั้นให้ทำการเลือก Module Gradle ครับ

ทำการ Sync Gradle ดังนี้:

ไหนๆ ก็เผื่อ ใช้ RecyclerView และ CardView แล้วก็ทำการ Sync Gradle เผื่อไปเลยไม่ต้องไปดาวน์โหลดบนหน้า Layout หรอกเสียเวลา

โอเคครับเมื่อ sync gradle เสร็จแล้วให้เราไปสร้าง Model กันหน่อย

โดยคลิกเลือก New Kotlin Class ขึ้นมาชื่อว่า: Movies จะได้ไฟล์ Movies.kt

ให้เรากำหนด Data ของมันเลยครับ ตามนี้:

ดัง Key ตามที่เราเลือกไว้เลยครับ, ต่อมาให้เราสร้าง Kotlin Class/File อีกรอบแต่เลือกเป็น Interface นะครับตั้งชื่อว่า INetworkAPI

ใส่ Code ของ Interface ดังนี้:

@GET นั้นจินตนาการว่ามันคือ API Method เรียกแต่ละ JSON หรือแต่ละชุดเช่น https://api.com เราต้องการ

  • เรียก https://api.com/users เราก็ใส่แค่ “/users”
  • หรือ https://api.com/posts ก็เลือก “/posts”

ตัวอย่างที่เราจะทำคือ: https://antchatbot.firebaseio.com/movies.json เราก็จะเลือกแค่ “movies.json” เพื่อที่จะได้เรียก url แค่ “https://antchatbot.firebaseio.com/” ในหน้า MainActivity.kt นั่นเองครับ

ทีนี้อย่างที่เคยบอกว่า RecyclerView นั้นต้องใช้ Adapter ในการแปลงข้อมูล JSON มาเป็น Objects ให้ทำการสร้าง Class ใหม่ชื่อว่า MovieAdapter

ผมทำ Toast เวลาแตะที่ CardView จะเห็นว่ามี Alert บอกว่า id ของบทความคืออะไร

ส่วนของ ImageView นั้นเราใช้ Cache Handle จาก Picasso เจ้าเก่าครับ

ใน Code นั้นจะมีสีแดงมากมายนั่นคือ Layout ครับให้สร้าง Layout Resource File ใหม่ขึ้นมาคือ movie_item.xml ใส่ XML ดังนี้:

ต่อมาให้เราไปแก้ไข activity_main ครับให้สร้าง RecyclerView ลากเข้าไป

ตั้งชื่อว่า movie_list มี XML ดังนี้:

เปิด Class ของ MainActivity ขึ้นมาประกาศตัวแปรตามนี้:

ที่ OnCreate() ให้ใส่คำสั่งต่อไปนี้ครับ

url จะไปทำงานร่วมกับ Interface ชื่อ INetworkAPI ที่เรียก GET(“movie.json”) นั่นเอง, มาดูส่วนของ RetroFit กันหน่อย

นี่คือภาพรวมของ MainActivity.kt ครับ:

ไปที่ AndroidManiFest.xml ไปเปิด Permission ของ INTERNET

เสียบสาย USB แล้วลองทดสอบแอปของเราดูครับ:

ลองแตะที่ CardViewดูหน่อย:

มี Toast เด้งขึ้นมา แสดง id ของ API

เขียน Code ง่ายขึ้นทันที สำหรับคนที่กำลังทำ JSON Parser ร่วมกับ API ครับ ลองทำกันดูนะครับ

ปล. การใช้ RetroFit เรียก API ต้องใช้ SSL (https://) นะครับ

Tags

Banyapon Poolsawasd

อาจารย์ประจำสาขาวิชาการออกแบบเชิงโต้ตอบ และการพัฒนาเกม วิทยาลัยครีเอทีฟดีไซน์ & เอ็นเตอร์เทนเมนต์เทคโนโลยี มหาวิทยาลัยธุรกิจบัณฑิตย์ ผู้ก่อตั้ง บริษัท Daydev Co., Ltd, (เดย์เดฟ จำกัด)

Related Articles

Back to top button
Close
Close

Adblock Detected

เราตรวจพบว่าคุณใช้ Adblock บนบราวเซอร์ของคุณ,กรุณาปิดระบบ Adblock ก่อนเข้าอ่าน Content ของเรานะครับ, ถือว่าช่วยเหลือกัน