FlutterとBack4Appを使用してAR言語没入アプリを作成する方法

はじめに このチュートリアルでは、flutterとback4appを使用して拡張現実（ar）言語浸漬アプリを構築します。このアプリは、デバイスのカメラを通じてオブジェクトを認識し、翻訳をオーバーレイし、文化情報を提供し、ユーザーの進捗を追跡するためにar技術を活用します。このチュートリアルの終わりまでに、ユーザーが実世界の文脈で新しい言語を学ぶのを助ける機能的なアプリを持つことになります。 前提条件 このチュートリアルを完了するには、次のものが必要です flutterがインストールされていること あなたのローカルマシンに。まだ設定していない場合は、次の flutterインストールガイド https //flutter dev/docs/get started/install を参照してください。 back4appアカウント。 無料アカウントにサインアップするには、次の back4app https //www back4app com/ を訪れてください。 back4appアプリケーション。 次の back4appの使い方ガイド https //www back4app com/docs/get started に従って新しいアプリを作成してください。 dartとflutterの基本的な知識。 必要に応じて、次の flutterのドキュメント https //flutter dev/docs に目を通してください。 restful apiとdartにおける非同期プログラミングの基本的な理解。 ステップ1 – flutterプロジェクトの設定 まず、ar言語浸漬アプリを開発するための新しいflutterプロジェクトを設定します。 1 1 新しいflutterプロジェクトを作成する ターミナルを開いて、次のコマンドを実行します flutter create ar language immersion app このコマンドは、次の名前の新しいflutterプロジェクトを作成します ar language immersion app 1 2 ideでプロジェクトを開く プロジェクトディレクトリに移動し、好みのide（例：visual studio code、android studio）で開きます 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 」を開いて、次の依存関係を追加します 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 コマンドを実行します flutter pub get 3 2 アプリでparseを初期化する アプリの起動時に lib/main dart で parse を初期化します 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 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 をルートを含めるように更新します 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 , を追加します \<uses permission android\ name="android permission camera" /> ios 次に ios/runner/info plist , を追加します \<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 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'), ), ); } } 5 3 オブジェクト認識のシミュレーション デモンストレーションの目的で、事前定義されたオブジェクトを表示することでオブジェクト認識をシミュレートします。 更新 ar view screen 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]), ), ), ); }, ), ), ], ), ); } } ステップ6 – 翻訳オーバーレイの表示 back4appから翻訳を取得し、オーバーレイとして表示します。 6 1 翻訳データの取得 に ar view screen 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'; } } 6 2 翻訳を表示するためにuiを更新する の build メソッドを修正します 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 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 メソッドを修正する 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を更新する 進捗を更新するメソッドを追加します 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 を更新する場所 ontap () { setstate(() { selectedobject = recognizedobjects\[index]; }); updateuserprogress(selectedobject); }, ステップ9 – オフラインモードの実装 アプリがコア機能のためにインターネット接続なしで機能できることを確認します。 9 1 データをローカルにキャッシュする ローカルデータベースを使用します sqflite または hive を使用して翻訳と文化情報を保存します。 に hive 依存関係を追加します pubspec yaml dependencies hive ^2 0 0 hive flutter ^1 1 0 においてhiveを初期化します main dart import 'package\ hive flutter/hive flutter dart'; void main() async { widgetsflutterbinding ensureinitialized(); await hive initflutter(); // initialize parse } 9 2 データ取得メソッドをキャッシュを使用するように修正する を更新します gettranslation メソッド 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の公式ドキュメントの ビルドとリリース https //flutter dev/docs/deployment を参照してください。 結論 おめでとうございます！ flutterとback4appを使用してar言語浸漬アプリを構築しました。このアプリはオブジェクトを認識し、翻訳と文化情報を表示し、ユーザーの進捗を追跡し、オフラインで動作します。実際のarオブジェクト認識を統合し、さらに多くの言語を追加し、ui/uxを改善することで、アプリをさらに強化できます。 高度な機能に関する詳細情報については、次のことを検討してください 機械学習モデルの統合 デバイス上でのオブジェクト認識にtensorflow liteを使用します。 ar機能の強化 arcore flutter plugin や arkit plugin などのプラグインを利用して、より豊かなar体験を提供します。 テキスト読み上げの実装 flutter tts などのパッケージを使用して発音ガイドのための音声合成を追加します。 ユーザー認証の改善 ソーシャルログインや二要素認証を実装します。 このアプリを構築することで、flutter開発、back4appとのバックエンド統合、オフラインデータキャッシングやユーザー進捗追跡などの基本機能に関する経験を得ました。さらに探求し、アプリを強化して、より魅力的な言語学習体験を作り出してください。