Come costruire un'app di immersione linguistica in AR con Flutter e Back4App

introduzione in questo tutorial, costruirai un'app di immersione linguistica in realtà aumentata (ar) utilizzando flutter e back4app l'app sfrutta la tecnologia ar per riconoscere oggetti attraverso la fotocamera del dispositivo, sovrapporre traduzioni, fornire informazioni culturali e monitorare i progressi dell'utente alla fine di questo tutorial, avrai un'app funzionale che aiuta gli utenti ad imparare nuove lingue in contesti reali prerequisiti per completare questo tutorial, avrai bisogno di flutter installato sul tuo computer locale se non l'hai ancora configurato, segui la guida all'installazione di flutter https //flutter dev/docs/get started/install un account back4app registrati per un account gratuito su back4app https //www back4app com/ un'app back4app crea una nuova app seguendo la guida per iniziare con back4app https //www back4app com/docs/get started conoscenze di base di dart e flutter familiarizzati con la documentazione di flutter https //flutter dev/docs se necessario comprensione di base delle api restful e della programmazione asincrona in dart passo 1 – configurazione del progetto flutter per prima cosa, configura un nuovo progetto flutter dove svilupperai l'app di immersione linguistica in ar 1 1 crea un nuovo progetto flutter apri il tuo terminale e esegui il seguente comando flutter create ar language immersion app questo comando crea un nuovo progetto flutter chiamato ar language immersion app 1 2 apri il progetto nel tuo ide naviga nella directory del progetto e aprila nel tuo ide preferito (ad esempio, visual studio code, android studio) cd ar language immersion app passo 2 – configurazione del backend di back4app configura il tuo backend su back4app per gestire i dati degli utenti, le traduzioni, le informazioni culturali e il tracciamento dei progressi degli utenti 2 1 crea una nuova applicazione su back4app accedi al tuo account back4app clicca su "crea nuova app" inserisci "ar language immersion app" come nome dell'app clicca su "crea" 2 2 impostare il modello di dati definisci le classi secondo il modello di dati utente oggettoriconoscibile traduzione infoculturale progressoutente 2 2 1 crea la classe utente la classe utente è una classe predefinita in back4app per gestire l'autenticazione degli utenti naviga su core > browser nel tuo dashboard di back4app vedrai la classe user già disponibile 2 2 2 crea la classe recognizableobject clicca su "crea una classe" scegli "personalizzato" e chiamalo "recognizableobject" clicca "crea classe" aggiungi le seguenti colonne nome (stringa) categoria (stringa) imagereference (file) 2 2 3 crea la classe translation crea un'altra classe chiamata "translation" aggiungi le seguenti colonne objectid (stringa) \[predefinito] objectid (puntatore a recognizableobject) languagecode (stringa) translatedtext (stringa) pronunciationguide (stringa) audiofilereference (file) 2 2 4 crea la classe culturalinfo crea una classe chiamata "culturalinfo" aggiungi le seguenti colonne objectid (puntatore a recognizableobject) languagecode (stringa) shortdescription (stringa) detailedinformation (stringa) relatedmediareferences (array di file) 2 2 5 crea la classe userprogress crea una classe chiamata "userprogress" aggiungi le seguenti colonne userid (puntatore all'utente) recognizedobjects (array di id di oggetti riconoscibili) translationsviewed (array di id di traduzioni) culturalinfoaccessed (array di id di informazioni culturali) learningstreaks (numero) proficiencyscores (dizionario) 2 3 recupera le chiavi dell'applicazione vai a impostazioni app > sicurezza e chiavi annota il tuo id dell'applicazione e chiave client ; ne avrai bisogno per inizializzare parse nella tua app flutter passo 3 – integrazione del sdk parse in flutter integra il parse sdk fornito da back4app nel tuo progetto flutter per comunicare con il backend 3 1 aggiungi dipendenze apri pubspec yaml e aggiungi le seguenti dipendenze 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 esegui il comando flutter pub get 3 2 inizializza parse nella tua app in lib/main dart , inizializza parse durante l'avvio dell'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()); } sostituisci 'your application id' e 'your client key' con le chiavi che hai ottenuto da back4app passo 4 – implementazione dell'autenticazione utente implementare le funzionalità di registrazione e accesso degli utenti 4 1 creare la schermata di autenticazione creare un nuovo file 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 aggiornare main dart per includere le rotte in lib/main dart , aggiorna il tuo materialapp per includere le rotte 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(), }, ); } } passo 5 – implementazione del riconoscimento degli oggetti ar configura la funzionalità ar per riconoscere oggetti utilizzando la fotocamera del dispositivo 5 1 configurare i permessi per android e ios, è necessario richiedere i permessi per la fotocamera android in android/app/src/main/androidmanifest xml , aggiungi \<uses permission android\ name="android permission camera" /> ios in ios/runner/info plist , aggiungi \<key>nscamerausagedescription\</key> \<string>we need to access your camera to recognize objects for language learning \</string> 5 2 implementare la vista ar crea un nuovo file 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 simulare il riconoscimento degli oggetti a scopo dimostrativo, simuleremo il riconoscimento degli oggetti visualizzando oggetti predefiniti aggiorna 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]), ), ), ); }, ), ), ], ), ); } } passo 6 – visualizzazione delle traduzioni sovrapposte recupera le traduzioni da back4app e visualizzale come sovrapposizioni 6 1 recupera i dati di traduzione in ar view screen dart , aggiungi un metodo per recuperare le traduzioni 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 aggiorna l'interfaccia utente per mostrare la traduzione modifica il build metodo 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), ), ), ), passo 7 – fornire informazioni culturali recupera e visualizza informazioni culturali relative all'oggetto riconosciuto 7 1 recupera informazioni culturali aggiungi un metodo 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 aggiorna l'interfaccia utente per mostrare informazioni culturali modifica il build metodo 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), ); } }, ), ], ); passo 8 – monitoraggio dei progressi dell'utente aggiorna i progressi dell'utente ogni volta che visualizzano una traduzione o informazioni culturali 8 1 aggiorna userprogress in back4app aggiungi un metodo per aggiornare i progressi 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 chiama updateuserprogress quando un oggetto viene riconosciuto in setstate dove selectedobject viene aggiornato ontap () { setstate(() { selectedobject = recognizedobjects\[index]; }); updateuserprogress(selectedobject); }, passo 9 – implementazione della modalità offline assicurati che l'app possa funzionare senza una connessione internet per le funzionalità principali 9 1 memorizza i dati localmente utilizza un database locale come sqflite o hive per memorizzare traduzioni e informazioni culturali aggiungi la dipendenza hive in pubspec yaml dependencies hive ^2 0 0 hive flutter ^1 1 0 inizializza hive in main dart import 'package\ hive flutter/hive flutter dart'; void main() async { widgetsflutterbinding ensureinitialized(); await hive initflutter(); // initialize parse } 9 2 modifica i metodi di recupero dei dati per utilizzare la cache aggiorna il metodo 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'; } } } ripeti passaggi simili per getculturalinfo passo 10 – test e distribuzione testa l'app in modo approfondito e preparala per la distribuzione 10 1 test su dispositivi fisici poiché le funzionalità ar richiedono l'accesso alla fotocamera, testa l'app su dispositivi reali 10 2 ottimizza le prestazioni utilizza strutture dati efficienti minimizza i re render non necessari nell'interfaccia utente ottimizza le immagini e i media 10 3 preparati per la distribuzione aggiorna le icone dell'app e le schermate di avvio configura i permessi dell'app crea versioni di rilascio per android e ios fai riferimento alla documentazione ufficiale di flutter su creazione e rilascio https //flutter dev/docs/deployment per ulteriori dettagli conclusione congratulazioni! hai costruito un'app di immersione linguistica ar utilizzando flutter e back4app l'app riconosce oggetti, visualizza traduzioni e informazioni culturali, tiene traccia dei progressi dell'utente e funziona offline puoi migliorare ulteriormente l'app integrando il riconoscimento reale degli oggetti ar, aggiungendo più lingue e migliorando l'interfaccia utente/l'esperienza utente per ulteriori informazioni sulle funzionalità avanzate, considera di esplorare integrazione di modelli di apprendimento automatico usa tensorflow lite per il riconoscimento degli oggetti sul dispositivo miglioramento delle capacità ar utilizza plugin come arcore flutter plugin o arkit plugin per esperienze ar più ricche implementazione del text to speech aggiungi sintesi vocale per le guide di pronuncia utilizzando pacchetti come flutter tts miglioramento dell'autenticazione utente implementa accessi social o autenticazione a due fattori costruendo questa app, hai acquisito esperienza nello sviluppo di flutter, integrazione del backend con back4app e funzionalità essenziali come la memorizzazione nella cache dei dati offline e il tracciamento dei progressi degli utenti continua a esplorare e migliorare la tua app per creare un'esperienza di apprendimento linguistico ancora più coinvolgente