Guía técnica: Conectar Parse Server SDK a React

10 min

inicio rápido introducción en esta sección, aprenderás cómo comenzar con back4app utilizando un proyecto existente o nuevo con react instalarás el \parse sdk\ , inicializarás parse usando tus \claves de la aplicación\ , y harás tu primera llamada a la api guardando y leyendo objetos de datos desde back4app requisitos previos para completar este tutorial, necesitarás una aplicación creada https //www back4app com/docs/get started/new parse app en back4app; una versión reciente de node js https //nodejs org/ , incluyendo \yarn \ y \npx\ 1 creando un proyecto react si ya tienes un proyecto react funcionando, puedes saltar al siguiente paso ejecuta el siguiente comando en el directorio en el que deseas almacenar el proyecto, informando su nombre también, en este caso, \back4app guide react\ npx create react app back4app guide react si \node js\ está correctamente configurado, deberías ver el proyecto siendo creado en tu terminal después de completar, verás un mensaje informándote que el proceso fue exitoso abre el proyecto en tu editor de código favorito y empecemos a integrar parse 2 instalar dependencias ahora instalemos la única dependencia necesaria, \parse javascript sdk\ , para integrar tu aplicación con los servidores de back4app ejecuta el siguiente comando en el directorio raíz de tu proyecto yarn add parse 3 obtén tus claves de aplicación después de crear tu aplicación en back4app, ve al panel de control de tu aplicación y obtén tus claves de aplicación en \configuración de la aplicación \>seguridad y claves\ (mira la imagen abajo) ten en cuenta que siempre necesitarás dos claves para conectarte con back4app, el \id de aplicación\ y \clave de javascript\ 4 inicializar parse y conectarse a back4app ve a tu \app js\ e inicializa el \parse sdk \ usando tanto el \id de aplicación\ como el \clave de javascript\ (revisa el paso anterior) 1 // import parse minified version 2 import parse from 'parse/dist/parse min js'; 3 4 // your parse initialization configuration goes here 5 const parse application id = 'your application id here'; 6 const parse host url = 'https //parseapi back4app com/'; 7 const parse javascript key = 'your javascript key here'; 8 parse initialize(parse application id, parse javascript key); 9 parse serverurl = parse host url; 5 guardar y leer un objeto de datos simple tu aplicación está inicializada y puede conectarse de forma segura a los servicios en la nube de back4app ahora, vamos a crear un componente que contenga dos funciones simples para guardar y recuperar datos de tu base de datos de back4app crea un nuevo archivo llamado \personcomponent js\ en tu \src\ directorio y agrega el siguiente código 1 import react, { usestate } from 'react'; 2 import parse from 'parse/dist/parse min js'; 3 4 export const personcomponent = () => { 5 // state variables 6 const \[person, setperson] = usestate(null); 7 8 async function addperson() { 9 try { 10 // create a new parse object instance 11 const person = new parse object('person'); 12 // define the attributes you want for your object 13 person set('name', 'john'); 14 person set('email', 'john\@back4app com'); 15 // save it on back4app data store 16 await person save(); 17 alert('person saved!'); 18 } catch (error) { 19 console log('error saving new person ', error); 20 } 21 } 22 23 async function fetchperson() { 24 // create your parse query using the person class you've created 25 const query = new parse query('person'); 26 // use the equalto filter to look for user which the name is john this filter can be used in any data type 27 query equalto('name', 'john'); 28 // run the query 29 const person = await query first(); 30 // access the parse object attributes 31 console log('person name ', person get('name')); 32 console log('person email ', person get('email')); 33 console log('person id ', person id); 34 setperson(person); 35 } 36 37 return ( 38 \<div> 39 \<button onclick={addperson}>add person\</button> 40 \<button onclick={fetchperson}>fetch person\</button> 41 {person !== null && ( 42 \<div> 43 \{`name ${person get('name')}`}\ 44 \{`email ${person get('email')}`}\ 45 \</div> 46 )} 47 \</div> 48 ); 49 }; el \método addperson \ crea un nuevo \parse object\ que representa una \clase person \ establece sus propiedades y luego lo guarda en el almacenamiento de datos en la nube de back4app el método \fetchperson \ recupera un \parse object\ que tiene el atributo \nombre \ igual a \john\ cuando la consulta se resuelve, podrás acceder a los atributos de la persona usando el \método get \ nota también los elementos de la interfaz en este componente, consisten en dos botones que llaman a los métodos y también en dos párrafos que recuperan el \persona \ a través de una variable de estado ahora necesitamos importar y usar este componente en tu archivo principal \app js\ tu \app js\ debería verse algo así, después de eliminar la mayor parte del código de marcador de posición en él 1 import ' /app css'; 2 import parse from 'parse/dist/parse min js'; 3 import { personcomponent } from ' /personcomponent'; 4 5 // your parse initialization configuration goes here 6 const parse application id = 'your parse application id'; 7 const parse host url = 'https //parseapi back4app com/'; 8 const parse javascript key = 'your parse javascript key'; 9 parse initialize(parse application id, parse javascript key); 10 parse serverurl = parse host url; 11 12 function app() { 13 return ( 14 \<div classname="app"> 15 \<header classname="app header"> 16 \<personcomponent /> 17 \</header> 18 \</div> 19 ); 20 } 21 22 export default app; 6 prueba tu app abre la terminal de tu proyecto ejecuta \yarn start\ tu navegador debería abrirse después de compilar con la aplicación en ejecución haz clic en el botón para agregar una nueva \persona \ primero, luego haz clic para obtener la misma \persona\ has guardado y recuperado un objeto de datos de back4app también puedes verificar los datos en tu tablero de la app https //parse dashboard back4app com/apps/ y haciendo clic en la clase persona qué hacer a continuación como has visto, la forma más fácil de integrar back4app en tu proyecto de react es a través del parse javascript sdk https //www npmjs com/package/parse el sdk de parse ofrece una excelente experiencia de desarrollo a través de una capa ligera y fácil de usar que proporciona una configuración mínima y reutilización de código