Plantillas de Flutter
Cómo construir una aplicación de respuesta automática de correos electrónicos con Flutter y Back4App

41min
Introducción
En este tutorial, construirás una aplicación de respuesta automática de correo electrónico impulsada por IA utilizando Flutter para el frontend y Back4App para el backend. La aplicación se integrará con servicios de correo electrónico como Gmail u Outlook, analizará los correos electrónicos entrantes utilizando modelos de IA (como GPT-3 de OpenAI) y generará respuestas personalizadas. Al final de este tutorial, tendrás una aplicación funcional que puede gestionar correos electrónicos, generar respuestas automatizadas y permitir a los usuarios personalizar sus interacciones por correo electrónico.
Esta aplicación aprovecha el poder del Parse Server de Back4App para manejar la autenticación de usuarios, el almacenamiento de datos y las funciones en la nube, proporcionando una solución de backend escalable sin la necesidad de gestionar la infraestructura del servidor. Integrar capacidades de IA y servicios de correo electrónico mejorará tus habilidades de desarrollo en Flutter y proporcionará una base para construir aplicaciones avanzadas y basadas en datos.
Requisitos previos
Para completar este tutorial, necesitarás:
Una cuenta de Back4App. Regístrate para obtener una cuenta gratuita en Back4App.
Flutter SDK instalado en tu máquina local. Sigue la guía de instalación de Flutter para tu sistema operativo.
Conocimientos básicos de Dart y Flutter desarrollo. Si eres nuevo en Flutter, considera revisar la documentación de Flutter antes de continuar.
Familiaridad con REST APIs y programación asíncrona en Dart.
Una cuenta con un proveedor de servicios de IA (por ejemplo, OpenAI). Regístrate para obtener una clave API para acceder a los modelos de IA.
Una cuenta de correo electrónico (Gmail u Outlook) para pruebas de integración.
Paso 1 — Configurando tu Backend de Back4App
En este paso, crearás una nueva aplicación en Back4App, configurarás tus clases de datos y configurarás el backend para trabajar con tu aplicación Flutter.
1.1. Crear una Nueva Aplicación en Back4App
Inicia sesión en tu panel de Back4App.
Haz clic en "Crear nueva App".
Ingresa un Nombre de la App (por ejemplo, "AI Email Responder") y selecciona tu Ícono de la App.
Elige la ubicación de tu servidor si se te solicita.
Haz clic en "Crear".
1.2. Recuperar Claves de Aplicación
En el panel de tu app, navega a Configuración de la App > Seguridad y Claves.
Anota el ID de Aplicación y Clave de Cliente. Necesitarás estos para la configuración de tu app Flutter.
1.3. Define tus Clases de Modelo de Datos
Crearemos las siguientes clases en Back4App:
Usuario (predeterminado)
CuentaDeCorreo
PlantillaDeCorreo
HistorialDeRespuestas
1.3.1. Crear la clase CuentaDeCorreo
Ir a Base de datos > Navegador.
Haga clic en "Crear una clase".
Elija "Personalizado" y nómbralo CuentaDeCorreo.
Haga clic en "Crear clase".
Agregue las siguientes columnas a EmailAccount:
usuario (Pointer<_User>): Apunta al Usuario objeto.
direccionDeCorreo (String)
tipoDeCuenta (String): p. ej., Gmail, Outlook.
tokenDeAutenticacion (String): Almacenará tokens encriptados.
1.3.2. Crear la clase EmailTemplate
Repita los pasos para crear una nueva clase llamada EmailTemplate.
Agregue las siguientes columnas a EmailTemplate:
usuario (Pointer<_User>)
nombreDePlantilla (String)
contenidoDePlantilla (String)
tipoDePlantilla (String): p. ej., formal, casual, seguimiento.
1.3.3. Crear la clase ResponseHistory
Cree una nueva clase llamada ResponseHistory.
Agregue las siguientes columnas a ResponseHistory:
usuario (Pointer<_User>)
resumenEmailOriginal (String)
respuestaGenerada (String)
respuestaEditadaPorElUsuario (String)
tiempoAhorrado (Número)
1.4. Establecer Permisos a Nivel de Clase
Asegúrese de que solo los usuarios autenticados puedan acceder a sus datos:
En cada clase, vaya a la Seguridad sección.
Establezca Permisos a Nivel de Clase (CLP) para permitir acceso de lectura/escritura solo a usuarios autenticados.
Paso 2 — Inicializando Su Proyecto Flutter
En este paso, configurará su proyecto Flutter y lo conectará a Back4App.
2.1. Crear un Nuevo Proyecto Flutter
Abra su terminal y ejecute:
Bash
flutter create ai_email_responder
flutter create ai_email_responder
﻿
Navega al directorio del proyecto:
Bash
cd ai_email_responder
cd ai_email_responder
﻿
2.2. Agregar Dependencias Requeridas
Abre pubspec.yaml y agrega las siguientes dependencias:
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
﻿
Ejecuta flutter pub get para instalar los paquetes.
2.3. Inicializa Parse en Tu Aplicación
Crea un nuevo archivo 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';
﻿
Reemplace 'YOUR_APPLICATION_ID' y 'YOUR_CLIENT_KEY' con las claves de Back4App.
En lib/main.dart, inicializa 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());
}
﻿
Crea 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(),
    );
  }
}
﻿
Paso 3 — Implementación de la Autenticación de Usuarios
Ahora implementarás el registro y el inicio de sesión de usuarios utilizando Parse Server.
3.1. Crear Pantallas de Autenticación
Crear lib/screens/login_screen.dart y lib/screens/signup_screen.dart. Para mayor brevedad, nos centraremos en la funcionalidad de inicio de sesión.
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. Actualizar la Navegación de la Pantalla Principal
Modifica lib/app.dart para dirigir a los usuarios a la pantalla de inicio de sesión si no están autenticados.
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(),
          );
        }
      },
    );
  }
}
﻿
Paso 4 — Integrando Servicios de Correo Electrónico
En este paso, configurarás la integración de correo electrónico utilizando el flutter_email_sender paquete.
4.1. Configurar el Enviador de Correo Electrónico
Agrega los permisos necesarios a tus configuraciones de Android e iOS.
Para Android, actualiza android/app/src/main/AndroidManifest.xml:
XML
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.INTERNET"/>
﻿
Para iOS, asegúrate de que tu Info.plist incluya:
XML
<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>
<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>
﻿
4.2. Implementar la Funcionalidad de Envío de Correo Electrónico
Crea 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. Implementar la obtención de correos electrónicos (Marcador de posición)
La obtención de correos electrónicos de proveedores como Gmail requiere OAuth e integración de API, lo que puede ser complejo. Para este tutorial, simularemos la obtención de correos electrónicos.
Crear 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,
  });
}
﻿
Crear lib/services/email_service.dart (actualizar con datos ficticios):
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
}
﻿
Paso 5 — Integración de servicios de IA para la generación de respuestas
Ahora configurarás la integración de IA para generar respuestas de correo electrónico.
5.1. Configurar solicitudes HTTP a la API de IA
Instalar el http paquete (ya agregado).
Crear 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');
    }
  }
}
﻿
Nota: Reemplace 'YOUR_OPENAI_API_KEY' con su clave API real.
5.2. Implementar el widget del editor de respuestas
Crear 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(),
      ),
    );
  }
}
﻿
Nota: Reemplace 'YOUR_OPENAI_API_KEY' con su clave API real.
5.3. Mostrando Respuestas Generadas por IA
En lib/screens/email_detail_screen.dart, integra el servicio de IA.
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'),
                  ),
                ],
              ),
      ),
    );
  }
}
﻿
Paso 6 — Gestionando Plantillas de Correo Electrónico
Ahora implementarás la gestión de plantillas de correo electrónico utilizando Back4App.
6.1. Define el modelo EmailTemplate
Crear 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. Implementar el servicio de plantillas
Crear 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. Crear Pantalla de Gestión de Plantillas
Crear 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),
        ));
  }
}
﻿
Paso 7 — Implementación del Seguimiento del Historial de Respuestas
Ahora guardarás las respuestas generadas por la IA y las ediciones de los usuarios en Back4App para análisis.
7.1. Definir el Modelo ResponseHistory
Crear 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. Guardar el Historial de Respuestas Después de Enviar el Correo Electrónico
Actualizar lib/screens/email_detail_screen.dart en el sendResponse método:
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
}
﻿
Paso 8 — Agregar Analíticas con Gráficos
Ahora implementarás un panel de analíticas básico usando fl_chart.
8.1. Implementar Servicio de Analíticas
Crear 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. Crear el Panel de Analíticas
Crear 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'),
        ));
  }
}
﻿
Paso 9 — Implementando Soporte Offline
Ahora agregarás capacidades offline a tu aplicación utilizando el almacenamiento de datos local de Parse.
9.1. Habilitar Almacenamiento de Datos Local
En lib/main.dart, habilita el almacenamiento de datos local:
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. Modificar Modelos de Datos para Fijar
En tus modelos (por ejemplo, ResponseHistory), agrega métodos para fijar y deshacer la fijación de objetos:
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. Implementar Gestor Offline
Crear 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. Usar Datos Offline Cuando No Hay Conectividad
En tu lógica de obtención de correos electrónicos, verifica la conectividad y utiliza datos en caché si estás offline.
Conclusión
En este tutorial, construiste una aplicación de Respuesta Automática de Correos Electrónicos utilizando Flutter y Back4App. Tú:
Configuraste un backend de Back4App con los modelos de datos necesarios y configuraciones de seguridad.
Inicializaste un proyecto de Flutter y lo conectaste a Back4App.
Implementaste la autenticación de usuarios con Parse Server.
Integraste el envío de correos electrónicos y simulaste la obtención de correos.
Integraste servicios de IA para generar respuestas a correos electrónicos.
Gestionaste plantillas de correos electrónicos y las almacenaste en Back4App.
Rastreaste el historial de respuestas para análisis.
Agregaste análisis básicos utilizando fl_chart.
Implementaste soporte offline utilizando el almacenamiento de datos local de Parse.
Esta aplicación proporciona una base para construir características más avanzadas, como integración real de correo electrónico con OAuth, capacidades avanzadas de IA y un diseño mejorado de UI/UX.
Próximos Pasos
Integración de Correo Electrónico: Implementar la obtención real de correos electrónicos utilizando las API de Gmail u Outlook con autenticación OAuth.
Características Mejoradas de IA: Ajustar los prompts de IA para mejores respuestas e implementar personalización basada en los datos del usuario.
Mejoras de UI/UX: Mejorar la interfaz de la aplicación para una mejor experiencia del usuario.
Pruebas y Despliegue: Escribir pruebas unitarias e integradas y preparar la aplicación para el despliegue en las tiendas de aplicaciones.
Mejoras de Seguridad: Cifrar datos sensibles e implementar un manejo de errores robusto y validación de entradas.
Para más información sobre el uso de Back4App con Flutter, consulte la Guía de Back4App Flutter.
Actualizado 23 Jan 2025
¿Esta página le fue útil?
Construyendo un juego multiplataforma usando Flutter y Back4app
Cómo construir una aplicación de inmersión en idiomas AR con Flutter y Back4App