En esta lección, aprenderás a implementar el servicio de API (ApiService) en tu aplicación de restaurante. Este servicio te permitirá obtener datos de los menús y los items de la API, facilitando la interacción con el backend desarrollado en Laravel.

Importación de Paquetes y Modelos

Antes de comenzar, es necesario importar los paquetes y modelos requeridos:

dart

import 'dart:convert'; 
import 'package:http/http.dart' as http;
import 'package:restaurant/models/menu.dart'; 
import 'package:restaurant/models/item.dart';

• dart:convert: Proporciona funciones para codificar y decodificar datos en formato JSON.
• http: Este paquete se utiliza para realizar peticiones HTTP.
• menu.dart y item.dart: Modelos que representan la estructura de los datos de menús y items respectivamente.

2. Definición de la Clase ApiService

La clase ApiService se encargará de realizar las peticiones a la API:

dart

class ApiService {
  final String baseUrl;

  ApiService(this.baseUrl);
}

• baseUrl: Esta propiedad almacena la URL base de la API. Se pasa como parámetro al constructor de la clase.

3. Método fetchMenus()

Este método se utiliza para obtener la lista de menús desde la API:

dart

Future<List<Menu>> fetchMenus() async { 
  final response = await http.get(Uri.parse('$baseUrl/menus')); 

  if (response.statusCode == 200) {
    List<dynamic> data = json.decode(response.body);
    return data.map((json) => Menu.fromJson(json)).toList(); 
  } else {
    throw Exception('Failed to load menus'); 
  }
}

• Descripción:

  • Se realiza una petición HTTP GET a la ruta $baseUrl/menus.
  • Se espera una respuesta que contenga una lista de menús en formato JSON.

• Código:

  • http.get(Uri.parse('$baseUrl/menus')): Realiza la solicitud HTTP y espera la respuesta.
  • if (response.statusCode == 200): Comprueba si la respuesta es exitosa (código 200).
    • json.decode(response.body): Decodifica el cuerpo de la respuesta JSON a una lista dinámica.
    • data.map((json) => Menu.fromJson(json)).toList(): Transforma la lista dinámica en una lista de objetos Menu utilizando el método fromJson definido en el modelo Menu.
  • else: Si la respuesta no es exitosa, lanza una excepción con un mensaje de error.

4. Método fetchItems()

Este método se utiliza para obtener la lista de items desde la API:

dart

Future<List<Item>> fetchItems() async {
  final response = await http.get(Uri.parse('$baseUrl/item'));

  if (response.statusCode == 200) {
    List<dynamic> data = json.decode(response.body);
    return data.map((json) => Item.fromJson(json)).toList();
  } else {
    throw Exception('Error al cargar los items');
  }
}

• Descripción:

  • Realiza una petición HTTP GET a la ruta $baseUrl/item.
  • Se espera una respuesta que contenga una lista de items en formato JSON.

• Código:

  • http.get(Uri.parse('$baseUrl/item')): Envía la solicitud HTTP para obtener los items.
  • if (response.statusCode == 200): Verifica si la respuesta es exitosa (código 200).
    • json.decode(response.body): Decodifica el cuerpo de la respuesta JSON a una lista dinámica.
    • data.map((json) => Item.fromJson(json)).toList(): Convierte la lista dinámica en una lista de objetos Item usando el método fromJson del modelo Item.
  • else: Lanza una excepción si ocurre un error al cargar los items.

5. Ejemplo de Uso del ApiService

Para utilizar el ApiService en tu aplicación, puedes crear una instancia de la clase y llamar a los métodos fetchMenus y fetchItems en la lógica de tu aplicación, por ejemplo, en un FutureBuilder o en un Provider para manejar el estado de carga.

dart

void main() async {
  ApiService apiService = ApiService('http://your-api-url.com/api');
  List<Menu> menus = await apiService.fetchMenus();
  List<Item> items = await apiService.fetchItems();
}