Flutter Templates
วิธีสร้างแอปตอบกลับอีเมลด้วย AI โดยใช้ Flutter และ Back4App
40 นาที
บทนำ ในบทเรียนนี้ คุณจะสร้างแอปตอบกลับอีเมลที่ขับเคลื่อนด้วย ai โดยใช้ flutter สำหรับส่วนหน้าและ back4app สำหรับส่วนหลัง แอปจะรวมเข้ากับบริการอีเมล เช่น gmail หรือ outlook วิเคราะห์อีเมลที่เข้ามาโดยใช้โมเดล ai (เช่น gpt 3 ของ openai) และสร้างการตอบกลับที่ปรับแต่งได้ เมื่อสิ้นสุดบทเรียนนี้ คุณจะมีแอปที่ใช้งานได้ซึ่งสามารถจัดการอีเมล สร้างการตอบกลับอัตโนมัติ และอนุญาตให้ผู้ใช้ปรับแต่งการโต้ตอบทางอีเมลของตนได้ แอปนี้ใช้พลังของ parse server ของ back4app เพื่อจัดการการตรวจสอบสิทธิ์ของผู้ใช้ การจัดเก็บข้อมูล และฟังก์ชันคลาวด์ โดยให้โซลูชันส่วนหลังที่สามารถปรับขนาดได้โดยไม่ต้องจัดการโครงสร้างพื้นฐานของเซิร์ฟเวอร์ การรวมความสามารถ ai และบริการอีเมลจะช่วยพัฒนาทักษะการพัฒนา flutter ของคุณและให้พื้นฐานในการสร้างแอปพลิเคชันที่ซับซ้อนและขับเคลื่อนด้วยข้อมูล ข้อกำหนดเบื้องต้น ในการทำบทเรียนนี้ให้เสร็จสิ้น คุณจะต้องมี บัญชี back4app ลงทะเบียนสำหรับบัญชีฟรีที่ back4app https //www back4app com/ ติดตั้ง flutter sdk บนเครื่องของคุณ ทำตาม คู่มือการติดตั้ง flutter https //flutter dev/docs/get started/install สำหรับระบบปฏิบัติการของคุณ ความรู้พื้นฐานเกี่ยวกับ dart และ flutter การพัฒนา หากคุณเป็นมือใหม่ใน flutter ให้พิจารณาทบทวน เอกสาร flutter https //flutter dev/docs ก่อนดำเนินการ ความคุ้นเคยกับ rest apis และ การเขียนโปรแกรมแบบอะซิงโครนัส ใน dart บัญชีกับ ผู้ให้บริการ ai (เช่น openai) ลงทะเบียนเพื่อรับคีย์ api เพื่อเข้าถึงโมเดล ai บัญชี อีเมล (gmail หรือ outlook) สำหรับการทดสอบการรวม ขั้นตอนที่ 1 — การตั้งค่า back4app backend ของคุณ ในขั้นตอนนี้ คุณจะสร้างแอป back4app ใหม่ ตั้งค่าชั้นข้อมูลของคุณ และกำหนดค่าพื้นหลังให้ทำงานร่วมกับแอป flutter ของคุณ 1 1 สร้างแอปพลิเคชันใหม่บน back4app เข้าสู่ระบบที่ แดชบอร์ด back4app https //dashboard back4app com/ คลิกที่ "สร้างแอปใหม่" กรอก ชื่อแอป (เช่น "ai email responder") และเลือก ไอคอนแอป เลือกตำแหน่งเซิร์ฟเวอร์ของคุณหากมีการแจ้งเตือน คลิก "สร้าง" 1 2 ดึงคีย์แอปพลิเคชัน ในแดชบอร์ดของแอปของคุณ ไปที่ การตั้งค่าแอป > ความปลอดภัย & คีย์ จด รหัสแอปพลิเคชัน และ คีย์ลูกค้า คุณจะต้องใช้สิ่งเหล่านี้สำหรับการกำหนดค่าแอป flutter ของคุณ 1 3 กำหนดคลาสโมเดลข้อมูลของคุณ เราจะสร้างคลาสต่อไปนี้ใน back4app ผู้ใช้ (ค่าเริ่มต้น) บัญชีอีเมล แม่แบบอีเมล ประวัติการตอบกลับ 1 3 1 สร้างคลาส emailaccount ไปที่ ฐานข้อมูล > เบราว์เซอร์ คลิก "สร้างคลาส" เลือก "กำหนดเอง" และตั้งชื่อเป็น บัญชีอีเมล คลิก "สร้างคลาส" เพิ่มคอลัมน์ต่อไปนี้ไปยัง emailaccount ผู้ใช้ (pointer< user>) ชี้ไปที่ user อ็อบเจ็กต์ emailaddress (string) accounttype (string) เช่น gmail, outlook authtoken (string) จะเก็บโทเค็นที่เข้ารหัส 1 3 2 สร้างคลาส emailtemplate ทำซ้ำขั้นตอนเพื่อสร้างคลาสใหม่ชื่อ emailtemplate เพิ่มคอลัมน์ต่อไปนี้ไปยัง emailtemplate ผู้ใช้ (pointer< user>) templatename (string) templatecontent (string) templatetype (string) เช่น ทางการ, ไม่เป็นทางการ, ติดตาม 1 3 3 สร้างคลาส responsehistory สร้างคลาสใหม่ชื่อ responsehistory เพิ่มคอลัมน์ต่อไปนี้ไปยัง responsehistory ผู้ใช้ (pointer< user>) สรุปอีเมลต้นฉบับ (string) การตอบสนองที่สร้างขึ้น (string) การตอบสนองที่ผู้ใช้แก้ไข (string) เวลาที่ประหยัดได้ (number) 1 4 ตั้งค่าการอนุญาตระดับคลาส ตรวจสอบให้แน่ใจว่าผู้ใช้ที่ได้รับการตรวจสอบแล้วเท่านั้นที่สามารถเข้าถึงข้อมูลของตนได้ ในแต่ละคลาส ให้ไปที่ ความปลอดภัย ส่วน ตั้งค่า การอนุญาตระดับคลาส (clp) เพื่ออนุญาตการเข้าถึงแบบอ่าน/เขียนเฉพาะผู้ใช้ที่ได้รับการตรวจสอบแล้วเท่านั้น ขั้นตอนที่ 2 — การเริ่มต้นโปรเจกต์ flutter ของคุณ ในขั้นตอนนี้ คุณจะตั้งค่าโปรเจกต์ flutter ของคุณและกำหนดค่าให้เชื่อมต่อกับ back4app 2 1 สร้างโปรเจกต์ flutter ใหม่ เปิดเทอร์มินัลของคุณและรัน flutter create ai email responder ไปที่ไดเรกทอรีโปรเจกต์ cd ai email responder 2 2 เพิ่มการพึ่งพาที่จำเป็น เปิด pubspec 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 รัน flutter pub get เพื่อติดตั้งแพ็คเกจ 2 3 เริ่มต้น parse ในแอปของคุณ สร้างไฟล์ใหม่ 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'; แทนที่ 'your application id' และ 'your client key' ด้วยคีย์จาก back4app ใน lib/main dart , เริ่มต้น 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()); } สร้าง 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(), ); } } ขั้นตอนที่ 3 — การดำเนินการรับรองความถูกต้องของผู้ใช้ คุณจะดำเนินการลงทะเบียนและเข้าสู่ระบบผู้ใช้โดยใช้ parse server 3 1 สร้างหน้าจอการตรวจสอบสิทธิ์ สร้าง lib/screens/login screen dart และ lib/screens/signup screen 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'), ), ], ), ), ); } } 3 2 อัปเดตการนำทางหน้าจอหลัก แก้ไข lib/app 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(), ); } }, ); } } ขั้นตอนที่ 4 — การรวมบริการอีเมล ในขั้นตอนนี้ คุณจะตั้งค่าการรวมอีเมลโดยใช้ flutter email sender แพ็คเกจ 4 1 ตั้งค่าอีเมลผู้ส่ง เพิ่มสิทธิ์ที่จำเป็นในการตั้งค่าของ android และ ios ของคุณ สำหรับ android , อัปเดต android/app/src/main/androidmanifest xml \<uses permission android\ name="android permission internet"/> สำหรับ ios , ตรวจสอบให้แน่ใจว่า info plist รวมถึง \<key>nsapptransportsecurity\</key> \<dict> \<key>nsallowsarbitraryloads\</key> \<true/> \</dict> 4 2 นำฟังก์ชันการส่งอีเมลไปใช้ สร้าง 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 การนำเสนอการดึงอีเมล (placeholder) การดึงอีเมลจากผู้ให้บริการเช่น gmail ต้องการ oauth และการรวม api ซึ่งอาจซับซ้อน สำหรับบทแนะนำนี้ เราจะจำลองการดึงอีเมล สร้าง 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, }); } สร้าง lib/services/email service 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 '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 } ขั้นตอนที่ 5 — การรวมบริการ ai สำหรับการสร้างการตอบกลับ คุณจะตั้งค่าการรวม ai เพื่อสร้างการตอบกลับทางอีเมล 5 1 ตั้งค่า http requests ไปยัง ai api ติดตั้ง http แพ็คเกจ (ได้เพิ่มแล้ว) สร้าง 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'); } } } หมายเหตุ เปลี่ยน 'your openai api key' เป็น api key ที่แท้จริงของคุณ 5 2 นำ widget editor การตอบกลับไปใช้ สร้าง 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 การแสดงผลการตอบสนองที่สร้างโดย ai ใน lib/screens/email detail screen dart , รวมบริการ ai // 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'), ), ], ), ), ); } } ขั้นตอนที่ 6 — การจัดการเทมเพลตอีเมล คุณจะดำเนินการจัดการเทมเพลตอีเมลโดยใช้ back4app 6 1 กำหนดโมเดล emailtemplate สร้าง 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 นำบริการเทมเพลตไปใช้ สร้าง 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 สร้างหน้าจอการจัดการเทมเพลต สร้าง 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), )); } } ขั้นตอนที่ 7 — การติดตามประวัติตอบกลับ คุณจะบันทึกการตอบกลับที่สร้างโดย ai และการแก้ไขของผู้ใช้ไปยัง back4app สำหรับการวิเคราะห์ 7 1 กำหนดโมเดล responsehistory สร้าง 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 บันทึกประวัติการตอบกลับหลังจากส่งอีเมล อัปเดต lib/screens/email detail screen dart ใน sendresponse วิธีการ 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 } ขั้นตอนที่ 8 — การเพิ่มการวิเคราะห์ด้วยกราฟ คุณจะดำเนินการสร้างแดชบอร์ดการวิเคราะห์พื้นฐานโดยใช้ fl chart 8 1 ดำเนินการบริการการวิเคราะห์ สร้าง 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 สร้างแดชบอร์ดการวิเคราะห์ สร้าง 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'), )); } } ขั้นตอนที่ 9 — การนำการสนับสนุนออฟไลน์ไปใช้ คุณจะเพิ่มความสามารถในการทำงานออฟไลน์ให้กับแอปของคุณโดยใช้ที่เก็บข้อมูลท้องถิ่นของ parse 9 1 เปิดใช้งานที่เก็บข้อมูลท้องถิ่น ใน lib/main dart , เปิดใช้งานที่เก็บข้อมูลท้องถิ่น await parse() initialize( keyapplicationid, keyparseserverurl, clientkey keyclientkey, autosendsessionid true, debug true, corestore await corestoresembastimp getinstance(), ); 9 2 แก้ไขโมเดลข้อมูลสำหรับการปักหมุด ในโมเดลของคุณ (เช่น, responsehistory ) ให้เพิ่มวิธีการเพื่อปักหมุดและยกเลิกการปักหมุดวัตถุ future\<void> pin() async { await this pin(); } future\<void> unpin() async { await this unpin(); } 9 3 นำไปใช้จัดการออฟไลน์ สร้าง 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 ใช้ข้อมูลออฟไลน์เมื่อไม่มีการเชื่อมต่อ ในตรรกะการดึงอีเมลของคุณ ให้ตรวจสอบการเชื่อมต่อและใช้ข้อมูลที่เก็บไว้ในแคชหากออฟไลน์ บทสรุป ในบทเรียนนี้ คุณได้สร้างแอป ai email responder โดยใช้ flutter และ back4app คุณ ตั้งค่าแบ็กเอนด์ back4app พร้อมโมเดลข้อมูลและการกำหนดค่าความปลอดภัยที่จำเป็น เริ่มต้นโปรเจกต์ flutter และเชื่อมต่อกับ back4app ดำเนินการตรวจสอบผู้ใช้ด้วย parse server รวมการส่งอีเมลและจำลองการดึงอีเมล รวมบริการ ai เพื่อสร้างการตอบกลับอีเมล จัดการเทมเพลตอีเมลและเก็บไว้ใน back4app ติดตามประวัติการตอบกลับเพื่อการวิเคราะห์ เพิ่มการวิเคราะห์พื้นฐานโดยใช้ fl chart ดำเนินการสนับสนุนออฟไลน์โดยใช้ที่เก็บข้อมูลท้องถิ่นของ parse แอปนี้ให้พื้นฐานสำหรับการสร้างฟีเจอร์ที่ซับซ้อนมากขึ้น เช่น การรวมอีเมลจริงกับ oauth ความสามารถ ai ขั้นสูง และการออกแบบ ui/ux ที่ดีขึ้น ขั้นตอนถัดไป การรวมอีเมล ใช้ api ของ gmail หรือ outlook เพื่อดึงข้อมูลอีเมลจริงด้วยการตรวจสอบสิทธิ์ oauth ฟีเจอร์ ai ที่พัฒนาแล้ว ปรับแต่งคำสั่ง ai เพื่อให้ได้คำตอบที่ดีกว่าและนำเสนอการปรับแต่งตามข้อมูลผู้ใช้ การปรับปรุง ui/ux ปรับปรุงอินเทอร์เฟซของแอปเพื่อประสบการณ์ผู้ใช้ที่ดียิ่งขึ้น การทดสอบและการปรับใช้ เขียนการทดสอบหน่วยและการทดสอบการรวม และเตรียมแอปสำหรับการปรับใช้ในร้านแอป การปรับปรุงความปลอดภัย เข้ารหัสข้อมูลที่ละเอียดอ่อนและดำเนินการจัดการข้อผิดพลาดที่แข็งแกร่งและการตรวจสอบข้อมูลนำเข้า สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการใช้ back4app กับ flutter โปรดดูที่ คู่มือ back4app flutter https //www back4app com/docs/flutter/parse sdk/