Hook useParseQuery untuk Aplikasi Real-time React Native

20 mnt

menggunakan hook useparsequery untuk membangun aplikasi react native waktu nyata pendahuluan dalam panduan ini, anda akan menjelajahi fitur utama dari @parse/react native @parse/react native lib menggunakan contoh aplikasi todo react native anda akan menggunakan useparsequery useparsequery hook untuk mengquery tugas secara waktu nyata dan menyimpan hasilnya secara lokal di aplikasi ini dengan menggunakan berbagai query parse, anda akan menemukan cara menggunakan lib parse yang baru di proyek anda parse react native saat ini berada di versi alpha lib ini sedang dalam pengujian, jadi kami sarankan untuk melanjutkan dengan hati hati umpan balik anda sangat dihargai, jadi jangan ragu untuk menggunakan lib ini dan kirimkan pertanyaan serta kesan pertama anda dengan mengirim email ke community\@back4app com tujuan jelajahi kasus penggunaan utama untuk lib parse react native dengan membuat aplikasi todo prasyarat untuk menyelesaikan tutorial ini, anda akan membutuhkan sebuah aplikasi yang dibuat di back4app ikuti tutorial https //www back4app com/docs/platform/parse live query catatan ikuti tutorial https //www back4app com/docs/react native/parse sdk/real time/react hook real time untuk belajar bagaimana memulai dengan @parse/react native 1 siapkan proyek awal sebelum memulai, anda perlu mendapatkan proyek bootstrap react native yang telah kami siapkan sebagai titik awal untuk tutorial ini ini adalah proyek react native init react native init yang sederhana dengan semua ketergantungan dan gaya yang telah ditentukan sebelumnya agar anda dapat fokus menjelajahi @parse/react native @parse/react native fitur anda dapat https //github com/templates back4app/react native todo app/archive/main zip atau mengkloning proyek tersebut git clone https //github com/templates back4app/react native todo app git selanjutnya, instal ketergantungan proyek cd react native todo app \# menggunakan yarn yarn install \# menggunakan npm npm install untuk ios, instal pods cd ios && npx pod install dalam panduan sebelumnya, https //www back4app com/docs/react native/parse react native sdk/getting started , anda belajar bagaimana menggunakan initializeparse initializeparse untuk mengaktifkan koneksi dengan server back4app siapkan app id app id dan javascriptkey javascriptkey di komponen titik masuk yang terletak di src/index js src/index js 1 // src/index js 2 initializeparse( 3 'https //parseapi back4app com/', 4 'application id', 5 'javascript key' 6 ); silakan jalankan proyeknya \# untuk ios npx react native run ios \# untuk android npx react native run android setelah itu, anda akan berhasil mengatur proyek pemula dan aplikasi akan terlihat seperti berikut struktur direktori proyek react native todo app ├── src/ │ ├── config/ │ │ └── reactotronconfig js │ ├── images/ │ │ ├── back4app logo png │ │ └── bg jpg │ ├── components/ │ │ └── cardtodobutton/ │ │ └── index js // komponen item tombol kartu │ │ └── menu/ │ │ └── index js // menu dengan tombol kartu │ │ └── tasklist/ │ │ └── index js // komponen daftar tugas │ ├── pages/ │ │ └── addtodo/ │ │ └── index js // halaman tambah tugas │ │ └── learning/ │ │ └── index js // halaman pembelajaran │ │ └── main/ │ │ └── index js // halaman utama │ │ └── shopping/ │ │ └── index js // halaman belanja │ │ └── work/ │ │ └── index js // halaman kerja │ ├── services/ │ │ └── api js │ ├── index js // titik masuk aplikasi │ └── routes js // konfigurasi rute navigasi ├── editorconfig ├── eslintrc json ├── gitignore ├── babel config js ├── dependencies json ├── devdependencies json ├── index js ├── jsconfig js ├── license ├── package json └── readme md proyek awal memiliki 4 halaman utama halaman pembelajaran menampilkan tugas yang termasuk dalam kategori pembelajaran halaman belanja menampilkan tugas yang termasuk dalam kategori belanja halaman kerja menampilkan tugas yang termasuk dalam kategori kerja halaman tambahtugas formulir dasar untuk membuat tugas baru 2 membuat tugas baru fitur umum dalam aplikasi todo adalah memungkinkan pengguna untuk membuat tugas baru untuk itu, fungsi buat tugas akan menggunakan parse javascript sdk untuk membuat objek parse baru dan menyimpannya di back4app di halaman addtodo addtodo dari proyek pemula, anda akan memiliki formulir dasar dengan input untuk memasukkan deskripsi tugas, beberapa kotak centang untuk memilih kategori tugas dan tombol kirim dalam tutorial ini, anda akan membuat parse object parse object untuk tugas yang akan memiliki atribut berikut lihat panduan parse javascript sdk https //www back4app com/docs/react native/parse sdk/react native save data untuk informasi lebih lanjut tentang membuat objek parse 1 { 2 description 'simple string of task descrition', 3 author 'person creating the task', 4 completed false, // or true 5 createdat date, // automatically created by back4app 6 } sekarang implementasikan metode untuk membuat tugas ketika pengguna mengklik kirim di pages/addtodo/index js pages/addtodo/index js komponen, mari kita implementasikan metode handlesubmit handlesubmit 1 async function handlesubmit() { 2 try { 3 const task = new parse object extend('task'); 4 // create a new instance of that class 5 const task = new task(); 6 task set('description', description); 7 task set('category', category); 8 task set('author', 'anonymous'); 9 task set('completed', false); 10 await task save(); 11	 12 alert alert('new task created '); 13 } catch (error) { 14 console log('error while creating task ', error); 15 } 16 } setelah itu, anda sekarang akan dapat membuat beberapa tugas silakan buat sebanyak mungkin tugas yang anda inginkan di langkah selanjutnya, anda akan melakukan kueri terhadap mereka 3 mengkueri & memfilter tugas sekarang setelah anda membuat beberapa tugas, saatnya untuk menggunakan parse react native lib anda akan menulis beberapa kueri dan meneruskannya ke useparsequery useparsequery hook kueri ini akan mencantumkan semua tugas yang belum selesai dalam kategori pembelajaran ini adalah kasus penggunaan pertama dari hook, anda akan membangun kueri ambil satu kali, dengan mengatur enablelivequery\ false enablelivequery\ false , yang dijalankan saat komponen halaman pembelajaran dirender enablelivequery enablelivequery adalah true true secara default, dan mengubahnya menjadi false false akan menonaktifkan langganan perubahan waktu nyata di pages/learning/index js pages/learning/index js komponen, mari kita tulis parse query parse query 1 const task = new parse object extend('task'); 2 const query = new parse query(task); 3 query equalto('completed', false); 4 query equalto('category', 'learning'); kirim kueri sebagai argumen ke useparsequery useparsequery hook const {results} = useparsequery(query, {enablelivequery false}); kode di atas menunjukkan penggunaan dasar untuk hook parse hook useparsequery adalah sumber daya baru yang dapat anda gunakan dengan parse query mana pun gunakan https //docs parseplatform org/js/guide/#queries untuk mengambil objek data anda dan hook ini akan membuat pengalaman ini menjadi lebih baik setelah mendapatkan hasilnya, serahkan kepada komponen tasklist untuk menampilkan tugas di aplikasi 1 //learning/index js 2 import react, {useeffect} from 'react'; 3 import {activityindicator} from 'react native'; 4 import tasklist from ' / /components/tasklist'; 5 import parse from 'parse/react native js'; 6 import {useparsequery} from '@parse/react native'; 7	 8 const learning = () => { 9 const task = new parse object extend('task'); 10 const query = new parse query(task); 11 query equalto('completed', false); 12 query equalto('category', 'learning'); 13	 14 const {results, isloading} = useparsequery(query, {enablelivequery false}); 15	 16 if (isloading) { 17 return \<activityindicator/>; 18 } 19	 20 return \<tasklist todos={results} />; 21 }; 22	 23 export default learning; aplikasi anda harus berhasil menampilkan daftar tugas seperti ini 4 perubahan waktu nyata penggunaan kedua yang akan anda eksplorasi adalah pembaruan waktu nyata useparsequery useparsequery hook mengenkapsulasi parse live query dan menyediakan dukungan langsung untuk perubahan waktu nyata saat meneruskan kueri ke hook, ia membuat koneksi websocket untuk berkomunikasi dengan server back4app livequery, yang disinkronkan secara otomatis anda akan menambahkan fitur ini ke tugas dalam kategori belanja penting untuk dicatat bahwa live query dan subdomain back4app harus diaktifkan di aplikasi dashboard back4app anda setelah anda melakukannya, tambahkan url subdomain anda ke initializeparse initializeparse dan hasil dari hook parse react native akan selalu memiliki data yang diperbarui jika anda tidak mengonfigurasi subdomain, useparsequery useparsequery hook tidak akan dapat mengambil data secara waktu nyata 1 // src/index js 2 initializeparse( 3 '\<yoursubdomain> b4a io', 4 'application id', 5 'javascript key' 6 ); pada pages/shopping/index js pages/shopping/index js komponen, mari kita tulis parse query parse query 1 const task = new parse object extend('task'); 2 const query = new parse query(task); 3 query equalto('completed', false); 4 query equalto('category', 'shopping'); kemudian, teruskan kueri sebagai argumen ke useparsequery useparsequery hook const {results, isloading, issyncing} = useparsequery(query); perhatikan bahwa tidak ada kebutuhan untuk parameter tambahan karena perubahan waktu nyata diaktifkan secara default setelah mendapatkan hasilnya, serahkan kepada tasklist tasklist komponen untuk menampilkan tugas di aplikasi 1 import react from 'react'; 2 import {activityindicator} from 'react native'; 3 import tasklist from ' / /components/tasklist'; 4 import parse from 'parse/react native js'; 5 import {useparsequery} from '@parse/react native'; 6	 7 const shopping = () => { 8 const task = new parse object extend('task'); 9 const query = new parse query(task); 10 query equalto('completed', false); 11 query equalto('category', 'shopping'); 12	 13 const {results, isloading, issyncing} = useparsequery(query); 14	 15 if (isloading || issyncing) { 16 return \<activityindicator />; 17 } 18 return \<tasklist todos={results || \[]} />; 19 }; 20	 21 export default shopping; 5 dukungan offline kasus penggunaan ketiga untuk @parse/react native @parse/react native adalah menggunakan caching offline dari hasil kueri ini berguna jika aplikasi react native anda perlu berfungsi ketika pengguna mengalami latensi jaringan atau masalah konektivitas internet dukungan offline meningkatkan responsivitas aplikasi react native anda dan pengalaman pengguna kabar baiknya adalah tidak ada langkah tambahan yang diperlukan! pendekatan offline first dan langganan waktu nyata diaktifkan secara default singkatnya, cukup menggunakan useparsequery useparsequery hook memastikan bahwa aplikasi anda akan menyimpan hasil kueri untuk dukungan offline yang dikombinasikan dengan langganan live query ketika pengguna anda kembali online 6 membatasi & mengurutkan kueri misalkan daftar tugas dari kategori kerja terlalu banyak untuk ditangani oleh seseorang dan anda ingin menampilkan hanya sebagian dari mereka untuk hari itu juga, urutkan berdasarkan tanggal pembuatan di pages/shopping/index js pages/shopping/index js komponen, mari kita tulis parse query parse query 1 const task = new parse object extend('task'); 2 const query = new parse query(task); 3 query equalto('completed', false); 4 query equalto('category', 'work'); 5 query ascending('createdat'); // order by creation date 6 query limit(5); // limit to 5 tasks kemudian, lewati kueri sebagai argumen ke useparsequery useparsequery hook dan teruskan ke tasklist tasklist komponen untuk menampilkan tugas di aplikasi 1 import react from 'react'; 2 import {activityindicator} from 'react native'; 3 import parse from 'parse/react native js'; 4 import {useparsequery} from '@parse/react native'; 5 import tasklist from ' / /components/tasklist'; 6 // import { container } from ' /styles'; 7	 8 const work = () => { 9 const task = new parse object extend('task'); 10 const query = new parse query(task); 11 query equalto('completed', false); 12 query equalto('category', 'work'); 13 query ascending('createdat'); 14 query limit(5); 15	 16 const {results, isloading} = useparsequery(query, { 17 enablelivequery false, 18 }); 19	 20 if (isloading) { 21 return \<activityindicator />; 22 } 23 return \<tasklist todos={results} />; 24 }; 25	 26 export default work; 7 menentukan argumen useparsequery anda menggunakan @parse/react native @parse/react native untuk mengambil data dari back4app dengan fitur seperti live query di langkah langkah sebelumnya oleh karena itu, penjelasan tentang antarmuka yang diekspor diperlukan useparsequery useparsequery hook menerima parse query parse query dan objek useparsequeryoptions useparsequeryoptions sebagai argumennya objek konfigurasi opsional default adalah sebagai berikut 1 { 2 enablelivequery true, 3 enablelocaldatastore true, 4 initialload \[] 5 } enablelivequery fitur realtime live query diaktifkan secara default enablelocaldatastore mengaktifkan caching lokal dari hasil data, default adalah true true tetapi anda dapat mematikannya dengan mengatur ke false false initialload jika anda sudah memiliki beberapa data yang dimuat dalam memori, maka anda dapat mengaturnya untuk menunjukkan pratinjau data kepada pengguna selesai! pada titik ini, anda telah belajar bagaimana menggunakan @parse/react native @parse/react native lib dengan membuat aplikasi todo react native di back4app