การพัฒนา Flutter ด้วย GraphQL บน Back4App สำหรับนักพัฒนาซอฟต์แวร์

flutter graphql บน back4app บทนำ เนื่องจากคุณอยู่ที่นี่เพื่อสำรวจเอกสารของ back4app คุณจึงรู้ว่า back4app เป็น backend ที่ยืดหยุ่นและมีโค้ดน้อย มันช่วยให้คุณโต้ตอบกับ backend ของคุณในหลายวิธีตามที่คุณต้องการ หากคุณต้องการคุณสามารถใช้ rest api หรือคุณสามารถใช้ native sdk https //pub dev/packages/parse server sdk สำหรับ flutter ในชุดบทเรียนนี้เราจะสำรวจการใช้ graphql api ใหม่ที่สวยงามกับ flutter คู่มือนี้เขียนโดย chinmay, a back4app partner https //www back4app com/partners/software development company ที่ hybrowlabs เป้าหมาย รับภาพรวมของ graphql; เข้าใจว่า graphql และ flutter ทำงานร่วมกันอย่างไร; เข้าใจเครื่องมือและไลบรารีของ flutter ที่มีให้สำหรับ graphql; เข้าใจสถาปัตยกรรมทั่วไปและแนวคิดหลักในแอปพลิเคชัน flutter graphql; ข้อกำหนดเบื้องต้น เราต้องการให้ผู้ใช้มีความเข้าใจพื้นฐานเกี่ยวกับ dart และ flutter; แม้ว่าจะไม่จำเป็น แต่ graphql cookbook จะมีประโยชน์ในการทำความเข้าใจ back4app graphql spec graphql คืออะไร graphql เป็นสถาปัตยกรรมทางเลือกสำหรับมาตรฐาน rest api graphql เกิดขึ้นเมื่อทีม facebook กำลังสร้างแอปพลิเคชันพื้นเมืองใหม่จากศูนย์และพวกเขาต้องการปรับแต่งข้อมูลที่ได้รับจากแบ็คเอนด์อย่างมาก ในขณะที่พวกเขากำลังปรับปรุงบริการของพวกเขาเป็นชุดของทรัพยากร พวกเขารู้สึกหงุดหงิดเพราะมันไม่ก้าวหน้าไปไหน พวกเขาถอยกลับและคิดใหม่เกี่ยวกับข้อมูลในฐานะกราฟที่เชื่อมโยงกันของวัตถุแทนที่จะเป็นทรัพยากร rest ที่แยกจากกัน สิ่งนี้ทำให้สถาปัตยกรรมแอปพลิเคชันของพวกเขาแตกต่างออกไปอย่างมาก และนั่นคือวิธีที่ graphql เกิดขึ้น ตั้งแต่ graphql ถูกปล่อยออกมาในปี 2015 มันได้รับความนิยมและเสียงฮือฮาอย่างมากและถูกนำไปใช้ในทีมต่างๆ เช่น twitter, airbnb, atlassian, github ทำไมต้อง graphql? ที่ hybrowlabs, back4app partner https //www back4app com/partners/software development company , เราสร้างแอปพลิเคชันเว็บและมือถือที่ทันสมัยและมีข้อมูลหนาแน่น เราเลือก back4app เป็นบริการแบ็คเอนด์ที่เราชื่นชอบเพราะความสะดวกในการใช้งาน การปรับแต่ง และฟีเจอร์การกำหนดสคีมาที่มีให้บนฐานข้อมูลที่ยอดเยี่ยมอยู่แล้ว ส่วนใหญ่แล้วแอปพลิเคชันที่เราวิศวกรรมข้อมูลที่แสดงหรือจัดการไม่ได้มาจากคลาส back4app เพียงคลาสเดียว แต่ข้อมูลนี้มาจากหลายคลาส การรวมกันของ back4app graphql ทำให้เราจัดการกับสถานการณ์เช่นนี้ได้ง่ายมาก ในขณะเดียวกันมันช่วยให้เราลดการใช้เครือข่ายลงเหลือ 2 3 การเรียกต่อการโหลดหน้าจอ โดยนำข้อมูลที่เราต้องการมาเท่านั้น ในทางกลับกันโค้ดคลาวด์ที่เรากำหนดจะถูกบันทึกเอกสารได้ง่ายเพราะธรรมชาติที่มีการกำหนดประเภทอย่างเข้มงวดของ graphql สิ่งนี้ทำให้โค้ดของเราบำรุงรักษาได้และเข้าใจง่าย tldr; นี่คือข้อดีของการใช้ graphql การใช้เครือข่ายลดลง การค้นหาที่มีประสิทธิภาพและการจัดกลุ่มการค้นหา การจัดการโค้ดที่ดีกว่า ธรรมชาติที่มีการกำหนดประเภทอย่างเข้มงวดนำมาซึ่งความคาดเดาได้ flutter และ back4app graphql มันมักจะยากมากที่จะออกแบบโซลูชัน graphql backend ที่รวมความยืดหยุ่นของฐานข้อมูล nosql ในขณะที่รักษาโครงสร้างและการจัดระเบียบที่จัดเตรียมโดยการมีประเภทและโครงสร้างสคีมาของ graphql back4app มีการออกแบบที่มีโครงสร้างตามสคีมามาตลอด และตอนนี้ graphql ได้ยกระดับไปอีกขั้นโดยการสร้าง api ที่รู้ความหมายของระบบประเภท ในทางกลับกัน ตามที่เราทราบ dart (ซึ่งเป็นพื้นฐานของ flutter) เป็นภาษาที่มีการกำหนดประเภทอย่างเข้มงวด ใช่ dart มีความเฉพาะเจาะจงในเรื่องความปลอดภัยของประเภท ด้วย graphql เรามีสคีมาที่สามารถนำกลับมาใช้ใหม่ได้ในฝั่งไคลเอนต์ สิ่งนี้ทำให้ชีวิตง่ายขึ้นมาก นอกจากนี้ การรู้จักสคีมาประเภทที่สามารถดึงข้อมูลในอนาคตได้จริงช่วยได้มาก เพราะมันช่วยให้เราสามารถนำไปใช้ในการแคชขั้นสูงและอัลกอริธึมการทำให้คำถามไม่ถูกต้องบนข้อมูลนี้ได้ เครื่องมือ flutter สำหรับ back4app graphql ในการโต้ตอบกับ api graphql ของเรา เราจะใช้ไลบรารีที่ยอดเยี่ยม graphql flutter https //github com/zino app/graphql flutter ดังนั้นมาทำความเข้าใจฟีเจอร์ที่ไลบรารีนี้มีให้ สนับสนุนการสอบถามและการเปลี่ยนแปลง สคีมาทั้งหมดที่กำหนดไว้ในแดชบอร์ด back4app จะถูกแปลงโดยตรงเป็นจุดสิ้นสุด graphql ของ back4app และมีให้ใช้งานทั้งในรูปแบบการสอบถามหรือการเปลี่ยนแปลง การสอบถามช่วยให้เราสามารถดึงข้อมูลที่ซ้อนกันจากหลายคลาสในการเรียก api เดียว การสอบถามทำขึ้นเพื่อวัตถุประสงค์ในการดึงข้อมูล และจะถูกแคชโดย back4app graphql ช่วยให้มีวิธีการสอบถามที่หลากหลาย สนับสนุนการระบุตำแหน่งทางภูมิศาสตร์ เวลา regex และฟีเจอร์การค้นหาข้อความเต็ม การเปลี่ยนแปลงช่วยให้เราสามารถทำการเรียก api ที่สามารถอัปเดตหลายรายการในคลาส การเปลี่ยนแปลงประกอบด้วยการสร้าง แก้ไข และลบข้อมูลเป็นหลัก ต่อไปนี้คือคลาส programinglanguage ที่ฉันได้สร้างขึ้นใน back4app เมื่อคุณนำทางไปยังส่วน graphql ของ api สำหรับ back4app คุณจะเห็นคอนโซลที่แสดงไว้ก่อนหน้านี้ของ back4app คอนโซลนี้จะมีการเปลี่ยนแปลงและการค้นหาทั้งหมดที่สร้างขึ้นโดยอัตโนมัติ! เมื่อฉันไปที่ส่วน graphql ของ api สำหรับ back4app เราจะเห็นคอนโซลที่แสดงไว้ก่อนหน้านี้ของ back4app คอนโซลนี้จะมีการเปลี่ยนแปลงและการค้นหาทั้งหมดที่สร้างขึ้นโดยอัตโนมัติ! ในภาพด้านบน ฉันได้ใช้ back4app graphql สำหรับการแสดงรายการภาษาทั้งหมดของฉันจากคลาส programminglanguage ในทำนองเดียวกันเราสามารถสร้างรายการในคลาส programminglanguage ของ back4app โดยใช้การเปลี่ยนแปลง การค้นหาคิว 1 query( 2 query( 3 options queryoptions( 4 document get all programming languages, // this is the query string you just created 5 pollinterval 10, //setting up polling 6 ), 7 builder (queryresult result) { 8 if (result errors != null) { 9 return text(result errors tostring()); 10 } 11 12 if (result loading) { 13 return text('loading'); 14 } 15 16 // it can be either map or list 17 list programminglanguages = result data\['programminglanguages']; 18 19 return listview\ builder( 20 itemcount programminglanguages length, 21 itembuilder (context, index) { 22 final repository = programminglanguages\[index]; 23 return text(programminglanguages\['name']); 24 }); 25 }, 26 ); ในบางกรณีการใช้งาน ซึ่งการสมัครสมาชิกอาจจะมากเกินไป เราจำเป็นต้องรีเฟรชข้อมูลเป็นระยะ ๆ เราสามารถใช้ฟีเจอร์การตรวจสอบคำถามของไคลเอนต์ได้ สิ่งนี้ช่วยให้เราสามารถดึงข้อมูลล่าสุดในลักษณะเป็นระยะได้ ตัวอย่างเช่น เราสามารถทำการดึงข้อมูลในพื้นหลังทุก 1 นาที แคชในหน่วยความจำ 1 static future\<queryresult> callquery( 2 {dynamic documentnode, dynamic variables, fetchpolicy fetchpolicy}) { 3 return singleton client query( 4 queryoptions( 5 context singleton context, 6 documentnode documentnode, 7 variables variables, 8 fetchpolicy fetchpolicy ?? fetchpolicy cacheandnetwork, 9 ), 10 ); 11 } ไคลเอนต์ flutter graphql ใช้วิธีการต่างๆ ในการแคชข้อมูล ซึ่งได้แก่ แคชขณะตรวจสอบความถูกต้อง มาพิจารณาตัวอย่างง่ายๆ ของการดึงข้อมูลรายการบทความ เราต้องการให้ข้อมูลรายการถูกแคชเมื่อเราย้ายจากรายการไปยังบทความเฉพาะและกลับมา วิธีการแคชขณะตรวจสอบความถูกต้องจะดำเนินการวิธีการนี้ในการสอบถามข้อมูล ซึ่งหมายความว่าแม้ว่าจะมีการเรียก api เพื่อดึงข้อมูล แต่ข้อมูลเก่าจะถูกใช้เพื่อแสดงในขณะที่กำลังดึงข้อมูลใหม่ เมื่อข้อมูลใหม่พร้อมใช้งานแล้ว ข้อมูลนั้นจะแสดง แคชเท่านั้น ในวิธีนี้ จะมีการเรียกเครือข่ายเฉพาะเมื่อไม่มีข้อมูลในอุปกรณ์ของเรา วิธีนี้มีประโยชน์เมื่อใช้ร่วมกับฟังก์ชันการซิงค์ออฟไลน์สำหรับจุดข้อมูลที่ไม่เปลี่ยนแปลง ซึ่งช่วยเพิ่มประสิทธิภาพเครือข่ายและประหยัดทรัพยากร เครือข่ายเท่านั้น ในกรณีที่หายากเมื่อคุณไม่ต้องการเก็บแคชข้อมูล คุณสามารถใช้โหมดเครือข่ายเท่านั้นของไลบรารี flutter graphql การซิงค์แคชออฟไลน์ ประสบการณ์การใช้งานบนมือถือคาดหวังว่าจะสามารถใช้งานแบบออฟไลน์ได้โดยค่าเริ่มต้น การทำเช่นนี้ด้วย flutter และ rest api เป็นเรื่องที่ยุ่งยากมาก คุณต้องเก็บข้อมูลลงในฐานข้อมูล sqlite ตรวจสอบว่าข้อมูลมีอยู่หรือไม่ เขียนคำสั่ง sql เพื่อดึงข้อมูล และยังต้องทำการเรียกเครือข่ายเพื่ออัปเดตข้อมูลด้วย นั่นคือการทำงานมากมาย ซึ่งสามารถข้ามไปได้ทั้งหมดด้วยการใช้ปลั๊กอินนี้และการสนับสนุนออฟไลน์สำหรับ queries ที่ถูกบรรจุไว้ในแอปพลิเคชัน flutter ของเรา การจัดเก็บไฟล์ 1 mutation($files \[upload!]!) { 2 multipleupload(files $files) { 3 id 4 filename 5 mimetype 6 path 7 } 8 } 9 10 import 'package\ http/http dart'; 11 12 // 13 14 string filepath = '/aboslute/path/to/file ext'; 15 final file = await multipartfilefrom(file(filepath)); 16 17 final queryresult r = await graphqlclientclient mutate( 18 mutationoptions( 19 documentnode gql(uploadmutation), 20 variables { 21 'files' \[file], 22 }, 23 ) 24 );gr หลายไลบรารีเซิร์ฟเวอร์ graphql ไม่สนับสนุนฟังก์ชันการอัปโหลดไฟล์โดยใช้คำสั่ง graphql สำหรับการอัปโหลดไฟล์เราต้องเรียกจุดสิ้นสุด rest แยกต่างหาก อัปโหลดไฟล์ รับ url แล้วส่งไปยัง api graphql ในรูปแบบของสตริง นอกจากนี้เรายังต้องดูแลข้อมูลเมตาของไฟล์ด้วยตนเอง เช่น ชื่อไฟล์ เป็นต้น back4app มีการสนับสนุนมาตรฐานการอัปโหลดไฟล์ที่บรรจุไว้ใน back4app graphql api เมื่อไฟล์ถูกอัปโหลด มันจะถูกอัปโหลดเป็นประเภท file ของ graphql ซึ่งตรงกับ file ของ back4app ใน graphql โดยอัตโนมัติ เราได้เก็บไฟล์ไว้ในที่จัดเก็บไฟล์ back4app ที่สามารถปรับขนาดได้สูงซึ่งรองรับโดย aws s3 ผลลัพธ์ที่มองโลกในแง่ดี 1 flutterwidget( 2 ontap () { 3 togglestar( 4 { 'starrableid' repository\['id'] }, 5 optimisticresult { 6 'action' { 7 'starrable' {'viewerhasstarred' !starred} 8 } 9 }, 10 ); 11 }, 12 ) ผู้ใช้คาดหวัง ui ที่มีส่วนร่วมอย่างมาก และการตอบสนองทันที ui ที่มีความหวังเป็นหลักการ ui/ux ซึ่งโดยพื้นฐานแล้วบอกว่าเราควรไม่รอให้การกระทำเสร็จสิ้น แต่แทนที่จะทำเช่นนั้น เราจะแสดงผลตอบรับให้ผู้ใช้เห็นว่าเราได้ทำการกระทำเสร็จสิ้นแล้ว! สิ่งนี้ทำภายใต้สมมติฐานว่าการกระทำจะประสบความสำเร็จ 99% ของเวลา หากการกระทำล้มเหลวอย่างโชคร้าย เราจะแสดงข้อความความล้มเหลวว่าเราไม่สามารถทำการกระทำให้เสร็จสิ้นได้ flutter graphql มาพร้อมกับการสนับสนุนที่ฝังอยู่สำหรับการกำหนดการเปลี่ยนแปลงที่มีความหวัง ซึ่งทำให้การนำระบบการโต้ตอบ ui ที่ซับซ้อนนี้ไปใช้ได้ง่ายขึ้นมาก ดังนั้นด้วยสิ่งนี้ เราจึงมีฐานที่ได้รับการปรับแต่งอย่างดีสำหรับการสร้างแอปพลิเคชันในยุคปัจจุบัน บทสรุป ในคู่มือนี้เราได้แนะนำข้อดีที่สำคัญบางประการของการใช้ graphql ในโครงการ flutter ของคุณบน back4app ในคู่มือถัดไปเราจะเริ่มลงมือเขียนโค้ดและเริ่มต้นด้วยการตั้งค่า flutter graphql client ของเราเพื่อใช้ api ของ back4app