React Hook สำหรับการอัปเดตเรียลไทม์ด้วย Parse React Native

เริ่มต้นใช้งาน react hook สำหรับการอัปเดตแบบเรียลไทม์โดยใช้ parse บทนำ ยินดีต้อนรับสู่ parse react native lib! ในคู่มือนี้ คุณจะได้เรียนรู้ว่า parse react lib คืออะไร วิธีการติดตั้งและเริ่มใช้งานในโปรเจกต์ react native ของคุณ แรงจูงใจ วิธีที่ง่ายที่สุดในการรวม parse/back4app เข้ากับโปรเจกต์ที่ใช้ javascript คือผ่าน https //www npmjs com/package/parse ไลบรารีนี้ทำงานในหลายสภาพแวดล้อมของ javascript เช่น nodejs, reactjs, vuejs, angularjs, react native และให้คุณเข้าถึงฟีเจอร์ของ back4app เป้าหมายของ parse react native คือการทำให้ประสบการณ์นี้ดียิ่งขึ้นสำหรับนักพัฒนา react native โดยการนำเสนอเลเยอร์ที่เบาและใช้งานง่ายซึ่งให้การกำหนดค่าต่ำ การนำโค้ดกลับมาใช้ใหม่ และการปรับแต่งแบบเนทีฟสำหรับ android และ ios การใช้แพ็คเกจนี้จะทำให้แน่ใจว่าสิ่งต่างๆ เช่น การตั้งค่าข้อมูลประจำตัว, การร้องขอ http, การซิงโครไนซ์แบบเรียลไทม์, การโต้ตอบแบบออฟไลน์จะพร้อมใช้งานโดยอัตโนมัติในแอป react native ของคุณ ไลบรารีนี้เขียนขึ้นทั้งหมดใน typescript บน https //www npmjs com/package/parse , และขณะนี้อยู่ในเวอร์ชัน alpha ในคู่มือนี้ คุณจะติดตั้งและตั้งค่าไลบรารี @parse/react native ในโปรเจกต์ react native ของคุณ parse react native ขณะนี้อยู่ในเวอร์ชัน 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 การติดตั้ง หากคุณไม่มีแอป react native ให้สร้างโปรเจกต์ใหม่ด้วย npx npx package runner โดยใช้คำสั่งต่อไปนี้ npx react native init startwithparsern ติดตั้ง @parse/react native @parse/react native และ peer dependency ของมัน parse parse ในแอป react native ของคุณ \# ใช้ yarn yarn add @parse/react native parse \# ใช้ npm npm install save @parse/react native parse 2 การตั้งค่าแอป เพื่อให้แอปเชื่อมต่อกับเซิร์ฟเวอร์ back4app ได้อย่างปลอดภัย คุณต้องให้ parse javascript sdk ด้วยข้อมูลประจำตัวของแอป 1 //in your app js 2 import { initializeparse } from '@parse/react native'; 3&#x9; 4 initializeparse( 5 'https //your subdomain b4a io/', 6 'application id', 7 'javascript key' 8 ); คุณสามารถค้นหา app id app id และ javascript key javascript key ข้อมูลประจำตัวโดยการเปิดแอปของคุณ dashboard dashboard ที่ https //www back4app com/ และคลิกที่ app settings app settings > core settings core settings , ภายใต้ server settings server settings ซับโดเมนของคุณต้องเปิดใช้งานที่ app settings app settings > core settings core settings > server url and live query server url and live query สำหรับข้อมูลเพิ่มเติม โปรดตรวจสอบคู่มือนี้ https //www back4app com/docs/platform/parse live query 3 การสร้าง query แรกของคุณ ถัดไป คุณจะสร้าง query แรกของคุณและแสดงในแอปของคุณ ไลบรารี @parse/react native @parse/react native ส่งออก useparsequery useparsequery hook ดังนั้นคุณจะไม่เสียเวลาในการค้นหาวิธีการใช้งานฟีเจอร์ต่างๆ เช่น การสนับสนุนออฟไลน์ การเปลี่ยนแปลงแบบเรียลไทม์ และอื่นๆ ใช้ parse query parse query และส่งคืนวัตถุที่มีคุณสมบัติบางอย่างที่คุณสามารถใช้เพื่อเข้าถึงข้อมูลที่ส่งคืนโดยการค้นหา 1 // in your app js 2&#x9; 3 import react from 'react'; 4 import { activityindicator, flatlist, view,text } from 'react native'; 5 import { initializeparse, useparsequery } from '@parse/react native'; 6&#x9; 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&#x9; 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&#x9; 26 if (isloading) { 27 return \<activityindicator/>; 28 } 29&#x9; 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 } เมื่อส่งผ่านการค้นหาไปยัง 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 โหลดผลลัพธ์คำถามของคุณใหม่ การ useparsequery useparsequery ยอมรับ parse query parse query และคุณสามารถดู https //github com/neon bindings/examples/blob/master/thread count/native/src/lib rs พร้อมตัวอย่างเกี่ยวกับคำถาม parse 4 ทดสอบ app hook ตอนนี้คุณควรจะสามารถเรียกใช้แอป react native ของคุณและดูผลลัพธ์ \# บน android npx react native run android \# บน ios npx react native run ios โปรดจำไว้ว่าคุณควรเพิ่มข้อมูลบางอย่างลงในโปรเจกต์ back4app ของคุณเพื่อดูรายการบางอย่างในแอปของคุณ เสร็จเรียบร้อย! ในจุดนี้ คุณได้ติดตั้ง @parse/react native @parse/react native ในโปรเจกต์ของคุณ ตั้งค่าการเชื่อมต่อกับ back4app และเขียน query แรกของคุณแล้ว ในคู่มือต่อไป คุณจะได้เห็นหนึ่งในฟีเจอร์หลักของไลบรารีนี้ว่าคุณจะใช้งานมันอย่างไร มาต่อกันที่ https //reactnavigation org/docs/1 x/hello react navigation เพื่อเริ่มเขียน query เพิ่มเติม