Operazioni di Base

tutorial crud di react native introduzione memorizzare dati su parse è costruito attorno alla parse object parse object classe ogni parse object parse object contiene coppie chiave valore di dati compatibili con json questi dati sono senza schema, il che significa che non è necessario specificare in anticipo quali chiavi esistono su ogni parse object parse object puoi semplicemente impostare le coppie chiave valore che desideri, e il nostro backend le memorizzerà puoi anche specificare i tipi di dati in base alle esigenze della tua applicazione e persistere tipi come numero numero , booleano booleano , stringa stringa , dataora dataora , lista lista , geopointers geopointers , e oggetto oggetto , codificandoli in json prima di salvarli parse supporta anche la memorizzazione e la query di dati relazionali utilizzando i tipi puntatori puntatori e relazioni relazioni in questa guida, imparerai come eseguire operazioni di base sui dati attraverso un'app di esempio crud, che ti mostrerà come creare, leggere, aggiornare e eliminare dati dal tuo database del server parse in react native prima creerai le funzioni dei tuoi componenti per ogni operazione crud, utilizzandole successivamente in un layout di schermo completo, risultando in un'app per la lista delle cose da fare requisiti per completare questo tutorial, avrai bisogno di un'app react native creata e connessa a https //www back4app com/docs/react native/parse sdk/react native sdk se desideri testare/utilizzare il layout della schermata fornito da questa guida, dovresti configurare il react native paper react native paper https //github com/callstack/react native paper obiettivo costruire un'applicazione crud di base in react native utilizzando parse 1 creazione di oggetti dati il primo passo per gestire i tuoi dati nel tuo database parse è averne alcuni creiamo ora una createtodo createtodo funzione che creerà una nuova istanza di parse object parse object con la sottoclasse “todo” il todo avrà un titolo ( stringa stringa ) che descrive il compito e un campo done ( booleano booleano ) che indica se il compito è completato javascript 1 const createtodo = async function () { 2 // this value comes from a state variable 3 const newtodotitlevalue = newtodotitle; 4 // creates a new todo parse object instance 5 let todo = new parse object('todo'); 6 todo set('title', newtodotitlevalue); 7 todo set('done', false); 8 // after setting the todo values, save it on the server 9 try { 10 await todo save(); 11 // success 12 alert alert('success!', 'todo created!'); 13 // refresh todos list to show the new one (you will create this function later) 14 readtodos(); 15 return true; 16 } catch (error) { 17 // error can be caused by lack of internet connection 18 alert alert('error!', error message); 19 return false; 20 }; 21 }; todolist tsx 1 const createtodo = async function () promise\<boolean> { 2 // this value comes from a state variable 3 const newtodotitlevalue string = newtodotitle; 4 // creates a new todo parse object instance 5 let todo parse object = new parse object('todo'); 6 todo set('title', newtodotitlevalue); 7 todo set('done', false); 8 // after setting the todo values, save it on the server 9 try { 10 await todo save(); 11 // success 12 alert alert('success!', 'todo created!'); 13 // refresh todos list to show the new one (you will create this function later) 14 readtodos(); 15 return true; 16 } catch (error) { 17 // error can be caused by lack of internet connection 18 alert alert('error!', error message); 19 return false; 20 }; 21 }; nota che se il tuo database non ha ancora una todo todo tabella (o sottoclasse) in esso, parse la creerà automaticamente e aggiungerà anche eventuali colonne impostate all'interno dell' parse object parse object istanza utilizzando il parse object set() parse object set() metodo, che prende due argomenti il nome del campo e il valore da impostare 2 lettura di oggetti dati dopo aver creato alcuni dati nel tuo database, la tua applicazione può ora leggerli dal server e mostrarli all'utente procedi e crea una readtodos readtodos funzione, che eseguirà una parse query parse query , memorizzando il risultato all'interno di una variabile di stato javascript 1 const readtodos = async function () { 2 // reading parse objects is done by using parse query 3 const parsequery = new parse query('todo'); 4 try { 5 let todos = await parsequery find(); 6 // be aware that empty or invalid queries return as an empty array 7 // set results to state variable 8 setreadresults(todos); 9 return true; 10 } catch (error) { 11 // error can be caused by lack of internet connection 12 alert alert('error!', error message); 13 return false; 14 }; 15 };1 const readtodos = async function () promise\<boolean> { 2 // reading parse objects is done by using parse query 3 const parsequery parse query = new parse query('todo'); 4 try { 5 let todos parse object\[] = await parsequery find(); 6 // be aware that empty or invalid queries return as an empty array 7 // set results to state variable 8 setreadresults(todos); 9 return true; 10 } catch (error) { 11 // error can be caused by lack of internet connection 12 alert alert('error!', error message); 13 return false; 14 }; 15 }; la parse query parse query classe è molto potente, molte restrizioni e ordinamenti possono essere applicati alle tue query per ora, ci attarderemo su questa semplice query, che recupererà ogni todo todo salvato 3 aggiornamento degli oggetti dati aggiornare un parse object parse object istanza è molto simile a crearne una nuova, tranne che in questo caso, devi assegnare il objectid objectid precedentemente creato e poi salvare, dopo aver impostato i tuoi nuovi valori javascript 1 const updatetodo = async function (todoid, done) { 2 // create a new todo parse object instance and set todo id 3 let todo = new parse object('todo'); 4 todo set('objectid', todoid); 5 // set new done value and save parse object changes 6 todo set('done', done); 7 try { 8 await todo save(); 9 // success 10 alert alert('success!', 'todo updated!'); 11 // refresh todos list 12 readtodos(); 13 return true; 14 } catch (error) { 15 // error can be caused by lack of internet connection 16 alert alert('error!', error message); 17 return false; 18 }; 19 };1 const updatetodo = async function ( 2 todoid string, 3 done boolean, 4 ) promise\<boolean> { 5 // create a new todo parse object instance and set todo id 6 let todo parse object = new parse object('todo'); 7 todo set('objectid', todoid); 8 // set new done value and save parse object changes 9 todo set('done', done); 10 try { 11 await todo save(); 12 // success 13 alert alert('success!', 'todo updated!'); 14 // refresh todos list 15 readtodos(); 16 return true; 17 } catch (error) { 18 // error can be caused by lack of internet connection 19 alert alert('error!', error message); 20 return false; 21 }; 22 }; poiché questa app di esempio rappresenta una lista di cose da fare, la tua funzione di aggiornamento prende un argomento aggiuntivo, il done done valore, che rappresenterà se il compito specifico è completato o meno 4 cancellazione degli oggetti dati per eliminare un oggetto dati, è necessario chiamare il destroy() destroy() metodo nell' parse object parse object istanza che lo rappresenta si prega di fare attenzione perché questa operazione non è reversibile javascript 1 const deletetodo = async function (todoid) { 2 // create a new todo parse object instance and set todo id 3 const todo = new parse object('todo'); 4 todo set('objectid', todoid); 5 // destroy should be called to delete a parse object 6 try { 7 await todo destroy(); 8 alert alert('success!', 'todo deleted!'); 9 // refresh todos list to remove this one 10 readtodos(); 11 return true; 12 } catch (error) { 13 // error can be caused by lack of internet connection 14 alert alert('error!', error message); 15 return false; 16 }; 17 };1 const deletetodo = async function (todoid string) promise\<boolean> { 2 // create a new todo parse object instance and set todo id 3 let todo parse object = new parse object('todo'); 4 todo set('objectid', todoid); 5 // destroy should be called to delete a parse object 6 try { 7 await todo destroy(); 8 alert alert('success!', 'todo deleted!'); 9 // refresh todos list to remove this one 10 readtodos(); 11 return true; 12 } catch (error) { 13 // error can be caused by lack of internet connection 14 alert alert('error!', error message); 15 return false; 16 }; 17 }; utilizziamo ora queste quattro funzioni in un componente completo, in modo da poterlo testare e assicurarci che ogni operazione crud funzioni correttamente 5 utilizzare crud in un componente react native ecco il codice completo del componente, inclusi elementi dell'interfaccia utente stilizzati, variabili di stato e chiamate alle tue funzioni crud puoi creare un componente separato in un file chiamato todolist js/todolist tsx todolist js/todolist tsx contenente il seguente codice o aggiungerlo al tuo file principale dell'applicazione ( app js/app tsx app js/app tsx o index js index js ) todolist js 1 import react, {usestate} from 'react'; 2 import { 3 alert, 4 view, 5 safeareaview, 6 image, 7 scrollview, 8 statusbar, 9 stylesheet, 10 touchableopacity, 11 } from 'react native'; 12 import parse from 'parse/react native'; 13 import { 14 list, 15 title, 16 iconbutton, 17 text as papertext, 18 button as paperbutton, 19 textinput as papertextinput, 20 } from 'react native paper'; 21&#x9; 22 export const todolist = () => { 23 // state variables 24 const \[readresults, setreadresults] = usestate(\[]); 25 const \[newtodotitle, setnewtodotitle] = usestate(''); 26&#x9; 27 // functions used by the screen components 28 const createtodo = async function () { 29 // this value comes from a state variable 30 const newtodotitlevalue = newtodotitle; 31 // creates a new todo parse object instance 32 let todo = new parse object('todo'); 33 todo set('title', newtodotitlevalue); 34 todo set('done', false); 35 // after setting the todo values, save it on the server 36 try { 37 await todo save(); 38 // success 39 alert alert('success!', 'todo created!'); 40 // refresh todos list to show the new one (you will create this function later) 41 readtodos(); 42 return true; 43 } catch (error) { 44 // error can be caused by lack of internet connection 45 alert alert('error!', error message); 46 return false; 47 } 48 }; 49&#x9; 50 const readtodos = async function () { 51 // reading parse objects is done by using parse query 52 const parsequery = new parse query('todo'); 53 try { 54 let todos = await parsequery find(); 55 // be aware that empty or invalid queries return as an empty array 56 // set results to state variable 57 setreadresults(todos); 58 return true; 59 } catch (error) { 60 // error can be caused by lack of internet connection 61 alert alert('error!', error message); 62 return false; 63 } 64 }; 65&#x9; 66 const updatetodo = async function (todoid, done) { 67 // create a new todo parse object instance and set todo id 68 let todo = new parse object('todo'); 69 todo set('objectid', todoid); 70 // set new done value and save parse object changes 71 todo set('done', done); 72 try { 73 await todo save(); 74 // success 75 alert alert('success!', 'todo updated!'); 76 // refresh todos list 77 readtodos(); 78 return true; 79 } catch (error) { 80 // error can be caused by lack of internet connection 81 alert alert('error!', error message); 82 return false; 83 }; 84 }; 85&#x9; 86 const deletetodo = async function (todoid) { 87 // create a new todo parse object instance and set todo id 88 let todo = new parse object('todo'); 89 todo set('objectid', todoid); 90 // destroy should be called to delete a parse object 91 try { 92 await todo destroy(); 93 alert alert('success!', 'todo deleted!'); 94 // refresh todos list to remove this one 95 readtodos(); 96 return true; 97 } catch (error) { 98 // error can be caused by lack of internet connection 99 alert alert('error!', error message); 100 return false; 101 } 102 }; 103&#x9; 104 return ( 105 <> 106 \<statusbar backgroundcolor="#208aec" /> 107 \<safeareaview style={styles container}> 108 \<view style={styles header}> 109 \<image 110 style={styles header logo} 111 source={ { 112 uri 113 'https //blog back4app com/wp content/uploads/2019/05/back4app white logo 500px png', 114 } } 115 /> 116 \<papertext style={styles header text bold}> 117 {'react native on back4app'} 118 \</papertext> 119 \<papertext style={styles header text}>{'product creation'}\</papertext> 120 \</view> 121 \<view style={styles wrapper}> 122 \<view style={styles flex between}> 123 \<title>todo list\</title> 124 {/ todo read (refresh) button /} 125 \<iconbutton 126 icon="refresh" 127 color={'#208aec'} 128 size={24} 129 onpress={() => readtodos()} 130 /> 131 \</view> 132 \<view style={styles create todo container}> 133 {/ todo create text input /} 134 \<papertextinput 135 value={newtodotitle} 136 onchangetext={text => setnewtodotitle(text)} 137 label="new todo" 138 mode="outlined" 139 style={styles create todo input} 140 /> 141 {/ todo create button /} 142 \<paperbutton 143 onpress={() => createtodo()} 144 mode="contained" 145 icon="plus" 146 color={'#208aec'} 147 style={styles create todo button}> 148 {'add'} 149 \</paperbutton> 150 \</view> 151 \<scrollview> 152 {/ todo read results list /} 153 {readresults !== null && 154 readresults !== undefined && 155 readresults map((todo) => ( 156 \<list item 157 key={todo id} 158 title={todo get('title')} 159 titlestyle={ 160 todo get('done') === true 161 ? styles todo text done 162 styles todo text 163 } 164 style={styles todo item} 165 right={props => ( 166 <> 167 {/ todo update button /} 168 {todo get('done') !== true && ( 169 \<touchableopacity 170 onpress={() => updatetodo(todo id, true)}> 171 \<list icon 172 { props} 173 icon="check" 174 color={'#4caf50'} 175 /> 176 \</touchableopacity> 177 )} 178 {/ todo delete button /} 179 \<touchableopacity onpress={() => deletetodo(todo id)}> 180 \<list icon { props} icon="close" color={'#ef5350'} /> 181 \</touchableopacity> 182 \</> 183 )} 184 /> 185 ))} 186 \</scrollview> 187 \</view> 188 \</safeareaview> 189 \</> 190 ); 191 }; 192&#x9; 193 // these define the screen component styles 194 const styles = stylesheet create({ 195 container { 196 flex 1, 197 backgroundcolor '#fff', 198 }, 199 wrapper { 200 width '90%', 201 alignself 'center', 202 }, 203 header { 204 alignitems 'center', 205 paddingtop 10, 206 paddingbottom 20, 207 backgroundcolor '#208aec', 208 }, 209 header logo { 210 width 170, 211 height 40, 212 marginbottom 10, 213 resizemode 'contain', 214 }, 215 header text bold { 216 color '#fff', 217 fontsize 14, 218 fontweight 'bold', 219 }, 220 header text { 221 margintop 3, 222 color '#fff', 223 fontsize 14, 224 }, 225 flex between { 226 flexdirection 'row', 227 alignitems 'center', 228 justifycontent 'space between', 229 }, 230 create todo container { 231 flexdirection 'row', 232 }, 233 create todo input { 234 flex 1, 235 height 38, 236 marginbottom 16, 237 backgroundcolor '#fff', 238 fontsize 14, 239 }, 240 create todo button { 241 margintop 6, 242 marginleft 15, 243 height 40, 244 }, 245 todo item { 246 borderbottomwidth 1, 247 borderbottomcolor 'rgba(0, 0, 0, 0 12)', 248 }, 249 todo text { 250 fontsize 15, 251 }, 252 todo text done { 253 color 'rgba(0, 0, 0, 0 3)', 254 fontsize 15, 255 textdecorationline 'line through', 256 }, 257 }) todolist tsx 1 import react, {fc, reactelement, usestate} from 'react'; 2 import { 3 alert, 4 view, 5 safeareaview, 6 image, 7 scrollview, 8 statusbar, 9 stylesheet, 10 touchableopacity, 11 } from 'react native'; 12 import parse from 'parse/react native'; 13 import { 14 list, 15 title, 16 iconbutton, 17 text as papertext, 18 button as paperbutton, 19 textinput as papertextinput, 20 } from 'react native paper'; 21&#x9; 22 export const todolist fc<{}> = ({}) reactelement => { 23 // state variables 24 const \[readresults, setreadresults] = usestate<\[parse object]>(); 25 const \[newtodotitle, setnewtodotitle] = usestate(''); 26&#x9; 27 // functions used by the screen components 28 const createtodo = async function () promise\<boolean> { 29 // this value comes from a state variable 30 const newtodotitlevalue string = newtodotitle; 31 // creates a new todo parse object instance 32 let todo parse object = new parse object('todo'); 33 todo set('title', newtodotitlevalue); 34 todo set('done', false); 35 // after setting the todo values, save it on the server 36 try { 37 await todo save(); 38 // success 39 alert alert('success!', 'todo created!'); 40 // refresh todos list to show the new one (you will create this function later) 41 readtodos(); 42 return true; 43 } catch (error) { 44 // error can be caused by lack of internet connection 45 alert alert('error!', error message); 46 return false; 47 } 48 }; 49&#x9; 50 const readtodos = async function () promise\<boolean> { 51 // reading parse objects is done by using parse query 52 const parsequery parse query = new parse query('todo'); 53 try { 54 let todos parse object\[] = await parsequery find(); 55 // be aware that empty or invalid queries return as an empty array 56 // set results to state variable 57 setreadresults(todos); 58 return true; 59 } catch (error) { 60 // error can be caused by lack of internet connection 61 alert alert('error!', error message); 62 return false; 63 } 64 }; 65&#x9; 66 const updatetodo = async function ( 67 todoid string, 68 done boolean, 69 ) promise\<boolean> { 70 // create a new todo parse object instance and set todo id 71 let todo parse object = new parse object('todo'); 72 todo set('objectid', todoid); 73 // set new done value and save parse object changes 74 todo set('done', done); 75 try { 76 await todo save(); 77 // success 78 alert alert('success!', 'todo updated!'); 79 // refresh todos list 80 readtodos(); 81 return true; 82 } catch (error) { 83 // error can be caused by lack of internet connection 84 alert alert('error!', error message); 85 return false; 86 } 87 }; 88&#x9; 89 const deletetodo = async function (todoid string) promise\<boolean> { 90 // create a new todo parse object instance and set todo id 91 let todo parse object = new parse object('todo'); 92 todo set('objectid', todoid); 93 // destroy should be called to delete a parse object 94 try { 95 await todo destroy(); 96 alert alert('success!', 'todo deleted!'); 97 // refresh todos list to remove this one 98 readtodos(); 99 return true; 100 } catch (error) { 101 // error can be caused by lack of internet connection 102 alert alert('error!', error message); 103 return false; 104 } 105 }; 106&#x9; 107 return ( 108 <> 109 \<statusbar backgroundcolor="#208aec" /> 110 \<safeareaview style={styles container}> 111 \<view style={styles header}> 112 \<image 113 style={styles header logo} 114 source={ { 115 uri 116 'https //blog back4app com/wp content/uploads/2019/05/back4app white logo 500px png', 117 } } 118 /> 119 \<papertext style={styles header text bold}> 120 {'react native on back4app'} 121 \</papertext> 122 \<papertext style={styles header text}>{'product creation'}\</papertext> 123 \</view> 124 \<view style={styles wrapper}> 125 \<view style={styles flex between}> 126 \<title>todo list\</title> 127 {/ todo read (refresh) button /} 128 \<iconbutton 129 icon="refresh" 130 color={'#208aec'} 131 size={24} 132 onpress={() => readtodos()} 133 /> 134 \</view> 135 \<view style={styles create todo container}> 136 {/ todo create text input /} 137 \<papertextinput 138 value={newtodotitle} 139 onchangetext={text => setnewtodotitle(text)} 140 label="new todo" 141 mode="outlined" 142 style={styles create todo input} 143 /> 144 {/ todo create button /} 145 \<paperbutton 146 onpress={() => createtodo()} 147 mode="contained" 148 icon="plus" 149 color={'#208aec'} 150 style={styles create todo button}> 151 {'add'} 152 \</paperbutton> 153 \</view> 154 \<scrollview> 155 {/ todo read results list /} 156 {readresults !== null && 157 readresults !== undefined && 158 readresults map((todo parse object) => ( 159 \<list item 160 key={todo id} 161 title={todo get('title')} 162 titlestyle={ 163 todo get('done') === true 164 ? styles todo text done 165 styles todo text 166 } 167 style={styles todo item} 168 right={props => ( 169 <> 170 {/ todo update button /} 171 {todo get('done') !== true && ( 172 \<touchableopacity 173 onpress={() => updatetodo(todo id, true)}> 174 \<list icon 175 { props} 176 icon="check" 177 color={'#4caf50'} 178 /> 179 \</touchableopacity> 180 )} 181 {/ todo delete button /} 182 \<touchableopacity onpress={() => deletetodo(todo id)}> 183 \<list icon { props} icon="close" color={'#ef5350'} /> 184 \</touchableopacity> 185 \</> 186 )} 187 /> 188 ))} 189 \</scrollview> 190 \</view> 191 \</safeareaview> 192 \</> 193 ); 194 }; 195&#x9; 196 // these define the screen component styles 197 const styles = stylesheet create({ 198 container { 199 flex 1, 200 backgroundcolor '#fff', 201 }, 202 wrapper { 203 width '90%', 204 alignself 'center', 205 }, 206 header { 207 alignitems 'center', 208 paddingtop 10, 209 paddingbottom 20, 210 backgroundcolor '#208aec', 211 }, 212 header logo { 213 width 170, 214 height 40, 215 marginbottom 10, 216 resizemode 'contain', 217 }, 218 header text bold { 219 color '#fff', 220 fontsize 14, 221 fontweight 'bold', 222 }, 223 header text { 224 margintop 3, 225 color '#fff', 226 fontsize 14, 227 }, 228 flex between { 229 flexdirection 'row', 230 alignitems 'center', 231 justifycontent 'space between', 232 }, 233 create todo container { 234 flexdirection 'row', 235 }, 236 create todo input { 237 flex 1, 238 height 38, 239 marginbottom 16, 240 backgroundcolor '#fff', 241 fontsize 14, 242 }, 243 create todo button { 244 margintop 6, 245 marginleft 15, 246 height 40, 247 }, 248 todo item { 249 borderbottomwidth 1, 250 borderbottomcolor 'rgba(0, 0, 0, 0 12)', 251 }, 252 todo text { 253 fontsize 15, 254 }, 255 todo text done { 256 color 'rgba(0, 0, 0, 0 3)', 257 fontsize 15, 258 textdecorationline 'line through', se il tuo componente è configurato correttamente, dovresti vedere qualcosa del genere dopo aver costruito e avviato l'app procedi ad aggiungere alcune attività digitando i loro titoli nella casella di input uno alla volta e premendo il aggiungi aggiungi pulsante nota che dopo ogni creazione riuscita, la createtodo createtodo funzione attiva la readtodos readtodos funzione, aggiornando automaticamente la tua lista di attività ora dovresti avere una lista di attività considerevole come questa ora puoi contrassegnare le tue attività come completate facendo clic sulla casella di controllo accanto ad esse, facendo sì che il loro completato completato valore venga aggiornato a vero e cambiando il suo stato dell'icona a sinistra l'unica operazione di dati rimanente è ora quella di eliminazione, che può essere effettuata premendo sull'icona del cestino all'estrema destra del tuo oggetto lista di attività dopo aver eliminato con successo un oggetto, dovresti ricevere un messaggio di avviso come questo conclusione alla fine di questa guida, hai imparato come eseguire operazioni di base sui dati (crud) in parse su react native nella prossima guida, ti mostreremo quali tipi di dati sono supportati in parse e come utilizzarli