Como Construir um Backend para React Native?

introdução neste tutorial, você aprenderá como construir um backend para react native usando o back4app focaremos na compatibilidade entre plataformas e ilustraremos como você pode integrar recursos essenciais do back4app para gerenciamento de dados, autenticação de usuários e dados em tempo real ao aproveitar as apis rest e graphql, você pode desenvolver seu projeto react native para rodar em ambas as plataformas ios e android, garantindo uma experiência contínua entre componentes nativos e aplicativos móveis implementar logins de usuários seguros, agendar tarefas e usar aplicativos em tempo real tornará sua jornada como desenvolvedor full stack mais fácil você também verá como o ambiente do back4app pode reduzir o tempo necessário para configurar serviços, incluindo hospedagem, banco de dados e camadas de segurança ao final, você terá uma estrutura de backend robusta que suporta seu aplicativo react native e abre caminho para construir soluções móveis em escala após completar este guia, você estará pronto para expandir seu aplicativo com recursos avançados, integrar serviços de terceiros ou transformar seu projeto em uma plataforma pronta para produção vamos mergulhar no desenvolvimento moderno de aplicativos móveis com back4app e react native! pré requisitos para completar este tutorial, você precisará uma conta back4app e um novo projeto back4app começando com back4app https //www back4app com/docs/get started/new parse app se você não tiver uma conta, inscreva se gratuitamente em seguida, siga o guia para preparar seu projeto ambiente básico de desenvolvimento react native você pode usar o react native cli quickstart https //reactnative dev/docs/environment setup ou expo cli https //docs expo dev/get started/installation/ certifique se de ter o node js instalado node js (versão 14 ou superior) instalado você precisa do node js para instalar pacotes npm e executar servidores de desenvolvimento locais instalando o node js https //nodejs org/en/download/ familiaridade com javascript e conceitos básicos de react native documentação oficial do react native https //reactnative dev/ se você é novo no desenvolvimento react native, revise a documentação ou um tutorial para iniciantes primeiro certifique se de ter esses pré requisitos em ordem antes de começar ter seu projeto back4app criado e seu ambiente local de react native configurado garantirá um processo tranquilo passo 1 – criando um novo projeto no back4app e conectando criar um novo projeto o primeiro passo para construir backends móveis para seu aplicativo react native é criar um novo projeto no back4app siga estes passos faça login na sua conta back4app clique no botão “novo app” no seu painel do back4app dê um nome ao seu app (por exemplo, “reactnative backend tutorial”) uma vez que o projeto é criado, ele aparecerá no seu painel do back4app você usará este novo projeto para gerenciar dados e configurar a segurança do seu aplicativo react native obtendo suas chaves de aplicação diferente dos aplicativos react baseados na web, o desenvolvimento em react native frequentemente requer solicitações http diretas para recuperação e manipulação de dados como estamos focando em apis rest (ou apis graphql ) em vez do sdk parse, você ainda precisará das suas chaves do back4app para enviar solicitações autenticadas recupere suas chaves parse no painel do back4app, abra as configurações do app ou a seção segurança & chaves para encontrar seu id da aplicação , chave da api rest , e endpoint graphql (geralmente https //parseapi back4app com/graphql ) anote sua chave da api rest você a incluirá nos cabeçalhos do fetch ou axios do seu react native para autenticar cada solicitação esta etapa garante que seus aplicativos móveis possam se comunicar de forma segura com o back4app etapa 2 – configurando o banco de dados back4app oferece uma ampla gama de opções de backend para aplicativos react native, incluindo robustas capacidades de gerenciamento de dados você pode criar classes, adicionar campos e definir relacionamentos através do painel se você está construindo aplicativos em tempo real ou aplicativos crud mais simples, o painel do back4app ajuda você a armazenar e organizar dados facilmente criando um modelo de dados navegue até a seção “banco de dados no seu painel do back4app crie uma nova classe (por exemplo, “todo”) e adicione colunas relevantes como título (string) e estácompleto (boolean) back4app suporta vários tipos de dados string , número , booleano , objeto , data , arquivo , ponteiro , array , relação , geopoint , e polígono você também pode permitir que o parse crie campos automaticamente quando você enviar novos dados criando um modelo de dados com agente de ia se preferir, você pode usar o agente de ia do back4app abra o agente de ia no seu painel de aplicativos descreva seu modelo de dados em linguagem simples (por exemplo, “crie uma classe todo com campos de título e iscompleted ”) deixe o agente de ia criar o esquema para você isso pode economizar tempo durante as fases iniciais do seu projeto react native lendo e escrevendo dados usando rest api para o desenvolvimento típico de react native, você pode usar a api nativa fetch ou uma biblioteca de terceiros como axios para lidar com apis rest abaixo está um exemplo usando curl, que você pode adaptar para fetch post (criar um todo) curl x post \\ h "x parse application id your application id" \\ h "x parse rest api key your rest api key" \\ h "content type application/json" \\ d '{"title" "buy groceries", "iscompleted" false}' \\ https //parseapi back4app com/classes/todo get (buscar todos) curl x get \\ h "x parse application id your application id" \\ h "x parse rest api key your rest api key" \\ https //parseapi back4app com/classes/todo no seu aplicativo react native, você pode fazer o mesmo com fetch async function gettodos() { try { const response = await fetch('https //parseapi back4app com/classes/todo', { method 'get', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json', }, }); const data = await response json(); console log('fetched todos ', data results); return data results; } catch (error) { console error('error fetching todos ', error); } } lendo e escrevendo dados usando a api graphql se você preferir graphql, o back4app fornece um endpoint graphql abaixo está um exemplo de mutação para criar um novo registro mutation { createtodo(input { fields { title "clean the house" iscompleted false } }) { todo { objectid title iscompleted } } } você pode executar consultas graphql usando uma biblioteca como apollo client ou até mesmo uma simples fetch chamada async function createtodographql() { const query = ` mutation { createtodo(input { fields { title "study react native" iscompleted false } }) { todo { objectid title } } } `; try { const response = await fetch('https //parseapi back4app com/graphql', { method 'post', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json', }, body json stringify({ query }), }); const result = await response json(); console log('graphql response ', result); } catch (error) { console error('error creating todo with graphql ', error); } } trabalhando com consultas ao vivo (opcional) para dados em tempo real, o back4app possui consultas ao vivo, embora normalmente exija o sdk do parse como estamos focando em chamadas rest neste tutorial, você pode habilitar consultas ao vivo nas configurações do servidor do seu aplicativo se planeja usá las mais tarde dados em tempo real podem ajudar a manter os usuários atualizados instantaneamente em um aplicativo react native para uma abordagem mais simples, você pode consultar o servidor com seus próprios intervalos ou confiar em ferramentas de terceiros passo 3 – aplicando segurança com acls e clps visão geral o back4app protege seu backend com acls (listas de controle de acesso) e clps (permissões de nível de classe) esses permitem que você proteja dados tanto no nível do objeto quanto no nível da classe eles são vitais para implementar permissões de usuário seguras no desenvolvimento de aplicativos móveis de nível de produção passo a passo permissões de nível de classe (clps) vá para a seção banco de dados do seu aplicativo, abra qualquer classe e mude para “segurança & permissões ” ajuste as permissões de leitura/gravação para vários papéis de usuário ou acesso público acls você pode aplicar controle de acesso por objeto incluindo campos acl em suas solicitações rest por exemplo para mais detalhes, confira as diretrizes de segurança do app https //www back4app com/docs/security/parse security passo 4 – escrevendo funções de cloud code por que cloud code cloud code permite que você execute scripts do lado do servidor no back4app para tarefas como validações, gatilhos e processamento de chamadas de api externas ele ajuda a controlar a lógica que deve permanecer oculta do cliente, proporcionando melhor segurança para o seu projeto react native função de exemplo abaixo está um exemplo que você escreveria em seu main js no lado do servidor você pode chamá lo do seu aplicativo react native através do rest // main js parse cloud define('generategreeting', async (request) => { const { name } = request params; if (!name) { throw 'name parameter is missing!'; } return `hello, ${name}! welcome to our react native app `; }); implantação back4app cli instale o cli, configure sua chave de conta e execute b4a deploy painel você também pode ir para cloud code > functions , cole seu código em main js , e clique em implantar chamando sua função (via rest) use apis rest diretamente do seu aplicativo react native async function callcloudfunction(name) { try { const response = await fetch('https //parseapi back4app com/functions/generategreeting', { method 'post', headers { 'x parse application id' 'your app id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json', }, body json stringify({ name }), }); const data = await response json(); console log('greeting ', data result); } catch (err) { console error('error calling cloud function ', err); } } essa flexibilidade torna você um desenvolvedor full stack mais eficiente, pois você pode integrar a lógica de negócios sem expor detalhes sensíveis no cliente passo 5 – configurando a autenticação ativar ou configurar a autenticação do usuário back4app usa a classe parse user para gerenciar a autenticação do usuário mesmo que você não esteja usando o sdk parse no react native, você pode registrar, fazer login ou sair usando requisições http diretas registrar um usuário (rest) curl x post \\ h "x parse application id your app id" \\ h "x parse rest api key your rest api key" \\ h "content type application/json" \\ d '{ "username" "alice", "password" "secretpassword", "email" "alice\@example com" }' \\ https //parseapi back4app com/users fazer login (rest) curl x get \\ h "x parse application id your app id" \\ h "x parse rest api key your rest api key" \\ g \\ \ data urlencode 'username=alice' \\ \ data urlencode 'password=secretpassword' \\ https //parseapi back4app com/login essas requisições retornam um token de sessão que você pode armazenar em seu aplicativo react native para gerenciar sessões de usuário isso garante que cada requisição que você faz possa ser autorizada, construindo experiências móveis que permanecem seguras login social back4app suporta logins sociais (google, facebook, apple) através de fluxos especializados você precisará seguir o documentos de login social https //www back4app com/docs/platform/sign in with apple para configurar aplicativos oauth e, em seguida, enviar os tokens apropriados para o back4app passo 6 – gerenciando armazenamento de arquivos configurando armazenamento de arquivos back4app pode armazenar arquivos para seu aplicativo react native você pode anexá los a objetos ou enviá los diretamente como estamos usando rest, abaixo está um exemplo de upload de um arquivo (codificado em base64) curl x post \\ h "x parse application id your app id" \\ h "x parse rest api key your rest api key" \\ h "content type image/png" \\ \ data binary '@path to your file png' \\ https //parseapi back4app com/files/image png a resposta retorna uma url que você pode armazenar em seu banco de dados a partir do seu aplicativo react native, você pode fazer isso com fetch enviando o arquivo como um blob ou dados de formulário considerações de segurança para evitar uploads não autorizados, configure as opções de fileupload em suas configurações do parse server por exemplo, você poderia permitir uploads apenas de usuários autenticados isso garante que serviços, incluindo armazenamento de arquivos, permaneçam protegidos passo 7 – verificação de email e redefinição de senha visão geral confirmar a propriedade do email é fundamental para implementar fluxos de usuário seguros o back4app oferece ferramentas integradas para verificação de email e redefinições de senha configuração do painel do back4app abra as configurações do seu app ative a verificação de email nas configurações de email personalize os templates para mensagens de redefinição de senha e verificação código/implementação um usuário que esquece sua senha pode acionar um pedido de redefinição curl x post \\ h "x parse application id your app id" \\ h "x parse rest api key your rest api key" \\ h "content type application/json" \\ d '{"email" "alice\@example com"}' \\ https //parseapi back4app com/requestpasswordreset o back4app envia um e mail de redefinição de senha para o usuário essa conveniência evita que você configure servidores de e mail separados em seu aplicativo react native passo 8 – agendando tarefas com cloud jobs o que os cloud jobs fazem os cloud jobs ajudam você a automatizar tarefas recorrentes, como limpeza de dados ou envio de relatórios diários abaixo está um exemplo de trabalho em main js // main js parse cloud job('cleanupoldtodos', async (request) => { const todo = parse object extend('todo'); const query = new parse query(todo); const now = new date(); const thirty days = 30 24 60 60 1000; const cutoff = new date(now thirty days); query lessthan('createdat', cutoff); try { const oldtodos = await query find({ usemasterkey true }); await parse object destroyall(oldtodos, { usemasterkey true }); return `deleted ${oldtodos length} old todos `; } catch (err) { throw new error('error during cleanup ' + err message); } }); implante este código, depois vá para configurações do servidor > tarefas em segundo plano para agendá lo isso mantém seus dados atualizados em suas plataformas ios e android sem intervenção manual passo 9 – integrando webhooks definição webhooks permitem que seu backend notifique serviços externos sempre que um evento ocorre por exemplo, você pode notificar o slack ou um gateway de pagamento ao criar um novo todo configuração vá para mais > webhooks no seu painel do back4app adicione um novo webhook apontando para um endpoint externo desejado defina gatilhos para determinar quando as mudanças nos dados do seu aplicativo react native devem acionar o webhook você também pode codificar webhooks dentro de gatilhos de cloud code, permitindo que você envie requisições http ou integre com apis de terceiros isso amplia as capacidades do seu backend para uma ampla gama de serviços externos passo 10 – explorando o painel de administração do back4app onde encontrá lo o painel de administração do back4app é uma interface amigável para indivíduos não técnicos gerenciarem dados é especialmente útil para proprietários de produtos, representantes de clientes ou equipe de suporte que precisam de acesso direto ao seu modelo de dados recursos ativar o app de administração no seu painel do app > mais > app de administração criar um usuário administrador (nome de usuário/senha) escolher um subdomínio para acesso rápido ao banco de dados sem código uma vez logado, seus usuários ou equipe podem visualizar, editar ou excluir registros sem escrever nenhum código essa abordagem suporta uma gestão de dados mais rápida e colaboração conclusão neste guia, você aprendeu como construir um backend para aplicações react native , utilizando o back4app isso incluiu criar um backend seguro e implementar compatibilidade entre plataformas para seu aplicativo react native configurar gerenciamento de dados com apis rest e graphql configurar acls e clps para proteger dados sensíveis escrever cloud code para lógica do lado do servidor gerenciar autenticação de usuários e verificação de e mail gerenciar armazenamento de arquivos com uploads diretos agendar tarefas em segundo plano com cloud jobs usar webhooks para integrar serviços externos explorar o painel de administração do back4app para fácil administração de banco de dados com essas ferramentas e recursos, seu projeto react native pode se transformar em uma solução full stack confiável e escalável você agora está equipado para lidar com dados em tempo real, segurança do usuário e outros aspectos cruciais de aplicativos móveis continue explorando a documentação do back4app https //www back4app com/docs/ para aprimorar suas habilidades e criar experiências móveis poderosas nas plataformas ios e android próximos passos fortaleça seu aplicativo react native com segurança avançada e controle de acesso baseado em funções experimente atualizações em tempo real usando consultas ao vivo para aplicações em tempo real (se necessário) integre apis externas e serviços, incluindo gateways de pagamento ou logins sociais melhore o desempenho através de cache ou otimizando funções em nuvem aprofunde se em documentação oficial do back4app https //www back4app com/docs/ para desbloquear recursos adicionais