Agregar Transacciones en Firebase con Flutter y Bloc

Clase 28 de 30Curso de Flutter con Firebase

Resumen

La gestión de transacciones financieras en aplicaciones móviles es un componente esencial para cualquier desarrollador que busque crear herramientas útiles para el control de gastos. En esta ocasión, exploraremos cómo implementar la funcionalidad de agregar transacciones en una aplicación Flutter utilizando Firebase como base de datos, aprovechando la arquitectura BLoC para mantener una actualización en tiempo real de la información.

¿Cómo implementar la funcionalidad de agregar transacciones en Firebase?

Para completar nuestro CRUD (Create, Read, Update, Delete) con Firebase, necesitamos implementar las funcionalidades de agregar y eliminar transacciones. En esta sección, nos enfocaremos en la funcionalidad de agregar transacciones a nuestra aplicación de control de gastos.

Nuestra aplicación ya cuenta con un botón en el Navbar que permite agregar montos y descripciones, con opciones para registrar tanto entradas como salidas de dinero. Ahora, vamos a darle vida a estos botones para que procesen la información ingresada por el usuario.

Creación de la función para agregar transacciones

Lo primero que debemos hacer es crear una función privada que maneje la lógica de agregar transacciones:

void _addTransaction(BuildContext context, String amount, String description, String type) {
  // Convertir el monto a un valor numérico
  double parsedAmount = double.tryParse(amount) ?? 0;
  
  // Validar que el monto sea válido
  if (amount.isEmpty || parsedAmount <= 0) {
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(content: Text("Enter a valid amount"))
    );
    return;
  }
  
  // Crear objeto de transacción
  final transaction = IncomeExpense(
    amount: parsedAmount.toInt(),
    description: description.isEmpty ? "No description" : description,
    date: DateTime.now(),
    type: type
  );
  
  // Agregar la transacción usando el BLoC
  context.read<IncomeExpenseBloc>().addTransaction(transaction);
  
  // Cerrar el modal
  Navigator.of(context).pop();
  
  // Mostrar mensaje de éxito
  ScaffoldMessenger.of(context).showSnackBar(
    SnackBar(content: Text("Transaction agregada exitosamente"))
  );
}

Esta función realiza varias tareas importantes:

  1. Parsea y valida el monto: Convierte el texto ingresado a un valor numérico y verifica que sea mayor que cero.
  2. Crea un objeto de transacción: Utiliza el modelo IncomeExpense para estructurar los datos.
  3. Maneja casos especiales: Si no hay descripción, asigna un valor predeterminado.
  4. Registra la fecha actual: Utiliza DateTime.now() para capturar el momento exacto de la transacción.
  5. Utiliza el BLoC para agregar la transacción: Conecta con la lógica de negocio.
  6. Proporciona retroalimentación al usuario: Muestra mensajes de éxito o error.

Conectando la función con los botones de la interfaz

Una vez que tenemos nuestra función lista, necesitamos conectarla con los botones de nuestra interfaz:

// Para el botón de ingresos (Income)
onPressed: () {
  _addTransaction(
    context, 
    amountController.text, 
    descriptionController.text, 
    "income"
  );
},

// Para el botón de gastos (Expense)
onPressed: () {
  _addTransaction(
    context, 
    amountController.text, 
    descriptionController.text, 
    "expense"
  );
},

Es crucial pasar el tipo correcto ("income" o "expense") según el botón que se presione, ya que esto determinará cómo se clasifica la transacción en nuestra base de datos y cómo se visualizará en los gráficos y resúmenes.

¿Qué ventajas ofrece la arquitectura BLoC en esta implementación?

La implementación de la funcionalidad de agregar transacciones nos permite apreciar las ventajas de utilizar la arquitectura BLoC (Business Logic Component) en nuestra aplicación:

Actualización en tiempo real

Una de las mayores ventajas de utilizar BLoC Builder junto con Firebase es la actualización inmediata de los datos en la interfaz de usuario. Cuando agregamos una nueva transacción:

  • El saldo se actualiza automáticamente
  • Los gráficos se regeneran con la nueva información
  • La lista de transacciones se actualiza para incluir la nueva entrada

Todo esto ocurre sin necesidad de recargar manualmente la aplicación o implementar lógica adicional para refrescar los datos.

Separación de responsabilidades

La arquitectura BLoC nos permite separar claramente la lógica de negocio de la interfaz de usuario. Nuestra función _addTransaction se encarga de validar los datos y preparar el objeto, pero delega la responsabilidad de almacenar la información al BLoC, que a su vez se comunica con el repositorio y Firebase.

Manejo de estados simplificado

Al utilizar BLoC, el manejo de estados se vuelve más predecible y fácil de mantener. No necesitamos preocuparnos por actualizar manualmente diferentes partes de la interfaz cuando cambian los datos, ya que los widgets que utilizan BlocBuilder se reconstruirán automáticamente cuando el estado cambie.

La implementación de la funcionalidad de agregar transacciones es un paso fundamental en nuestra aplicación de control de gastos. Con esta característica, los usuarios pueden registrar sus ingresos y gastos de manera sencilla, mientras que la arquitectura BLoC garantiza que toda la interfaz se mantenga sincronizada con los datos más recientes.

¿Has implementado alguna vez un sistema similar en tus aplicaciones? ¿Qué otras funcionalidades consideras esenciales para una aplicación de control de gastos? Comparte tu experiencia en los comentarios.