Wie man eine AR-Sprachimmersion-App mit Flutter und Back4App erstellt

einführung in diesem tutorial werden sie eine augmented reality (ar) sprachimmersion app mit flutter und back4app erstellen die app nutzt ar technologie, um objekte über die kamera des geräts zu erkennen, übersetzungen zu überlagern, kulturelle informationen bereitzustellen und den fortschritt der benutzer zu verfolgen am ende dieses tutorials haben sie eine funktionale app, die benutzern hilft, neue sprachen in realen kontexten zu lernen voraussetzungen um dieses tutorial abzuschließen, benötigen sie flutter installiert auf ihrem lokalen rechner wenn sie es noch nicht eingerichtet haben, folgen sie der flutter installationsanleitung https //flutter dev/docs/get started/install ein back4app konto melden sie sich für ein kostenloses konto bei back4app https //www back4app com/ an eine back4app anwendung erstellen sie eine neue app, indem sie der getting started with back4app anleitung https //www back4app com/docs/get started folgen grundkenntnisse in dart und flutter machen sie sich gegebenenfalls mit der dokumentation von flutter https //flutter dev/docs vertraut grundverständnis von restful apis und asynchroner programmierung in dart schritt 1 – einrichten des flutter projekts zuerst richten sie ein neues flutter projekt ein, in dem sie die ar sprachimmersion app entwickeln werden 1 1 erstellen sie ein neues flutter projekt öffnen sie ihr terminal und führen sie den folgenden befehl aus flutter create ar language immersion app dieser befehl erstellt ein neues flutter projekt mit dem namen ar language immersion app 1 2 öffnen sie das projekt in ihrer ide navigieren sie zum projektverzeichnis und öffnen sie es in ihrer bevorzugten ide (z b visual studio code, android studio) cd ar language immersion app schritt 2 – konfigurieren des back4app backends richten sie ihr backend auf back4app ein, um benutzerdaten, übersetzungen, kulturelle informationen und die verfolgung des benutzerfortschritts zu verwalten 2 1 erstellen sie eine neue anwendung auf back4app melden sie sich bei ihrem back4app konto an klicken sie auf "neue app erstellen" geben sie "ar language immersion app" als app namen ein klicken sie auf "erstellen" 2 2 einrichten des datenmodells definieren sie die klassen gemäß dem datenmodell benutzer erkennbaresobjekt übersetzung kulturinfo benutzerfortschritt 2 2 1 erstellen sie die benutzerklasse die benutzer klasse ist eine standardklasse in back4app zur handhabung der benutzerauthentifizierung navigieren sie zu core > browser in ihrem back4app dashboard sie werden die benutzer klasse bereits verfügbar sehen 2 2 2 erstellen sie die recognizableobject klasse klicken sie auf "klasse erstellen" wählen sie "benutzerdefiniert" und benennen sie es "recognizableobject" klicken sie "klasse erstellen" fügen sie die folgenden spalten hinzu name (string) kategorie (string) imagereference (datei) 2 2 3 erstellen sie die translation klasse erstellen sie eine weitere klasse mit dem namen "translation" fügen sie die folgenden spalten hinzu objectid (string) \[standard] objectid (zeiger auf recognizableobject) languagecode (string) translatedtext (string) pronunciationguide (string) audiofilereference (datei) 2 2 4 erstellen sie die culturalinfo klasse erstellen sie eine klasse mit dem namen "culturalinfo" fügen sie die folgenden spalten hinzu objectid (zeiger auf recognizableobject) languagecode (string) shortdescription (string) detailedinformation (string) relatedmediareferences (array von dateien) 2 2 5 erstellen sie die userprogress klasse erstellen sie eine klasse mit dem namen "userprogress" fügen sie die folgenden spalten hinzu benutzer id (zeiger auf benutzer) erkannteobjekte (array von erkennbaren objekt ids) übersetzungenangesehen (array von übersetzungs ids) kulturelleinfozugriff (array von kulturellen info ids) lernphasen (zahl) fähigkeitswerte (wörterbuch) 2 3 anwendungs schlüssel abrufen gehe zu app einstellungen > sicherheit & schlüssel notiere deine anwendungs id und client schlüssel ; du wirst sie benötigen, um parse in deiner flutter app zu initialisieren schritt 3 – integration des parse sdk in flutter integrieren sie das von back4app bereitgestellte parse sdk in ihr flutter projekt, um mit dem backend zu kommunizieren 3 1 abhängigkeiten hinzufügen öffnen sie pubspec yaml und fügen sie die folgenden abhängigkeiten hinzu 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 führen sie den befehl aus flutter pub get 3 2 initialisieren sie parse in ihrer app in lib/main dart , initialisiere parse beim start der app 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()); } ersetze 'your application id' und 'your client key' mit den schlüsseln, die du von back4app erhalten hast schritt 4 – implementierung der benutzerauthentifizierung implementieren sie die benutzerregistrierungs und anmeldefunktionen 4 1 erstellen sie den authentifizierungsbildschirm erstellen sie eine neue datei 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 aktualisierung main dart um routen einzuschließen in lib/main dart , aktualisieren sie ihre materialapp um routen einzuschließen 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(), }, ); } } schritt 5 – implementierung der ar objekterkennung richten sie die ar funktionalität ein, um objekte mit der kamera des geräts zu erkennen 5 1 berechtigungen einrichten für sowohl android als auch ios müssen sie kameraberechtigungen anfordern android in android/app/src/main/androidmanifest xml , hinzufügen \<uses permission android\ name="android permission camera" /> ios in ios/runner/info plist , hinzufügen \<key>nscamerausagedescription\</key> \<string>we need to access your camera to recognize objects for language learning \</string> 5 2 implementieren sie die ar ansicht erstellen sie eine neue datei 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 objekterkennung simulieren zu demonstrationszwecken werden wir die objekterkennung simulieren, indem wir vordefinierte objekte anzeigen aktualisieren sie 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]), ), ), ); }, ), ), ], ), ); } } schritt 6 – übersetzungsüberlagerungen anzeigen übersetzungen von back4app abrufen und als überlagerungen anzeigen 6 1 übersetzungsdaten abrufen in ar view screen dart , fügen sie eine methode hinzu, um übersetzungen abzurufen 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 aktualisieren, um die übersetzung anzuzeigen ändern sie die build methode 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), ), ), ), schritt 7 – bereitstellung kultureller informationen abrufen und anzeigen kultureller informationen, die mit dem erkannten objekt verbunden sind 7 1 kulturelle informationen abrufen fügen sie eine methode in 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 aktualisieren, um kulturelle informationen anzuzeigen ändern sie die build methode 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), ); } }, ), ], ); schritt 8 – benutzerfortschritt verfolgen aktualisieren sie den fortschritt des benutzers jedes mal, wenn er eine übersetzung oder kulturelle informationen anzeigt 8 1 benutzerfortschritt in back4app aktualisieren fügen sie eine methode hinzu, um den fortschritt zu aktualisieren 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 aufrufen, wenn ein objekt erkannt wird in setstate wo selectedobject aktualisiert wird ontap () { setstate(() { selectedobject = recognizedobjects\[index]; }); updateuserprogress(selectedobject); }, schritt 9 – offline modus implementieren stellen sie sicher, dass die app ohne internetverbindung für die kernfunktionen funktionieren kann 9 1 daten lokal zwischenspeichern verwenden sie eine lokale datenbank wie sqflite oder hive um übersetzungen und kulturelle informationen zu speichern fügen sie die hive abhängigkeit in pubspec yaml dependencies hive ^2 0 0 hive flutter ^1 1 0 initialisieren sie hive in main dart import 'package\ hive flutter/hive flutter dart'; void main() async { widgetsflutterbinding ensureinitialized(); await hive initflutter(); // initialize parse } 9 2 datenabrufmethoden anpassen, um cache zu verwenden aktualisieren sie die gettranslation methode 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'; } } } wiederholen sie ähnliche schritte für getculturalinfo schritt 10 – testen und bereitstellung testen sie die app gründlich und bereiten sie sie auf die bereitstellung vor 10 1 testen auf physischen geräten da ar funktionen kamerazugriff erfordern, testen sie die app auf echten geräten 10 2 leistung optimieren verwenden sie effiziente datenstrukturen minimieren sie unnötige neuzeichnungen in der benutzeroberfläche optimieren sie bild und medienressourcen 10 3 vorbereitung auf die bereitstellung aktualisieren sie app icons und splashscreens konfigurieren sie die app berechtigungen erstellen sie release versionen für android und ios verweisen sie auf die offizielle dokumentation von flutter zu erstellung und veröffentlichung https //flutter dev/docs/deployment für weitere details fazit herzlichen glückwunsch! sie haben eine ar sprachimmersion app mit flutter und back4app erstellt die app erkennt objekte, zeigt übersetzungen und kulturelle informationen an, verfolgt den fortschritt der benutzer und funktioniert offline sie können die app weiter verbessern, indem sie die echte ar objekterkennung integrieren, weitere sprachen hinzufügen und die ui/ux verbessern für weitere informationen zu erweiterten funktionen sollten sie folgendes erkunden integration von machine learning modellen verwenden sie tensorflow lite für die objekterkennung auf dem gerät verbesserung der ar funktionen nutzen sie plugins wie arcore flutter plugin oder arkit plugin für reichhaltigere ar erlebnisse implementierung von text to speech fügen sie sprachsynthese für aussprachehilfen mit paketen wie flutter tts hinzu verbesserung der benutzer authentifizierung implementieren sie soziale logins oder eine zwei faktor authentifizierung durch den bau dieser app haben sie erfahrung in der flutter entwicklung, der backend integration mit back4app und grundlegenden funktionen wie offline daten caching und benutzerfortschrittsverfolgung gesammelt erkunden sie weiter und verbessern sie ihre app, um ein noch ansprechenderes spracherlebnis zu schaffen