วิธีการใช้ Flutter Completers กับ Backend บน Back4app

บทนำ future และ stream เป็นวิธีที่ดีที่สุดในทุกประเภทของการทำงานแบบอะซิงโครนัส อย่างไรก็ตาม บางครั้งทั้งสองอย่างก็ไม่เพียงพอ หากคุณต้องการควบคุมที่ซับซ้อนมากขึ้นเกี่ยวกับ future , ให้ใช้ completer มันเป็นเครื่องมือที่คุณสามารถทำให้ future เสร็จสมบูรณ์ได้อย่างมีระเบียบ ในทางหนึ่ง นี่จะช่วยให้คุณควบคุมการทำงานแบบอะซิงโครนัสได้ดียิ่งขึ้น บทเรียนนี้จะช่วยให้คุณทำงานกับ flutter completers ในแอปพลิเคชันที่มีการโต้ตอบกับแบ็คเอนด์บน back4app เมื่อสิ้นสุดบทเรียนนี้ คุณจะได้เรียนรู้วิธีการใช้ completers ในแอปพลิเคชัน flutter เพื่อจัดการงานแบบอะซิงโครนัสและรวมงานเหล่านี้กับบริการแบ็คเอนด์ที่จัดเตรียมโดย back4app เราจะสร้างแอปที่ง่ายมากซึ่งดึงข้อมูลกลับจากแบ็คเอนด์ back4app โดยใช้ completer เพื่อควบคุมการไหลของแอปพลิเคชัน ข้อกำหนดเบื้องต้น ในการทำบทเรียนนี้ให้เสร็จสมบูรณ์ คุณจะต้องมี บัญชี back4app ลงทะเบียนสำหรับบัญชีฟรีที่ back4app com https //www back4app com ตั้งค่าสภาพแวดล้อมการพัฒนา flutter บนเครื่องของคุณเอง ติดตาม คู่มือการติดตั้ง flutter https //flutter dev/docs/get started/install หากคุณยังไม่ได้ตั้งค่า ความรู้พื้นฐานเกี่ยวกับ dart และการเขียนโปรแกรมแบบอะซิงโครนัสใน flutter หากคุณต้องการการทบทวน ให้ตรวจสอบ คู่มือการเขียนโปรแกรมแบบอะซิงโครนัสของ flutter https //dart dev/codelabs/async await ขั้นตอนที่ 1 – การตั้งค่า backend ของ back4app ของคุณ ก่อนอื่น มาตั้งค่า backend ที่ง่ายบน back4app ที่แอปพลิเคชัน flutter ของเราจะติดต่อด้วยกัน เข้าสู่ระบบบัญชี back4app ของคุณ และสร้างโปรเจกต์ใหม่ ตั้งค่า parse class ใหม่ ชื่อว่า task , ซึ่งจะเก็บงานที่แอป flutter ของเราจะดึงข้อมูลมา เพิ่มคอลัมน์ต่อไปนี้ใน task class ชื่อ (string) ชื่อของงาน สถานะ (boolean) สถานะของงาน (เสร็จสิ้นหรือไม่) เพิ่มงานตัวอย่างบางงาน ในฐานข้อมูล back4app เพื่อทดสอบ เช่น งาน 1 ชื่อ = "ทำการสอน flutter ให้เสร็จ", สถานะ = true งาน 2 ชื่อ = "เริ่มโปรเจกต์ใหม่", สถานะ = false backend ของ back4app ของคุณพร้อมที่จะเข้าถึงโดยแอป flutter แล้ว ขั้นตอนที่ 2 – การสร้างโปรเจกต์ flutter ถัดไป เราจะสร้างโปรเจกต์ flutter ใหม่ เปิดเทอร์มินัลหรือพรอมต์คำสั่งของคุณ รันคำสั่งต่อไปนี้เพื่อสร้างโปรเจกต์ flutter ใหม่ flutter create completer demo นำทางไปยังไดเรกทอรีโปรเจกต์ cd completer demo 2\ เปิดโปรเจกต์ในโปรแกรมแก้ไขโค้ดที่คุณชื่นชอบ (เช่น vs code, android studio) ขั้นตอนที่ 3 – การเพิ่ม parse sdk และการกำหนดค่าแอป ตอนนี้ มาลงทะเบียนการพึ่งพาที่จำเป็นเพื่อโต้ตอบกับ back4app เปิด pubspec yaml และเพิ่มการพึ่งพาต่อไปนี้ dependencies flutter sdk flutter parse server sdk flutter ^3 0 0 2\ รัน flutter pub get เพื่อติดตั้ง dependencies 3\ ใน lib/main dart , นำเข้า parse sdk import 'package\ flutter/material dart'; import 'package\ parse server sdk flutter/parse server sdk flutter dart'; import 'dart\ async'; 4\ เริ่มต้น parse ใน main ฟังก์ชัน void main() async { widgetsflutterbinding ensureinitialized(); const keyapplicationid = 'your app id'; const keyclientkey = 'your client key'; const keyparseserverurl = 'https //parseapi back4app com'; await parse() initialize(keyapplicationid, keyparseserverurl, clientkey keyclientkey, autosendsessionid true); runapp(myapp()); } แทนที่ 'your app id' และ 'your client key' ด้วยข้อมูลรับรอง back4app ที่แท้จริงของคุณ ขั้นตอนที่ 4 – การใช้ completers เพื่อดึงข้อมูลแบบ asynchronously ตอนนี้ มาลองใช้ completer เพื่อดึงข้อมูลจาก back4app backend และควบคุมว่าเมื่อใดที่ข้อมูลพร้อมใช้งานใน ui ใน lib/main dart , สร้างคลาสใหม่ที่จะดึงงานจาก back4app โดยใช้ completer class taskmanager { final completer\<list\<parseobject>> completer = completer(); future\<list\<parseobject>> get tasks => completer future; taskmanager() { fetchtasks(); } void fetchtasks() async { querybuilder\<parseobject> query = querybuilder\<parseobject>(parseobject('task')); final parseresponse response = await query query(); if (response success && response results != null) { completer complete(response results); } else { completer completeerror('failed to load tasks'); } } } คลาสนี้จะเริ่มต้น completer , เริ่มดึงข้อมูล และทำให้ completer เสร็จสมบูรณ์เมื่อข้อมูลพร้อมใช้งาน 2\ ใน myapp วิดเจ็ต ให้ใช้ taskmanager เพื่อดึงและแสดงงาน class myapp extends statelesswidget { @override widget build(buildcontext context) { return materialapp( home scaffold( appbar appbar(title text('flutter completer demo')), body futurebuilder\<list\<parseobject>>( future taskmanager() tasks, builder (context, snapshot) { if (snapshot connectionstate == connectionstate waiting) { return center(child circularprogressindicator()); } else if (snapshot haserror) { return center(child text('error ${snapshot error}')); } else if (!snapshot hasdata || snapshot data! isempty) { return center(child text('no tasks found ')); } else { return listview\ builder( itemcount snapshot data! length, itembuilder (context, index) { final task = snapshot data!\[index]; return listtile( title text(task get\<string>('name') ?? 'no name'), subtitle text('completed ${task get\<bool>('status') ? 'yes' 'no'}'), ); }, ); } }, ), ), ); } } 3\ รันแอป flutter ของคุณ คุณควรเห็นรายการงานที่ดึงมาจาก back4app backend ของคุณ พร้อมชื่อและสถานะการเสร็จสิ้น บทสรุป ในบทเรียนนี้ คุณได้เรียนรู้วิธีการใช้ flutter completers เพื่อจัดการการทำงานแบบอะซิงโครนัสและควบคุมการไหลของการดึงข้อมูลในแอปพลิเคชันของคุณ โดยการรวมเข้ากับ back4app คุณได้สร้าง backend ที่เรียบง่ายแต่ทรงพลังสำหรับแอป flutter ของคุณ ซึ่งช่วยให้คุณดึงและแสดงข้อมูลได้อย่างไดนามิก วิธีการนี้สามารถขยายเพื่อจัดการกับสถานการณ์ที่ซับซ้อนมากขึ้น เช่น การตรวจสอบสิทธิ์ผู้ใช้ การจัดการข้อมูล และอื่น ๆ สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการใช้ flutter กับ back4app โปรดดูที่ เอกสาร flutter ของ back4app https //www back4app com/docs/flutter/overview ขอให้สนุกกับการเขียนโค้ด!