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

введение в этом учебном пособии вы создадите приложение для погружения в язык с дополненной реальностью (ar) с использованием flutter и back4app приложение использует технологии 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, в котором вы будете разрабатывать приложение для погружения в язык с дополненной реальностью 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 нажмите на "создать новое приложение" введите "приложение для погружения в язык" в качестве имени приложения нажмите "создать" 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 и добавьте следующие зависимости 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 view создайте новый файл 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 обновите интерфейс для отображения перевода измените метод 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 обновите интерфейс пользователя, чтобы показать культурную информацию измените метод 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 обновите userprogress в back4app добавьте метод для обновления прогресса 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 оптимизация производительности используйте эффективные структуры данных минимизируйте ненужные перерисовки в пользовательском интерфейсе оптимизируйте изображения и медиа ресурсы 10 3 подготовка к развертыванию обновите значки приложений и экраны загрузки настройте разрешения приложений создайте версии для выпуска для android и ios смотрите официальную документацию flutter по созданию и выпуску https //flutter dev/docs/deployment для получения дополнительной информации заключение поздравляем! вы создали приложение для погружения в язык дополненной реальности с использованием flutter и back4app приложение распознает объекты, отображает переводы и культурную информацию, отслеживает прогресс пользователя и работает в оффлайн режиме вы можете дополнительно улучшить приложение, интегрировав реальное распознавание объектов дополненной реальности, добавив больше языков и улучшив интерфейс/опыт пользователя для получения дополнительной информации о расширенных функциях рассмотрите возможность изучения интеграция моделей машинного обучения используйте tensorflow lite для распознавания объектов на устройстве улучшение возможностей ar используйте плагины, такие как arcore flutter plugin или arkit plugin для более насыщенного опыта ar реализация синтеза речи добавьте синтез речи для руководств по произношению, используя пакеты, такие как flutter tts улучшение аутентификации пользователей реализуйте социальные входы или двухфакторную аутентификацию создавая это приложение, вы приобрели опыт в разработке на flutter, интеграции с back4app и основных функциях, таких как кэширование данных в оффлайн режиме и отслеживание прогресса пользователей продолжайте исследовать и улучшать ваше приложение, чтобы создать еще более увлекательный опыт изучения языка