เขียนแอป Android ด้วย Kotlin การอ่าน JSON Parser ผ่าน Volley

Volley Android เป็น Library ช่วยทำ Network Call ผ่านแอปพลิเคชันระบบปฏิบัติการ Android นับว่าเป็นตัวในการพัฒนาแอปพลิเคชัน Android เราสามารถทำงานฟังก์ชันพวก Network Call ได้ง่าย โดยการ Request ผ่านโปรโตคอล HTTP Volley GET, POST, PUT หรือ DELETE ประหยัดเวลาในการทำ JSON Parser ได้มากอีกทั้งมี module ในการทำ Cache (อาจจะเขียนไม่สั้นเท่า Picasso)

แหล่งเรียนรู้เพิ่มเติม: https://developer.android.com/training/volley

มาลองดูการทำงานเบื้องต้นของมันดีกว่าสำหรับใครที่เป็นมือใหม่ต้องการเรียก JSON Parser แบบ JSON Array นะครับ ให้ทำการ New Project ขึ้นมาตั้งชื่อว่า VolleyJSON

สร้าง Project Template เป็น Empty Activity ขึ้นมาแล้วตั้งชื่อ Project

การเรียกใช้ Library ของ Volley นั้นทำได้สบายเลยแค่เราไปที่ Module gradle แล้วทำการเพิ่มเข้าไป

ไปที่ dependencies ใส่บรรทัดนี้เข้าไปข้างในเพิ่มเติมเพื่อจะได้ทำงานร่วมกับ Library ของ Volley ได้:

implementation 'com.android.volley:volley:1.1.1'

ทำการ Sync Gradle ให้เรียบร้อย ไปเปิด Permission ของ INTERNET ใน AndroidManiFest.xml

<uses-permission android:name="android.permission.INTERNET"/>

หลังจากนั้นไปสร้าง ID ให้กับ TextView ตัวแรกของเราชื่อว่า “label”

XML เป็นแบบนี้:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/label"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginRight="8dp"
        android:text="Hello World!"
        android:textAllCaps="true"
        android:textColor="@color/colorPrimary"
        android:textSize="16sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.051"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.032" />

</androidx.constraintlayout.widget.ConstraintLayout>

กลับไปที่ MainActivity.kt กันดีกว่า เพิ่ม Import ส่วน Header ดังนี้:

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.TextView
import com.android.volley.Request
import com.android.volley.Response
import com.android.volley.toolbox.StringRequest
import com.android.volley.toolbox.Volley
import org.json.JSONArray
import org.json.JSONObject

เราจะทำการ เรียก API ที่ผมทำไว้เล่นๆ ของ AI for Thai ของ Nectec คือ URL ที่ต้อง Response เป็นแบบนี้นะครับ:

{
OK: true,
filename: "./uploads/2020/05/11/20200511102916.png",
objects: [
    {
     label: "ข้าวมันไก่ต้ม",
     rank: "0",
     result: "ข้าวมันไก่ต้ม",
     score: "0.9453102"
    }
 ]
}

เราจะดึง Parser ของ key ชื่อ objects เอาค่า label ที่ชื่อ “ข้ามมันไก่ต้ม” มาใช้กับ TextView ที่ ID label เหมือนกัน ดังนั้นไปที่ OnCreate() เพิ่มคำสั่งต่อไปนี้:

var textView: TextView? = null
        textView = findViewById<TextView>(R.id.label)

        val queue = Volley.newRequestQueue(this)
        val url: String = "https://test.com/api/ai.php?source=2020-05-08-09-14-43.178000_img.jpg"

        val requestString = StringRequest(
            Request.Method.GET, url,
            Response.Listener<String> { response ->

                var responseString = response.toString()
                val jsonObject: JSONObject = JSONObject(responseString)
                val jsonArray: JSONArray = jsonObject.getJSONArray("objects")
                var str_label: String = ""
                for (i in 0 until jsonArray.length()) {
                    var jsonInner: JSONObject = jsonArray.getJSONObject(i)
                    str_label = str_label + "\n" + jsonInner.get("label")
                }
                textView!!.text = "response : $str_label "
            }, Response.ErrorListener { textView!!.text = "Didn't work!" })
            queue.add(requestString)

ส่วนของ url ของใครของมันนะครับไปแก้ไขกันเองเลย

ดังนั้นไฟล์ MainActivity.kt จะเป็นดังนี้:

package com.daydev.volleykotlin

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.TextView
import com.android.volley.Request
import com.android.volley.Response
import com.android.volley.toolbox.StringRequest
import com.android.volley.toolbox.Volley
import org.json.JSONArray
import org.json.JSONObject

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        var textView: TextView? = null
        textView = findViewById<TextView>(R.id.label)

        val queue = Volley.newRequestQueue(this)
        val url: String = "https://test.com/api/ai.php?source=2020-05-08-09-14-43.178000_img.jpg"

        val requestString = StringRequest(
            Request.Method.GET, url,
            Response.Listener<String> { response ->

                var responseString = response.toString()
                val jsonObject: JSONObject = JSONObject(responseString)
                val jsonArray: JSONArray = jsonObject.getJSONArray("objects")
                var str_label: String = ""
                for (i in 0 until jsonArray.length()) {
                    var jsonInner: JSONObject = jsonArray.getJSONObject(i)
                    str_label = str_label + "\n" + jsonInner.get("label")
                }
                textView!!.text = "response : $str_label "
            }, Response.ErrorListener { textView!!.text = "Didn't work!" })
            queue.add(requestString)
    }
}

ทดสอบดูว่าแอปพลิเคชัน Android Kotlin ของเราทำงานได้ไหม Run เลยครับมาดูกัน