Quickstart

introdução este guia irá ajudá lo a configurar e usar o back4app com um projeto novo ou existente usando o react native cli você instalará o parse sdk , inicializá lo com suas chaves de aplicativo e criar sua primeira chamada de api para salvar e recuperar dados do back4app pré requisitos para completar este tutorial, você precisará um aplicativo criado no back4app npm https //www npmjs com/get npm?utm source=house\&utm medium=homepage\&utm campaign=free%20orgs\&utm term=install%20npm ou yarn instalados npx https //www npmjs com/package/npx executador de pacotes instalado 1 crie seu projeto react native existem duas maneiras principais de criar um projeto react native react native cli e expo escolha com base no seu ambiente de desenvolvimento e na plataforma alvo (ios ou android) react native cli as instruções dependem do seu sistema operacional de desenvolvimento e se você deseja começar a desenvolver para ios ou android para mais informações, consulte a documentação oficial aqui expo instale o expo cli globalmente crie um novo projeto react native 2 instale as dependências no seu projeto react native, instale parse javascript sdk e asyncstorage executando parse javascript sdk para integrar seu app com os servidores back4app react native async storage para usar o sdk parse, um manipulador asyncstorage é necessário para ios, adicione também suporte nativo ao asyncstorage 3 obtenha suas chaves de aplicativo após criar seu aplicativo no back4app, encontre suas chaves de aplicativo em configurações do aplicativo > segurança & chaves você precisará tanto do id do aplicativo quanto da chave javascript para se conectar 4 inicialize o parse e conecte se ao back4app abra index tsx e inicialize o parse com seu id do aplicativo e chave 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 salve e recupere dados com o parse inicializado, crie duas funções em index tsx para salvar e buscar dados do 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 teste seu aplicativo abra o terminal do seu projeto execute o projeto react native cli execute npx react native run android npx react native run android ou npx react native run ios npx react native run ios para abrir o aplicativo na sua plataforma alvo expo execute expo start expo start , e siga as instruções para visualizar o aplicativo no seu navegador ou dispositivo solução de problemas alguns problemas comuns e soluções metro encontrou um erro ao tentar resolver o módulo “idb keyval’ do arquivo solução vá para o metro conf js metro conf js arquivo e altere o para este 1 const { getdefaultconfig } = require("@expo/metro config"); 2 const defaultconfig = getdefaultconfig( dirname); 3 defaultconfig resolver assetexts push("cjs"); 4 module exports = defaultconfig; incapaz de resolver o módulo ‘eventemitter’ solução vá para o arquivo node modules\parse\lib\react native\eventemitter js node modules\parse\lib\react native\eventemitter js e altere esta linha para isto no mesmo arquivo eventemitter js eventemitter js , mude a seguinte linha para isso problemas com babel caso você enfrente algum problema com babel, considere atualizar seu babel config js para o seguinte próximos passos este guia cobre a configuração básica e o armazenamento de dados com back4app explore os recursos do parse, incluindo armazenamento de dados, capacidades em tempo real, armazenamento de dados local, funções em nuvem, autenticação e armazenamento de arquivos