フラッターテンプレート
FlutterとBack4Appを使用してAR言語没入アプリを作成する方法

38min
はじめに
このチュートリアルでは、FlutterとBack4Appを使用して拡張現実（AR）言語浸漬アプリを構築します。このアプリは、デバイスのカメラを通じてオブジェクトを認識し、翻訳をオーバーレイし、文化情報を提供し、ユーザーの進捗を追跡するためにAR技術を活用します。このチュートリアルの終わりまでに、ユーザーが実世界の文脈で新しい言語を学ぶのを助ける機能的なアプリを持つことになります。
前提条件
このチュートリアルを完了するには、次のものが必要です:
Flutterがインストールされていること あなたのローカルマシンに。まだ設定していない場合は、次の Flutterインストールガイドを参照してください。
Back4Appアカウント。 無料アカウントにサインアップするには、次の Back4Appを訪れてください。
Back4Appアプリケーション。 次の Back4Appの使い方ガイドに従って新しいアプリを作成してください。
DartとFlutterの基本的な知識。 必要に応じて、次の Flutterのドキュメントに目を通してください。
RESTful APIとDartにおける非同期プログラミングの基本的な理解。
ステップ1 – Flutterプロジェクトの設定
まず、AR言語浸漬アプリを開発するための新しい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アカウントにログインします。
「"Create new App"」をクリックします。
アプリ名として「"AR Language Immersion App"」を入力します。
「"Create"」をクリックします。
2.2. データモデルの設定
データモデルに従ってクラスを定義します:
ユーザー
認識可能なオブジェクト
翻訳
文化情報
ユーザー進捗
2.2.1. ユーザークラスを作成する
「ユーザー」クラスは、ユーザー認証を処理するためのBack4Appのデフォルトクラスです。
Back4Appダッシュボードの「Core > Browser」に移動します。
「_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 (認識可能なオブジェクトへのポインタ)
LanguageCode (文字列)
ShortDescription (文字列)
DetailedInformation (文字列)
RelatedMediaReferences (ファイルの配列)
2.2.5. UserProgressクラスを作成します
クラスを作成します "UserProgress".
次の列を追加します:
ユーザーID (ユーザーへのポインタ)
認識されたオブジェクト (認識可能なオブジェクトIDの配列)
表示された翻訳 (翻訳IDの配列)
アクセスされた文化情報 (文化情報IDの配列)
学習の連続 (数)
熟練度スコア (辞書)
2.3. アプリケーションキーの取得
次に進む アプリ設定 > セキュリティとキー.
あなたの アプリケーションID と クライアントキー をメモしてください。FlutterアプリでParseを初期化するために必要です。
ステップ3 – Parse SDKをFlutterに統合する
Back4Appが提供するParse SDKを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
﻿
注意: 「augmented_reality_plugin」という公式のARプラグインは存在しないため、Android用には「arcore_flutter_plugin」、iOS用には「arkit_plugin」のようなプラグインを使用する必要があるかもしれません。ターゲットプラットフォームに応じて調整してください。
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ビューを実装する
新しいファイルを作成します 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のような機械学習モデルとの統合や、GoogleのML Kitのようなプラットフォームの使用が必要になる場合があります。このチュートリアルでは、オブジェクト認識をシミュレートします。
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. 翻訳を表示するためにUIを更新する
の 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. UIを更新して文化情報を表示する
の 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. Back4AppでUserProgressを更新する
進捗を更新するメソッドを追加します:
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. パフォーマンスの最適化
効率的なデータ構造を使用します。
UIでの不必要な再レンダリングを最小限に抑えます。
画像やメディアアセットを最適化します。
10.3. デプロイメントの準備
アプリのアイコンとスプラッシュスクリーンを更新します。
アプリの権限を設定します。
AndroidとiOSのリリースバージョンをビルドします。
詳細については、Flutterの公式ドキュメントの ビルドとリリース を参照してください。
結論
おめでとうございます！ FlutterとBack4Appを使用してAR言語浸漬アプリを構築しました。このアプリはオブジェクトを認識し、翻訳と文化情報を表示し、ユーザーの進捗を追跡し、オフラインで動作します。実際のARオブジェクト認識を統合し、さらに多くの言語を追加し、UI/UXを改善することで、アプリをさらに強化できます。
高度な機能に関する詳細情報については、次のことを検討してください:
機械学習モデルの統合: デバイス上でのオブジェクト認識にTensorFlow Liteを使用します。
AR機能の強化: arcore_flutter_pluginやarkit_pluginなどのプラグインを利用して、より豊かなAR体験を提供します。
テキスト読み上げの実装: flutter_ttsなどのパッケージを使用して発音ガイドのための音声合成を追加します。
ユーザー認証の改善: ソーシャルログインや二要素認証を実装します。
このアプリを構築することで、Flutter開発、Back4Appとのバックエンド統合、オフラインデータキャッシングやユーザー進捗追跡などの基本機能に関する経験を得ました。さらに探求し、アプリを強化して、より魅力的な言語学習体験を作り出してください。
更新日 24 Jan 2025
このページは役に立ちましたか？
FlutterとBack4Appを使用してAIメール応答アプリを構築する方法
FlutterとBack4Appを使ってイベント予約アプリを構築する方法