CRUD en React Native con Parse: Guía Técnica Completa

12min
Tutorial de CRUD en React Native
Introducción
Almacenar datos en Parse se basa en la clase Parse.Object. Cada Parse.Object contiene pares clave-valor de datos compatibles con JSON. Estos datos no tienen esquema, lo que significa que no necesitas especificar de antemano qué claves existen en cada Parse.Object. Simplemente puedes establecer los pares clave-valor que desees, y nuestro backend los almacenará.
También puedes especificar los tipos de datos según las necesidades de tu aplicación y persistir tipos como número, booleano, cadena, FechaHora, lista, GeoPointers, y Objeto, codificándolos a JSON antes de guardarlos. Parse también admite almacenar y consultar datos relacionales utilizando los tipos Pointers y Relaciones.
En esta guía, aprenderás cómo realizar operaciones básicas de datos a través de una aplicación de ejemplo CRUD, que te mostrará cómo crear, leer, actualizar y eliminar datos de tu base de datos del servidor Parse en React Native. Primero crearás tus funciones de componente para cada operación CRUD, utilizándolas más tarde en un diseño de pantalla completo, resultando en una aplicación de lista de tareas.
﻿
Requisitos previos
Para completar este tutorial, necesitarás:
Una aplicación de React Native creada y conectada a Back4App.
Si deseas probar/utilizar el diseño de pantalla proporcionado por esta guía, deberías configurar elreact-native-paper﻿biblioteca.
Objetivo
Construir una aplicación CRUD básica en React Native utilizando Parse.
- Creando objetos de datos
El primer paso para gestionar tus datos en tu base de datos Parse es tener algunos en ella. Ahora hagamos una createTodo función que creará una nueva instancia de Parse.Object con la subclase “Todo”. El Todo tendrá un título(string) que describe la tarea y un campo done(boolean) que indica si la tarea está completada.
JavaScript
TodoList.tsx
const createTodo = async function () {
 // This value comes from a state variable
 const newTodoTitleValue = newTodoTitle;
 // Creates a new Todo parse object instance
 let Todo = new Parse.Object('Todo');
 Todo.set('title', newTodoTitleValue);
 Todo.set('done', false);
 // After setting the todo values, save it on the server
 try {
   await Todo.save();
   // Success
   Alert.alert('Success!', 'Todo created!');
   // Refresh todos list to show the new one (you will create this function later)
   readTodos();
   return true;
 } catch (error) {
   // Error can be caused by lack of Internet connection
   Alert.alert('Error!', error.message);
   return false;
 };
};
const createTodo = async function () {
 // This value comes from a state variable
 const newTodoTitleValue = newTodoTitle;
 // Creates a new Todo parse object instance
 let Todo = new Parse.Object('Todo');
 Todo.set('title', newTodoTitleValue);
 Todo.set('done', false);
 // After setting the todo values, save it on the server
 try {
   await Todo.save();
   // Success
   Alert.alert('Success!', 'Todo created!');
   // Refresh todos list to show the new one (you will create this function later)
   readTodos();
   return true;
 } catch (error) {
   // Error can be caused by lack of Internet connection
   Alert.alert('Error!', error.message);
   return false;
 };
};
﻿
Ten en cuenta que si tu base de datos no tiene una Todo tabla (o subclase) en ella aún, Parse la creará automáticamente y también añadirá cualquier columna establecida dentro de la Parse.Object instancia utilizando el método Parse.Object.set() que toma dos argumentos: el nombre del campo y el valor a establecer.
- Leyendo objetos de datos
Después de crear algunos datos en tu base de datos, tu aplicación ahora puede leerlos desde el servidor y mostrárselos a tu usuario. Adelante, crea una readTodos función, que realizará un Parse.Query, almacenando el resultado dentro de una variable de estado.
JavaScript
TypeScript
const readTodos = async function (): Promise<boolean> {
 // Reading parse objects is done by using Parse.Query
 const parseQuery: Parse.Query = new Parse.Query('Todo');
 try {
   let todos: Parse.Object[] = await parseQuery.find();
   // Be aware that empty or invalid queries return as an empty array
   // Set results to state variable
   setReadResults(todos);
   return true;
 } catch (error) {
   // Error can be caused by lack of Internet connection
   Alert.alert('Error!', error.message);
   return false;
 };
};
const readTodos = async function (): Promise<boolean> {
 // Reading parse objects is done by using Parse.Query
 const parseQuery: Parse.Query = new Parse.Query('Todo');
 try {
   let todos: Parse.Object[] = await parseQuery.find();
   // Be aware that empty or invalid queries return as an empty array
   // Set results to state variable
   setReadResults(todos);
   return true;
 } catch (error) {
   // Error can be caused by lack of Internet connection
   Alert.alert('Error!', error.message);
   return false;
 };
};
﻿
La Parse.Query clase es muy poderosa, se pueden aplicar muchas restricciones y ordenamientos a tus consultas. Por ahora, nos quedaremos con esta consulta simple, que recuperará cada Todo objeto guardado.
- Actualizando objetos de datos
Actualizar una Parse.Object instancia es muy similar a crear una nueva, excepto que en este caso, necesitas asignarle el objectId previamente creado y luego guardar, después de establecer tus nuevos valores.
JavaScript
TypeScript
const updateTodo = async function (todoId, done) {
 // Create a new todo parse object instance and set todo id
 let Todo = new Parse.Object('Todo');
 Todo.set('objectId', todoId);
 // Set new done value and save Parse Object changes
 Todo.set('done', done);
 try {
   await Todo.save();
   // Success
   Alert.alert('Success!', 'Todo updated!');
   // Refresh todos list
   readTodos();
   return true;
 } catch (error) {
   // Error can be caused by lack of Internet connection
   Alert.alert('Error!', error.message);
   return false;
 };
};
const updateTodo = async function (todoId, done) {
 // Create a new todo parse object instance and set todo id
 let Todo = new Parse.Object('Todo');
 Todo.set('objectId', todoId);
 // Set new done value and save Parse Object changes
 Todo.set('done', done);
 try {
   await Todo.save();
   // Success
   Alert.alert('Success!', 'Todo updated!');
   // Refresh todos list
   readTodos();
   return true;
 } catch (error) {
   // Error can be caused by lack of Internet connection
   Alert.alert('Error!', error.message);
   return false;
 };
};
﻿
Dado que esta aplicación de ejemplo representa una lista de tareas, tu función de actualización toma un argumento adicional, el done valor, que representará si la tarea específica está completada o no.
- Eliminando objetos de datos
Para eliminar un objeto de datos, necesitas llamar al .destroy() método en la Parse.Object instancia que lo representa. Por favor, ten cuidado porque esta operación no es reversible.
JavaScript
TypeScript
const deleteTodo = async function (todoId: string): Promise<boolean> {
 // Create a new todo parse object instance and set todo id
 let Todo: Parse.Object = new Parse.Object('Todo');
 Todo.set('objectId', todoId);
 // .destroy should be called to delete a parse object
 try {
   await Todo.destroy();
   Alert.alert('Success!', 'Todo deleted!');
   // Refresh todos list to remove this one
   readTodos();
   return true;
 } catch (error) {
   // Error can be caused by lack of Internet connection
   Alert.alert('Error!', error.message);
   return false;
 };
};
const deleteTodo = async function (todoId: string): Promise<boolean> {
 // Create a new todo parse object instance and set todo id
 let Todo: Parse.Object = new Parse.Object('Todo');
 Todo.set('objectId', todoId);
 // .destroy should be called to delete a parse object
 try {
   await Todo.destroy();
   Alert.alert('Success!', 'Todo deleted!');
   // Refresh todos list to remove this one
   readTodos();
   return true;
 } catch (error) {
   // Error can be caused by lack of Internet connection
   Alert.alert('Error!', error.message);
   return false;
 };
};
﻿
Ahora usemos estas cuatro funciones en un componente completo, para que puedas probarlo y asegurarte de que cada operación CRUD esté funcionando correctamente.
- Usando CRUD en un componente de React Native
Aquí está el código completo del componente, que incluye elementos de interfaz de usuario estilizados, variables de estado y llamadas a tus funciones CRUD. Puedes crear un componente separado en un archivo llamado TodoList.js/TodoList.tsx que contenga el siguiente código o agregarlo a tu archivo principal de aplicación (App.js/App.tsx o index.js):
TodoList.js
TodoList.tsx
import React, {FC, ReactElement, useState} from 'react';
import {
 Alert,
 View,
 SafeAreaView,
 Image,
 ScrollView,
 StatusBar,
 StyleSheet,
 TouchableOpacity,
} from 'react-native';
import Parse from 'parse/react-native';
import {
 List,
 Title,
 IconButton,
 Text as PaperText,
 Button as PaperButton,
 TextInput as PaperTextInput,
} from 'react-native-paper';

export const TodoList: FC<{}> = ({}): ReactElement => {
 // State variables
 const [readResults, setReadResults] = useState<[Parse.Object]>();
 const [newTodoTitle, setNewTodoTitle] = useState('');

 // Functions used by the screen components
 const createTodo = async function (): Promise<boolean> {
   // This value comes from a state variable
   const newTodoTitleValue: string = newTodoTitle;
   // Creates a new Todo parse object instance
   let Todo: Parse.Object = new Parse.Object('Todo');
   Todo.set('title', newTodoTitleValue);
   Todo.set('done', false);
   // After setting the todo values, save it on the server
   try {
     await Todo.save();
     // Success
     Alert.alert('Success!', 'Todo created!');
     // Refresh todos list to show the new one (you will create this function later)
     readTodos();
     return true;
   } catch (error) {
     // Error can be caused by lack of Internet connection
     Alert.alert('Error!', error.message);
     return false;
   }
 };

 const readTodos = async function (): Promise<boolean> {
   // Reading parse objects is done by using Parse.Query
   const parseQuery: Parse.Query = new Parse.Query('Todo');
   try {
     let todos: Parse.Object[] = await parseQuery.find();
     // Be aware that empty or invalid queries return as an empty array
     // Set results to state variable
     setReadResults(todos);
     return true;
   } catch (error) {
     // Error can be caused by lack of Internet connection
     Alert.alert('Error!', error.message);
     return false;
   }
 };

 const updateTodo = async function (
   todoId: string,
   done: boolean,
 ): Promise<boolean> {
   // Create a new todo parse object instance and set todo id
   let Todo: Parse.Object = new Parse.Object('Todo');
   Todo.set('objectId', todoId);
   // Set new done value and save Parse Object changes
   Todo.set('done', done);
   try {
     await Todo.save();
     // Success
     Alert.alert('Success!', 'Todo updated!');
     // Refresh todos list
     readTodos();
     return true;
   } catch (error) {
     // Error can be caused by lack of Internet connection
     Alert.alert('Error!', error.message);
     return false;
   }
 };

 const deleteTodo = async function (todoId: string): Promise<boolean> {
   // Create a new todo parse object instance and set todo id
   let Todo: Parse.Object = new Parse.Object('Todo');
   Todo.set('objectId', todoId);
   // .destroy should be called to delete a parse object
   try {
     await Todo.destroy();
     Alert.alert('Success!', 'Todo deleted!');
     // Refresh todos list to remove this one
     readTodos();
     return true;
   } catch (error) {
     // Error can be caused by lack of Internet connection
     Alert.alert('Error!', error.message);
     return false;
   }
 };

 return (
   <>
     <StatusBar backgroundColor="#208AEC" />
     <SafeAreaView style={Styles.container}>
       <View style={Styles.header}>
         <Image
           style={Styles.header_logo}
           source={ {
             uri:
               'https://blog.back4app.com/wp-content/uploads/2019/05/back4app-white-logo-500px.png',
           } }
         />
         <PaperText style={Styles.header_text_bold}>
           {'React Native on Back4App'}
         </PaperText>
         <PaperText style={Styles.header_text}>{'Product Creation'}</PaperText>
       </View>
       <View style={Styles.wrapper}>
         <View style={Styles.flex_between}>
           <Title>Todo List</Title>
           {/* Todo read (refresh) button */}
           <IconButton
             icon="refresh"
             color={'#208AEC'}
             size={24}
             onPress={() => readTodos()}
           />
         </View>
         <View style={Styles.create_todo_container}>
           {/* Todo create text input */}
           <PaperTextInput
             value={newTodoTitle}
             onChangeText={text => setNewTodoTitle(text)}
             label="New Todo"
             mode="outlined"
             style={Styles.create_todo_input}
           />
           {/* Todo create button */}
           <PaperButton
             onPress={() => createTodo()}
             mode="contained"
             icon="plus"
             color={'#208AEC'}
             style={Styles.create_todo_button}>
             {'Add'}
           </PaperButton>
         </View>
         <ScrollView>
           {/* Todo read results list */}
           {readResults !== null &&
             readResults !== undefined &&
             readResults.map((todo: Parse.Object) => (
               <List.Item
                 key={todo.id}
                 title={todo.get('title')}
                 titleStyle={
                   todo.get('done') === true
                     ? Styles.todo_text_done
                     : Styles.todo_text
                 }
                 style={Styles.todo_item}
                 right={props => (
                   <>
                     {/* Todo update button */}
                     {todo.get('done') !== true && (
                       <TouchableOpacity
                         onPress={() => updateTodo(todo.id, true)}>
                         <List.Icon
                           {...props}
                           icon="check"
                           color={'#4CAF50'}
                         />
                       </TouchableOpacity>
                     )}
                     {/* Todo delete button */}
                     <TouchableOpacity onPress={() => deleteTodo(todo.id)}>
                       <List.Icon {...props} icon="close" color={'#ef5350'} />
                     </TouchableOpacity>
                   </>
                 )}
               />
             ))}
         </ScrollView>
       </View>
     </SafeAreaView>
   </>
 );
};

// These define the screen component styles
const Styles = StyleSheet.create({
 container: {
   flex: 1,
   backgroundColor: '#FFF',
 },
 wrapper: {
   width: '90%',
   alignSelf: 'center',
 },
 header: {
   alignItems: 'center',
   paddingTop: 10,
   paddingBottom: 20,
   backgroundColor: '#208AEC',
 },
 header_logo: {
   width: 170,
   height: 40,
   marginBottom: 10,
   resizeMode: 'contain',
 },
 header_text_bold: {
   color: '#fff',
   fontSize: 14,
   fontWeight: 'bold',
 },
 header_text: {
   marginTop: 3,
   color: '#fff',
   fontSize: 14,
 },
 flex_between: {
   flexDirection: 'row',
   alignItems: 'center',
   justifyContent: 'space-between',
 },
 create_todo_container: {
   flexDirection: 'row',
 },
 create_todo_input: {
   flex: 1,
   height: 38,
   marginBottom: 16,
   backgroundColor: '#FFF',
   fontSize: 14,
 },
 create_todo_button: {
   marginTop: 6,
   marginLeft: 15,
   height: 40,
 },
 todo_item: {
   borderBottomWidth: 1,
   borderBottomColor: 'rgba(0, 0, 0, 0.12)',
 },
 todo_text: {
   fontSize: 15,
 },
 todo_text_done: {
   color: 'rgba(0, 0, 0, 0.3)',
   fontSize: 15,
   textDecorationLine: 'line-through',
import React, {FC, ReactElement, useState} from 'react';
import {
 Alert,
 View,
 SafeAreaView,
 Image,
 ScrollView,
 StatusBar,
 StyleSheet,
 TouchableOpacity,
} from 'react-native';
import Parse from 'parse/react-native';
import {
 List,
 Title,
 IconButton,
 Text as PaperText,
 Button as PaperButton,
 TextInput as PaperTextInput,
} from 'react-native-paper';

export const TodoList: FC<{}> = ({}): ReactElement => {
 // State variables
 const [readResults, setReadResults] = useState<[Parse.Object]>();
 const [newTodoTitle, setNewTodoTitle] = useState('');

 // Functions used by the screen components
 const createTodo = async function (): Promise<boolean> {
   // This value comes from a state variable
   const newTodoTitleValue: string = newTodoTitle;
   // Creates a new Todo parse object instance
   let Todo: Parse.Object = new Parse.Object('Todo');
   Todo.set('title', newTodoTitleValue);
   Todo.set('done', false);
   // After setting the todo values, save it on the server
   try {
     await Todo.save();
     // Success
     Alert.alert('Success!', 'Todo created!');
     // Refresh todos list to show the new one (you will create this function later)
     readTodos();
     return true;
   } catch (error) {
     // Error can be caused by lack of Internet connection
     Alert.alert('Error!', error.message);
     return false;
   }
 };

 const readTodos = async function (): Promise<boolean> {
   // Reading parse objects is done by using Parse.Query
   const parseQuery: Parse.Query = new Parse.Query('Todo');
   try {
     let todos: Parse.Object[] = await parseQuery.find();
     // Be aware that empty or invalid queries return as an empty array
     // Set results to state variable
     setReadResults(todos);
     return true;
   } catch (error) {
     // Error can be caused by lack of Internet connection
     Alert.alert('Error!', error.message);
     return false;
   }
 };

 const updateTodo = async function (
   todoId: string,
   done: boolean,
 ): Promise<boolean> {
   // Create a new todo parse object instance and set todo id
   let Todo: Parse.Object = new Parse.Object('Todo');
   Todo.set('objectId', todoId);
   // Set new done value and save Parse Object changes
   Todo.set('done', done);
   try {
     await Todo.save();
     // Success
     Alert.alert('Success!', 'Todo updated!');
     // Refresh todos list
     readTodos();
     return true;
   } catch (error) {
     // Error can be caused by lack of Internet connection
     Alert.alert('Error!', error.message);
     return false;
   }
 };

 const deleteTodo = async function (todoId: string): Promise<boolean> {
   // Create a new todo parse object instance and set todo id
   let Todo: Parse.Object = new Parse.Object('Todo');
   Todo.set('objectId', todoId);
   // .destroy should be called to delete a parse object
   try {
     await Todo.destroy();
     Alert.alert('Success!', 'Todo deleted!');
     // Refresh todos list to remove this one
     readTodos();
     return true;
   } catch (error) {
     // Error can be caused by lack of Internet connection
     Alert.alert('Error!', error.message);
     return false;
   }
 };

 return (
   <>
     <StatusBar backgroundColor="#208AEC" />
     <SafeAreaView style={Styles.container}>
       <View style={Styles.header}>
         <Image
           style={Styles.header_logo}
           source={ {
             uri:
               'https://blog.back4app.com/wp-content/uploads/2019/05/back4app-white-logo-500px.png',
           } }
         />
         <PaperText style={Styles.header_text_bold}>
           {'React Native on Back4App'}
         </PaperText>
         <PaperText style={Styles.header_text}>{'Product Creation'}</PaperText>
       </View>
       <View style={Styles.wrapper}>
         <View style={Styles.flex_between}>
           <Title>Todo List</Title>
           {/* Todo read (refresh) button */}
           <IconButton
             icon="refresh"
             color={'#208AEC'}
             size={24}
             onPress={() => readTodos()}
           />
         </View>
         <View style={Styles.create_todo_container}>
           {/* Todo create text input */}
           <PaperTextInput
             value={newTodoTitle}
             onChangeText={text => setNewTodoTitle(text)}
             label="New Todo"
             mode="outlined"
             style={Styles.create_todo_input}
           />
           {/* Todo create button */}
           <PaperButton
             onPress={() => createTodo()}
             mode="contained"
             icon="plus"
             color={'#208AEC'}
             style={Styles.create_todo_button}>
             {'Add'}
           </PaperButton>
         </View>
         <ScrollView>
           {/* Todo read results list */}
           {readResults !== null &&
             readResults !== undefined &&
             readResults.map((todo: Parse.Object) => (
               <List.Item
                 key={todo.id}
                 title={todo.get('title')}
                 titleStyle={
                   todo.get('done') === true
                     ? Styles.todo_text_done
                     : Styles.todo_text
                 }
                 style={Styles.todo_item}
                 right={props => (
                   <>
                     {/* Todo update button */}
                     {todo.get('done') !== true && (
                       <TouchableOpacity
                         onPress={() => updateTodo(todo.id, true)}>
                         <List.Icon
                           {...props}
                           icon="check"
                           color={'#4CAF50'}
                         />
                       </TouchableOpacity>
                     )}
                     {/* Todo delete button */}
                     <TouchableOpacity onPress={() => deleteTodo(todo.id)}>
                       <List.Icon {...props} icon="close" color={'#ef5350'} />
                     </TouchableOpacity>
                   </>
                 )}
               />
             ))}
         </ScrollView>
       </View>
     </SafeAreaView>
   </>
 );
};

// These define the screen component styles
const Styles = StyleSheet.create({
 container: {
   flex: 1,
   backgroundColor: '#FFF',
 },
 wrapper: {
   width: '90%',
   alignSelf: 'center',
 },
 header: {
   alignItems: 'center',
   paddingTop: 10,
   paddingBottom: 20,
   backgroundColor: '#208AEC',
 },
 header_logo: {
   width: 170,
   height: 40,
   marginBottom: 10,
   resizeMode: 'contain',
 },
 header_text_bold: {
   color: '#fff',
   fontSize: 14,
   fontWeight: 'bold',
 },
 header_text: {
   marginTop: 3,
   color: '#fff',
   fontSize: 14,
 },
 flex_between: {
   flexDirection: 'row',
   alignItems: 'center',
   justifyContent: 'space-between',
 },
 create_todo_container: {
   flexDirection: 'row',
 },
 create_todo_input: {
   flex: 1,
   height: 38,
   marginBottom: 16,
   backgroundColor: '#FFF',
   fontSize: 14,
 },
 create_todo_button: {
   marginTop: 6,
   marginLeft: 15,
   height: 40,
 },
 todo_item: {
   borderBottomWidth: 1,
   borderBottomColor: 'rgba(0, 0, 0, 0.12)',
 },
 todo_text: {
   fontSize: 15,
 },
 todo_text_done: {
   color: 'rgba(0, 0, 0, 0.3)',
   fontSize: 15,
   textDecorationLine: 'line-through',
﻿
Si tu componente está configurado correctamente, deberías ver algo como esto después de construir y ejecutar la aplicación:
﻿
Adelante, agrega algunas tareas escribiendo sus títulos en el cuadro de entrada una a la vez y presionando el Agregar botón. Ten en cuenta que después de cada creación exitosa, la createTodo función activa la readTodos una, actualizando automáticamente tu lista de tareas. Ahora deberías tener una lista de tareas considerable como esta:
﻿
Ahora puedes marcar tus tareas como completadas haciendo clic en la marca de verificación al lado, lo que hará que su completado se actualice a verdadero y cambie su estado de ícono a la izquierda.
﻿
La única operación de datos que queda es la de eliminar, que se puede hacer presionando el ícono de la papelera en el extremo derecho de tu objeto de lista de tareas. Después de eliminar un objeto con éxito, deberías recibir un mensaje de alerta como este:
﻿
Conclusión
Al final de esta guía, aprendiste cómo realizar operaciones básicas de datos (CRUD) en Parse en React Native. En la próxima guía, te mostraremos qué tipos de datos son compatibles en Parse y cómo usarlos.
Configura un Proyecto React Native Expo con Back4App
Parse: Manejo y Conversión de Tipos de Datos en React Native
CRUD en React Native con Parse: Guía Técnica Completa

Tutorial de CRUD en React Native

Introducción

Requisitos previos

Objetivo

1 - Creando objetos de datos

2 - Leyendo objetos de datos

3 - Actualizando objetos de datos

4 - Eliminando objetos de datos

5 - Usando CRUD en un componente de React Native

Conclusión
