Flutter Templates
Comment créer une application d'immersion linguistique en réalité augmentée avec Flutter et Back4App

40min
Introduction
Dans ce tutoriel, vous allez créer une application d'immersion linguistique en réalité augmentée (AR) en utilisant Flutter et Back4App. L'application utilise la technologie AR pour reconnaître des objets via la caméra de l'appareil, superposer des traductions, fournir des informations culturelles et suivre les progrès de l'utilisateur. À la fin de ce tutoriel, vous disposerez d'une application fonctionnelle qui aide les utilisateurs à apprendre de nouvelles langues dans des contextes réels.
Prérequis
Pour compléter ce tutoriel, vous aurez besoin de :
Flutter installé sur votre machine locale. Si vous ne l'avez pas encore configuré, suivez le guide d'installation de Flutter.
Un compte Back4App. Inscrivez-vous pour un compte gratuit sur Back4App.
Une application Back4App. Créez une nouvelle application en suivant le guide de démarrage avec Back4App.
Connaissances de base en Dart et Flutter. Familiarisez-vous avec la documentation de Flutter si nécessaire.
Compréhension de base des API RESTful et de la programmation asynchrone en Dart.
Étape 1 – Configuration du projet Flutter
Tout d'abord, configurez un nouveau projet Flutter où vous développerez l'application d'immersion linguistique AR.
1.1. Créer un nouveau projet Flutter
Ouvrez votre terminal et exécutez la commande suivante :
Bash
flutter create ar_language_immersion_app
flutter create ar_language_immersion_app
﻿
Cette commande crée un nouveau projet Flutter nommé ar_language_immersion_app.
1.2. Ouvrez le projet dans votre IDE
Naviguez vers le répertoire du projet et ouvrez-le dans votre IDE préféré (par exemple, Visual Studio Code, Android Studio) :
Bash
cd ar_language_immersion_app
cd ar_language_immersion_app
﻿
Étape 2 – Configuration du backend Back4App
Configurez votre backend sur Back4App pour gérer les données utilisateur, les traductions, les informations culturelles et le suivi des progrès des utilisateurs.
2.1. Créer une nouvelle application sur Back4App
Connectez-vous à votre compte Back4App.
Cliquez sur "Créer une nouvelle application".
Entrez "Application d'immersion linguistique AR" comme nom de l'application.
Cliquez sur "Créer".
2.2. Configuration du modèle de données
Définissez les classes selon le modèle de données :
Utilisateur
ObjetReconnaissable
Traduction
InfoCulturelle
ProgressionUtilisateur
2.2.1. Créer la classe Utilisateur
La classe Utilisateur est une classe par défaut dans Back4App pour gérer l'authentification des utilisateurs.
Accédez à Core > Navigateur dans votre tableau de bord Back4App.
Vous verrez la classe _User déjà disponible.
2.2.2. Créer la classe RecognizableObject
Cliquez sur "Créer une classe".
Choisissez "Personnalisé" et nommez-le "RecognizableObject".
Cliquez sur "Créer une classe".
Ajoutez les colonnes suivantes :
Nom (Chaîne)
Catégorie (Chaîne)
ImageReference (Fichier)
2.2.3. Créer la classe Translation
Créez une autre classe nommée "Translation".
Ajoutez les colonnes suivantes :
objectId (Chaîne) [Par défaut]
ObjectID (Pointeur vers RecognizableObject)
LanguageCode (Chaîne)
TranslatedText (Chaîne)
PronunciationGuide (Chaîne)
AudioFileReference (Fichier)
2.2.4. Créer la classe CulturalInfo
Créer une classe nommée "CulturalInfo".
Ajouter les colonnes suivantes :
ObjectID (Pointeur vers RecognizableObject)
LanguageCode (Chaîne)
ShortDescription (Chaîne)
DetailedInformation (Chaîne)
RelatedMediaReferences (Tableau de fichiers)
2.2.5. Créer la classe UserProgress
Créer une classe nommée "UserProgress".
Ajouter les colonnes suivantes :
IdentifiantUtilisateur (Pointeur vers l'utilisateur)
ObjetsReconnaissables (Tableau d'IDs d'ObjetReconnaissable)
TraductionsVues (Tableau d'IDs de Traduction)
InfosCulturellesAccédées (Tableau d'IDs d'InfoCulturelle)
SériesD'apprentissage (Nombre)
ScoresDeCompétence (Dictionnaire)
2.3. Récupérer les Clés de l'Application
Allez à Paramètres de l'Application > Sécurité & Clés.
Notez votre Identifiant d'Application et Clé Client; vous en aurez besoin pour initialiser Parse dans votre application Flutter.
Étape 3 – Intégration du SDK Parse dans Flutter
Intégrez le SDK Parse fourni par Back4App dans votre projet Flutter pour communiquer avec le backend.
3.1. Ajouter des dépendances
Ouvrez pubspec.yaml et ajoutez les dépendances suivantes :
YAML
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: ^4.0.1
  camera: ^0.10.0
  flutter_spinkit: ^5.1.0
  augmented_reality_plugin: ^0.0.1 # Hypothetical AR plugin
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: ^4.0.1
  camera: ^0.10.0
  flutter_spinkit: ^5.1.0
  augmented_reality_plugin: ^0.0.1 # Hypothetical AR plugin
﻿
Exécutez la commande :
Bash
flutter pub get
flutter pub get
﻿
Remarque : Comme il n'existe pas de plugin AR officiel appelé augmented_reality_plugin, vous devrez peut-être utiliser des plugins comme arcore_flutter_plugin pour Android et arkit_plugin pour iOS. Ajustez en fonction de vos plateformes cibles.
3.2. Initialiser Parse dans votre application
Dans lib/main.dart, initialisez Parse lors du démarrage de l'application :
Dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

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

  const String applicationId = 'YOUR_APPLICATION_ID';
  const String clientKey = 'YOUR_CLIENT_KEY';
  const String parseServerUrl = 'https://parseapi.back4app.com';

  await Parse().initialize(
    applicationId,
    parseServerUrl,
    clientKey: clientKey,
    autoSendSessionId: true,
    debug: true,
  );

  runApp(MyApp());
}
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

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

  const String applicationId = 'YOUR_APPLICATION_ID';
  const String clientKey = 'YOUR_CLIENT_KEY';
  const String parseServerUrl = 'https://parseapi.back4app.com';

  await Parse().initialize(
    applicationId,
    parseServerUrl,
    clientKey: clientKey,
    autoSendSessionId: true,
    debug: true,
  );

  runApp(MyApp());
}
﻿
Remplacez 'YOUR_APPLICATION_ID' et 'YOUR_CLIENT_KEY' par les clés que vous avez obtenues de Back4App.
Étape 4 – Mise en œuvre de l'authentification des utilisateurs
Implémentez les fonctionnalités d'enregistrement et de connexion des utilisateurs.
4.1. Créer l'écran d'authentification
Créez un nouveau fichier lib/screens/auth_screen.dart.
Dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class AuthScreen extends StatefulWidget {
  @override
  _AuthScreenState createState() => _AuthScreenState();
}

class _AuthScreenState extends State<AuthScreen> {
  bool isLogin = true;
  final _usernameController = TextEditingController();
  final _passwordController = TextEditingController();

  Future<void> _submit() async {
    if (isLogin) {
      final user = ParseUser(
        _usernameController.text.trim(),
        _passwordController.text.trim(),
        null,
      );
      var response = await user.login();

      if (response.success) {
        // Navigate to main app
        Navigator.of(context).pushReplacementNamed('/home');
      } else {
        // Show error
        _showError(response.error.message);
      }
    } else {
      final user = ParseUser(
        _usernameController.text.trim(),
        _passwordController.text.trim(),
        _usernameController.text.trim() + '@example.com', // Placeholder email
      );
      var response = await user.signUp();

      if (response.success) {
        // Navigate to main app
        Navigator.of(context).pushReplacementNamed('/home');
      } else {
        // Show error
        _showError(response.error.message);
      }
    }
  }

  void _showError(String message) {
    showDialog(
      context: context,
      builder: (ctx) => AlertDialog(
        title: Text('An error occurred!'),
        content: Text(message),
        actions: [
          TextButton(
            child: Text('Okay'),
            onPressed: () => Navigator.of(ctx).pop(),
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(isLogin ? 'Login' : 'Sign Up'),
        ),
        body: Padding(
          padding: EdgeInsets.all(16.0),
          child: Column(
            children: [
              TextField(
                controller: _usernameController,
                decoration: InputDecoration(labelText: 'Username'),
              ),
              TextField(
                controller: _passwordController,
                decoration: InputDecoration(labelText: 'Password'),
                obscureText: true,
              ),
              SizedBox(height: 20),
              ElevatedButton(
                child: Text(isLogin ? 'Login' : 'Sign Up'),
                onPressed: _submit,
              ),
              TextButton(
                child: Text(isLogin
                    ? 'Don\'t have an account? Sign Up'
                    : 'Already have an account? Login'),
                onPressed: () {
                  setState(() {
                    isLogin = !isLogin;
                  });
                },
              ),
            ],
          ),
        ));
  }
}
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class AuthScreen extends StatefulWidget {
  @override
  _AuthScreenState createState() => _AuthScreenState();
}

class _AuthScreenState extends State<AuthScreen> {
  bool isLogin = true;
  final _usernameController = TextEditingController();
  final _passwordController = TextEditingController();

  Future<void> _submit() async {
    if (isLogin) {
      final user = ParseUser(
        _usernameController.text.trim(),
        _passwordController.text.trim(),
        null,
      );
      var response = await user.login();

      if (response.success) {
        // Navigate to main app
        Navigator.of(context).pushReplacementNamed('/home');
      } else {
        // Show error
        _showError(response.error.message);
      }
    } else {
      final user = ParseUser(
        _usernameController.text.trim(),
        _passwordController.text.trim(),
        _usernameController.text.trim() + '@example.com', // Placeholder email
      );
      var response = await user.signUp();

      if (response.success) {
        // Navigate to main app
        Navigator.of(context).pushReplacementNamed('/home');
      } else {
        // Show error
        _showError(response.error.message);
      }
    }
  }

  void _showError(String message) {
    showDialog(
      context: context,
      builder: (ctx) => AlertDialog(
        title: Text('An error occurred!'),
        content: Text(message),
        actions: [
          TextButton(
            child: Text('Okay'),
            onPressed: () => Navigator.of(ctx).pop(),
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(isLogin ? 'Login' : 'Sign Up'),
        ),
        body: Padding(
          padding: EdgeInsets.all(16.0),
          child: Column(
            children: [
              TextField(
                controller: _usernameController,
                decoration: InputDecoration(labelText: 'Username'),
              ),
              TextField(
                controller: _passwordController,
                decoration: InputDecoration(labelText: 'Password'),
                obscureText: true,
              ),
              SizedBox(height: 20),
              ElevatedButton(
                child: Text(isLogin ? 'Login' : 'Sign Up'),
                onPressed: _submit,
              ),
              TextButton(
                child: Text(isLogin
                    ? 'Don\'t have an account? Sign Up'
                    : 'Already have an account? Login'),
                onPressed: () {
                  setState(() {
                    isLogin = !isLogin;
                  });
                },
              ),
            ],
          ),
        ));
  }
}
﻿
4.2. Mettre à jour main.dart pour inclure des routes
Dans lib/main.dart, mettez à jour votre MaterialApp pour inclure des routes :
Dart
import 'screens/auth_screen.dart';
import 'screens/home_screen.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'AR Language Immersion',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: AuthScreen(),
      routes: {
        '/home': (ctx) => HomeScreen(),
      },
    );
  }
}
import 'screens/auth_screen.dart';
import 'screens/home_screen.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'AR Language Immersion',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: AuthScreen(),
      routes: {
        '/home': (ctx) => HomeScreen(),
      },
    );
  }
}
﻿
Étape 5 – Mise en œuvre de la reconnaissance d'objets AR
Configurez la fonctionnalité AR pour reconnaître des objets en utilisant la caméra de l'appareil.
5.1. Configurer les autorisations
Pour Android et iOS, vous devez demander des autorisations pour la caméra.
Android
Dans android/app/src/main/AndroidManifest.xml, ajoutez :
XML
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.CAMERA" />
﻿
iOS
Dans ios/Runner/Info.plist, ajoutez :
XML
<key>NSCameraUsageDescription</key>
<string>We need to access your camera to recognize objects for language learning.</string>
<key>NSCameraUsageDescription</key>
<string>We need to access your camera to recognize objects for language learning.</string>
﻿
5.2. Implémenter la vue AR
Créez un nouveau fichier lib/screens/ar_view_screen.dart. 
Dart
import 'package:flutter/material.dart';
// Import your AR plugin here

class ARViewScreen extends StatefulWidget {
  @override
  _ARViewScreenState createState() => _ARViewScreenState();
}

class _ARViewScreenState extends State<ARViewScreen> {
  @override
  Widget build(BuildContext context) {
    // Placeholder for AR View
    return Scaffold(
      appBar: AppBar(
        title: Text('AR Language Immersion'),
      ),
      body: Center(
        child: Text('AR View Coming Soon'),
      ),
    );
  }
}
import 'package:flutter/material.dart';
// Import your AR plugin here

class ARViewScreen extends StatefulWidget {
  @override
  _ARViewScreenState createState() => _ARViewScreenState();
}

class _ARViewScreenState extends State<ARViewScreen> {
  @override
  Widget build(BuildContext context) {
    // Placeholder for AR View
    return Scaffold(
      appBar: AppBar(
        title: Text('AR Language Immersion'),
      ),
      body: Center(
        child: Text('AR View Coming Soon'),
      ),
    );
  }
}
﻿
Remarque: La mise en œuvre de la reconnaissance complète d'objets AR est complexe et peut nécessiter l'intégration avec des modèles d'apprentissage automatique comme TensorFlow Lite ou l'utilisation de plateformes comme le ML Kit de Google. Pour ce tutoriel, nous allons simuler la reconnaissance d'objets.
5.3. Simuler la reconnaissance d'objets
À des fins de démonstration, nous allons simuler la reconnaissance d'objets en affichant des objets prédéfinis.
Mettre à jour ar_view_screen.dart:
Dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class ARViewScreen extends StatefulWidget {
  @override
  _ARViewScreenState createState() => _ARViewScreenState();
}

class _ARViewScreenState extends State<ARViewScreen> {
  List<String> recognizedObjects = ['Apple', 'Book', 'Chair'];
  String selectedObject;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('AR Language Immersion'),
      ),
      body: Column(
        children: [
          Expanded(
            child: Center(
              child: Text(
                selectedObject != null
                    ? 'Recognized Object: $selectedObject'
                    : 'Point your camera at an object',
                style: TextStyle(fontSize: 20),
              ),
            ),
          ),
          Container(
            height: 150,
            child: ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: recognizedObjects.length,
              itemBuilder: (ctx, index) {
                return GestureDetector(
                  onTap: () {
                    setState(() {
                      selectedObject = recognizedObjects[index];
                    });
                  },
                  child: Card(
                    child: Container(
                      width: 100,
                      alignment: Alignment.center,
                      child: Text(recognizedObjects[index]),
                    ),
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class ARViewScreen extends StatefulWidget {
  @override
  _ARViewScreenState createState() => _ARViewScreenState();
}

class _ARViewScreenState extends State<ARViewScreen> {
  List<String> recognizedObjects = ['Apple', 'Book', 'Chair'];
  String selectedObject;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('AR Language Immersion'),
      ),
      body: Column(
        children: [
          Expanded(
            child: Center(
              child: Text(
                selectedObject != null
                    ? 'Recognized Object: $selectedObject'
                    : 'Point your camera at an object',
                style: TextStyle(fontSize: 20),
              ),
            ),
          ),
          Container(
            height: 150,
            child: ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: recognizedObjects.length,
              itemBuilder: (ctx, index) {
                return GestureDetector(
                  onTap: () {
                    setState(() {
                      selectedObject = recognizedObjects[index];
                    });
                  },
                  child: Card(
                    child: Container(
                      width: 100,
                      alignment: Alignment.center,
                      child: Text(recognizedObjects[index]),
                    ),
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}
﻿
Étape 6 – Affichage des superpositions de traduction
Récupérer les traductions de Back4App et les afficher sous forme de superpositions.
6.1. Récupérer les données de traduction
Dans ar_view_screen.dart, ajoutez une méthode pour récupérer les traductions :
Dart
Future<String> getTranslation(String objectName) async {
  QueryBuilder<ParseObject> query =
      QueryBuilder<ParseObject>(ParseObject('Translation'))
        ..whereEqualTo('ObjectName', objectName)
        ..whereEqualTo('LanguageCode', 'es'); // Example target language

  var response = await query.query();

  if (response.success && response.results != null) {
    final translation = response.results.first;
    return translation.get<String>('TranslatedText');
  } else {
    return 'Translation not found';
  }
}
Future<String> getTranslation(String objectName) async {
  QueryBuilder<ParseObject> query =
      QueryBuilder<ParseObject>(ParseObject('Translation'))
        ..whereEqualTo('ObjectName', objectName)
        ..whereEqualTo('LanguageCode', 'es'); // Example target language

  var response = await query.query();

  if (response.success && response.results != null) {
    final translation = response.results.first;
    return translation.get<String>('TranslatedText');
  } else {
    return 'Translation not found';
  }
}
﻿
6.2. Mettre à jour l'interface utilisateur pour afficher la traduction
Modifiez la build méthode :
Dart
...
Expanded(
  child: Center(
    child: selectedObject != null
        ? FutureBuilder<String>(
            future: getTranslation(selectedObject),
            builder: (ctx, snapshot) {
              if (snapshot.connectionState == ConnectionState.waiting) {
                return CircularProgressIndicator();
              } else if (snapshot.hasError) {
                return Text('Error fetching translation');
              } else {
                return Text(
                  snapshot.data,
                  style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
                );
              }
            },
          )
        : Text(
            'Point your camera at an object',
            style: TextStyle(fontSize: 20),
          ),
  ),
),
...
...
Expanded(
  child: Center(
    child: selectedObject != null
        ? FutureBuilder<String>(
            future: getTranslation(selectedObject),
            builder: (ctx, snapshot) {
              if (snapshot.connectionState == ConnectionState.waiting) {
                return CircularProgressIndicator();
              } else if (snapshot.hasError) {
                return Text('Error fetching translation');
              } else {
                return Text(
                  snapshot.data,
                  style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
                );
              }
            },
          )
        : Text(
            'Point your camera at an object',
            style: TextStyle(fontSize: 20),
          ),
  ),
),
...
﻿
Étape 7 – Fournir des informations culturelles
Récupérez et affichez des informations culturelles liées à l'objet reconnu.
7.1. Récupérer des informations culturelles
Ajoutez une méthode dans ar_view_screen.dart:
Dart
Future<String> getCulturalInfo(String objectName) async {
  QueryBuilder<ParseObject> query =
      QueryBuilder<ParseObject>(ParseObject('CulturalInfo'))
        ..whereEqualTo('ObjectName', objectName)
        ..whereEqualTo('LanguageCode', 'es'); // Example target language

  var response = await query.query();

  if (response.success && response.results != null) {
    final info = response.results.first;
    return info.get<String>('ShortDescription');
  } else {
    return 'No cultural info available';
  }
}
Future<String> getCulturalInfo(String objectName) async {
  QueryBuilder<ParseObject> query =
      QueryBuilder<ParseObject>(ParseObject('CulturalInfo'))
        ..whereEqualTo('ObjectName', objectName)
        ..whereEqualTo('LanguageCode', 'es'); // Example target language

  var response = await query.query();

  if (response.success && response.results != null) {
    final info = response.results.first;
    return info.get<String>('ShortDescription');
  } else {
    return 'No cultural info available';
  }
}
﻿
7.2. Mettre à jour l'interface utilisateur pour afficher les informations culturelles
Modifiez la build méthode:
Dart
...
return Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Text(
      snapshot.data,
      style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
    ),
    SizedBox(height: 10),
    FutureBuilder<String>(
      future: getCulturalInfo(selectedObject),
      builder: (ctx, infoSnapshot) {
        if (infoSnapshot.connectionState == ConnectionState.waiting) {
          return CircularProgressIndicator();
        } else if (infoSnapshot.hasError) {
          return Text('Error fetching cultural info');
        } else {
          return Text(
            infoSnapshot.data,
            style: TextStyle(fontSize: 16),
          );
        }
      },
    ),
  ],
);
...
...
return Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Text(
      snapshot.data,
      style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
    ),
    SizedBox(height: 10),
    FutureBuilder<String>(
      future: getCulturalInfo(selectedObject),
      builder: (ctx, infoSnapshot) {
        if (infoSnapshot.connectionState == ConnectionState.waiting) {
          return CircularProgressIndicator();
        } else if (infoSnapshot.hasError) {
          return Text('Error fetching cultural info');
        } else {
          return Text(
            infoSnapshot.data,
            style: TextStyle(fontSize: 16),
          );
        }
      },
    ),
  ],
);
...
﻿
Étape 8 – Suivi des progrès de l'utilisateur
Mettez à jour les progrès de l'utilisateur chaque fois qu'il consulte une traduction ou des informations culturelles.
8.1. Mettre à jour UserProgress dans Back4App
Ajoutez une méthode pour mettre à jour la progression :
Dart
Future<void> updateUserProgress(String objectName) async {
  final currentUser = await ParseUser.currentUser() as ParseUser;

  // Fetch UserProgress
  QueryBuilder<ParseObject> query =
      QueryBuilder<ParseObject>(ParseObject('UserProgress'))
        ..whereEqualTo('UserID', currentUser.objectId);

  var response = await query.query();

  ParseObject userProgress;

  if (response.success && response.results != null) {
    userProgress = response.results.first;
  } else {
    // Create new UserProgress
    userProgress = ParseObject('UserProgress')
      ..set('UserID', currentUser);
  }

  // Update RecognizedObjects
  List<dynamic> recognizedObjects =
      userProgress.get<List<dynamic>>('RecognizedObjects') ?? [];
  if (!recognizedObjects.contains(objectName)) {
    recognizedObjects.add(objectName);
    userProgress.set('RecognizedObjects', recognizedObjects);
    await userProgress.save();
  }
}
Future<void> updateUserProgress(String objectName) async {
  final currentUser = await ParseUser.currentUser() as ParseUser;

  // Fetch UserProgress
  QueryBuilder<ParseObject> query =
      QueryBuilder<ParseObject>(ParseObject('UserProgress'))
        ..whereEqualTo('UserID', currentUser.objectId);

  var response = await query.query();

  ParseObject userProgress;

  if (response.success && response.results != null) {
    userProgress = response.results.first;
  } else {
    // Create new UserProgress
    userProgress = ParseObject('UserProgress')
      ..set('UserID', currentUser);
  }

  // Update RecognizedObjects
  List<dynamic> recognizedObjects =
      userProgress.get<List<dynamic>>('RecognizedObjects') ?? [];
  if (!recognizedObjects.contains(objectName)) {
    recognizedObjects.add(objectName);
    userProgress.set('RecognizedObjects', recognizedObjects);
    await userProgress.save();
  }
}
﻿
8.2. Appeler updateUserProgress lorsqu'un objet est reconnu
Dans setState où selectedObject est mis à jour :
Dart
onTap: () {
  setState(() {
    selectedObject = recognizedObjects[index];
  });
  updateUserProgress(selectedObject);
},
onTap: () {
  setState(() {
    selectedObject = recognizedObjects[index];
  });
  updateUserProgress(selectedObject);
},
﻿
Étape 9 – Mise en œuvre du mode hors ligne
Assurez-vous que l'application peut fonctionner sans connexion Internet pour les fonctionnalités essentielles.
9.1. Mettre en cache les données localement
Utilisez une base de données locale comme sqflite ou hive pour stocker les traductions et les informations culturelles.
Ajoutez la dépendance hive dans pubspec.yaml:
YAML
dependencies:
  hive: ^2.0.0
  hive_flutter: ^1.1.0
dependencies:
  hive: ^2.0.0
  hive_flutter: ^1.1.0
﻿
Initialisez Hive dans main.dart:
Dart
import 'package:hive_flutter/hive_flutter.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Hive.initFlutter();

  // Initialize Parse...
}
import 'package:hive_flutter/hive_flutter.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Hive.initFlutter();

  // Initialize Parse...
}
﻿
9.2. Modifier les méthodes de récupération de données pour utiliser le cache
Mettez à jour la méthode getTranslation :
Dart
Future<String> getTranslation(String objectName) async {
  var box = await Hive.openBox('translations');
  String cacheKey = '$objectName-es'; // Example target language

  if (box.containsKey(cacheKey)) {
    return box.get(cacheKey);
  } else {
    // Fetch from Back4App
    QueryBuilder<ParseObject> query =
        QueryBuilder<ParseObject>(ParseObject('Translation'))
          ..whereEqualTo('ObjectName', objectName)
          ..whereEqualTo('LanguageCode', 'es');

    var response = await query.query();

    if (response.success && response.results != null) {
      final translation = response.results.first;
      String translatedText = translation.get<String>('TranslatedText');
      await box.put(cacheKey, translatedText);
      return translatedText;
    } else {
      return 'Translation not found';
    }
  }
}
Future<String> getTranslation(String objectName) async {
  var box = await Hive.openBox('translations');
  String cacheKey = '$objectName-es'; // Example target language

  if (box.containsKey(cacheKey)) {
    return box.get(cacheKey);
  } else {
    // Fetch from Back4App
    QueryBuilder<ParseObject> query =
        QueryBuilder<ParseObject>(ParseObject('Translation'))
          ..whereEqualTo('ObjectName', objectName)
          ..whereEqualTo('LanguageCode', 'es');

    var response = await query.query();

    if (response.success && response.results != null) {
      final translation = response.results.first;
      String translatedText = translation.get<String>('TranslatedText');
      await box.put(cacheKey, translatedText);
      return translatedText;
    } else {
      return 'Translation not found';
    }
  }
}
﻿
Répétez des étapes similaires pour getCulturalInfo.
Étape 10 – Tests et Déploiement
Testez l'application en profondeur et préparez-la pour le déploiement.
10.1. Tester sur des appareils physiques
Puisque les fonctionnalités AR nécessitent un accès à la caméra, testez l'application sur de vrais appareils.
10.2. Optimiser les performances
Utilisez des structures de données efficaces.
Minimisez les re-rendus inutiles dans l'interface utilisateur.
Optimisez les images et les médias.
10.3. Préparer le déploiement
Mettre à jour les icônes d'application et les écrans de démarrage.
Configurer les autorisations de l'application.
Construire des versions de publication pour Android et iOS.
Consultez la documentation officielle de Flutter sur la construction et la publication pour plus de détails.
Conclusion
Félicitations ! Vous avez construit une application d'immersion linguistique en AR en utilisant Flutter et Back4App. L'application reconnaît les objets, affiche des traductions et des informations culturelles, suit les progrès de l'utilisateur et fonctionne hors ligne. Vous pouvez améliorer davantage l'application en intégrant une reconnaissance d'objets AR réelle, en ajoutant plus de langues et en améliorant l'UI/UX.
Pour plus d'informations sur les fonctionnalités avancées, envisagez d'explorer :
Intégration de modèles d'apprentissage automatique: Utilisez TensorFlow Lite pour la reconnaissance d'objets sur l'appareil.
Amélioration des capacités AR: Utilisez des plugins comme arcore_flutter_plugin ou arkit_plugin pour des expériences AR plus riches.
Mise en œuvre de la synthèse vocale: Ajoutez une synthèse vocale pour les guides de prononciation en utilisant des packages comme flutter_tts.
Amélioration de l'authentification utilisateur: Implémentez des connexions sociales ou une authentification à deux facteurs.
En construisant cette application, vous avez acquis de l'expérience dans le développement Flutter, l'intégration backend avec Back4App, et des fonctionnalités essentielles comme la mise en cache des données hors ligne et le suivi des progrès de l'utilisateur. Continuez à explorer et à améliorer votre application pour créer une expérience d'apprentissage des langues encore plus engageante.
Mis à jour 23 Jan 2025
Cette page vous a-t-elle aidée?
Comment créer une application de réponse par e-mail AI avec Flutter et Back4App
Comment créer une application de réservation d'événements avec Flutter et Back4App