การสร้างแอปอีคอมเมิร์ซด้วย Flutter, Back4App และการรวม Stripe ผ่าน Cloud Code

บทนำ การพัฒนาแอปอีคอมเมิร์ซเกี่ยวข้องกับหลายส่วนประกอบ รวมถึงการแสดงรายการสินค้า ฟังก์ชันรถเข็นช้อปปิ้ง การประมวลผลการชำระเงินที่ปลอดภัย การติดตามคำสั่งซื้อ และการรีวิวจากผู้ใช้ การรวมเครื่องมือ ui ที่ทรงพลังของ flutter กับบริการ backend ที่สามารถปรับขนาดได้ของ back4app ทำให้กระบวนการพัฒนาง่ายขึ้น นอกจากนี้ การรวม stripe สำหรับการประมวลผลการชำระเงินผ่าน back4app cloud code ยังช่วยให้การจัดการธุรกรรมมีความปลอดภัยและเป็นมืออาชีพ ในบทเรียนนี้ คุณจะสร้างแอปอีคอมเมิร์ซที่มีฟีเจอร์ดังต่อไปนี้ การแสดงรายการสินค้า แสดงสินค้าพร้อมภาพ คำอธิบาย และราคา รถเข็นช้อปปิ้ง เพิ่มและลบสินค้าจากรถเข็น บัญชีผู้ใช้ จัดการโปรไฟล์และที่อยู่ของผู้ใช้ การชำระเงินที่ปลอดภัย ประมวลผลการชำระเงินอย่างปลอดภัยโดยใช้ stripe ผ่าน back4app cloud code การติดตามคำสั่งซื้อ ติดตามสถานะและประวัติคำสั่งซื้อ รีวิวและการให้คะแนน อนุญาตให้ผู้ใช้ส่งรีวิวและการให้คะแนน ข้อกำหนดเบื้องต้น ในการติดตามบทแนะนำนี้ คุณจะต้องมี flutter sdk ติดตั้งบนเครื่องของคุณ ทำตาม คู่มือการติดตั้ง flutter https //flutter dev/docs/get started/install ความรู้พื้นฐานเกี่ยวกับ flutter และ dart ide หรือโปรแกรมแก้ไขข้อความ เช่น visual studio code หรือ android studio บัญชี back4app ลงทะเบียนที่ back4app https //www back4app com/ บัญชี stripe ลงทะเบียนที่ stripe https //stripe com/ เพื่อรับ api keys node js และ npm ติดตั้งสำหรับการพัฒนา cloud code ขั้นตอนที่ 1 – การตั้งค่าโปรเจกต์ flutter 1 1 สร้างโปรเจกต์ flutter ใหม่ เปิดเทอร์มินัลของคุณและรัน flutter create ecommerce app ไปที่ไดเรกทอรีของโปรเจกต์ cd ecommerce app 1 2 เพิ่ม dependencies เปิด pubspec yaml และเพิ่ม dependencies ต่อไปนี้ dependencies flutter sdk flutter parse server sdk flutter ^4 0 1 provider ^6 0 0 cached network image ^3 2 0 flutter stripe ^5 2 0 uuid ^3 0 6 รัน flutter pub get เพื่อติดตั้งแพ็คเกจ หมายเหตุ parse server sdk flutter สำหรับการรวม back4app provider สำหรับการจัดการสถานะ cached network image สำหรับการโหลดภาพอย่างมีประสิทธิภาพ flutter stripe สำหรับการรวม stripe บนฝั่งลูกค้า uuid สำหรับการสร้างตัวระบุที่ไม่ซ้ำกัน ขั้นตอนที่ 2 – การตั้งค่า back4app 2 1 สร้างแอปพลิเคชัน back4app ใหม่ เข้าสู่ระบบที่ แดชบอร์ด back4app https //dashboard back4app com/ คลิกที่ "สร้างแอปใหม่" กรอก "ecommerceapp" เป็นชื่อแอปพลิเคชันและคลิก "สร้าง" 2 2 ตั้งค่ารูปแบบข้อมูล เราจำเป็นต้องสร้างหลายคลาสใน back4app ผลิตภัณฑ์ ผู้ใช้ (คลาสในตัว) คำสั่งซื้อ รายการคำสั่งซื้อ รีวิว 2 2 1 คลาสผลิตภัณฑ์ ไปที่ "database" ส่วน คลิกที่ "create a class" เลือก "custom" และใส่ "product" เป็นชื่อคลาส เพิ่มคอลัมน์ต่อไปนี้ ชื่อ string คำอธิบาย string ราคา number ภาพ file หมวดหมู่ string สินค้าคงคลัง number 2 2 2 คลาสคำสั่ง สร้าง "order" คลาสด้วยคอลัมน์ต่อไปนี้ ผู้ใช้ pointer< user> จำนวนรวม number สถานะ string (ค่า "pending", "paid", "shipped", "delivered") paymentintentid string (เพื่อติดตามการชำระเงิน stripe) ที่อยู่จัดส่ง string 2 2 3 คลาส orderitem สร้าง "orderitem" คลาสที่มีคอลัมน์ดังต่อไปนี้ คำสั่งซื้อ pointer ผลิตภัณฑ์ pointer จำนวน number ราคา number 2 2 4 คลาสรีวิว สร้าง "review" คลาสที่มีคอลัมน์ดังต่อไปนี้ ผลิตภัณฑ์ pointer ผู้ใช้ pointer< user> การให้คะแนน number ความคิดเห็น string 2 3 รับข้อมูลประจำตัวของแอปพลิเคชัน ไปที่ การตั้งค่าแอป > ความปลอดภัย & คีย์ จดบันทึก application id และ client key ของคุณ ขั้นตอนที่ 3 – การจัดการผลิตภัณฑ์ 3 1 การเริ่มต้น parse ใน flutter เปิด lib/main dart และแก้ไข import 'package\ flutter/material dart'; import 'package\ parse server sdk flutter/parse server sdk dart'; import 'package\ provider/provider dart'; import 'screens/home screen dart'; import 'services/product service dart'; void main() async { widgetsflutterbinding ensureinitialized(); const keyapplicationid = 'your application id'; const keyclientkey = 'your client key'; const keyparseserverurl = 'https //parseapi back4app com'; await parse() initialize( keyapplicationid, keyparseserverurl, clientkey keyclientkey, autosendsessionid true, debug true, ); runapp(myapp()); } class myapp extends statelesswidget { @override widget build(buildcontext context) { return changenotifierprovider\<productservice>( create ( ) => productservice(), child materialapp( title 'e commerce app', theme themedata( primaryswatch colors blue, ), home homescreen(), ), ); } } แทนที่ 'your application id' และ 'your client key' ด้วยข้อมูลประจำตัว back4app ของคุณ 3 2 การสร้างโมเดลผลิตภัณฑ์ สร้างไดเรกทอรี models ภายใต้ lib และเพิ่ม product dart // lib/models/product dart class product { string id; string name; string description; double price; string imageurl; string category; int inventory; product({ required this id, required this name, required this description, required this price, required this imageurl, required this category, required this inventory, }); } 3 3 การดำเนินการบริการผลิตภัณฑ์ สร้างไดเรกทอรี services ภายใต้ lib และเพิ่ม product service dart // lib/services/product service dart import 'package\ flutter/material dart'; import 'package\ parse server sdk flutter/parse server sdk dart'; import ' /models/product dart'; class productservice with changenotifier { list\<product> products = \[]; future\<void> fetchproducts() async { final query = querybuilder\<parseobject>(parseobject('product')); final response = await query query(); if (response success && response results != null) { products = response results! map((data) { return product( id data objectid!, name data get\<string>('name')!, description data get\<string>('description')!, price data get\<num>('price')! todouble(), imageurl data get\<parsefilebase>('image')! url!, category data get\<string>('category')!, inventory data get\<num>('inventory')! toint(), ); }) tolist(); notifylisteners(); } } } 3 4 สร้างหน้าหลัก สร้าง screens ไดเรกทอรีภายใต้ lib และเพิ่ม home screen dart // lib/screens/home screen dart import 'package\ flutter/material dart'; import 'package\ provider/provider dart'; import ' /services/product service dart'; import 'product detail screen dart'; class homescreen extends statefulwidget { @override homescreenstate createstate() => homescreenstate(); } class homescreenstate extends state\<homescreen> { late productservice productservice; @override void initstate() { super initstate(); productservice = provider of\<productservice>(context, listen false); productservice fetchproducts(); } @override widget build(buildcontext context) { return scaffold( appbar appbar( title text('e commerce app'), actions \[ iconbutton( icon icon(icons shopping cart), onpressed () { // navigate to cart screen (to be implemented) }, ), ], ), body consumer\<productservice>( builder (context, productservice, child) { if (productservice products isempty) { return center(child circularprogressindicator()); } return gridview\ builder( padding edgeinsets all(8 0), itemcount productservice products length, griddelegate slivergriddelegatewithfixedcrossaxiscount( crossaxiscount 2, childaspectratio 0 75, ), itembuilder (context, index) { final product = productservice products\[index]; return gesturedetector( ontap () { navigator push( context, materialpageroute( builder ( ) => productdetailscreen(product product), ), ); }, child card( child column( children \[ expanded( child image network( product imageurl, fit boxfit cover, ), ), text(product name), text('\\$${product price tostringasfixed(2)}'), ], ), ), ); }, ); }, ), ); } } 3 5 หน้ารายละเอียดสินค้า สร้าง product detail screen dart ใน lib/screens/ // lib/screens/product detail screen dart import 'package\ flutter/material dart'; import ' /models/product dart'; import ' /services/cart service dart'; import 'package\ provider/provider dart'; class productdetailscreen extends statelesswidget { final product product; productdetailscreen({required this product}); @override widget build(buildcontext context) { final cartservice = provider of\<cartservice>(context); return scaffold( appbar appbar(title text(product name)), body column( children \[ expanded(child image network(product imageurl)), padding( padding const edgeinsets all(16 0), child text(product description), ), text('\\$${product price tostringasfixed(2)}'), elevatedbutton( onpressed () { cartservice addtocart(product); scaffoldmessenger of(context) showsnackbar( snackbar(content text('added to cart')), ); }, child text('add to cart'), ), ], ), ); } } ขั้นตอนที่ 4 – การดำเนินการบัญชีผู้ใช้ 4 1 บริการการตรวจสอบสิทธิ เพิ่ม auth service dart ใน lib/services/ // lib/services/auth service dart import 'package\ flutter/material dart'; import 'package\ parse server sdk flutter/parse server sdk dart'; class authservice with changenotifier { parseuser? user; future\<bool> signup(string username, string password, string email) async { user = parseuser createuser(username, password, email); final response = await user! signup(); if (response success) { notifylisteners(); return true; } else { user = null; return false; } } future\<bool> login(string username, string password) async { user = parseuser(username, password, null); final response = await user! login(); if (response success) { notifylisteners(); return true; } else { user = null; return false; } } future\<void> logout() async { if (user != null) { await user! logout(); user = null; notifylisteners(); } } bool get isauthenticated => user != null; } 4 2 หน้าจอการตรวจสอบสิทธิ สร้าง login screen dart และ signup screen dart ใน lib/screens/ หน้าจอเข้าสู่ระบบ // lib/screens/login screen dart import 'package\ flutter/material dart'; import 'package\ provider/provider dart'; import ' /services/auth service dart'; import 'home screen dart'; import 'signup screen dart'; class loginscreen extends statelesswidget { final texteditingcontroller usernamecontroller = texteditingcontroller(); final texteditingcontroller passwordcontroller = texteditingcontroller(); void login(buildcontext context) async { final authservice = provider of\<authservice>(context, listen false); bool success = await authservice login( usernamecontroller text trim(), passwordcontroller text trim(), ); if (success) { navigator pushreplacement( context, materialpageroute(builder ( ) => homescreen()), ); } else { scaffoldmessenger of(context) showsnackbar(snackbar(content text('login failed'))); } } @override widget build(buildcontext context) { return scaffold( appbar appbar( title text('e commerce app login'), ), body padding( padding const edgeinsets all(16), child column( children \[ textfield( controller usernamecontroller, decoration inputdecoration(labeltext 'username or email'), ), textfield( controller passwordcontroller, decoration inputdecoration(labeltext 'password'), obscuretext true, ), sizedbox(height 20), elevatedbutton( onpressed () => login(context), child text('login'), ), textbutton( onpressed () { navigator push( context, materialpageroute(builder ( ) => signupscreen()), ); }, child text('don\\'t have an account? sign up'), ) ], ), ), ); } } หน้าจอสมัครสมาชิก // lib/screens/signup screen dart import 'package\ flutter/material dart'; import 'package\ provider/provider dart'; import ' /services/auth service dart'; import 'home screen dart'; class signupscreen extends statelesswidget { final texteditingcontroller usernamecontroller = texteditingcontroller(); final texteditingcontroller emailcontroller = texteditingcontroller(); final texteditingcontroller passwordcontroller = texteditingcontroller(); void signup(buildcontext context) async { final authservice = provider of\<authservice>(context, listen false); bool success = await authservice signup( usernamecontroller text trim(), passwordcontroller text trim(), emailcontroller text trim(), ); if (success) { navigator pushreplacement( context, materialpageroute(builder ( ) => homescreen()), ); } else { scaffoldmessenger of(context) showsnackbar(snackbar(content text('signup failed'))); } } @override widget build(buildcontext context) { return scaffold( appbar appbar( title text('e commerce app signup'), ), body padding( padding const edgeinsets all(16), child column( children \[ textfield( controller usernamecontroller, decoration inputdecoration(labeltext 'username'), ), textfield( controller emailcontroller, decoration inputdecoration(labeltext 'email'), ), textfield( controller passwordcontroller, decoration inputdecoration(labeltext 'password'), obscuretext true, ), sizedbox(height 20), elevatedbutton( onpressed () => signup(context), child text('sign up'), ), ], ), ), ); } } 4 3 อัปเดตหลักเพื่อรวม authservice ใน main dart , ห่อหุ้ม materialapp ด้วย multiprovider // in main dart class myapp extends statelesswidget { @override widget build(buildcontext context) { return multiprovider( providers \[ changenotifierprovider\<productservice>( create ( ) => productservice(), ), changenotifierprovider\<authservice>( create ( ) => authservice(), ), changenotifierprovider\<cartservice>( create ( ) => cartservice(), ), ], child materialapp( // ), ); } } 4 4 เปลี่ยนเส้นทางตามสถานะการตรวจสอบสิทธิ์ แก้ไข main dart เพื่อตรวจสอบสถานะการตรวจสอบสิทธิ์ // main dart // inside the build method home consumer\<authservice>( builder (context, authservice, child) { if (authservice isauthenticated) { return homescreen(); } else { return loginscreen(); } }, ), ขั้นตอนที่ 5 – ฟังก์ชันการทำงานของรถเข็นสินค้า 5 1 สร้างบริการรถเข็น เพิ่ม cart service dart ภายใต้ lib/services/ // lib/services/cart service dart import 'package\ flutter/material dart'; import ' /models/product dart'; class cartitem { final product product; int quantity; cartitem({required this product, this quantity = 1}); } class cartservice with changenotifier { map\<string, cartitem> items = {}; void addtocart(product product) { if ( items containskey(product id)) { items\[product id]! quantity++; } else { items\[product id] = cartitem(product product); } notifylisteners(); } void removefromcart(string productid) { items remove(productid); notifylisteners(); } void clearcart() { items clear(); notifylisteners(); } map\<string, cartitem> get items => items; double get totalamount { double total = 0 0; items foreach((key, cartitem) { total += cartitem product price cartitem quantity; }); return total; } } 5 2 สร้างหน้าตะกร้า เพิ่ม cart screen dart ภายใต้ lib/screens/ // lib/screens/cart screen dart import 'package\ flutter/material dart'; import 'package\ provider/provider dart'; import ' /services/cart service dart'; import 'checkout screen dart'; class cartscreen extends statelesswidget { @override widget build(buildcontext context) { final cartservice = provider of\<cartservice>(context); final cartitems = cartservice items values tolist(); return scaffold( appbar appbar(title text('your cart')), body column( children \[ expanded( child listview\ builder( itemcount cartservice items length, itembuilder (context, index) { final cartitem = cartitems\[index]; return listtile( leading image network(cartitem product imageurl), title text(cartitem product name), subtitle text('quantity ${cartitem quantity}'), trailing text('\\$${(cartitem product price cartitem quantity) tostringasfixed(2)}'), ); }, ), ), text('total \\$${cartservice totalamount tostringasfixed(2)}'), elevatedbutton( onpressed () { navigator push( context, materialpageroute(builder ( ) => checkoutscreen()), ); }, child text('proceed to checkout'), ), ], ), ); } } ขั้นตอนที่ 6 – การชำระเงินที่ปลอดภัยด้วยการรวม stripe ผ่าน cloud code 6 1 ตั้งค่าบัญชี stripe ลงทะเบียนสำหรับ บัญชี stripe https //dashboard stripe com/register รับ publishable key และ secret key จากแดชบอร์ด stripe ภายใต้ developers > api keys 6 2 ติดตั้ง stripe sdk ใน cloud code back4app รองรับฟังก์ชัน cloud code ที่เขียนด้วย javascript เราจะเขียนฟังก์ชัน cloud code เพื่อจัดการการประมวลผลการชำระเงิน 6 2 1 สร้างโปรเจกต์ cloud code ในแดชบอร์ดแอป back4app ของคุณ ไปที่ app settings > cloud code functions คลิก "แก้ไขโค้ด" เพื่อเปิดตัวแก้ไข cloud code 6 2 2 เริ่มต้น npm และติดตั้งแพ็คเกจ stripe ในเทอร์มินัล cloud code (ที่ให้ไว้ในตัวแก้ไข) ให้รัน npm init y npm install stripe\@8 174 0 หมายเหตุ cloud code ของ back4app ใช้ node js เวอร์ชัน 14 x ดังนั้นโปรดตรวจสอบความเข้ากันได้ 6 3 สร้างฟังก์ชัน cloud สำหรับ payment intent สร้างหรือแก้ไข main js ในตัวแก้ไข cloud code // main js const stripe = require('stripe'); const stripe = stripe('your stripe secret key'); parse cloud define('createpaymentintent', async (request) => { const { amount, currency } = request params; try { const paymentintent = await stripe paymentintents create({ amount amount, currency currency, }); return { clientsecret paymentintent client secret }; } catch (error) { throw new parse error(500, error message); } }); แทนที่ 'your stripe secret key' ด้วยคีย์ลับ stripe ที่แท้จริงของคุณ หมายเหตุด้านความปลอดภัย อย่าเปิดเผยคีย์ลับของคุณในฝั่งไคลเอนต์ เก็บให้ปลอดภัยใน cloud code 6 4 ปรับใช้ cloud code คลิก "ปรับใช้" ในตัวแก้ไข cloud code เพื่อปรับใช้ฟังก์ชันของคุณ 6 5 ดำเนินการชำระเงินใน flutter 6 5 1 เริ่มต้น stripe ใน flutter ใน main dart , หลังจาก parse() initialize , เพิ่ม import 'package\ flutter stripe/flutter stripe dart'; // inside main() async stripe publishablekey = 'your stripe publishable key'; แทนที่ 'your stripe publishable key' ด้วยคีย์ที่เผยแพร่ของ stripe ของคุณ 6 5 2 สร้างหน้าชำระเงิน เพิ่ม checkout screen dart ภายใต้ lib/screens/ // lib/screens/checkout screen dart import 'package\ flutter/material dart'; import 'package\ provider/provider dart'; import ' /services/cart service dart'; import 'package\ flutter stripe/flutter stripe dart'; import 'package\ parse server sdk flutter/parse server sdk dart'; import 'order confirmation screen dart'; class checkoutscreen extends statelesswidget { future\<void> processpayment(buildcontext context) async { final cartservice = provider of\<cartservice>(context, listen false); final totalamount = (cartservice totalamount 100) toint(); // amount in cents // call cloud function to create payment intent final response = await parsecloudfunction('createpaymentintent') execute( parameters { 'amount' totalamount, 'currency' 'usd', }, ); if (response success) { final clientsecret = response result\['clientsecret']; // initialize payment sheet await stripe instance initpaymentsheet( paymentsheetparameters setuppaymentsheetparameters( paymentintentclientsecret clientsecret, merchantdisplayname 'your e commerce app', ), ); // display payment sheet await stripe instance presentpaymentsheet(); // payment successful // save order to back4app (to be implemented) cartservice clearcart(); navigator pushreplacement( context, materialpageroute(builder ( ) => orderconfirmationscreen()), ); } else { scaffoldmessenger of(context) showsnackbar( snackbar(content text('payment failed ${response error! message}')), ); } } @override widget build(buildcontext context) { final cartservice = provider of\<cartservice>(context); return scaffold( appbar appbar(title text('checkout')), body column( children \[ text('total \\$${cartservice totalamount tostringasfixed(2)}'), elevatedbutton( onpressed () => processpayment(context), child text('pay now'), ), ], ), ); } } 6 5 3 จัดการการยืนยันการชำระเงิน สร้าง order confirmation screen dart ภายใต้ lib/screens/ // lib/screens/order confirmation screen dart import 'package\ flutter/material dart'; class orderconfirmationscreen extends statelesswidget { @override widget build(buildcontext context) { return scaffold( appbar appbar( title text('order confirmed'), automaticallyimplyleading false, ), body center( child text('thank you for your purchase!'), ), ); } } 6 6 การบันทึกคำสั่งซื้อไปยัง back4app ปรับเปลี่ยน processpayment วิธีการเพื่อบันทึกรายละเอียดคำสั่งซื้อ // after successful payment final authservice = provider of\<authservice>(context, listen false); final user = authservice user!; // create order object final order = parseobject('order') set('user', user) set('totalamount', cartservice totalamount) set('status', 'paid') set('paymentintentid', clientsecret); // save order final orderresponse = await order save(); if (orderresponse success) { final orderobject = orderresponse result; // save orderitems for (var cartitem in cartservice items values) { final orderitem = parseobject('orderitem') set('order', orderobject) set('product', parseobject('product') objectid = cartitem product id) set('quantity', cartitem quantity) set('price', cartitem product price); await orderitem save(); } // clear cart and navigate cartservice clearcart(); navigator pushreplacement( context, materialpageroute(builder ( ) => orderconfirmationscreen()), ); } else { scaffoldmessenger of(context) showsnackbar( snackbar(content text('failed to save order')), ); } ขั้นตอนที่ 7 – การติดตามคำสั่งซื้อ 7 1 สร้างบริการคำสั่งซื้อ เพิ่ม order service dart ภายใต้ lib/services/ // lib/services/order service dart import 'package\ flutter/material dart'; import 'package\ parse server sdk flutter/parse server sdk dart'; import ' /models/order dart'; class orderservice with changenotifier { list\<order> orders = \[]; future\<void> fetchorders(parseuser user) async { final query = querybuilder\<parseobject>(parseobject('order')) whereequalto('user', user) orderbydescending('createdat'); final response = await query query(); if (response success && response results != null) { orders = response results! map((data) { return order fromparseobject(data); }) tolist(); notifylisteners(); } } } ขั้นตอนที่ 7 – การติดตามคำสั่งซื้อ 7 2 สร้างโมเดลคำสั่งซื้อ เพิ่ม order dart ภายใต้ lib/models/ // lib/models/order dart import 'package\ parse server sdk flutter/parse server sdk dart'; class order { string id; double totalamount; string status; datetime createdat; order({ required this id, required this totalamount, required this status, required this createdat, }); factory order fromparseobject(parseobject object) { return order( id object objectid!, totalamount object get\<num>('totalamount')! todouble(), status object get\<string>('status')!, createdat object createdat!, ); } } 7 3 สร้างหน้าคำสั่งซื้อ เพิ่ม orders screen dart ภายใต้ lib/screens/ // lib/screens/orders screen dart import 'package\ flutter/material dart'; import 'package\ provider/provider dart'; import ' /services/order service dart'; import ' /services/auth service dart'; import ' /models/order dart'; class ordersscreen extends statefulwidget { @override ordersscreenstate createstate() => ordersscreenstate(); } class ordersscreenstate extends state\<ordersscreen> { late orderservice orderservice; @override void initstate() { super initstate(); orderservice = provider of\<orderservice>(context, listen false); final authservice = provider of\<authservice>(context, listen false); orderservice fetchorders(authservice user!); } @override widget build(buildcontext context) { return scaffold( appbar appbar(title text('your orders')), body consumer\<orderservice>( builder (context, orderservice, child) { if (orderservice orders isempty) { return center(child text('no orders found ')); } return listview\ builder( itemcount orderservice orders length, itembuilder (context, index) { final order = orderservice orders\[index]; return listtile( title text('order #${order id}'), subtitle text('status ${order status}'), trailing text('\\$${order totalamount tostringasfixed(2)}'), ); }, ); }, ), ); } } ขั้นตอนที่ 8 – รีวิวและการให้คะแนน 8 1 สร้างบริการรีวิว เพิ่ม review service dart ภายใต้ lib/services/ // lib/services/review service dart import 'package\ flutter/material dart'; import 'package\ parse server sdk flutter/parse server sdk dart'; import ' /models/review\ dart'; class reviewservice with changenotifier { list\<review> reviews = \[]; future\<void> fetchreviews(string productid) async { final query = querybuilder\<parseobject>(parseobject('review')) whereequalto('product', parseobject('product') objectid = productid) includeobject(\['user']); final response = await query query(); if (response success && response results != null) { reviews = response results! map((data) { return review\ fromparseobject(data); }) tolist(); notifylisteners(); } } future\<void> submitreview(string productid, parseuser user, int rating, string comment) async { final review = parseobject('review') set('product', parseobject('product') objectid = productid) set('user', user) set('rating', rating) set('comment', comment); await review\ save(); await fetchreviews(productid); } } 8 2 สร้างโมเดลรีวิว เพิ่ม review\ dart ภายใต้ lib/models/ // lib/models/review\ dart import 'package\ parse server sdk flutter/parse server sdk dart'; class review { string id; int rating; string comment; parseuser user; review({ required this id, required this rating, required this comment, required this user, }); factory review\ fromparseobject(parseobject object) { return review( id object objectid!, rating object get\<num>('rating')! toint(), comment object get\<string>('comment')!, user object get\<parseuser>('user')!, ); } } 8 3 อัปเดตหน้ารายละเอียดผลิตภัณฑ์ ใน product detail screen dart , เพิ่มส่วนเพื่อแสดงและส่งรีวิว // at the end of the column in productdetailscreen expanded( child column( children \[ // display reviews expanded( child consumer\<reviewservice>( builder (context, reviewservice, child) { if (reviewservice reviews isempty) { return center(child text('no reviews yet ')); } return listview\ builder( itemcount reviewservice reviews length, itembuilder (context, index) { final review = reviewservice reviews\[index]; return listtile( title text(review\ user username ?? 'anonymous'), subtitle text(review\ comment), trailing text('${review\ rating}/5'), ); }, ); }, ), ), // submit review textfield( controller reviewcontroller, decoration inputdecoration(hinttext 'write a review'), ), row( children \[ text('rating '), dropdownbutton\<int>( value rating, onchanged (value) { setstate(() { rating = value!; }); }, items list generate(5, (index) => index + 1) map((e) => dropdownmenuitem(value e, child text('$e'))) tolist(), ), elevatedbutton( onpressed () { final authservice = provider of\<authservice>(context, listen false); reviewservice submitreview( product id, authservice user!, rating, reviewcontroller text trim(), ); reviewcontroller clear(); }, child text('submit'), ), ], ), ], ), ), บทสรุป ในบทเรียนที่ครอบคลุมนี้ คุณได้สร้างแอปอีคอมเมิร์ซโดยใช้ flutter และ back4app ซึ่งรวมเข้ากับ stripe สำหรับการประมวลผลการชำระเงินที่ปลอดภัยผ่าน cloud code คุณได้ดำเนินการฟีเจอร์หลัก เช่น รายการสินค้า ฟังก์ชันรถเข็นช้อปปิ้ง การตรวจสอบผู้ใช้ การติดตามคำสั่งซื้อ และการรีวิว ข้อคิดสำคัญ การรวม back4app ทำให้การจัดการแบ็คเอนด์สำหรับแอป flutter ของคุณง่ายขึ้น การรวม stripe ผ่าน cloud code ประมวลผลการชำระเงินอย่างปลอดภัยโดยไม่เปิดเผยคีย์ที่ละเอียดอ่อน สถาปัตยกรรมโมดูลาร์ การแยกบริการและโมเดลช่วยปรับปรุงการบำรุงรักษา ขั้นตอนถัดไป เพิ่มความปลอดภัย ดำเนินการจัดการข้อผิดพลาดและการตรวจสอบข้อมูลที่เหมาะสม การปรับปรุง ui/ux ปรับปรุงส่วนติดต่อผู้ใช้เพื่อประสบการณ์ที่ดีขึ้น การจัดการสินค้าคงคลัง อัปเดตสินค้าคงคลังเมื่อมีการซื้อ การแจ้งเตือนทางอีเมล ส่งอีเมลยืนยันการสั่งซื้อไปยังผู้ใช้ แผงผู้ดูแลระบบ สร้างส่วนติดต่อผู้ดูแลระบบสำหรับการจัดการผลิตภัณฑ์และคำสั่งซื้อ แหล่งข้อมูลเพิ่มเติม เอกสาร back4app https //www back4app com/docs คู่มือ parse server https //docs parseplatform org/ เอกสารทางการ flutter https //flutter dev/docs เอกสาร api ของ stripe https //stripe com/docs/api แพ็คเกจ flutter stripe https //pub dev/packages/flutter stripe เขียนโค้ดให้สนุก!