Comment créer une application d'immersion linguistique en réalité augmentée avec Flutter et Back4App

introduction dans ce tutoriel, vous allez créer une application d'immersion linguistique en réalité augmentée (ar) en utilisant flutter et back4app l'application utilise la technologie ar pour reconnaître des objets via la caméra de l'appareil, superposer des traductions, fournir des informations culturelles et suivre les progrès de l'utilisateur à la fin de ce tutoriel, vous disposerez d'une application fonctionnelle qui aide les utilisateurs à apprendre de nouvelles langues dans des contextes réels prérequis pour compléter ce tutoriel, vous aurez besoin de flutter installé sur votre machine locale si vous ne l'avez pas encore configuré, suivez le guide d'installation de flutter https //flutter dev/docs/get started/install un compte back4app inscrivez vous pour un compte gratuit sur back4app https //www back4app com/ une application back4app créez une nouvelle application en suivant le guide de démarrage avec back4app https //www back4app com/docs/get started connaissances de base en dart et flutter familiarisez vous avec la documentation de flutter https //flutter dev/docs si nécessaire compréhension de base des api restful et de la programmation asynchrone en dart étape 1 – configuration du projet flutter tout d'abord, configurez un nouveau projet flutter où vous développerez l'application d'immersion linguistique ar 1 1 créer un nouveau projet flutter ouvrez votre terminal et exécutez la commande suivante flutter create ar language immersion app cette commande crée un nouveau projet flutter nommé ar language immersion app 1 2 ouvrez le projet dans votre ide naviguez vers le répertoire du projet et ouvrez le dans votre ide préféré (par exemple, visual studio code, android studio) cd ar language immersion app étape 2 – configuration du backend back4app configurez votre backend sur back4app pour gérer les données utilisateur, les traductions, les informations culturelles et le suivi des progrès des utilisateurs 2 1 créer une nouvelle application sur back4app connectez vous à votre compte back4app cliquez sur "créer une nouvelle application" entrez "application d'immersion linguistique ar" comme nom de l'application cliquez sur "créer" 2 2 configuration du modèle de données définissez les classes selon le modèle de données utilisateur objetreconnaissable traduction infoculturelle progressionutilisateur 2 2 1 créer la classe utilisateur la classe utilisateur est une classe par défaut dans back4app pour gérer l'authentification des utilisateurs accédez à core > navigateur dans votre tableau de bord back4app vous verrez la classe user déjà disponible 2 2 2 créer la classe recognizableobject cliquez sur "créer une classe" choisissez "personnalisé" et nommez le "recognizableobject" cliquez sur "créer une classe" ajoutez les colonnes suivantes nom (chaîne) catégorie (chaîne) imagereference (fichier) 2 2 3 créer la classe translation créez une autre classe nommée "translation" ajoutez les colonnes suivantes objectid (chaîne) \[par défaut] objectid (pointeur vers recognizableobject) languagecode (chaîne) translatedtext (chaîne) pronunciationguide (chaîne) audiofilereference (fichier) 2 2 4 créer la classe culturalinfo créer une classe nommée "culturalinfo" ajouter les colonnes suivantes objectid (pointeur vers recognizableobject) languagecode (chaîne) shortdescription (chaîne) detailedinformation (chaîne) relatedmediareferences (tableau de fichiers) 2 2 5 créer la classe userprogress créer une classe nommée "userprogress" ajouter les colonnes suivantes identifiantutilisateur (pointeur vers l'utilisateur) objetsreconnaissables (tableau d'ids d'objetreconnaissable) traductionsvues (tableau d'ids de traduction) infosculturellesaccédées (tableau d'ids d'infoculturelle) sériesd'apprentissage (nombre) scoresdecompétence (dictionnaire) 2 3 récupérer les clés de l'application allez à paramètres de l'application > sécurité & clés notez votre identifiant d'application et clé client ; vous en aurez besoin pour initialiser parse dans votre application flutter étape 3 – intégration du sdk parse dans flutter intégrez le sdk parse fourni par back4app dans votre projet flutter pour communiquer avec le backend 3 1 ajouter des dépendances ouvrez pubspec yaml et ajoutez les dépendances suivantes 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 exécutez la commande flutter pub get 3 2 initialiser parse dans votre application dans lib/main dart , initialisez parse lors du démarrage de l'application 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()); } remplacez 'your application id' et 'your client key' par les clés que vous avez obtenues de back4app étape 4 – mise en œuvre de l'authentification des utilisateurs implémentez les fonctionnalités d'enregistrement et de connexion des utilisateurs 4 1 créer l'écran d'authentification créez un nouveau fichier 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 mettre à jour main dart pour inclure des routes dans lib/main dart , mettez à jour votre materialapp pour inclure des routes 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(), }, ); } } étape 5 – mise en œuvre de la reconnaissance d'objets ar configurez la fonctionnalité ar pour reconnaître des objets en utilisant la caméra de l'appareil 5 1 configurer les autorisations pour android et ios, vous devez demander des autorisations pour la caméra android dans android/app/src/main/androidmanifest xml , ajoutez \<uses permission android\ name="android permission camera" /> ios dans ios/runner/info plist , ajoutez \<key>nscamerausagedescription\</key> \<string>we need to access your camera to recognize objects for language learning \</string> 5 2 implémenter la vue ar créez un nouveau fichier 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 simuler la reconnaissance d'objets à des fins de démonstration, nous allons simuler la reconnaissance d'objets en affichant des objets prédéfinis mettre à jour 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]), ), ), ); }, ), ), ], ), ); } } étape 6 – affichage des superpositions de traduction récupérer les traductions de back4app et les afficher sous forme de superpositions 6 1 récupérer les données de traduction dans ar view screen dart , ajoutez une méthode pour récupérer les traductions 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 mettre à jour l'interface utilisateur pour afficher la traduction modifiez la build méthode 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), ), ), ), étape 7 – fournir des informations culturelles récupérez et affichez des informations culturelles liées à l'objet reconnu 7 1 récupérer des informations culturelles ajoutez une méthode dans 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 mettre à jour l'interface utilisateur pour afficher les informations culturelles modifiez la build méthode 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), ); } }, ), ], ); étape 8 – suivi des progrès de l'utilisateur mettez à jour les progrès de l'utilisateur chaque fois qu'il consulte une traduction ou des informations culturelles 8 1 mettre à jour userprogress dans back4app ajoutez une méthode pour mettre à jour la progression 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 appeler updateuserprogress lorsqu'un objet est reconnu dans setstate où selectedobject est mis à jour ontap () { setstate(() { selectedobject = recognizedobjects\[index]; }); updateuserprogress(selectedobject); }, étape 9 – mise en œuvre du mode hors ligne assurez vous que l'application peut fonctionner sans connexion internet pour les fonctionnalités essentielles 9 1 mettre en cache les données localement utilisez une base de données locale comme sqflite ou hive pour stocker les traductions et les informations culturelles ajoutez la dépendance hive dans pubspec yaml dependencies hive ^2 0 0 hive flutter ^1 1 0 initialisez hive dans main dart import 'package\ hive flutter/hive flutter dart'; void main() async { widgetsflutterbinding ensureinitialized(); await hive initflutter(); // initialize parse } 9 2 modifier les méthodes de récupération de données pour utiliser le cache mettez à jour la méthode 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'; } } } répétez des étapes similaires pour getculturalinfo étape 10 – tests et déploiement testez l'application en profondeur et préparez la pour le déploiement 10 1 tester sur des appareils physiques puisque les fonctionnalités ar nécessitent un accès à la caméra, testez l'application sur de vrais appareils 10 2 optimiser les performances utilisez des structures de données efficaces minimisez les re rendus inutiles dans l'interface utilisateur optimisez les images et les médias 10 3 préparer le déploiement mettre à jour les icônes d'application et les écrans de démarrage configurer les autorisations de l'application construire des versions de publication pour android et ios consultez la documentation officielle de flutter sur la construction et la publication https //flutter dev/docs/deployment pour plus de détails conclusion félicitations ! vous avez construit une application d'immersion linguistique en ar en utilisant flutter et back4app l'application reconnaît les objets, affiche des traductions et des informations culturelles, suit les progrès de l'utilisateur et fonctionne hors ligne vous pouvez améliorer davantage l'application en intégrant une reconnaissance d'objets ar réelle, en ajoutant plus de langues et en améliorant l'ui/ux pour plus d'informations sur les fonctionnalités avancées, envisagez d'explorer intégration de modèles d'apprentissage automatique utilisez tensorflow lite pour la reconnaissance d'objets sur l'appareil amélioration des capacités ar utilisez des plugins comme arcore flutter plugin ou arkit plugin pour des expériences ar plus riches mise en œuvre de la synthèse vocale ajoutez une synthèse vocale pour les guides de prononciation en utilisant des packages comme flutter tts amélioration de l'authentification utilisateur implémentez des connexions sociales ou une authentification à deux facteurs en construisant cette application, vous avez acquis de l'expérience dans le développement flutter, l'intégration backend avec back4app, et des fonctionnalités essentielles comme la mise en cache des données hors ligne et le suivi des progrès de l'utilisateur continuez à explorer et à améliorer votre application pour créer une expérience d'apprentissage des langues encore plus engageante