ใช้ useParseQuery สร้างแอป React Native แบบเรียลไทม์

19 นาที

การใช้ hook useparsequery เพื่อสร้างแอป react native แบบเรียลไทม์ บทนำ ในคู่มือนี้ คุณจะสำรวจฟีเจอร์หลักของ \@parse/react native\ ไลบรารีโดยใช้ตัวอย่างแอป todo react native คุณจะใช้ \useparsequery\ hook เพื่อค้นหางานแบบเรียลไทม์และเก็บผลลัพธ์ไว้ในแอปนี้ โดยใช้ parse queries ที่หลากหลาย คุณจะค้นพบวิธีการใช้ parse lib ใหม่ในโปรเจกต์ของคุณ parse react native ขณะนี้อยู่ในเวอร์ชัน alpha ไลบรารีอยู่ระหว่างการทดสอบ ดังนั้นเราขอแนะนำให้ดำเนินการด้วยความระมัดระวัง ข้อเสนอแนะแต่ละข้อของคุณมีความสำคัญมาก ดังนั้นอย่าลังเลที่จะใช้ไลบรารีและส่งคำถามและความประทับใจแรกเริ่มของคุณโดยการส่งอีเมลไปที่ community\@back4app com เป้าหมาย สำรวจกรณีการใช้งานหลักสำหรับไลบรารี parse react native โดยการสร้างแอป todo ข้อกำหนดเบื้องต้น ในการทำตามบทเรียนนี้ คุณจะต้องการ แอปที่สร้างขึ้นบน back4app ทำตาม การเปิดใช้งาน live query https //www back4app com/docs/platform/parse live query บทเรียน หมายเหตุ ทำตาม บทเรียน parse react native https //www back4app com/docs/react native/parse sdk/real time/react hook real time เพื่อเรียนรู้วิธีเริ่มต้นใช้งาน @parse/react native 1 ตั้งค่าโปรเจกต์เริ่มต้น ก่อนเริ่มต้น คุณจะต้องดาวน์โหลดโปรเจกต์ bootstrap react native ที่เราได้ตั้งค่าไว้เป็นจุดเริ่มต้นสำหรับบทเรียนนี้ มันเป็นโปรเจกต์ที่ง่าย \react native init\ ที่มีการกำหนดค่าทั้งหมดและสไตล์ไว้ล่วงหน้าเพื่อให้คุณมุ่งเน้นไปที่การสำรวจ \@parse/react native\ คุณอาจ ดาวน์โหลด zip https //github com/templates back4app/react native todo app/archive/main zip หรือโคลนโปรเจกต์ git clone https //github com/templates back4app/react native todo app git ถัดไป ติดตั้งการพึ่งพาของโปรเจกต์ cd react native todo app \# ใช้ yarn yarn install \# ใช้ npm npm install สำหรับ ios ให้ติดตั้ง pods cd ios && npx pod install ในคู่มือก่อนหน้านี้ เริ่มต้นใช้งาน https //www back4app com/docs/react native/parse react native sdk/getting started , คุณได้เรียนรู้วิธีการใช้ \initializeparse\ เพื่อเปิดใช้งานการเชื่อมต่อกับเซิร์ฟเวอร์ back4app ตั้งค่า \app id\ และ \javascriptkey\ ในคอมโพเนนต์จุดเริ่มต้นที่ตั้งอยู่ที่ \src/index js\ 1 // src/index js 2 initializeparse( 3 'https //parseapi back4app com/', 4 'application id', 5 'javascript key' 6 ); ดำเนินการและรันโปรเจกต์ \# สำหรับ ios npx react native run ios \# สำหรับ android npx react native run android หลังจากนั้นคุณจะได้ตั้งค่าโปรเจกต์เริ่มต้นสำเร็จและแอปจะมีลักษณะดังต่อไปนี้ โครงสร้างไดเรกทอรีของโปรเจกต์ react native todo app ├── src/ │ ├── config/ │ │ └── reactotronconfig js │ ├── images/ │ │ ├── back4app logo png │ │ └── bg jpg │ ├── components/ │ │ └── cardtodobutton/ │ │ └── index js // คอมโพเนนต์ปุ่มการ์ด │ │ └── menu/ │ │ └── index js // เมนูที่มีปุ่มการ์ด │ │ └── tasklist/ │ │ └── index js // คอมโพเนนต์รายการงาน │ ├── pages/ │ │ └── addtodo/ │ │ └── index js // หน้าสร้างงานใหม่ │ │ └── learning/ │ │ └── index js // หน้าการเรียนรู้ │ │ └── main/ │ │ └── index js // หน้าหลัก │ │ └── shopping/ │ │ └── index js // หน้าช้อปปิ้ง │ │ └── work/ │ │ └── index js // หน้าทำงาน │ ├── services/ │ │ └── api js │ ├── index js // จุดเริ่มต้นของแอป │ └── routes js // การกำหนดเส้นทางการนำทาง ├── editorconfig ├── eslintrc json ├── gitignore ├── babel config js ├── dependencies json ├── devdependencies json ├── index js ├── jsconfig js ├── license ├── package json └── readme md โปรเจกต์เริ่มต้นมีหน้าหลัก 4 หน้า หน้าการเรียนรู้ แสดงงานที่อยู่ในหมวดการเรียนรู้ หน้าช้อปปิ้ง แสดงงานที่อยู่ในหมวดช้อปปิ้ง หน้าทำงาน แสดงงานที่อยู่ในหมวดทำงาน หน้าสร้างงานใหม่ แบบฟอร์มพื้นฐานในการสร้างงานใหม่ 2 การสร้างงานใหม่ ฟีเจอร์ทั่วไปในแอป todo คือการอนุญาตให้ผู้ใช้สร้างงานใหม่ สำหรับสิ่งนั้น ฟังก์ชันสร้างงานจะใช้ parse javascript sdk เพื่อสร้าง parse object ใหม่และบันทึกมันใน back4app ใน \addtodo\ หน้าในโปรเจกต์เริ่มต้น คุณจะมีฟอร์มพื้นฐานที่มีช่องป้อนข้อมูลเพื่อใส่คำอธิบายงาน กล่องตรวจสอบบางกล่องเพื่อเลือกหมวดหมู่งาน และปุ่มส่ง ในบทแนะนำนี้ คุณจะสร้าง \parse object\ สำหรับงานซึ่งจะมีคุณสมบัติดังต่อไปนี้ ดูที่คู่มือ parse javascript sdk บันทึกข้อมูล https //www back4app com/docs/react native/parse sdk/react native save data สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการสร้าง parse objects 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 } ตอนนี้ให้ดำเนินการวิธีการสร้างงานเมื่อผู้ใช้คลิกที่ส่ง ที่ \pages/addtodo/index js\ คอมโพเนนต์ มาดำเนินการ \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 } หลังจากนั้น คุณจะสามารถสร้างงานบางอย่างได้แล้ว อย่าลังเลที่จะสร้างงานมากเท่าที่คุณต้องการ ในขั้นตอนถัดไปคุณจะทำการค้นหางานเหล่านั้น 3 การค้นหา & การกรองงาน ตอนนี้ที่คุณได้สร้างงานบางอย่างแล้ว ถึงเวลาที่จะใช้ parse react native lib คุณจะเขียนคำถามบางอย่างและส่งไปยัง \useparsequery\ hook คำถามจะทำการแสดงรายการงานที่ยังไม่เสร็จในหมวดการเรียนรู้ นี่คือกรณีการใช้งานครั้งแรกของ hook คุณจะสร้างคำถามแบบดึงข้อมูลครั้งเดียว โดยการตั้งค่า \enablelivequery\ false\ , ซึ่งจะทำงานเมื่อคอมโพเนนต์หน้าเรียนรู้ถูกเรนเดอร์ \enablelivequery\ เป็น \true\ โดยค่าเริ่มต้น และการเปลี่ยนเป็น \false\ จะปิดการสมัครสมาชิกการเปลี่ยนแปลงแบบเรียลไทม์ ใน \pages/learning/index js\ คอมโพเนนต์ มาลองเขียน \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'); ส่งคำถามเป็นอาร์กิวเมนต์ไปยัง \useparsequery\ hook const {results} = useparsequery(query, {enablelivequery false}); โค้ดข้างต้นแสดงการใช้งานพื้นฐานสำหรับ parse hook ใช้ hook useparsequery เป็นทรัพยากรใหม่ที่คุณสามารถใช้กับ parse query ใด ๆ ใช้ ความสามารถทั้งหมดของ parse query https //docs parseplatform org/js/guide/#queries เพื่อดึงวัตถุข้อมูลของคุณและ hook จะทำให้ประสบการณ์นี้ดียิ่งขึ้น หลังจากได้รับผลลัพธ์แล้ว ให้ส่งต่อไปยังคอมโพเนนต์ tasklist เพื่อแสดงงานในแอป 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; แอปของคุณควรแสดงรายการงานได้สำเร็จเช่นนี้ 4 การเปลี่ยนแปลงแบบเรียลไทม์ การใช้งานครั้งที่สองที่คุณจะสำรวจคือการอัปเดตแบบเรียลไทม์ โดย \useparsequery\ hook จะห่อหุ้ม parse live query และให้การสนับสนุนการเปลี่ยนแปลงแบบเรียลไทม์โดยไม่ต้องตั้งค่าเพิ่มเติม เมื่อส่งผ่านคำถามไปยัง hook มันจะสร้างการเชื่อมต่อ websocket เพื่อสื่อสารกับเซิร์ฟเวอร์ back4app livequery ซึ่งจะซิงโครไนซ์โดยอัตโนมัติ คุณจะเพิ่มฟีเจอร์นี้ไปยังงานในหมวดช็อปปิ้ง สิ่งสำคัญคือต้องทราบว่า live query และ back4app subdomain ต้องเปิดใช้งานใน back4app dashboard app ของคุณ เมื่อคุณทำเช่นนั้น ให้เพิ่ม url subdomain ของคุณไปที่ \initializeparse\ และผลลัพธ์จาก parse react native hook จะมีข้อมูลที่อัปเดตเสมอ หากคุณไม่กำหนดค่า subdomain \useparsequery\ hook จะไม่สามารถดึงข้อมูลแบบเรียลไทม์ได้ 1 // src/index js 2 initializeparse( 3 '\<yoursubdomain> b4a io', 4 'application id', 5 'javascript key' 6 ); ใน \pages/shopping/index js\ คอมโพเนนต์ ให้เรามาเขียน \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'); จากนั้น ให้ส่งผ่านคำถามเป็นอาร์กิวเมนต์ไปยัง \useparsequery\ hook const {results, isloading, issyncing} = useparsequery(query); โปรดทราบว่าไม่มีความจำเป็นต้องใช้พารามิเตอร์เพิ่มเติมเนื่องจากการเปลี่ยนแปลงแบบเรียลไทม์เปิดใช้งานโดยค่าเริ่มต้น หลังจากได้รับผลลัพธ์แล้ว ให้ส่งต่อไปยัง \tasklist\ คอมโพเนนต์เพื่อแสดงงานในแอป 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 การสนับสนุนแบบออฟไลน์ กรณีการใช้งานครั้งที่สามสำหรับ \@parse/react native\ คือการใช้การแคชผลลัพธ์ของการค้นหาแบบออฟไลน์ สิ่งนี้มีประโยชน์ในกรณีที่แอป react native ของคุณต้องทำงานเมื่อผู้ใช้มีความล่าช้าในเครือข่ายหรือปัญหาการเชื่อมต่ออินเทอร์เน็ต การสนับสนุนแบบออฟไลน์ช่วยปรับปรุงความสามารถในการตอบสนองของแอป react native ของคุณและประสบการณ์ของผู้ใช้ ข่าวดีคือไม่ต้องใช้ขั้นตอนเพิ่มเติม! วิธีการแบบออฟไลน์แรกและการสมัครสมาชิกแบบเรียลไทม์เปิดใช้งานโดยค่าเริ่มต้น โดยสรุป การใช้ \useparsequery\ ฮุคจะรับประกันว่าแอปของคุณจะทำการแคชผลลัพธ์ของการค้นหาเพื่อการสนับสนุนแบบออฟไลน์ร่วมกับการสมัครสมาชิก live query สำหรับเมื่อผู้ใช้ของคุณกลับมาออนไลน์ 6 การจำกัดและการจัดเรียงการค้นหา สมมติว่ารายการงานจากหมวดหมู่การทำงานมีมากเกินไปสำหรับคนที่จะจัดการและคุณต้องการแสดงเฉพาะบางส่วนสำหรับวันนั้น นอกจากนี้ ให้เรียงตามวันที่สร้าง ใน \pages/shopping/index js\ คอมโพเนนต์ มาลองเขียน \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 จากนั้น ส่งคำค้นหาเป็นอาร์กิวเมนต์ไปยัง \useparsequery\ ฮุคและส่งต่อไปยัง \tasklist\ คอมโพเนนต์เพื่อแสดงงานในแอป 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 การระบุอาร์กิวเมนต์ของ useparsequery คุณใช้ \@parse/react native\ เพื่อดึงข้อมูลจาก back4app พร้อมฟีเจอร์เช่น live query ในขั้นตอนก่อนหน้า ดังนั้นจึงต้องมีการอธิบายเกี่ยวกับอินเตอร์เฟซที่ส่งออก ฮุค \useparsequery\ ยอมรับ \parse query\ และ \useparsequeryoptions\ อ็อบเจ็กต์เป็นอาร์กิวเมนต์ของมัน อ็อบเจ็กต์การกำหนดค่าตัวเลือกเริ่มต้นคือดังนี้ 1 { 2 enablelivequery true, 3 enablelocaldatastore true, 4 initialload \[] 5 } enablelivequery ฟีเจอร์ realtime live query เปิดใช้งานโดยค่าเริ่มต้น enablelocaldatastore เปิดใช้งานการเก็บข้อมูลในเครื่องของผลลัพธ์ข้อมูล ค่าเริ่มต้นคือ \true\ แต่คุณสามารถปิดการใช้งานได้โดยการตั้งค่าเป็น \false\ initialload หากคุณมีข้อมูลบางอย่างที่โหลดอยู่ในหน่วยความจำแล้ว คุณสามารถตั้งค่าให้แสดงตัวอย่างข้อมูลแก่ผู้ใช้ได้ เสร็จเรียบร้อย! ในจุดนี้ คุณได้เรียนรู้วิธีการใช้ \@parse/react native\ ไลบรารีโดยการสร้างแอป todo ของ react native บน back4app