Cómo hacer una ToDo List App con React Native, Expo y Back4App

React Native es uno de los frameworks más populares utilizados en el desarrollo móvil. Fue creado por Facebook basado en Javascript. Se puede utilizar para crear aplicaciones para iOS o Android con capacidades de plataforma nativa.

Expo es una herramienta que te ayuda a acelerar el tiempo de desarrollo y las pruebas.

Este artículo explica cómo puedes integrar una app React Native con Back4App. Después de completar este tutorial paso a paso, habrás construido un proyecto para manipular una lista de tareas.

¿Es la primera vez que utilizas Back4App? Si es así, necesitas hacer el Sign-Up.

Calentamiento

Configurar Expo

De acuerdo con las instrucciones de React Native, necesitas instalar Node 10+ y Expo CLI usando el siguiente comando:

npm install -g expo-cli

Para más detalles: https://facebook.github.io/react-native/docs/getting-started.html

Descargar el proyecto de inicio

Para descargar el proyecto de plantilla ToDoListApp, ejecuta los siguientes comandos en tu terminal:

wget "https://github.com/templates-back4app/react-native-todoapp/archive/template.zip" -O template.zip; unzip template.zip; rm template.zip && cd react-native-todoapp && npm install

Nota: Recuerda que necesitas reemplazar las claves de tu aplicación Back4App. Abra el archivo constans/Keys.js y pegue las siguientes claves.

Diagrama de tu App

Si has seguido las instrucciones enlazadas arriba, deberías ver este diagrama de flujo:

diagramreactnative

Iniciar la App ToDo List

Paso 1 – Crear la página de inicio de sesión

Para iniciar la sesión de los usuarios en nuestra aplicación, utilice nuestro método para darles acceso a su cuenta:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
onLogin = async() =>{
  let  
     username =(this.state.username).trim(),
     password =(this.state.password).trim();

  if (username === "" | password === "" ) {
    this.setState(() => ({ nameError: `Rellenarlos campos correctamente.` }));
   } else {
    try {
       await Parse.User.logIn(nombredeusuario.toString(), contraseña.toString());
      // this.submitAndClear();
      this.props.navigation.navigate('HomeStack');       
     } catch (error) { 
      this.setState(() => ({ nameError: error.message }));
      return (error)
     }
   }
 }

Compruebe el código completo aquí: https://github.com/templates-back4app/react-native-todoapp/blob/login-page/screens/LogInScreen.js

Paso 2 – Página de registro

Una vez finalizado el paso anterior, debes pedir a los usuarios que se registren en nuestra aplicación. El siguiente código ilustra un registro típico:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
onSignUp = async() => {

  let  
     username = this.state.username,
     email = this.state.email,
     password = this.state.password;

  if (username.trim() === "" | username === undefined | email.trim() === "" | email === undefined | password.trim() === "" | password === undefined ) {
    this.setState(() => ({ nameError: `Rellenarlos campos correctamente.`}));  
   } else {
    try {
       Parse.User.logOut();
      let user = nuevo Parse.User();
       user.set("nombredeusuario", nombredeusuario);
       user.set("email", email);
       user.set("contraseña", contraseña);
      const result = await user.signUp();
      
       AsyncStorage.setItem('sessionToken', result.getSessionToken());
       AsyncStorage.setItem('username', result.getUsername());

      this.submitAndClear();

      this.navigateToPage('HomeStack');           
     } catch (error) {
       console.log(error)
        this.setState(() => ({ nameError: error.message }));
     }
   }
 }

Consulta el código completo aquí: https://github.com/templates-back4app/react-native-todoapp/blob/signup-page/screens/SignUpScreen.js

Paso 3 – Configurar la página de restablecimiento de contraseña

Imaginemos que mientras tenemos un flujo de autenticación, los usuarios pueden olvidar su contraseña. Parse Server permite restablecer de forma segura las contraseñas de los usuarios. Configure una función que pida al usuario su dirección de correo electrónico:

1
2
3
4
5
6
7
8
9
resetPassword = () => {
   Parse.User.requestPasswordReset(this.state.email)
   .then(() => {
    this._alert('Success', 'An email was sent to your address.', 'Log In', 'LogInStack');
    this.submitAndClear();
   }).catch((error) => {
    this._alert('Error', error.message, 'Log In', 'LogInStack');
   });
 }

Compruebe el código completo aquí: https://github.com/templates-back4app/react-native-todoapp/blob/resetpassword-page/screens/RestorePasswordScreen.js

Paso 4 – Página de Lista de Tareas

Configure el Layout y las funciones para crear, leer, actualizar y borrar un ítem de una lista.

Paso 4.1 – Crear un elemento

Utilice la función guardar para almacenar un elemento en Parse Cloud. Esto hace posible crear un nuevo objeto en tu aplicación. Mira el Navegador de Datos en tu app en Parse:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
createItem = () => {
  let item = this.state.item;

  if (item === "" || item === undefined){
    this.setState(() => ({ nameError: `Rellenarlos campos correctamente.` }));
   } else {
    const Todo = Parse.Object.extend("Todo");
    const todo = new Todo();

     todo.set("tarea", this.state.item);
     todo.set("userId", );
    
     todo.save().then(object => {
      this.readAllItems();
      this.setState({item:''})
     }).catch(error=> {alert(error)})
   }
 }

Paso 4.2 – Lectura de todos los objetos

Esta función se invoca muchas veces porque se utiliza para iniciar una pantalla, actualizar o borrar un objeto. Los datos se pueden recuperar utilizando el siguiente código:

1
2
3
4
5
6
7
8
readAllItems = async() => {
  const idUsuario = await Parse.Usuario.actualAsync();
  const query = new Parse.Query("Todo");
   query.exists("tarea");
   query.equalTo('userId', idUser);
  const resultQuery = await query.find();
  this.setState({results:resultQuery});
 }

Paso 4.3 – Actualizar un objeto

Después de crear un objeto, debería haber una forma de actualizarlo en el futuro. Es simple, sólo necesitas recuperar ese ítem y llamar al método save usando este código:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
updateItem = () => {
 const query = new Parse.Query("Todo");
   query.get(this.state.idObject).then(object => {
     object.set("tarea", this.state.updateValueDialog);
     object.save().then(objUpdate => {
      this.setState({updateValueDialog:'', dialogVisible: false})
      this.readAllItems();
     });
   });
}

Paso 4.4 – Borrar un elemento

Trabajar con una lista de ítems requiere permitir a los usuarios borrar sus objetos por sí mismos.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
deleteIten = async() => {
  const query = new Parse.Query("Todo");
  const object = await query.get(this.state.idObject);
  try{
     object.destroy();
    this.getAllData();
   } catch (e){
     alert(e)
   }
 }

Consulte el código completo aquí: https://github.com/templates-back4app/react-native-todoapp/blob/home-page/screens/HomeScreen.js

Palabras finales

¡Eso es todo para la aplicación de la lista ToDo! Nota, es posible que desee estilizar sus pantallas. Por esta razón, se recomienda revisar el repo completo siguiendo el enlace de abajo:

https://github.com/templates-back4app/react-native-todoapp

Si necesitas ayuda o alguna función no funciona, ponte en contacto con nuestro equipo a través del chat.

¿Qué es React Native?

En cuanto a frameworks de desarrollo móvil, React Native es uno de los mejores. Fue desarrollado por Facebook y facilita el desarrollo de aplicaciones para iOS y Android con las mismas capacidades que la plataforma nativa.

¿Qué es Expo?

El desarrollo móvil puede ser complicado a veces. Como desarrollador, puedes quedarte atascado por un simple error de código, lo que puede hacerte perder tiempo. También necesitas probar tu aplicación después de compilarla y antes de lanzarla. Expo te brindará herramientas para acelerar tu desarrollo y tus pruebas.

¿Cuál es el primer paso para integrar una aplicación React Native con Back4App?

El primer paso es configurar Expo. Según las instrucciones de React Native, debe instalar los dos componentes siguientes:
-Node 10+
-EXPO CLI
El comando para usar EXPO CLI es “npm install -g expo-cli”.


Leave a reply

Your email address will not be published.