Flutter Templates
Как создать приложение для языкового погружения с дополненной реальностью на Flutter и Back4App

40min
Введение
В этом учебном пособии вы создадите приложение для погружения в язык с дополненной реальностью (AR) с использованием Flutter и Back4App. Приложение использует технологии AR для распознавания объектов через камеру устройства, наложения переводов, предоставления культурной информации и отслеживания прогресса пользователя. К концу этого учебного пособия у вас будет функциональное приложение, которое поможет пользователям изучать новые языки в реальных условиях.
Предварительные требования
Чтобы завершить это учебное пособие, вам потребуется:
Установленный Flutter на вашем локальном компьютере. Если вы еще не настроили его, следуйте руководству по установке Flutter.
Аккаунт Back4App. Зарегистрируйтесь для получения бесплатного аккаунта на Back4App.
Приложение Back4App. Создайте новое приложение, следуя руководству по началу работы с Back4App.
Базовые знания Dart и Flutter. Ознакомьтесь с документацией Flutter при необходимости.
Базовое понимание RESTful API и асинхронного программирования в Dart.
Шаг 1 – Настройка проекта Flutter
Сначала создайте новый проект Flutter, в котором вы будете разрабатывать приложение для погружения в язык с дополненной реальностью.
1.1. Создание нового проекта Flutter
Откройте терминал и выполните следующую команду:
Bash
flutter create ar_language_immersion_app
flutter create ar_language_immersion_app
﻿
Эта команда создает новый проект Flutter с именем ar_language_immersion_app.
1.2. Откройте проект в вашей IDE
Перейдите в каталог проекта и откройте его в вашей предпочтительной IDE (например, Visual Studio Code, Android Studio):
Bash
cd ar_language_immersion_app
cd ar_language_immersion_app
﻿
Шаг 2 – Настройка бэкенда Back4App
Настройте ваш бэкенд на Back4App для обработки данных пользователей, переводов, культурной информации и отслеживания прогресса пользователей.
2.1. Создание нового приложения на Back4App
Войдите в свою учетную запись Back4App.
Нажмите на "Создать новое приложение".
Введите "Приложение для погружения в язык" в качестве имени приложения.
Нажмите "Создать".
2.2. Настройка модели данных
Определите классы в соответствии с моделью данных:
Пользователь
РаспознаваемыйОбъект
Перевод
КультурнаяИнформация
ПрогрессПользователя
2.2.1. Создание класса Пользователь
Класс Пользователь является классом по умолчанию в Back4App для обработки аутентификации пользователей.
Перейдите в Core > Browser в вашей панели управления Back4App.
Вы увидите класс _User уже доступен.
2.2.2. Создайте класс RecognizableObject
Нажмите на "Создать класс".
Выберите "Пользовательский" и назовите его "RecognizableObject".
Нажмите "Создать класс".
Добавьте следующие столбцы:
Имя (Строка)
Категория (Строка)
ImageReference (Файл)
2.2.3. Создайте класс Translation
Создайте другой класс с именем "Translation".
Добавьте следующие столбцы:
objectId (Строка) [По умолчанию]
ObjectID (Указатель на RecognizableObject)
LanguageCode (Строка)
TranslatedText (Строка)
PronunciationGuide (Строка)
AudioFileReference (Файл)
2.2.4. Создайте класс CulturalInfo
Создайте класс с именем "CulturalInfo".
Добавьте следующие столбцы:
ObjectID (Указатель на RecognizableObject)
LanguageCode (Строка)
ShortDescription (Строка)
DetailedInformation (Строка)
RelatedMediaReferences (Массив файлов)
2.2.5. Создайте класс UserProgress
Создайте класс с именем "UserProgress".
Добавьте следующие столбцы:
UserID (Указатель на пользователя)
RecognizedObjects (Массив идентификаторов распознаваемых объектов)
TranslationsViewed (Массив идентификаторов переводов)
CulturalInfoAccessed (Массив идентификаторов культурной информации)
LearningStreaks (Число)
ProficiencyScores (Словарь)
2.3. Получить ключи приложения
Перейдите в Настройки приложения > Безопасность и ключи.
Запишите ваш Идентификатор приложения и Ключ клиента; они понадобятся вам для инициализации Parse в вашем приложении Flutter.
Шаг 3 – Интеграция Parse SDK в Flutter
Интегрируйте SDK Parse, предоставленный Back4App, в ваш проект Flutter для связи с сервером.
3.1. Добавить зависимости
Откройте pubspec.yaml и добавьте следующие зависимости:
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
﻿
Запустите команду:
Bash
flutter pub get
flutter pub get
﻿
Примечание: Поскольку нет официального AR плагина под названием augmented_reality_plugin, вам, возможно, придется использовать такие плагины, как arcore_flutter_plugin для Android и arkit_plugin для iOS. Настройте в соответствии с вашими целевыми платформами.
3.2. Инициализируйте Parse в вашем приложении
В lib/main.dart, инициализируйте Parse во время запуска приложения:
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());
}
﻿
Замените 'YOUR_APPLICATION_ID' и 'YOUR_CLIENT_KEY' на ключи, которые вы получили от Back4App.
Шаг 4 – Реализация аутентификации пользователей
Реализуйте функции регистрации и входа пользователя.
4.1. Создать экран аутентификации
Создайте новый файл 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. Обновление main.dart для включения маршрутов
В lib/main.dart, обновите ваш MaterialApp для включения маршрутов:
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(),
      },
    );
  }
}
﻿
Шаг 5 – Реализация распознавания AR объектов
Настройте функциональность AR для распознавания объектов с помощью камеры устройства.
5.1. Настройка разрешений
Для Android и iOS вам необходимо запросить разрешения на использование камеры.
Android
В android/app/src/main/AndroidManifest.xml, добавьте:
XML
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.CAMERA" />
﻿
iOS
В ios/Runner/Info.plist, добавьте:
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. Реализуйте AR View
Создайте новый файл 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'),
      ),
    );
  }
}
﻿
Примечание: Реализация полной распознавания объектов AR является сложной задачей и может потребовать интеграции с моделями машинного обучения, такими как TensorFlow Lite, или использования платформ, таких как ML Kit от Google. В этом учебном пособии мы будем имитировать распознавание объектов.
5.3. Имитировать распознавание объектов
Для демонстрационных целей мы будем имитировать распознавание объектов, отображая заранее определенные объекты.
Обновите 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]),
                    ),
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}
﻿
Шаг 6 – Отображение наложений перевода
Получите переводы из Back4App и отображайте их в виде наложений.
6.1. Получение данных перевода
В ar_view_screen.dart, добавьте метод для получения переводов:
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. Обновите интерфейс для отображения перевода
Измените метод build:
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),
          ),
  ),
),
...
﻿
Шаг 7 – Предоставление культурной информации
Получите и отобразите культурную информацию, связанную с распознанным объектом.
7.1. Получение культурной информации
Добавьте метод в 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. Обновите интерфейс пользователя, чтобы показать культурную информацию
Измените метод build:
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),
          );
        }
      },
    ),
  ],
);
...
﻿
Шаг 8 – Отслеживание прогресса пользователя
Обновляйте прогресс пользователя каждый раз, когда он просматривает перевод или культурную информацию.
8.1. Обновите UserProgress в Back4App
Добавьте метод для обновления прогресса:
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, когда объект распознан
В setState где selectedObject обновляется:
Dart
onTap: () {
  setState(() {
    selectedObject = recognizedObjects[index];
  });
  updateUserProgress(selectedObject);
},
onTap: () {
  setState(() {
    selectedObject = recognizedObjects[index];
  });
  updateUserProgress(selectedObject);
},
﻿
Шаг 9 – Реализация оффлайн-режима
Убедитесь, что приложение может работать без подключения к интернету для основных функций.
9.1. Кэширование данных локально
Используйте локальную базу данных, такую как sqflite или hive для хранения переводов и культурной информации.
Добавьте hive зависимость в pubspec.yaml:
YAML
dependencies:
  hive: ^2.0.0
  hive_flutter: ^1.1.0
dependencies:
  hive: ^2.0.0
  hive_flutter: ^1.1.0
﻿
Инициализируйте Hive в 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. Измените методы получения данных для использования кэша
Обновите 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';
    }
  }
}
﻿
Повторите аналогичные шаги для getCulturalInfo.
Шаг 10 – Тестирование и Развертывание
Тщательно протестируйте приложение и подготовьте его к развертыванию.
10.1. Тестирование на физических устройствах
Поскольку функции AR требуют доступа к камере, протестируйте приложение на реальных устройствах.
10.2. Оптимизация производительности
Используйте эффективные структуры данных.
Минимизируйте ненужные перерисовки в пользовательском интерфейсе.
Оптимизируйте изображения и медиа-ресурсы.
10.3. Подготовка к развертыванию
Обновите значки приложений и экраны загрузки.
Настройте разрешения приложений.
Создайте версии для выпуска для Android и iOS.
Смотрите официальную документацию Flutter по созданию и выпуску для получения дополнительной информации.
Заключение
Поздравляем! Вы создали приложение для погружения в язык дополненной реальности с использованием Flutter и Back4App. Приложение распознает объекты, отображает переводы и культурную информацию, отслеживает прогресс пользователя и работает в оффлайн-режиме. Вы можете дополнительно улучшить приложение, интегрировав реальное распознавание объектов дополненной реальности, добавив больше языков и улучшив интерфейс/опыт пользователя.
Для получения дополнительной информации о расширенных функциях рассмотрите возможность изучения:
Интеграция моделей машинного обучения: Используйте TensorFlow Lite для распознавания объектов на устройстве.
Улучшение возможностей AR: Используйте плагины, такие как arcore_flutter_plugin или arkit_plugin для более насыщенного опыта AR.
Реализация синтеза речи: Добавьте синтез речи для руководств по произношению, используя пакеты, такие как flutter_tts.
Улучшение аутентификации пользователей: Реализуйте социальные входы или двухфакторную аутентификацию.
Создавая это приложение, вы приобрели опыт в разработке на Flutter, интеграции с Back4App и основных функциях, таких как кэширование данных в оффлайн-режиме и отслеживание прогресса пользователей. Продолжайте исследовать и улучшать ваше приложение, чтобы создать еще более увлекательный опыт изучения языка.
Обновлено 23 Jan 2025
Помогла ли вам эта страница?
Как создать приложение AI-ответчика на электронные письма с помощью Flutter и Back4App
Как создать приложение для бронирования событий с помощью Flutter и Back4App