Inicio » Cursos » App para Pizzería con delivery

Curso App para Pizzería con delivery

Capitulo 37 ➜ Categorías

Categorías

¿Cómo inflar un ListView usando un Adapter con una API Rest?

Mostrar en un ListView las Categorías de productos de la pizzería.

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())
                );
            }
        });
....

 


581 visitas

Sigue con el curso: Capítulo 38 – Productos

Descarga el código del proyecto

Descarga el código fuente del proyecto adquiriendo el curso completo

Descargar ahora

Más cursos que pueden interesarte

Más cursos

Codea Codea App

México, Colombia, España, Venezuela, Argentina, Bolivia, Perú

© Todos los derechos reservados Codea App | ...de frente al código!!! | 2020 - 2023