พัฒนาโปรเจกต์ Flutter ด้วย GraphQL และ Back4App

ดาวน์โหลดโปรเจกต์ flutter graphql พร้อมโค้ดต้นฉบับและเริ่มใช้งาน back4app บทนำ ในบทเรียนนี้ เราจะสร้างแอปพลิเคชันที่จะทำการแยกข้อมูลจาก back4app backend ผ่าน graphql ตามที่คุณอาจทราบว่า graphql เป็นภาษาสำหรับการสอบถามและจัดการข้อมูลแบบโอเพนซอร์สสำหรับ api และเป็นเวลาที่ใช้ในการตอบสนองคำถามด้วยข้อมูลที่มีอยู่ back4app เป็นบริการ backend แบบ low code (ที่อิงจาก open source parse platform) ซึ่งช่วยให้นักพัฒนาสามารถสร้างแอปพลิเคชันมือถือและเว็บที่ขยายได้และปรับขนาดได้อย่างรวดเร็ว เป้าหมาย เป้าหมายหลักคือการสร้างแอปง่ายๆ ที่จะแสดงรายการภาษาการเขียนโปรแกรมและรูปแบบการบันทึกของพวกเขา ในตอนท้ายของบทความนี้เราคาดหวังว่าคุณจะสามารถ ทำการเรียก api บน back4app โดยใช้ graphql; ดึงข้อมูลจาก graphql api; ดึงข้อมูลในแอป flutter ของคุณ ข้อกำหนดเบื้องต้น ในการทำตามบทเรียนนี้ คุณจะต้องมี ide สำหรับเขียนโค้ด flutter เช่น android studio หรือ flutter อย่างไรก็ตามเราจะใช้ android studio สำหรับบทเรียนนี้ บัญชี back4app ที่สามารถสร้างได้ที่นี่ back4app graphql flutter https //pub dev/packages/graphql flutter 1 โคลนโปรเจกต์จาก github ไปยัง android studio ไปที่ github repo https //github com/templates back4app/flutter graphql , และดาวน์โหลดไฟล์ zip, แตกไฟล์ และเปิดใน ide flutter ของคุณ ในการทำขั้นตอนนี้ ให้ลากโฟลเดอร์ภายในไฟล์ zip ไปยังเดสก์ท็อปของคุณ เปิด android studio และคลิกที่ เปิดโปรเจกต์ android studio ที่มีอยู่ โปรเจกต์ไดเรกทอรีจะอยู่ที่ ‘ c \users\username\desktop\back4app graphql starting code ’ แต่สิ่งนี้อาจแตกต่างกันไปในแต่ละผู้ใช้ เปิดโปรเจกต์และไปที่ lib\main dart lib\main dart ไฟล์ คุณจะเห็นข้อผิดพลาดมากมายที่นั่น ไม่ต้องกังวล เพียงแค่กด ‘ get dependencies ’ และข้อผิดพลาดทั้งหมดจะหายไป หากไม่หาย ให้กด ‘ upgrade dependencies ’ โค้ดใน main dart main dart ของคุณควรมีลักษณะดังนี้ 1 import 'package\ flutter/material dart'; 2 import 'package\ graphql flutter/graphql flutter dart'; 3 import 'consonents dart'; 4 5 void main() { 6 runapp(myapp()); 7 } 8 9 class myapp extends statelesswidget { 10 @override 11 widget build(buildcontext context) { 12 return materialapp( 13 home myhomepage(), 14 ), 15 ); 16 } 17 } 18 class myhomepage extends statefulwidget { 19 @override 20 myhomepagestate createstate() => myhomepagestate(); 21 } 22 23 class myhomepagestate extends state\<myhomepage> { 24 25 @override 26 widget build(buildcontext context) { 27 return safearea( 28 child scaffold( 29 appbar appbar( 30 title text('parsing data using graphql', 31 ), 32 ), 33 body container(), 34 ),); 35 } 36 } ถ้าคุณเปิดแอป run ตอนนี้คุณจะเห็นเพียงหน้าจอว่างในอีมูเลเตอร์/อุปกรณ์ของคุณที่มีเพียง appbar ที่มีชื่อว่า ‘parsing data using graphql’ เราจะทำงานใน main dart main dart ไฟล์และค่าที่สำคัญของเราจะถูกเก็บไว้ใน consonents dart consonents dart และเราสามารถใช้มันได้โดยตรงจากที่นั่น เราจะต้องการ graphql flutter graphql flutter เป็นการพึ่งพาเพื่อใช้ graphql ในแอปของเรา “ graphql flutter graphql flutter เป็นไคลเอนต์ graphql ที่ได้รับความนิยมมากที่สุดสำหรับ flutter มันช่วยให้เราใช้ graphql คำถามโดยตรงในโค้ดของเรา มันให้เรา graphqlclient graphqlclient , graphqlprovider graphqlprovider และวิดเจ็ตที่มีประโยชน์อื่นๆ ที่ช่วยให้เราสามารถแยกข้อมูลจากฐานข้อมูลของเราโดยตรงด้วยความช่วยเหลือของ graphql โดยไม่ต้องใช้ streambuilder streambuilder แพ็คเกจนี้มีฟีเจอร์มากมายรวมถึง การสมัครสมาชิก แคชในหน่วยความจำ การซิงค์แคชออฟไลน์ ผลลัพธ์ที่มองโลกในแง่ดี การอัปโหลดไฟล์ graphql คุณสามารถนำเข้ามันได้โดยการเขียนโค้ดต่อไปนี้ใน pubspec yaml pubspec yaml ไฟล์ ดูเพิ่มเติมเกี่ยวกับ graphql flutter graphql flutter ที่ เอกสาร graphql flutter ทุกอย่างถูกติดตั้งไว้ล่วงหน้าแล้ว และคุณสามารถดำเนินการไปยังขั้นตอนถัดไปได้เลยตอนนี้ 2 สร้าง backend ใน back4app หลังจากที่คุณลงทะเบียนที่ back4app https //www back4app com/ เว็บไซต์ คุณสามารถดำเนินการไปยังขั้นตอนถัดไปและสร้างแอปใหม่ คลิกที่ ‘สร้างแอปใหม่’ ตั้งชื่อให้เหมือนกับชื่อโปรเจกต์ของคุณซึ่งที่นี่คือ ‘back4app graphql’ ตอนนี้เลื่อนลงไปที่ การตั้งค่าเซิร์ฟเวอร์ ทางซ้ายและเลือก การตั้งค่า การจัดการการ์ด parse server จากนั้นเลือกตัวเลือก ‘3 10 0 parse server 3 10 0’ จากรายการ ตอนนี้กดปุ่มบันทึกด้านล่างและรอจนกว่าจะบันทึก ตอนนี้กลับมาที่ core (ทางซ้าย) เลือก api console , และเลือก graphql console จากนั้น นี่คือหน้าต่างที่คุณสามารถเขียนและทดสอบโค้ด graphql queries/mutations ของคุณได้ มาต่อไปยังขั้นตอนถัดไปกันเถอะ 3 การสร้างและการดึงข้อมูลผ่าน graphql ตอนนี้ มาทดสอบ graphql api บน back4app โดยใช้ graphql api console กันเถอะ ก่อนอื่นให้วางคำถามต่อไปนี้ในกล่องโค้ดด้านซ้าย 1 mutation createclass { 2 createclass(input { 3 name "language" 4 schemafields { 5 addstrings \[{name "name"}{name "saveformat"}] 6 } 7 }){ 8 class{ 9 schemafields{ 10 name 11 typename 12 } 13 } 14 } 15 } 16 โค้ดด้านบนจะสร้างคลาสชื่อว่า “language” มาทำให้คลาสใหม่นี้มีข้อมูลบางแถวกันเถอะ 1 mutation createobject{ 2 createlanguage(input {fields {name "python", saveformat " py"}}){ 3 language{ 4 name, 5 saveformat 6 } 7 } 8 } หากการดำเนินการของคุณสำเร็จ คุณจะเห็นข้อความนี้ในกล่องโค้ดทางด้านขวาบน graphql playground 1 { 2 "data" { 3 "createlanguage" { 4 "language" { 5 "name" "python", 6 "saveformat" " py" 7 } 8 } 9 } 10 } การเปลี่ยนแปลง (mutations) ใช้เพื่อสร้างหรือทำการเปลี่ยนแปลงในคลาส โดยการรันการเปลี่ยนแปลงข้างต้น เราจะสร้างคลาสใหม่ชื่อ language พร้อมกับฟิลด์ข้อมูล ชื่อ “python” รูปแบบการบันทึก “ py” ทำซ้ำกระบวนการและสร้างวัตถุอีกสองตัวในคลาสเดียวกันสำหรับ ชื่อ “c” และรูปแบบการบันทึก “ c” ชื่อ “java” และรูปแบบการบันทึก “ java” การเปลี่ยนแปลงสำหรับสิ่งนี้จะเป็นดังนี้ 1 mutation createobject{ 2 createlanguage(input {fields {name "c", saveformat " c"}}){ 3 language{ 4 name, 5 saveformat 6 } 7 } 8 } จาวา 1 mutation createobject{ 2 createlanguage(input {fields {name "java", saveformat " java"}}){ 3 language{ 4 name, 5 saveformat 6 } 7 } 8 } ตอนนี้มาดูข้อมูลทั้งหมดในคลาสของเรา languages สำหรับการอ่านข้อมูลเราจะใช้ query ดังนั้นไปข้างหน้าและพิมพ์คำสั่งด้านล่าง 1 query findlanguages{ 2 languages{ 3 count, 4 edges{ 5 node{ 6 name, 7 saveformat 8 } 9 } 10 } 11 } ใน query findlanguage query findlanguage ‘findlanguage’ เป็นเพียงชื่อสำหรับคำสั่ง query ของคุณและคุณสามารถตั้งชื่อมันว่าอะไรก็ได้ เราใช้ find(classname "") find(classname "") คำสั่งเพื่อค้นหาทุกองค์ประกอบของคลาสเฉพาะ count count , คืนค่าจำนวนองค์ประกอบในคลาสและทุกองค์ประกอบจะแสดงอยู่ภายใน result result อ็อบเจ็กต์ คำถามข้างต้นจะส่งคืนสิ่งนี้ 1 { 2 "data" { 3 "languages" { 4 "count" 3, 5 "edges" \[ 6 { 7 "node" { 8 "name" "python", 9 "saveformat" " py" 10 } 11 }, 12 { 13 "node" { 14 "name" "c", 15 "saveformat" " c" 16 } 17 }, 18 { 19 "node" { 20 "name" "java", 21 "saveformat" " java" 22 } 23 } 24 ] 25 } 26 } 27 } คุณสามารถดูคำถามอื่น ๆ ทั้งหมดได้ที่ลิงก์ต่อไปนี้ คำถาม graphql back4app https //blog back4app com/graphql on parse/ ตอนนี้เรามาดำเนินการไปยังขั้นตอนถัดไปกันเถอะ 4 การตั้งค่า graphql ในแอปของเรา มาลงมือเขียนโค้ดแอปของเรากันเถอะ ก่อนหน้านี้คุณต้องทำสิ่งต่าง ๆ ใน lib\consonents dart lib\consonents dart ไฟล์ คัดลอกลิงก์ graphql ที่อยู่ถัดจากปุ่มประวัติที่ด้านบนของหน้าต่าง graphql และวางลงในรูปแบบข้อมูลประเภทสตริง kurl ตอนนี้เลื่อนลงไปที่ด้านล่างของหน้าและคัดลอกโค้ดจาก http headers คัดลอกเฉพาะโค้ดที่อยู่ทางด้านขวาของเครื่องหมายสองจุด( ) และวางลงพร้อมกับชื่อที่เกี่ยวข้องใน lib\consonents dart lib\consonents dart ไฟล์ ไฟล์ควรมีโค้ดดังต่อไปนี้ 1 string kparseapplicationid= "application id copied from headers"; 2 string kparseclientkey = "client key copied from header"; 3 string kurl= "url copied"; 4 // replace "application id copied from headers", "client key copied from header", "url copied" with real keys/ids copied 5 //from http headers tab ตอนนี้ให้ไปที่ main dart main dart ไฟล์และไปที่ myapp stateless widget และเพิ่มโค้ดดังต่อไปนี้เหนือ return return materialapp() materialapp() 1 final httplink httplink = httplink( 2 uri kurl, 3 headers { 4 'x parse application id' kparseapplicationid, 5 'x parse client key' kparseclientkey, 6 }, 7 ); httplink มาจาก flutter graphql dart และรับ widget httplink() พร้อมพารามิเตอร์สองตัว ตัวแรกคือ graphql api url บน back4app ตัวที่สองคือ headers ที่จำเป็นในการตรวจสอบสิทธิ์บน back4app api หลังจากส่วนนี้คุณต้องรวมโค้ด graphql client (อธิบายว่าเป็นอะไร) คัดลอกโค้ดด้านล่างและวางไว้ใต้ส่วน httplink 1 valuenotifier\<graphqlclient> client = valuenotifier( 2 graphqlclient( 3 cache optimisticcache(dataidfromobject typenamedataidfromobject), 4 link httplink, 5 ), 6 ); ตอนนี้เราได้จัดเตรียมลิงก์และวิธีการแคชให้กับ graphqlclient ของเราแล้ว เราได้ทำสิ่งนี้ผ่าน valuenotifier ของเราและตั้งชื่อว่า client มาห่อหุ้ม myhomepage() วิดเจ็ตซึ่งเป็นลูกของ materialapp ด้วย graphqlprovider และส่ง myhomepage() เป็น client ของมัน เพิ่มพารามิเตอร์อีกหนึ่งตัวภายใน graphqlprovider ชื่อว่า client และส่ง client (ชื่อของ valuenotifier ของเรา) เข้าไป นี่คือรูปลักษณ์ของคลาส myapp ของคุณในตอนนี้ 1 class myapp extends statelesswidget { 2 @override 3 widget build(buildcontext context) { 4 final httplink httplink = httplink( 5 uri kurl, 6 headers { 7 'x parse application id' kparseapplicationid, 8 'x parse client key' kparseclientkey, 9 //'x parse rest api key' kparserestapikey, 10 },//getheaders() 11 ); 12 valuenotifier\<graphqlclient> client = valuenotifier( 13 graphqlclient( 14 cache optimisticcache(dataidfromobject typenamedataidfromobject), 15 link httplink, 16 ), 17 ); 18 return materialapp( 19 home graphqlprovider( 20 child myhomepage(), 21 client client, 22 ), 23 ); 24 } 25 } มาทำการเรียก api และดึงข้อมูลกันเถอะ 5 การเรียก api ตอนนี้เราจะทำงานกับ myhomepagestate เราจะเริ่มต้นโดยการกำหนดประเภทข้อมูล string ชื่อว่า ‘query’ และกำหนด/ส่งคำสั่ง query สำหรับการค้นหาข้อมูลทั้งหมดจากคลาส language ของเราไปยังมัน เนื่องจาก query เป็นหลายบรรทัด เราจะส่ง query ในเครื่องหมายคำพูดสามตัว นี่คือรูปลักษณ์ของมัน 1 string query=''' 2 query findlanguages{ 3 languages{ 4 count, 5 edges{ 6 node{ 7 name, 8 saveformat 9 } 10 } 11 } 12 } 13 '''; ตอนนี้ไปที่วิดเจ็ต query() ภายในพารามิเตอร์ body ของ scaffold ซึ่งมีสองคุณสมบัติ ตัวเลือก ผู้สร้าง และจากนั้นส่งค่า null สำหรับทั้งสอง นี่คือวิธีที่วิธีการสร้างของคุณจะมีลักษณะ 1 widget build(buildcontext context) { 2 return safearea( 3 child scaffold( 4 appbar appbar( 5 title text('parsing data using graphql', 6 ), 7 ), 8 body query( 9 options null, 10 builder null 11 ), 12 ),); 13 } วิดเจ็ต query() query() ช่วยให้เราสามารถเขียนคำสั่งค้นหาสำหรับ graphql และจะช่วยให้เราสามารถอ่านและดึงข้อมูลได้ เราจะส่งคำสั่งค้นหาซึ่งเราได้มาเป็นสตริงในตัวเลือกและสร้างวิดเจ็ตด้วยพารามิเตอร์ผู้สร้าง ดังนั้นให้ส่งวิดเจ็ต queryoptions() ในตัวเลือกดังนี้ 1 options queryoptions( 2 documentnode gql(query), 3 ), 4 คำถามถูกส่งผ่านพารามิเตอร์ documentnode ใน queryoptions ตอนนี้เรามาสร้างด้วยความช่วยเหลือของพารามิเตอร์ builder กันเถอะ วิธี builder รับฟังก์ชันที่มีพารามิเตอร์สามตัวคือ queryresult result; refetch refetch; fetchmore fetchmore ตอนนี้เราต้องกังวลเกี่ยวกับ queryresult ซึ่งให้ผลลัพธ์ของคำถามของเราและเราสามารถเข้าถึงข้อมูลผ่าน result data result data ดังนั้นให้เรารหัสตามด้านล่าง 1 builder (queryresult result, { refetch refetch,fetchmore fetchmore,}) 2 { 3 if(result data==null){ 4 return center(child text("loading ",style textstyle(fontsize 20 0),)); 5 }else{ 6 return text('success'); 7 } 8 }, ในโค้ดข้างต้นเรากำลังเข้าถึงข้อมูล หากไม่มีข้อมูลเราจะส่งคืนวิดเจ็ตข้อความที่อ่านว่า ‘กำลังโหลด…’ มิฉะนั้นเราจะส่งคืนวิดเจ็ต text() ที่อ่านว่า ‘สำเร็จ’ นี่คือวิธีที่ myhomepage myhomepage คลาสใน main dart main dart ควรมีลักษณะดังนี้ 1 class myhomepage extends statefulwidget { 2 @override 3 myhomepagestate createstate() => myhomepagestate(); 4 } 5 6 class myhomepagestate extends state\<myhomepage> { 7 string name; 8 string saveformat; 9 string objectid; 10 11 string query = ''' 12 query findlanguages{ 13 languages{ 14 count, 15 edges{ 16 node{ 17 name, 18 saveformat 19 } 20 } 21 } 22 } 23 '''; 24 25 @override 26 widget build(buildcontext context) { 27 return safearea( 28 child scaffold( 29 appbar appbar( 30 title text( 31 'parsing data using graphql', 32 ), 33 ), 34 body query( 35 options queryoptions( 36 documentnode gql(query), 37 ), 38 builder ( 39 queryresult result, { 40 refetch refetch, 41 fetchmore fetchmore, 42 }) { 43 if (result data == null) { 44 return center( 45 child text( 46 "loading ", 47 style textstyle(fontsize 20 0), 48 ), 49 ); 50 } else{ 51 return text('success'); 52 } 53 } 54 ), 55 ), 56 ); 57 } 58 } ตอนนี้ เริ่มแอปและรอไม่กี่วินาทีหลังจากที่มันเริ่มใหม่ หากคุณเห็น ‘success’ บนหน้าจอ แสดงว่า ยินดีด้วย! คุณได้เชื่อมต่อและเรียก api เรียบร้อยแล้ว 6 การดึงและแสดงข้อมูลจาก api แทนที่จะคืนค่า text widget เราจะคืนค่า listview\ builder() widget พร้อมข้อมูลต้นฉบับ เขียนโค้ดต่อไปนี้แทนที่ return text('success') text('success') 1 return listview\ builder( 2 itembuilder (buildcontext context, int index){ 3 return listtile( 4 title text(result data\["languages"]\["edges"]\[index]\["node"]\['name']), 5 trailing text(result data\["languages"]\["edges"]\[index]\["node"]\['saveformat']), 6 ); 7 }, 8 itemcount result data\["languages"]\["edges"] length, 9 ); ตอนนี้ หากคุณมองกลับไปที่หน้าจอผลลัพธ์ graphql ในคอนโซล api ของ back4app ที่เราพิมพ์วิธีการค้นหา ผลลัพธ์เป็นดังนี้ 1 { 2 "data" { 3 "languages" { 4 "count" 3, 5 "edges" \[ 6 { 7 "node" { 8 "name" "python", 9 "saveformat" " py" 10 } 11 }, 12 { 13 "node" { 14 "name" "c", 15 "saveformat" " c" 16 } 17 }, 18 { 19 "node" { 20 "name" "java", 21 "saveformat" " java" 22 } 23 } 24 ] 25 } 26 } 27 } ดังนั้นจากโค้ดข้างต้น ตำแหน่งของ “python” คือ “ข้อมูล” > “ ภาษา” > “นับ” > “ขอบ” > “โหนด” > “ชื่อ” นอกจากนี้โปรดสังเกตว่าชื่ออยู่ภายในวงเล็บสี่เหลี่ยม ‘\[]’ ของขอบซึ่งแสดงว่ามันเป็นองค์ประกอบแรกของรายการ/อาร์เรย์ขอบ ดังนั้นเราจำเป็นต้องเข้าสู่ตำแหน่งนี้เพื่อรับ “python” และเช่นเดียวกันสำหรับทุกอย่าง เมื่อเราพิมพ์ result data result data , เราจะเข้าสู่ “ข้อมูล” ตำแหน่ง ดังนั้นเพื่อให้ตำแหน่งอื่น ๆ เราจึงเพิ่ม \["location name"] \["location name"] เข้าไปด้วย ดังนั้นตำแหน่งของ “python” จะเป็น result data\["languages"]\["edges"]\[0]\["node"]\["name"] result data\["languages"]\["edges"]\[0]\["node"]\["name"] เมื่อใช้ listview listview , มันต้องการสองพารามิเตอร์, itemcount itemcount , มันบอกจำนวนองค์ประกอบในคำขอ api, itembuilder itembuilder , มันต้องการฟังก์ชันที่มีพารามิเตอร์ (buildcontext context, int index) (buildcontext context, int index) และส่งคืนรายการวิดเจ็ตซึ่งเราจะแสดงข้อมูลที่นี่ เราจะใช้ list ของ listtile เพื่อแสดงข้อมูล 1 return listview\ builder( 2 itemcount result data\["languages"]\["edges"] length, 3 itembuilder (buildcontext context, int index){ 4 return listtile( 5 title text(result data\["languages"]\["edges"]\[index]\["node"]\['name']), 6 trailing text(result data\["languages"]\["edges"]\[index]\["node"]\['saveformat']), 7 ); 8 }, 9 10 ); เมื่อเราทดแทน text('success') text('success') ด้วย listview\ builder() วิดเจ็ตข้างต้น เราจะส่ง itemcount ซึ่งเป็นจำนวนขององค์ประกอบในรายการผลลัพธ์ และดังนั้นเราจึงไม่ต้องกังวลเกี่ยวกับเรื่องนั้นอีกต่อไป ใน itembuilder เราจะส่งคืนรายการของ listtiles ซึ่งจะมี "name" "name" ของ "languages" "languages" คลาส และใน "saveformat" "saveformat" ใน trailing สังเกตว่าเราใช้ index แทนหมายเลขใด ๆ หลังจากผลลัพธ์ นี่คือสิ่งที่ itemcount ดูแล นี่คือวิธีที่ main dart main dart ของคุณควรมีลักษณะตอนนี้ 1 import 'package\ flutter/material dart'; 2 import 'package\ graphql flutter/graphql flutter dart'; 3 import 'consonents dart'; 4 import 'dart\ ui'; 5 6 void main() { 7 runapp(myapp()); 8 } 9 10 class myapp extends statelesswidget { 11 @override 12 widget build(buildcontext context) { 13 final httplink httplink = httplink( 14 uri 'https //parseapi back4app com/graphql', 15 headers { 16 'x parse application id' kparseapplicationid, 17 'x parse client key' kparseclientkey, 18 }, //getheaders() 19 ); 20 21 valuenotifier\<graphqlclient> client = valuenotifier( 22 graphqlclient( 23 cache optimisticcache(dataidfromobject typenamedataidfromobject), 24 link httplink, 25 ), 26 ); 27 28 return materialapp( 29 home graphqlprovider( 30 child myhomepage(), 31 client client, 32 ), 33 ); 34 } 35 } 36 37 class myhomepage extends statefulwidget { 38 @override 39 myhomepagestate createstate() => myhomepagestate(); 40 } 41 42 class myhomepagestate extends state\<myhomepage> { 43 string name; 44 string saveformat; 45 string objectid; 46 47 string query = ''' 48 query findlanguages{ 49 languages{ 50 count, 51 edges{ 52 node{ 53 name, 54 saveformat 55 } 56 } 57 } 58 } 59 '''; 60 61 @override 62 widget build(buildcontext context) { 63 return safearea( 64 child scaffold( 65 appbar appbar( 66 title text( 67 'parsing data using graphql', 68 ), 69 ), 70 body query( 71 options queryoptions( 72 documentnode gql(query), 73 ), 74 builder ( 75 queryresult result, { 76 refetch refetch, 77 fetchmore fetchmore, 78 }) { 79 if (result data == null) { 80 return center( 81 child text( 82 "loading ", 83 style textstyle(fontsize 20 0), 84 )); 85 } else { 86 return listview\ builder( 87 itembuilder (buildcontext context, int index) { 88 return listtile( 89 title text(result data\["languages"]\["edges"]\[index]\["node"] 90 \['name']), 91 trailing text(result data\["languages"]\["edges"]\[index] 92 \["node"]\['saveformat']), 93 ); 94 }, 95 itemcount result data\["languages"]\["edges"] length, 96 ); 97 } 98 }, 99 ), 100 ), 101 ); 102 } 103 } และหน้าจอแอปสุดท้ายของเรา บทสรุป ตอนนี้คุณมีแอป flutter ที่เชื่อมต่อกับ graphql api ซึ่งสามารถจัดเก็บและเรียกคืนข้อมูลบน back4app ได้แล้ว เราไม่จำเป็นต้องเข้ารหัสหรือถอดรหัสข้อมูล json แยกต่างหาก ซึ่งทำให้การทำงานของเราง่ายและรวดเร็วขึ้นโดยใช้โค้ดเพียงไม่กี่บรรทัด ขอให้คุณมีวันที่ดี!