Implementasi Database Offline di Flutter dengan GraphQL

mengimplementasikan basis data offline pertama menggunakan api graphql pendahuluan karena anda berada di sini, anda pasti telah melalui tutorial lainnya dan sudah familiar dengan menjalankan kueri dan mutasi graphql untuk mengambil dan memodifikasi data dalam dokumen ini, kita akan menjelajahi bagaimana cara mengimplementasikan antarmuka pengguna offline pertama dengan flutter dan graphql tujuan memahami arsitektur internal klien graphql offline flutter memungkinkan aplikasi untuk menjalankan kueri graphql meskipun aplikasi offline mengimplementasikan persistensi data offline prasyarat kami memerlukan agar pengguna memiliki pemahaman dasar tentang dart dan flutter meskipun tidak diperlukan, buku masak graphql akan berguna dalam memahami beberapa konsep graphql kami memerlukan agar anda telah menyelesaikan topik prasyarat pengaturan graphql flutter dan memiliki pengaturan kode sebelumnya serta backend back4app yang diimplementasikan 1 menyiapkan cache offline klien flutter graphql mendukung “kueri offline” secara default, yaitu tidak akan melemparkan kesalahan jika kita mengkueri beberapa data graphql saat offline dan akan mengambil data dari cache kita harus mencatat bahwa ini berbeda dari mempertahankan cache di antara sesi aplikasi dan khususnya klien flutter graphql tidak memiliki ketahanan cache ke disk jadi jika aplikasi ditutup dari sistem tray dan dibuka kembali, data masih perlu diambil untuk mengaktifkan hal yang sama, kita harus mengaktifkan cache offline pergi ke 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 mengatur preferensi yang disimpan satu catatan saat menggunakan klien flutter graphql adalah bahwa ia tidak menyimpan cache miliknya sendiri ketika aplikasi ditutup, juga tidak menghidrasi cache ketika aplikasi dibuka kembali untuk menerapkan hal yang sama, kita akan memanfaatkan pustaka flutter shared preferences ini membungkus penyimpanan persisten spesifik platform untuk data sederhana (nsuserdefaults di ios dan macos, sharedpreferences di android, dll ), pada dasarnya memungkinkan untuk menyimpan data secara offline dengan cara yang sangat sederhana untuk menginstal pustaka, silakan tambahkan di pubspec yml https //github com/templates back4app/flutter graphql/blob/772c058c74d870798af1cce7a29a5046f9dda456/pubspec yaml#l34 file di main dart tambahkan yang berikut 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 } perpustakaan shared preferences menyimpan data dalam bentuk kunci nilai di mana nilai diubah menjadi string json kita perlu mengurai data ini ke model data kita 3 mengurai data yang disimpan secara lokal kita akan membuat file baru bernama programing languages model dart programing languages model dart yang akan menyimpan logika penguraian kita akan menghasilkan logika ini dengan menempelkan respons graphql kita di konverter model json ke dart di https //app quicktype io/ https //app quicktype io/ kami akan menyalin kode yang dihasilkan dan membuat file 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 mengintegrasikan logika penyimpanan offline jika data tidak ada, kami akan menggunakan data dari preferensi bersama jika data juga tidak ada di preferensi bersama, kami akan menampilkan ikon pemuatan kami sekarang akan menerapkan perubahan untuk mengintegrasikan semua perubahan bersama sama, di metode build dari myhomepagestate myhomepagestate kami akan mengubah metode build kami kami akan menggunakan futurebuilder futurebuilder widget untuk mengkonsumsi data dari kelas 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 … menggunakan widget futurebuilder memungkinkan kita untuk menulis kode tanpa harus menggunakan state ini adalah proses yang relatif cepat untuk mendapatkan data dari shared preferences kita juga bisa menampilkan loader saat kita menginisialisasi shared preferences dan mendapatkan data dari penyimpanan offline sekarang kita menggunakan objek data offline ini dan merender saat data dari graphql tidak tersedia kita juga akan merombak kode sedikit berikut adalah kode kita untuk query query https //github com/templates back4app/flutter graphql/blob/flutter graphql offline/lib/main dart widget 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 ), kita seharusnya mendapatkan yang berikut kesimpulan kami sekarang dapat memastikan pengalaman mobile yang sangat baik dengan menyimpan data secara offline dan memvalidasi ulang data ketika aplikasi terhubung ke internet juga, satu aspek penting yang meningkatkan pengalaman pengguna adalah bahwa klien flutter graphql menyimpan cache respons lama dan saat mengirim permintaan baru secara otomatis karena itu, kami tidak perlu terus menerus menampilkan layar pemuatan yang canggung, saat mengambil data kembali kode untuk artikel ini tersedia di https //github com/templates back4app/flutter graphql/tree/flutter graphql offline https //github com/templates back4app/flutter graphql/tree/flutter graphql offline