Basic Queries

การค้นหาใน react native โดยใช้ parse บทนำ ในคู่มือนี้ คุณจะทำการค้นพื้นฐานใน parse และนำไปใช้ในคอมโพเนนต์ react native โดยใช้การค้นเหล่านี้ คุณจะได้เรียนรู้วิธีการตั้งค่าและค้นหาข้อมูลที่สมจริงโดยใช้ back4app และ react native ข้อกำหนดเบื้องต้น ในการทำตามบทเรียนนี้ คุณจะต้องมี แอป react native ที่สร้างและเชื่อมต่อกับ back4app หากคุณต้องการทดสอบ/ใช้เลย์เอาต์หน้าจอที่จัดเตรียมโดยคู่มือนี้ คุณควรตั้งค่า react native paper react native paper ไลบรารี เป้าหมาย ค้นหาข้อมูลที่จัดเก็บใน back4app จากแอป react native 1 การเข้าใจคลาส parse query การดำเนินการค้นหาใด ๆ ใน parse จะใช้ parse query parse query ซึ่งจะช่วยให้คุณดึงข้อมูลเฉพาะจากฐานข้อมูลของคุณตลอดทั้งแอปของคุณ เป็นสิ่งสำคัญที่ต้องรู้ว่า parse query parse query จะถูกแก้ไขเฉพาะหลังจากเรียกใช้วิธีการดึงข้อมูล (เช่น parse query find parse query find หรือ parse query get parse query get ) ดังนั้นการค้นหาสามารถตั้งค่าและมีการปรับแต่งหลายอย่างที่สามารถเชื่อมโยงกันได้ก่อนที่จะถูกเรียกใช้งานจริง ในการสร้าง parse query parse query ใหม่ คุณต้องส่งพารามิเตอร์เป็น parse object parse object ซึ่งเป็นคลาสที่จะเก็บผลลัพธ์การค้นหาของคุณ ตัวอย่างการค้นหาสามารถดูได้ด้านล่าง ซึ่งมีการค้นหาคลาส profile profile ที่สมมติขึ้น 1 // this will create your query 2 let parsequery = new parse query("profile"); 3 // the query will resolve only after calling this method 4 let queryresult = await parsequery find(); คุณสามารถอ่านเพิ่มเติมเกี่ยวกับ parse query parse query คลาส ที่นี่ในเอกสารทางการ https //parseplatform org/parse sdk js/api/master/parse query html 2 บันทึกข้อมูลบางอย่างใน back4app มาสร้างคลาส profile profile ซึ่งจะเป็นเป้าหมายของการค้นหาของเราในคู่มือนี้ ใน parse js console สามารถรันโค้ด javascript ได้โดยตรง โดยการค้นหาและอัปเดตเนื้อหาฐานข้อมูลแอปพลิเคชันของคุณโดยใช้คำสั่ง js sdk รันโค้ดด้านล่างจาก js console ของคุณและใส่ข้อมูลใน back4app นี่คือรูปลักษณ์ของ js console ในแดชบอร์ดของคุณ ไปข้างหน้าและสร้างคลาส profile profile ด้วยเนื้อหาตัวอย่างดังต่อไปนี้ 1 // add profile objects and create table 2 // adam sandler 3 let profile = new parse object('profile'); 4 profile set('name', 'adam sandler'); 5 profile set('birthday', new date('09/09/1966')); 6 profile set('friendcount', 2); 7 profile set('favoritefoods', \['lobster', 'bread']); 8 await profile save(); 9&#x9; 10 // adam levine 11 profile = new parse object('profile'); 12 profile set('name', 'adam levine'); 13 profile set('birthday', new date('03/18/1979')); 14 profile set('friendcount', 52); 15 profile set('favoritefoods', \['cake', 'bread']); 16 await profile save(); 17&#x9; 18 // carson kressley 19 profile = new parse object('profile'); 20 profile set('name', 'carson kressley'); 21 profile set('birthday', new date('11/11/1969')); 22 profile set('friendcount', 12); 23 profile set('favoritefoods', \['fish', 'cookies']); 24 await profile save(); 25&#x9; 26 // dan aykroyd 27 profile = new parse object('profile'); 28 profile set('name', 'dan aykroyd'); 29 profile set('birthday', new date('07/01/1952')); 30 profile set('friendcount', 66); 31 profile set('favoritefoods', \['jam', 'peanut butter']); 32 await profile save(); 33&#x9; 34 // eddie murphy 35 profile = new parse object('profile'); 36 profile set('name', 'eddie murphy'); 37 profile set('birthday', new date('04/03/1961')); 38 profile set('friendcount', 49); 39 profile set('favoritefoods', \['lettuce', 'pepper']); 40 await profile save(); 41&#x9; 42 // fergie 43 profile = new parse object('profile'); 44 profile set('name', 'fergie'); 45 profile set('birthday', new date('03/27/1975')); 46 profile set('friendcount', 55); 47 profile set('favoritefoods', \['lobster', 'shrimp']); 48 await profile save(); 49&#x9; 50 console log('success!'); 3 สืบค้นข้อมูล ตอนนี้คุณมีคลาสที่มีข้อมูลแล้ว เราสามารถทำการสืบค้นพื้นฐานในนั้นได้ มาลองเริ่มต้นด้วยการกรอง profile profile ผลลัพธ์ตามชื่อ ซึ่งเป็นฟิลด์ประเภทสตริง โดยค้นหาค่าที่มีชื่อ adam adam โดยใช้ parse query contains parse query contains วิธีการ 1 // create your query 2 let parsequery = new parse query('profile'); 3&#x9; 4 // `contains` is a basic query method that checks if string field 5 // contains a specific substring 6 parsequery contains('name', 'adam'); 7&#x9; 8 // the query will resolve only after calling this method, retrieving 9 // an array of `parse objects` 10 let queryresults = await parsequery find(); 11&#x9; 12 // let's show the results 13 for (let result of queryresults) { 14 // you access `parse objects` attributes by using ` get` 15 console log(result get('name')); 16 }; ตอนนี้เรามาทำการค้นหาตามฟิลด์ประเภทจำนวน friendcount friendcount โดยใช้วิธีการค้นหาอีกวิธีหนึ่งที่พบบ่อย, parse query greaterthan parse query greaterthan ในกรณีนี้ เราต้องการผู้ใช้ profiles profiles ที่จำนวนเพื่อนมากกว่า 20 1 // create your query 2 let parsequery = new parse query('profile'); 3&#x9; 4 // `greaterthan` is a basic query method that does what it 5 // says on the tin 6 parsequery greaterthan('friendcount', 20); 7&#x9; 8 // the query will resolve only after calling this method, retrieving 9 // an array of `parse objects` 10 let queryresults = await parsequery find(); 11&#x9; 12 // let's show the results 13 for (let result of queryresults) { 14 // you access `parse objects` attributes by using ` get` 15 console log(`name ${result get('name')}, friend count ${result get('friendcount')}`); 16 }; วิธีการค้นหาอื่น ๆ ที่เกิดขึ้นซ้ำคือ parse query ascending parse query ascending และ parse query descending parse query descending , ซึ่งรับผิดชอบในการจัดเรียงคำค้นของคุณ การจัดเรียงนี้สามารถทำได้ในประเภทข้อมูลส่วนใหญ่ ดังนั้นเรามาจัดเรียงคำค้นตามฟิลด์วันที่ birthday birthday โดยคนที่อายุน้อยที่สุด 1 // create your query 2 let parsequery = new parse query('profile'); 3&#x9; 4 // `descending` and `ascending` can and should be chained 5 // with other query methods to improve your queries 6 parsequery descending('birthday'); 7&#x9; 8 // the query will resolve only after calling this method, retrieving 9 // an array of `parse objects` 10 let queryresults = await parsequery find(); 11&#x9; 12 // let's show the results 13 for (let result of queryresults) { 14 // you access `parse objects` attributes by using ` get` 15 console log(`name ${result get('name')}, birthday ${result get('birthday')}`); 16 }; ตามที่กล่าวไว้ที่นี่ก่อนหน้านี้ คุณสามารถและควรเชื่อมโยงวิธีการค้นหาเพื่อให้ได้ผลลัพธ์ที่ละเอียดมากขึ้น มารวมตัวอย่างก่อนหน้านี้ในคำขอค้นหาเดียวกัน 1 // create your query 2 let parsequery = new parse query('profile'); 3&#x9; 4 parsequery contains('name', 'adam'); 5 parsequery greaterthan('friendcount', 20); 6 parsequery descending('birthday'); 7&#x9; 8 // the query will resolve only after calling this method, retrieving 9 // an array of `parse objects` 10 let queryresults = await parsequery find(); 11&#x9; 12 // let's show the results 13 for (let result of queryresults) { 14 // you access `parse objects` attributes by using ` get` 15 console log(`name ${result get('name')}, friend count ${result get('friendcount')}, birthday ${result get('birthday')}`); 16 }; 4 คำค้นจากคอมโพเนนต์ react native ตอนนี้เรามาใช้คำค้นหาตัวอย่างของเราในคอมโพเนนต์ใน react native กัน โดยมีอินเทอร์เฟซที่เรียบง่ายซึ่งมีรายการแสดงผลลัพธ์และยังมีปุ่ม 4 ปุ่มสำหรับเรียกใช้คำค้นหา นี่คือวิธีการจัดเรียงโค้ดคอมโพเนนต์ โปรดสังเกตที่ doquery doquery ฟังก์ชัน ซึ่งมีโค้ดตัวอย่างจากก่อนหน้านี้ javascript 1 import react, {usestate} from 'react'; 2 import {alert, image, view, scrollview, stylesheet} from 'react native'; 3 import parse from 'parse/react native'; 4 import { 5 list, 6 title, 7 button as paperbutton, 8 text as papertext, 9 } from 'react native paper'; 10&#x9; 11 export const booklist = () => { 12 // state variable 13 const \[queryresults, setqueryresults] = usestate(null); 14&#x9; 15 const doquerybyname = async function () { 16 // create our parse query instance so methods can be chained 17 // reading parse objects is done by using parse query 18 const parsequery = new parse query('profile'); 19&#x9; 20 // `contains` is a basic query method that checks if string field 21 // contains a specific substring 22 parsequery contains('name', 'adam'); 23&#x9; 24 try { 25 let profiles = await parsequery find(); 26 setqueryresults(profiles); 27 return true; 28 } catch (error) { 29 // error can be caused by lack of internet connection 30 alert alert('error!', error message); 31 return false; 32 } 33 }; 34&#x9; 35 const doquerybyfriendcount = async function () { 36 // create our parse query instance so methods can be chained 37 // reading parse objects is done by using parse query 38 const parsequery = new parse query('profile'); 39&#x9; 40 // `greaterthan` is a basic query method that does what it 41 // says on the tin 42 parsequery greaterthan('friendcount', 20); 43&#x9; 44 try { 45 let profiles = await parsequery find(); 46 setqueryresults(profiles); 47 return true; 48 } catch (error) { 49 // error can be caused by lack of internet connection 50 alert alert('error!', error message); 51 return false; 52 } 53 }; 54&#x9; 55 const doquerybyordering = async function () { 56 // create our parse query instance so methods can be chained 57 // reading parse objects is done by using parse query 58 const parsequery = new parse query('profile'); 59&#x9; 60 // `descending` and `ascending` can and should be chained 61 // with other query methods to improve your queries 62 parsequery descending('birthday'); 63&#x9; 64 try { 65 let profiles = await parsequery find(); 66 setqueryresults(profiles); 67 return true; 68 } catch (error) { 69 // error can be caused by lack of internet connection 70 alert alert('error!', error message); 71 return false; 72 } 73 }; 74&#x9; 75 const doquerybyall = async function () { 76 // create our parse query instance so methods can be chained 77 // reading parse objects is done by using parse query 78 const parsequery = new parse query('profile'); 79&#x9; 80 parsequery contains('name', 'adam'); 81 parsequery greaterthan('friendcount', 20); 82 parsequery descending('birthday'); 83&#x9; 84 try { 85 let profiles = await parsequery find(); 86 setqueryresults(profiles); 87 return true; 88 } catch (error) { 89 // error can be caused by lack of internet connection 90 alert alert('error!', error message); 91 return false; 92 } 93 }; 94&#x9; 95 const clearqueryresults = async function () { 96 setqueryresults(null); 97 return true; 98 }; 99&#x9; 100 return ( 101 <> 102 \<view style={styles header}> 103 \<image 104 style={styles header logo} 105 source={ { 106 uri 107 'https //blog back4app com/wp content/uploads/2019/05/back4app white logo 500px png', 108 } } 109 /> 110 \<papertext style={styles header text}> 111 \<papertext style={styles header text bold}> 112 {'react native on back4app '} 113 \</papertext> 114 {' basic queries'} 115 \</papertext> 116 \</view> 117 \<scrollview style={styles wrapper}> 118 \<view> 119 \<title>{'result list'}\</title> 120 {/ book list /} 121 {queryresults !== null && 122 queryresults !== undefined && 123 queryresults map((profile) => ( 124 \<list item 125 key={profile id} 126 title={profile get('name')} 127 description={`friend count ${profile get( 128 'friendcount', 129 )}, birthday ${profile get('birthday')}`} 130 titlestyle={styles list text} 131 style={styles list item} 132 /> 133 ))} 134 {queryresults === null || 135 queryresults === undefined || 136 (queryresults !== null && 137 queryresults !== undefined && 138 queryresults length <= 0) ? ( 139 \<papertext>{'no results here!'}\</papertext> 140 ) null} 141 \</view> 142 \<view> 143 \<title>{'query buttons'}\</title> 144 \<paperbutton 145 onpress={() => doquerybyname()} 146 mode="contained" 147 icon="search web" 148 color={'#208aec'} 149 style={styles list button}> 150 {'query by name'} 151 \</paperbutton> 152 \<paperbutton 153 onpress={() => doquerybyfriendcount()} 154 mode="contained" 155 icon="search web" 156 color={'#208aec'} 157 style={styles list button}> 158 {'query by friend count'} 159 \</paperbutton> 160 \<paperbutton 161 onpress={() => doquerybyordering()} 162 mode="contained" 163 icon="search web" 164 color={'#208aec'} 165 style={styles list button}> 166 {'query by ordering'} 167 \</paperbutton> 168 \<paperbutton 169 onpress={() => doquerybyall()} 170 mode="contained" 171 icon="search web" 172 color={'#208aec'} 173 style={styles list button}> 174 {'query by all'} 175 \</paperbutton> 176 \<paperbutton 177 onpress={() => clearqueryresults()} 178 mode="contained" 179 icon="delete" 180 color={'#208aec'} 181 style={styles list button}> 182 {'clear results'} 183 \</paperbutton> 184 \</view> 185 \</scrollview> 186 \</> 187 ); 188 }; 189&#x9; 190 // these define the screen component styles 191 const styles = stylesheet create({ 192 header { 193 alignitems 'center', 194 paddingtop 30, 195 paddingbottom 50, 196 backgroundcolor '#208aec', 197 }, 198 header logo { 199 height 50, 200 width 220, 201 resizemode 'contain', 202 }, 203 header text { 204 margintop 15, 205 color '#f0f0f0', 206 fontsize 16, 207 }, 208 header text bold { 209 color '#fff', 210 fontweight 'bold', 211 }, 212 wrapper { 213 width '90%', 214 alignself 'center', 215 }, 216 list button { 217 margintop 6, 218 marginleft 15, 219 height 40, 220 }, 221 list item { 222 borderbottomwidth 1, 223 borderbottomcolor 'rgba(0, 0, 0, 0 12)', 224 }, 225 list text { 226 fontsize 15, 227 }, 228 });1 import react, {fc, reactelement, usestate} from 'react'; 2 import {alert, image, view, scrollview, stylesheet} from 'react native'; 3 import parse from 'parse/react native'; 4 import { 5 list, 6 title, 7 button as paperbutton, 8 text as papertext, 9 } from 'react native paper'; 10&#x9; 11 export const querylist fc<{}> = ({}) reactelement => { 12 // state variable 13 const \[queryresults, setqueryresults] = usestate(null); 14&#x9; 15 const doquerybyname = async function () promise\<boolean> { 16 // create our parse query instance so methods can be chained 17 // reading parse objects is done by using parse query 18 const parsequery parse query = new parse query('profile'); 19&#x9; 20 // `contains` is a basic query method that checks if string field 21 // contains a specific substring 22 parsequery contains('name', 'adam'); 23&#x9; 24 try { 25 let profiles \[parse object] = await parsequery find(); 26 setqueryresults(profiles); 27 return true; 28 } catch (error) { 29 // error can be caused by lack of internet connection 30 alert alert('error!', error message); 31 return false; 32 } 33 }; 34&#x9; 35 const doquerybyfriendcount = async function () promise\<boolean> { 36 // create our parse query instance so methods can be chained 37 // reading parse objects is done by using parse query 38 const parsequery parse query = new parse query('profile'); 39&#x9; 40 // `greaterthan` is a basic query method that does what it 41 // says on the tin 42 parsequery greaterthan('friendcount', 20); 43&#x9; 44 try { 45 let profiles \[parse object] = await parsequery find(); 46 setqueryresults(profiles); 47 return true; 48 } catch (error) { 49 // error can be caused by lack of internet connection 50 alert alert('error!', error message); 51 return false; 52 } 53 }; 54&#x9; 55 const doquerybyordering = async function () promise\<boolean> { 56 // create our parse query instance so methods can be chained 57 // reading parse objects is done by using parse query 58 const parsequery parse query = new parse query('profile'); 59&#x9; 60 // `descending` and `ascending` can and should be chained 61 // with other query methods to improve your queries 62 parsequery descending('birthday'); 63&#x9; 64 try { 65 let profiles \[parse object] = await parsequery find(); 66 setqueryresults(profiles); 67 return true; 68 } catch (error) { 69 // error can be caused by lack of internet connection 70 alert alert('error!', error message); 71 return false; 72 } 73 }; 74&#x9; 75 const doquerybyall = async function () promise\<boolean> { 76 // create our parse query instance so methods can be chained 77 // reading parse objects is done by using parse query 78 const parsequery parse query = new parse query('profile'); 79&#x9; 80 parsequery contains('name', 'adam'); 81 parsequery greaterthan('friendcount', 20); 82 parsequery descending('birthday'); 83&#x9; 84 try { 85 let profiles \[parse object] = await parsequery find(); 86 setqueryresults(profiles); 87 return true; 88 } catch (error) { 89 // error can be caused by lack of internet connection 90 alert alert('error!', error message); 91 return false; 92 } 93 }; 94&#x9; 95 const clearqueryresults = async function () promise\<boolean> { 96 setqueryresults(null); 97 return true; 98 }; 99&#x9; 100 return ( 101 <> 102 \<view style={styles header}> 103 \<image 104 style={styles header logo} 105 source={ { 106 uri 107 'https //blog back4app com/wp content/uploads/2019/05/back4app white logo 500px png', 108 } } 109 /> 110 \<papertext style={styles header text}> 111 \<papertext style={styles header text bold}> 112 {'react native on back4app '} 113 \</papertext> 114 {' basic queries'} 115 \</papertext> 116 \</view> 117 \<scrollview style={styles wrapper}> 118 \<view> 119 \<title>{'result list'}\</title> 120 {/ book list /} 121 {queryresults !== null && 122 queryresults !== undefined && 123 queryresults map((profile parse object) => ( 124 \<list item 125 key={profile id} 126 title={profile get('name')} 127 description={`friend count ${profile get( 128 'friendcount', 129 )}, birthday ${profile get('birthday')}`} 130 titlestyle={styles list text} 131 style={styles list item} 132 /> 133 ))} 134 {queryresults === null || 135 queryresults === undefined || 136 (queryresults !== null && 137 queryresults !== undefined && 138 queryresults length <= 0) ? ( 139 \<papertext>{'no results here!'}\</papertext> 140 ) null} 141 \</view> 142 \<view> 143 \<title>{'query buttons'}\</title> 144 \<paperbutton 145 onpress={() => doquerybyname()} 146 mode="contained" 147 icon="search web" 148 color={'#208aec'} 149 style={styles list button}> 150 {'query by name'} 151 \</paperbutton> 152 \<paperbutton 153 onpress={() => doquerybyfriendcount()} 154 mode="contained" 155 icon="search web" 156 color={'#208aec'} 157 style={styles list button}> 158 {'query by friend count'} 159 \</paperbutton> 160 \<paperbutton 161 onpress={() => doquerybyordering()} 162 mode="contained" 163 icon="search web" 164 color={'#208aec'} 165 style={styles list button}> 166 {'query by ordering'} 167 \</paperbutton> 168 \<paperbutton 169 onpress={() => doquerybyall()} 170 mode="contained" 171 icon="search web" 172 color={'#208aec'} 173 style={styles list button}> 174 {'query by all'} 175 \</paperbutton> 176 \<paperbutton 177 onpress={() => clearqueryresults()} 178 mode="contained" 179 icon="delete" 180 color={'#208aec'} 181 style={styles list button}> 182 {'clear results'} 183 \</paperbutton> 184 \</view> 185 \</scrollview> 186 \</> 187 ); 188 }; 189&#x9; 190 // these define the screen component styles 191 const styles = stylesheet create({ 192 header { 193 alignitems 'center', 194 paddingtop 30, 195 paddingbottom 50, 196 backgroundcolor '#208aec', 197 }, 198 header logo { 199 height 50, 200 width 220, 201 resizemode 'contain', 202 }, 203 header text { 204 margintop 15, 205 color '#f0f0f0', 206 fontsize 16, 207 }, 208 header text bold { 209 color '#fff', 210 fontweight 'bold', 211 }, 212 wrapper { 213 width '90%', 214 alignself 'center', 215 }, 216 list button { 217 margintop 6, 218 marginleft 15, 219 height 40, 220 }, 221 list item { 222 borderbottomwidth 1, 223 borderbottomcolor 'rgba(0, 0, 0, 0 12)', 224 }, 225 list text { 226 fontsize 15, 227 }, 228 }); นี่คือวิธีที่ส่วนประกอบควรมีลักษณะหลังจากการเรนเดอร์และการค้นหาด้วยฟังก์ชันการค้นหาทั้งหมด บทสรุป ในตอนท้ายของคู่มือนี้ คุณได้เรียนรู้ว่าการค้นหาข้อมูลพื้นฐานทำงานอย่างไรบน parse และวิธีการดำเนินการเหล่านี้บน back4app จากแอป react native ในคู่มือต่อไป คุณจะสำรวจ parse query parse query ศักยภาพทั้งหมดโดยใช้วิธีการทั้งหมดที่มีอยู่ในคลาสนี้