Wie man eine KI-E-Mail-Antwort-App mit Flutter und Back4App erstellt

einführung in diesem tutorial werden sie eine ki gestützte e mail antwort app mit flutter für das frontend und back4app für das backend erstellen die app wird mit e mail diensten wie gmail oder outlook integriert, eingehende e mails mithilfe von ki modellen (wie openai's gpt 3) analysieren und personalisierte antworten generieren am ende dieses tutorials haben sie eine funktionale app, die e mails verwalten, automatisierte antworten generieren und es den benutzern ermöglichen kann, ihre e mail interaktionen zu personalisieren diese app nutzt die leistungsfähigkeit des parse servers von back4app, um die benutzerauthentifizierung, datenspeicherung und cloud funktionen zu verwalten, und bietet eine skalierbare backend lösung, ohne dass eine serverinfrastruktur verwaltet werden muss die integration von ki funktionen und e mail diensten wird ihre flutter entwicklungsfähigkeiten verbessern und eine grundlage für den aufbau fortschrittlicher, datengestützter anwendungen bieten 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 für ihr betriebssystem grundkenntnisse in dart und flutter entwicklung wenn sie neu bei flutter sind, sollten sie die flutter dokumentation https //flutter dev/docs überprüfen, bevor sie fortfahren vertrautheit mit rest apis und asynchroner programmierung in dart ein konto bei einem ki dienstanbieter (z b openai) melden sie sich für einen api schlüssel an, um auf ki modelle zuzugreifen ein e mail konto (gmail oder outlook) für integrationstests schritt 1 — einrichten ihres back4app backends in diesem schritt erstellen sie eine neue back4app anwendung, richten ihre datenklassen ein und konfigurieren das backend, um mit ihrer flutter app zu arbeiten 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 email responder") ein und wählen sie ihr app symbol aus wählen sie ihren serverstandort aus, falls sie dazu aufgefordert werden klicken sie auf "erstellen" 1 2 anwendungs schlüssel abrufen navigieren sie im dashboard ihrer app zu app einstellungen > sicherheit & schlüssel notieren sie sich die anwendungs id und den client schlüssel diese benötigen sie für die konfiguration ihrer flutter app 1 3 definieren sie ihre datenmodellklassen wir werden die folgenden klassen in back4app erstellen benutzer (standard) emailkonto e mail vorlage antwortverlauf 1 3 1 erstellen sie die emailaccount klasse gehe zu datenbank > browser klicke auf "eine klasse erstellen" wähle "benutzerdefiniert" und nenne es emailaccount klicke auf "klasse erstellen" fügen sie die folgenden spalten hinzu emailaccount benutzer (pointer< user>) zeigt auf das benutzer objekt emailaddress (string) accounttype (string) z b gmail, outlook authtoken (string) wird verschlüsselte tokens speichern 1 3 2 erstellen sie die emailtemplate klasse wiederholen sie die schritte, um eine neue klasse mit dem namen emailtemplate zu erstellen fügen sie die folgenden spalten hinzu emailtemplate benutzer (pointer< user>) templatename (string) templatecontent (string) templatetype (string) z b formal, informell, nachverfolgung 1 3 3 erstellen sie die responsehistory klasse erstellen sie eine neue klasse mit dem namen responsehistory fügen sie die folgenden spalten hinzu responsehistory benutzer (pointer< user>) originalemailsummary (string) generatedresponse (string) usereditedresponse (string) timesaved (number) 1 4 klassenebene berechtigungen festlegen stellen sie sicher, dass nur authentifizierte benutzer auf ihre daten zugreifen können gehen sie in jeder klasse zum sicherheit abschnitt setzen sie klassenebene berechtigungen (clp) so, dass nur authentifizierte benutzer lese /schreibzugriff haben schritt 2 — initialisierung ihres flutter projekts in diesem schritt richten sie ihr 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 email responder navigiere zum projektverzeichnis cd ai email responder 2 2 füge erforderliche abhängigkeiten hinzu öffne pubspec yaml und füge die folgenden abhängigkeiten hinzu dependencies flutter sdk flutter parse server sdk flutter ^4 0 1 flutter email sender ^5 0 2 http ^0 13 4 provider ^6 0 2 fl chart ^0 45 1 führe flutter pub get aus, um die pakete zu installieren 2 3 initialisiere parse in deiner app erstelle 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 , initialisieren sie 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()); } erstellen sie 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 email responder', theme themedata( primaryswatch colors blue, ), home homescreen(), ); } } schritt 3 — implementierung der benutzer authentifizierung sie werden jetzt die benutzerregistrierung und anmeldung mit parse server implementieren 3 1 erstellen von authentifizierungsbildschirmen erstellen sie lib/screens/login screen dart und lib/screens/signup screen dart der einfachheit halber konzentrieren wir uns auf die anmeldefunktionalität // lib/screens/login screen dart import 'package\ flutter/material dart'; import 'package\ parse server sdk flutter/parse server sdk dart'; import 'home screen dart'; class loginscreen extends statefulwidget { @override loginscreenstate createstate() => loginscreenstate(); } class loginscreenstate extends state\<loginscreen> { final texteditingcontroller usernamecontroller = texteditingcontroller(); final texteditingcontroller passwordcontroller = texteditingcontroller(); future\<void> douserlogin() async { final username = usernamecontroller text trim(); final password = passwordcontroller text trim(); final user = parseuser(username, password, null); final response = await user login(); if (response success) { navigator pushreplacement( context, materialpageroute(builder (context) => homescreen()), ); } else { showerror(response error! message); } } void showerror(string message) { scaffoldmessenger of(context) showsnackbar(snackbar(content text('error $message'))); } @override widget build(buildcontext context) { return scaffold( appbar appbar( title text('login'), ), body padding( padding const edgeinsets all(16), child column( children \[ textfield( controller usernamecontroller, decoration inputdecoration(labeltext 'username', icon icon(icons person)), ), textfield( controller passwordcontroller, decoration inputdecoration(labeltext 'password', icon icon(icons lock)), obscuretext true, ), sizedbox(height 20), elevatedbutton( onpressed douserlogin, child text('login'), ), ], ), ), ); } } 3 2 aktualisieren der navigation auf dem startbildschirm ändern sie lib/app dart so, dass benutzer zur anmeldeseite geleitet werden, wenn sie nicht authentifiziert sind // lib/app dart import 'package\ flutter/material dart'; import 'package\ parse server sdk flutter/parse server sdk dart'; import 'screens/home screen dart'; import 'screens/login screen dart'; class myapp extends statelesswidget { future\<bool> hasuserloggedin() async { final currentuser = await parseuser currentuser() as parseuser?; return currentuser != null; } @override widget build(buildcontext context) { return futurebuilder\<bool>( future hasuserloggedin(), builder (context, snapshot) { if (snapshot hasdata && snapshot data == true) { return materialapp( title 'ai email responder', theme themedata(primaryswatch colors blue), home homescreen(), ); } else { return materialapp( title 'ai email responder', theme themedata(primaryswatch colors blue), home loginscreen(), ); } }, ); } } schritt 4 — integration von e mail diensten in diesem schritt richten sie die e mail integration mit dem flutter email sender paket ein 4 1 e mail absender konfigurieren fügen sie die erforderlichen berechtigungen zu ihren android und ios konfigurationen hinzu für android , aktualisieren sie android/app/src/main/androidmanifest xml \<uses permission android\ name="android permission internet"/> für ios , stellen sie sicher, dass ihre info plist folgendes enthält \<key>nsapptransportsecurity\</key> \<dict> \<key>nsallowsarbitraryloads\</key> \<true/> \</dict> 4 2 e mail versandfunktionalität implementieren erstellen sie lib/services/email service dart // lib/services/email service dart import 'package\ flutter email sender/flutter email sender dart'; class emailservice { future\<void> sendemail(string subject, string body, list\<string> recipients) async { final email email = email( body body, subject subject, recipients recipients, ishtml false, ); await flutteremailsender send(email); } } 4 3 implementierung des e mail abrufs (platzhalter) der e mail abruf von anbietern wie gmail erfordert oauth und api integration, was komplex sein kann für dieses tutorial werden wir den e mail abruf simulieren erstellen sie lib/models/email dart // lib/models/email dart class email { final string sender; final string subject; final string body; final datetime date; email({ required this sender, required this subject, required this body, required this date, }); } erstellen sie lib/services/email service dart (aktualisieren sie mit dummy daten) // lib/services/email service dart import ' /models/email dart'; class emailservice { future\<list\<email>> fetchemails() async { // simulate network delay await future delayed(duration(seconds 2)); return \[ email( sender 'john doe\@example com', subject 'meeting reminder', body 'don\\'t forget about our meeting tomorrow at 10 am ', date datetime now() subtract(duration(hours 1)), ), // add more dummy emails ]; } // existing sendemail method } schritt 5 — integration von ki diensten zur generierung von antworten sie werden nun die ki integration einrichten, um e mail antworten zu generieren 5 1 http anfragen an die ai api einrichten installieren sie das http paket (bereits hinzugefügt) erstellen sie lib/services/ai service dart // lib/services/ai service dart import 'dart\ convert'; import 'package\ http/http dart' as http; class aiservice { final string apikey = 'your openai api key'; final string apiurl = 'https //api openai com/v1/engines/davinci/completions'; future\<string> generateresponse(string emailcontent) async { final response = await http post( uri parse(apiurl), headers { 'authorization' 'bearer $apikey', 'content type' 'application/json', }, body jsonencode({ 'prompt' 'reply to the following email \n$emailcontent', 'max tokens' 150, }), ); if (response statuscode == 200) { final data = jsondecode(response body); return data\['choices']\[0]\['text'] trim(); } else { throw exception('failed to generate response'); } } } hinweis ersetzen sie 'your openai api key' durch ihren tatsächlichen api schlüssel 5 2 implementieren sie das antwort editor widget erstellen sie lib/widgets/response editor dart // lib/widgets/response editor dart import 'package\ flutter/material dart'; class responseeditor extends statelesswidget { final string initialresponse; final texteditingcontroller controller; responseeditor({required this initialresponse}) controller = texteditingcontroller(text initialresponse); @override widget build(buildcontext context) { return textfield( controller controller, maxlines null, decoration inputdecoration( hinttext 'edit your response here ', border outlineinputborder(), ), ); } } hinweis ersetzen sie 'your openai api key' durch ihren tatsächlichen api schlüssel 5 3 anzeige von ki generierten antworten in lib/screens/email detail screen dart , integrieren sie den ki dienst // lib/screens/email detail screen dart import 'package\ flutter/material dart'; import ' /models/email dart'; import ' /services/ai service dart'; import ' /widgets/response editor dart'; import ' /services/email service dart'; class emaildetailscreen extends statefulwidget { final email email; emaildetailscreen({required this email}); @override emaildetailscreenstate createstate() => emaildetailscreenstate(); } class emaildetailscreenstate extends state\<emaildetailscreen> { final aiservice aiservice = aiservice(); final emailservice emailservice = emailservice(); string? airesponse; bool isloading = false; future\<void> generateresponse() async { setstate(() { isloading = true; }); try { final response = await aiservice generateresponse(widget email body); setstate(() { airesponse = response; }); } catch (e) { scaffoldmessenger of(context) showsnackbar(snackbar(content text('ai error $e'))); } finally { setstate(() { isloading = false; }); } } void sendresponse(string responsetext) { emailservice sendemail( 're ${widget email subject}', responsetext, \[widget email sender], ); scaffoldmessenger of(context) showsnackbar(snackbar(content text('email sent'))); } @override void initstate() { super initstate(); generateresponse(); } @override widget build(buildcontext context) { final responseeditor = airesponse != null ? responseeditor(initialresponse airesponse!) null; return scaffold( appbar appbar( title text('email from ${widget email sender}'), ), body padding( padding const edgeinsets all(16), child isloading ? center(child circularprogressindicator()) column( children \[ text(widget email body), sizedbox(height 20), responseeditor != null ? expanded(child responseeditor) container(), elevatedbutton( onpressed () { if (responseeditor != null) { sendresponse(responseeditor controller text); } }, child text('send response'), ), ], ), ), ); } } schritt 6 — verwaltung von e mail vorlagen sie werden jetzt die verwaltung von e mail vorlagen mit back4app implementieren 6 1 definiere das emailtemplate modell erstelle lib/models/email template dart // lib/models/email template dart import 'package\ parse server sdk flutter/parse server sdk dart'; class emailtemplate extends parseobject implements parsecloneable { emailtemplate() super('emailtemplate'); emailtemplate clone() this(); @override emailtemplate clone(map\<string, dynamic> map) => emailtemplate clone() fromjson(map); string? get templatename => get\<string>('templatename'); set templatename(string? value) => set\<string>('templatename', value); string? get templatecontent => get\<string>('templatecontent'); set templatecontent(string? value) => set\<string>('templatecontent', value); string? get templatetype => get\<string>('templatetype'); set templatetype(string? value) => set\<string>('templatetype', value); } 6 2 implementiere den template service erstellen sie lib/services/template service dart // lib/services/template service dart import 'package\ parse server sdk flutter/parse server sdk dart'; import ' /models/email template dart'; class templateservice { future\<list\<emailtemplate>> fetchtemplates() async { final query = querybuilder\<emailtemplate>(emailtemplate()); final response = await query find(); if (response success && response results != null) { return response results as list\<emailtemplate>; } else { return \[]; } } future\<void> addtemplate(emailtemplate template) async { await template save(); } } 6 3 erstellen sie den bildschirm zur verwaltung von vorlagen erstellen sie lib/screens/template management screen dart // lib/screens/template management screen dart import 'package\ flutter/material dart'; import ' /models/email template dart'; import ' /services/template service dart'; class templatemanagementscreen extends statefulwidget { @override templatemanagementscreenstate createstate() => templatemanagementscreenstate(); } class templatemanagementscreenstate extends state\<templatemanagementscreen> { final templateservice templateservice = templateservice(); list\<emailtemplate> templates = \[]; bool isloading = true; future\<void> loadtemplates() async { final fetchedtemplates = await templateservice fetchtemplates(); setstate(() { templates = fetchedtemplates; isloading = false; }); } @override void initstate() { super initstate(); loadtemplates(); } @override widget build(buildcontext context) { return scaffold( appbar appbar( title text('email templates'), ), body isloading ? center(child circularprogressindicator()) listview\ builder( itemcount templates length, itembuilder (context, index) { final template = templates\[index]; return listtile( title text(template templatename ?? 'unnamed'), subtitle text(template templatetype ?? 'no type'), ); }, ), floatingactionbutton floatingactionbutton( onpressed () { // implement template creation }, child icon(icons add), )); } } schritt 7 — implementierung der verfolgung der antwortgeschichte sie werden nun die von der ki generierten antworten und benutzerbearbeitungen in back4app für analysen speichern 7 1 definieren sie das responsehistory modell erstellen sie lib/models/response history dart // lib/models/response history dart import 'package\ parse server sdk flutter/parse server sdk dart'; class responsehistory extends parseobject implements parsecloneable { responsehistory() super('responsehistory'); responsehistory clone() this(); @override responsehistory clone(map\<string, dynamic> map) => responsehistory clone() fromjson(map); string? get originalemailsummary => get\<string>('originalemailsummary'); set originalemailsummary(string? value) => set\<string>('originalemailsummary', value); string? get generatedresponse => get\<string>('generatedresponse'); set generatedresponse(string? value) => set\<string>('generatedresponse', value); string? get usereditedresponse => get\<string>('usereditedresponse'); set usereditedresponse(string? value) => set\<string>('usereditedresponse', value); int? get timesaved => get\<int>('timesaved'); set timesaved(int? value) => set\<int>('timesaved', value); } 7 2 speichern sie die antworthistorie nach dem senden der e mail aktualisieren sie lib/screens/email detail screen dart in der sendresponse methode import ' /models/response history dart'; // void sendresponse(string responsetext) async { await emailservice sendemail( 're ${widget email subject}', responsetext, \[widget email sender], ); // save response history final responsehistory = responsehistory() set('originalemailsummary', widget email body) set('generatedresponse', airesponse) set('usereditedresponse', responsetext) set('timesaved', calculatetimesaved()); await responsehistory save(); scaffoldmessenger of(context) showsnackbar(snackbar(content text('email sent'))); navigator pop(context); } int calculatetimesaved() { // placeholder implementation return 5; // assume 5 minutes saved } schritt 8 — hinzufügen von analysen mit diagrammen sie werden jetzt ein grundlegendes analyse dashboard mit fl chart implementieren 8 1 implementieren sie den analyse service erstellen sie lib/services/analytics service dart // lib/services/analytics service dart import 'package\ parse server sdk flutter/parse server sdk dart'; import ' /models/response history dart'; class analyticsservice { future\<list\<responsehistory>> fetchresponsehistories() async { final query = querybuilder\<responsehistory>(responsehistory()); final response = await query find(); if (response success && response results != null) { return response results as list\<responsehistory>; } else { return \[]; } } future\<int> calculatetotaltimesaved() async { final histories = await fetchresponsehistories(); return histories fold(0, (sum, item) => sum + (item timesaved ?? 0)); } } 8 2 erstellen sie ein analyse dashboard erstellen sie lib/screens/analytics screen dart // lib/screens/analytics screen dart import 'package\ flutter/material dart'; import 'package\ fl chart/fl chart dart'; import ' /services/analytics service dart'; class analyticsscreen extends statefulwidget { @override analyticsscreenstate createstate() => analyticsscreenstate(); } class analyticsscreenstate extends state\<analyticsscreen> { final analyticsservice analyticsservice = analyticsservice(); int totaltimesaved = 0; future\<void> loadanalytics() async { final timesaved = await analyticsservice calculatetotaltimesaved(); setstate(() { totaltimesaved = timesaved; }); } @override void initstate() { super initstate(); loadanalytics(); } @override widget build(buildcontext context) { return scaffold( appbar appbar( title text('analytics'), ), body center( child text('total time saved $totaltimesaved minutes'), )); } } schritt 9 — implementierung der offline unterstützung sie werden jetzt offline funktionen zu ihrer app hinzufügen, indem sie den lokalen datenspeicher von parse verwenden 9 1 aktivieren sie den lokalen datenspeicher in lib/main dart , aktivieren sie den lokalen datenspeicher await parse() initialize( keyapplicationid, keyparseserverurl, clientkey keyclientkey, autosendsessionid true, debug true, corestore await corestoresembastimp getinstance(), ); 9 2 datenmodelle für das anheften ändern in ihren modellen (z b responsehistory ), fügen sie methoden zum anheften und lösen von objekten hinzu future\<void> pin() async { await this pin(); } future\<void> unpin() async { await this unpin(); } 9 3 offline manager implementieren erstellen sie lib/utils/offline manager dart // lib/utils/offline manager dart import ' /models/email dart'; import 'package\ parse server sdk flutter/parse server sdk dart'; class offlinemanager { future\<void> cacheemails(list\<email> emails) async { for (var email in emails) { final parseobject = parseobject('email') set('sender', email sender) set('subject', email subject) set('body', email body) set('date', email date); await parseobject pin(); } } future\<list\<email>> getcachedemails() async { final query = querybuilder\<parseobject>(parseobject('email')); final response = await query frompin() find(); if (response success && response results != null) { return response results! map((e) { return email( sender e get\<string>('sender') ?? '', subject e get\<string>('subject') ?? '', body e get\<string>('body') ?? '', date e get\<datetime>('date') ?? datetime now(), ); }) tolist(); } else { return \[]; } } } 9 4 verwenden sie offline daten, wenn keine verbindung besteht überprüfen sie in ihrer e mail abruflogik die konnektivität und verwenden sie zwischengespeicherte daten, wenn sie offline sind fazit in diesem tutorial haben sie eine ki e mail antwort app mit flutter und back4app erstellt sie haben ein back4app backend mit den erforderlichen datenmodellen und sicherheitskonfigurationen eingerichtet haben ein flutter projekt initialisiert und es mit back4app verbunden haben die benutzerauthentifizierung mit parse server implementiert haben das versenden von e mails integriert und das abrufen von e mails simuliert haben ki dienste integriert, um e mail antworten zu generieren haben e mail vorlagen verwaltet und in back4app gespeichert haben die antworthistorie für analysen verfolgt haben grundlegende analysen hinzugefügt mit fl chart haben offline unterstützung mit dem lokalen datenspeicher von parse implementiert diese app bietet eine grundlage für den aufbau fortschrittlicherer funktionen, wie z b echte e mail integration mit oauth, erweiterte ki funktionen und verbessertes ui/ux design nächste schritte e mail integration implementieren sie das abrufen von echten e mails mit den gmail oder outlook apis unter verwendung der oauth authentifizierung erweiterte ki funktionen optimieren sie ki aufforderungen für bessere antworten und implementieren sie personalisierung basierend auf benutzerdaten ui/ux verbesserungen verbessern sie die benutzeroberfläche der app für ein besseres benutzererlebnis testen und bereitstellung schreiben sie unit und integrationstests und bereiten sie die app für die bereitstellung in app stores vor sicherheitsverbesserungen verschlüsseln sie sensible daten und implementieren sie eine robuste fehlerbehandlung und eingangsvalidierung für weitere informationen zur verwendung von back4app mit flutter, siehe die back4app flutter anleitung https //www back4app com/docs/flutter/parse sdk/