Come costruire un'app di traduzione vocale AI utilizzando Flutter e Back4App

introduzione in questo tutorial, imparerai come costruire un'app di traduzione vocale ai utilizzando flutter come framework frontend e back4app come servizio backend l'app permetterà agli utenti di tradurre discorsi, testi e immagini in più lingue presenterà funzionalità di traduzione potenziate dall'ai, riconoscimento ottico dei caratteri (ocr) e riconoscimento vocale alla fine di questo tutorial, avrai costruito un'app in grado di gestire traduzioni in tempo reale e memorizzare la cronologia su back4app per un uso futuro prerequisiti per completare questo tutorial, avrai bisogno di un account back4app registrati per un account gratuito su back4app https //www back4app com/ flutter sdk installato sul tuo computer locale segui la guida all'installazione di flutter https //flutter dev/docs/get started/install conoscenze di base di dart e flutter se sei nuovo a flutter, rivedi la documentazione di flutter https //flutter dev/docs prima di procedere un account con un fornitore di api di traduzione come google cloud translation o deepl familiarità con le api rest e la programmazione asincrona in dart passo 1 — configurare il tuo backend back4app in questo passaggio, configurerai un'applicazione back4app, definirai i modelli di dati e configurerai il backend per memorizzare la cronologia delle traduzioni, le lingue e i dati degli utenti 1 1 crea una nuova applicazione su back4app accedi al tuo dashboard di back4app https //dashboard back4app com/ clicca su "crea nuova app" inserisci un nome app (ad es , "traduttore vocale ai") e seleziona la tua icona app scegli la tua posizione del server se richiesto clicca "crea" 1 2 recupera le chiavi dell'applicazione naviga su impostazioni app > sicurezza e chiavi nel dashboard della tua app annota il id applicazione e il client key questi saranno necessari per la configurazione dell'app flutter 1 3 definisci i tuoi modelli di dati creeremo le seguenti classi in back4app utente (predefinito) traduzione lingua frase vocedeldizionario 1 3 1 crea la classe traduzione vai a database > browser clicca su "crea una classe" scegli "personalizzato" e chiamalo traduzione clicca su "crea classe" aggiungi le seguenti colonne a traduzione utente (pointer< user>) punta all'oggetto utente linguadiorigine (string) codice della lingua di origine linguadidestinazione (string) codice della lingua di destinazione testodiorigine (string) il testo originale da tradurre testotradotto (string) il testo tradotto tipoditraduzione (string) tipo di traduzione ( voce , testo , immagine ) timestamp (datetime) 1 3 2 crea la classe language ripeti i passaggi per creare una nuova classe chiamata language aggiungi le seguenti colonne a language nome (string) il nome della lingua (ad es , "inglese") codice (string) codice iso della lingua (ad es , "en") flagiconurl (string) url dell'immagine della bandiera che rappresenta la lingua 1 3 3 crea la classe phrase crea una classe chiamata phrase aggiungi le seguenti colonne a frase categoria (string) la categoria della frase (ad es , "saluti") linguadiorigine (string) codice della lingua di origine linguatarget (string) codice della lingua target testodiorigine (string) la frase originale testotradotto (string) la frase tradotta 1 3 4 crea la classe dictionaryentry crea una classe chiamata dictionaryentry aggiungi le seguenti colonne a dictionaryentry parola (string) la parola da definire lingua (string) la lingua della parola definizione (string) la definizione della parola esempi (array) frasi di esempio che utilizzano la parola 1 4 impostare i permessi a livello di classe assicurati che solo gli utenti autenticati possano accedere ai propri dati per ogni classe, vai a sicurezza > permessi a livello di classe (clp) imposta il clp per consentire l'accesso in lettura/scrittura solo agli utenti autenticati passo 2 — inizializzare il tuo progetto flutter in questo passo, configurerai un progetto flutter e lo configurerai per connettersi a back4app 2 1 crea un nuovo progetto flutter apri il tuo terminale e esegui flutter create ai voice translator naviga nella directory del progetto cd ai voice translator 2 2 aggiungi le dipendenze richieste apri pubspec yaml e aggiungi le seguenti dipendenze dependencies flutter sdk flutter parse server sdk flutter ^4 0 1 flutter tts ^3 3 1 speech to text ^5 3 0 google ml kit ^0 7 3 provider ^6 0 2 http ^0 13 4 esegui flutter pub get per installare i pacchetti 2 3 inizializza parse nella tua app flutter crea un nuovo file lib/config/back4app config dart // lib/config/back4app config dart const string keyapplicationid = 'your application id'; const string keyclientkey = 'your client key'; const string keyparseserverurl = 'https //parseapi back4app com'; sostituisci 'your application id' e 'your client key' con le chiavi di back4app in lib/main dart , inizializza parse // lib/main dart import 'package\ flutter/material dart'; import 'package\ parse server sdk flutter/parse server sdk dart'; import 'config/back4app config dart'; import 'app dart'; void main() async { widgetsflutterbinding ensureinitialized(); await parse() initialize( keyapplicationid, keyparseserverurl, clientkey keyclientkey, autosendsessionid true, debug true, ); runapp(myapp()); } crea lib/app dart // lib/app dart import 'package\ flutter/material dart'; import 'screens/home screen dart'; class myapp extends statelesswidget { @override widget build(buildcontext context) { return materialapp( title 'ai voice translator', theme themedata(primaryswatch colors blue), home homescreen(), ); } } passo 3 — implementazione della traduzione del testo la prima funzionalità da implementare è la traduzione di base del testo 3 1 configura il servizio di traduzione crea lib/services/translation service dart per gestire le interazioni con un'api di traduzione (google cloud translation api o deepl) // lib/services/translation service dart import 'dart\ convert'; import 'package\ http/http dart' as http; class translationservice { final string apikey = 'your translation api key'; final string apiurl = 'https //translation googleapis com/language/translate/v2'; future\<string> translatetext(string text, string sourcelang, string targetlang) async { final response = await http post( uri parse(apiurl), headers { 'content type' 'application/json', 'authorization' 'bearer $apikey', }, body jsonencode({ 'q' text, 'source' sourcelang, 'target' targetlang, 'format' 'text', }), ); if (response statuscode == 200) { final data = jsondecode(response body); return data\['data']\['translations']\[0]\['translatedtext']; } else { throw exception('translation failed'); } } } 3 2 implementa il modello di lingua crea lib/models/language dart per rappresentare le lingue supportate // lib/models/language dart class language { final string name; final string code; final string flagiconurl; language({ required this name, required this code, required this flagiconurl, }); } // lib/models/language dart class language { final string name; final string code; final string flagiconurl; language({ required this name, required this code, required this flagiconurl, }); } // lib/models/language dart class language { final string name; final string code; final string flagiconurl; language({ required this name, required this code, required this flagiconurl, }); } // lib/models/language dart class language { final string name; final string code; final string flagiconurl; language({ required this name, required this code, required this flagiconurl, }); } // lib/models/language dart class language { final string name; final string code; final string flagiconurl; language({ required this name, required this code, required this flagiconurl, }); } // lib/models/language dart class language { final string name; final string code; final string flagiconurl; language({ required this name, required this code, required this flagiconurl, }); } // lib/models/language dart class language { final string name; final string code; final string flagiconurl; language({ required this name, required this code, required this flagiconurl, }); } // lib/models/language dart class language { final string name; final string code; final string flagiconurl; language({ required this name, required this code, required this flagiconurl, }); } // lib/models/language dart class language { final string name; final string code; final string flagiconurl; language({ required this name, required this code, required this flagiconurl, }); } // lib/models/language dart class language { final string name; final string code; final string flagiconurl; language({ required this name, required this code, required this flagiconurl, }); } // lib/models/language dart class language { final string name; final string code; final string flagiconurl; language({ required this name, required this code, required this flagiconurl, }); } 3 3 crea schermata di traduzione del testo crea lib/screens/text translation screen dart per gestire l'input di testo e la traduzione // lib/screens/text translation screen dart import 'package\ flutter/material dart'; import ' /services/translation service dart'; import ' /models/language dart'; class texttranslationscreen extends statefulwidget { @override texttranslationscreenstate createstate() => texttranslationscreenstate(); } class texttranslationscreenstate extends state\<texttranslationscreen> { final translationservice translationservice = translationservice(); final texteditingcontroller textcontroller = texteditingcontroller(); string translatedtext = ''; language? sourcelanguage; language? targetlanguage; future\<void> translate() async { if (sourcelanguage != null && targetlanguage != null) { final translation = await translationservice translatetext( textcontroller text, sourcelanguage! code, targetlanguage! code, ); setstate(() { translatedtext = translation; }); } } @override widget build(buildcontext context) { return scaffold( appbar appbar( title text('text translation'), ), body padding( padding const edgeinsets all(16), child column( children \[ textfield( controller textcontroller, decoration inputdecoration(labeltext 'enter text to translate'), ), sizedbox(height 10), // implement language selectors here elevatedbutton(onpressed translate, child text('translate')), sizedbox(height 20), text(translatedtext), ], ), ), ); } } passo 4 — implementazione della traduzione vocale in questo passo, aggiungerai la traduzione vocale integrando speech to text e text to speech funzionalità 4 1 configura il riconoscimento vocale crea lib/services/speech recognition service dart utilizzando il speech to text pacchetto // lib/services/speech recognition service dart import 'package\ speech to text/speech to text dart' as stt; class speechrecognitionservice { final stt speechtotext speech = stt speechtotext(); future\<string?> listenforspeech() async { bool available = await speech initialize(); if (available) { await speech listen(); return await future delayed(duration(seconds 5), () { speech stop(); return speech lastrecognizedwords; }); } return null; } } 4 2 aggiungi text to speech (tts) crea lib/services/tts service dart utilizzando il flutter tts pacchetto // lib/services/tts service dart import 'package\ flutter tts/flutter tts dart'; class ttsservice { final fluttertts fluttertts = fluttertts(); future\<void> speak(string text, string languagecode) async { await fluttertts setlanguage(languagecode); await fluttertts speak(text); } } 4 3 crea schermata di traduzione vocale crea lib/screens/voice translation screen dart per gestire la traduzione vocale // lib/screens/voice translation screen dart import 'package\ flutter/material dart'; import ' /services/speech recognition service dart'; import ' /services/translation service dart'; import ' /services/tts service dart'; class voicetranslationscreen extends statefulwidget { @override voicetranslationscreenstate createstate() => voicetranslationscreenstate(); } class voicetranslationscreenstate extends state\<voicetranslationscreen> { final speechrecognitionservice speechrecognitionservice = speechrecognitionservice(); final translationservice translationservice = translationservice(); final ttsservice ttsservice = ttsservice(); string? recognizedtext; string? translatedtext; future\<void> translatespeech() async { recognizedtext = await speechrecognitionservice listenforspeech(); if (recognizedtext != null) { translatedtext = await translationservice translatetext( recognizedtext!, 'en', // hardcoded source language (english) 'es', // hardcoded target language (spanish) ); setstate(() {}); ttsservice speak(translatedtext!, 'es'); } } @override widget build(buildcontext context) { return scaffold( appbar appbar( title text('voice translation'), ), body center( child column( mainaxisalignment mainaxisalignment center, children \[ if (recognizedtext != null) text('recognized $recognizedtext'), if (translatedtext != null) text('translated $translatedtext'), sizedbox(height 20), elevatedbutton(onpressed translatespeech, child text('start voice translation')), ], ), ), ); } } passo 5 — implementazione della traduzione delle immagini (ocr) 5 1 configurare il servizio ocr crea lib/services/ocr service dart utilizzando il google ml kit pacchetto // lib/services/ocr service dart import 'package\ google ml kit/google ml kit dart'; class ocrservice { final textrecognizer = googlemlkit vision textrecognizer(); future\<string?> extracttextfromimage(string imagepath) async { final inputimage = inputimage fromfilepath(imagepath); final recognizedtext = await textrecognizer processimage(inputimage); return recognizedtext text; } } 5 2 crea schermata di traduzione immagine crea lib/screens/image translation screen dart per gestire l'input dell'immagine e l'ocr // lib/screens/image translation screen dart import 'package\ flutter/material dart'; import 'package\ image picker/image picker dart'; import ' /services/ocr service dart'; import ' /services/translation service dart'; class imagetranslationscreen extends statefulwidget { @override imagetranslationscreenstate createstate() => imagetranslationscreenstate(); } class imagetranslationscreenstate extends state\<imagetranslationscreen> { final ocrservice ocrservice = ocrservice(); final translationservice translationservice = translationservice(); string? extractedtext; string? translatedtext; future\<void> pickandtranslateimage() async { final picker = imagepicker(); final pickedfile = await picker getimage(source imagesource gallery); if (pickedfile != null) { extractedtext = await ocrservice extracttextfromimage(pickedfile path); if (extractedtext != null) { translatedtext = await translationservice translatetext(extractedtext!, 'en', 'es'); setstate(() {}); } } } @override widget build(buildcontext context) { return scaffold( appbar appbar( title text('image translation'), ), body center( child column( mainaxisalignment mainaxisalignment center, children \[ if (extractedtext != null) text('extracted $extractedtext'), if (translatedtext != null) text('translated $translatedtext'), sizedbox(height 20), elevatedbutton(onpressed pickandtranslateimage, child text('pick image for translation')), ], ), ), ); } } passo 6 — cronologia traduzioni e libro delle frasi in questo passo, implementerai il salvataggio della cronologia delle traduzioni e la gestione di un libro delle frasi 6 1 salva cronologia traduzioni aggiorna lib/services/translation service dart per salvare la cronologia delle traduzioni in back4app import 'package\ parse server sdk flutter/parse server sdk dart'; import ' /models/translation dart'; class translationservice { // existing translation logic future\<void> savetranslation(translation translation) async { final translationobject = parseobject('translation') set('user', parseuser currentuser) set('sourcelanguage', translation sourcelanguage) set('targetlanguage', translation targetlanguage) set('sourcetext', translation sourcetext) set('translatedtext', translation translatedtext) set('translationtype', translation type); await translationobject save(); } } 6 2 implementare il libro delle frasi crea lib/screens/phrase book screen dart per gestire frasi comuni // lib/screens/phrase book screen dart import 'package\ flutter/material dart'; import ' /models/phrase dart'; import ' /services/phrase service dart'; class phrasebookscreen extends statelesswidget { final phraseservice phraseservice = phraseservice(); @override widget build(buildcontext context) { return scaffold( appbar appbar( title text('phrase book'), ), body futurebuilder\<list\<phrase>>( future phraseservice fetchphrases(), builder (context, snapshot) { if (snapshot connectionstate == connectionstate waiting) { return center(child circularprogressindicator()); } if (!snapshot hasdata || snapshot data! isempty) { return center(child text('no phrases found ')); } return listview\ builder( itemcount snapshot data! length, itembuilder (context, index) { final phrase = snapshot data!\[index]; return listtile( title text('${phrase sourcetext} → ${phrase translatedtext}'), subtitle text('category ${phrase category}'), ); }, ); }, ), ); } } conclusione seguendo questo tutorial, hai costruito un ai voice translator app ricco di funzionalità con flutter e back4app hai implementato traduzione di testo di base e avanzata traduzione voce a voce utilizzando speech recognition e text to speech traduzione immagine a testo utilizzando ocr gestione della cronologia delle traduzioni e un libro di frasi per espressioni comuni prossimi passi migliora ui/ux migliora l'interfaccia dell'app per un'esperienza utente più fluida migliora la gestione degli errori aggiungi gestione degli errori e meccanismi di fallback per i fallimenti dell'api implementa la modalità offline memorizza le traduzioni comuni, le frasi e la cronologia per l'accesso offline distribuisci l'app prepara l'app per la distribuzione su piattaforme ios e android