Integrasikan Parse React Hook untuk Pembaruan Waktu Nyata

9 mnt

memulai dengan parse react hook untuk pembaruan waktu nyata menggunakan parse pendahuluan cara termudah untuk mengintegrasikan parse/back4app ke dalam proyek berbasis javascript anda adalah melalui parse javascript sdk perpustakaan ini bekerja di berbagai lingkungan javascript seperti nodejs, reactjs, vuejs, angularjs, react native, dan memberi anda akses ke fitur back4app tujuan hook parse react adalah untuk membuat pengalaman ini bahkan lebih baik bagi pengembang reactjs dengan memberikan lapisan yang ringan dan mudah digunakan yang menyediakan konfigurasi minimal dan penggunaan kembali kode menggunakan paket ini akan memastikan bahwa item seperti pengaturan kredensial, permintaan http, sinkronisasi waktu nyata, interaksi offline first secara otomatis tersedia untuk aplikasi react anda perpustakaan ini ditulis sepenuhnya dalam typescript, di atas parse javascript sdk , dan saat ini berada di versi alpha dalam panduan awal ini, anda akan menginstal dan mengatur @parse/react @parse/react perpustakaan di proyek react anda @parse/react @parse/react 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 atau yarn terinstal; npx paket runner terinstal 1 instalasi instal @parse/react @parse/react dan ketergantungan sejawatnya parse parse di aplikasi react anda 2 pengaturan aplikasi untuk memungkinkan aplikasi terhubung ke server back4app dengan aman, anda harus memberikan kredensial aplikasi kepada parse javascript sdk di app js app js (atau app tsx app tsx ) file ingat untuk menggunakan subdomain back4app anda yang dibuat saat anda mengaktifkan aplikasi anda untuk melakukan live queries app js or app tsx 1 import { initializeparse } from '@parse/react'; 2	 3 initializeparse( 4 'your back4app subdomain', // e g your app name b4a io 5 'your application id', 6 'your javascript key' 7 ); perhatikan bahwa metode initializeparse initializeparse menggantikan parse initialize parse initialize yang biasa anda dapat menemukan app id app id dan javascript key javascript key kredensial anda dengan membuka aplikasi anda di dashboard dashboard di situs web back4app https //www back4app com/ dan mengklik core settings core settings , di bawah server settings server settings 3 membuat query pertama anda selanjutnya, anda akan membangun query pertama anda dan menampilkannya di aplikasi anda perpustakaan @parse/react @parse/react mengekspor sebuah useparsequery useparsequery hook, jadi anda tidak perlu 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 query app js or app tsx 1 import react from 'react'; 2 import parse from 'parse'; 3 import { initializeparse, useparsequery } from '@parse/react'; 4	 5 initializeparse( 6 'your back4app subdomain', // e g your app name b4a io 7 'your application id', 8 'your javascript key' 9 ); 10	 11 export default function app() { 12 //make sure your class is enabled for real time notifications (live query) checking the menu > app settings > server settings > server url and live query 13 const parsequery = new parse query('your class name here'); 14 const { 15 islive, 16 isloading, 17 issyncing, 18 results, 19 count, 20 error, 21 reload 22 } = useparsequery(parsequery); 23	 24 return ( 25 \<div> 26 {isloading && ( 27 \<p>loading \</p> 28 )} 29 {islive && ( 30 \<p>live!\</p> 31 )} 32 {issyncing && ( 33 \<p>syncing \</p> 34 )} 35 {results && ( 36 \<ul> 37 {results map(result => ( 38 \<li key={result id}> 39 {result get('class column name here')} 40 \</li> 41 ))} 42 \</ul> 43 )} 44 \<p>{count}\</p> 45 {error && ( 46 \<p>{error message}\</p> 47 )} 48 \<button 49 onclick={reload} 50 > 51 reload 52 \</button> 53 \</div> 54 ); 55 } saat mengirimkan 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 livequery back4app, 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 yang salah dengan kueri, ia mengembalikan kesalahan reload reload muat ulang hasil kueri anda anda dapat melihat dokumentasi lengkap untuk detail lebih lanjut tentang cara mengatur dan menggunakan @parse/react @parse/react library 4 uji app hook sekarang anda seharusnya dapat menjalankan aplikasi react anda dan melihat hasilnya 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 @parse/react di proyek anda, mengonfigurasi koneksi dengan back4app, dan menulis query pertama anda di panduan berikutnya, anda akan melihat salah satu fitur utama dari library ini, cara menggunakannya dengan membuat aplikasi live chat contoh