Comment créer une application de réponse par e-mail AI avec Flutter et Back4App

introduction dans ce tutoriel, vous allez créer une application de réponse par e mail alimentée par l'ia en utilisant flutter pour le frontend et back4app pour le backend l'application s'intégrera aux services de messagerie comme gmail ou outlook, analysera les e mails entrants à l'aide de modèles d'ia (comme le gpt 3 d'openai) et générera des réponses personnalisées à la fin de ce tutoriel, vous disposerez d'une application fonctionnelle capable de gérer les e mails, de générer des réponses automatisées et de permettre aux utilisateurs de personnaliser leurs interactions par e mail cette application tire parti de la puissance du parse server de back4app pour gérer l'authentification des utilisateurs, le stockage des données et les fonctions cloud, offrant une solution backend évolutive sans avoir besoin de gérer l'infrastructure serveur l'intégration des capacités d'ia et des services de messagerie améliorera vos compétences en développement flutter et fournira une base pour construire des applications avancées et axées sur les données prérequis pour compléter ce tutoriel, vous aurez besoin de un compte back4app inscrivez vous pour un compte gratuit sur back4app https //www back4app com/ flutter sdk installé sur votre machine locale suivez le guide d'installation de flutter https //flutter dev/docs/get started/install pour votre système d'exploitation connaissances de base en dart et en développement flutter si vous êtes nouveau dans flutter, envisagez de consulter la documentation flutter https //flutter dev/docs avant de continuer familiarité avec les api rest et la programmation asynchrone en dart un compte avec un fournisseur de services d'ia (par exemple, openai) inscrivez vous pour obtenir une clé api afin d'accéder aux modèles d'ia un compte e mail (gmail ou outlook) pour les tests d'intégration étape 1 — configuration de votre backend back4app dans cette étape, vous allez créer une nouvelle application back4app, configurer vos classes de données et configurer le backend pour qu'il fonctionne avec votre application flutter 1 1 créer une nouvelle application sur back4app connectez vous à votre tableau de bord back4app https //dashboard back4app com/ cliquez sur "créer une nouvelle application" entrez un nom de l'application (par exemple, "répondeur d'e mails ai") et sélectionnez votre icône de l'application choisissez votre emplacement de serveur si cela vous est demandé cliquez sur "créer" 1 2 récupérer les clés de l'application dans le tableau de bord de votre application, accédez à paramètres de l'application > sécurité et clés notez l' id de l'application et la clé client vous en aurez besoin pour la configuration de votre application flutter 1 3 définir vos classes de modèle de données nous allons créer les classes suivantes dans back4app utilisateur (par défaut) compteemail modèleemail historiquedesréponses 1 3 1 créer la classe compteemail allez à base de données > navigateur cliquez sur "créer une classe" choisissez "personnalisé" et nommez le compteemail cliquez sur "créer la classe" ajoutez les colonnes suivantes à emailaccount utilisateur (pointer< user>) pointe vers l' utilisateur objet adresseemail (string) typedecompte (string) par exemple, gmail, outlook authtoken (string) stockera des jetons cryptés 1 3 2 créer la classe emailtemplate répétez les étapes pour créer une nouvelle classe nommée emailtemplate ajoutez les colonnes suivantes à emailtemplate utilisateur (pointer< user>) nomdutemplate (string) contenudutemplate (string) typedetemplate (string) par exemple, formel, décontracté, suivi 1 3 3 créer la classe responsehistory créez une nouvelle classe nommée responsehistory ajoutez les colonnes suivantes à responsehistory utilisateur (pointeur< utilisateur>) résuméemailoriginal (chaîne) réponsegénérée (chaîne) réponsemodifiéeparl'utilisateur (chaîne) tempséconomisé (nombre) 1 4 définir les autorisations au niveau de la classe assurez vous que seuls les utilisateurs authentifiés peuvent accéder à leurs données dans chaque classe, allez à la sécurité section définissez les autorisations au niveau de la classe (clp) pour permettre l'accès en lecture/écriture uniquement aux utilisateurs authentifiés étape 2 — initialisation de votre projet flutter dans cette étape, vous allez configurer votre projet flutter et le configurer pour se connecter à back4app 2 1 créer un nouveau projet flutter ouvrez votre terminal et exécutez flutter create ai email responder naviguez vers le répertoire du projet cd ai email responder 2 2 ajouter les dépendances requises ouvrez pubspec yaml et ajoutez les dépendances suivantes 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 exécutez flutter pub get pour installer les paquets 2 3 initialiser parse dans votre application créez un nouveau fichier 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'; remplacez 'your application id' et 'your client key' par les clés de back4app dans lib/main dart , initialisez 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()); } créez 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(), ); } } étape 3 — mise en œuvre de l'authentification des utilisateurs vous allez maintenant mettre en œuvre l'enregistrement et la connexion des utilisateurs en utilisant parse server 3 1 créer des écrans d'authentification créer lib/screens/login screen dart et lib/screens/signup screen dart pour des raisons de concision, nous nous concentrerons sur la fonctionnalité de connexion // 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 mettre à jour la navigation de l'écran d'accueil modifier lib/app dart pour diriger les utilisateurs vers l'écran de connexion s'ils ne sont pas authentifiés // 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(), ); } }, ); } } étape 4 — intégration des services de messagerie dans cette étape, vous allez configurer l'intégration des e mails en utilisant le flutter email sender package 4 1 configurer l'expéditeur d'email ajoutez les autorisations nécessaires à vos configurations android et ios pour android , mettez à jour android/app/src/main/androidmanifest xml \<uses permission android\ name="android permission internet"/> pour ios , assurez vous que votre info plist inclut \<key>nsapptransportsecurity\</key> \<dict> \<key>nsallowsarbitraryloads\</key> \<true/> \</dict> 4 2 implémenter la fonctionnalité d'envoi d'email créez 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 implémenter la récupération des e mails (espace réservé) la récupération des e mails auprès de fournisseurs comme gmail nécessite oauth et l'intégration d'api, ce qui peut être complexe pour ce tutoriel, nous allons simuler la récupération des e mails créer 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, }); } créer lib/services/email service dart (mettre à jour avec des données fictives) // 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 } étape 5 — intégration des services d'ia pour la génération de réponses vous allez maintenant configurer l'intégration de l'ia pour générer des réponses par e mail 5 1 configurer les requêtes http vers l'api ai installer le http paquet (déjà ajouté) créer 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'); } } } remarque remplacez 'votre cle api openai' par votre véritable clé api 5 2 implémenter le widget d'édition de réponse créer 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(), ), ); } } 5 3 affichage des réponses générées par l'ia dans lib/screens/email detail screen dart , intégrez le service 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'), ), ], ), ), ); } } étape 6 — gestion des modèles d'email vous allez maintenant mettre en œuvre la gestion des modèles d'email en utilisant back4app 6 1 définir le modèle emailtemplate créer 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 implémenter le service de modèle créer 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 créer l'écran de gestion des modèles créer 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), )); } } étape 7 — mise en œuvre du suivi de l'historique des réponses vous allez maintenant enregistrer les réponses générées par l'ia et les modifications des utilisateurs dans back4app pour l'analyse 7 1 définir le modèle responsehistory créer 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 enregistrer l'historique des réponses après l'envoi de l'email mettre à jour lib/screens/email detail screen dart dans la sendresponse méthode 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 } étape 8 — ajouter des analyses avec des graphiques vous allez maintenant mettre en œuvre un tableau de bord d'analytique de base en utilisant fl chart 8 1 implémenter le service d'analytique créer 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 créer un tableau de bord d'analytique créer 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'), )); } } étape 9 — mise en œuvre du support hors ligne vous allez maintenant ajouter des capacités hors ligne à votre application en utilisant le magasin de données local de parse 9 1 activer le magasin de données local dans lib/main dart , activez le magasin de données local await parse() initialize( keyapplicationid, keyparseserverurl, clientkey keyclientkey, autosendsessionid true, debug true, corestore await corestoresembastimp getinstance(), ); 9 2 modifier les modèles de données pour le pinning dans vos modèles (par exemple, responsehistory ), ajoutez des méthodes pour épingler et désépingler des objets future\<void> pin() async { await this pin(); } future\<void> unpin() async { await this unpin(); } 9 3 implémenter le gestionnaire hors ligne créer 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 utiliser les données hors ligne en cas d'absence de connectivité dans votre logique de récupération d'e mails, vérifiez la connectivité et utilisez les données mises en cache si vous êtes hors ligne conclusion dans ce tutoriel, vous avez construit une application de réponse par e mail ai en utilisant flutter et back4app vous configurer un backend back4app avec les modèles de données nécessaires et les configurations de sécurité initialisé un projet flutter et connecté à back4app implémenté l'authentification des utilisateurs avec parse server intégré l'envoi d'e mails et simulé la récupération d'e mails intégré des services d'ia pour générer des réponses par e mail géré les modèles d'e mails et les a stockés dans back4app suivi de l'historique des réponses pour l'analyse ajouté des analyses de base en utilisant fl chart implémenté le support hors ligne en utilisant le magasin de données local de parse cette application fournit une base pour construire des fonctionnalités plus avancées, telles que l'intégration réelle des e mails avec oauth, des capacités d'ia avancées et une conception ui/ux améliorée prochaines étapes intégration des e mails implémenter la récupération réelle des e mails en utilisant les api gmail ou outlook avec authentification oauth fonctionnalités ia améliorées affiner les invites d'ia pour de meilleures réponses et mettre en œuvre la personnalisation basée sur les données utilisateur améliorations ui/ux améliorer l'interface de l'application pour une meilleure expérience utilisateur tests et déploiement écrire des tests unitaires et d'intégration et préparer l'application pour le déploiement sur les magasins d'applications améliorations de la sécurité chiffrer les données sensibles et mettre en œuvre une gestion des erreurs robuste et une validation des entrées pour plus d'informations sur l'utilisation de back4app avec flutter, consultez le guide back4app flutter https //www back4app com/docs/flutter/parse sdk/