Modelli Flutter
Come costruire un'app di immersione linguistica in AR con Flutter e Back4App

40min
Introduzione
In questo tutorial, costruirai un'app di Immersione Linguistica in Realtà Aumentata (AR) utilizzando Flutter e Back4App. L'app sfrutta la tecnologia AR per riconoscere oggetti attraverso la fotocamera del dispositivo, sovrapporre traduzioni, fornire informazioni culturali e monitorare i progressi dell'utente. Alla fine di questo tutorial, avrai un'app funzionale che aiuta gli utenti ad imparare nuove lingue in contesti reali.
Prerequisiti
Per completare questo tutorial, avrai bisogno di:
Flutter installato sul tuo computer locale. Se non l'hai ancora configurato, segui la guida all'installazione di Flutter.
Un account Back4App. Registrati per un account gratuito su Back4App.
Un'app Back4App. Crea una nuova app seguendo la guida per iniziare con Back4App.
Conoscenze di base di Dart e Flutter. Familiarizzati con la documentazione di Flutter se necessario.
Comprensione di base delle API RESTful e della programmazione asincrona in Dart.
Passo 1 – Configurazione del Progetto Flutter
Per prima cosa, configura un nuovo progetto Flutter dove svilupperai l'app di Immersione Linguistica in AR.
1.1. Crea un Nuovo Progetto Flutter
Apri il tuo terminale e esegui il seguente comando:
Bash
flutter create ar_language_immersion_app
flutter create ar_language_immersion_app
﻿
Questo comando crea un nuovo progetto Flutter chiamato ar_language_immersion_app.
1.2. Apri il Progetto nel Tuo IDE
Naviga nella directory del progetto e aprila nel tuo IDE preferito (ad esempio, Visual Studio Code, Android Studio):
Bash
cd ar_language_immersion_app
cd ar_language_immersion_app
﻿
Passo 2 – Configurazione del Backend di Back4App
Configura il tuo backend su Back4App per gestire i dati degli utenti, le traduzioni, le informazioni culturali e il tracciamento dei progressi degli utenti.
2.1. Crea una nuova applicazione su Back4App
Accedi al tuo account Back4App.
Clicca su "Crea nuova App".
Inserisci "AR Language Immersion App" come nome dell'app.
Clicca su "Crea".
2.2. Impostare il modello di dati
Definisci le classi secondo il modello di dati:
Utente
OggettoRiconoscibile
Traduzione
InfoCulturale
ProgressoUtente
2.2.1. Crea la classe Utente
La classe Utente è una classe predefinita in Back4App per gestire l'autenticazione degli utenti.
Naviga su Core > Browser nel tuo dashboard di Back4App.
Vedrai la classe _User già disponibile.
2.2.2. Crea la classe RecognizableObject
Clicca su "Crea una classe".
Scegli "Personalizzato" e chiamalo "RecognizableObject".
Clicca "Crea classe".
Aggiungi le seguenti colonne:
Nome (Stringa)
Categoria (Stringa)
ImageReference (File)
2.2.3. Crea la classe Translation
Crea un'altra classe chiamata "Translation".
Aggiungi le seguenti colonne:
objectId (Stringa) [Predefinito]
ObjectID (Puntatore a RecognizableObject)
LanguageCode (Stringa)
TranslatedText (Stringa)
PronunciationGuide (Stringa)
AudioFileReference (File)
2.2.4. Crea la classe CulturalInfo
Crea una classe chiamata "CulturalInfo".
Aggiungi le seguenti colonne:
ObjectID (Puntatore a RecognizableObject)
LanguageCode (Stringa)
ShortDescription (Stringa)
DetailedInformation (Stringa)
RelatedMediaReferences (Array di File)
2.2.5. Crea la classe UserProgress
Crea una classe chiamata "UserProgress".
Aggiungi le seguenti colonne:
UserID (Puntatore all'utente)
RecognizedObjects (Array di ID di oggetti riconoscibili)
TranslationsViewed (Array di ID di traduzioni)
CulturalInfoAccessed (Array di ID di informazioni culturali)
LearningStreaks (Numero)
ProficiencyScores (Dizionario)
2.3. Recupera le chiavi dell'applicazione
Vai a Impostazioni App > Sicurezza e Chiavi.
Annota il tuo ID dell'applicazione e Chiave client; ne avrai bisogno per inizializzare Parse nella tua app Flutter.
Passo 3 – Integrazione del SDK Parse in Flutter
Integra il Parse SDK fornito da Back4App nel tuo progetto Flutter per comunicare con il backend.
3.1. Aggiungi Dipendenze
Apri pubspec.yaml e aggiungi le seguenti dipendenze:
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
﻿
Esegui il comando:
Bash
flutter pub get
flutter pub get
﻿
Nota: Poiché non esiste un plugin AR ufficiale chiamato augmented_reality_plugin, potresti dover utilizzare plugin come arcore_flutter_plugin per Android e arkit_plugin per iOS. Regola di conseguenza in base alle tue piattaforme target.
3.2. Inizializza Parse nella tua App
In lib/main.dart, inizializza Parse durante l'avvio dell'app:
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());
}
﻿
Sostituisci 'YOUR_APPLICATION_ID' e 'YOUR_CLIENT_KEY' con le chiavi che hai ottenuto da Back4App.
Passo 4 – Implementazione dell'autenticazione utente
Implementare le funzionalità di registrazione e accesso degli utenti.
4.1. Creare la schermata di autenticazione
Creare un nuovo file 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. Aggiornare main.dart per includere le rotte
In lib/main.dart, aggiorna il tuo MaterialApp per includere le rotte:
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(),
      },
    );
  }
}
﻿
Passo 5 – Implementazione del Riconoscimento degli Oggetti AR
Configura la funzionalità AR per riconoscere oggetti utilizzando la fotocamera del dispositivo.
5.1. Configurare i Permessi
Per Android e iOS, è necessario richiedere i permessi per la fotocamera.
Android
In android/app/src/main/AndroidManifest.xml, aggiungi:
XML
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.CAMERA" />
﻿
iOS
In ios/Runner/Info.plist, aggiungi:
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. Implementare la Vista AR
Crea un nuovo file 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'),
      ),
    );
  }
}
﻿
Nota: Implementare il riconoscimento completo degli oggetti AR è complesso e potrebbe richiedere l'integrazione con modelli di machine learning come TensorFlow Lite o l'uso di piattaforme come il ML Kit di Google. Per questo tutorial, simuleremo il riconoscimento degli oggetti.
5.3. Simulare il Riconoscimento degli Oggetti
A scopo dimostrativo, simuleremo il riconoscimento degli oggetti visualizzando oggetti predefiniti.
Aggiorna 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]),
                    ),
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}
﻿
Passo 6 – Visualizzazione delle Traduzioni Sovrapposte
Recupera le traduzioni da Back4App e visualizzale come sovrapposizioni.
6.1. Recupera i Dati di Traduzione
In ar_view_screen.dart, aggiungi un metodo per recuperare le traduzioni:
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. Aggiorna l'interfaccia utente per mostrare la traduzione
Modifica il build metodo:
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),
          ),
  ),
),
...
﻿
Passo 7 – Fornire informazioni culturali
Recupera e visualizza informazioni culturali relative all'oggetto riconosciuto.
7.1. Recupera informazioni culturali
Aggiungi un metodo in 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. Aggiorna l'interfaccia utente per mostrare informazioni culturali
Modifica il build metodo:
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),
          );
        }
      },
    ),
  ],
);
...
﻿
Passo 8 – Monitoraggio dei progressi dell'utente
Aggiorna i progressi dell'utente ogni volta che visualizzano una traduzione o informazioni culturali.
8.1. Aggiorna UserProgress in Back4App
Aggiungi un metodo per aggiornare i progressi:
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. Chiama updateUserProgress quando un oggetto viene riconosciuto
In setState dove selectedObject viene aggiornato:
Dart
onTap: () {
  setState(() {
    selectedObject = recognizedObjects[index];
  });
  updateUserProgress(selectedObject);
},
onTap: () {
  setState(() {
    selectedObject = recognizedObjects[index];
  });
  updateUserProgress(selectedObject);
},
﻿
Passo 9 – Implementazione della modalità offline
Assicurati che l'app possa funzionare senza una connessione internet per le funzionalità principali.
9.1. Memorizza i dati localmente
Utilizza un database locale come sqflite o hive per memorizzare traduzioni e informazioni culturali.
Aggiungi la dipendenza hive in pubspec.yaml:
YAML
dependencies:
  hive: ^2.0.0
  hive_flutter: ^1.1.0
dependencies:
  hive: ^2.0.0
  hive_flutter: ^1.1.0
﻿
Inizializza Hive in 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. Modifica i metodi di recupero dei dati per utilizzare la cache
Aggiorna il metodo 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';
    }
  }
}
﻿
Ripeti passaggi simili per getCulturalInfo.
Passo 10 – Test e Distribuzione
Testa l'app in modo approfondito e preparala per la distribuzione.
10.1. Test su Dispositivi Fisici
Poiché le funzionalità AR richiedono l'accesso alla fotocamera, testa l'app su dispositivi reali.
10.2. Ottimizza le Prestazioni
Utilizza strutture dati efficienti.
Minimizza i re-render non necessari nell'interfaccia utente.
Ottimizza le immagini e i media.
10.3. Preparati per la Distribuzione
Aggiorna le icone dell'app e le schermate di avvio.
Configura i permessi dell'app.
Crea versioni di rilascio per Android e iOS.
Fai riferimento alla documentazione ufficiale di Flutter su creazione e rilascio per ulteriori dettagli.
Conclusione
Congratulazioni! Hai costruito un'app di Immersione Linguistica AR utilizzando Flutter e Back4App. L'app riconosce oggetti, visualizza traduzioni e informazioni culturali, tiene traccia dei progressi dell'utente e funziona offline. Puoi migliorare ulteriormente l'app integrando il riconoscimento reale degli oggetti AR, aggiungendo più lingue e migliorando l'interfaccia utente/l'esperienza utente.
Per ulteriori informazioni sulle funzionalità avanzate, considera di esplorare:
Integrazione di Modelli di Apprendimento Automatico: Usa TensorFlow Lite per il riconoscimento degli oggetti sul dispositivo.
Miglioramento delle Capacità AR: Utilizza plugin come arcore_flutter_plugin o arkit_plugin per esperienze AR più ricche.
Implementazione del Text-to-Speech: Aggiungi sintesi vocale per le guide di pronuncia utilizzando pacchetti come flutter_tts.
Miglioramento dell'Autenticazione Utente: Implementa accessi social o autenticazione a due fattori.
Costruendo questa app, hai acquisito esperienza nello sviluppo di Flutter, integrazione del backend con Back4App e funzionalità essenziali come la memorizzazione nella cache dei dati offline e il tracciamento dei progressi degli utenti. Continua a esplorare e migliorare la tua app per creare un'esperienza di apprendimento linguistico ancora più coinvolgente.
Aggiornato 23 Jan 2025
Questa pagina ti è stata di aiuto?
Come creare un'app per rispondere alle email con intelligenza artificiale utilizzando Flutter e Back4App?
AVANTI IL PROSSIMO
Come creare un'app per la prenotazione di eventi con Flutter e Back4App?