Modelli Flutter
Come creare un'app per rispondere alle email con intelligenza artificiale utilizzando Flutter e Back4App?

41min
Introduzione
In questo tutorial, costruirai un'app di risposta email alimentata dall'IA utilizzando Flutter per il frontend e Back4App per il backend. L'app si integrerà con servizi email come Gmail o Outlook, analizzerà le email in arrivo utilizzando modelli di IA (come il GPT-3 di OpenAI) e genererà risposte personalizzate. Alla fine di questo tutorial, avrai un'app funzionale in grado di gestire le email, generare risposte automatiche e consentire agli utenti di personalizzare le loro interazioni email.
Questa app sfrutta la potenza del Parse Server di Back4App per gestire l'autenticazione degli utenti, l'archiviazione dei dati e le funzioni cloud, fornendo una soluzione backend scalabile senza la necessità di gestire l'infrastruttura del server. Integrare capacità di IA e servizi email migliorerà le tue competenze nello sviluppo di Flutter e fornirà una base per costruire applicazioni avanzate e basate sui dati.
Prerequisiti
Per completare questo tutorial, avrai bisogno di:
Un account Back4App. Registrati per un account gratuito su Back4App.
Flutter SDK installato sul tuo computer locale. Segui la guida all'installazione di Flutter per il tuo sistema operativo.
Conoscenze di base di Dart e Flutter sviluppo. Se sei nuovo in Flutter, considera di rivedere la documentazione di Flutter prima di procedere.
Familiarità con REST APIs e programmazione asincrona in Dart.
Un account con un fornitore di servizi IA (ad es., OpenAI). Registrati per una chiave API per accedere ai modelli di IA.
Un account email (Gmail o Outlook) per il testing dell'integrazione.
Passo 1 — Configurare il tuo backend Back4App
In questo passo, creerai una nuova applicazione Back4App, configurerai le tue classi di dati e configurerai il backend per lavorare con la tua app Flutter.
1.1. Crea una Nuova Applicazione su Back4App
Accedi al tuo dashboard di Back4App.
Clicca su "Crea nuova App".
Inserisci un Nome App (ad esempio, "AI Email Responder") e seleziona la tua Icona App.
Scegli la posizione del server se richiesto.
Clicca "Crea".
1.2. Recupera le Chiavi dell'Applicazione
Nel dashboard della tua app, vai a Impostazioni App > Sicurezza e Chiavi.
Annota il ID Applicazione e il Client Key. Avrai bisogno di questi per la configurazione della tua app Flutter.
1.3. Definisci le Tue Classi di Modello Dati
Creeremo le seguenti classi in Back4App:
Utente (predefinito)
EmailAccount
EmailTemplate
ResponseHistory
1.3.1. Crea la classe EmailAccount
Vai a Database > Browser.
Clicca su "Crea una classe".
Scegli "Personalizzata" e chiamala EmailAccount.
Clicca su "Crea classe".
Aggiungi le seguenti colonne a EmailAccount:
utente (Puntatore<_User>): Punta all' Utente oggetto.
indirizzoEmail (Stringa)
tipoAccount (Stringa): ad es., Gmail, Outlook.
tokenAutenticazione (Stringa): Memorizzerà token crittografati.
1.3.2. Crea la classe EmailTemplate
Ripeti i passaggi per creare una nuova classe chiamata EmailTemplate.
Aggiungi le seguenti colonne a EmailTemplate:
utente (Puntatore<_User>)
nomeTemplate (Stringa)
contenutoTemplate (Stringa)
tipoTemplate (Stringa): ad es., formale, informale, follow-up.
1.3.3. Crea la classe ResponseHistory
Crea una nuova classe chiamata ResponseHistory.
Aggiungi le seguenti colonne a ResponseHistory:
utente (Pointer<_User>)
sommarioEmailOriginale (String)
rispostaGenerata (String)
rispostaModificataDallUtente (String)
tempoRisparmiato (Number)
1.4. Imposta i permessi a livello di classe
Assicurati che solo gli utenti autenticati possano accedere ai loro dati:
In ogni classe, vai alla Sezione Sicurezza.
Imposta Permessi a livello di classe (CLP) per consentire l'accesso in lettura/scrittura solo agli utenti autenticati.
Passo 2 — Inizializzazione del tuo progetto Flutter
In questo passo, configurerai il tuo progetto Flutter e lo configurerai per connettersi a Back4App.
2.1. Crea un nuovo progetto Flutter
Apri il tuo terminale e esegui:
Bash
flutter create ai_email_responder
flutter create ai_email_responder
﻿
Naviga nella directory del progetto:
Bash
cd ai_email_responder
cd ai_email_responder
﻿
2.2. Aggiungi le dipendenze richieste
Apri pubspec.yaml e aggiungi le seguenti dipendenze:
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
﻿
Esegui flutter pub get per installare i pacchetti.
2.3. Inizializza Parse nella tua app
Crea un nuovo file 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';
﻿
Sostituisci 'YOUR_APPLICATION_ID' e 'YOUR_CLIENT_KEY' con le chiavi di Back4App.
In lib/main.dart, inizializza 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(),
    );
  }
}
﻿
Passo 3 — Implementazione dell'autenticazione utente
Ora implementerai la registrazione e il login degli utenti utilizzando Parse Server.
3.1. Crea Schermate di Autenticazione
Crea lib/screens/login_screen.dart e lib/screens/signup_screen.dart. Per brevità, ci concentreremo sulla funzionalità di accesso.
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. Aggiorna Navigazione della Schermata Principale
Modifica lib/app.dart per indirizzare gli utenti alla schermata di accesso se non sono autenticati.
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(),
          );
        }
      },
    );
  }
}
﻿
Passo 4 — Integrazione dei Servizi Email
In questo passo, configurerai l'integrazione email utilizzando il flutter_email_sender pacchetto.
4.1. Configura il mittente dell'email
Aggiungi le autorizzazioni necessarie alle tue configurazioni Android e iOS.
Per Android, aggiorna android/app/src/main/AndroidManifest.xml:
XML
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.INTERNET"/>
﻿
Per iOS, assicurati che il tuo Info.plist includa:
XML
<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>
<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>
﻿
4.2. Implementa la funzionalità di invio email
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. Implementare il recupero delle email (segnaposto)
Il recupero delle email dai provider come Gmail richiede OAuth e integrazione API, il che può essere complesso. Per questo tutorial, simuleremo il recupero delle email.
Crea 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,
  });
}
﻿
Crea lib/services/email_service.dart (aggiorna con dati fittizi):
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
}
﻿
Passo 5 — Integrazione dei servizi AI per la generazione di risposte
Ora configurerai l'integrazione AI per generare risposte via email.
5.1. Configurare le Richieste HTTP all'API AI
Installa il http pacchetto (già aggiunto).
Crea 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: Sostituisci 'YOUR_OPENAI_API_KEY' con la tua chiave API effettiva.
5.2. Implementare il Widget dell'Editor di Risposte
Crea 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: Sostituisci 'YOUR_OPENAI_API_KEY' con la tua chiave API effettiva.
5.3. Visualizzazione delle risposte generate dall'IA
In lib/screens/email_detail_screen.dart, integra il servizio 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'),
                  ),
                ],
              ),
      ),
    );
  }
}
﻿
Passo 6 — Gestione dei modelli di email
Ora implementerai la gestione dei modelli di email utilizzando Back4App.
6.1. Definire il modello EmailTemplate
Creare 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. Implementare il servizio Template
Crea 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. Crea la schermata di gestione dei modelli
Crea 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),
        ));
  }
}
﻿
Passo 7 — Implementazione del tracciamento della cronologia delle risposte
Ora salverai le risposte generate dall'IA e le modifiche degli utenti su Back4App per l'analisi.
7.1. Definisci il modello ResponseHistory
Crea 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. Salva la cronologia delle risposte dopo aver inviato l'email
Aggiorna lib/screens/email_detail_screen.dart nel sendResponse metodo:
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
}
﻿
Passo 8 — Aggiungere analisi con grafici
Ora implementerai un dashboard di analisi di base utilizzando fl_chart.
8.1. Implementare il servizio di analisi
Crea 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. Crea il Dashboard di Analytics
Crea 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'),
        ));
  }
}
﻿
Passo 9 — Implementazione del Supporto Offline
Ora aggiungerai funzionalità offline alla tua app utilizzando il datastore locale di Parse.
9.1. Abilita il Datastore Locale
In lib/main.dart, abilita il datastore locale:
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. Modifica i modelli di dati per il pinning
Nei tuoi modelli (ad es., ResponseHistory, aggiungi metodi per fissare e rimuovere il pin dagli oggetti:
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. Implementa il gestore offline
Crea 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. Usa i dati offline quando non c'è connettività
Nella tua logica di recupero delle email, controlla la connettività e utilizza i dati memorizzati nella cache se sei offline.
Conclusione
In questo tutorial, hai costruito un'app di risposta automatica alle email utilizzando Flutter e Back4App. Hai:
Impostato un backend Back4App con i modelli di dati necessari e le configurazioni di sicurezza.
Inizializzato un progetto Flutter e collegato a Back4App.
Implementato l'autenticazione degli utenti con Parse Server.
Integrato l'invio di email e simulato il recupero delle email.
Integrato servizi di intelligenza artificiale per generare risposte alle email.
Gestito i modelli di email e memorizzati in Back4App.
Tracciato la cronologia delle risposte per analisi.
Aggiunto analisi di base utilizzando fl_chart.
Implementato il supporto offline utilizzando il data store locale di Parse.
Questa app fornisce una base per costruire funzionalità più avanzate, come l'integrazione reale delle email con OAuth, capacità avanzate di intelligenza artificiale e un design UI/UX migliorato.
Prossimi Passi
Integrazione Email: Implementare il recupero reale delle email utilizzando le API di Gmail o Outlook con autenticazione OAuth.
Funzionalità AI Migliorate: Ottimizzare i prompt dell'AI per risposte migliori e implementare la personalizzazione basata sui dati degli utenti.
Miglioramenti UI/UX: Migliorare l'interfaccia dell'app per una migliore esperienza utente.
Test e Distribuzione: Scrivere test unitari e di integrazione e preparare l'app per la distribuzione sugli app store.
Miglioramenti della Sicurezza: Crittografare i dati sensibili e implementare una gestione degli errori robusta e la validazione degli input.
Per ulteriori informazioni su come utilizzare Back4App con Flutter, fare riferimento al Guida Back4App Flutter.
Aggiornato 23 Jan 2025
Questa pagina ti è stata di aiuto?
Crea un gioco multipiattaforma con Flutter e Back4app
AVANTI IL PROSSIMO
Come costruire un'app di immersione linguistica in AR con Flutter e Back4App