Home / Developer  / Android Developer  / เขียนแอพ Android เรียก JSON Web service แสดงบน ListView

เขียนแอพ Android เรียก JSON Web service แสดงบน ListView

บทเรียนเบื้องต้นสำหรับผู้พัฒนาแอพพลิเคชัน Android กับการใช้งาน ListView แสดงข้อมูลจาก Web Service รูปแบบ JSON มาใช้งานสำหรับผู้เริ่มต้น บน Android Studio

เราจะทดสอบโปรเจ็คนี้โดยการเขียนภาษา PHP ร่วมกับ MySQL เพื่อ Echo ค่าของ PHP ออกมาเป็น JSON ครับ ให้เตรียมฐานข้อมูลโดยใช้ SQL Command ต่อไปนี้

เป็น Table ที่ชื่อว่า “Movie” นั่นเองครับ ให้ใส่ข้อมูลลงไปสัก 2-3 Row ครับ

Screen Shot 2558-03-29 at 10.09.54 PM

รูปแบบของ Web Service ที่เราจะใช้ คือ JSON ซึ่งก็ไม่ต่างจาก XML แบบเก่าๆ หรอกครับ ลองเปรียบเทียบรูปแบบดูจะเห็นว่า JSON จะเขียนเรียกเป็น Key ง่ายกว่าแค่นั้นเอง

Screen Shot 2558-03-29 at 10.11.35 PM

ต่อมาเป็นคำสั่ง PHP สำหรับ Echo ค่าในตาราง MySQL ออกมาเป็น JSON ครับให้เขียนตามนี้

ให้ทดสอบโดยการอัพโหลด ไฟล์นี้ไปบน Host ของเราแล้วลองเรียกดูเราจะเห็นว่า มันแสดงผลเป็น Key Value แบบ JSON เรียบร้อย

Screen Shot 2558-03-21 at 10.16.10 AM

หากใช้ Chrome ลอกโหลด Add-on ที่ชื่อ JSON View ดูครับ จะแสดงผลได้ดังภาพข้างบน

Screen Shot 2558-03-21 at 10.17.15 AM

https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc

เปิด Android Studio ขึ้นมาครับ แล้วนำ ListView มาวางบน Layout

Screen Shot 2558-03-21 at 10.19.51 AM

ให้เราสร้างไฟล์ Layout เพิ่มมาอีกไฟล์ชื่อว่า activity_colums.xml ครับ ไว้แสดงผลของ แถวที่จะปรากฏบน ListView หลังจากนั้นให้เปิดไฟล์ activity_main.xml ขึ้นมาใส่ code ดังนี้ครับ

ตามด้วยเปิดไฟล์ acivity_column.xml ขึ้นมาครับ ใส่ code นี้ลงไป

ซึ่งจะมีค่า ID ที่ใช้งานอยู่ 2 ตัวคือ articleID ไว้เก็บ ID จาก JSON และ articleTitle ไว้เก็บค่า Title จาก JSON เช่นกันครับ

ต่อมาไปที่ โฟลเดอร์ Manifest หาไฟล์ AndroidManifest.xml ครับให้เราเพิ่ม Permission ในการต่ออินเทอร์เน็ตลงไป

Screen Shot 2558-03-21 at 10.47.10 AM

 

ใส่ลงไปตามภาพครับ ส่วนของ uses-permission

Screen Shot 2558-03-21 at 10.45.43 AM

เปิดไฟล์ MainActivity.java ขึ้นมา เพิ่ม import ส่วน Header File ดังนี้

เขียนคำสั่ง JSON กับ ListView เพิ่มเข้ามา ก่อนอื่นให้สร้างเมธอดฟังก์ชันมาใหม่ชื่อ getJSON();

เป็นการเรียก entity ของ key value มาเก็บไว้ในตัวแปรสำหรับแสดงค่า โดยใช้ HTTP Request มาใช้เรียก API ของ Webservices ผ่าน status_code ที่เราทราบกันดีว่า 200 คือโอเค

เสร็จแล้วก็เขียนฟังก์ชันเพิ่ม ใน onCreate();

ภาพรวมของ Source code จะเป็นดังนี้ครับ

ทดสอบรันตัวโปรเจ็คของเราหน่อยดีกว่า

Screen Shot 2558-03-29 at 10.29.54 PM

เรียบร้อย เราสามารถใช้ JSON array ร่วมกับ Intent Activity ให้ส่งค่าเมื่อกด ListView ได้ต่อไปนะครับ ลองทดสอบทำดูครับ

บทเรียน Web Services ก็คงจบแค่นี้

Comments

daydevthailand@gmail.com

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

Review overview
NO COMMENTS

Sorry, the comment form is closed at this time.