Flutter CRUD แอปด้วย GraphQL: คู่มือการพัฒนาสำหรับนักพัฒนา

ตัวอย่างแอป flutter crud โดยใช้ graphql บทนำ ในคู่มือ flutter graphql ครั้งแรกของเรา เราได้เรียนรู้วิธีการตั้งค่าโปรเจกต์ flutter โดยใช้ graphql api เพื่อเชื่อมต่อและสอบถามข้อมูลง่ายๆ บน back4app นอกจากนี้ เรายังได้เรียนรู้วิธีการใช้ back4app graphql playground เพื่อรันคำถาม/การเปลี่ยนแปลงเพื่อสร้าง/เติมข้อมูลในฐานข้อมูลแอป ในบทเรียนนี้ เราจะเพิ่มฟีเจอร์ที่เราจะสร้าง อัปเดต และลบข้อมูลจาก back4app backend ของเราโดยตรงจากแอปของเราโดยใช้การเปลี่ยนแปลง graphql เป้าหมาย เมื่อสิ้นสุดบทความนี้ เราคาดหวังว่าคุณจะสามารถ สร้างข้อมูลใน backend ของเราผ่าน graphql api อัปเดตข้อมูลจาก backend ของเราผ่าน graphql api ลบข้อมูลที่มีอยู่จาก backend ผ่าน graphql api ข้อกำหนดเบื้องต้น ในการทำตามบทเรียนนี้ คุณจะต้องมี คุณจะต้องอ่านคู่มือก่อนหน้านี้ของเรา “flutter graphql project” เพื่อที่จะเข้าใจจุดเริ่มต้นของเราในคู่มือนี้ เราจะใช้โปรเจกต์ก่อนหน้านี้ หากคุณไม่มี คุณสามารถ ดาวน์โหลดที่นี่ ide สำหรับเขียนโค้ด flutter เช่น android studio หรือ vs code บัญชี back4app ที่สามารถ สร้างที่นี่ back4app graphql flutter dependency https //pub dev/packages/graphql flutter หมายเหตุ หากคุณต้องการความเข้าใจที่ดีกว่าเกี่ยวกับ back4app graphql api โปรดดูที่ graphql cook book https //www back4app com/docs/parse graphql/graphql getting started และตรวจสอบ schema graphql ของเราบน api playground 1 การตั้งค่า gui สร้างไฟล์ใหม่ mutation page dart mutation page dart ที่นี่เราจะสร้าง gui ของเราเพื่อรับข้อมูลจากผู้ใช้และดำเนินการงาน mutation ตอนนี้ให้วางโค้ดต่อไปนี้ใน mutation page dart mutation page dart 1 import 'package\ back4appgraphqldemo/app ui dart'; 2 import 'package\ back4appgraphqldemo/database utils dart'; 3 import 'package\ flutter/material dart'; 4 5 class mutationpage extends statelesswidget { 6 7 string langname,saveformat,objectid; 8 databaseutils utils; 9 10 @override 11 widget build(buildcontext context) { 12 return appui( 13 onchangedname (text){ 14 langname=text; 15 }, 16 onchangedsaveformat (text){ 17 saveformat=text; 18 }, 19 onchangedobjectid (text){ 20 objectid=text; 21 }, 22 senddatabuttonpressed (){ 23 }, 24 deletedatabuttonpressed (){ 25 }, 26 updatebuttonpressed (){ 27 }, 28 ); 29 } 30 } appui() appui() วิดเจ็ตได้ถูกสร้างขึ้นสำหรับคุณแล้ว ดังนั้นเราจึงได้สร้างคลาสชื่อ mutationpage mutationpage และส่งคืน appui appui วิดเจ็ตเป็นวิดเจ็ตของมัน เราได้เริ่มต้นฟังก์ชัน callback สำหรับ text fields ของเราเพื่อให้ข้อความใน textfield แรกจะถูกเก็บใน langname langname , ตัวที่สองใน saveformat saveformat และ objectid objectid จากสุดท้าย ตอนนี้ให้ไปที่ main dart main dart และเพิ่ม floatingactionbutton floatingactionbutton พารามิเตอร์ใน scaffold() scaffold() วิดเจ็ตของ myhomepage myhomepage คลาสและส่งโค้ดต่อไปนี้เข้าไป 1 floatingactionbutton row( 2 mainaxisalignment mainaxisalignment end, 3 children \[ 4 floatingactionbutton( 5 herotag 'mutation page', 6 child text('m', 7 style textstyle( 8 color colors white, 9 ), 10 ), 11 onpressed (){ 12 navigator pushreplacement(context, materialpageroute( 13 builder ((context){ 14 return mutationpage(); 15 }) 16 )); 17 }, 18 ), 19 ], 20 ), นี่จะสร้างปุ่มลอยที่นำเราไปยัง mutationpage() mutationpage() จากหน้าแรกของเรา ดังนั้นตอนนี้ gui ของเราได้ตั้งค่าแล้ว คุณสามารถรีสตาร์ทแอปของคุณเพื่อดู gui ได้ นี่คือวิธีที่ main dart main dart ของคุณควรมีลักษณะ 1 import 'package\ back4appgraphqldemo/mutation page dart'; 2 import 'package\ flutter/material dart'; 3 import 'package\ graphql flutter/graphql flutter dart'; 4 import 'consonents dart'; 5 import 'dart\ ui'; 6 7 void main() { 8 runapp(myapp()); 9 } 10 11 class myapp extends statelesswidget { 12 @override 13 widget build(buildcontext context) { 14 final httplink httplink = httplink( 15 uri 'https //parseapi back4app com/graphql', 16 headers { 17 'x parse application id' kparseapplicationid, 18 'x parse client key' kparseclientkey, 19 'x parse master key' kparsemasterkey, 20 //'x parse rest api key' kparserestapikey, 21 }, //getheaders() 22 ); 23 24 valuenotifier\<graphqlclient> client = valuenotifier( 25 graphqlclient( 26 cache optimisticcache(dataidfromobject typenamedataidfromobject), 27 link httplink, 28 ), 29 ); 30 31 return materialapp( 32 home graphqlprovider( 33 child myhomepage(), 34 client client, 35 ), 36 ); 37 } 38 } 39 40 class myhomepage extends statefulwidget { 41 @override 42 myhomepagestate createstate() => myhomepagestate(); 43 } 44 45 class myhomepagestate extends state\<myhomepage> { 46 string name; 47 string saveformat; 48 string objectid; 49 50 string query = ''' 51 query findlanguages{ 52 languages{ 53 count, 54 edges{ 55 node{ 56 name, 57 saveformat 58 } 59 } 60 } 61 } 62 '''; 63 64 @override 65 widget build(buildcontext context) { 66 return safearea( 67 child scaffold( 68 appbar appbar( 69 title text( 70 'parsing data using graphql', 71 ), 72 ), 73 floatingactionbutton row( 74 mainaxisalignment mainaxisalignment end, 75 children \[ 76 floatingactionbutton( 77 herotag 'mutation page', 78 child text('m', 79 style textstyle( 80 color colors white, 81 ), 82 ), 83 onpressed (){ 84 navigator pushreplacement(context, materialpageroute( 85 builder ((context){ 86 return mutationpage(); 87 }) 88 )); 89 }, 90 ), 91 ], 92 ), 93 body query( 94 options queryoptions( 95 documentnode gql(query), 96 ), 97 builder ( 98 queryresult result, { 99 refetch refetch, 100 fetchmore fetchmore, 101 }) { 102 if (result data == null) { 103 return center( 104 child text( 105 "loading ", 106 style textstyle(fontsize 20 0), 107 )); 108 } else { 109 return listview\ builder( 110 itembuilder (buildcontext context, int index) { 111 return listtile( 112 title text(result data\["languages"]\["edges"]\[index]\["node"] 113 \['name']), 114 trailing text(result data\["languages"]\["edges"]\[index] 115 \["node"]\['saveformat']), 116 117 ); 118 }, 119 itemcount result data\["languages"]\["edges"] length, 120 ); 121 } 122 }, 123 ), 124 ), 125 ); 126 } 127 } 2 การสร้าง/เพิ่มข้อมูลลงในฐานข้อมูล หากคุณดำเนินการไปที่ graphql configration dart graphql configration dart คุณจะเห็นว่าเราได้ตั้งค่า graphqlclient graphqlclient ของเราแล้ว และตอนนี้เราสามารถใช้มันได้ทุกที่ มาดำเนินการต่อและสร้างไฟล์ database utils dart database utils dart และดำเนินการสำหรับ การสร้าง ข้อมูล สร้างคลาส databaseutils{} databaseutils{} และสร้างตัวสร้างที่จะรับพารามิเตอร์ข้อมูลที่เราจะทำงานด้วย ที่นี่เราจะต้องการ langname langname , saveformat saveformat , และ objectid objectid 1 import 'package\ back4appgraphqldemo/graphql configration dart'; 2 import 'package\ graphql flutter/graphql flutter dart'; 3 4 class databaseutils{ 5 final string langname,saveformat,objectid; 6 databaseutils({this langname="",this saveformat="",this objectid=""}); 7 } สร้างฟังก์ชัน adddata() adddata() ซึ่งจะเป็นฟังก์ชันแบบอะซิงโครนัสเพื่อสร้างข้อมูลและเริ่มต้น graphqlclient graphqlclient ของเราโดยการเริ่มต้น graphqlconfigration graphqlconfigration คลาส วางโค้ดต่อไปนี้ลงใน senddata() senddata() ฟังก์ชัน 1 future\<queryresult> senddata() async{ 2 string adddata=''' 3 mutation createobject(\\$input createlanguagefieldsinput){ 4 createlanguage(input {fields \\$input}){ 5 language{ 6 name, 7 saveformat 8 } 9 } 10 } 11 '''; 12 final variable ={ 13 "input" { 14 "name" langname, 15 "saveformat" saveformat, 16 } 17 }; 18 19 graphqlconfiguration configuration = graphqlconfiguration(); 20 graphqlclient client = configuration clienttoquery(); 21 22 } ที่นี่เราได้เริ่มต้นตัวแปร adddata adddata และได้ส่งคำถามเพื่อสร้างข้อมูลและเริ่มต้น ตัวแปร ตัวแปร ที่จะส่งคำถามตัวแปร เราได้เริ่มต้น graphqlclient graphqlclient ที่จะช่วยเราในการส่งคำถาม เราสามารถส่งคำถามในลักษณะดังต่อไปนี้ 1 queryresult queryresult = await client query( 2 queryoptions(documentnode gql(adddata), variables variable), 3 ); 4 return queryresult; เราใช้ graphqlclient graphqlclient อินสแตนซ์ของเราเพื่อเขียนคำถามที่รับ queryoptions() queryoptions() ที่ช่วยให้เราส่งคำถามตามที่คุณได้เห็นจากบทเรียนก่อนหน้านี้ ผลลัพธ์จะถูกเก็บไว้ใน queryresult queryresult นี่คือวิธีที่ database utils dart database utils dart ของคุณควรมีลักษณะดังนี้ 1 import 'package\ back4appgraphqldemo/graphql configration dart'; 2 import 'package\ graphql flutter/graphql flutter dart'; 3 4 class databaseutils{ 5 final string langname,saveformat,objectid; 6 databaseutils({this langname="",this saveformat="",this objectid=""}); 7 future\<queryresult> senddata() async{ 8 string adddata=''' 9 mutation createobject(\\$input createlanguagefieldsinput){ 10 createlanguage(input {fields \\$input}){ 11 language{ 12 name, 13 saveformat 14 } 15 } 16 } 17 '''; 18 final variable ={ 19 "input" { 20 "name" langname, 21 "saveformat" saveformat, 22 } 23 }; 24 25 graphqlconfiguration configuration = graphqlconfiguration(); 26 graphqlclient client = configuration clienttoquery(); 27 28 queryresult queryresult = await client query( 29 queryoptions(documentnode gql(adddata), variables variable), 30 ); 31 return queryresult; 32 } 33 } ตอนนี้ไปที่คลาส ui ของคุณ mutation page dart mutation page dart มารหัสสำหรับปุ่มส่งข้อมูลซึ่งสามารถเขียนภายใน senddatabuttonpressed senddatabuttonpressed พารามิเตอร์ เนื่องจากเราต้องการ langname และ saveformat ให้ตรวจสอบก่อนว่ามันไม่ว่างและจากนั้นสร้างอินสแตนซ์ของ databaseutils databaseutils และส่งผ่าน langname langname และ saveformat saveformat พารามิเตอร์ 1 if(langname isnotempty && saveformat isnotempty){ 2 utils = databaseutils( 3 langname langname, 4 saveformat saveformat , 5 ); 6 } หลังจากนี้ให้เรียกใช้ senddata() senddata() ฟังก์ชันจาก databaseutils databaseutils อินสแตนซ์ ตอนนี้คุณสามารถ hot restart แอป เติมข้อมูลในสองฟิลด์ข้อความด้วยข้อมูลที่เกี่ยวข้องและกดปุ่มส่งข้อมูล ตอนนี้กลับไปที่หน้าคำถามของคุณโดยการกดปุ่มลอยและคุณจะเห็นว่ามีข้อมูลอีกหนึ่งรายการถูกเพิ่มลงในตารางของเรา นี่คือรูปลักษณ์ของคลาส mutationpage ของคุณ 1 import 'package\ back4appgraphqldemo/app ui dart'; 2 import 'package\ back4appgraphqldemo/database utils dart'; 3 import 'package\ flutter/material dart'; 4 5 class mutationpage extends statelesswidget { 6 7 string langname,saveformat,objectid; 8 databaseutils utils; 9 10 @override 11 widget build(buildcontext context) { 12 return appui( 13 onchangedname (text){ 14 langname=text; 15 }, 16 onchangedsaveformat (text){ 17 saveformat=text; 18 }, 19 onchangedobjectid (text){ 20 objectid=text; 21 }, 22 senddatabuttonpressed (){ 23 if(langname isnotempty && saveformat isnotempty){ 24 utils = databaseutils( 25 langname langname, 26 saveformat saveformat , 27 ); 28 utils senddata(); 29 } 30 }, 31 deletedatabuttonpressed (){ 32 }, 33 updatebuttonpressed (){ 34 }, 35 ); 36 } 37 } 3 การอัปเดตข้อมูล ใน databaseutils databaseutils สร้างฟังก์ชัน future future updatedata() updatedata() เริ่มต้นด้วย string update string update และส่งคำสั่งอัปเดตและ ตัวแปรคำสั่ง ใน final variables final variables 1 future\<queryresult> updatedata() async{ 2 string update=''' 3 mutation updateobject(\\$id id!,\\$input updatelanguagefieldsinput){ 4 updatelanguage(input {id \\$id, fields \\$input}){ 5 language{ 6 name, 7 id 8 } 9 } 10 } 11 '''; 12 final variable={ 13 "id"\ objectid, 14 "input" { 15 "name" langname 16 } 17 }; 18 } ตอนนี้เริ่มต้น graphqlclient graphqlclient และส่งคำสั่งผ่าน queryoptions() queryoptions() นี่คือวิธีที่โค้ดของคุณจะมีลักษณะ 1 future\<queryresult> updatedata() async{ 2 3 string update=''' 4 mutation updateobject(\\$id id!,\\$input updatelanguagefieldsinput){ 5 updatelanguage(input {id \\$id, fields \\$input}){ 6 language{ 7 name, 8 id 9 } 10 } 11 } 12 '''; 13 14 final variable={ 15 "id"\ objectid, 16 "input" { 17 "name" langname 18 } 19 }; 20 21 graphqlconfiguration configuration = graphqlconfiguration(); 22 graphqlclient client = configuration clienttoquery(); 23 24 queryresult queryresult = await client query( 25 queryoptions(documentnode gql(update), variables variable), 26 ); 27 return queryresult; 28 } ตอนนี้กลับไปที่ mutaion page dart mutaion page dart และเขียนโค้ดใน updatebuttonpressed updatebuttonpressed พารามิเตอร์ ตรวจสอบว่า langname langname , objectid objectid และ saveformat saveformat ไม่ว่างเปล่าและจากนั้นเรียกใช้ updatedata() updatedata() ฟังก์ชันจาก databaseutils databaseutils คลาส 1 updatebuttonpressed (){ 2 if(langname isnotempty && saveformat isnotempty && objectid isnotempty){ 3 utils = databaseutils( 4 langname langname, 5 saveformat saveformat , 6 objectid objectid 7 ); 8 utils updatedata(); 9 } 10 }, ไปที่ back4app dashboard และเลือกภาษาที่จะอัปเดต จากนั้นคัดลอก objectid ของมัน hot restart แอปของคุณและกรอกข้อมูลใน 3 ช่องข้อความ ชื่อ ใหม่ของภาษาที่คุณต้องการแทรกในช่องข้อความแรกและ รูปแบบการบันทึก ใหม่ในช่องที่สองและ objectid ในช่องที่สาม ตอนนี้กดปุ่มอัปเดตข้อมูลและตรวจสอบข้อมูลที่อัปเดตในแอปโดยคลิกที่ปุ่มลอย q ที่มุมขวาล่าง 4 การลบข้อมูล สร้าง deletedata() deletedata() ฟังก์ชันแบบ async ใน databaseutils databaseutils และเริ่มต้น string delete string delete และส่งคำสั่ง graphql เพื่อทำการลบข้อมูล ใช้ ตัวแปรสุดท้าย ตัวแปรสุดท้าย และส่งตัวแปรคำสั่งเข้าไป 1 future\<queryresult> deletedata() async{ 2 string delete=''' 3 mutation deleteobject(\\$id id!){ 4 deletelanguage(input {id \\$id}){ 5 language{ 6 name, 7 id 8 } 9 } 10 } 11 '''; 12 final variable={ 13 "id"\ objectid, 14 }; 15 } ในนี้ เราต้องการเพียง objectid objectid ของแถวที่ต้องการลบ เริ่มต้น graphqlclient graphqlclient และส่งคำสั่งผ่าน queryoptions() queryoptions() 1 future\<queryresult> deletedata() async{ 2 string delete=''' 3 mutation deleteobject(\\$id id!){ 4 deletelanguage(input {id \\$id}){ 5 language{ 6 name, 7 id 8 } 9 } 10 } 11 '''; 12 final variable={ 13 "id"\ objectid, 14 }; 15 16 graphqlconfiguration configuration = graphqlconfiguration(); 17 graphqlclient client = configuration clienttoquery(); 18 19 queryresult queryresult = await client query( 20 queryoptions(documentnode gql(delete), variables variable), 21 ); 22 23 return queryresult; 24 } ใน mutationpage mutationpage ใน deletedatabuttonpressed deletedatabuttonpressed ตรวจสอบพารามิเตอร์ว่า objectid objectid ไม่ว่างหรือ null และเรียกใช้ deletedata() deletedata() ฟังก์ชัน hot restart แอปพลิเคชัน, ป้อน objectid ของแถวที่จะถูกลบและกด delete data ปุ่ม มันควรจะลบแถวเฉพาะจาก language language คลาส สำเร็จ แอปของคุณได้ทำการดำเนินการมิวเทชันของคุณในที่สุด !!! main dart main dart ควรมีลักษณะดังนี้ 1 import 'package\ back4appgraphqldemo/mutation page dart'; 2 import 'package\ flutter/material dart'; 3 import 'package\ graphql flutter/graphql flutter dart'; 4 import 'consonents dart'; 5 import 'dart\ ui'; 6 7 void main() { 8 runapp(myapp()); 9 } 10 11 class myapp extends statelesswidget { 12 @override 13 widget build(buildcontext context) { 14 final httplink httplink = httplink( 15 uri 'https //parseapi back4app com/graphql', 16 headers { 17 'x parse application id' kparseapplicationid, 18 'x parse client key' kparseclientkey, 19 'x parse master key' kparsemasterkey, 20 //'x parse rest api key' kparserestapikey, 21 }, //getheaders() 22 ); 23 24 valuenotifier\<graphqlclient> client = valuenotifier( 25 graphqlclient( 26 cache optimisticcache(dataidfromobject typenamedataidfromobject), 27 link httplink, 28 ), 29 ); 30 31 return materialapp( 32 home graphqlprovider( 33 child myhomepage(), 34 client client, 35 ), 36 ); 37 } 38 } 39 40 class myhomepage extends statefulwidget { 41 @override 42 myhomepagestate createstate() => myhomepagestate(); 43 } 44 45 class myhomepagestate extends state\<myhomepage> { 46 string name; 47 string saveformat; 48 string objectid; 49 50 string query = ''' 51 query findlanguages{ 52 languages{ 53 count, 54 edges{ 55 node{ 56 name, 57 saveformat 58 } 59 } 60 } 61 } 62 '''; 63 64 @override 65 widget build(buildcontext context) { 66 return safearea( 67 child scaffold( 68 appbar appbar( 69 title text( 70 'parsing data using graphql', 71 ), 72 ), 73 floatingactionbutton row( 74 mainaxisalignment mainaxisalignment end, 75 children \[ 76 floatingactionbutton( 77 herotag 'mutation page', 78 child text('m', 79 style textstyle( 80 color colors white, 81 ), 82 ), 83 onpressed (){ 84 navigator pushreplacement(context, materialpageroute( 85 builder ((context){ 86 return mutationpage(); 87 }) 88 )); 89 }, 90 ), 91 ], 92 ), 93 body query( 94 options queryoptions( 95 documentnode gql(query), 96 ), 97 builder ( 98 queryresult result, { 99 refetch refetch, 100 fetchmore fetchmore, 101 }) { 102 if (result data == null) { 103 return center( 104 child text( 105 "loading ", 106 style textstyle(fontsize 20 0), 107 )); 108 } else { 109 return listview\ builder( 110 itembuilder (buildcontext context, int index) { 111 return listtile( 112 title text(result data\["languages"]\["edges"]\[index]\["node"] 113 \['name']), 114 trailing text(result data\["languages"]\["edges"]\[index] 115 \["node"]\['saveformat']), 116 117 ); 118 }, 119 itemcount result data\["languages"]\["edges"] length, 120 ); 121 } 122 }, 123 ), 124 ), 125 ); 126 } 127 } database utils dart database utils dart ควรเป็นแบบนี้ 1 import 'package\ back4appgraphqldemo/graphql configration dart'; 2 import 'package\ graphql flutter/graphql flutter dart'; 3 4 class databaseutils{ 5 6 final string langname,saveformat,objectid; 7 8 databaseutils({this langname="",this saveformat="",this objectid=""}); 9 10 string delete=''' 11 mutation delete languages(\\$id id!){ 12 deletelanguage(input {id \\$id}){ 13 language{ 14 name, 15 id 16 } 17 } 18 } 19 '''; 20 21 string adddata=''' 22 mutation create languages(\\$input createlanguagefieldsinput){ 23 createlanguage(input {fields \\$input}){ 24 language{ 25 name, 26 saveformat 27 } 28 } 29 } 30 '''; 31 string update=''' 32 mutation update languages(\\$id id!,\\$input updatelanguagefieldsinput){ 33 updatelanguage(input {id \\$id, fields \\$input}){ 34 language{ 35 name, 36 id 37 } 38 } 39 } 40 '''; 41 42 future\<queryresult> senddata() async{ 43 44 final variable ={ 45 "input" { 46 "name" langname, 47 "saveformat" saveformat, 48 } 49 }; 50 print('sendingdata'); 51 52 graphqlconfiguration configuration = graphqlconfiguration(); 53 graphqlclient client = configuration clienttoquery(); 54 55 queryresult queryresult = await client query( 56 queryoptions(documentnode gql(adddata), variables variable), 57 ); 58 return queryresult; 59 60 } 61 future\<queryresult> updatedata() async{ 62 final variable={ 63 "id"\ objectid, 64 "input" { 65 "name" langname 66 } 67 }; 68 69 graphqlconfiguration configuration = graphqlconfiguration(); 70 graphqlclient client = configuration clienttoquery(); 71 72 queryresult queryresult = await client query( 73 queryoptions(documentnode gql(update), variables variable), 74 ); 75 return queryresult; 76 } 77 78 79 future\<queryresult> deletedata() async{ 80 final variable={ 81 "id"\ objectid, 82 }; 83 84 graphqlconfiguration configuration = graphqlconfiguration(); 85 graphqlclient client = configuration clienttoquery(); 86 87 queryresult queryresult = await client query( 88 queryoptions(documentnode gql(delete), variables variable), 89 ); 90 91 return queryresult; 92 } 93 } mutaion page dart mutaion page dart ควรมีลักษณะดังนี้ 1 import 'package\ back4appgraphqldemo/app ui dart'; 2 import 'package\ back4appgraphqldemo/database utils dart'; 3 import 'package\ flutter/material dart'; 4 5 class mutationpage extends statelesswidget { 6 7 string langname,saveformat,objectid; 8 databaseutils utils; 9 10 @override 11 widget build(buildcontext context) { 12 return appui( 13 onchangedname (text){ 14 langname=text; 15 }, 16 onchangedsaveformat (text){ 17 saveformat=text; 18 }, 19 onchangedobjectid (text){ 20 objectid=text; 21 }, 22 23 senddatabuttonpressed (){ 24 if(langname isnotempty && saveformat isnotempty){ 25 utils = databaseutils( 26 langname langname, 27 saveformat saveformat , 28 ); 29 utils senddata(); 30 } 31 }, 32 deletedatabuttonpressed (){ 33 if(objectid isnotempty){ 34 utils = databaseutils( 35 objectid objectid, 36 ); 37 utils deletedata(); 38 } 39 }, 40 updatebuttonpressed (){ 41 if(langname isnotempty && saveformat isnotempty && objectid isnotempty){ 42 utils = databaseutils( 43 langname langname, 44 saveformat saveformat , 45 objectid objectid 46 ); 47 utils updatedata(); 48 } 49 }, 50 ); 51 } 52 } บทสรุป ในคู่มือนี้เราใช้การเปลี่ยนแปลง graphql ในแอป flutter เพื่อ สร้างวัตถุใหม่บน back4app; อัปเดตวัตถุบน back4app; ลบวัตถุบน back4app ในจุดนี้คุณมีโครงการ flutter graphql crud ที่ทำงานได้อย่างสมบูรณ์ซึ่งคุณสามารถใช้เป็นจุดเริ่มต้นในการพัฒนาแอปถัดไปของคุณ ในคู่มือถัดไปเราจะเจาะลึกลงไปในคำถามเพื่อแสดงวิธีการทำเพื่อดึงข้อมูลจาก back4app และแสดงในแอป flutter ของเรา ขอให้คุณมีวันที่ดี!