Download Proyek Flutter dengan GraphQL dan Back4App

unduh proyek flutter graphql dengan kode sumber dan mulai menggunakan back4app pendahuluan dalam tutorial ini, kita akan membangun aplikasi yang akan mem parsing data dari backend back4app melalui graphql seperti yang mungkin anda ketahui, graphql adalah bahasa kueri dan manipulasi data sumber terbuka untuk api, dan runtime untuk memenuhi kueri dengan data yang ada back4app adalah backend sebagai layanan dengan kode rendah (berbasis pada open source parse platform) yang membantu pengembang membangun aplikasi mobile dan web yang dapat diperluas dan skalabel dengan cepat tujuan tujuan utama adalah untuk membangun aplikasi sederhana yang akan menampilkan daftar bahasa pemrograman dan format tipe simpanannya di akhir artikel ini, kami berharap anda akan dapat melakukan panggilan api di back4app menggunakan graphql; mengambil data dari api graphql; mengambil data di aplikasi flutter anda prasyarat untuk menyelesaikan tutorial ini, anda akan membutuhkan sebuah ide untuk menulis kode flutter seperti android studio atau flutter namun, kami akan menggunakan android studio untuk tutorial ini akun back4app yang dapat dibuat di sini back4app graphql flutter https //pub dev/packages/graphql flutter 1 kloning proyek dari github ke android studio pergi ke repo github https //github com/templates back4app/flutter graphql , dan unduh file zip, ekstrak, dan buka di ide flutter anda untuk menyelesaikan langkah ini, seret folder di dalam file zip ke desktop anda, buka android studio dan kemudian klik pada buka proyek android studio yang ada direktori proyek biasanya akan menjadi ‘ c \users\username\desktop\back4app graphql starting code ’ tapi ini mungkin berbeda untuk pengguna yang berbeda buka proyek dan pergi ke file lib\main dart lib\main dart anda akan melihat banyak kesalahan di sana, jangan khawatir, cukup tekan semua ‘ dapatkan ketergantungan ’ dan semua kesalahan akan hilang jika tidak, maka cukup tekan ‘ perbarui ketergantungan ’ kode di main dart main dart anda harus terlihat seperti ini 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 } jika anda membuka jalankan aplikasi sekarang, anda hanya akan melihat layar kosong di emulator/perangkat anda dengan hanya appbar yang berjudul ‘parsing data menggunakan graphql’ kita akan bekerja pada main dart main dart file dan nilai penting kita disimpan di consonents dart consonents dart dan kita dapat menggunakannya langsung dari sana kita akan memerlukan graphql flutter graphql flutter ketergantungan untuk menggunakan graphql di aplikasi kita the graphql flutter graphql flutter adalah klien graphql paling populer untuk flutter ini membantu kita untuk menggunakan graphql kueri langsung di kode kita ini menyediakan kita dengan graphqlclient graphqlclient , graphqlprovider graphqlprovider dan banyak widget berguna lainnya yang membantu kita untuk mengurai data dari database kita langsung dengan bantuan graphql tanpa bahkan menggunakan streambuilder streambuilder paket ini menyediakan kita dengan banyak fitur termasuk langganan cache dalam memori sinkronisasi cache offline hasil optimis unggahan file graphql anda dapat mengimpornya dengan menulis kode berikut di pubspec yaml pubspec yaml file lihat lebih lanjut tentang graphql flutter graphql flutter di dokumentasi graphql flutter semua dependensi sudah terpasang sebelumnya dan anda bisa melanjutkan ke langkah berikutnya sekarang 2 membuat backend di back4app setelah anda mendaftar di back4app https //www back4app com/ situs web, anda dapat melanjutkan ke langkah berikutnya dan membuat aplikasi baru klik pada ‘bangun aplikasi baru’ beri nama yang sama dengan nama proyek anda yang di sini adalah ‘back4app graphql’ sekarang gulir ke bawah ke pengaturan server di sebelah kiri dan pilih pengaturan kelola kartu parse server, lalu pilih opsi ‘3 10 0 parse server 3 10 0’ dari daftar sekarang tekan tombol simpan di bawah dan tunggu sampai tersimpan sekarang kembali ke inti (di sebelah kiri), pilih konsol api , dan pilih konsol graphql dari situ ini adalah jendela di mana anda dapat menulis dan menguji kode kueri/mutasi graphql anda mari kita lanjutkan ke langkah berikutnya 3 membuat dan mendapatkan data melalui graphql sekarang, mari kita uji api graphql di back4app menggunakan konsol api graphql pertama, tempelkan kueri berikut di kotak kode sebelah kiri 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 kode di atas akan membuat kelas bernama “bahasa” mari kita isi kelas baru ini dengan beberapa baris 1 mutation createobject{ 2 createlanguage(input {fields {name "python", saveformat " py"}}){ 3 language{ 4 name, 5 saveformat 6 } 7 } 8 } jika operasi anda berhasil, anda akan melihat pesan ini di kotak kode kanan di graphql playground 1 { 2 "data" { 3 "createlanguage" { 4 "language" { 5 "name" "python", 6 "saveformat" " py" 7 } 8 } 9 } 10 } mutasi digunakan untuk membuat atau melakukan perubahan pada sebuah kelas dengan menjalankan mutasi di atas, kita akan membuat kelas baru bernama language dengan bidang data nama “python” saveformat “ py” ulangi prosesnya dan buat dua objek lagi dalam kelas yang sama untuk nama “c” dan saveformat “ c” nama “java” dan saveformat “ java” mutasi untuk ini akan seperti 1 mutation createobject{ 2 createlanguage(input {fields {name "c", saveformat " c"}}){ 3 language{ 4 name, 5 saveformat 6 } 7 } 8 } java 1 mutation createobject{ 2 createlanguage(input {fields {name "java", saveformat " java"}}){ 3 language{ 4 name, 5 saveformat 6 } 7 } 8 } sekarang mari kita lihat semua data di kelas kita languages untuk membaca data kita menggunakan query jadi silakan ketik perintah di bawah ini 1 query findlanguages{ 2 languages{ 3 count, 4 edges{ 5 node{ 6 name, 7 saveformat 8 } 9 } 10 } 11 } di query findlanguage query findlanguage ‘findlanguage’ hanyalah sebuah nama untuk perintah query anda dan anda bahkan bisa menamainya dengan nama lain kita menggunakan find(classname "") find(classname "") perintah untuk menemukan semua elemen dari kelas tertentu count count , mengembalikan jumlah elemen dalam kelas dan semua elemen ditampilkan di dalam result result objek kueri di atas akan mengembalikan ini 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 } anda dapat melihat semua kueri lainnya di tautan berikut kueri graphql back4app https //blog back4app com/graphql on parse/ sekarang, mari kita lanjutkan ke langkah berikutnya 4 mengatur graphql di aplikasi kita mari kita mulai mengkode aplikasi kita sebelum ini, anda harus melakukan beberapa hal di lib\consonents dart lib\consonents dart file salin tautan graphql yang ada di sebelah tombol riwayat di bagian atas jendela graphql, dan tempelkan sebagai tipe data string kurl sekarang pindah ke bagian bawah halaman dan salin kode dari http headers, salin hanya kode di sebelah kanan titik dua( ) dan tempelkan dengan nama masing masing di lib\consonents dart lib\consonents dart file file harus memiliki kode berikut 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 sekarang pindah ke main dart main dart file dan menuju ke myapp stateless widget dan tambahkan kode berikut tepat di atas 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 berasal dari flutter graphql dart dan mengambil widget httplink() dengan dua parameter yang pertama adalah url api graphql di back4app yang kedua adalah header yang diperlukan untuk mengautentikasi di api back4app setelah bagian ini, anda perlu menyertakan kode klien graphql (jelaskan apa itu), salin kode di bawah ini dan kemudian tempel di bawah bagian httplink 1 valuenotifier\<graphqlclient> client = valuenotifier( 2 graphqlclient( 3 cache optimisticcache(dataidfromobject typenamedataidfromobject), 4 link httplink, 5 ), 6 ); sekarang kami telah menyediakan metode tautan dan cache untuk graphqlclient kami kami telah melakukan ini melalui valuenotifier kami dan menamakannya sebagai client mari kita bungkus widget myhomepage() yang merupakan anak dari materialapp dengan graphqlprovider dan pass myhomepage() sebagai kliennya tambahkan parameter lain di dalam graphqlprovider yaitu client dan pass client (nama valuenotifier kami) di dalamnya inilah bagaimana kelas myapp anda seharusnya terlihat sekarang 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 } mari kita panggil api dan ambil datanya 5 membuat panggilan api sekarang kita akan bekerja pada myhomepagestate kita akan mulai dengan menginisialisasi tipe data string bernama ‘query’ dan menetapkan/melalui pernyataan query untuk menemukan semua data dari kelas language kami karena query ini multi baris, kita akan melewatkan query dalam tanda kutip tiga inilah bagaimana tampilannya 1 string query=''' 2 query findlanguages{ 3 languages{ 4 count, 5 edges{ 6 node{ 7 name, 8 saveformat 9 } 10 } 11 } 12 } 13 '''; sekarang pergi ke widget query(), di dalam parameter body dari scaffold yang memiliki dua properti opsi pembangun dan kemudian berikan null untuk keduanya inilah bagaimana metode build anda akan terlihat 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 } widget query() query() membantu kita menulis kueri untuk graphql dan akan membantu kita membaca dan mendapatkan data kita akan memberikan pernyataan kueri yang telah kita ambil sebagai string dalam opsi dan membangun widget dengan parameter builder jadi berikan widget queryoptions() dalam opsi sebagai berikut 1 options queryoptions( 2 documentnode gql(query), 3 ), 4 kueri diteruskan melalui parameter documentnode dalam queryoptions sekarang mari kita bangun dengan bantuan parameter builder metode builder menerima sebuah fungsi dengan tiga parameter yaitu, queryresult result; refetch refetch; fetchmore fetchmore saat ini, kita hanya perlu khawatir tentang queryresult yang memberikan kita hasil dari kueri kita dan kita dapat mengakses data melalui result data result data jadi mari kita kodekan yang berikut di bawah 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 }, dalam kode di atas, kami mengakses data jika tidak ada data, kami mengembalikan widget teks yang membaca ‘loading…’ jika tidak, kami akan mengembalikan widget text() yang membaca ‘success’ berikut adalah bagaimana myhomepage myhomepage kelas anda di main dart main dart seharusnya terlihat 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 } sekarang, mulai aplikasi dan tunggu beberapa detik setelah ia dimulai ulang jika anda melihat ‘success’ di layar maka selamat! anda telah berhasil menghubungkan dan memanggil api 6 mengambil dan menampilkan data dari api alih alih mengembalikan widget text, kita akan mengembalikan listview\ builder() widget dengan data asli tulis kode berikut sebagai pengganti 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 ); sekarang jika anda melihat kembali ke layar hasil graphql anda di konsol api back4app tempat kita mengetik metode find kita, hasilnya adalah sebagai berikut 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 } jadi dari kode di atas lokasi “python” adalah “data” > “ languages” > “count” > “edges” > “node” > “name” juga perhatikan bahwa nama berada di dalam tanda kurung siku ‘\[]’ dari edges yang melambangkan bahwa itu adalah elemen pertama dari daftar/array edges jadi kita perlu masuk ke lokasi ini untuk mendapatkan “python” dan sama untuk yang lainnya ketika kita menulis result data result data , kita masuk ke “data” lokasi jadi untuk memberikan lokasi lainnya kita tambahkan \["location name"] \["location name"] ke dalamnya jadi lokasi “python” akan menjadi result data\["languages"]\["edges"]\[0]\["node"]\["name"] result data\["languages"]\["edges"]\[0]\["node"]\["name"] saat menggunakan listview listview , ini membutuhkan dua parameter, itemcount itemcount , ini memberi tahu jumlah elemen dalam panggilan api, itembuilder itembuilder , ini mengambil fungsi dengan parameter (buildcontext context, int index) (buildcontext context, int index) dan mengembalikan daftar widget di mana kita akan menampilkan data di sini, kita akan menggunakan list dari listtile untuk menampilkan data 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 ); ketika kita mengganti text('success') text('success') dengan listview\ builder() widget di atas, kita pertama tama melewatkan itemcount di mana kita melewatkan jumlah elemen dalam daftar hasil dan jadi kita tidak perlu khawatir tentang itu lagi di itembuilder kita mengembalikan daftar listtiles yang akan memiliki "name" "name" dari "languages" "languages" kelas dan di "saveformat" "saveformat" di bagian trailing perhatikan kita menggunakan index alih alih angka apa pun setelah hasil, inilah yang ditangani oleh itemcount inilah bagaimana main dart main dart anda seharusnya terlihat sekarang 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 } dan layar aplikasi terakhir kami kesimpulan sekarang anda memiliki aplikasi flutter yang terhubung ke api graphql yang dapat menyimpan dan mengambil data di back4app kami tidak perlu mengkodekan atau mendekodekan data json secara terpisah yang membuat pekerjaan kami lebih mudah dan lebih cepat dengan beberapa baris kode semoga harimu menyenangkan!