Data types

9 นาที

การวิเคราะห์ประเภทข้อมูลในคอมโพเนนต์ react native บทนำ ในหัวใจของฟีเจอร์ parse core คือการจัดการวัตถุข้อมูล parse อนุญาตให้คุณจัดเก็บและค้นหาข้อมูลได้อย่างตรงไปตรงมาโดยใช้ sdk หรือ api (rest หรือ graphql) ของตน ฟีเจอร์วัตถุข้อมูลทั้งหมดถูกสร้างขึ้นโดยใช้ \parse object\ คลาส ซึ่งฟิลด์อาจประกอบด้วยคู่คีย์ ค่า ของประเภทข้อมูลที่เข้ากันได้กับ json หลักประเภทข้อมูลที่สามารถกำหนดให้กับฟิลด์ของวัตถุมีดังนี้ \หมายเลข\ จำนวนเต็ม (42) หรือจำนวนทศนิยม (42 5) โดยที่ ‘ ’ เป็นตัวแบ่งทศนิยม; \บูลีน\ ค่าจริงหรือเท็จ; \สตริง\ สตริงที่สามารถยาวได้ถึง 2147483647 ตัวอักษร โปรดทราบว่าค่าที่มีขนาดใหญ่เช่นนี้จะทำให้การดำเนินการข้อมูลช้าลง; \datetime\ \datetime\ วัตถุที่จัดเก็บในรูปแบบ utc เป็นค่าเริ่มต้น หากคุณต้องการใช้เขตเวลาอื่น การแปลงจะต้องทำด้วยตนเอง; \อาร์เรย์\ อาร์เรย์ที่มีข้อมูลในรูปแบบที่เข้ากันได้กับ parse \วัตถุ\ วัตถุ json ที่มีข้อมูล parse ใด ๆ เมื่อมีใน sdk การเรียกใช้ \include()\ จะนำรายละเอียดจากคุณสมบัติของวัตถุ เมื่อคุณเลือกใช้ประเภท array เราขอแนะนำให้เก็บวัตถุในอาร์เรย์ให้มีขนาดเล็ก เนื่องจากอาจส่งผลต่อประสิทธิภาพโดยรวมของการดำเนินการข้อมูลของคุณ คำแนะนำของเราคือการใช้ประเภท array หากไม่เกิน 20 องค์ประกอบและไม่เติบโตขึ้นตามเวลา แทนที่จะใช้ประเภท array คุณสามารถใช้ประเภท pointer และ relations เป็นทางเลือกได้ ในคู่มือนี้ คุณจะได้เรียนรู้วิธีการจัดเก็บข้อมูลในแต่ละประเภทข้อมูลพื้นฐานที่ระบุไว้ข้างต้น คุณจะสร้างส่วนประกอบการลงทะเบียนผลิตภัณฑ์ react native ซึ่งจะแสดงให้คุณเห็นวิธีการจัดรูปแบบ แปลง และบันทึกข้อมูลไปยัง parse server ของคุณใน react native parse ยังมีประเภทข้อมูล \geopoint\ เพื่อใช้พลังของทรัพยากรการระบุตำแหน่งทางภูมิศาสตร์ และข้อมูลเชิงสัมพันธ์เฉพาะของ parse โดยใช้ประเภท \pointer\ หรือ \relation\ คุณจะเห็นทั้งสองอย่างนี้ในคู่มือต่อไป ข้อกำหนดเบื้องต้น ในการทำตามบทแนะนำนี้ คุณจะต้องมี แอป react native ที่สร้างและเชื่อมต่อกับ back4app https //www back4app com/docs/react native/parse sdk/react native sdk หากคุณต้องการทดสอบ/ใช้เลย์เอาต์หน้าจอที่จัดเตรียมโดยคู่มือนี้ คุณควรตั้งค่า \react native paper\ ไลบรารี https //github com/callstack/react native paper เป้าหมาย เพื่อทำความเข้าใจประเภทข้อมูลพื้นฐานที่เข้ากันได้กับ parse และเพื่อจัดเก็บแต่ละประเภทข้อมูลบน parse จากคอมโพเนนต์ react native 1 ส่วนประกอบการสร้างผลิตภัณฑ์ เรามาสร้างโครงสร้างของส่วนประกอบกันก่อน มาทำให้มันง่ายและสร้างหน้าฟอร์มที่มีช่องกรอกข้อมูลหนึ่งช่องสำหรับแต่ละประเภทข้อมูล, สวิตช์หนึ่งตัว, และปุ่มส่งเพื่อบันทึกวัตถุ ข้อมูลเหล่านี้จะเก็บค่าฟิลด์ของคุณ \ผลิตภัณฑ์\ ฟิลด์ ชื่อ( \สตริง\ ), จำนวน( \หมายเลข\ ), ราคา( \หมายเลข\ ), สถานะพร้อมใช้งาน( \บูลีน\ ), วันหมดอายุ( \วันที่และเวลา\ ), และหมวดหมู่( \อาเรย์\ ) นอกจากนี้ คุณจะบันทึกฟิลด์ประเภท \วัตถุ\ เพิ่มเติมในวิธีการบันทึกของคุณด้วย แต่ฟิลด์นี้จะไม่ต้องการช่องกรอกข้อมูล สร้างคอมโพเนนต์แยกในไฟล์ที่เรียกว่า \productcreation js/productcreation tsx\ รวมถึงโค้ดต่อไปนี้ หรือเพิ่มลงในไฟล์แอปพลิเคชันหลักของคุณ ( \app js/app tsx\ หรือ \index js\ ) คุณสามารถใช้เลย์เอาต์นี้พร้อมสไตล์ที่สมบูรณ์โดยใช้ \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	 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	 27 const toggleproductavailable = () => setproductavailable(!productavailable); 28	 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	 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	 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	 27 const toggleproductavailable = () => setproductavailable(!productavailable); 28	 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	 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\ , คุณต้องจัดรูปแบบ \หมายเลข\ , \วันที่และเวลา\ , และ \อาเรย์\ ข้อมูลให้ถูกต้อง ตอนนี้เรามาสร้างฟังก์ชันการบันทึก ซึ่งจะดึงข้อมูลจากตัวแปรสถานะของคุณและใช้การแปลงข้อมูลที่เหมาะสม 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\ วิธีการใน javascript, สร้างอาร์เรย์ที่มีแต่ละรายการของฟิลด์หมวดหมู่ที่แยกด้วยเครื่องหมายจุลภาค โปรดทราบว่าข้อมูลของคุณตอนนี้อยู่ภายในวัตถุเดียว, ซึ่งสามารถตั้งค่าใน \parse object\ อินสแตนซ์ใหม่เพื่อบันทึกไปยังเซิร์ฟเวอร์โดยใช้ \parse object set()\ วิธีการ, ซึ่งรับสองอาร์กิวเมนต์ ชื่อฟิลด์และค่าที่จะตั้งค่า มาตั้งฟิลด์ใหม่ที่เรียกว่า \completedata\ , ซึ่งจะเป็นฟิลด์ประเภท \วัตถุ\ โดยมอบหมายวัตถุข้อมูลเดียวกันให้กับมัน ไปข้างหน้าและทำให้เสร็จสิ้น \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	 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	 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	 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	 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\ ลงไปในนั้น และเรียกใช้มันภายในปุ่มส่งฟอร์มของคุณ \onpress\ หลังจากสร้างผลิตภัณฑ์แล้ว คุณควรเห็นการแจ้งเตือนที่มีข้อมูลของมันเช่นนี้ เพื่อรับรองว่าข้อมูลของคุณถูกบันทึกบนเซิร์ฟเวอร์โดยใช้ประเภทข้อมูลที่ถูกต้อง คุณสามารถดูที่แดชบอร์ด parse ของคุณ คลิกที่ \ผลิตภัณฑ์\ ตารางข้อมูลและสังเกตว่าทุกคอลัมน์มีประเภทข้อมูลของมันเขียนอยู่ที่ส่วนหัว คลาสของคุณควรมีลักษณะดังนี้ บทสรุป ในตอนท้ายของคู่มือนี้ คุณได้เรียนรู้วิธีการบันทึกประเภทข้อมูลพื้นฐานแต่ละประเภทที่มีอยู่ใน parse โดยใช้คอมโพเนนต์ react native ในคู่มือต่อไป คุณจะได้เรียนรู้เกี่ยวกับข้อมูลเชิงสัมพันธ์ใน parse