Parse en React: Tipos de Datos y Almacenamiento

analizar tipos de datos en un componente de react introducción en el corazón de la función parse core está la gestión de objetos de datos parse te permite almacenar y consultar sus datos de manera sencilla utilizando sus sdk o apis (rest o graphql) todas las características de los objetos de datos están construidas utilizando la \<font color="#2166ae">parse object\</font> clase, cuyos campos pueden contener pares clave valor de varios tipos de datos compatibles con json los tipos de datos primarios que se pueden asignar a los campos del objeto son los siguientes \<font color="#2166ae">número\</font> números enteros (42) o de punto flotante (42 5), siempre que ‘ ’ sea el separador decimal; \<font color="#2166ae">booleano\</font> valores verdaderos o falsos; \<font color="#2166ae">cadena\</font> una cadena que puede tener hasta 2147483647 caracteres ten en cuenta que valores tan grandes ralentizarán las operaciones de datos; \<font color="#2166ae">datetime\</font> \<font color="#2166ae">datetime\</font> objetos almacenados en formato utc por defecto si necesitas usar otra zona horaria, la conversión debe hacerse manualmente; \<font color="#2166ae">arreglo\</font> un arreglo que contiene datos en cualquier formato de datos compatible con parse objeto un objeto json que también contiene cualquier dato de parse cuando esté disponible en el sdk, una \<font color="#2166ae">include()\</font> llamada traerá detalles de la propiedad del objeto cuando elijas usar el tipo array, te recomendamos mantener los objetos de matriz pequeños, ya que esto puede afectar el rendimiento general de tus operaciones de datos nuestra recomendación es usar el tipo array si no excede los 20 elementos y no crece con el tiempo en lugar del tipo array, puedes usar los tipos pointer y relations como alternativa en esta guía, aprenderás cómo almacenar datos en cada uno de los tipos de datos básicos enumerados anteriormente construirás un componente de registro de productos en react, que te mostrará cómo formatear, convertir y guardar datos en tu parse server en react parse también ofrece los tipos de datos \<font color="#2166ae">geopoint \</font> para utilizar el poder de los recursos de geolocalización, y los datos relacionales específicos de parse utilizando los tipos \<font color="#2166ae">pointer \</font> o \<font color="#2166ae">relation\</font> verás ambos cubiertos en las siguientes guías requisitos previos para completar este tutorial, necesitarás una aplicación react creada y conectada a back4app https //www back4app com/docs/react/quickstart si deseas probar/utilizar el diseño de pantalla proporcionado por esta guía, deberías configurar la biblioteca https //ant design/docs/react/introduce objetivo entender los tipos de datos básicos compatibles con parse y almacenar cada tipo de dato en parse desde un componente react 1 el componente de creación de producto primero, creemos la estructura del componente hagámoslo simple y creemos una pantalla de formulario con una entrada de texto para cada tipo de dato, una casilla de verificación y un botón de enviar para guardar el objeto estas entradas recogerán los valores de campo nombre ( \<font color="#2166ae">producto \</font> ) , cantidad ( \<font color="#2166ae">cadena\</font> ) , precio ( \<font color="#2166ae">número\</font> ) , disponible ( \<font color="#2166ae">número\</font> ) , fecha de caducidad ( \<font color="#2166ae">booleano\</font> ) , y categorías ( \<font color="#2166ae">arreglo\</font> ) además, guardarás un campo de tipo \<font color="#2166ae">objeto \</font> adicional en tu método de guardado también, pero este no necesitará un campo de entrada crea un componente separado en un archivo llamado \<font color="#2166ae">productcreation js/productcreation tsx\</font> incluyendo el siguiente código, o añádelo a tu archivo principal de aplicación ( \<font color="#2166ae">app js/app tsx\</font> ) puedes usar este diseño con estilos completos utilizando \<font color="#2166ae">ant design\</font> y añadiendo el código css a tu \<font color="#2166ae">app css\</font> archivo o configurar tu propio formulario personalizado productcreation js 1 import react, { usestate } from 'react'; 2 import parse from 'parse/dist/parse min js'; 3 import ' /app css'; 4 import { button, checkbox, input } from 'antd'; 5 import { plusoutlined } from '@ant design/icons'; 6 7 export const productcreation = () => { 8 // state variables 9 const \[productname, setproductname] = usestate(''); 10 const \[productquantity, setproductquantity] = usestate(''); 11 const \[productprice, setproductprice] = usestate(''); 12 const \[productavailable, setproductavailable] = usestate(false); 13 const \[productexpirationdate, setproductexpirationdate] = usestate(''); 14 const \[productcategories, setproductcategories] = usestate(''); 15 16 return ( 17 \<div> 18 \<div classname="header"> 19 \<img 20 classname="header logo" 21 alt="back4app logo" 22 src={ 23 'https //blog back4app com/wp content/uploads/2019/05/back4app white logo 500px png' 24 } 25 /> 26 \<p classname="header text bold">{'react on back4app'}\</p> 27 \<p classname="header text">{'product creation'}\</p> 28 \</div> 29 \<div classname="container"> 30 {/ product field inputs /} 31 \<div classname="flex between"> 32 \<h2 classname="list heading">available?\</h2> 33 \<checkbox 34 onchange={(e) => setproductavailable(e target checked)} 35 >\</checkbox> 36 \</div> 37 \<div classname="form wrapper"> 38 \<input 39 classname="form input" 40 value={productname} 41 onchange={(event) => setproductname(event target value)} 42 placeholder="name" 43 size="large" 44 /> 45 \<input 46 classname="form input" 47 value={productquantity} 48 onchange={(event) => setproductquantity(event target value)} 49 placeholder="quantity" 50 size="large" 51 /> 52 \<input 53 classname="form input" 54 value={productprice} 55 onchange={(event) => setproductprice(event target value)} 56 placeholder="price" 57 size="large" 58 /> 59 \<input 60 classname="form input" 61 value={productexpirationdate} 62 onchange={(event) => setproductexpirationdate(event target value)} 63 placeholder="expiration date (mm/dd/yyyy)" 64 size="large" 65 /> 66 \<input 67 classname="form input" 68 value={productcategories} 69 onchange={(event) => setproductcategories(event target value)} 70 placeholder="categories (separated by comma)" 71 size="large" 72 /> 73 {/ add product button /} 74 \<button 75 type="primary" 76 classname="form button" 77 color={'#208aec'} 78 size={'large'} 79 onclick={createproduct} 80 icon={\<plusoutlined />} 81 > 82 create product 83 \</button> 84 \</div> 85 \</div> 86 \</div> 87 ); 88 }; productcreation tsx 1 import react, { usestate, fc, reactelement } from 'react'; 2 import ' /app css'; 3 import { button, checkbox, input } from 'antd'; 4 import { plusoutlined } from '@ant design/icons'; 5 const parse = require('parse/dist/parse min js'); 6 7 export const productcreation fc<{}> = () reactelement => { 8 // state variables 9 const \[productname, setproductname] = usestate(''); 10 const \[productquantity, setproductquantity] = usestate(''); 11 const \[productprice, setproductprice] = usestate(''); 12 const \[productavailable, setproductavailable] = usestate(false); 13 const \[productexpirationdate, setproductexpirationdate] = usestate(''); 14 const \[productcategories, setproductcategories] = usestate(''); 15 16 const createproduct = async function () promise\<boolean> { 17 try { 18 // these values come from state variables 19 // convert data values to corresponding data types 20 const productnamevalue string = productname; 21 const productquantityvalue number = number(productquantity); 22 const productpricevalue number = number(productprice); 23 const productavailablevalue boolean = productavailable; 24 const productexpirationdatevalue date = new date(productexpirationdate); 25 const productcategoriesvalue string\[] = productcategories split(','); 26 27 // creates a new product parse object instance 28 let product parse object = new parse object('product'); 29 30 // set data to parse object 31 product set('name', productnamevalue); 32 product set('quantity', productquantityvalue); 33 product set('price', productpricevalue); 34 product set('available', productavailablevalue); 35 product set('expirationdate', productexpirationdatevalue); 36 product set('categories', productcategoriesvalue); 37 product set('completedata', { 38 name productnamevalue, 39 quantity productquantityvalue, 40 price productpricevalue, 41 available productavailablevalue, 42 expirationdate productexpirationdatevalue, 43 categories productcategoriesvalue, 44 }); 45 46 // after setting the values, save it on the server 47 try { 48 let savedproduct parse object = await product save(); 49 // success 50 alert(`success! ${json stringify(savedproduct)}`); 51 return true; 52 } catch (error) { 53 // error can be caused by lack of internet connection 54 alert(`error! ${error message}`); 55 return false; 56 } 57 } catch (error any) { 58 // error can be caused by wrong type of values in fields 59 alert(`error! ${error message}`); 60 return false; 61 } 62 }; 63 64 return ( 65 \<div> 66 \<div classname="header"> 67 \<img 68 classname="header logo" 69 alt="back4app logo" 70 src={ 71 'https //blog back4app com/wp content/uploads/2019/05/back4app white logo 500px png' 72 } 73 /> 74 \<p classname="header text bold">{'react on back4app'}\</p> 75 \<p classname="header text">{'product creation'}\</p> 76 \</div> 77 \<div classname="container"> 78 {/ product field inputs /} 79 \<div classname="flex between"> 80 \<h2 classname="list heading">available?\</h2> 81 \<checkbox 82 onchange={(e) => setproductavailable(e target checked)} 83 >\</checkbox> 84 \</div> 85 \<div classname="form wrapper"> 86 \<input 87 classname="form input" 88 value={productname} 89 onchange={(event) => setproductname(event target value)} 90 placeholder="name" 91 size="large" 92 /> 93 \<input 94 classname="form input" 95 value={productquantity} 96 onchange={(event) => setproductquantity(event target value)} 97 placeholder="quantity" 98 size="large" 99 /> 100 \<input 101 classname="form input" 102 value={productprice} 103 onchange={(event) => setproductprice(event target value)} 104 placeholder="price" 105 size="large" 106 /> 107 \<input 108 classname="form input" 109 value={productexpirationdate} 110 onchange={(event) => setproductexpirationdate(event target value)} 111 placeholder="expiration date (mm/dd/yyyy)" 112 size="large" 113 /> 114 \<input 115 classname="form input" 116 value={productcategories} 117 onchange={(event) => setproductcategories(event target value)} 118 placeholder="categories (separated by comma)" 119 size="large" 120 /> 121 {/ add product button /} 122 \<button 123 type="primary" 124 classname="form button" 125 color={'#208aec'} 126 size={'large'} 127 onclick={createproduct} 128 icon={\<plusoutlined />} 129 > 130 create product 131 \</button> 132 \</div> 133 \</div> 134 \</div> 135 ); 136 }; 1 html { 2 box sizing border box; 3 outline none; 4 overflow auto; 5 } 6 7 , 8 before, 9 after { 10 margin 0; 11 padding 0; 12 box sizing inherit; 13 } 14 15 h1, 16 h2, 17 h3, 18 h4, 19 h5, 20 h6 { 21 margin 0; 22 } 23 24 p { 25 margin 0; 26 } 27 28 body { 29 margin 0; 30 background color #fff; 31 } 32 33 container { 34 width 100%; 35 max width 600px; 36 margin auto; 37 padding 20px 0; 38 } 39 40 header { 41 align items center; 42 padding 25px 0; 43 background color #208aec; 44 } 45 46 header logo { 47 height 55px; 48 margin bottom 20px; 49 object fit contain; 50 } 51 52 header text bold { 53 margin bottom 3px; 54 color rgba(255, 255, 255, 0 9); 55 font size 16px; 56 font weight bold; 57 } 58 59 header text { 60 color rgba(255, 255, 255, 0 9); 61 font size 15px; 62 } 63 64 flex between { 65 display flex; 66 align items center; 67 justify content space between; 68 } 69 70 list heading { 71 font weight bold; 72 } 73 74 form wrapper { 75 margin top 20px; 76 margin bottom 10px; 77 } 78 79 form input { 80 margin bottom 20px; 81 } 82 83 form button { 84 width 100%; 85 } después de configurar esta pantalla, tu aplicación debería verse así ten en cuenta que cada \<font color="#2166ae">producto \</font> tiene su campo de entrada de texto, excepto por la entrada de casilla de verificación booleana, lo que significa que los datos en ellos necesitan conversión al tipo de dato correspondiente antes de guardar 2 convirtiendo datos de entrada antes de guardar tus datos en el \<font color="#2166ae">parse object\</font> , necesitas formatear correctamente el \<font color="#2166ae">número\</font> , \<font color="#2166ae">fechahora\</font> , y \<font color="#2166ae">arreglo \</font> de entradas ahora vamos a crear una función de guardado, que recuperará datos de tus variables de estado y aplicará la conversión de datos adecuada 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(`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 any) { 12 // error can be caused by wrong type of values in fields 13 alert(`error! ${error message}`); 14 return false; 15 } 16 }; el \<font color="#2166ae">número \</font> la conversión de datos se realiza convirtiendo el valor como un \<font color="#2166ae">número\</font> objeto de javascript \<font color="#2166ae">fechahora \</font> se convierte utilizando el \<font color="#2166ae">fecha \</font> constructor de objeto de javascript; el \<font color="#2166ae">arreglo \</font> se crea utilizando el \<font color="#2166ae">string split\</font> método en javascript, creando un arreglo que contiene cada entrada del campo de categorías separada por comas tenga en cuenta que sus datos ahora están contenidos dentro de un solo objeto, que se puede establecer en una nueva p \<font color="#2166ae">arse object \</font> instancia para ser guardada en el servidor utilizando el \<font color="#2166ae">parse object set()\</font> método, que toma dos argumentos el nombre del campo y el valor a establecer también establezcamos un nuevo campo llamado \<font color="#2166ae">completedata\</font> , que será su \<font color="#2166ae">objeto \</font> campo de tipo, asignando el mismo objeto de datos a él adelante y completa la \<font color="#2166ae">createproduct \</font> función con lo siguiente 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 12 // creates a new product parse object instance 13 let product = new parse object('product'); 14 15 // set data to parse object 16 product set('name', productnamevalue); 17 product set('quantity', productquantityvalue); 18 product set('price', productpricevalue); 19 product set('available', productavailablevalue); 20 product set('expirationdate', productexpirationdatevalue); 21 product set('categories', productcategoriesvalue); 22 product set('completedata', { 23 name productnamevalue, 24 quantity productquantityvalue, 25 price productpricevalue, 26 available productavailablevalue, 27 expirationdate productexpirationdatevalue, 28 categories productcategoriesvalue, 29 }); 30 31 // after setting the values, save it on the server 32 try { 33 let savedproduct = await product save(); 34 // success 35 alert(`success! ${json stringify(savedproduct)}`); 36 return true; 37 } catch (error) { 38 // error can be caused by lack of internet connection 39 alert(`error! ${error message}`); 40 return false; 41 } 42 } catch (error) { 43 // error can be caused by wrong type of values in fields 44 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 12 // creates a new product parse object instance 13 let product parse object = new parse object('product'); 14 15 // set data to parse object 16 product set('name', productnamevalue); 17 product set('quantity', productquantityvalue); 18 product set('price', productpricevalue); 19 product set('available', productavailablevalue); 20 product set('expirationdate', productexpirationdatevalue); 21 product set('categories', productcategoriesvalue); 22 product set('completedata', { 23 name productnamevalue, 24 quantity productquantityvalue, 25 price productpricevalue, 26 available productavailablevalue, 27 expirationdate productexpirationdatevalue, 28 categories productcategoriesvalue, 29 }); 30 31 // after setting the values, save it on the server 32 try { 33 let savedproduct parse object = await product save(); 34 // success 35 alert(`success! ${json stringify(savedproduct)}`); 36 return true; 37 } catch (error any) { 38 // error can be caused by lack of internet connection 39 alert(`error! ${error message}`); 40 return false; 41 }; 42 } catch (error any) { 43 // error can be caused by wrong type of values in fields 44 alert(`error! ${error message}`); 45 return false; 46 } 47 }; ahora puedes probar el componente, insertando la \<font color="#2166ae">createproduct \</font> función en él, y llamándola dentro del botón de envío de tu formulario \<font color="#2166ae">onclick \</font> propiedad después de crear un producto, deberías ver una alerta que contenga sus datos así para certificar que tus datos fueron guardados en el servidor utilizando los tipos de datos correctos, puedes mirar en tu panel de parse haz clic en la \<font color="#2166ae">producto \</font> tabla de datos y nota que cada columna tiene su tipo de dato escrito en el encabezado tu clase debería verse así conclusión al final de esta guía, aprendiste cómo guardar cada uno de los tipos de datos básicos disponibles en parse utilizando un componente de react en la próxima guía, aprenderás sobre los datos relacionales en parse