การพัฒนาฐานข้อมูลออฟไลน์ใน Flutter ด้วย GraphQL

การนำฐานข้อมูลแบบออฟไลน์มาใช้โดยใช้ graphql api บทนำ เนื่องจากคุณอยู่ที่นี่ คุณต้องได้ผ่านการเรียนรู้บทเรียนอื่น ๆ และคุ้นเคยกับการดำเนินการคำสั่งและการเปลี่ยนแปลง graphql เพื่อดึงข้อมูลและปรับเปลี่ยนข้อมูล ในเอกสารนี้เราจะสำรวจวิธีการสร้างส่วนติดต่อผู้ใช้แบบออฟไลน์ด้วย flutter และ graphql เป้าหมาย เข้าใจสถาปัตยกรรมภายในของไคลเอนต์ graphql ออฟไลน์ของ flutter อนุญาตให้แอปพลิเคชันทำการค้นหาข้อมูล graphql แม้ว่าแอปพลิเคชันจะออฟไลน์ นำการเก็บข้อมูลออฟไลน์มาใช้ ข้อกำหนดเบื้องต้น เราต้องการให้ผู้ใช้มีความเข้าใจพื้นฐานเกี่ยวกับ dart และ flutter แม้ว่าจะไม่จำเป็น แต่ตำรา graphql จะมีประโยชน์ในการเข้าใจบางส่วนของ แนวคิด graphql เราต้องการให้คุณได้ทำหัวข้อเบื้องต้น การตั้งค่า flutter graphql และมีการตั้งค่ารหัสและการใช้งาน backend ของ back4app ที่ผ่านมา 1 การตั้งค่าความจำออฟไลน์ ไคลเอนต์ flutter graphql รองรับ “คำสั่งออฟไลน์” โดยค่าเริ่มต้น นั่นคือมันจะไม่โยนข้อผิดพลาดหากเราทำการค้นหาข้อมูล graphql เมื่อออฟไลน์และจะดึงข้อมูลจากแคช เราต้องสังเกตว่านี่แตกต่างจากการเก็บแคชข้ามเซสชันของแอป และโดยเฉพาะไคลเอนต์ flutter graphql ไม่มีการเก็บแคชถาวรลงดิสก์ ดังนั้นหากแอปปิดจากถาดระบบและเปิดใหม่ ข้อมูลยังคงต้องถูกดึงมาใหม่ เพื่อเปิดใช้งานสิ่งเดียวกัน เราต้องเปิดใช้งานแคชออฟไลน์ ไปที่ main dart 1 return materialapp( 2 home graphqlprovider( 3 child cacheprovider( // cache provider widget that provides the offline queries support 4 child myhomepage(), 5 ), 6 client client, 7 ), 8 ); 2 การตั้งค่าการเก็บข้อมูลที่จัดเก็บ ข้อควรระวังในการใช้ไคลเอนต์ flutter graphql คือมันไม่เก็บแคชใด ๆ ของมันเองเมื่อแอปพลิเคชันถูกปิด และมันก็ไม่เติมแคชเมื่อแอปพลิเคชันถูกเปิดอีกครั้ง ในการดำเนินการสิ่งเดียวกัน เราจะใช้ไลบรารี flutter shared preferences ซึ่งห่อหุ้มการจัดเก็บข้อมูลถาวรเฉพาะแพลตฟอร์มสำหรับข้อมูลที่ง่าย (nsuserdefaults บน ios และ macos, sharedpreferences บน android, ฯลฯ) ซึ่งช่วยให้สามารถเก็บข้อมูลออฟไลน์ได้ในลักษณะที่ง่ายมาก ในการติดตั้งไลบรารีโปรดเพิ่มใน pubspec yml https //github com/templates back4app/flutter graphql/blob/772c058c74d870798af1cce7a29a5046f9dda456/pubspec yaml#l34 ไฟล์ ใน main dart เพิ่มสิ่งต่อไปนี้ 1 import 'package\ shared preferences/shared preferences dart'; 2 3 class sharedpreferenceshelper { 4 static final string offline cache key = 'programminglanguagelistresponse'; 5 6 static future\<programminglanguagelist> getcache() async { 7 final sharedpreferences prefs = await sharedpreferences getinstance(); 8 final cache = prefs getstring( offline cache key); 9 final offlinedata = 10 cache != null ? programminglanguagelistfromjson(cache) null; 11 12 return offlinedata; 13 } 14 15 static future\<bool> setcache(dynamic value) async { 16 final sharedpreferences prefs = await sharedpreferences getinstance(); 17 18 return prefs setstring( offline cache key, jsonencode(value)); 19 } 20 } ไลบรารี shared preferences จะเก็บข้อมูลในรูปแบบคีย์ ค่า โดยที่ค่าจะถูกแปลงเป็นสตริง json เราจะต้องทำการแปลงข้อมูลนี้ไปยังโมเดลข้อมูลของเรา 3 การแปลงข้อมูลที่เก็บไว้ในเครื่อง เราจะสร้างไฟล์ใหม่ชื่อ programing languages model dart programing languages model dart ซึ่งจะเก็บตรรกะการแปลง เราจะสร้างตรรกะนี้โดยการวางการตอบสนอง graphql ของเราในตัวแปลง json เป็น dart ที่ https //app quicktype io/ https //app quicktype io/ เราจะคัดลอกโค้ดที่สร้างขึ้นและสร้างไฟล์ programing languages model dart programing languages model dart https //github com/templates back4app/flutter graphql/blob/flutter graphql offline/lib/programing languages model dart https //github com/templates back4app/flutter graphql/blob/flutter graphql offline/lib/programing languages model dart 4 การรวมตรรกะการจัดเก็บข้อมูลออฟไลน์ หากข้อมูลไม่มีอยู่ เราจะใช้ข้อมูลจากการตั้งค่าที่แชร์ หากข้อมูลก็ไม่มีในการตั้งค่าที่แชร์ เราจะแสดงไอคอนการโหลด เราจะดำเนินการเปลี่ยนแปลงเพื่อรวมการเปลี่ยนแปลงทั้งหมดเข้าด้วยกัน ในวิธีการสร้างของเรา myhomepagestate myhomepagestate เราจะเปลี่ยนวิธีการสร้างของเรา เราจะใช้ futurebuilder futurebuilder วิดเจ็ตเพื่อใช้ข้อมูลจากคลาส sharedpreferenceshelper 1 return futurebuilder\<programminglanguagelist>( 2 future sharedpreferenceshelper getcache(), 3 builder (prefs, snapshot) { 4 final offlinedata = snapshot data; 5 if (!snapshot haserror) { 6 return safearea( 7 … การใช้วิดเจ็ต futurebuilder ช่วยให้เราสามารถเขียนโค้ดได้โดยไม่ต้องใช้สถานะ มันเป็นกระบวนการที่ค่อนข้างรวดเร็วในการดึงข้อมูลจากการตั้งค่าที่แชร์ เราสามารถแสดงตัวโหลดในขณะที่เรากำลังเริ่มต้นการตั้งค่าที่แชร์และดึงข้อมูลจากร้านค้าออฟไลน์ได้ ตอนนี้เราจะใช้วัตถุข้อมูลออฟไลน์นี้และเรนเดอร์ในขณะที่ข้อมูลจาก graphql ไม่พร้อมใช้งาน เราจะปรับโค้ดเล็กน้อย โค้ดต่อไปนี้จะเป็นโค้ดของเราสำหรับ query query https //github com/templates back4app/flutter graphql/blob/flutter graphql offline/lib/main dart วิดเจ็ต 1 body query( 2 options queryoptions( 3 documentnode gql(query), 4 ), 5 builder ( 6 queryresult result, { 7 refetch refetch, 8 fetchmore fetchmore, 9 }) { 10 final data = result data == null 11 ? offlinedata 12 programminglanguagelistfromjson( 13 jsonencode(result data)); 14 if (data == null) { 15 return center( 16 child text( 17 "loading ", 18 style textstyle(fontsize 20 0), 19 )); 20 } else { 21 sharedpreferenceshelper setcache(data); 22 return listview\ builder( 23 itembuilder (buildcontext context, int index) { 24 if (index == 0) { 25 return center( 26 child raisedbutton( 27 onpressed refetch, 28 child result loading == true 29 ? text("loading ") 30 text("refetch"), 31 ), 32 ); 33 } 34 return listtile( 35 title text(data programminglanguages 36 edges\[index 1] node name), 37 trailing text(data programminglanguages 38 edges\[index 1] node stronglytyped 39 ? "strongly typed" 40 "weekly typed"), 41 ); 42 }, 43 itemcount data programminglanguages edges length + 1, 44 ); 45 } 46 }, 47 ), 48 ), เราควรได้รับสิ่งต่อไปนี้ บทสรุป เราสามารถมั่นใจได้ว่าประสบการณ์การใช้งานบนมือถือที่ดีมากโดยการเก็บข้อมูลแบบออฟไลน์และตรวจสอบข้อมูลอีกครั้งเมื่อแอปพลิเคชันเชื่อมต่อกับอินเทอร์เน็ต นอกจากนี้ หนึ่งในแง่มุมที่สำคัญที่ช่วยเพิ่มประสบการณ์ผู้ใช้คือไคลเอนต์ flutter graphql จะเก็บข้อมูลการตอบกลับเก่าไว้และในขณะที่ส่งคำขอใหม่โดยอัตโนมัติ ซึ่งทำให้เราไม่ต้องแสดงหน้าจอโหลดที่ยุ่งเหยิงในขณะที่ดึงข้อมูลใหม่ โค้ดสำหรับบทความนี้สามารถดูได้ที่ https //github com/templates back4app/flutter graphql/tree/flutter graphql offline https //github com/templates back4app/flutter graphql/tree/flutter graphql offline