Plus
Comment utiliser des isolats dans Flutter avec Back4app pour gérer le traitement intensif des données

13min
Introduction
Flutter est un framework puissant pour créer des applications multiplateformes, mais comme de nombreux frameworks mobiles, il exécute tout le code sur un seul thread par défaut. Ce thread, connu sous le nom de thread UI, est responsable du rendu de l'interface utilisateur de votre application. Lorsque des tâches lourdes comme le traitement de données ou la gestion de fichiers se produisent sur le thread UI, elles peuvent provoquer un retard ou un "jank" dans l'application, entraînant une mauvaise expérience utilisateur.
Pour y remédier, Dart propose une fonctionnalité appelée Isolates. Les isolates vous permettent d'exécuter des calculs coûteux sur un thread séparé, gardant ainsi votre interface utilisateur réactive. Dans ce tutoriel, nous allons explorer comment utiliser les isolates dans une application Flutter pour gérer des tâches de traitement de données lourdes, telles que la désérialisation de grands fichiers JSON récupérés d'un backend Back4app.
Prérequis
Pour compléter ce tutoriel, vous aurez besoin de :
Un compte Back4app. Inscrivez-vous pour un compte gratuit sur Back4app.com.
Un environnement de développement Flutter configuré sur votre machine locale. Suivez le guide d'installation de Flutter si vous ne l'avez pas encore configuré.
Connaissances de base en Dart, widgets Flutter et programmation asynchrone.
Étape 1 – Configuration de votre backend Back4app
Créer un projet Back4app: Connectez-vous à votre compte Back4app et créez un nouveau projet.
Créer des classes Parse: Pour ce tutoriel, créez une classe Parse nommée Record qui stocke de grandes quantités de données :
titre (String) : Le titre de l'enregistrement.
description (String) : Une description de l'enregistrement.
métadonnées (JSON) : Contenu de métadonnées volumineux associé à l'enregistrement.
Remplir la classe avec des données d'exemple: Ajoutez plusieurs enregistrements à la Record classe avec de grands objets JSON dans le champ métadonnées. Cela simulera le type de traitement de données qui pourrait provoquer des ralentissements dans une application réelle.
Obtenez vos identifiants Back4app: Accédez aux paramètres de votre projet pour récupérer votre ID d'application et votre clé client, dont vous aurez besoin pour connecter votre application Flutter à Back4app.
Étape 2 – Configuration de votre projet Flutter
Créer un nouveau projet Flutter: Ouvrez votre terminal ou invite de commande et exécutez :
Bash
flutter create isolate_example
flutter create isolate_example
﻿
Ajouter des dépendances: Ouvrez pubspec.yaml et ajoutez les dépendances suivantes :
YAML
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: latest_version
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: latest_version
﻿
Exécutez flutter pub get pour installer ces dépendances.
Initialiser Parse dans votre application: Dans lib/main.dart, importez le SDK Parse et initialisez-le dans la fonction 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(),
    );
  }
}
﻿
Remplacez 'YOUR_BACK4APP_APP_ID' et 'YOUR_BACK4APP_CLIENT_KEY' par vos véritables identifiants Back4app.
Étape 3 – Récupération des données depuis Back4app
Créez le widget RecordScreen: Dans lib/main.dart, créez un nouvel écran qui récupère des données depuis 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'),
                );
              },
            ),
    );
  }
}
﻿
Ce code récupère tous les enregistrements de la Record classe dans Back4app et les affiche dans une liste.
Étape 4 – Décharger le traitement de données lourdes vers un Isolate
Utiliser un Isolate pour désérialiser un grand JSON: Supposons que le metadata champ dans chaque enregistrement contienne un grand objet JSON qui doit être désérialisé. Pour éviter de bloquer le fil d'interface utilisateur, nous allons utiliser un isolate pour effectuer cette tâche.
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')}');
}
﻿
Intégrer le traitement isolé dans l'application: Mettre à jour le RecordScreen widget pour traiter les métadonnées de chaque enregistrement en utilisant l'isolat:
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'),
                );
              },
            ),
    );
  }
}
﻿
Cette implémentation récupère des enregistrements depuis Back4app, décharge la lourde tâche de désérialisation JSON à un isolat, et met à jour l'interface utilisateur une fois le traitement terminé.
Étape 5 – Tester et exécuter votre application
Exécutez votre application en utilisant flutter run. Vous devriez voir une liste d'enregistrements récupérés depuis Back4app. Les métadonnées de chaque enregistrement sont traitées sur un isolate séparé, garantissant que l'interface utilisateur reste fluide et réactive.
Vérifiez les performances en testant avec de grands fichiers JSON dans le champ des métadonnées. Observez comment l'utilisation des isolates empêche les saccades et maintient l'interface utilisateur réactive.
Conclusion
Dans ce tutoriel, vous avez appris à utiliser les isolates dans Flutter pour gérer des tâches de traitement de données lourdes, telles que la désérialisation de grands fichiers JSON. En déchargeant ces tâches sur un isolate, vous gardez le fil d'interface utilisateur libre pour gérer le rendu, ce qui donne une application plus fluide et réactive. L'intégration de Back4app en tant que backend vous permet de gérer et de récupérer efficacement des données, tandis que le modèle d'isolate de Dart garantit que votre application reste performante même lors de la gestion d'opérations complexes.
Pour plus d'informations sur l'utilisation de Flutter avec Back4app, consultez la documentation de Back4app et la documentation de Flutter. Bon codage!
Mis à jour 23 Jan 2025
Cette page vous a-t-elle aidée?
Développement d'applications Javascript en temps réel
Construire et utiliser une extension Flutter DevTools avec Back4app