Lección: 37 ➜ Categorías

Diseño e implementación de StoreActivity

FUNCIÓN: Cargar las categorías desde el servidor web y asignarles el evento click.
APRENDERÁS A : ¿Cómo inflar un ListView usando un Adapter con una API Rest?

Pasos:

1. API Rest: Modificar la ruta categorias de GET a POST en api.php
2. SessionManager: Agregar un método getAccessToken() 
3. Clase: Implementar un modelo para categorías{}
4. Adapter: Agregar una vista categoria.xml
5. Adapter: Implementar una clase CategoriaAdapter{}
6. ApiService: Agregar el método getCategorias()
7. Listview: Agregar el ListView id=listViewCategoria
8. Listview: Crear el método getListaCategorias() 
9. ListView: Inflar el ListView
10. ListView: Asignar el evento click a cada categoría

1.- API Rest: Modificar la ruta categorias de GET a POST en api.php

Modificamos la ruta categorias de GET a POST, además aprovechamos también para cambiar la ruta de productos a POST. Esto con el fin de dar un poco más de seguridad a nuestras rutas, recuerde que sanctum necesita del token para gestionar las rutas protegidas. Y es asi como debe de quedar el archivo routes/api.php del proyecto Laravel 9

...
Route::group(['middleware'=>["auth:sanctum"]],function () {
    Route::get('logout', [UserController::class,'logout']);
    Route::post('categorias', [JsonController::class,'categorias']);
    Route::post('productos', [JsonController::class,'productos']);
});
....

2.- SessionManager: Agregar un método getAccessToken() 

public String getAccessToken(){
        return _preference.getString(KEY_ACCESS_TOKEN,null);
}

3.- Clase: Implementar un modelo para categorías{}

package codea.app.pizzeria9.modelo;

public class Categoria {
    int id;
    String nombre;

    public Categoria(int id, String nombre) {
        this.id = id;
        this.nombre = nombre;
    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getNombre() {
        return nombre;
    }

    public void setNombre(String nombre) {
        this.nombre = nombre;
    }
}

4.- Adapter: Agregar una vista categoria.xml

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

    <androidx.cardview.widget.CardView
        android:layout_margin="20dp"
        app:cardElevation="20dp"
        app:cardCornerRadius="10dp"
        app:cardBackgroundColor="@color/tercerColor"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <TextView
            android:padding="20dp"
            android:textAlignment="center"
            android:textColor="@color/white"
            android:textSize="20dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/txtNombre"/>
    </androidx.cardview.widget.CardView>

</androidx.appcompat.widget.LinearLayoutCompat>

5.- Adapter: Implementar una clase CategoriaAdapter{}

class CategoriaAdapter extends BaseAdapter{
    private Context context;
    private ArrayList<Categoria> listaCategoria;

    public CategoriaAdapter(Context context, ArrayList<Categoria> listaCategoria) {
        this.context = context;
        this.listaCategoria = listaCategoria;
    }

    @Override
    public int getCount() {
        return listaCategoria.size();
    }

    @Override
    public Object getItem(int i) {
        return null;
    }

    @Override
    public long getItemId(int i) {
        return 0;
    }

    @Override
    public View getView(int i, View view, ViewGroup viewGroup) {
        LayoutInflater inflater = (LayoutInflater) this.context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        if(view == null){
            view = inflater.inflate(R.layout.categoria,null);
            TextView nombre = view.findViewById(R.id.txtNombre);
            nombre.setText(listaCategoria.get(i).getNombre());
        }
        return view;
    }
}

6.- ApiService: Agregar el método getCategorias()

Este método se determina POST con la ruta categorias, declaramos un arrayList de Categoria  con un encabezado con el token para autorizar el acceso del usuario a este tipo de información; la API Rest es quién controla el acceso del usuario con sanctum de Laravel

/// Extraer las categorías
    @POST("categorias")
    Call<ArrayList<Categoria>> getCategorias(
            @Header("Authorization") String access_token
    );

7.- Listview: Agregar el ListView id=listViewCategoria

<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.LinearLayoutCompat 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=".StoreActivity">
    <ListView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/listViewCategoria"/>

</androidx.appcompat.widget.LinearLayoutCompat>

 En StoreActivity instanciamos el listView 

...
    private ListView _listViewCategoria;
....

....
    _listViewCategoria = findViewById(R.id.listViewCategoria);
....

8.- Listview: Crear el método getListaCategorias() 

Implementamos el método que al ser llamado, inflará el listview , para que se ejecute correctamente enviamos un encabezado con el token al servidor web, este debe devolvernos una objeto Json de Categorias.

...
    private ArrayList<Categoria> listacategorias = new ArrayList<>();
....

private void getListaCategorias(){
        Call<ArrayList<Categoria>> call = RetrofitClient.getApiService().getCategorias(
                "Bearer "+_sessionManager.getAccessToken()
        );
        call.enqueue(new Callback<ArrayList<Categoria>>() {
            @Override
            public void onResponse(Call<ArrayList<Categoria>> call, Response<ArrayList<Categoria>> response) {
                if(response.isSuccessful()){
                    listacategorias = response.body();
                    CategoriaAdapter adapter = new CategoriaAdapter(getApplicationContext(), listacategorias);
                    _listViewCategoria.setAdapter(adapter);
                }
            }

            @Override
            public void onFailure(Call<ArrayList<Categoria>> call, Throwable t) {

            }
        });
    }

9.- ListView: Inflar el ListView

Simplemente llamamos al método getListaCategorias() que llenará el listview con las categorias desde el servidor web en StoreActivity.

...
   getListaCategorias();
....

10.-ListView: Asignar el evento click a cada categoría

El evento click lanza la actividad ProductosActivity quien cargará todos los productos de la categoría elegida.

....
 _listViewCategoria.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
                startActivity(new Intent(getApplicationContext(),ProductosActivity.class)
                        .putExtra("categoria_id",listacategorias.get(i).getId())
                );
            }
        });
....