Cara Membangun Aplikasi Respon Email AI dengan Flutter dan Back4App

pendahuluan dalam tutorial ini, anda akan membangun aplikasi respon email bertenaga ai menggunakan flutter untuk frontend dan back4app untuk backend aplikasi ini akan terintegrasi dengan layanan email seperti gmail atau outlook, menganalisis email yang masuk menggunakan model ai (seperti gpt 3 dari openai), dan menghasilkan respons yang dipersonalisasi pada akhir tutorial ini, anda akan memiliki aplikasi fungsional yang dapat mengelola email, menghasilkan respons otomatis, dan memungkinkan pengguna untuk mempersonalisasi interaksi email mereka aplikasi ini memanfaatkan kekuatan parse server dari back4app untuk menangani otentikasi pengguna, penyimpanan data, dan fungsi cloud, menyediakan solusi backend yang dapat diskalakan tanpa perlu mengelola infrastruktur server mengintegrasikan kemampuan ai dan layanan email akan meningkatkan keterampilan pengembangan flutter anda dan memberikan dasar untuk membangun aplikasi canggih yang berbasis data prasyarat untuk menyelesaikan tutorial ini, anda akan memerlukan a akun back4app daftar untuk akun gratis di back4app https //www back4app com/ flutter sdk terinstal di mesin lokal anda ikuti panduan instalasi flutter https //flutter dev/docs/get started/install untuk sistem operasi anda pengetahuan dasar tentang dart dan flutter pengembangan jika anda baru mengenal flutter, pertimbangkan untuk meninjau dokumentasi flutter https //flutter dev/docs sebelum melanjutkan keterampilan dalam rest apis dan pemrograman asinkron di dart akun dengan penyedia layanan ai (misalnya, openai) daftar untuk mendapatkan kunci api untuk mengakses model ai a akun email (gmail atau outlook) untuk pengujian integrasi langkah 1 — menyiapkan backend back4app anda dalam langkah ini, anda akan membuat aplikasi back4app baru, menyiapkan kelas data anda, dan mengonfigurasi backend untuk bekerja dengan aplikasi flutter anda 1 1 buat aplikasi baru di back4app masuk ke dasbor back4app https //dashboard back4app com/ klik "buat aplikasi baru" masukkan nama aplikasi (misalnya, "ai email responder") dan pilih ikon aplikasi pilih lokasi server anda jika diminta klik "buat" 1 2 ambil kunci aplikasi di dasbor aplikasi anda, navigasikan ke pengaturan aplikasi > keamanan & kunci catat id aplikasi dan kunci klien anda akan memerlukan ini untuk konfigurasi aplikasi flutter anda 1 3 definisikan kelas model data anda kami akan membuat kelas berikut di back4app pengguna (default) akunemail templateemail riwayatrespon 1 3 1 buat kelas akunemail pergi ke database > browser klik "buat kelas" pilih "kustom" dan beri nama akunemail klik "buat kelas" tambahkan kolom berikut ke emailaccount pengguna (pointer< user>) mengarah ke user objek alamatemail (string) tipeakun (string) misalnya, gmail, outlook authtoken (string) akan menyimpan token yang dienkripsi 1 3 2 buat kelas emailtemplate ulangi langkah untuk membuat kelas baru bernama emailtemplate tambahkan kolom berikut ke emailtemplate pengguna (pointer< user>) namatemplate (string) kontentemplate (string) tipetemplate (string) misalnya, formal, santai, tindak lanjut 1 3 3 buat kelas responsehistory buat kelas baru bernama responsehistory tambahkan kolom berikut ke responsehistory pengguna (pointer< user>) ringkasanemailasli (string) respondihasilkan (string) respondieditpengguna (string) waktudisimpan (number) 1 4 atur izin tingkat kelas pastikan hanya pengguna yang terautentikasi yang dapat mengakses data mereka di setiap kelas, pergi ke bagian keamanan atur izin tingkat kelas (clp) untuk mengizinkan akses baca/tulis hanya untuk pengguna yang terautentikasi langkah 2 — menginisialisasi proyek flutter anda dalam langkah ini, anda akan menyiapkan proyek flutter anda dan mengonfigurasinya untuk terhubung ke back4app 2 1 buat proyek flutter baru buka terminal anda dan jalankan flutter create ai email responder navigasikan ke direktori proyek cd ai email responder 2 2 tambahkan ketergantungan yang diperlukan buka pubspec yaml dan tambahkan ketergantungan berikut 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 jalankan flutter pub get untuk menginstal paket 2 3 inisialisasi parse di aplikasi anda buat file baru 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'; ganti 'your application id' dan 'your client key' dengan kunci dari back4app di lib/main dart , inisialisasi 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()); } buat 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(), ); } } langkah 3 — mengimplementasikan autentikasi pengguna anda sekarang akan mengimplementasikan pendaftaran dan login pengguna menggunakan parse server 3 1 buat layar autentikasi buat lib/screens/login screen dart dan lib/screens/signup screen dart untuk singkatnya, kita akan fokus pada fungsionalitas 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 perbarui navigasi layar utama modifikasi lib/app dart untuk mengarahkan pengguna ke layar login jika mereka tidak terautentikasi // 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(), ); } }, ); } } langkah 4 — mengintegrasikan layanan email dalam langkah ini, anda akan mengatur integrasi email menggunakan paket flutter email sender 4 1 konfigurasi pengirim email tambahkan izin yang diperlukan ke konfigurasi android dan ios anda untuk android , perbarui android/app/src/main/androidmanifest xml \<uses permission android\ name="android permission internet"/> untuk ios , pastikan bahwa info plist anda mencakup \<key>nsapptransportsecurity\</key> \<dict> \<key>nsallowsarbitraryloads\</key> \<true/> \</dict> 4 2 implementasikan fungsionalitas pengiriman email buat 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 implementasi pengambilan email (placeholder) pengambilan email dari penyedia seperti gmail memerlukan oauth dan integrasi api, yang bisa menjadi kompleks untuk tutorial ini, kita akan mensimulasikan pengambilan email buat 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, }); } buat lib/services/email service dart (perbarui dengan data dummy) // 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 } langkah 5 — mengintegrasikan layanan ai untuk generasi respons anda sekarang akan menyiapkan integrasi ai untuk menghasilkan respons email 5 1 siapkan permintaan http ke api ai instal paket http (sudah ditambahkan) buat 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'); } } } catatan ganti 'your openai api key' dengan kunci api anda yang sebenarnya 5 2 implementasikan widget editor respons buat 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 menampilkan respons yang dihasilkan ai di lib/screens/email detail screen dart , integrasikan layanan 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'), ), ], ), ), ); } } langkah 6 — mengelola template email anda sekarang akan mengimplementasikan manajemen template email menggunakan back4app 6 1 definisikan model emailtemplate buat 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 implementasikan layanan template buat 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 buat layar manajemen template buat 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), )); } } langkah 7 — mengimplementasikan pelacakan riwayat respons anda sekarang akan menyimpan respons yang dihasilkan ai dan suntingan pengguna ke back4app untuk analitik 7 1 definisikan model responsehistory buat 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 simpan riwayat respon setelah mengirim email perbarui lib/screens/email detail screen dart di sendresponse metode 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 } langkah 8 — menambahkan analitik dengan grafik 8 1 implementasikan layanan analitik buat 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 buat dasbor analitik buat 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'), )); } } langkah 9 — mengimplementasikan dukungan offline anda sekarang akan menambahkan kemampuan offline ke aplikasi anda menggunakan penyimpanan data lokal parse 9 1 aktifkan penyimpanan data lokal di lib/main dart , aktifkan penyimpanan data lokal await parse() initialize( keyapplicationid, keyparseserverurl, clientkey keyclientkey, autosendsessionid true, debug true, corestore await corestoresembastimp getinstance(), ); 9 2 modifikasi model data untuk pinning dalam model anda (misalnya, responsehistory ), tambahkan metode untuk menyematkan dan menghapus sematan objek future\<void> pin() async { await this pin(); } future\<void> unpin() async { await this unpin(); } 9 3 implementasikan manajer offline buat 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 gunakan data offline ketika tidak ada konektivitas dalam logika pengambilan email anda, periksa konektivitas dan gunakan data yang di cache jika offline kesimpulan dalam tutorial ini, anda membangun aplikasi responder email ai menggunakan flutter dan back4app anda mengatur backend back4app dengan model data dan konfigurasi keamanan yang diperlukan menginisialisasi proyek flutter dan menghubungkannya ke back4app menerapkan otentikasi pengguna dengan parse server mengintegrasikan pengiriman email dan mensimulasikan pengambilan email mengintegrasikan layanan ai untuk menghasilkan respons email mengelola template email dan menyimpannya di back4app melacak riwayat respons untuk analitik menambahkan analitik dasar menggunakan fl chart menerapkan dukungan offline menggunakan penyimpanan data lokal parse aplikasi ini menyediakan dasar untuk membangun fitur yang lebih canggih, seperti integrasi email nyata dengan oauth, kemampuan ai yang lebih maju, dan desain ui/ux yang ditingkatkan langkah selanjutnya integrasi email implementasikan pengambilan email nyata menggunakan api gmail atau outlook dengan otentikasi oauth fitur ai yang ditingkatkan sesuaikan prompt ai untuk respons yang lebih baik dan terapkan personalisasi berdasarkan data pengguna peningkatan ui/ux tingkatkan antarmuka aplikasi untuk pengalaman pengguna yang lebih baik pengujian dan penyebaran tulis unit dan pengujian integrasi dan siapkan aplikasi untuk penyebaran ke toko aplikasi peningkatan keamanan enkripsi data sensitif dan terapkan penanganan kesalahan yang kuat serta validasi input untuk informasi lebih lanjut tentang menggunakan back4app dengan flutter, lihat panduan back4app flutter https //www back4app com/docs/flutter/parse sdk/