Cómo usar Aisladores en Flutter con Back4app para manejar el procesamiento de datos pesados

13min
Introducción
Flutter es un marco poderoso para construir aplicaciones multiplataforma, pero como muchos marcos móviles, ejecuta todo el código en un solo hilo por defecto. Este hilo, conocido como el hilo de la interfaz de usuario, es responsable de renderizar la interfaz de tu aplicación. Cuando tareas pesadas como el procesamiento de datos o el manejo de archivos ocurren en el hilo de la interfaz de usuario, pueden hacer que la aplicación se retrase o "jankee", lo que lleva a una mala experiencia de usuario.
Para abordar esto, Dart proporciona una característica llamada Isolates. Los isolates te permiten ejecutar cálculos costosos en un hilo separado, manteniendo tu interfaz de usuario receptiva. En este tutorial, exploraremos cómo usar isolates en una aplicación Flutter para manejar tareas pesadas de procesamiento de datos, como deserializar grandes archivos JSON obtenidos de un backend de Back4app.
Requisitos previos
Para completar este tutorial, necesitarás:
Una cuenta de Back4app. Regístrate para obtener una cuenta gratuita en Back4app.com.
Un entorno de desarrollo de Flutter configurado en tu máquina local. Sigue la guía de instalación de Flutter si aún no lo has configurado.
Conocimientos básicos de Dart, widgets de Flutter y programación asíncrona.
Paso 1 – Configurando tu Backend de Back4app
Crea un Proyecto de Back4app: Inicia sesión en tu cuenta de Back4app y crea un nuevo proyecto.
Crea Clases de Parse: Para este tutorial, crea una Clase de Parse llamada Registro que almacene grandes cantidades de datos:
título (String): El título del registro.
descripción (String): Una descripción del registro.
metadatos (JSON): Contenido de metadatos grande asociado con el registro.
Poblar la Clase con Datos de Ejemplo: Agrega varios registros a la Clase de Registro con grandes objetos JSON en el campo de metadatos. Esto simulará el tipo de procesamiento de datos que podría causar retrasos en una aplicación real.
Obtén tus Credenciales de Back4app: Navega a la configuración de tu proyecto para recuperar tu ID de Aplicación y Clave de Cliente, que necesitarás para conectar tu aplicación Flutter a Back4app.
Paso 2 – Configurando tu Proyecto Flutter
Crea un Nuevo Proyecto Flutter: Abre tu terminal o símbolo del sistema y ejecuta:
Bash
flutter create isolate_example
flutter create isolate_example
﻿
Agregar Dependencias: Abre pubspec.yaml y agrega las siguientes dependencias:
YAML
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: latest_version
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: latest_version
﻿
Ejecuta flutter pub get para instalar estas dependencias.
Inicializa Parse en tu Aplicación: En lib/main.dart, importa el SDK de Parse y inicialízalo en la función:
Dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk_flutter.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  const keyApplicationId = 'YOUR_BACK4APP_APP_ID';
  const keyClientKey = 'YOUR_BACK4APP_CLIENT_KEY';
  const keyParseServerUrl = 'https://parseapi.back4app.com';

  await Parse().initialize(keyApplicationId, keyParseServerUrl,
      clientKey: keyClientKey, autoSendSessionId: true);

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: RecordScreen(),
    );
  }
}
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk_flutter.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  const keyApplicationId = 'YOUR_BACK4APP_APP_ID';
  const keyClientKey = 'YOUR_BACK4APP_CLIENT_KEY';
  const keyParseServerUrl = 'https://parseapi.back4app.com';

  await Parse().initialize(keyApplicationId, keyParseServerUrl,
      clientKey: keyClientKey, autoSendSessionId: true);

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: RecordScreen(),
    );
  }
}
﻿
Reemplace 'YOUR_BACK4APP_APP_ID' y 'YOUR_BACK4APP_CLIENT_KEY' con sus credenciales reales de Back4app.
Paso 3 – Recuperando Datos de Back4app
Cree el Widget RecordScreen: En lib/main.dart, cree una nueva pantalla que recupere datos de Back4app:
Dart
class RecordScreen extends StatefulWidget {
  @override
  _RecordScreenState createState() => _RecordScreenState();
}

class _RecordScreenState extends State<RecordScreen> {
  List<ParseObject>? records;
  bool isLoading = true;

  @override
  void initState() {
    super.initState();
    fetchRecords();
  }

  Future<void> fetchRecords() async {
    final query = QueryBuilder<ParseObject>(ParseObject('Record'));
    final response = await query.query();

    if (response.success && response.results != null) {
      setState(() {
        records = response.results as List<ParseObject>;
        isLoading = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Records')),
      body: isLoading
          ? Center(child: CircularProgressIndicator())
          : ListView.builder(
              itemCount: records!.length,
              itemBuilder: (context, index) {
                final record = records![index];
                return ListTile(
                  title: Text(record.get<String>('title') ?? 'No Title'),
                  subtitle: Text(record.get<String>('description') ?? 'No Description'),
                );
              },
            ),
    );
  }
}
class RecordScreen extends StatefulWidget {
  @override
  _RecordScreenState createState() => _RecordScreenState();
}

class _RecordScreenState extends State<RecordScreen> {
  List<ParseObject>? records;
  bool isLoading = true;

  @override
  void initState() {
    super.initState();
    fetchRecords();
  }

  Future<void> fetchRecords() async {
    final query = QueryBuilder<ParseObject>(ParseObject('Record'));
    final response = await query.query();

    if (response.success && response.results != null) {
      setState(() {
        records = response.results as List<ParseObject>;
        isLoading = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Records')),
      body: isLoading
          ? Center(child: CircularProgressIndicator())
          : ListView.builder(
              itemCount: records!.length,
              itemBuilder: (context, index) {
                final record = records![index];
                return ListTile(
                  title: Text(record.get<String>('title') ?? 'No Title'),
                  subtitle: Text(record.get<String>('description') ?? 'No Description'),
                );
              },
            ),
    );
  }
}
﻿
Este código recupera todos los registros de la Record clase en Back4app y los muestra en una lista.
Paso 4 – Descargando el Procesamiento Pesado de Datos a un Aislado
Usando Aislado para Deserializar JSON Grande: Suponga que el metadata campo en cada registro contiene un gran objeto JSON que necesita ser deserializado. Para evitar bloquear el hilo de la interfaz de usuario, utilizaremos un aislado para realizar esta tarea.
Dart
import 'dart:isolate';
import 'dart:convert';

Future<Map<String, dynamic>> deserializeJsonInIsolate(String jsonString) async {
  // Spawning an isolate to perform JSON decoding
  final result = await Isolate.run(() {
    return jsonDecode(jsonString) as Map<String, dynamic>;
  });
  return result;
}

Future<void> processRecord(ParseObject record) async {
  String metadata = record.get<String>('metadata') ?? '{}';

  // Offload JSON deserialization to an isolate
  Map<String, dynamic> decodedData = await deserializeJsonInIsolate(metadata);

  // Do something with the decoded data
  print('Processed metadata for ${record.get<String>('title')}');
}
import 'dart:isolate';
import 'dart:convert';

Future<Map<String, dynamic>> deserializeJsonInIsolate(String jsonString) async {
  // Spawning an isolate to perform JSON decoding
  final result = await Isolate.run(() {
    return jsonDecode(jsonString) as Map<String, dynamic>;
  });
  return result;
}

Future<void> processRecord(ParseObject record) async {
  String metadata = record.get<String>('metadata') ?? '{}';

  // Offload JSON deserialization to an isolate
  Map<String, dynamic> decodedData = await deserializeJsonInIsolate(metadata);

  // Do something with the decoded data
  print('Processed metadata for ${record.get<String>('title')}');
}
﻿
Integrar el procesamiento aislado en la aplicación: Actualizar el RecordScreen widget para procesar los metadatos de cada registro utilizando el aislado:
Dart
class _RecordScreenState extends State<RecordScreen> {
  List<ParseObject>? records;
  bool isLoading = true;

  @override
  void initState() {
    super.initState();
    fetchAndProcessRecords();
  }

  Future<void> fetchAndProcessRecords() async {
    final query = QueryBuilder<ParseObject>(ParseObject('Record'));
    final response = await query.query();

    if (response.success && response.results != null) {
      List<ParseObject> fetchedRecords = response.results as List<ParseObject>;

      // Process each record's metadata using an isolate
      for (var record in fetchedRecords) {
        await processRecord(record);
      }

      setState(() {
        records = fetchedRecords;
        isLoading = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Records')),
      body: isLoading
          ? Center(child: CircularProgressIndicator())
          : ListView.builder(
              itemCount: records!.length,
              itemBuilder: (context, index) {
                final record = records![index];
                return ListTile(
                  title: Text(record.get<String>('title') ?? 'No Title'),
                  subtitle: Text(record.get<String>('description') ?? 'No Description'),
                );
              },
            ),
    );
  }
}
class _RecordScreenState extends State<RecordScreen> {
  List<ParseObject>? records;
  bool isLoading = true;

  @override
  void initState() {
    super.initState();
    fetchAndProcessRecords();
  }

  Future<void> fetchAndProcessRecords() async {
    final query = QueryBuilder<ParseObject>(ParseObject('Record'));
    final response = await query.query();

    if (response.success && response.results != null) {
      List<ParseObject> fetchedRecords = response.results as List<ParseObject>;

      // Process each record's metadata using an isolate
      for (var record in fetchedRecords) {
        await processRecord(record);
      }

      setState(() {
        records = fetchedRecords;
        isLoading = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Records')),
      body: isLoading
          ? Center(child: CircularProgressIndicator())
          : ListView.builder(
              itemCount: records!.length,
              itemBuilder: (context, index) {
                final record = records![index];
                return ListTile(
                  title: Text(record.get<String>('title') ?? 'No Title'),
                  subtitle: Text(record.get<String>('description') ?? 'No Description'),
                );
              },
            ),
    );
  }
}
﻿
Esta implementación obtiene registros de Back4app, descarga la pesada tarea de deserialización de JSON a un aislado y actualiza la interfaz de usuario una vez que el procesamiento se completa.
Paso 5 – Pruebas y Ejecución de Tu Aplicación
Ejecuta tu aplicación usando flutter run. Deberías ver una lista de registros obtenidos de Back4app. Los metadatos de cada registro se procesan en un isolate separado, asegurando que la interfaz de usuario se mantenga fluida y receptiva.
Verifica el rendimiento probando con archivos JSON grandes en el campo de metadatos. Observa cómo el uso de isolates previene el retraso y mantiene la interfaz de usuario receptiva.
Conclusión
En este tutorial, aprendiste cómo usar isolates en Flutter para manejar tareas de procesamiento de datos pesados, como deserializar archivos JSON grandes. Al descargar estas tareas a un isolate, mantienes el hilo de la interfaz de usuario libre para manejar el renderizado, lo que resulta en una aplicación más fluida y receptiva. Integrar Back4app como el backend te permite gestionar y recuperar datos de manera eficiente, mientras que el modelo de isolate de Dart asegura que tu aplicación siga siendo eficiente incluso al manejar operaciones complejas.
Para más información sobre cómo usar Flutter con Back4app, consulta la documentación de Back4app y documentación de Flutter. ¡Feliz codificación!
Actualizado 23 Jan 2025
¿Esta página le fue útil?
Desarrollo de Aplicaciones Javascript en Tiempo Real
Construyendo y Usando una Extensión de Flutter DevTools con Back4app