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

การนำฐานข้อมูลแบบออฟไลน์มาใช้โดยใช้ graphql api บทนำ เนื่องจากคุณอยู่ที่นี่ คุณต้องได้ผ่านการเรียนรู้บทเรียนอื่น ๆ และคุ้นเคยกับการดำเนินการคำสั่งและการเปลี่ยนแปลง graphql เพื่อดึงข้อมูลและปรับเปลี่ยนข้อมูล ในเอกสารนี้เราจะสำรวจวิธีการสร้างส่วนติดต่อผู้ใช้แบบออฟไลน์ด้วย flutter และ graphql เป้าหมาย เข้าใจสถาปัตยกรรมภายในของไคลเอนต์ graphql ออฟไลน์ของ flutter อนุญาตให้แอปพลิเคชันทำการค้นหาข้อมูล graphql แม้ว่าแอปพลิเคชันจะออฟไลน์ นำการเก็บข้อมูลออฟไลน์มาใช้ ข้อกำหนดเบื้องต้น เราต้องการให้ผู้ใช้มีความเข้าใจพื้นฐานเกี่ยวกับ dart และ flutter แม้ว่าจะไม่จำเป็น แต่ตำรา graphql จะมีประโยชน์ในการเข้าใจบางส่วนของ https //www back4app com/docs/parse graphql/graphql getting started เราต้องการให้คุณได้ทำหัวข้อเบื้องต้น https //www back4app com/docs/flutter/graphql/flutter graphql setup และมีการตั้งค่ารหัสและการใช้งาน backend ของ back4app ที่ผ่านมา 1 การตั้งค่าความจำออฟไลน์ ไคลเอนต์ flutter graphql รองรับ “คำสั่งออฟไลน์” โดยค่าเริ่มต้น นั่นคือมันจะไม่โยนข้อผิดพลาดหากเราทำการค้นหาข้อมูล graphql เมื่อออฟไลน์และจะดึงข้อมูลจากแคช เราต้องสังเกตว่านี่แตกต่างจากการเก็บแคชข้ามเซสชันของแอป และโดยเฉพาะไคลเอนต์ flutter graphql ไม่มีการเก็บแคชถาวรลงดิสก์ ดังนั้นหากแอปปิดจากถาดระบบและเปิดใหม่ ข้อมูลยังคงต้องถูกดึงมาใหม่ เพื่อเปิดใช้งานสิ่งเดียวกัน เราต้องเปิดใช้งานแคชออฟไลน์ ไปที่ https //github com/templates back4app/flutter graphql/blob/772c058c74d870798af1cce7a29a5046f9dda456/lib/main dart#l32 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, ฯลฯ) ซึ่งช่วยให้สามารถเก็บข้อมูลออฟไลน์ได้ในลักษณะที่ง่ายมาก ในการติดตั้งไลบรารีโปรดเพิ่มใน https //github com/templates back4app/flutter graphql/blob/772c058c74d870798af1cce7a29a5046f9dda456/pubspec yaml#l34 ไฟล์ shared preferences ^ 0 5 12 + 4 ใน https //github com/templates back4app/flutter graphql/blob/772c058c74d870798af1cce7a29a5046f9dda456/lib/main dart#l142 เพิ่มสิ่งต่อไปนี้ 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/ เราจะคัดลอกโค้ดที่สร้างขึ้นและสร้างไฟล์ programing languages model dart 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