Quickstart

introducción esta guía te ayudará a configurar y usar back4app con un proyecto nuevo o existente utilizando el react native cli instalarás el parse sdk , lo inicializarás con las claves de tu aplicación y crearás tu primera llamada a la api para guardar y recuperar datos de back4app requisitos previos para completar este tutorial, necesitarás una aplicación creada en back4app npm https //www npmjs com/get npm?utm source=house\&utm medium=homepage\&utm campaign=free%20orgs\&utm term=install%20npm o yarn instalados npx https //www npmjs com/package/npx corredor de paquetes instalado 1 crea tu proyecto de react native hay dos formas principales de crear un proyecto de react native react native cli y expo elige según tu entorno de desarrollo y la plataforma objetivo (ios o android) react native cli las instrucciones dependen de tu sistema operativo de desarrollo y de si deseas comenzar a desarrollar para ios o android para más información, consulta la documentación oficial aquí expo instala expo cli globalmente crea un nuevo proyecto de react native 2 instalar dependencias en tu proyecto de react native, instala parse javascript sdk y asyncstorage ejecutando parse javascript sdk para integrar tu aplicación con los servidores de back4app react native async storage para usar el sdk de parse, se requiere un manejador de asyncstorage para ios, también agrega soporte nativo de asyncstorage 3 obtén tus claves de aplicación después de crear tu aplicación en back4app, encuentra tus claves de aplicación en configuración de la aplicación > seguridad y claves necesitarás tanto el id de aplicación como el clave de javascript para conectarte 4 inicializa parse y conéctate a back4app abre index tsx e inicializa parse con tu id de aplicación y clave de javascript index tsx import parse from 'parse/react native'; import asyncstorage from '@react native async storage/async storage'; // initialize parse only once parse setasyncstorage(asyncstorage); parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com/'; 5 guarda y recupera datos con parse inicializado, crea dos funciones en index tsx para guardar y obtener datos de back4app // function to create a new person async function createperson() { setloading(true); seterror(null); try { const personobject = parse object extend("person"); const personobject = new personobject(); personobject set("name", "back4app user"); const result = await personobject save(); setresult(`object created with id ${result id}`); } catch (error) { seterror(error instanceof error ? error message 'unknown error'); } finally { setloading(false); } } async function fetchpeople() { setloading(true); seterror(null); try { const personobject = parse object extend("person"); const query = new parse query(personobject); const results = await query find(); const names = results map(result => ({ objectid result id, name result get("name"), })); setresult(`fetched names ${json stringify(names, null, 2)}`); } catch (error) { seterror(error instanceof error ? error message 'unknown error'); } finally { setloading(false); } } 6 prueba tu aplicación abre la terminal de tu proyecto ejecuta el proyecto react native cli ejecuta npx react native run android npx react native run android o npx react native run ios npx react native run ios para abrir la aplicación en tu plataforma objetivo expo ejecuta expo start expo start , y sigue las instrucciones para ver la aplicación en tu navegador o dispositivo solución de problemas algunos problemas comunes y soluciones metro ha encontrado un error mientras intentaba resolver el módulo “idb keyval’ del archivo solución ve al archivo metro conf js metro conf js y cámbialo por este 1 const { getdefaultconfig } = require("@expo/metro config"); 2 const defaultconfig = getdefaultconfig( dirname); 3 defaultconfig resolver assetexts push("cjs"); 4 module exports = defaultconfig; no se puede resolver el módulo ‘eventemitter’ solución ve al archivo node modules\parse\lib\react native\eventemitter js node modules\parse\lib\react native\eventemitter js y cambia esta línea por esta en el mismo archivo eventemitter js eventemitter js , cambia la siguiente línea a esto problemas con babel en caso de que enfrentes algún problema con babel, considera actualizar tu babel config js a lo siguiente próximos pasos esta guía cubre la configuración básica y el almacenamiento de datos con back4app explora las características de parse, incluyendo almacenamiento de datos, capacidades en tiempo real, almacenamiento de datos local, funciones en la nube, autenticación y almacenamiento de archivos