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

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 https //www back4app com/ flutter sdk installato sul tuo computer locale segui la guida all'installazione di flutter https //flutter dev/docs/get started/install 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 https //flutter dev/docs 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 https //dashboard back4app com/ 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 flutter create ai email responder naviga nella directory del progetto cd ai email responder 2 2 aggiungi le dipendenze richieste apri pubspec yaml e aggiungi le seguenti dipendenze 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 // 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 // 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 // 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 // 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 // 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 \<uses permission android\ name="android permission internet"/> per ios , assicurati che il tuo info plist includa \<key>nsapptransportsecurity\</key> \<dict> \<key>nsallowsarbitraryloads\</key> \<true/> \</dict> 4 2 implementa la funzionalità di invio email crea lib/services/email service dart // lib/services/email service dart import 'package\ flutter email sender/flutter email sender dart'; class emailservice { future\<void> sendemail(string subject, string body, list\<string> recipients) async { final email email = email( body body, subject subject, recipients recipients, ishtml false, ); await flutteremailsender send(email); } } 4 3 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 // 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) // 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 // 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 // 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 // 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 // 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 // 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 // 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 // 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 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 // 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 // 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 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 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 // 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 https //www back4app com/docs/flutter/parse sdk/