การสร้างและใช้งานส่วนขยาย Flutter DevTools กับ Back4app

บทนำ flutter devtools เป็นชุดเครื่องมือที่ทรงพลังสำหรับการดีบัก การตรวจสอบ และการวิเคราะห์แอป flutter ด้วยกรอบการขยาย dart & flutter devtools นักพัฒนาสามารถสร้างการขยายที่กำหนดเองเพื่อปรับปรุงการดีบักและการพัฒนาของพวกเขา การขยายเหล่านี้สามารถสร้างเป็นแอปเว็บ flutter และรวมเข้ากับชุด devtools ได้อย่างราบรื่น ในบทเรียนนี้ เราจะสำรวจวิธีการสร้างการขยาย flutter devtools รวมถึงการรวมเข้ากับแอป flutter ที่ใช้ back4app สำหรับบริการด้านหลัง และการดีบักแอปพลิเคชันโดยใช้การขยายที่กำหนดเอง สิ่งนี้จะช่วยให้คุณสร้างเครื่องมือสำหรับนักพัฒนาที่ปรับแต่งได้ซึ่งสามารถทำให้กระบวนการพัฒนาของคุณมีประสิทธิภาพมากขึ้นและให้ข้อมูลเชิงลึกที่ลึกซึ้งเกี่ยวกับพฤติกรรมของแอปของคุณ ข้อกำหนดเบื้องต้น ในการทำบทเรียนนี้ให้เสร็จสมบูรณ์ คุณจะต้องมี บัญชี back4app ลงทะเบียนสำหรับบัญชีฟรีที่ back4app com https //www back4app com ตั้งค่าสภาพแวดล้อมการพัฒนา flutter บนเครื่องของคุณ หากคุณยังไม่ได้ตั้งค่าให้ทำตาม คู่มือการติดตั้ง flutter https //flutter dev/docs/get started/install ความรู้พื้นฐานเกี่ยวกับ dart, วิดเจ็ต flutter และการใช้ flutter devtools ขั้นตอนที่ 1 – การตั้งค่า backend ของ back4app สร้างโปรเจกต์ back4app เข้าสู่ระบบบัญชี back4app https //www back4app com/ และสร้างโปรเจกต์ใหม่ สร้างคลาส parse สำหรับบทเรียนนี้ ให้สร้างคลาส parse ชื่อ themesettings เพื่อเก็บข้อมูลการตั้งค่าธีมสำหรับแอป flutter ของคุณ themename (string) ชื่อของธีม primarycolor (string) สีหลักของธีม accentcolor (string) สีเสริมของธีม เติมข้อมูลตัวอย่างในคลาส เพิ่มหลายเรคคอร์ดไปยัง themesettings คลาสเพื่อจำลองการตั้งค่าธีมที่แอป flutter ของคุณจะใช้ รับข้อมูลรับรอง back4app ของคุณ ไปที่การตั้งค่าโปรเจกต์ของคุณเพื่อดึง application id และ client key ซึ่งคุณจะต้องใช้เชื่อมต่อแอป flutter ของคุณกับ back4app ขั้นตอนที่ 2 – การสร้างส่วนขยาย flutter devtools สร้างโปรเจกต์ flutter ใหม่ เปิดเทอร์มินัลหรือพรอมต์คำสั่งของคุณและรัน flutter create theme builder extension ตั้งค่าไดเรกทอรีส่วนขยาย ไปที่ไดเรกทอรีรากของโปรเจกต์ของคุณและสร้างไดเรกทอรีใหม่สำหรับส่วนขยาย devtools ของคุณ mkdir devtools extension ภายในไดเรกทอรีนี้ ให้สร้างไฟล์ config yaml เพื่อเก็บข้อมูลเมตาที่จำเป็นสำหรับ devtools package name theme builder extension version 1 0 0 issue tracker https //github com/yourusername/theme builder extension/issues material icon assets/icon png เพิ่มการพึ่งพา เปิด pubspec yaml และเพิ่มการพึ่งพาต่อไปนี้ dependencies flutter sdk flutter devtools extensions latest version devtools app shared latest version รัน flutter pub get เพื่อติดตั้งการพึ่งพาเหล่านี้ สร้าง devtools extension ใน lib/main dart , แทนที่เนื้อหาดีฟอลต์ด้วยโค้ดต่อไปนี้เพื่อห่อหุ้มแอป flutter เว็บของคุณใน devtoolsextension วิดเจ็ต import 'package\ flutter/material dart'; import 'package\ devtools extensions/devtools extensions dart'; import 'package\ devtools app shared/devtools app shared dart'; void main() { runapp(devtoolsextension(child themebuilderapp())); } class themebuilderapp extends statelesswidget { @override widget build(buildcontext context) { return scaffold( appbar appbar(title text('theme builder')), body center( child elevatedbutton( onpressed () { // your extension logic here }, child text('generate theme'), ), ), ); } } นี่จะห่อหุ้มแอปของคุณใน devtoolsextension วิดเจ็ต ซึ่งจัดการการตั้งธีมและการรวมเข้ากับชุด devtools เพิ่มการรวม devtools แก้ไขแอปของคุณเพื่อรวมฟีเจอร์เฉพาะ devtools เช่น การใช้ devtoolsbutton แทนที่ elevatedbutton class themebuilderapp extends statelesswidget { @override widget build(buildcontext context) { return scaffold( appbar appbar(title text('theme builder')), body center( child devtoolsbutton( onpressed () { // your extension logic here }, child text('generate theme'), ), ), ); } } การเปลี่ยนแปลงนี้ทำให้ ui ของส่วนขยายของคุณผสมผสานได้อย่างลงตัวกับชุด devtools อื่น ๆ ขั้นตอนที่ 3 – การรวมเข้ากับ back4app เริ่มต้น parse ในส่วนขยายของคุณ เนื่องจากส่วนขยายนี้จะโต้ตอบกับ back4app ให้เริ่มต้น parse ในส่วนขยายของคุณ 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(devtoolsextension(child themebuilderapp())); } ดึงและใช้ข้อมูลธีม ใช้ข้อมูลจาก back4app ในส่วนขยายของคุณเพื่อสร้างและใช้ธีม class themebuilderapp extends statelesswidget { @override widget build(buildcontext context) { return scaffold( appbar appbar(title text('theme builder')), body futurebuilder\<list\<parseobject>>( future fetchthemes(), builder (context, snapshot) { if (!snapshot hasdata) { return circularprogressindicator(); } final themes = snapshot data!; return listview\ builder( itemcount themes length, itembuilder (context, index) { final theme = themes\[index]; return listtile( title text(theme get\<string>('themename') ?? 'no name'), subtitle text('primary color ${theme get\<string>('primarycolor')}'), ontap () { // apply theme logic }, ); }, ); }, ), ); } future\<list\<parseobject>> fetchthemes() async { final query = querybuilder\<parseobject>(parseobject('themesettings')); final response = await query query(); if (response success && response results != null) { return response results as list\<parseobject>; } else { throw exception('failed to load themes'); } } } โค้ดนี้ดึงการตั้งค่าธีมจาก back4app และแสดงในรายการ การเลือกธีมอาจกระตุ้นให้มีการใช้ตรรกะเพิ่มเติมเพื่อใช้ธีมนั้น ขั้นตอนที่ 4 – ทดสอบส่วนขยายของคุณในสภาพแวดล้อมจำลอง เรียกใช้ส่วนขยายในสภาพแวดล้อมจำลอง เพื่อทดสอบส่วนขยายของคุณโดยไม่ต้องคอมไพล์ทุกครั้ง ให้ใช้สภาพแวดล้อม devtools จำลอง flutter run d chrome dart define=use simulated environment=true จำลองแอปที่เชื่อมต่อ เริ่มแอป flutter อีกตัวที่ส่วนขยายของคุณจะเชื่อมต่อไปยัง คัดลอกและวาง uri ของบริการ vm และ uri ของบริการ dtd ของแอปที่เชื่อมต่อในสภาพแวดล้อมที่จำลอง ขั้นตอนที่ 5 – การสร้างและเผยแพร่ส่วนขยาย สร้างส่วนขยาย เมื่อคุณพอใจกับส่วนขยายของคุณแล้ว ให้สร้างมันสำหรับการผลิต flutter pub get flutter build web output=devtools extension/build ตรวจสอบความถูกต้องของส่วนขยาย ใช้คำสั่งการตรวจสอบ devtools เพื่อให้แน่ใจว่าส่วนขยายของคุณถูกกำหนดค่าอย่างถูกต้อง dart run devtools extensions validate เผยแพร่ส่วนขยาย เผยแพร่ส่วนขยายของคุณไปยัง pub dev เพื่อให้นักพัฒนาคนอื่นสามารถใช้มันได้ flutter pub publish บทสรุป ในบทเรียนนี้ คุณได้เรียนรู้วิธีการสร้างส่วนขยาย flutter devtools รวมถึงการรวมเข้ากับ back4app สำหรับบริการด้านหลัง และทดสอบในสภาพแวดล้อมที่จำลอง โดยการขยาย devtools คุณสามารถสร้างเครื่องมือที่กำหนดเองซึ่งช่วยเพิ่มประสิทธิภาพการทำงานของคุณและเสนอข้อมูลเชิงลึกใหม่เกี่ยวกับพฤติกรรมของแอปของคุณ เมื่อส่วนขยายของคุณพร้อมแล้ว การเผยแพร่ไปยัง pub dev จะช่วยให้นักพัฒนาคนอื่นได้รับประโยชน์จากผลงานของคุณ สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการใช้ flutter กับ back4app โปรดดูที่ เอกสาร back4app https //www back4app com/docs และ เอกสาร flutter devtools https //flutter dev/docs/development/tools/devtools/overview ขอให้สนุกกับการเขียนโค้ด!