เริ่มใช้ ParseQuery กับ React Hook สำหรับการอัปเดตเรียลไทม์

เริ่มต้นใช้งาน parse react hook สำหรับการอัปเดตแบบเรียลไทม์โดยใช้ parse บทนำ วิธีที่ง่ายที่สุดในการรวม parse/back4app เข้ากับโปรเจกต์ที่ใช้ javascript ของคุณคือผ่าน https //www npmjs com/package/parse ไลบรารีนี้ทำงานในหลายสภาพแวดล้อมของ javascript เช่น nodejs, reactjs, vuejs, angularjs, react native และให้คุณเข้าถึงฟีเจอร์ของ back4app เป้าหมายของ hook ของ parse react คือการทำให้ประสบการณ์นี้ดียิ่งขึ้นสำหรับนักพัฒนา reactjs โดยการนำเสนอเลเยอร์ที่เบาและใช้งานง่ายซึ่งให้การกำหนดค่าต่ำสุดและการนำโค้ดกลับมาใช้ใหม่ได้ การใช้แพ็คเกจนี้จะทำให้แน่ใจว่าสิ่งต่างๆ เช่น การตั้งค่าข้อมูลประจำตัว, การร้องขอ http, การซิงโครไนซ์แบบเรียลไทม์, การโต้ตอบแบบออฟไลน์จะพร้อมใช้งานโดยอัตโนมัติในแอป react ของคุณ ไลบรารีนี้เขียนขึ้นทั้งหมดใน typescript บน https //www npmjs com/package/parse , และขณะนี้อยู่ในเวอร์ชัน alpha ในคู่มือเบื้องต้นนี้ คุณจะติดตั้งและตั้งค่า @parse/react @parse/react ไลบรารีในโปรเจกต์ react ของคุณ @parse/react @parse/react ขณะนี้อยู่ในเวอร์ชัน alpha ไลบรารีนี้อยู่ระหว่างการทดสอบ ดังนั้นเราขอแนะนำให้ดำเนินการด้วยความระมัดระวัง ข้อเสนอแนะแต่ละข้อของคุณมีความสำคัญมาก ดังนั้นอย่าลังเลที่จะใช้ไลบรารีนี้และส่งคำถามและความประทับใจแรกเริ่มของคุณโดยการส่งอีเมลไปที่ community\@back4app com ข้อกำหนดเบื้องต้น ในการทำตามบทเรียนนี้ คุณจะต้องมี แอป https //www back4app com/docs/get started/new parse app บน back4app; ทำตาม https //www back4app com/docs/platform/parse live query https //www npmjs com/get npm?utm source=house\&utm medium=homepage\&utm campaign=free%20orgs\&utm term=install%20npm หรือ yarn ติดตั้งแล้ว; https //www npmjs com/package/npx ติดตั้ง package runner 1 การติดตั้ง ติดตั้ง @parse/react @parse/react และ peer dependency ของมัน parse parse ในแอปพลิเคชัน react ของคุณ \# ใช้ yarn yarn add @parse/react parse \# ใช้ npm npm install save @parse/react parse 2 การตั้งค่าแอปพลิเคชัน เพื่อให้แอปสามารถเชื่อมต่อกับเซิร์ฟเวอร์ back4app ได้อย่างปลอดภัย คุณต้องให้ parse javascript sdk ด้วยข้อมูลรับรองของแอปในไฟล์ app js app js (หรือ app tsx app tsx ) อย่าลืมใช้ซับโดเมน back4app ของคุณที่สร้างขึ้นเมื่อคุณเปิดใช้งานแอปของคุณเพื่อทำการ live queries app js or app tsx 1 import { initializeparse } from '@parse/react'; 2&#x9; 3 initializeparse( 4 'your back4app subdomain', // e g your app name b4a io 5 'your application id', 6 'your javascript key' 7 ); โปรดทราบว่า initializeparse initializeparse วิธีการแทนที่ parse initialize parse initialize ปกติ คุณสามารถค้นหา app id app id และ javascript key javascript key ข้อมูลประจำตัวของคุณได้โดยการเปิดแอปของคุณ dashboard dashboard ที่ https //www back4app com/ และคลิกที่ core settings core settings , ภายใต้ server settings server settings 3 การสร้าง query แรกของคุณ ถัดไป คุณจะสร้าง query แรกของคุณและแสดงในแอปของคุณ ไลบรารี @parse/react @parse/react ส่งออก useparsequery useparsequery hook ดังนั้นคุณจึงไม่ต้องเสียเวลาไปกับการค้นหาวิธีการใช้งานฟีเจอร์ต่างๆ เช่น การสนับสนุนออฟไลน์ การเปลี่ยนแปลงแบบเรียลไทม์ และอื่นๆ มันใช้ parse query parse query และส่งคืนวัตถุที่มีคุณสมบัติบางอย่างที่คุณสามารถใช้เพื่อเข้าถึงข้อมูลที่ส่งคืนโดยการค้นหา app js or app tsx 1 import react from 'react'; 2 import parse from 'parse'; 3 import { initializeparse, useparsequery } from '@parse/react'; 4&#x9; 5 initializeparse( 6 'your back4app subdomain', // e g your app name b4a io 7 'your application id', 8 'your javascript key' 9 ); 10&#x9; 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&#x9; 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 } เมื่อส่งคำถามไปยัง hook มันจะมองหาผลลัพธ์ที่ถูกเก็บไว้ในแคชก่อน จากนั้นมันจะสร้างการเชื่อมต่อ websocket เพื่อสื่อสารกับเซิร์ฟเวอร์ back4app livequery ซึ่งจะซิงโครไนซ์โดยอัตโนมัติ กล่าวอีกนัยหนึ่ง วิธีการออฟไลน์ก่อนและการเปลี่ยนแปลงแบบเรียลไทม์จะเปิดใช้งานโดยค่าเริ่มต้น เพื่อตรวจสอบสถานะของคำถามให้ใช้ props props ที่ส่งกลับโดย hook islive islive หาก true true , หมายความว่าคำถามได้สมัครรับการอัปเดตแบบเรียลไทม์ isloading isloading หาก true true , คำถามกำลังดึงผลลัพธ์ issyncing issyncing หาก true true , คำถามกำลังได้รับผลลัพธ์ที่อัปเดตจากเซิร์ฟเวอร์ back4app results results นี่คือข้อมูลที่ส่งกลับจากคำถาม count count แสดงจำนวนวัตถุที่ตรงกับคำถาม error error เมื่อมีบางอย่างผิดพลาดกับคำถามจะส่งกลับข้อผิดพลาด reload reload โหลดผลลัพธ์คำถามของคุณใหม่ คุณสามารถดู https //github com/parse community/parse react/tree/master/packages/parse react เพื่อดูรายละเอียดเพิ่มเติมเกี่ยวกับวิธีการตั้งค่าและใช้งาน @parse/react @parse/react ไลบรารีนี้ 4 ทดสอบ app hook ตอนนี้คุณควรจะสามารถรันแอป react ของคุณและดูผลลัพธ์ได้ yarn start โปรดจำไว้ว่าคุณควรเพิ่มข้อมูลบางอย่างลงในโปรเจกต์ back4app ของคุณเพื่อดูรายการบางอย่างในแอปของคุณ เสร็จสิ้น! ในจุดนี้คุณได้ติดตั้ง @parse/react @parse/react ในโปรเจกต์ของคุณ ตั้งค่าการเชื่อมต่อกับ back4app และเขียน query แรกของคุณแล้ว ในคู่มือถัดไปคุณจะได้เห็นหนึ่งในฟีเจอร์หลักของไลบรารีนี้ว่าคุณจะใช้งานมันได้อย่างไรโดยการสร้างแอป live chat ตัวอย่าง