Di più
Come utilizzare gli Isolates in Flutter con Back4app per gestire elaborazioni di dati pesanti

13min
Introduzione
Flutter è un potente framework per la creazione di applicazioni multipiattaforma, ma come molti framework mobili, esegue tutto il codice su un singolo thread per impostazione predefinita. Questo thread, noto come thread UI, è responsabile del rendering dell'interfaccia utente della tua app. Quando compiti pesanti come l'elaborazione dei dati o la gestione dei file si verificano sul thread UI, possono causare ritardi o "jank" nell'app, portando a una cattiva esperienza utente.
Per affrontare questo problema, Dart fornisce una funzionalità chiamata Isolati. Gli isolati ti consentono di eseguire calcoli costosi su un thread separato, mantenendo la tua interfaccia utente reattiva. In questo tutorial, esploreremo come utilizzare gli isolati in un'applicazione Flutter per gestire compiti pesanti di elaborazione dei dati, come la deserializzazione di grandi file JSON recuperati da un backend Back4app.
Requisiti
Per completare questo tutorial, avrai bisogno di:
Un account Back4app. Registrati per un account gratuito su Back4app.com.
Un ambiente di sviluppo Flutter configurato sul tuo computer locale. Segui la guida all'installazione di Flutter se non l'hai ancora configurato.
Conoscenze di base di Dart, widget Flutter e programmazione asincrona.
Passo 1 – Configurare il tuo Backend Back4app
Crea un Progetto Back4app: Accedi al tuo account Back4app e crea un nuovo progetto.
Crea Classi Parse: Per questo tutorial, crea una Classe Parse chiamata Record che memorizza grandi quantità di dati:
titolo (String): Il titolo del record.
descrizione (String): Una descrizione del record.
metadati (JSON): Contenuto di metadati di grandi dimensioni associato al record.
Popola la Classe con Dati di Esempio: Aggiungi diversi record alla Record classe con grandi oggetti JSON nel campo metadati. Questo simulerà il tipo di elaborazione dei dati che potrebbe causare rallentamenti in un'app reale.
Ottieni le tue Credenziali Back4app: Naviga nelle impostazioni del tuo progetto per recuperare il tuo ID Applicazione e la Chiave Client, che ti serviranno per connettere la tua app Flutter a Back4app.
Passo 2 – Configurare il tuo progetto Flutter
Crea un nuovo progetto Flutter: Apri il tuo terminale o prompt dei comandi e esegui:
Bash
flutter create isolate_example
flutter create isolate_example
﻿
Aggiungi dipendenze: Apri pubspec.yaml e aggiungi le seguenti dipendenze:
YAML
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: latest_version
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: latest_version
﻿
Esegui flutter pub get per installare queste dipendenze.
Inizializza Parse nella tua app: In lib/main.dart, importa il SDK di Parse e inizializzalo nella funzione main:
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(),
    );
  }
}
﻿
Sostituisci 'YOUR_BACK4APP_APP_ID' e 'YOUR_BACK4APP_CLIENT_KEY' con le tue credenziali effettive di Back4app.
Passo 3 – Recupero Dati da Back4app
Crea il Widget RecordScreen: In lib/main.dart, crea una nuova schermata che recupera dati da 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'),
                );
              },
            ),
    );
  }
}
﻿
Questo codice recupera tutti i record dalla Record classe in Back4app e li visualizza in un elenco.
Passo 4 – Scaricare l'elaborazione di dati pesanti su un Isolate
Utilizzare Isolate per deserializzare grandi JSON: Supponiamo che il metadata campo in ogni record contenga un grande oggetto JSON che deve essere deserializzato. Per evitare di bloccare il thread dell'interfaccia utente, utilizzeremo un isolate per eseguire questo compito.
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')}');
}
﻿
Integra il processamento isolato nell'app: Aggiorna il RecordScreen widget per elaborare i metadati di ciascun record utilizzando l'isolato:
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'),
                );
              },
            ),
    );
  }
}
﻿
Questa implementazione recupera i record da Back4app, scarica il pesante compito di deserializzazione JSON a un isolato e aggiorna l'interfaccia utente una volta completata l'elaborazione.
Passo 5 – Testare e Eseguire la Tua App
Esegui la tua app utilizzando flutter run. Dovresti vedere un elenco di record recuperati da Back4app. I metadati per ogni record vengono elaborati su un isolate separato, garantendo che l'interfaccia utente rimanga fluida e reattiva.
Verifica le prestazioni testando con grandi file JSON nel campo dei metadati. Osserva come l'uso degli isolate previene il lag e mantiene l'interfaccia utente reattiva.
Conclusione
In questo tutorial, hai imparato come utilizzare gli isolate in Flutter per gestire compiti di elaborazione dati pesanti, come la deserializzazione di grandi file JSON. Delegando questi compiti a un isolate, mantieni il thread dell'interfaccia utente libero per gestire il rendering, risultando in un'app più fluida e reattiva. Integrare Back4app come backend ti consente di gestire e recuperare dati in modo efficiente, mentre il modello di isolate di Dart garantisce che la tua app rimanga performante anche quando gestisce operazioni complesse.
Per ulteriori informazioni su come utilizzare Flutter con Back4app, dai un'occhiata alla documentazione di Back4app e documentazione di Flutter. Buon coding!
Aggiornato 23 Jan 2025
Questa pagina ti è stata di aiuto?
Developing real-time Javascript applications
AVANTI IL PROSSIMO
Crea e usa un'estensione Flutter DevTools con Back4app