Inicio » Cursos » App para Pizzería con delivery

Curso App para Pizzería con delivery

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

 


1071 visitas

« Capítulo 36 – Logout

Capítulo 38 – Productos »

Descarga el código del proyecto

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

Comprar

Indice

Empezando el Proyecto
1 Planteamiento del Proyecto 2 Instalación de Laravel y configuración inicial
Panel de Administración
3 Auth y Roles de Usuario: Admin y Cliente 4 Implementación del CRUD de Categorías 5 Implementación CRUD Productos 6 Implementación CRUD Precios 7 Implementación CRUD Pedidos 8 Implementación CRUD Clientes
FrontEnd Diseño
9 Diseño de la Portada con productos 10 Diseño e implementación del Catálogo 11 Diseño Detalle del Producto
Carrito de Compra
12 Instalación del paquete del carrito de compra 13 Diseño de Notificación en la barra de menú 14 Diseño Resumen Carrito Lateral 15 Diseño de la vista Ver Carrito 16 Implementación Agregar Item 17 Incrementar Cantidad del Item 18 Decrementar la cantidad de un item 19 Remover un item del Carrito 20 Eliminar el carrito de compra 21 Confirmar y procesar el carrito de compra
API Rest
22 Planteamiento de la API Rest 23 Registro 24 Login 25 Logout 26 Categorías 27 Productos
Diseño de la App Android
28 Mockups del Aplicativo
Autenticación Android
29 Introducción a la Autenticación 30 ApiService 31 RetrofitClient 32 SessionManager 33 MainActivity 34 LoginActivity 35 RegisterActivity 36 Logout
Catálogo de Productos
37 Categorías 38 Productos 39 Detalle del Producto
Carrito de Compra Android
40 Creación de la DB dbpizza 41 Métodos de consulta a la DB 42 CarritoActivity 43 CarritoAdapter 44 AddItem 45 CarritoAll 46 UpdateItem 47 Subtotal, Impuesto y Total 48 Preparar el Pedido y enviarlo al Servidor 49 Vincular a WhatsApp y clearItems
Extras
50 Optimizando el diseño y funcionalidades

Más cursos que pueden interesarte

Más cursos

Codea Applications

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

© Copyright Codea::App Cursos de Programación Online | LATAM | 2020 - 2024