JSON también se conoce como (Notación de objetos de JavaScript) es un formato para intercambiar los datos del servidor. Los datos almacenados en formato JSON son livianos y fáciles de manejar. 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 utilizando la biblioteca Retrofit en Android.
Nota: Para analizar el objeto JSON en Android usando la biblioteca Voley , consulte Análisis de JSON en Android usando la biblioteca Volley
Objeto JSON : el objeto Json se puede identificar fácilmente con la apertura de llaves «{» y el cierre de llaves «}». Podemos obtener datos de objetos JSON con su valor clave. Desde esa clave, podemos acceder al valor de esa clave.
¿Qué vamos a construir en este artículo?
Construiremos una aplicación simple en la que mostraremos un CardView simple en el que mostraremos un solo curso que está disponible en Geeks for Geeks. A continuación se muestra un video de muestra para tener una idea de lo que vamos a hacer en este artículo. Tenga en cuenta que vamos a implementar este proyecto utilizando el lenguaje Java .
A continuación se muestra el objeto JSON desde el cual mostraremos los datos en nuestra aplicación de Android.
{
«nombre del curso»: «CPP bifurcado»,
“cursoimg”:”https://media.geeksforgeeks.org/img-practice/banner/fork-cpp-thumbnail.png”,
“courseMode”:”Lote en línea”,
“courseTracks”:”6 Pistas”
}
Implementación paso a paso
Paso 1: Crear un nuevo proyecto
Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Tenga en cuenta que seleccione Java 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.
// debajo de la dependencia para usar retrofit.
implementación ‘com.squareup.retrofit2:retrofit:2.9.0’
implementación ‘com.squareup.retrofit2:convertidor-gson:2.5.0’
// debajo de la dependencia para usar la biblioteca de carga de imágenes de picasso
implementación ‘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.
XML
<!--permissions for INTERNET--> <uses-permission android:name="android.permission.INTERNET"/>
Paso 4: trabajar con el archivo activity_main.xml
aplicación > res > diseño > actividad_principal.xml actividad_principal.xml
XML
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout 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" android:layout_gravity="center" android:gravity="center" android:orientation="vertical" tools:context=".MainActivity"> <androidx.cardview.widget.CardView android:id="@+id/idCVCourse" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="10dp" android:elevation="10dp" android:visibility="gone" app:cardCornerRadius="8dp"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <ImageView android:id="@+id/idIVCourse" android:layout_width="match_parent" android:layout_height="300dp" android:layout_margin="5dp" /> <TextView android:id="@+id/idTVCourseName" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="5dp" android:padding="5dp" android:text="Course Name " android:textColor="@color/black" android:textSize="18sp" android:textStyle="bold" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="5dp" android:orientation="horizontal" android:weightSum="2"> <TextView android:id="@+id/idTVBatch" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:padding="5dp" android:text="Batch" android:textColor="@color/black" /> <TextView android:id="@+id/idTVTracks" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:padding="5dp" android:text="Tracks" android:textColor="@color/black" /> </LinearLayout> </LinearLayout> </androidx.cardview.widget.CardView> <ProgressBar android:id="@+id/idLoadingPB" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:visibility="visible" /> </RelativeLayout>
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 Java y asígnele el nombre RecyclerData y agréguele el siguiente código.
Java
public class RecyclerData {
// string variables for our data
// make sure that the variable name
// must be similar to that of key value
// which we are getting from our json file.
private String courseName;
private String courseimg;
private String courseMode;
private String courseTracks;
public String getCourseName() {
return courseName;
}
public void setCourseName(String courseName) {
this.courseName = courseName;
}
public String getCourseimg() {
return courseimg;
}
public void setCourseimg(String courseimg) {
this.courseimg = courseimg;
}
public String getCourseMode() {
return courseMode;
}
public void setCourseMode(String courseMode) {
this.courseMode = courseMode;
}
public String getCourseTracks() {
return courseTracks;
}
public void setCourseTracks(String courseTracks) {
this.courseTracks = courseTracks;
}
public RecyclerData(String courseName, String courseimg, String courseMode, String courseTracks) {
this.courseName = courseName;
this.courseimg = courseimg;
this.courseMode = courseMode;
this.courseTracks = courseTracks;
}
}
Paso 6: crear una clase de interfaz para nuestra llamada API
Navegue a la aplicación > java > el nombre del paquete de su aplicación > haga clic con el botón derecho en él > Nuevo > Clase Java, selecciónelo como Interfaz y nombre el archivo como RetrofitAPI y agréguele el código a continuación.
Java
import retrofit2.Call;
import retrofit2.http.GET;
public 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("63OH")
// as we are calling data from array
// so we are calling it with json object
// and naming that method as getCourse();
Call<RecyclerData> getCourse();
}
Paso 7: trabajar con el archivo MainActivity.java
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.
Java
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.ProgressBar;
import android.widget.TextView;
import android.widget.Toast;
import androidx.appcompat.app.AppCompatActivity;
import androidx.cardview.widget.CardView;
import com.squareup.picasso.Picasso;
import retrofit2.Call;
import retrofit2.Callback;
import retrofit2.Response;
import retrofit2.Retrofit;
import retrofit2.converter.gson.GsonConverterFactory;
public class MainActivity extends AppCompatActivity {
// creating variables for our textview,
// imageview,cardview and progressbar.
private TextView courseNameTV, courseTracksTV, courseBatchTV;
private ImageView courseIV;
private ProgressBar loadingPB;
private CardView courseCV;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// initializing our variables.
loadingPB = findViewById(R.id.idLoadingPB);
courseCV = findViewById(R.id.idCVCourse);
courseNameTV = findViewById(R.id.idTVCourseName);
courseTracksTV = findViewById(R.id.idTVTracks);
courseBatchTV = findViewById(R.id.idTVBatch);
courseIV = findViewById(R.id.idIVCourse);
getCourse();
}
private void getCourse() {
// on below line we are creating a retrofit
// builder and passing our base url
Retrofit retrofit = new Retrofit.Builder()
.baseUrl("https://jsonkeeper.com/b/")
// on below line we are calling add Converter
// factory as GSON converter factory.
.addConverterFactory(GsonConverterFactory.create())
// at last we are building our retrofit builder.
.build();
// below line is to create an instance for our retrofit api class.
RetrofitAPI retrofitAPI = retrofit.create(RetrofitAPI.class);
Call<RecyclerData> call = retrofitAPI.getCourse();
call.enqueue(new Callback<RecyclerData>() {
@Override
public void onResponse(Call<RecyclerData> call, Response<RecyclerData> response) {
if (response.isSuccessful()) {
// inside the on response method.
// we are hiding our progress bar.
loadingPB.setVisibility(View.GONE);
// in below line we are making our card
// view visible after we get all the data.
courseCV.setVisibility(View.VISIBLE);
RecyclerData modal = response.body();
// after extracting all the data we are
// setting that data to all our views.
courseNameTV.setText(modal.getCourseName());
courseTracksTV.setText(modal.getCourseTracks());
courseBatchTV.setText(modal.getCourseMode());
// we are using picasso to load the image from url.
Picasso.get().load(modal.getCourseimg()).into(courseIV);
}
}
@Override
public void onFailure(Call<RecyclerData> call, Throwable t) {
// displaying an error message in toast
Toast.makeText(MainActivity.this, "Fail to get the data..", Toast.LENGTH_SHORT).show();
}
});
}
}
Ahora ejecute su aplicación y vea el resultado de la aplicación.
Producción:
Publicación traducida automáticamente
Artículo escrito por chaitanyamunje y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA