How to Build a CRUD App with Flutter?

ภาพรวม ในคู่มือนี้ คุณจะพัฒนาแอปพลิเคชัน flutter ที่จัดการการดำเนินการ crud ที่สำคัญ—สร้าง อ่าน อัปเดต และลบ—โดยใช้ back4app เป็นบริการแบ็กเอนด์ของคุณ เราจะพาคุณไปตั้งค่าโครงการ back4app ออกแบบสคีมาข้อมูลที่ยืดหยุ่น และรวมแอป flutter ของคุณเข้ากับแบ็กเอนด์โดยใช้ parse sdk สำหรับ flutter ในตอนแรก คุณจะสร้างโครงการ back4app ใหม่ชื่อ basic crud app flutter โครงการนี้ให้โซลูชันการจัดเก็บข้อมูลที่เชื่อถือได้สำหรับแอปพลิเคชันมือถือของคุณ จากนั้นคุณจะกำหนดโมเดลข้อมูลของคุณโดยการสร้างคอลเลกชันและฟิลด์ด้วยตนเองหรือด้วยความช่วยเหลือจาก ai agent ของ back4app ถัดไป คุณจะใช้ back4app admin app ที่ใช้งานง่ายในการจัดการข้อมูลของคุณอย่างราบรื่น สุดท้าย คุณจะเชื่อมต่อแอปพลิเคชัน flutter ของคุณกับ back4app โดยใช้ parse server sdk flutter แพ็กเกจ ซึ่งช่วยให้การดำเนินการ crud มีความปลอดภัยและมีประสิทธิภาพ เมื่อสิ้นสุดบทแนะนำนี้ คุณจะมีแอปพลิเคชัน flutter ที่พร้อมใช้งานในระดับการผลิตซึ่งสามารถทำฟังก์ชัน crud พื้นฐานพร้อมกับการตรวจสอบสิทธิ์ผู้ใช้ที่ปลอดภัยและการจัดการข้อมูล ข้อมูลเชิงลึก สร้างแอป flutter ที่เชื่อมต่อกับแบ็คเอนด์ที่ทรงพลัง เรียนรู้การออกแบบสคีมาที่สามารถขยายได้บน back4app ใช้แอป back4app admin สำหรับการจัดการข้อมูลอย่างง่ายดาย ดำเนินการมาตรการรักษาความปลอดภัยที่แข็งแกร่งรวมถึง acls และการตรวจสอบสิทธิ์ผู้ใช้ ข้อกำหนดเบื้องต้น ก่อนที่คุณจะเริ่ม ให้แน่ใจว่าคุณมี บัญชี back4app ที่มีโครงการที่ใช้งานอยู่ ต้องการความช่วยเหลือ? เยี่ยมชม เริ่มต้นใช้งานกับ back4app https //www back4app com/docs/get started/new parse app สภาพแวดล้อมการพัฒนา flutter ติดตั้ง flutter และเลือก ide เช่น visual studio code หรือ android studio ความเข้าใจพื้นฐานเกี่ยวกับ flutter, dart, และ rest apis ตรวจสอบ เอกสาร flutter https //flutter dev/docs หากจำเป็น ขั้นตอนที่ 1 – การเริ่มต้นโครงการ การสร้างโครงการ back4app ใหม่ เข้าสู่ระบบบัญชี back4app ของคุณ คลิกที่ปุ่ม “แอปใหม่” บนแดชบอร์ดของคุณ ตั้งชื่อโครงการของคุณ basic crud app flutter และทำตามคำแนะนำเพื่อเสร็จสิ้นการตั้งค่า สร้างโครงการใหม่ หลังจากที่โครงการของคุณถูกสร้างขึ้น มันจะปรากฏบนแดชบอร์ดของคุณ พร้อมสำหรับการกำหนดค่าด้านหลัง ขั้นตอนที่ 2 – การสร้างโมเดลข้อมูล การตั้งค่าโครงสร้างข้อมูลของคุณ สำหรับแอปพลิเคชัน flutter นี้ คุณจะต้องสร้างหลายคอลเลกชันภายในโครงการ back4app ของคุณ ด้านล่างนี้เป็นตัวอย่างของคอลเลกชันหลักและฟิลด์ที่จำเป็นในการสนับสนุนฟังก์ชัน crud 1\ คอลเลกชันผลิตภัณฑ์ คอลเลกชันนี้เก็บรายละเอียดเกี่ยวกับผลิตภัณฑ์แต่ละรายการ สนาม ประเภท คำอธิบาย id รหัสวัตถุ หมายเลขประจำตัวที่ไม่ซ้ำกันถูกกำหนดโดยอัตโนมัติ ชื่อ สตริง ชื่อของผลิตภัณฑ์ รายละเอียด สตริง คำอธิบายสั้น ๆ ของผลิตภัณฑ์ สร้างเมื่อ วันที่ เวลาที่ผลิตภัณฑ์ถูกเพิ่ม อัปเดตเมื่อ วันที่ เวลาที่ผลิตภัณฑ์ได้รับการปรับปรุงล่าสุด 2\ การรวบรวมผู้ใช้ การรวบรวมนี้จัดการข้อมูลประจำตัวผู้ใช้และรายละเอียดการตรวจสอบสิทธิ์ สนาม ประเภท คำอธิบาย id รหัสวัตถุ รหัสประจำตัวที่สร้างขึ้นโดยอัตโนมัติ ชื่อผู้ใช้ สตริง ชื่อผู้ใช้ที่ไม่ซ้ำกันสำหรับผู้ใช้ อีเมล สตริง ที่อยู่อีเมลที่ไม่ซ้ำกันของผู้ใช้ รหัสผ่านแฮช สตริง รหัสผ่านที่เข้ารหัสสำหรับการตรวจสอบสิทธิ์ที่ปลอดภัย สร้างเมื่อ วันที่ เวลาที่บัญชีถูกสร้างขึ้น อัปเดตเมื่อ วันที่ เวลาที่บัญชีได้รับการอัปเดตล่าสุด คุณสามารถสร้างคอลเลกชันเหล่านี้ด้วยตนเองในแดชบอร์ด back4app สร้างคลาสใหม่ ในการเพิ่มฟิลด์ เพียงแค่เลือกประเภทข้อมูล กำหนดชื่อฟิลด์ ตั้งค่าค่าปริยายหากจำเป็น และทำเครื่องหมายว่าจำเป็นต้องใช้ สร้างคอลัมน์ การใช้ ai agent ของ back4app สำหรับการสร้าง schema ai agent ที่รวมอยู่ใน back4app สามารถสร้าง schema ข้อมูลของคุณโดยอัตโนมัติตามคำอธิบายของคุณ ทำให้กระบวนการตั้งค่าราบรื่นขึ้น วิธีการใช้ ai agent เข้าถึง ai agent เปิดแดชบอร์ด back4app ของคุณและค้นหา ai agent ในการตั้งค่าโปรเจกต์ของคุณ อธิบาย schema ของคุณ ให้ข้อมูลที่ละเอียดเกี่ยวกับคอลเลกชันและฟิลด์ที่คุณต้องการ ตรวจสอบและยืนยัน เมื่อ ai agent ประมวลผลข้อมูลของคุณแล้ว ให้ตรวจสอบ schema ที่เสนอและยืนยันเพื่อใช้มัน ตัวอย่างคำสั่ง create the following collections in my back4app project 1\) collection products \ fields \ id objectid (auto generated) \ name string \ details string \ createdat date (auto generated) \ updatedat date (auto updated) 2\) collection users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ passwordhash string \ createdat date (auto generated) \ updatedat date (auto updated) วิธีนี้ช่วยประหยัดเวลาและทำให้แน่ใจว่า schema ข้อมูลของคุณมีความสอดคล้องและได้รับการปรับให้เหมาะสม ขั้นตอนที่ 3 – เปิดใช้งาน admin app & จัดการ crud operations แนะนำเกี่ยวกับ admin app back4app admin app มีอินเทอร์เฟซแบบไม่มีโค้ดสำหรับการจัดการข้อมูลแบ็กเอนด์ของคุณ ฟังก์ชันการลากและวางช่วยให้คุณสามารถทำ crud operations เช่น การสร้าง การอ่าน การอัปเดต และการลบข้อมูลได้อย่างง่ายดาย การเปิดใช้งาน admin app ไปที่เมนู “เพิ่มเติม” ในแดชบอร์ด back4app ของคุณ เลือก “แอปผู้ดูแล” แล้วคลิก “เปิดใช้งานแอปผู้ดูแล ” ตั้งค่าข้อมูลประจำตัวผู้ดูแลของคุณ โดยการสร้างบัญชีผู้ดูแลระบบเริ่มต้น ซึ่งจะกำหนดบทบาทเช่น b4aadminuser เปิดใช้งานแอปผู้ดูแล หลังจากเปิดใช้งาน ให้เข้าสู่ระบบแอปผู้ดูแลเพื่อจัดการข้อมูลแอปพลิเคชันของคุณ แดชบอร์ดแอปผู้ดูแล การจัดการการดำเนินการ crud ภายในแอปผู้ดูแล คุณสามารถ สร้างรายการ ใช้ตัวเลือก “เพิ่มบันทึก” ในคอลเลกชัน (เช่น ผลิตภัณฑ์) เพื่อแทรกข้อมูลใหม่ ดูและแก้ไขรายการ คลิกที่บันทึกเพื่อตรวจสอบรายละเอียดหรืออัปเดตฟิลด์ ลบรายการ ลบบันทึกที่ไม่จำเป็นอีกต่อไป อินเทอร์เฟซที่ใช้งานง่ายนี้ทำให้การจัดการข้อมูลแบ็กเอนด์ของคุณง่ายขึ้น ขั้นตอนที่ 4 – เชื่อมต่อแอป flutter ของคุณกับ back4app เมื่อแบ็กเอนด์ของคุณถูกกำหนดค่าแล้ว ถึงเวลาเชื่อมต่อแอป flutter ของคุณกับ back4app การใช้ parse sdk สำหรับ flutter เพิ่ม dependency เปิดไฟล์ pubspec yaml และรวมแพ็คเกจ parse server sdk flutter ลงใน dependencies flutter sdk flutter parse server sdk flutter ^3 1 0 เริ่มต้น parse ในแอปของคุณ ในไฟล์ main dart , เริ่มต้น parse ด้วยข้อมูลรับรอง back4app ของคุณ import 'package\ flutter/material dart'; import 'package\ parse server sdk flutter/parse server sdk dart'; future\<void> main() async { widgetsflutterbinding ensureinitialized(); await parse() initialize( 'your application id', 'https //parseapi back4app com', clientkey 'your flutter key', debug true, ); runapp(myapp()); } class myapp extends statelesswidget { @override widget build(buildcontext context) { return materialapp( title 'basic crud app', home homepage(), ); } } การดำเนินการ crud สร้างไฟล์ dart (เช่น, product service dart ) เพื่อจัดการการดำเนินการ crud ของคุณ import 'package\ parse server sdk flutter/parse server sdk dart'; class productservice { future\<list\<parseobject>> fetchproducts() async { final query = querybuilder\<parseobject>(parseobject('products')); final response = await query query(); if (response success && response results != null) { return response results as list\<parseobject>; } return \[]; } future\<void> addproduct(string name, string details) async { final product = parseobject('products') set('name', name) set('details', details); final response = await product save(); if (response success) { print('product added successfully '); } else { print('error adding product ${response error? message}'); } } future\<void> updateproduct(string objectid, string newname, string newdetails) async { final query = querybuilder\<parseobject>(parseobject('products')); query whereequalto('objectid', objectid); final response = await query first(); if (response != null && response success) { final product = response results! first as parseobject; product set('name', newname) set('details', newdetails); final saveresponse = await product save(); if (saveresponse success) { print('product updated '); } } } future\<void> deleteproduct(string objectid) async { final query = querybuilder\<parseobject>(parseobject('products')); query whereequalto('objectid', objectid); final response = await query first(); if (response != null && response success) { final product = response results! first as parseobject; final deleteresponse = await product delete(); if (deleteresponse success) { print('product deleted '); } } } } ไฟล์บริการนี้ช่วยให้ ui flutter ของคุณสามารถโต้ตอบได้อย่างราบรื่นกับแบ็กเอนด์ back4app ของคุณ ทางเลือก การใช้ rest/graphql ใน flutter หากคุณเลือกที่จะไม่ใช้ parse sdk คุณสามารถทำการเรียก rest โดยใช้แพ็คเกจเช่น http อย่างไรก็ตาม แนะนำให้ใช้ parse sdk เพื่อประสบการณ์ที่รวมกันมากขึ้น ขั้นตอนที่ 5 – การรักษาความปลอดภัยให้กับ backend ของคุณ รายการควบคุมการเข้าถึง (acls) เพื่อปกป้องข้อมูลของคุณ ให้กำหนด acl สำหรับวัตถุของคุณ ตัวอย่างเช่น สร้างผลิตภัณฑ์ที่มองเห็นได้เฉพาะผู้สร้างเท่านั้น import 'package\ parse server sdk flutter/parse server sdk dart'; future\<void> addprivateproduct(string name, string details, parseuser owner) async { final product = parseobject('products') set('name', name) set('details', details); final acl = parseacl(owner) setpublicreadaccess(false) setpublicwriteaccess(false); product setacl(acl); final response = await product save(); if (response success) { print('private product created '); } else { print('error ${response error? message}'); } } การอนุญาตในระดับคลาส (clps) ในแดชบอร์ด back4app ของคุณ ให้กำหนด clps เพื่อบังคับใช้กฎความปลอดภัยเริ่มต้น โดยมั่นใจว่าผู้ใช้ที่ได้รับการตรวจสอบแล้วเท่านั้นที่สามารถเข้าถึงหรือแก้ไขคอลเลกชันเฉพาะได้ ขั้นตอนที่ 6 – การดำเนินการตรวจสอบสิทธิ์ผู้ใช้ การตั้งค่าการลงทะเบียนและการเข้าสู่ระบบของผู้ใช้ back4app ใช้คลาส parse user สำหรับจัดการการตรวจสอบสิทธิ์ ในแอป flutter ของคุณ ให้ดำเนินการลงทะเบียนและการเข้าสู่ระบบของผู้ใช้ดังนี้ import 'package\ parse server sdk flutter/parse server sdk dart'; class authservice { future\<void> registeruser(string username, string password, string email) async { final user = parseuser createuser(username, password, email); final response = await user signup(); if (response success) { print('user registered successfully!'); } else { print('registration failed ${response error? message}'); } } future\<void> loginuser(string username, string password) async { final user = await parseuser login(username, password); if (user success) { print('logged in as ${user result? username}'); } else { print('login error ${user error? message}'); } } } การตั้งค่านี้ครอบคลุมการลงทะเบียนผู้ใช้ การเข้าสู่ระบบ และการจัดการการตรวจสอบสิทธิ์เพิ่มเติมสำหรับแอปพลิเคชัน flutter ของคุณ ขั้นตอนที่ 7 – สรุปและการปรับปรุงในอนาคต ขอแสดงความยินดี! คุณได้สร้างแอปพลิเคชัน crud ที่ใช้ flutter ซึ่งเชื่อมต่อกับ back4app สำเร็จแล้ว ในบทแนะนำนี้ คุณได้สร้างโครงการชื่อ basic crud app flutter , กำหนดคอลเลกชันสำหรับผลิตภัณฑ์และผู้ใช้ และจัดการแบ็กเอนด์ของคุณโดยใช้แอปผู้ดูแล นอกจากนี้ คุณได้เชื่อมต่อแอป flutter ของคุณกับ back4app โดยใช้ parse server sdk flutter แพ็กเกจในขณะที่ดำเนินการรักษาความปลอดภัยและการตรวจสอบสิทธิ์ผู้ใช้ที่แข็งแกร่ง ขั้นตอนถัดไป ขยายแอปของคุณ เพิ่มฟีเจอร์เช่นการค้นหาขั้นสูง มุมมองรายละเอียด หรือการอัปเดตแบบเรียลไทม์ ปรับปรุงฟังก์ชันการทำงานของแบ็กเอนด์ สำรวจฟังก์ชันคลาวด์ การรวม api ของบุคคลที่สาม หรือการควบคุมการเข้าถึงตามบทบาทที่ละเอียดมากขึ้น เรียนรู้ต่อไป ตรวจสอบ เอกสาร back4app https //www back4app com/docs และบทแนะนำเพิ่มเติมเพื่อเพิ่มประสิทธิภาพแอปพลิเคชันของคุณ ขอให้สนุกกับการเขียนโค้ดและขอให้โชคดีในเส้นทางการพัฒนา flutter ของคุณ!