Análisis de JSON en Android usando Volley Library con Kotlin

JSON es una notación de objetos de JavaScript que es un formato para intercambiar los datos del servidor. JSON almacena los datos en un formato ligero. Con la ayuda de JSON, podemos acceder a los datos en forma de JsonArray, JsonObject y JsonStringer. En este artículo, veremos específicamente la implementación de JsonObject usando Volley en Android usando Kotlin. Crearemos una aplicación simple en la que analizaremos los datos de una URL utilizando la biblioteca  Volley en Kotlin.

Nota : si está buscando analizar los datos JSON usando la biblioteca Volley en Android usando Java . Consulte el siguiente artículo: JSON Parsing en Android usando Volley Library en Java

Implementación paso a paso

Paso 1: crea un nuevo proyecto en Android Studio

Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Tenga en cuenta que seleccione Kotlin como lenguaje de programación.

Paso 2: agregue la dependencia a continuación en su archivo build.gradle

A continuación se muestra la dependencia de Volley que usaremos para obtener los datos de la API. Para agregar esta dependencia, vaya a la aplicación > Gradle Scripts > build.gradle(app) y agregue la dependencia a continuación en la sección de dependencias. Hemos utilizado la dependencia de Picasso para la carga de imágenes desde la URL.   

// below line is used for volley library
implementation ‘com.android.volley:volley:1.2.0’

// below line is used for image loading library
implementation ‘com.squareup.picasso:picasso:2.71828’

Después de agregar esta dependencia, sincronice su proyecto y ahora muévase hacia la parte AndroidManifest.xml.  

Paso 3: agregar permisos a Internet en el archivo AndroidManifest.xml

Vaya a la aplicación > AndroidManifest.xml y agréguele el siguiente código. 

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

Paso 4: trabajar con el archivo activity_main.xml

Vaya a la aplicación > res > diseño > actividad_principal.xml y agregue el siguiente código a ese archivo. A continuación se muestra el código para el archivo activity_main.xml. 

<?xml version="1.0" encoding="utf-8"?>
<!--on below line we are creating a swipe to refresh layout-->
<ScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fillViewport="true"
    android:orientation="vertical"
    tools:context=".MainActivity">
 
    <RelativeLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
         
          <!--on below line we are creating a simple card view-->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_above="@id/idBtnVisitCourse"
            android:orientation="vertical">
 
            <!--on below line we are creating a image view-->
            <ImageView
                android:id="@+id/idIVCourse"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="5dp" />
 
            <!--on below line we are creating our text view-->
            <TextView
                android:id="@+id/idTVCourseName"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="4dp"
                android:padding="4dp"
                android:textColor="@color/black"
                android:textSize="20sp"
                android:textStyle="bold" />
 
            <!--on below line we are creating one more text view-->
            <TextView
                android:id="@+id/idTVPreq"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="4dp"
                android:padding="4dp"
                android:textColor="@color/black"
                android:textStyle="bold" />
 
            <!--on below line we are creating a
                text view for description-->
            <TextView
                android:id="@+id/idTVDesc"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_margin="4dp"
                android:padding="4dp"
                android:textColor="@color/black" />
 
        </LinearLayout>
 
        <!--on below line we are creating a progress bar-->
        <ProgressBar
            android:id="@+id/idLoadingPB"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:visibility="visible" />
 
        <!--on below line we are creating a
             button to visit our course-->
        <Button
            android:id="@+id/idBtnVisitCourse"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_margin="4dp"
            android:padding="3dp"
            android:text="Visit Course"
            android:textAllCaps="false"
            android:visibility="gone" />
 
    </RelativeLayout>
   
</ScrollView>

Paso 5: trabajar con el archivo MainActivity.kt

Vaya al archivo MainActivity.java y consulte el siguiente código. A continuación se muestra el código del archivo MainActivity.kt. Se agregan comentarios dentro del código para comprender el código con más detalle.

package com.gtappdevelopers.kotlingfgproject
 
import android.content.Intent
import android.net.Uri
import android.os.Bundle
import android.util.Log
import android.view.View
import android.widget.*
import androidx.appcompat.app.AppCompatActivity
import com.android.volley.Request
import com.android.volley.RequestQueue
import com.android.volley.toolbox.JsonObjectRequest
import com.android.volley.toolbox.Volley
import com.squareup.picasso.Picasso
 
class MainActivity : AppCompatActivity() {
 
    // on below line we are creating variables
    // for our text view, image view and progress bar
    lateinit var courseNameTV: TextView
    lateinit var courseDescTV: TextView
    lateinit var courseReqTV: TextView
    lateinit var courseIV: ImageView
    lateinit var visitCourseBtn: Button
    lateinit var loadingPB: ProgressBar
 
    // on below line we are creating a variable for our url.
    var url = "https://jsonkeeper.com/b/8RFY"
 
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
         
        // on below line we are initializing our variable with their ids.
        courseNameTV = findViewById(R.id.idTVCourseName)
        courseDescTV = findViewById(R.id.idTVDesc)
        courseReqTV = findViewById(R.id.idTVPreq)
        courseIV = findViewById(R.id.idIVCourse)
        visitCourseBtn = findViewById(R.id.idBtnVisitCourse)
        loadingPB = findViewById(R.id.idLoadingPB)
 
        // on below line we are creating a variable for our
        // request queue and initializing it.
        val queue: RequestQueue = Volley.newRequestQueue(applicationContext)
 
        // on below line we are creating a variable for request
        // and initializing it with json object request
        val request = JsonObjectRequest(Request.Method.GET, url, null, { response ->
 
            // this method is called when we get a successful response from API.
 
            // we are setting the visibility of progress bar as gone.
            loadingPB.setVisibility(View.GONE)
             
            // on below line we are adding a try catch block.
            try {
                // on below line we are getting data from our response
                // and setting it in variables.
                val courseName: String = response.getString("courseName")
                val courseLink: String = response.getString("courseLink")
                val courseImg: String = response.getString("courseimg")
                val courseDesc: String = response.getString("courseDesc")
                val coursePreq: String = response.getString("Prerequisites")
 
                // on below line we are setting our
                // data to our text view and image view.
                courseReqTV.text = coursePreq
                courseDescTV.text = courseDesc
                courseNameTV.text = courseName
 
                // on below line we are setting
                // image view from image url.
                Picasso.get().load(courseImg).into(courseIV)
 
                // on below line we are changing
                // visibility for our button.
                visitCourseBtn.visibility = View.VISIBLE
 
                // on below line we are adding
                // click listener for our button.
                visitCourseBtn.setOnClickListener {
 
                    // on below line we are opening
                    // a intent to view the url.
                    val i = Intent(Intent.ACTION_VIEW)
                    i.setData(Uri.parse(courseLink))
                    startActivity(i)
                }
 
            } catch (e: Exception) {
                // on below line we are
                // handling our exception.
                e.printStackTrace()
            }
 
        }, { error ->
            // this method is called when we get
            // any error while fetching data from our API
            Log.e("TAG", "RESPONSE IS $error")
            // in this case we are simply displaying a toast message.
            Toast.makeText(this@MainActivity, "Fail to get response", Toast.LENGTH_SHORT)
                .show()
        })
        // at last we are adding
        // our request to our queue.
        queue.add(request)
    }
}

Ahora ejecute su aplicación para ver el resultado. 

Producción: