如何使用 Flutter 和 Back4App 构建增强现实语言沉浸应用程序

介绍 在本教程中，您将使用 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 项目 首先，设置一个新的 flutter 项目，在其中开发 ar 语言沉浸应用程序。 1 1 创建一个新的 flutter 项目 打开终端并运行以下命令： flutter create ar language immersion app 此命令创建一个名为 ar language immersion app 的新 flutter 项目。 1 2 在您的 ide 中打开项目 导航到项目目录并在您喜欢的 ide 中打开它（例如，visual studio code，android studio）： cd ar language immersion app 步骤 2 – 配置 back4app 后端 在 back4app 上设置您的后端，以处理用户数据、翻译、文化信息和用户进度跟踪。 2 1 在 back4app 上创建新应用程序 登录到您的 back4app 账户。 点击 "创建新应用" 。 输入 "ar 语言沉浸应用" 作为应用名称。 点击 "创建" 。 2 2 设置数据模型 根据数据模型定义类： 用户 可识别对象 翻译 文化信息 用户进度 2 2 1 创建用户类 “ 用户 ”类是 back4app 中处理用户身份验证的默认类。 导航到 核心 > 浏览器 在您的 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 (指向可识别对象的指针) 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/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'), ), ); } }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 来存储翻译和文化信息。 在 pubspec yaml 中添加 hive 依赖： dependencies hive ^2 0 0 hive flutter ^1 1 0 在 main dart 中初始化 hive： 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 在物理设备上测试 由于增强现实功能需要相机访问，请在真实设备上测试应用程序。 10 2 优化性能 使用高效的数据结构。 最小化用户界面中的不必要重新渲染。 优化图像和媒体资产。 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的后端集成以及离线数据缓存和用户进度跟踪等基本功能的经验。继续探索和增强你的应用，以创造更具吸引力的语言学习体验。