Como Construir um Aplicativo de Tradutor de Voz com IA Usando Flutter e Back4App

introdução neste tutorial, você aprenderá como construir um aplicativo de tradutor de voz com ia usando flutter como o framework frontend e back4app como o serviço backend o aplicativo permitirá que os usuários traduzam fala, texto e imagens entre vários idiomas ele contará com tradução impulsionada por ia, reconhecimento óptico de caracteres (ocr) e funcionalidades de reconhecimento de fala ao final deste tutorial, você terá construído um aplicativo que pode lidar com traduções em tempo real e armazenar o histórico no back4app para uso futuro pré requisitos para completar este tutorial, você precisará uma conta back4app inscreva se para uma conta gratuita em back4app https //www back4app com/ flutter sdk instalado em sua máquina local siga o guia de instalação do flutter https //flutter dev/docs/get started/install conhecimento básico de dart e flutter se você é novo no flutter, revise a documentação do flutter https //flutter dev/docs antes de prosseguir uma conta com um provedor de api de tradução como google cloud translation ou deepl familiaridade com apis rest e programação assíncrona em dart passo 1 — configurando seu backend back4app nesta etapa, você configurará um aplicativo back4app, definirá os modelos de dados e configurará o backend para armazenar o histórico de traduções, idiomas e dados do usuário 1 1 crie um novo aplicativo no back4app faça login no seu painel do back4app https //dashboard back4app com/ clique em "criar novo app" digite um nome do app (por exemplo, "tradutor de voz ai") e selecione seu ícone do app escolha a localização do seu servidor, se solicitado clique em "criar" 1 2 recupere as chaves do aplicativo navegue até configurações do app > segurança e chaves no painel do seu aplicativo anote o id do aplicativo e chave do cliente estes serão necessários para a configuração do aplicativo flutter 1 3 defina seus modelos de dados nós criaremos as seguintes classes no back4app usuário (padrão) tradução idioma frase entradadodicionário 1 3 1 criar a classe de tradução vá para banco de dados > navegador clique em "criar uma classe" escolha "personalizado" e nomeie como tradução clique em "criar classe" adicione as seguintes colunas a tradução usuário (pointer< user>) aponta para o objeto usuário idiomafonte (string) código do idioma de origem idiomaalvo (string) código do idioma de destino textofonte (string) o texto original a ser traduzido textotraduzido (string) o texto traduzido tipotradução (string) tipo de tradução ( voz , texto , imagem ) timestamp (datahora) 1 3 2 crie a classe de idioma repita os passos para criar uma nova classe chamada idioma adicione as seguintes colunas a idioma nome (string) o nome do idioma (por exemplo, "inglês") código (string) código iso do idioma (por exemplo, "en") urliconebandeira (string) url da imagem da bandeira representando o idioma 1 3 3 crie a classe de frase crie uma classe chamada frase adicione as seguintes colunas a frase categoria (string) a categoria da frase (por exemplo, "saudações") códigoidiomaorigem (string) código do idioma de origem códigoidiomadestino (string) código do idioma de destino textoorigem (string) a frase original textotraduzido (string) a frase traduzida 1 3 4 crie a classe dictionaryentry crie uma classe chamada dictionaryentry adicione as seguintes colunas a dictionaryentry palavra (string) a palavra sendo definida idioma (string) o idioma da palavra definição (string) a definição da palavra exemplos (array) frases de exemplo usando a palavra 1 4 definir permissões em nível de classe certifique se de que apenas usuários autenticados possam acessar seus próprios dados para cada classe, vá para segurança > permissões em nível de classe (clp) defina o clp para permitir acesso de leitura/gravação apenas a usuários autenticados passo 2 — inicializando seu projeto flutter neste passo, você configurará um projeto flutter e o configurará para se conectar ao back4app 2 1 criar um novo projeto flutter abra seu terminal e execute flutter create ai voice translator navegue até o diretório do projeto cd ai voice translator 2 2 adicione dependências necessárias abra pubspec yaml e adicione as seguintes dependências 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 execute flutter pub get para instalar os pacotes 2 3 inicialize o parse em seu app flutter crie um novo arquivo 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'; substitua 'your application id' e 'your client key' pelas chaves do back4app em lib/main dart , inicialize o 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()); } crie 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 — implementando a tradução de texto a primeira funcionalidade a ser implementada é a tradução básica de texto 3 1 configurar o serviço de tradução crie lib/services/translation service dart para gerenciar interações com uma api de tradução (google cloud translation api ou 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 implementar o modelo de linguagem crie lib/models/language dart para representar as linguagens suportadas // 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 criar tela de tradução de texto criar lib/screens/text translation screen dart para lidar com a entrada de texto e tradução // 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 — implementando tradução por voz neste passo, você adicionará tradução por voz integrando speech to text e text to speech funcionalidades 4 1 configurar reconhecimento de fala criar lib/services/speech recognition service dart usando o speech to text pacote // 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 adicionar texto para fala (tts) criar lib/services/tts service dart usando o flutter tts pacote // 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 criar tela de tradução por voz criar lib/screens/voice translation screen dart para lidar com tradução de voz // 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 — implementando tradução de imagem (ocr) 5 1 configurar serviço de ocr criar lib/services/ocr service dart usando o pacote google ml kit // 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 criar tela de tradução de imagem criar lib/screens/image translation screen dart para lidar com entrada de imagem e 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 — histórico de tradução e livro de frases neste passo, você implementará o salvamento do histórico de traduções e a gestão de um livro de frases 6 1 salvar histórico de tradução atualizar lib/services/translation service dart para salvar o histórico de traduções no 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 implementar livro de frases criar lib/screens/phrase book screen dart para gerenciar frases comuns // 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}'), ); }, ); }, ), ); } } conclusão ao seguir este tutorial, você construiu um aplicativo tradutor de voz ai rico em recursos com flutter e back4app você implementou tradução de texto básica e avançada tradução de voz para voz usando reconhecimento de fala e síntese de voz tradução de imagem para texto usando ocr gerenciamento de histórico de traduções e um livro de frases para expressões comuns próximos passos melhorar ui/ux melhore a interface do aplicativo para uma experiência de usuário mais suave melhorar o tratamento de erros adicione tratamento de erros e mecanismos de fallback para falhas de api implementar modo offline armazene em cache traduções, frases e histórico comuns para acesso offline implantar o aplicativo prepare o aplicativo para implantação nas plataformas ios e android