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

41min
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 an.
Flutter SDK auf Ihrem lokalen Computer installiert. Befolgen Sie die offizielle Flutter-Installationsanleitung für Ihr Betriebssystem.
Grundkenntnisse in Dart und Flutter-Entwicklung. Wenn Sie neu bei Flutter sind, sollten Sie die Flutter-Dokumentation ü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 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:
Bash
flutter create ai_email_responder
flutter create ai_email_responder
﻿
Navigiere zum Projektverzeichnis:
Bash
cd ai_email_responder
cd ai_email_responder
﻿
2.2. Füge erforderliche Abhängigkeiten hinzu
Öffne pubspec.yaml und füge die folgenden Abhängigkeiten hinzu:
YAML
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
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:
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';
// 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:
Dart
// 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());
}
// 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:
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(),
    );
  }
}
// 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.
Dart
// 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'),
            ),
          ],
        ),
      ),
    );
  }
}
// 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.
Dart
// 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(),
          );
        }
      },
    );
  }
}
// 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:
XML
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.INTERNET"/>
﻿
Für iOS, stellen Sie sicher, dass Ihre Info.plist Folgendes enthält:
XML
<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>
<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>
﻿
4.2. E-Mail-Versandfunktionalität implementieren
Erstellen Sie lib/services/email_service.dart:
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);
  }
}
// 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:
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,
  });
}
// 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):
Dart
// 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: '[email protected]',
        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
}
// 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:
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');
    }
  }
}
// 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:
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(),
      ),
    );
  }
}
// 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.
Dart
// 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'),
                  ),
                ],
              ),
      ),
    );
  }
}
// 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:
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);
}
// 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:
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();
  }
}
// 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:
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),
        ));
  }
}
// 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:
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);
}
// 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:
Dart
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
}
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:
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));
  }
}
// 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:
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'),
        ));
  }
}
// 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:
Dart
await Parse().initialize(
  keyApplicationId,
  keyParseServerUrl,
  clientKey: keyClientKey,
  autoSendSessionId: true,
  debug: true,
  coreStore: await CoreStoreSembastImp.getInstance(),
);
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:
Dart
Future<void> pin() async {
  await this.pin();
}

Future<void> unpin() async {
  await this.unPin();
}
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:
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 [];
    }
  }
}
// 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.
Aktualisiert 23 Jan 2025
Hat Ihnen diese Seite geholfen?
Erstellung eines multiplattformfähigen Spiels mit Flutter und Back4app
ALS NÄCHSTES
Wie man eine AR-Sprachimmersion-App mit Flutter und Back4App erstellt