เข้าใจการจับคู่แพทเทิร์นใน Flutter โดยใช้ Back4app Backend

บทนำ การจับคู่รูปแบบเป็นฟีเจอร์ที่ทรงพลังที่แนะนำใน dart 3 ซึ่งช่วยให้นักพัฒนาสามารถระบุและดึงข้อมูลโครงสร้างเฉพาะภายในแอปพลิเคชันของตนได้อย่างง่ายดาย หากคุณมีประสบการณ์กับภาษาต่างๆ เช่น kotlin, swift หรือ javascript คุณอาจจะคุ้นเคยกับการจับคู่รูปแบบอยู่แล้ว อย่างไรก็ตาม หากคุณเป็นมือใหม่กับแนวคิดนี้ใน dart บทเรียนนี้จะช่วยให้คุณรู้สึกสบายใจกับมัน เราจะสำรวจการจับคู่รูปแบบและวิธีการใช้งานในแอป flutter ด้วยตัวอย่างที่เป็นรูปธรรมซึ่งรวม back4app เป็นแบ็กเอนด์เพื่อจัดการและเก็บข้อมูล ข้อกำหนดเบื้องต้น ก่อนที่คุณจะเริ่ม ให้แน่ใจว่าคุณมีสิ่งต่อไปนี้ บัญชี back4app ลงทะเบียนสำหรับบัญชีฟรีที่ back4app com https //www back4app com ตั้งค่าสภาพแวดล้อมการพัฒนา flutter บนเครื่องของคุณเอง ติดตาม คู่มือการติดตั้ง flutter https //flutter dev/docs/get started/install หากคุณยังไม่ได้ตั้งค่า ความรู้พื้นฐานเกี่ยวกับ dart, วิดเจ็ต flutter และการใช้ back4app สำหรับบริการแบ็กเอนด์ ขั้นตอนที่ 1 – การตั้งค่าแบ็กเอนด์ back4app ของคุณ สร้างโปรเจกต์ back4app เข้าสู่ระบบบัญชี back4app https //www back4app com/ และสร้างโปรเจกต์ใหม่ สร้างคลาส parse สำหรับบทเรียนนี้ ให้สร้างคลาส parse ชื่อ userdata เพื่อเก็บข้อมูลผู้ใช้ ชื่อผู้ใช้ (string) ชื่อผู้ใช้ของผู้ใช้ อายุ (number) อายุของผู้ใช้ ความชอบ (json) อ็อบเจ็กต์ json ที่เก็บความชอบของผู้ใช้ รับข้อมูลประจำตัว back4app ของคุณ ไปที่การตั้งค่าโปรเจกต์ของคุณเพื่อดึง application id และ client key ซึ่งคุณจะต้องใช้ในการเชื่อมต่อแอป flutter ของคุณกับ back4app ขั้นตอนที่ 2 – การตั้งค่าโปรเจกต์ flutter สร้างโปรเจกต์ flutter ใหม่ เปิดเทอร์มินัลหรือพรอมต์คำสั่งของคุณและรัน flutter create pattern matching example เพิ่ม dependencies เปิด pubspec yaml และเพิ่ม dependencies ต่อไปนี้ dependencies flutter sdk flutter parse server sdk flutter latest version รัน flutter pub get เพื่อติดตั้ง dependencies เหล่านี้ เริ่มต้น parse ในแอปของคุณ ใน lib/main dart , เริ่มต้น sdk ของ parse import 'package\ flutter/material dart'; import 'package\ parse server sdk flutter/parse server sdk flutter dart'; void main() async { widgetsflutterbinding ensureinitialized(); const keyapplicationid = 'your back4app app id'; const keyclientkey = 'your back4app client key'; const keyparseserverurl = 'https //parseapi back4app com'; await parse() initialize(keyapplicationid, keyparseserverurl, clientkey keyclientkey, autosendsessionid true); runapp(myapp()); } class myapp extends statelesswidget { @override widget build(buildcontext context) { return materialapp( home patternmatchingscreen(), ); } } แทนที่ 'your back4app app id' และ 'your back4app client key' ด้วยข้อมูลรับรอง back4app ที่แท้จริงของคุณ ขั้นตอนที่ 3 – การนำการจับคู่รูปแบบไปใช้ สร้าง widget patternmatchingscreen ใน lib/main dart , สร้าง widget ใหม่ที่แสดงการจับคู่รูปแบบโดยการดึงและประมวลผลข้อมูลผู้ใช้ class patternmatchingscreen extends statefulwidget { @override patternmatchingscreenstate createstate() => patternmatchingscreenstate(); } class patternmatchingscreenstate extends state\<patternmatchingscreen> { string message = 'fetching data '; @override void initstate() { super initstate(); fetchandmatchdata(); } future\<void> fetchandmatchdata() async { final query = querybuilder\<parseobject>(parseobject('userdata')); final response = await query query(); if (response success && response results != null) { for (var result in response results!) { // using pattern matching to destructure and validate data if (result is parseobject) { final userdata = { 'username' result get\<string>('username'), 'age' result get\<int>('age'), 'preferences' result get\<map\<string, dynamic>>('preferences') }; switch (userdata) { case { 'username' string name, 'age' int age when age >= 18, 'preferences' {'theme' string theme} } setstate(() { message = 'welcome, $name! you are $age years old and prefer the $theme theme '; }); break; default setstate(() { message = 'data does not match the required pattern '; }); break; } } } } else { setstate(() { message = 'failed to retrieve data '; }); } } @override widget build(buildcontext context) { return scaffold( appbar appbar(title text('pattern matching example')), body center(child text( message)), ); } } โค้ดนี้ดึงข้อมูลผู้ใช้จาก back4app ใช้การจับคู่รูปแบบเพื่อตรวจสอบและแยกข้อมูล และแสดงข้อความที่ปรับแต่งตามข้อมูลที่ตรงกัน ขั้นตอนที่ 4 – รันแอป รันแอปของคุณ โดยใช้ flutter run คุณควรเห็นข้อความบนหน้าจอที่อิงจากข้อมูลที่ดึงมาและตรงกันโดยใช้การจับคู่รูปแบบ ตรวจสอบข้อมูลใน back4app โดยการเข้าสู่ระบบในแดชบอร์ด back4app ของคุณและตรวจสอบ userdata คลาส คุณสามารถปรับข้อมูลเพื่อดูว่ารูปแบบต่างๆ ตรงกันอย่างไรและแอปตอบสนองอย่างไร บทสรุป ในบทเรียนนี้ เราได้สำรวจแนวคิดของการจับคู่รูปแบบใน dart และวิธีการที่สามารถนำไปใช้ในแอป flutter โดยการรวม back4app เป็นแบ็กเอนด์ เราได้แสดงตัวอย่างที่ใช้งานได้จริงของการดึงและประมวลผลข้อมูลโดยใช้การจับคู่รูปแบบ วิธีการนี้ช่วยให้คุณตรวจสอบและแยกข้อมูลได้อย่างมีประสิทธิภาพ ทำให้แอป flutter ของคุณมีความแข็งแกร่งและดูแลรักษาง่ายขึ้น สำหรับข้อมูลเพิ่มเติมเกี่ยวกับรูปแบบ dart โปรดเยี่ยมชม เอกสาร dart https //dart dev , และสำหรับเคล็ดลับการรวมแบ็กเอนด์ โปรดตรวจสอบ เอกสาร back4app https //www back4app com/docs ขอให้สนุกกับการเขียนโค้ด!