Gérer les types de données avec Parse dans React

analyser les types de données dans un composant react introduction au cœur de la fonctionnalité parse core se trouve la gestion des objets de données parse vous permet de stocker et d'interroger ses données de manière simple en utilisant ses sdk ou api (rest ou graphql) toutes les fonctionnalités des objets de données sont construites en utilisant la parse object parse object classe, dont les champs peuvent contenir des paires clé valeur de plusieurs types de données compatibles json les types de données principaux qui peuvent être assignés aux champs d'objet sont les suivants nombre nombre des nombres entiers (42) ou à virgule flottante (42 5), tant que ‘ ’ est le séparateur décimal ; booléen booléen valeurs vraies ou fausses ; chaîne chaîne une chaîne qui peut contenir jusqu'à 2147483647 caractères soyez conscient que des valeurs aussi énormes ralentiront les opérations de données ; datetime datetime datetime datetime objets stockés au format utc par défaut si vous devez utiliser un autre fuseau horaire, la conversion doit être effectuée manuellement ; tableau tableau un tableau contenant des données dans n'importe quelle donnée compatible avec parse objet un objet json contenant également des données parse lorsqu'il est disponible dans le sdk, un include() include() appel apportera des détails de la propriété object lorsque vous choisissez d'utiliser le type array, nous recommandons de garder les objets de tableau petits car cela peut affecter la performance globale de vos opérations de données notre recommandation est d'utiliser le type array s'il ne dépasse pas 20 éléments et ne croît pas avec le temps au lieu du type array, vous pouvez utiliser les types pointer et relations comme alternative dans ce guide, vous apprendrez comment stocker des données dans chacun des types de données de base énumérés ci dessus vous construirez un composant d'enregistrement de produit sur react, qui vous montrera comment formater, convertir et enregistrer des données sur votre serveur parse dans react parse propose également les types de données geopoint geopoint pour utiliser la puissance des ressources de géolocalisation, et les données relationnelles spécifiques à parse en utilisant les types pointer pointer ou relation relation vous verrez les deux abordés dans les prochains guides prérequis pour compléter ce tutoriel, vous aurez besoin de une application react créée et connectée à back4app si vous souhaitez tester/utiliser la mise en page de l'écran fournie par ce guide, vous devez configurer la ant design ant design bibliothèque objectif comprendre les types de données de base compatibles avec parse et stocker chaque type de données sur parse depuis un composant react 1 le composant de création de produit commençons par créer la structure du composant gardons cela simple et créons un écran de formulaire avec une entrée de texte pour chaque type de données, une case à cocher et un bouton de soumission pour enregistrer l'objet ces entrées collecteront vos produit produit valeurs de champ nom ( chaîne chaîne ), quantité ( nombre nombre ), prix ( nombre nombre ), disponible ( booléen booléen ), date d'expiration ( datetime datetime ), et catégories( tableau tableau ) de plus, vous enregistrerez un champ de type objet objet dans votre méthode d'enregistrement également, mais celui ci n'aura pas besoin d'un champ d'entrée créez un composant séparé dans un fichier appelé productcreation js/productcreation tsx productcreation js/productcreation tsx incluant le code suivant, ou ajoutez le à votre fichier d'application principal ( app js/app tsx app js/app tsx ) vous pouvez utiliser cette mise en page avec des styles complets en utilisant ant design ant design et en ajoutant le code css à votre app css app css fichier ou configurer votre propre formulaire personnalisé 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 } après avoir configuré cet écran, votre application devrait ressembler à ceci notez que chaque produit produit a son champ de saisie de texte, sauf pour l'entrée de case à cocher booléenne, ce qui signifie que les données qu'elles contiennent doivent être converties au type de données correspondant avant d'être enregistrées 2 conversion des données d'entrée avant de sauvegarder vos données dans le parse object parse object , vous devez correctement formater le nombre nombre , datetime datetime , et tableau tableau d'entrées créons maintenant une fonction de sauvegarde, qui récupérera les données de vos variables d'état et appliquera la conversion de données appropriée 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 }; le nombre nombre la conversion de données se fait en castant la valeur en un nombre nombre objet javascript datetime datetime est converti en utilisant le date date constructeur d'objet javascript; le tableau tableau est créé en utilisant le string split string split méthode en javascript, créant un tableau contenant chaque entrée du champ catégories séparée par des virgules notez que vos données sont maintenant contenues dans un seul objet, qui peut être défini dans une nouvelle p arse object arse object instance à sauvegarder sur le serveur en utilisant la parse object set() parse object set() méthode, qui prend deux arguments le nom du champ et la valeur à définir définissons également un nouveau champ appelé completedata completedata , qui sera votre objet objet champ de type, en lui assignant le même objet de données allez y et complétez la createproduct createproduct fonction avec ce qui suit 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 }; vous pouvez maintenant tester le composant, en insérant la createproduct createproduct fonction à l'intérieur, et en l'appelant dans le bouton de soumission de votre formulaire onclick onclick propriété après avoir créé un produit, vous devriez voir une alerte contenant ses données comme ceci pour certifier que vos données ont été enregistrées sur le serveur en utilisant les bons types de données, vous pouvez consulter votre tableau de bord parse cliquez sur le produit produit tableau de données et notez que chaque colonne a son type de données écrit dans l'en tête votre classe devrait ressembler à ceci conclusion à la fin de ce guide, vous avez appris comment enregistrer chacun des types de données de base disponibles sur parse en utilisant un composant react dans le prochain guide, vous apprendrez sur les données relationnelles sur parse