Cree una aplicación de Android para verificar la disponibilidad de vacunas contra el COVID-19

Requisitos previos:

• Fundamentos de desarrollo de aplicaciones de Android para principiantes
• Guía para instalar y configurar Android Studio
• android | ¿Cómo crear/comenzar un nuevo proyecto en Android Studio?
• android | Ejecutando tu primera aplicación de Android
• API REST (Introducción)
• Biblioteca Volley en Android

El gobierno de la India ha iniciado la mayor campaña de vacunación en toda la India para vacunar a las personas para luchar contra el virus COVID-19. Como hay tantos centros de vacunación en la India para la vacunación, verifique la disponibilidad de diferentes vacunas en diferentes centros en toda la India. Construiremos una aplicación simple para obtener los detalles sobre los centros de vacunación en la India.

¿Qué vamos a construir en este artículo? 

Construiremos una aplicación simple en la que obtendremos los datos de los centros de vacunación del código PIN de esa ubicación. A continuación se muestra el video en el que veremos lo que vamos a construir en este artículo. Tenga en cuenta que vamos a implementar este proyecto utilizando el lenguaje Kotlin . 

Paso 1: Abrir un nuevo proyecto

• Abra un nuevo proyecto simplemente haga clic en la opción Archivo en la esquina superior izquierda.
• Luego haga clic en nuevo y abra un nuevo proyecto con el nombre que desee.
• Ahora vamos a trabajar en Actividad vacía con lenguaje como Kotlin. Deje todas las demás opciones intactas.
• Puede cambiar el nombre del proyecto según su elección.
• De forma predeterminada, habrá dos archivos activity_main.xml y MainActivity.java.

O Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio .

Paso 2: antes de ir a la sección de codificación, primero debe hacer una tarea previa

Vaya a la sección aplicación > res > valores > colores.xml y configure los colores para su aplicación.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="purple_200">#0F9D58</color>
    <color name="purple_500">#0F9D58</color>
    <color name="purple_700">#0F9D58</color>
    <color name="teal_200">#FF03DAC5</color>
    <color name="teal_700">#FF018786</color>
    <color name="black">#FF000000</color>
    <color name="white">#FFFFFFFF</color>
</resources>

Paso 3: Agregar dependencia para Volley en el archivo build.gradle

Vaya a la sección Gradle Scripts > build.gradle (Módulo: aplicación) e importe las siguientes dependencias y haga clic en «sincronizar ahora» en la ventana emergente anterior. Hemos utilizado la biblioteca Volley en este proyecto. 

// Volley library
implementation 'com.android.volley:volley:1.1.1'

Paso 4: agregar permisos de Internet en el archivo AndroidManifest.xml 

Vaya a la aplicación > archivo AndroidManifest.xml y agregue la siguiente línea de código en él.  

<!--Allow Internet Permission-->
<uses-permission android:name="android.permission.INTERNET" />

 
Paso 5: 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"?>
<RelativeLayout
    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"
    tools:context=".MainActivity">
 
    <!--edit text for entering the pin code-->
    <EditText
        android:id="@+id/idEdtPinCode"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:layout_toStartOf="@id/idBtnSearch"
        android:layout_toLeftOf="@id/idBtnSearch"
        android:hint="Enter PinCode"
        android:inputType="number" />
 
    <!--button for searching the data-->
    <Button
        android:id="@+id/idBtnSearch"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_margin="5dp"
        android:background="@color/purple_200"
        android:text="Search"
        android:textAllCaps="false" />
 
    <!--progress bar for loading indicator-->
    <ProgressBar
        android:id="@+id/idPBLoading"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:visibility="gone" />
 
    <!--recycler view for displaying results in the form of list-->
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/centersRV"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/idEdtPinCode"
        tools:listitem="@layout/center_rv_item" />
 
</RelativeLayout>

 
Paso 6: crear un nuevo archivo Kotlin para almacenar nuestros datos

Tenemos que almacenar los datos en una clase modal para eso crearemos un nuevo archivo de clase de Kotlin. Por crear este archivo. Vaya a la aplicación > java > el nombre del paquete de su aplicación > haga clic con el botón derecho en él > Nuevo > opción Archivo/Clase de Kotlin y luego elija Clase y nombre su archivo como CenterRvModal y agréguele el siguiente código. Se agregan comentarios en el código para conocer con más detalle. 

data class CenterRvModal(
 
        // string variable for center name.
        val centerName: String,
 
        // string variable for center address.
        val centerAddress: String,
 
        // string variable for center opening time.
        val centerFromTime: String,
 
        // string variable for center closing time.
        val centerToTime: String,
 
        // string variable for center fee type
        var fee_type: String,
 
        // int variable for age limit.
        var ageLimit: Int,
 
        // string variable for vaccination name.
        var vaccineName: String,
 
        // int variable for vaccine availability.
        var availableCapacity: Int
)

Paso 7: Creación de un nuevo archivo de diseño para nuestro elemento de RecyclerView

Vaya a app > res > layout > haga clic con el botón derecho en él > New > Layout file y asígnele el nombre center_rv_item y agréguele el siguiente código. Se agregan comentarios en el código para conocer con más detalle. El archivo de diseño a continuación se puede usar para mostrar cada elemento de nuestro RecyclerView.  

Nota: Las imágenes utilizadas en el proyecto están presentes en la carpeta dibujable. 

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="4dp">
 
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
 
        <!--text view for displaying center name-->
        <TextView
            android:id="@+id/idTVCenterName"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="3dp"
            android:drawableLeft="@drawable/ic_hospital"
            android:drawablePadding="4dp"
            android:padding="3dp"
            android:text="Center Name"
            android:textColor="@color/black" />
 
        <!--text view for displaying center address-->
        <TextView
            android:id="@+id/idTVCenterAddress"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/idTVCenterName"
            android:layout_margin="3dp"
            android:drawableLeft="@drawable/ic_location"
            android:drawablePadding="4dp"
            android:padding="3dp"
            android:text="Center Address"
            android:textColor="@color/black" />
 
        <!--text view for displaying center timings-->
        <TextView
            android:id="@+id/idTVCenterTimings"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/idTVCenterAddress"
            android:layout_margin="3dp"
            android:drawableLeft="@drawable/ic_time"
            android:drawablePadding="4dp"
            android:padding="3dp"
            android:text="Timings"
            android:textColor="@color/black" />
 
        <LinearLayout
            android:id="@+id/idLL1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/idTVCenterTimings"
            android:orientation="horizontal"
            android:weightSum="2">
 
            <!--text view for displaying vaccine name-->
            <TextView
                android:id="@+id/idTVVaccineName"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_margin="3dp"
                android:layout_weight="1"
                android:drawableLeft="@drawable/ic_vaccine"
                android:drawablePadding="4dp"
                android:padding="3dp"
                android:text="Vaccine Name"
                android:textColor="@color/black" />
 
            <!--text view for displaying center fees type-->
            <TextView
                android:id="@+id/idTVFeeType"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_margin="3dp"
                android:layout_weight="1"
                android:padding="3dp"
                android:text="Fee Type"
                android:textAlignment="center"
                android:textColor="@color/black" />
        </LinearLayout>
 
        <LinearLayout
            android:id="@+id/idLL2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/idLL1"
            android:orientation="horizontal"
            android:weightSum="2">
             
            <!--text view for displaying age limit-->
            <TextView
                android:id="@+id/idTVAgeLimit"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_margin="3dp"
                android:layout_weight="1"
                android:padding="3dp"
                android:text="Age Limit"
                android:textAlignment="center"
                android:textColor="@color/black" />
             
            <!--text view for displaying center availability-->
            <TextView
                android:id="@+id/idTVAvailability"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_margin="3dp"
                android:layout_weight="1"
                android:padding="3dp"
                android:text="Availability"
                android:textAlignment="center"
                android:textColor="@color/black" />
 
        </LinearLayout>
         
    </RelativeLayout>
     
</androidx.cardview.widget.CardView>

 
Paso 8: crear un nuevo archivo Kotlin para nuestra clase Adapter

Ahora, para configurar los datos de cada elemento de nuestra vista de reciclador. Tenemos que crear una nueva clase de adaptador para configurar datos para cada elemento de nuestra Vista de reciclador. Para crear un nuevo archivo Kotlin, vaya a la aplicación > java > el nombre del paquete de su aplicación > haga clic con el botón derecho en él > Nuevo > Archivo/Clase Kotlin y asígnele el nombre CenterRVAdapter y agréguele el siguiente código. Se agregan comentarios en el código para conocer con más detalle. 

import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.TextView
import androidx.recyclerview.widget.RecyclerView
 
// on below line we are creating our adapter class
// in this class we are passing our array list
// and our View Holder class which we have created.
class CenterRVAdapter(private val centerList: List<CenterRvModal>) :
        RecyclerView.Adapter<CenterRVAdapter.CenterRVViewHolder>() {
 
    // on below line we are creating our view holder class which will
    // be used to initialize each view of our layout file.
    class CenterRVViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        // on below line we are initializing all our text views along with  its ids.
        val centerNameTV: TextView = itemView.findViewById(R.id.idTVCenterName)
        val centerAddressTV: TextView = itemView.findViewById(R.id.idTVCenterAddress)
        val centerTimings: TextView = itemView.findViewById(R.id.idTVCenterTimings)
        val vaccineNameTV: TextView = itemView.findViewById(R.id.idTVVaccineName)
        val centerAgeLimitTV: TextView = itemView.findViewById(R.id.idTVAgeLimit)
        val centerFeeTypeTV: TextView = itemView.findViewById(R.id.idTVFeeType)
        val availabilityTV: TextView = itemView.findViewById(R.id.idTVAvailability)
    }
 
    // below method is for on Create View Holder.
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): CenterRVViewHolder {
        // this method is use to inflate the layout file
        // which we have created for our recycler view.
        // on below line we are inflating our layout file.
        val itemView = LayoutInflater.from(parent.context).inflate(
                R.layout.center_rv_item,
                parent, false
        )
        // at last we are returning our view holder
        // class with our item View File.
        return CenterRVViewHolder(itemView)
    }
 
    // this method is to count the size of our array list.
    override fun getItemCount(): Int {
 
        // on below line we are returning
        // the size of our array list.
        return centerList.size
    }
 
    // below method is to set the data to each view of our recycler view item.
    override fun onBindViewHolder(holder: CenterRVViewHolder, position: Int) {
 
        // on below line we are getting item
        // from our list along with its position.
        val currentItem = centerList[position]
 
        // after getting current item we are setting
        // data from our list to our text views.
        holder.centerNameTV.text = currentItem.centerName
        holder.centerAddressTV.text = currentItem.centerAddress
        holder.centerTimings.text = ("From : " + currentItem.centerFromTime + " To : " + currentItem.centerToTime)
        holder.vaccineNameTV.text = currentItem.vaccineName
        holder.centerAgeLimitTV.text = "Age Limit : " + currentItem.ageLimit.toString()
        holder.centerFeeTypeTV.text = currentItem.fee_type
        holder.availabilityTV.text = "Availability : " + currentItem.availableCapacity.toString()
    }
}

 
Paso 9: Trabajar con el archivo MainActivity.kt. 

Vaya a la aplicación > java > el nombre del paquete de su aplicación > archivo MainActivity.kt y agréguele el siguiente código. Se agregan comentarios en el código para conocer con más detalle.  

import android.app.DatePickerDialog
import android.os.Bundle
import android.util.Log
import android.view.View
import android.widget.Button
import android.widget.EditText
import android.widget.ProgressBar
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import androidx.recyclerview.widget.LinearLayoutManager
import androidx.recyclerview.widget.RecyclerView
import com.android.volley.Request
import com.android.volley.toolbox.JsonObjectRequest
import com.android.volley.toolbox.Volley
import org.json.JSONException
import java.util.*
import kotlin.collections.ArrayList
 
class MainActivity : AppCompatActivity() {
     
    // creating a variable for our button.
    private lateinit var searchButton: Button
 
    // creating variable for our edit text.
    lateinit var pinCodeEdt: EditText
 
    // creating a variable for our recycler view.
    lateinit var centersRV: RecyclerView
 
    // creating a variable for adapter class.
    lateinit var centerRVAdapter: CenterRVAdapter
 
    // creating a variable for our list
    lateinit var centerList: List<CenterRvModal>
 
    // creating a variable for progress bar.
    lateinit var loadingPB: ProgressBar
 
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
         
        // inside on create method we are initializing
        // all our variables which we have declared.
        searchButton = findViewById(R.id.idBtnSearch)
        pinCodeEdt = findViewById(R.id.idEdtPinCode)
        centersRV = findViewById(R.id.centersRV)
        loadingPB = findViewById(R.id.idPBLoading)
        centerList = ArrayList<CenterRvModal>()
         
        // on below line we are adding on
        // click listener to our button.
        searchButton.setOnClickListener {
 
            // inside on click listener we are getting data from
            // edit text and creating a val for ite on below line.
            val pinCode = pinCodeEdt.text.toString()
 
            // on below line we are validating
            // our pin code as 6 digit or not.
            if (pinCode.length != 6) {
 
                // this method is called when users enter invalid pin code.
                Toast.makeText(this@MainActivity, "Please enter valid pin code", Toast.LENGTH_SHORT).show()
            } else {
 
                // if the pincode is correct.
                // first of all we are clearing our array list this
                // will clear the data in it if already present.
                (centerList as ArrayList<CenterRvModal>).clear()
 
                // on below line we are getting instance of our calendar.
                val c = Calendar.getInstance()
 
                // on below line we are getting our current year, month and day.
                val year = c.get(Calendar.YEAR)
                val month = c.get(Calendar.MONTH)
                val day = c.get(Calendar.DAY_OF_MONTH)
 
                // on below line we are creating our date picker dialog.
                val dpd = DatePickerDialog(
                        this,
                        DatePickerDialog.OnDateSetListener { view, year, monthOfYear, dayOfMonth ->
                            // after that we are making our progress bar as visible.
                            loadingPB.setVisibility(View.VISIBLE)
 
                            // on below line we are creating a date string for our date
                            val dateStr: String = """$dayOfMonth - ${monthOfYear + 1} - $year"""
 
                            // on below line we are calling a method to get
                            // the appointment info for vaccination centers
                            // and we are passing our pin code to it.
                            getAppointments(pinCode, dateStr)
                        },
                        year,
                        month,
                        day
                )
                // calling a method to display
                // our datepicker dialog.
                dpd.show()
            }
        }
    }
 
    // below is the method for getting data from API.
    private fun getAppointments(pinCode: String, date: String) {
        val url = "https://cdn-api.co-vin.in/api/v2/appointment/sessions/public/calendarByPin?pincode=" + pinCode + "&date=" + date
        val queue = Volley.newRequestQueue(this@MainActivity)
         
        // on below line we are creating a request
        // variable for making our json object request.
        val request =
                // as we are getting json object response and we are making a get request.
                JsonObjectRequest(Request.Method.GET, url, null, { response ->
                    // this method is called when we get successful response from API.
                    Log.e("TAG", "SUCCESS RESPONSE IS $response")
                    // 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 {
                        // in try block we are creating a variable for center
                        // array and getting our array from our object.
                        val centerArray = response.getJSONArray("centers")
 
                        // on below line we are checking if the length of the array is 0.
                        // the zero length indicates that there is no data for the given pincode.
                        if (centerArray.length().equals(0)) {
                            Toast.makeText(this, "No Center Found", Toast.LENGTH_SHORT).show()
                        }
                        for (i in 0 until centerArray.length()) {
 
                            // on below line we are creating a variable for our center object.
                            val centerObj = centerArray.getJSONObject(i)
 
                            // on below line we are getting data from our session
                            // object and we are storing that in a different variable.
                            val centerName: String = centerObj.getString("name")
                            val centerAddress: String = centerObj.getString("address")
                            val centerFromTime: String = centerObj.getString("from")
                            val centerToTime: String = centerObj.getString("to")
                            val fee_type: String = centerObj.getString("fee_type")
 
                            // on below line we are creating a variable for our session object
                            val sessionObj = centerObj.getJSONArray("sessions").getJSONObject(0)
                            val ageLimit: Int = sessionObj.getInt("min_age_limit")
                            val vaccineName: String = sessionObj.getString("vaccine")
                            val availableCapacity: Int = sessionObj.getInt("available_capacity")
 
                            // after extracting all the data we are passing this
                            // data to our modal class we have created
                            // a variable for it as center.
                            val center = CenterRvModal(
                                    centerName,
                                    centerAddress,
                                    centerFromTime,
                                    centerToTime,
                                    fee_type,
                                    ageLimit,
                                    vaccineName,
                                    availableCapacity
                            )
                            // after that we are passing this modal to our list on the below line.
                            centerList = centerList + center
                        }
 
                        // on the below line we are passing this list to our adapter class.
                        centerRVAdapter = CenterRVAdapter(centerList)
                         
                        // on the below line we are setting layout manager to our recycler view.
                        centersRV.layoutManager = LinearLayoutManager(this)
                         
                        // on the below line we are setting an adapter to our recycler view.
                        centersRV.adapter = centerRVAdapter
                         
                        // on the below line we are notifying our adapter as the data is updated.
                        centerRVAdapter.notifyDataSetChanged()
 
                    } catch (e: JSONException) {
                        // below line is for handling json 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 y vea el resultado de la aplicación. 

Producción:  

Nota: Nuestra aplicación mostrará actualmente los datos disponibles para la fecha actual.