Android – JSON Parsing usando Retrofit Library con Kotlin

JSON es un formato con el que podemos intercambiar los datos del servidor dentro de nuestra aplicación o un sitio web. Para acceder a estos datos desde el servidor dentro de las aplicaciones de Android. Hay varias bibliotecas disponibles, como Volley y Retrofit. En este artículo, veremos JSON Parsing en aplicaciones de Android usando Kotlin.  

Nota : si está buscando implementar JSON Parsing en Android usando Retrofit en lenguaje Java. Consulte el siguiente artículo: JSON Parsing en Android utilizando Retrofit Library con 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 dependency for using retrofit.
implementation 'com.squareup.retrofit2:retrofit:2.9.0'
implementation 'com.squareup.retrofit2:converter-gson:2.5.0'

// below dependency for using picasso image loading library
implementation 'com.squareup.picasso:picasso:2.71828'

Después de agregar esta dependencia, simplemente sincronice su proyecto para instalarlo. 

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_margin="20dp" />
 
            <!--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: Crear una clase modal para almacenar nuestros datos

Vaya a la aplicación > java > el nombre del paquete de su aplicación > haga clic con el botón derecho en él > Nuevo > clase Kotlin y asígnele el nombre RecyclerData y agréguele el siguiente código. Se agregan comentarios dentro del código para comprender el código con más detalle.

package com.gtappdevelopers.kotlingfgproject
 
data class CourseDataModal(
    // on below line creating variables for our modal class
    // make sure that variable name should be same to
    // that of key which is used in json response. 
    var courseName: String,
    var courseimg: String,
    var courseDesc: String,
    var Prerequisites: String,
    var courseLink: String
)

Paso 6: crear una clase de interfaz para nuestra llamada API

Vaya a la aplicación > java > el nombre del paquete de su aplicación > haga clic con el botón derecho en él > Nuevo > clase Kotlin, selecciónelo como Interfaz y nombre el archivo como RetrofitAPI y agréguele el siguiente código. Se agregan comentarios dentro del código para comprender el código con más detalle.

package com.gtappdevelopers.kotlingfgproject
 
import retrofit2.Call
import retrofit2.http.GET
 
interface RetrofitAPI {
 
    // as we are making get request
    // so we are displaying GET as annotation.
    // and inside we are passing
    // last parameter for our url.
    @GET("8RFY")
    fun  // as we are calling data from array
    // so we are calling it with json object
    // and naming that method as getCourse();
            getCourse(): Call<CourseDataModal?>?
}

Paso 7: 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.java. 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.view.View
import android.widget.*
import androidx.appcompat.app.AppCompatActivity
import com.squareup.picasso.Picasso
import retrofit2.Call
import retrofit2.Callback
import retrofit2.Response
import retrofit2.Retrofit
import retrofit2.converter.gson.GsonConverterFactory
 
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
     
    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 method
        // to get data from api using retrofit.
        getData()
 
    }
 
    private fun getData() {
        // on below line we are creating a retrofit
        // builder and passing our base url
        // on below line we are creating a retrofit
        // builder and passing our base url
        val retrofit = Retrofit.Builder()
            .baseUrl("https://jsonkeeper.com/b/")
 
            // on below line we are calling add Converter
            // factory as GSON converter factory.
            // at last we are building our retrofit builder.
            .addConverterFactory(GsonConverterFactory.create())
            .build()
 
        // below line is to create an instance for our retrofit api class.
        // below line is to create an instance for our retrofit api class.
        val retrofitAPI = retrofit.create(RetrofitAPI::class.java)
 
        val call: Call<CourseDataModal?>? = retrofitAPI.getCourse()
 
        // on below line we are making a call.
        call!!.enqueue(object : Callback<CourseDataModal?> {
            override fun onResponse(
                call: Call<CourseDataModal?>?,
                response: Response<CourseDataModal?>
            ) {
                if (response.isSuccessful()) {
                    // inside the on response method.
                    // we are hiding our progress bar.
                    loadingPB.visibility = View.GONE
 
                    // on below line we are getting data from our response
                    // and setting it in variables.
                    val courseName: String = response.body()!!.courseName
                    val courseLink: String = response.body()!!.courseLink
                    val courseImg: String = response.body()!!.courseimg
                    val courseDesc: String = response.body()!!.courseDesc
                    val coursePreq: String = response.body()!!.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)
                    }
                }
            }
 
            override fun onFailure(call: Call<CourseDataModal?>?, t: Throwable?) {
                // displaying an error message in toast
                Toast.makeText(this@MainActivity, "Fail to get the data..", Toast.LENGTH_SHORT)
                    .show()
            }
        })
    }
}

Ahora ejecute su aplicación para ver el resultado. 

Producción: