Flutter-Vorlagen
Wie man eine AR-Sprachimmersion-App mit Flutter und Back4App erstellt

41min
Einführung
In diesem Tutorial werden Sie eine Augmented Reality (AR) Sprachimmersion-App mit Flutter und Back4App erstellen. Die App nutzt AR-Technologie, um Objekte über die Kamera des Geräts zu erkennen, Übersetzungen zu überlagern, kulturelle Informationen bereitzustellen und den Fortschritt der Benutzer zu verfolgen. Am Ende dieses Tutorials haben Sie eine funktionale App, die Benutzern hilft, neue Sprachen in realen Kontexten zu lernen.
Voraussetzungen
Um dieses Tutorial abzuschließen, benötigen Sie:
Flutter installiert auf Ihrem lokalen Rechner. Wenn Sie es noch nicht eingerichtet haben, folgen Sie der Flutter-Installationsanleitung.
Ein Back4App-Konto. Melden Sie sich für ein kostenloses Konto bei Back4App an.
Eine Back4App-Anwendung. Erstellen Sie eine neue App, indem Sie der Getting Started with Back4App-Anleitung folgen.
Grundkenntnisse in Dart und Flutter. Machen Sie sich gegebenenfalls mit der Dokumentation von Flutter vertraut.
Grundverständnis von RESTful APIs und asynchroner Programmierung in Dart.
Schritt 1 – Einrichten des Flutter-Projekts
Zuerst richten Sie ein neues Flutter-Projekt ein, in dem Sie die AR-Sprachimmersion-App entwickeln werden.
1.1. Erstellen Sie ein neues Flutter-Projekt
Öffnen Sie Ihr Terminal und führen Sie den folgenden Befehl aus:
Bash
flutter create ar_language_immersion_app
flutter create ar_language_immersion_app
﻿
Dieser Befehl erstellt ein neues Flutter-Projekt mit dem Namen ar_language_immersion_app.
1.2. Öffnen Sie das Projekt in Ihrer IDE
Navigieren Sie zum Projektverzeichnis und öffnen Sie es in Ihrer bevorzugten IDE (z. B. Visual Studio Code, Android Studio):
Bash
cd ar_language_immersion_app
cd ar_language_immersion_app
﻿
Schritt 2 – Konfigurieren des Back4App-Backends
Richten Sie Ihr Backend auf Back4App ein, um Benutzerdaten, Übersetzungen, kulturelle Informationen und die Verfolgung des Benutzerfortschritts zu verwalten.
2.1. Erstellen Sie eine neue Anwendung auf Back4App
Melden Sie sich bei Ihrem Back4App-Konto an.
Klicken Sie auf "Neue App erstellen".
Geben Sie "AR Language Immersion App" als App-Namen ein.
Klicken Sie auf "Erstellen".
2.2. Einrichten des Datenmodells
Definieren Sie die Klassen gemäß dem Datenmodell:
Benutzer
ErkennbaresObjekt
Übersetzung
KulturInfo
BenutzerFortschritt
2.2.1. Erstellen Sie die Benutzerklasse
Die Benutzer-Klasse ist eine Standardklasse in Back4App zur Handhabung der Benutzerauthentifizierung.
Navigieren Sie zu Core > Browser in Ihrem Back4App-Dashboard.
Sie werden die _Benutzer-Klasse bereits verfügbar sehen.
2.2.2. Erstellen Sie die RecognizableObject-Klasse
Klicken Sie auf "Klasse erstellen".
Wählen Sie "Benutzerdefiniert" und benennen Sie es "RecognizableObject".
Klicken Sie "Klasse erstellen".
Fügen Sie die folgenden Spalten hinzu:
Name (String)
Kategorie (String)
ImageReference (Datei)
2.2.3. Erstellen Sie die Translation-Klasse
Erstellen Sie eine weitere Klasse mit dem Namen "Translation".
Fügen Sie die folgenden Spalten hinzu:
objectId (String) [Standard]
ObjectID (Zeiger auf RecognizableObject)
LanguageCode (String)
TranslatedText (String)
PronunciationGuide (String)
AudioFileReference (Datei)
2.2.4. Erstellen Sie die CulturalInfo-Klasse
Erstellen Sie eine Klasse mit dem Namen "CulturalInfo".
Fügen Sie die folgenden Spalten hinzu:
ObjectID (Zeiger auf RecognizableObject)
LanguageCode (String)
ShortDescription (String)
DetailedInformation (String)
RelatedMediaReferences (Array von Dateien)
2.2.5. Erstellen Sie die UserProgress-Klasse
Erstellen Sie eine Klasse mit dem Namen "UserProgress".
Fügen Sie die folgenden Spalten hinzu:
Benutzer-ID (Zeiger auf Benutzer)
ErkannteObjekte (Array von erkennbaren Objekt-IDs)
ÜbersetzungenAngesehen (Array von Übersetzungs-IDs)
KulturelleInfoZugriff (Array von kulturellen Info-IDs)
Lernphasen (Zahl)
Fähigkeitswerte (Wörterbuch)
2.3. Anwendungs-Schlüssel abrufen
Gehe zu App-Einstellungen > Sicherheit & Schlüssel.
Notiere deine Anwendungs-ID und Client-Schlüssel; du wirst sie benötigen, um Parse in deiner Flutter-App zu initialisieren.
Schritt 3 – Integration des Parse SDK in Flutter
Integrieren Sie das von Back4App bereitgestellte Parse SDK in Ihr Flutter-Projekt, um mit dem Backend zu kommunizieren.
3.1. Abhängigkeiten hinzufügen
Öffnen Sie pubspec.yaml und fügen Sie die folgenden Abhängigkeiten hinzu:
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
﻿
Führen Sie den Befehl aus:
Bash
flutter pub get
flutter pub get
﻿
Hinweis: Da es kein offizielles AR-Plugin mit dem Namen augmented_reality_plugin, müssen Sie möglicherweise Plugins wie arcore_flutter_plugin für Android und arkit_plugin für iOS verwenden. Passen Sie dies entsprechend Ihren Zielplattformen an.
3.2. Initialisieren Sie Parse in Ihrer App
In lib/main.dart, initialisiere Parse beim Start der 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());
}
﻿
Ersetze 'YOUR_APPLICATION_ID' und 'YOUR_CLIENT_KEY' mit den Schlüsseln, die du von Back4App erhalten hast.
Schritt 4 – Implementierung der Benutzerauthentifizierung
Implementieren Sie die Benutzerregistrierungs- und Anmeldefunktionen.
4.1. Erstellen Sie den Authentifizierungsbildschirm
Erstellen Sie eine neue Datei 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. Aktualisierung main.dart um Routen einzuschließen
In lib/main.dart, aktualisieren Sie Ihre MaterialApp um Routen einzuschließen:
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(),
      },
    );
  }
}
﻿
Schritt 5 – Implementierung der AR-Objekterkennung
Richten Sie die AR-Funktionalität ein, um Objekte mit der Kamera des Geräts zu erkennen.
5.1. Berechtigungen einrichten
Für sowohl Android als auch iOS müssen Sie Kameraberechtigungen anfordern.
Android
In android/app/src/main/AndroidManifest.xml, hinzufügen:
XML
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.CAMERA" />
﻿
iOS
In ios/Runner/Info.plist, hinzufügen:
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. Implementieren Sie die AR-Ansicht
Erstellen Sie eine neue Datei 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'),
      ),
    );
  }
}
﻿
Hinweis: Die Implementierung der vollständigen AR-Objekterkennung ist komplex und kann die Integration mit maschinellen Lernmodellen wie TensorFlow Lite oder die Verwendung von Plattformen wie Googles ML Kit erfordern. Für dieses Tutorial werden wir die Objekterkennung simulieren.
5.3. Objekterkennung simulieren
Zu Demonstrationszwecken werden wir die Objekterkennung simulieren, indem wir vordefinierte Objekte anzeigen.
Aktualisieren Sie 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]),
                    ),
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}
﻿
Schritt 6 – Übersetzungsüberlagerungen anzeigen
Übersetzungen von Back4App abrufen und als Überlagerungen anzeigen.
6.1. Übersetzungsdaten abrufen
In ar_view_screen.dart, fügen Sie eine Methode hinzu, um Übersetzungen abzurufen:
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. UI aktualisieren, um die Übersetzung anzuzeigen
Ändern Sie die build Methode:
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),
          ),
  ),
),
...
﻿
Schritt 7 – Bereitstellung kultureller Informationen
Abrufen und Anzeigen kultureller Informationen, die mit dem erkannten Objekt verbunden sind.
7.1. Kulturelle Informationen abrufen
Fügen Sie eine Methode 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. UI aktualisieren, um kulturelle Informationen anzuzeigen
Ändern Sie die build Methode:
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),
          );
        }
      },
    ),
  ],
);
...
﻿
Schritt 8 – Benutzerfortschritt verfolgen
Aktualisieren Sie den Fortschritt des Benutzers jedes Mal, wenn er eine Übersetzung oder kulturelle Informationen anzeigt.
8.1. Benutzerfortschritt in Back4App aktualisieren
Fügen Sie eine Methode hinzu, um den Fortschritt zu aktualisieren:
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. updateUserProgress aufrufen, wenn ein Objekt erkannt wird
In setState wo selectedObject aktualisiert wird:
Dart
onTap: () {
  setState(() {
    selectedObject = recognizedObjects[index];
  });
  updateUserProgress(selectedObject);
},
onTap: () {
  setState(() {
    selectedObject = recognizedObjects[index];
  });
  updateUserProgress(selectedObject);
},
﻿
Schritt 9 – Offline-Modus implementieren
Stellen Sie sicher, dass die App ohne Internetverbindung für die Kernfunktionen funktionieren kann.
9.1. Daten lokal zwischenspeichern
Verwenden Sie eine lokale Datenbank wie sqflite oder hive um Übersetzungen und kulturelle Informationen zu speichern.
Fügen Sie die hive Abhängigkeit in pubspec.yaml:
YAML
dependencies:
  hive: ^2.0.0
  hive_flutter: ^1.1.0
dependencies:
  hive: ^2.0.0
  hive_flutter: ^1.1.0
﻿
Initialisieren Sie 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. Datenabrufmethoden anpassen, um Cache zu verwenden
Aktualisieren Sie die getTranslation Methode:
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';
    }
  }
}
﻿
Wiederholen Sie ähnliche Schritte für getCulturalInfo.
Schritt 10 – Testen und Bereitstellung
Testen Sie die App gründlich und bereiten Sie sie auf die Bereitstellung vor.
10.1. Testen auf physischen Geräten
Da AR-Funktionen Kamerazugriff erfordern, testen Sie die App auf echten Geräten.
10.2. Leistung optimieren
Verwenden Sie effiziente Datenstrukturen.
Minimieren Sie unnötige Neuzeichnungen in der Benutzeroberfläche.
Optimieren Sie Bild- und Medienressourcen.
10.3. Vorbereitung auf die Bereitstellung
Aktualisieren Sie App-Icons und Splashscreens.
Konfigurieren Sie die App-Berechtigungen.
Erstellen Sie Release-Versionen für Android und iOS.
Verweisen Sie auf die offizielle Dokumentation von Flutter zu Erstellung und Veröffentlichung für weitere Details.
Fazit
Herzlichen Glückwunsch! Sie haben eine AR-Sprachimmersion-App mit Flutter und Back4App erstellt. Die App erkennt Objekte, zeigt Übersetzungen und kulturelle Informationen an, verfolgt den Fortschritt der Benutzer und funktioniert offline. Sie können die App weiter verbessern, indem Sie die echte AR-Objekterkennung integrieren, weitere Sprachen hinzufügen und die UI/UX verbessern.
Für weitere Informationen zu erweiterten Funktionen sollten Sie Folgendes erkunden:
Integration von Machine Learning-Modellen: Verwenden Sie TensorFlow Lite für die Objekterkennung auf dem Gerät.
Verbesserung der AR-Funktionen: Nutzen Sie Plugins wie arcore_flutter_plugin oder arkit_plugin für reichhaltigere AR-Erlebnisse.
Implementierung von Text-to-Speech: Fügen Sie Sprachsynthese für Aussprachehilfen mit Paketen wie flutter_tts hinzu.
Verbesserung der Benutzer-Authentifizierung: Implementieren Sie soziale Logins oder eine Zwei-Faktor-Authentifizierung.
Durch den Bau dieser App haben Sie Erfahrung in der Flutter-Entwicklung, der Backend-Integration mit Back4App und grundlegenden Funktionen wie Offline-Daten-Caching und Benutzerfortschrittsverfolgung gesammelt. Erkunden Sie weiter und verbessern Sie Ihre App, um ein noch ansprechenderes Spracherlebnis zu schaffen.
Aktualisiert 23 Jan 2025
Hat Ihnen diese Seite geholfen?
Wie man eine KI-E-Mail-Antwort-App mit Flutter und Back4App erstellt
ALS NÄCHSTES
Wie man eine Veranstaltungsbuchungs-App mit Flutter und Back4App erstellt