Wie man eine AI-Sprachübersetzer-App mit Flutter und Back4App erstellt

einführung in diesem tutorial lernen sie, wie sie eine ai voice translator app mit flutter als frontend framework und back4app als backend service erstellen die app ermöglicht es benutzern, sprache, text und bilder in mehrere sprachen zu übersetzen sie wird über ki gestützte übersetzungen, optische zeichenerkennung (ocr) und spracherkennungsfunktionen verfügen am ende dieses tutorials haben sie eine app erstellt, die echtzeitübersetzungen verarbeiten und die historie auf back4app für zukünftige verwendung speichern kann voraussetzungen um dieses tutorial abzuschließen, benötigen sie ein back4app konto melden sie sich für ein kostenloses konto bei back4app https //www back4app com/ an flutter sdk auf ihrem lokalen computer installiert befolgen sie die offizielle flutter installationsanleitung https //flutter dev/docs/get started/install grundkenntnisse in dart und flutter wenn sie neu bei flutter sind, lesen sie die flutter dokumentation https //flutter dev/docs durch, bevor sie fortfahren ein konto bei einem übersetzungs api anbieter wie google cloud translation oder deepl vertrautheit mit rest apis und asynchroner programmierung in dart schritt 1 — einrichten ihres back4app backends in diesem schritt richten sie eine back4app anwendung ein, definieren die datenmodelle und konfigurieren das backend, um übersetzungshistorie, sprachen und benutzerdaten zu speichern 1 1 erstellen sie eine neue anwendung auf back4app melden sie sich bei ihrem back4app dashboard https //dashboard back4app com/ an klicken sie auf "neue app erstellen" geben sie einen app namen (z b "ai voice translator") ein und wählen sie ihr app symbol aus wählen sie ihren serverstandort, falls sie dazu aufgefordert werden klicken sie auf "erstellen" 1 2 abrufen der anwendungs schlüssel navigieren sie zu app einstellungen > sicherheit & schlüssel im dashboard ihrer app notieren sie sich die anwendungs id und den client schlüssel diese werden für die konfiguration der flutter app benötigt 1 3 definieren sie ihre datenmodelle wir werden die folgenden klassen in back4app erstellen benutzer (standard) übersetzung sprache phrase wörterbucheintrag 1 3 1 erstellen sie die übersetzungsklasse gehe zu datenbank > browser klicke auf "klasse erstellen" wähle "benutzerdefiniert" und nenne es übersetzung klicke auf "klasse erstellen" füge die folgenden spalten zu übersetzung benutzer (pointer< user>) zeigt auf das benutzer objekt quellsprache (string) quellsprache code zielsprache (string) zielsprachencode quelltext (string) der originale text zur übersetzung übersetztertext (string) der übersetzte text übersetzungsart (string) art der übersetzung ( sprache , text , bild ) zeitstempel (datum/uhrzeit) 1 3 2 erstellen sie die sprachklasse wiederholen sie die schritte, um eine neue klasse mit dem namen sprache zu erstellen fügen sie die folgenden spalten zu sprache name (string) der name der sprache (z b "englisch") code (string) iso code der sprache (z b "en") flagiconurl (string) url des flaggenbildes, das die sprache darstellt 1 3 3 erstellen sie die phrasenklasse erstellen sie eine klasse mit dem namen phrase fügen sie die folgenden spalten hinzu phrase kategorie (string) die kategorie der phrase (z b "grüße") quellsprache (string) quellsprache code zielsprache (string) zielsprachencode quelltext (string) die ursprüngliche phrase übersetztertext (string) die übersetzte phrase 1 3 4 erstellen sie die dictionaryentry klasse erstellen sie eine klasse mit dem namen dictionaryentry fügen sie die folgenden spalten hinzu dictionaryentry wort (string) das definierte wort sprache (string) die sprache des wortes definition (string) die definition des wortes beispiele (array) beispielsätze mit dem wort 1 4 klassenebene berechtigungen festlegen stellen sie sicher, dass nur authentifizierte benutzer auf ihre eigenen daten zugreifen können für jede klasse gehen sie zu sicherheit > klassenebene berechtigungen (clp) setzen sie die clp, um lese /schreibzugriff nur für authentifizierte benutzer zu erlauben schritt 2 — einrichten ihres flutter projekts in diesem schritt richten sie ein flutter projekt ein und konfigurieren es, um eine verbindung zu back4app herzustellen 2 1 erstellen sie ein neues flutter projekt öffnen sie ihr terminal und führen sie aus flutter create ai voice translator navigieren sie zum projektverzeichnis cd ai voice translator 2 2 fügen sie erforderliche abhängigkeiten hinzu öffnen sie pubspec yaml und fügen sie die folgenden abhängigkeiten hinzu 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 führen sie flutter pub get aus, um die pakete zu installieren 2 3 initialisieren sie parse in ihrer flutter app erstellen sie eine neue datei 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'; ersetzen sie 'your application id' und 'your client key' mit den schlüsseln von back4app in lib/main dart , initialisiere 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()); } erstelle 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(), ); } } schritt 3 — implementierung der textübersetzung die erste funktion, die implementiert werden soll, ist die grundlegende textübersetzung 3 1 übersetzungsdienst konfigurieren erstelle lib/services/translation service dart um interaktionen mit einer übersetzungs api (google cloud translation api oder deepl) zu verwalten // 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 sprachmodell implementieren erstelle lib/models/language dart um unterstützte sprachen darzustellen // 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 erstellen sie den bildschirm für die textübersetzung erstellen sie lib/screens/text translation screen dart um die texteingabe und übersetzung zu verarbeiten // 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), ], ), ), ); } } schritt 4 — implementierung der sprachübersetzung in diesem schritt fügen sie die sprachübersetzung hinzu, indem sie spracherkennung und text zu sprache funktionen integrieren 4 1 sprachsteuerung einrichten erstellen sie lib/services/speech recognition service dart mit dem speech to text paket // 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 text to speech (tts) hinzufügen erstellen sie lib/services/tts service dart mit dem flutter tts paket // 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 erstellen sie den sprachübersetzungsbildschirm erstellen sie lib/screens/voice translation screen dart um die sprachübersetzung zu behandeln // 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')), ], ), ), ); } } schritt 5 — implementierung der bildübersetzung (ocr) 5 1 ocr dienst einrichten erstellen sie lib/services/ocr service dart mit dem google ml kit paket // 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 erstellen sie den bildschirm für die bildübersetzung erstellen sie lib/screens/image translation screen dart um die bildeingabe und ocr zu verarbeiten // 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')), ], ), ), ); } } schritt 6 — übersetzungshistorie und phrasebuch in diesem schritt implementieren sie das speichern der übersetzungshistorie und das verwalten eines phrasebuchs 6 1 übersetzungshistorie speichern aktualisieren sie lib/services/translation service dart um die übersetzungshistorie in back4app zu speichern 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 implementierung des phrasebuchs erstellen sie lib/screens/phrase book screen dart um gängige phrasen zu verwalten // 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}'), ); }, ); }, ), ); } } fazit indem sie dieses tutorial befolgen, haben sie eine funktionsreiche ai voice translator app mit flutter und back4app sie haben implementiert grundlegende und erweiterte textübersetzung sprach zu sprach übersetzung mit spracherkennung und text zu sprache bild zu text übersetzung mit ocr verwaltung der übersetzungshistorie und ein wörterbuch für gängige ausdrücke nächste schritte ui/ux verbessern verbessern sie die benutzeroberfläche der app für ein reibungsloseres benutzererlebnis fehlerbehandlung verbessern fügen sie fehlerbehandlung und fallback mechanismen für api fehler hinzu offline modus implementieren cachen sie gängige übersetzungen, phrasen und die historie für den offline zugriff die app bereitstellen bereiten sie die app für die bereitstellung auf ios und android plattformen vor