useParseQuery: React Hook Pembaruan Waktu Nyata di Parse

10 mnt

memulai dengan hook react untuk pembaruan waktu nyata menggunakan parse pendahuluan selamat datang di parse react native lib! dalam panduan ini, anda akan belajar apa itu parse react lib, bagaimana cara menginstal dan mulai menggunakannya di proyek react native anda motivasi cara termudah untuk mengintegrasikan parse/back4app ke dalam proyek berbasis javascript anda adalah melalui parse javascript sdk https //www npmjs com/package/parse perpustakaan ini bekerja di berbagai lingkungan javascript seperti nodejs, reactjs, vuejs, angularjs, react native, dan memberi anda akses ke fitur back4app tujuan parse react native adalah untuk membuat pengalaman ini bahkan lebih baik bagi pengembang react native dengan memberikan lapisan yang ringan dan mudah digunakan yang menyediakan konfigurasi minimal, penggunaan kembali kode, dan optimasi native untuk android dan ios menggunakan paket ini akan memastikan bahwa item seperti pengaturan kredensial, permintaan http, sinkronisasi waktu nyata, interaksi offline first secara otomatis tersedia untuk aplikasi react native anda perpustakaan ini ditulis sepenuhnya dalam typescript, di atas parse javascript sdk https //www npmjs com/package/parse , dan saat ini berada di versi alpha dalam panduan awal ini, anda akan menginstal dan mengatur perpustakaan @parse/react native di proyek react native anda parse react native saat ini berada di versi alpha perpustakaan ini sedang dalam pengujian, jadi kami sarankan untuk melanjutkan dengan hati hati umpan balik anda sangat dihargai, jadi jangan ragu untuk menggunakan perpustakaan ini dan kirimkan pertanyaan serta kesan pertama anda dengan mengirim email ke community\@back4app com prasyarat untuk menyelesaikan tutorial ini, anda akan membutuhkan sebuah aplikasi yang dibuat di back4app ikuti tutorial aktifkan live query npm https //www npmjs com/get npm?utm source=house\&utm medium=homepage\&utm campaign=free%20orgs\&utm term=install%20npm atau yarn terinstal npx https //www npmjs com/package/npx paket runner terinstal 1 instalasi jika anda tidak memiliki aplikasi react native, silakan buat proyek baru dengan npx npx paket runner menggunakan perintah berikut npx react native init startwithparsern instal @parse/react native @parse/react native dan ketergantungan sejawatnya parse parse di aplikasi react native anda \# menggunakan yarn yarn add @parse/react native parse \# menggunakan npm npm install save @parse/react native parse 2 pengaturan aplikasi untuk memungkinkan aplikasi terhubung ke server back4app dengan aman, anda harus memberikan kredensial aplikasi kepada parse javascript sdk 1 //in your app js 2 import { initializeparse } from '@parse/react native'; 3	 4 initializeparse( 5 'https //your subdomain b4a io/', 6 'application id', 7 'javascript key' 8 ); anda dapat menemukan app id app id dan javascript key javascript key kredensial anda dengan membuka aplikasi dashboard dashboard di situs web back4app https //www back4app com/ dan mengklik pengaturan aplikasi pengaturan aplikasi > pengaturan inti pengaturan inti , di bawah pengaturan server pengaturan server subdomain anda harus diaktifkan di pengaturan aplikasi pengaturan aplikasi > pengaturan inti pengaturan inti > url server dan live query url server dan live query untuk informasi lebih lanjut, silakan periksa panduan ini di sini https //www back4app com/docs/platform/parse live query 3 membuat query pertama anda selanjutnya, anda akan membangun query pertama anda dan menampilkannya di aplikasi anda @parse/react native @parse/react native pustaka mengekspor useparsequery useparsequery hook, sehingga anda tidak membuang waktu untuk mencari cara mengimplementasikan fitur seperti dukungan offline, perubahan waktu nyata, dan sebagainya ini membutuhkan parse query parse query dan mengembalikan objek dengan beberapa properti yang dapat anda gunakan untuk mengakses data yang dikembalikan oleh kueri 1 // in your app js 2	 3 import react from 'react'; 4 import { activityindicator, flatlist, view,text } from 'react native'; 5 import { initializeparse, useparsequery } from '@parse/react native'; 6	 7 // remember to call initializeparse with your credentials before using useparsequery 8 initializeparse( 9 'https //your subdomain b4a io/', 10 'application id', 11 'javascript key' 12 ); 13	 14 export default function app() { 15 const parsequery = new parse query('todo'); 16 const { 17 islive, 18 isloading, 19 issyncing, 20 results, 21 count, 22 error, 23 reload 24 } = useparsequery(parsequery); 25	 26 if (isloading) { 27 return \<activityindicator/>; 28 } 29	 30 return ( 31 \<flatlist 32 data={results} 33 renderitem={({item}) => ( 34 \<view 35 style={ { 36 height 70, 37 flex 1, 38 alignitems 'center', 39 justifycontent 'center', 40 } }> 41 \<text>task {item get('title')}\</text> 42 \</view> 43 )} 44 />); 45 } saat melewatkan kueri ke hook, itu akan terlebih dahulu mencari hasil yang di cache yang mungkin telah disimpan kemudian, ia membuat koneksi websocket untuk berkomunikasi dengan server back4app livequery, yang disinkronkan secara otomatis dengan kata lain, pendekatan offline first dan perubahan waktu nyata diaktifkan secara default untuk memeriksa status kueri, gunakan props props yang dikembalikan oleh hook islive islive jika true true , menunjukkan bahwa kueri telah berlangganan untuk pembaruan waktu nyata isloading isloading jika true true , kueri sedang mengambil hasil issyncing issyncing jika true true , kueri sedang mendapatkan hasil yang diperbarui dari server back4app results results ini adalah data yang dikembalikan dari kueri count count menunjukkan jumlah objek yang cocok dengan kueri error error ketika sesuatu berjalan salah dengan kueri, ia mengembalikan kesalahan reload reload muat ulang hasil kueri anda the useparsequery useparsequery menerima parse query parse query , dan anda dapat melihat dokumentasi lengkap https //github com/neon bindings/examples/blob/master/thread count/native/src/lib rs dengan contoh tentang kueri parse 4 uji app hook sekarang anda seharusnya dapat menjalankan aplikasi react native anda dan melihat hasilnya \# di android npx react native run android \# di ios npx react native run ios ingatlah bahwa anda harus menambahkan beberapa data ke proyek back4app anda untuk melihat beberapa item di aplikasi anda selesai! pada titik ini, anda telah menginstal @parse/react native @parse/react native di proyek anda, mengonfigurasi koneksi dengan back4app, dan menulis query pertama anda di panduan berikutnya, anda akan melihat salah satu fitur utama dari pustaka ini bagaimana cara menggunakannya mari kita lanjutkan ke “perubahan realtime” https //reactnavigation org/docs/1 x/hello react navigation untuk mulai menulis beberapa query lagi