Data types

การวิเคราะห์ประเภทข้อมูลในคอมโพเนนต์ react native บทนำ ในหัวใจของฟีเจอร์ parse core คือการจัดการวัตถุข้อมูล parse อนุญาตให้คุณจัดเก็บและค้นหาข้อมูลได้อย่างตรงไปตรงมาโดยใช้ sdk หรือ api (rest หรือ graphql) ของตน ฟีเจอร์วัตถุข้อมูลทั้งหมดถูกสร้างขึ้นโดยใช้ parse object parse object คลาส ซึ่งฟิลด์อาจประกอบด้วยคู่คีย์ ค่า ของประเภทข้อมูลที่เข้ากันได้กับ json หลักประเภทข้อมูลที่สามารถกำหนดให้กับฟิลด์ของวัตถุมีดังนี้ หมายเลข หมายเลข จำนวนเต็ม (42) หรือจำนวนทศนิยม (42 5) โดยที่ ‘ ’ เป็นตัวแบ่งทศนิยม; บูลีน บูลีน ค่าจริงหรือเท็จ; สตริง สตริง สตริงที่สามารถยาวได้ถึง 2147483647 ตัวอักษร โปรดทราบว่าค่าที่มีขนาดใหญ่เช่นนี้จะทำให้การดำเนินการข้อมูลช้าลง; datetime datetime datetime datetime วัตถุที่จัดเก็บในรูปแบบ utc เป็นค่าเริ่มต้น หากคุณต้องการใช้เขตเวลาอื่น การแปลงจะต้องทำด้วยตนเอง; อาร์เรย์ อาร์เรย์ อาร์เรย์ที่มีข้อมูลในรูปแบบที่เข้ากันได้กับ parse วัตถุ วัตถุ วัตถุ json ที่มีข้อมูล parse ใด ๆ เมื่อมีใน sdk การเรียกใช้ include() include() จะนำรายละเอียดจากคุณสมบัติของวัตถุ เมื่อคุณเลือกใช้ประเภท array เราขอแนะนำให้เก็บวัตถุในอาร์เรย์ให้มีขนาดเล็ก เนื่องจากอาจส่งผลต่อประสิทธิภาพโดยรวมของการดำเนินการข้อมูลของคุณ คำแนะนำของเราคือการใช้ประเภท array หากไม่เกิน 20 องค์ประกอบและไม่เติบโตขึ้นตามเวลา แทนที่จะใช้ประเภท array คุณสามารถใช้ประเภท pointer และ relations เป็นทางเลือกได้ ในคู่มือนี้ คุณจะได้เรียนรู้วิธีการจัดเก็บข้อมูลในแต่ละประเภทข้อมูลพื้นฐานที่ระบุไว้ข้างต้น คุณจะสร้างส่วนประกอบการลงทะเบียนผลิตภัณฑ์ react native ซึ่งจะแสดงให้คุณเห็นวิธีการจัดรูปแบบ แปลง และบันทึกข้อมูลไปยัง parse server ของคุณใน react native parse ยังมีประเภทข้อมูล geopoint geopoint เพื่อใช้พลังของทรัพยากรการระบุตำแหน่งทางภูมิศาสตร์ และข้อมูลเชิงสัมพันธ์เฉพาะของ parse โดยใช้ประเภท pointer pointer หรือ relation relation คุณจะเห็นทั้งสองอย่างนี้ในคู่มือต่อไป ข้อกำหนดเบื้องต้น ในการทำตามบทแนะนำนี้ คุณจะต้องมี แอป react native ที่สร้างและเชื่อมต่อกับ back4app หากคุณต้องการทดสอบ/ใช้เลย์เอาต์หน้าจอที่จัดเตรียมโดยคู่มือนี้ คุณควรตั้งค่า react native paper react native paper ไลบรารี เป้าหมาย เพื่อทำความเข้าใจประเภทข้อมูลพื้นฐานที่เข้ากันได้กับ parse และเพื่อจัดเก็บแต่ละประเภทข้อมูลบน parse จากคอมโพเนนต์ react native 1 ส่วนประกอบการสร้างผลิตภัณฑ์ เรามาสร้างโครงสร้างของส่วนประกอบกันก่อน มาทำให้มันง่ายและสร้างหน้าฟอร์มที่มีช่องกรอกข้อมูลหนึ่งช่องสำหรับแต่ละประเภทข้อมูล, สวิตช์หนึ่งตัว, และปุ่มส่งเพื่อบันทึกวัตถุ ข้อมูลเหล่านี้จะเก็บค่าฟิลด์ของคุณ ผลิตภัณฑ์ ผลิตภัณฑ์ ฟิลด์ ชื่อ( สตริง สตริง ), จำนวน( หมายเลข หมายเลข ), ราคา( หมายเลข หมายเลข ), สถานะพร้อมใช้งาน( บูลีน บูลีน ), วันหมดอายุ( วันที่และเวลา วันที่และเวลา ), และหมวดหมู่( อาเรย์ อาเรย์ ) นอกจากนี้ คุณจะบันทึกฟิลด์ประเภท วัตถุ วัตถุ เพิ่มเติมในวิธีการบันทึกของคุณด้วย แต่ฟิลด์นี้จะไม่ต้องการช่องกรอกข้อมูล สร้างคอมโพเนนต์แยกในไฟล์ที่เรียกว่า productcreation js/productcreation tsx productcreation js/productcreation tsx รวมถึงโค้ดต่อไปนี้ หรือเพิ่มลงในไฟล์แอปพลิเคชันหลักของคุณ ( app js/app tsx app js/app tsx หรือ index js index js ) คุณสามารถใช้เลย์เอาต์นี้พร้อมสไตล์ที่สมบูรณ์โดยใช้ react native paper react native paper หรือกำหนดฟอร์มที่กำหนดเองของคุณ productcreation js 1 import react, {usestate} from 'react'; 2 import { 3 alert, 4 image, 5 safeareaview, 6 statusbar, 7 stylesheet, 8 view, 9 } from 'react native'; 10 import parse from 'parse/react native'; 11 import { 12 button as paperbutton, 13 switch as paperswitch, 14 text as papertext, 15 textinput as papertextinput, 16 } from 'react native paper'; 17&#x9; 18 export const productcreation = () => { 19 // state variables 20 const \[productname, setproductname] = usestate(''); 21 const \[productquantity, setproductquantity] = usestate(''); 22 const \[productprice, setproductprice] = usestate(''); 23 const \[productavailable, setproductavailable] = usestate(false); 24 const \[productexpirationdate, setproductexpirationdate] = usestate(''); 25 const \[productcategories, setproductcategories] = usestate(''); 26&#x9; 27 const toggleproductavailable = () => setproductavailable(!productavailable); 28&#x9; 29 return ( 30 <> 31 \<statusbar backgroundcolor="#208aec" /> 32 \<safeareaview style={styles container}> 33 \<view style={styles header}> 34 \<image 35 style={styles header logo} 36 source={ { uri 'https //blog back4app com/wp content/uploads/2019/05/back4app white logo 500px png', } } 37 /> 38 \<papertext style={styles header text bold}> 39 {'react native on back4app'} 40 \</papertext> 41 \<papertext style={styles header text}>{'product creation'}\</papertext> 42 \</view> 43 \<view style={styles wrapper}> 44 {/ boolean type input /} 45 \<view style={styles switch container}> 46 \<papertext>{'available?'}\</papertext> 47 \<paperswitch 48 value={productavailable} 49 onvaluechange={toggleproductavailable} 50 /> 51 \</view> 52 {/ string type input /} 53 \<papertextinput 54 value={productname} 55 onchangetext={(text) => setproductname(text)} 56 label="name" 57 mode="outlined" 58 style={styles form input} 59 /> 60 {/ number type input (integer) /} 61 \<papertextinput 62 value={productquantity} 63 onchangetext={(text) => setproductquantity(text)} 64 label="quantity" 65 mode="outlined" 66 keyboardtype={'number pad'} 67 style={styles form input} 68 /> 69 {/ number type input (float) /} 70 \<papertextinput 71 value={productprice} 72 onchangetext={(text) => setproductprice(text)} 73 label="price" 74 mode="outlined" 75 keyboardtype={'numeric'} 76 style={styles form input} 77 /> 78 {/ date type input /} 79 \<papertextinput 80 value={productexpirationdate} 81 onchangetext={(text) => setproductexpirationdate(text)} 82 label="expiration date (mm/dd/yyyy)" 83 mode="outlined" 84 keyboardtype={'numbers and punctuation'} 85 style={styles form input} 86 /> 87 {/ array type input /} 88 \<papertextinput 89 value={productcategories} 90 onchangetext={(text) => setproductcategories(text)} 91 label="categories (separated by commas)" 92 mode="outlined" 93 style={styles form input} 94 /> 95 {/ product create button /} 96 \<paperbutton 97 onpress={() => createproduct()} 98 mode="contained" 99 icon="plus" 100 style={styles submit button}> 101 {'create product'} 102 \</paperbutton> 103 \</view> 104 \</safeareaview> 105 \</> 106 ); 107 }; 108&#x9; 109 // these define the screen component styles 110 const styles = stylesheet create({ 111 container { 112 flex 1, 113 backgroundcolor '#fff', 114 }, 115 wrapper { 116 width '90%', 117 alignself 'center', 118 }, 119 header { 120 alignitems 'center', 121 paddingtop 10, 122 paddingbottom 20, 123 backgroundcolor '#208aec', 124 }, 125 header logo { 126 width 170, 127 height 40, 128 marginbottom 10, 129 resizemode 'contain', 130 }, 131 header text bold { 132 color '#fff', 133 fontsize 14, 134 fontweight 'bold', 135 }, 136 header text { 137 margintop 3, 138 color '#fff', 139 fontsize 14, 140 }, 141 form input { 142 height 44, 143 marginbottom 16, 144 backgroundcolor '#fff', 145 fontsize 14, 146 }, 147 switch container { 148 flexdirection 'row', 149 alignitems 'center', 150 justifycontent 'space between', 151 paddingvertical 12, 152 marginbottom 16, 153 borderbottomwidth 1, 154 borderbottomcolor 'rgba(0, 0, 0, 0 3)', 155 }, 156 submit button { 157 width '100%', 158 maxheight 50, 159 alignself 'center', 160 backgroundcolor '#208aec', 161 }, 162 }); productcreation tsx 1 import react, {fc, reactelement, usestate} from 'react'; 2 import { 3 alert, 4 image, 5 safeareaview, 6 statusbar, 7 stylesheet, 8 view, 9 } from 'react native'; 10 import parse from 'parse/react native'; 11 import { 12 button as paperbutton, 13 switch as paperswitch, 14 text as papertext, 15 textinput as papertextinput, 16 } from 'react native paper'; 17&#x9; 18 export const productcreation fc<{}> = ({}) reactelement => { 19 // state variables 20 const \[productname, setproductname] = usestate(''); 21 const \[productquantity, setproductquantity] = usestate(''); 22 const \[productprice, setproductprice] = usestate(''); 23 const \[productavailable, setproductavailable] = usestate(false); 24 const \[productexpirationdate, setproductexpirationdate] = usestate(''); 25 const \[productcategories, setproductcategories] = usestate(''); 26&#x9; 27 const toggleproductavailable = () => setproductavailable(!productavailable); 28&#x9; 29 return ( 30 <> 31 \<statusbar backgroundcolor="#208aec" /> 32 \<safeareaview style={styles container}> 33 \<view style={styles header}> 34 \<image 35 style={styles header logo} 36 source={ { uri 'https //blog back4app com/wp content/uploads/2019/05/back4app white logo 500px png', } } 37 /> 38 \<papertext style={styles header text bold}> 39 {'react native on back4app'} 40 \</papertext> 41 \<papertext style={styles header text}>{'product creation'}\</papertext> 42 \</view> 43 \<view style={styles wrapper}> 44 {/ boolean type input /} 45 \<view style={styles switch container}> 46 \<papertext>{'available?'}\</papertext> 47 \<paperswitch 48 value={productavailable} 49 onvaluechange={toggleproductavailable} 50 /> 51 \</view> 52 {/ string type input /} 53 \<papertextinput 54 value={productname} 55 onchangetext={(text) => setproductname(text)} 56 label="name" 57 mode="outlined" 58 style={styles form input} 59 /> 60 {/ number type input (integer) /} 61 \<papertextinput 62 value={productquantity} 63 onchangetext={(text) => setproductquantity(text)} 64 label="quantity" 65 mode="outlined" 66 keyboardtype={'number pad'} 67 style={styles form input} 68 /> 69 {/ number type input (float) /} 70 \<papertextinput 71 value={productprice} 72 onchangetext={(text) => setproductprice(text)} 73 label="price" 74 mode="outlined" 75 keyboardtype={'numeric'} 76 style={styles form input} 77 /> 78 {/ date type input /} 79 \<papertextinput 80 value={productexpirationdate} 81 onchangetext={(text) => setproductexpirationdate(text)} 82 label="expiration date (mm/dd/yyyy)" 83 mode="outlined" 84 keyboardtype={'numbers and punctuation'} 85 style={styles form input} 86 /> 87 {/ array type input /} 88 \<papertextinput 89 value={productcategories} 90 onchangetext={(text) => setproductcategories(text)} 91 label="categories (separated by commas)" 92 mode="outlined" 93 style={styles form input} 94 /> 95 {/ product create button /} 96 \<paperbutton 97 onpress={() => createproduct()} 98 mode="contained" 99 icon="plus" 100 style={styles submit button}> 101 {'create product'} 102 \</paperbutton> 103 \</view> 104 \</safeareaview> 105 \</> 106 ); 107 }; 108&#x9; 109 // these define the screen component styles 110 const styles = stylesheet create({ 111 container { 112 flex 1, 113 backgroundcolor '#fff', 114 }, 115 wrapper { 116 width '90%', 117 alignself 'center', 118 }, 119 header { 120 alignitems 'center', 121 paddingtop 10, 122 paddingbottom 20, 123 backgroundcolor '#208aec', 124 }, 125 header logo { 126 width 170, 127 height 40, 128 marginbottom 10, 129 resizemode 'contain', 130 }, 131 header text bold { 132 color '#fff', 133 fontsize 14, 134 fontweight 'bold', 135 }, 136 header text { 137 margintop 3, 138 color '#fff', 139 fontsize 14, 140 }, 141 form input { 142 height 44, 143 marginbottom 16, 144 backgroundcolor '#fff', 145 fontsize 14, 146 }, 147 switch container { 148 flexdirection 'row', 149 alignitems 'center', 150 justifycontent 'space between', 151 paddingvertical 12, 152 marginbottom 16, 153 borderbottomwidth 1, 154 borderbottomcolor 'rgba(0, 0, 0, 0 3)', 155 }, 156 submit button { 157 width '100%', 158 maxheight 50, 159 alignself 'center', 160 backgroundcolor '#208aec', 161 }, 162 }); หลังจากตั้งค่าหน้าจอนี้ แอปพลิเคชันของคุณควรมีลักษณะดังนี้ โปรดทราบว่าแต่ละ ผลิตภัณฑ์ ผลิตภัณฑ์ มีช่องกรอกข้อความของตนเอง ยกเว้นสำหรับช่องสวิตช์บูลีน ซึ่งหมายความว่าข้อมูลในนั้นต้องแปลงเป็นประเภทข้อมูลที่สอดคล้องกันก่อนที่จะบันทึก 2 การแปลงข้อมูลที่ป้อน ก่อนที่จะบันทึกข้อมูลของคุณไปยัง parse object parse object , คุณต้องจัดรูปแบบ หมายเลข หมายเลข , วันที่และเวลา วันที่และเวลา , และ อาเรย์ อาเรย์ ข้อมูลให้ถูกต้อง ตอนนี้เรามาสร้างฟังก์ชันการบันทึก ซึ่งจะดึงข้อมูลจากตัวแปรสถานะของคุณและใช้การแปลงข้อมูลที่เหมาะสม productcreation js 1 const createproduct = async function () { 2 try { 3 // these values come from state variables 4 // convert data values to corresponding data types 5 const productnamevalue = productname; 6 const productquantityvalue = number(productquantity); 7 const productpricevalue = number(productprice); 8 const productavailablevalue = productavailable; 9 const productexpirationdatevalue = new date(productexpirationdate); 10 const productcategoriesvalue = productcategories split(','); 11 } catch (error) { 12 // error can be caused by wrong type of values in fields 13 alert alert('error!', error message); 14 return false; 15 } 16 }; productcreation tsx 1 const createproduct = async function () promise<\[boolean]> { 2 try { 3 // these values come from state variables 4 // convert data values to corresponding data types 5 const productnamevalue string = productname; 6 const productquantityvalue number = number(productquantity); 7 const productpricevalue number = number(productprice); 8 const productavailablevalue boolean = productavailable; 9 const productexpirationdatevalue date = new date(productexpirationdate); 10 const productcategoriesvalue string\[] = productcategories split(','); 11 } catch (error) { 12 // error can be caused by wrong type of values in fields 13 alert alert('error!', error message); 14 return false; 15 } 16 }; หมายเลข หมายเลข หมายเลข การแปลงข้อมูลจะทำการแคสต์ค่าเป็น หมายเลข หมายเลข วัตถุ javascript วันที่และเวลา วันที่และเวลา จะถูกแปลงโดยใช้ วันที่ วันที่ วัตถุ javascript constructor; อาร์เรย์ อาร์เรย์ จะถูกสร้างขึ้นโดยใช้ string split string split วิธีการใน javascript, สร้างอาร์เรย์ที่มีแต่ละรายการของฟิลด์หมวดหมู่ที่แยกด้วยเครื่องหมายจุลภาค โปรดทราบว่าข้อมูลของคุณตอนนี้อยู่ภายในวัตถุเดียว, ซึ่งสามารถตั้งค่าใน parse object parse object อินสแตนซ์ใหม่เพื่อบันทึกไปยังเซิร์ฟเวอร์โดยใช้ parse object set() parse object set() วิธีการ, ซึ่งรับสองอาร์กิวเมนต์ ชื่อฟิลด์และค่าที่จะตั้งค่า มาตั้งฟิลด์ใหม่ที่เรียกว่า completedata completedata , ซึ่งจะเป็นฟิลด์ประเภท วัตถุ วัตถุ โดยมอบหมายวัตถุข้อมูลเดียวกันให้กับมัน ไปข้างหน้าและทำให้เสร็จสิ้น createproduct createproduct ฟังก์ชันด้วยสิ่งต่อไปนี้ productcreation js 1 const createproduct = async function () { 2 try { 3 // these values come from state variables 4 // convert data values to corresponding data types 5 const productnamevalue = productname; 6 const productquantityvalue = number(productquantity); 7 const productpricevalue = number(productprice); 8 const productavailablevalue = productavailable; 9 const productexpirationdatevalue = new date(productexpirationdate); 10 const productcategoriesvalue = productcategories split(','); 11 } catch (error) { 12 // error can be caused by wrong type of values in fields 13 alert alert('error!', error message); 14 return false; 15 } 16&#x9; 17 // creates a new product parse object instance 18 let product = new parse object('product'); 19 20 // set data to parse object 21 product set('name', productnamevalue); 22 product set('quantity', productquantityvalue); 23 product set('price', productpricevalue); 24 product set('available', productavailablevalue); 25 product set('expirationdate', productexpirationdatevalue); 26 product set('categories', productcategoriesvalue); 27 product set('completedata', { 28 name productnamevalue, 29 quantity productquantityvalue, 30 price productpricevalue, 31 available productavailablevalue, 32 expirationdate productexpirationdatevalue, 33 categories productcategoriesvalue, 34 }); 35&#x9; 36 // after setting the values, save it on the server 37 try { 38 let savedproduct = await product save(); 39 // success 40 alert alert('success!', json stringify(savedproduct)); 41 return true; 42 } catch (error) { 43 // error can be caused by lack of internet connection 44 alert alert('error!', error message); 45 return false; 46 }; 47 }; productcreation tsx 1 const createproduct = async function () promise<\[boolean]> { 2 try { 3 // these values come from state variables 4 // convert data values to corresponding data types 5 const productnamevalue string = productname; 6 const productquantityvalue number = number(productquantity); 7 const productpricevalue number = number(productprice); 8 const productavailablevalue boolean = productavailable; 9 const productexpirationdatevalue date = new date(productexpirationdate); 10 const productcategoriesvalue string\[] = productcategories split(','); 11 } catch (error) { 12 // error can be caused by wrong type of values in fields 13 alert alert('error!', error message); 14 return false; 15 } 16&#x9; 17 // creates a new product parse object instance 18 let product parse object = new parse object('product'); 19 20 // set data to parse object 21 product set('name', productnamevalue); 22 product set('quantity', productquantityvalue); 23 product set('price', productpricevalue); 24 product set('available', productavailablevalue); 25 product set('expirationdate', productexpirationdatevalue); 26 product set('categories', productcategoriesvalue); 27 product set('completedata', { 28 name productnamevalue, 29 quantity productquantityvalue, 30 price productpricevalue, 31 available productavailablevalue, 32 expirationdate productexpirationdatevalue, 33 categories productcategoriesvalue, 34 }); 35&#x9; 36 // after setting the values, save it on the server 37 try { 38 let savedproduct parse object = await product save(); 39 // success 40 alert alert('success!', json stringify(savedproduct)); 41 return true; 42 } catch (error) { 43 // error can be caused by lack of internet connection 44 alert alert('error!', error message); 45 return false; 46 }; 47 }; คุณสามารถทดสอบส่วนประกอบได้แล้ว ใส่ฟังก์ชัน createproduct createproduct ลงไปในนั้น และเรียกใช้มันภายในปุ่มส่งฟอร์มของคุณ onpress onpress หลังจากสร้างผลิตภัณฑ์แล้ว คุณควรเห็นการแจ้งเตือนที่มีข้อมูลของมันเช่นนี้ เพื่อรับรองว่าข้อมูลของคุณถูกบันทึกบนเซิร์ฟเวอร์โดยใช้ประเภทข้อมูลที่ถูกต้อง คุณสามารถดูที่แดชบอร์ด parse ของคุณ คลิกที่ ผลิตภัณฑ์ ผลิตภัณฑ์ ตารางข้อมูลและสังเกตว่าทุกคอลัมน์มีประเภทข้อมูลของมันเขียนอยู่ที่ส่วนหัว คลาสของคุณควรมีลักษณะดังนี้ บทสรุป ในตอนท้ายของคู่มือนี้ คุณได้เรียนรู้วิธีการบันทึกประเภทข้อมูลพื้นฐานแต่ละประเภทที่มีอยู่ใน parse โดยใช้คอมโพเนนต์ react native ในคู่มือต่อไป คุณจะได้เรียนรู้เกี่ยวกับข้อมูลเชิงสัมพันธ์ใน parse