Como construir um backend para ReactJS?

introdução neste tutorial, você aprenderá como construir um backend completo para uma aplicação reactjs usando o back4app vamos passar pela integração de recursos essenciais do back4app como gerenciamento de banco de dados, funções de cloud code, apis rest e graphql, autenticação de usuários e consultas em tempo real (consultas ao vivo) para criar um backend seguro, escalável e robusto que se comunica perfeitamente com seu frontend reactjs você também verá como a configuração rápida e o ambiente intuitivo do back4app podem reduzir drasticamente o tempo e o esforço em comparação com a configuração manual de servidores e bancos de dados ao longo do caminho, você ganhará experiência prática com funcionalidades chave, incluindo recursos avançados de segurança, agendamento de tarefas com cloud jobs e configuração de webhooks para integrações externas ao final deste tutorial, você estará bem preparado para aprimorar essa configuração básica em uma aplicação pronta para produção ou incorporar facilmente lógica personalizada e apis de terceiros conforme necessário 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, pode criar uma gratuitamente siga o guia acima para preparar seu projeto ambiente básico de desenvolvimento reactjs você pode configurá lo usando create react app https //create react app dev/docs/getting started/ ou uma ferramenta similar certifique se de ter o node js instalado em sua máquina node js (versão 14 ou superior) instalado você precisará 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 reactjs documentação oficial do reactjs https //reactjs org/docs/getting started html se você é novo no react, revise a documentação oficial ou um tutorial para iniciantes antes de começar certifique se de ter todos esses pré requisitos em ordem antes de começar ter seu projeto back4app configurado e seu ambiente local de reactjs pronto ajudará você a acompanhar mais facilmente passo 1 – configurando o projeto back4app criar um novo projeto o primeiro passo para construir seu backend reactjs no back4app é criar um novo projeto se você ainda não criou um, 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, “reactjs backend tutorial”) uma vez que o projeto é criado, você verá ele listado no seu painel do back4app este projeto será a base para todas as configurações de backend discutidas neste tutorial conectar o sdk do parse o back4app depende da plataforma parse para gerenciar seus dados, fornecer recursos em tempo real, lidar com autenticação de usuários e mais conectar sua aplicação reactjs ao back4app envolve instalar o pacote npm do parse e inicializá lo com as credenciais do seu painel do back4app recupere suas chaves parse no seu painel do back4app, navegue até a seção “configurações do app” ou “segurança & chaves” para encontrar seu id da aplicação e chave javascript você também encontrará a url do servidor parse (geralmente no formato https //parseapi back4app com ) instale o sdk do parse no seu projeto reactjs npm install parse se você estiver usando yarn, pode instalá lo com yarn add parse inicialize o parse na sua aplicação reactjs normalmente, você criaria um arquivo (por exemplo, parseconfig js ) no seu diretório src src/parseconfig js // src/parseconfig js import parse from 'parse'; // replace the placeholders with your back4app credentials parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; este arquivo garante que sempre que você importar o parse em outro lugar no seu aplicativo react, ele esteja pré configurado para se conectar à sua instância específica do back4app ao completar esta etapa, você estabeleceu uma conexão segura entre seu front end reactjs e o back end do back4app todas as solicitações e transações de dados são roteadas de forma segura através deste sdk, reduzindo a complexidade de chamadas rest ou graphql manuais (embora você ainda possa usá las quando necessário) etapa 2 – configurando o banco de dados salvando e consultando dados com seu projeto back4app configurado e o sdk parse integrado ao seu aplicativo react, você pode agora começar a salvar e recuperar dados a maneira mais simples de criar um registro é usar a parse object classe // example create a todo item import parse from ' /parseconfig'; async function createtodoitem(title, iscompleted) { const todo = parse object extend('todo'); const todo = new todo(); todo set('title', title); todo set('iscompleted', iscompleted); try { const savedtodo = await todo save(); console log('todo saved successfully ', savedtodo); return savedtodo; } catch (error) { console error('error saving todo ', error); } } // example query all todo items async function fetchtodos() { const todo = parse object extend('todo'); const query = new parse query(todo); try { const results = await query find(); console log('fetched todo items ', results); return results; } catch (error) { console error('error fetching todos ', error); } } alternativamente, você pode usar os endpoints da api rest do back4app 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 o back4app também fornece uma interface graphql mutation { createtodo(input { fields { title "clean the house" iscompleted false } }) { todo { objectid title iscompleted } } } essas opções diversas permitem que você integre operações de dados da maneira que melhor se adapta ao seu processo de desenvolvimento seja através do sdk do parse, rest ou graphql design de esquema e tipos de dados por padrão, o parse permite criação de esquema em tempo real , mas você também pode definir suas classes e tipos de dados no painel do back4app para mais controle 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 iscompleted (boolean) o back4app também suporta vários tipos de dados string , número , booleano , objeto , data , arquivo , ponteiro, array, relação , geopoint , e polígono você pode escolher o tipo apropriado para cada campo se preferir, você também pode deixar o parse criar automaticamente essas colunas quando você salvar um objeto pela primeira vez a partir do seu aplicativo react o back4app oferece um agente de ia que pode ajudá lo a projetar seu modelo de dados abra o agente de ia a partir do seu painel de aplicativos ou no menu descreva seu modelo de dados em linguagem simples (por exemplo, “por favor, crie um novo aplicativo todo no back4app com um esquema de classe completo ”) deixe o agente de ia criar o esquema para você usar o agente de ia pode economizar seu tempo ao configurar sua arquitetura de dados e garantir consistência em seu aplicativo dados relacionais se você tem dados relacionais digamos, um objeto categoria que aponta para vários itens todo você pode usar ponteiros ou relações no parse por exemplo, adicionando um ponteiro a uma categoria // linking a task to a category with a pointer async function createtaskforcategory(categoryobjectid, title) { const todo = new parse object('todo'); // construct a pointer to the category const categorypointer = new parse object('category'); categorypointer id = categoryobjectid; // set fields todo set('title', title); todo set('category', categorypointer); try { return await todo save(); } catch (err) { console error('error creating task with category relationship ', err); } } quando você consulta, também pode incluir dados de ponteiro const query = new parse query('todo'); query include('category'); const todoswithcategory = await query find(); esta include('category') chamada busca detalhes da categoria junto com cada todo, tornando seus dados relacionais acessíveis de forma contínua consultas em tempo real para atualizações em tempo real, o back4app fornece consultas em tempo real em seu aplicativo reactjs, você pode se inscrever para mudanças em uma classe específica ative as consultas em tempo real no seu painel do back4app sob as configurações do servidor certifique se de que “consultas em tempo real” esteja ativado inicialize uma assinatura de consulta em tempo real no seu código src/parseconfig js // src/parseconfig js import parse from 'parse'; // replace the placeholders with your back4app credentials parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; // live query's subdomain parse livequeryserverurl = 'wss\ //your subdomain here b4a io'; export default parse; import parse from ' /parseconfig'; async function subscribetotodos(callback) { const query = new parse query('todo'); const subscription = await query subscribe(); subscription on('create', (newtodo) => { console log('new todo created ', newtodo); callback('create', newtodo); }); subscription on('update', (updatedtodo) => { console log('todo updated ', updatedtodo); callback('update', updatedtodo); }); subscription on('delete', (deletedtodo) => { console log('todo deleted ', deletedtodo); callback('delete', deletedtodo); }); return subscription; } ao se inscrever, você recebe notificações em tempo real sempre que um novo todo é criado, atualizado ou deletado este recurso é particularmente valioso para aplicativos colaborativos ou dinâmicos onde múltiplos usuários precisam ver os dados mais recentes sem atualizar a página passo 3 – aplicando segurança com acls e clps mecanismo de segurança do back4app o back4app leva a segurança a sério, fornecendo listas de controle de acesso (acls) e permissões de nível de classe (clps) esses recursos permitem restringir quem pode ler ou escrever dados com base em cada objeto ou classe, garantindo que apenas usuários autorizados possam modificar seus dados listas de controle de acesso (acls) um acl é aplicado a objetos individuais para determinar quais usuários, funções ou o público podem realizar operações de leitura/gravação por exemplo async function createprivatetodo(title, owneruser) { const todo = parse object extend('todo'); const todo = new todo(); todo set('title', title); // create an acl granting read/write access only to the owner const acl = new parse acl(owneruser); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); todo setacl(acl); try { return await todo save(); } catch (err) { console error('error saving private todo ', err); } } quando você salva o objeto, ele tem um acl que impede qualquer pessoa, exceto o usuário especificado, de lê lo ou modificá lo permissões de nível de classe (clps) clps governam as permissões padrão de toda a classe, como se a classe é legível ou gravável publicamente, ou se apenas certos papéis podem acessá la vá para o seu painel do back4app , selecione seu aplicativo e abra a base de dados seção selecione uma classe (por exemplo, “todo”) abra as permissões de nível de classe aba configure seus padrões, como “requer autenticação” para leitura ou gravação, ou “sem acesso” para o público essas permissões definem a linha de base, enquanto as acls ajustam as permissões para objetos individuais um modelo de segurança robusto geralmente combina tanto clps (restrições amplas) quanto acls (restrições detalhadas por objeto) para mais informações, vá para diretrizes de segurança do app passo 4 – escrevendo e implantando funções em nuvem o cloud code é um recurso do ambiente parse server que permite executar código javascript personalizado no lado do servidor sem precisar gerenciar seus servidores ou infraestrutura ao escrever cloud code, você pode estender seu backend do back4app com lógica de negócios adicional, validações, gatilhos e integrações que são executadas de forma segura e eficiente no parse server como funciona quando você escreve cloud code, normalmente coloca suas funções javascript, gatilhos e quaisquer módulos npm necessários em um main js (ou app js ) arquivo este arquivo é então implantado em seu projeto back4app, que é executado dentro do ambiente parse server como essas funções e gatilhos são executados no servidor, você pode confiar que eles lidam com lógica confidencial, processam dados sensíveis ou fazem chamadas de api apenas no backend processos que você pode não querer expor diretamente ao cliente todo o cloud code para seu app back4app é executado dentro do parse server que é gerenciado pelo back4app, então você não precisa se preocupar com manutenção de servidor, escalonamento ou provisionamento sempre que você atualizar e implantar seu arquivo main js, o parse server em execução é atualizado com seu código mais recente estrutura do arquivo main js um típico main js pode conter declarações de require para quaisquer módulos necessários (pacotes npm, módulos internos do node ou outros arquivos de código em nuvem) definições de funções em nuvem usando parse cloud define() gatilhos como parse cloud beforesave() , parse cloud aftersave() , etc módulos npm que você instalou (se necessário) por exemplo, você pode instalar um pacote como axios para fazer requisições http você pode então requerer (ou importar) no topo do seu arquivo // main js // 1 import necessary modules and other cloud code files const axios = require('axios'); const report = require(' /reports'); // 2 define a custom cloud function parse cloud define('fetchexternaldata', async (request) => { const url = request params url; if (!url) { throw new error('url parameter is required'); } const response = await axios get(url); return response data; }); // 3 example of a beforesave trigger parse cloud beforesave('todo', (request) => { const todo = request object; if (!todo get('title')) { throw new error('todo must have a title'); } }); com a capacidade de instalar e usar módulos npm, o cloud code se torna incrivelmente flexível, permitindo que você integre com apis externas, realize transformações de dados ou execute lógica complexa do lado do servidor casos de uso típicos lógica de negócios por exemplo, você pode calcular a pontuação de um usuário em um jogo agregando várias propriedades de objeto e, em seguida, armazenar esses dados automaticamente validações de dados garantir que certos campos estejam presentes ou que um usuário tenha as permissões corretas antes de salvar ou excluir um registro gatilhos realizar ações quando os dados mudam (por exemplo, enviar uma notificação quando um usuário atualiza seu perfil) integrações conectar se com apis ou serviços de terceiros por exemplo, você poderia integrar com gateways de pagamento, notificações do slack ou plataformas de marketing por e mail diretamente do cloud code aplicação de segurança adicione uma camada extra de segurança validando e sanitizando parâmetros de entrada em suas funções do cloud code por exemplo, você pode garantir que os dados recebidos correspondam a formatos específicos, rejeitar entradas inválidas ou maliciosas e aplicar regras de acesso com base em funções ou permissões de usuário antes de realizar operações sensíveis implante sua função abaixo está uma função simples de cloud code que calcula o comprimento de uma string de texto enviada do cliente main js // main js parse cloud define('calculatetextlength', async (request) => { const { text } = request params; if (!text) { throw new error('no text provided'); } return { length text length }; }); implantando via o back4app cli 1 instale o cli para linux/macos curl https //raw\ githubusercontent com/back4app/parse cli/back4app/installer sh | sudo /bin/bash para windows baixe o b4a exe arquivo da página de lançamentos https //github com/back4app/parse cli/releases 2 configure sua chave de conta b4a configure accountkey 3 faça o deploy do seu código em nuvem b4a deploy fazendo o deploy através do painel no painel do seu aplicativo, vá para código em nuvem > funções copie/cole a função no main js editor clique em deploy chamando sua função do reactjs usando o sdk parse import parse from ' /parseconfig'; async function gettextlength(text) { try { const result = await parse cloud run('calculatetextlength', { text }); console log('text length ', result length); } catch (err) { console error('error calling cloud function ', err); } } você também pode chamá lo via 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 '{"text" "hello back4app"}' \\ https //parseapi back4app com/functions/calculatetextlength ou via graphql mutation { calculatetextlength(input { text "hello graphql" }) { result } } essa flexibilidade permite que você integre sua lógica personalizada em seu frontend reactjs ou em qualquer outro cliente que suporte rest ou graphql passo 5 – configurando a autenticação do usuário autenticação de usuário no back4app o back4app utiliza a classe parse user como base para autenticação por padrão, o parse lida com a hash de senhas, tokens de sessão e armazenamento seguro isso significa que você não precisa configurar fluxos de segurança complexos manualmente configurando a autenticação do usuário em uma aplicação react, você pode criar um novo usuário com import parse from ' /parseconfig'; async function signupuser(username, password, email) { const user = new parse user(); user set('username', username); user set('password', password); user set('email', email); try { await user signup(); console log('user signed up successfully!'); } catch (error) { console error('error signing up user ', error); } } faça login em um usuário existente async function loginuser(username, password) { try { const user = await parse user login(username, password); console log('user logged in ', user); } catch (error) { console error('error logging in user ', error); } } via rest, um login pode parecer com 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=secret123' \\ https //parseapi back4app com/login gerenciamento de sessão após um login bem sucedido, o parse cria um token de sessão que é armazenado no objeto do usuário no seu aplicativo react, você pode acessar o usuário atualmente logado const currentuser = parse user current(); if (currentuser) { console log('currently logged in user ', currentuser getusername()); } else { console log('no user is logged in'); } o parse gerencia automaticamente sessões baseadas em token em segundo plano, mas você também pode gerenciá las ou revogá las manualmente isso é útil quando você precisa sair await parse user logout(); integração de login social back4app e parse podem se integrar com provedores populares de oauth, como google ou facebook , instalando pacotes adicionais ou usando adaptadores existentes por exemplo, você pode configurar um login do facebook configurando seu id do app do facebook e usando parse facebookutils login() instruções detalhadas variam, então consulte os documentos de login social https //www back4app com/docs/platform/sign in with apple const facebooklogin = async () => { try { const user = await parse facebookutils login('email'); console log(user existed() ? 'user logged in' 'user signed up and logged in'); } catch (error) { console error('error logging in with facebook ', error); } }; verificação de email e redefinição de senha para habilitar a verificação de email e a redefinição de senha navegue até as configurações de email no seu painel do back4app habilite a verificação de email para garantir que novos usuários verifiquem a propriedade de seus endereços de email configure o endereço de remetente , modelos de email e seu domínio personalizado, se desejado esses recursos melhoram a segurança da conta e a experiência do usuário, validando a propriedade do email pelos usuários e fornecendo um método seguro de recuperação de senha passo 6 – gerenciando armazenamento de arquivos carregando e recuperando arquivos parse inclui a parse file classe para gerenciar uploads de arquivos, que o back4app armazena de forma segura import parse from ' /parseconfig'; async function uploadimage(file) { // file is typically from an \<input type="file" /> in react const name = file name; const parsefile = new parse file(name, file); try { const savedfile = await parsefile save(); console log('file saved ', savedfile url()); return savedfile url(); } catch (err) { console error('error uploading file ', err); } } para anexar o arquivo a um objeto no banco de dados, você pode fazer async function createphotoobject(file) { const photo = parse object extend('photo'); const photo = new photo(); const parsefile = new parse file(file name, file); photo set('imagefile', parsefile); return await photo save(); } a recuperação da url do arquivo é simples const imagefile = photo get('imagefile'); const imageurl = imagefile url(); você pode exibir esta imageurl em seus componentes react definindo a como o src de uma tag \<img> segurança de arquivos o parse server fornece configurações flexíveis para gerenciar a segurança do upload de arquivos o exemplo a seguir mostra como você pode definir permissões para controlar quem pode fazer upload de arquivos para o servidor enableforpublic quando definido como verdadeiro, permite que qualquer pessoa, independentemente do status de autenticação, faça upload de arquivos enableforanonymoususer controla se usuários anônimos (não registrados) podem fazer upload de arquivos quando habilitado, usuários temporários ou convidados podem fazer upload de arquivos enableforauthenticateduser especifica se apenas usuários autenticados podem fazer upload de arquivos isso é ideal para garantir que apenas usuários confiáveis tenham acesso a essa funcionalidade passo 7 – agendando tarefas com cloud jobs cloud jobs cloud jobs no back4app permite que você agende e execute tarefas rotineiras em seu backend como limpar dados antigos ou enviar um e mail de resumo diário um cloud job típico pode parecer assim // main js parse cloud job('cleanupoldtodos', async (request) => { // this runs in the background, not triggered by a direct user request const todo = parse object extend('todo'); const query = new parse query(todo); // for example, remove todos older than 30 days 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 seu cloud code com o novo trabalho (via cli ou o painel) vá para o painel do back4app > configurações do app > configurações do servidor > tarefas em segundo plano agende o trabalho para ser executado diariamente ou em qualquer intervalo que atenda suas necessidades trabalhos na nuvem permitem que você automatize a manutenção em segundo plano ou outros processos periódicos sem exigir intervenção manual passo 8 – integrando webhooks webhooks permitem que seu aplicativo back4app envie solicitações http para um serviço externo sempre que certos eventos ocorrerem isso é poderoso para integrar com sistemas de terceiros, como gateways de pagamento (por exemplo, stripe), ferramentas de marketing por e mail ou plataformas de análise navegue até a configuração de webhooks no seu painel do back4app > mais > webhooks e clique em adicionar webhook configure um endpoint (por exemplo, https //seu servico externo com/webhook endpoint) configure gatilhos para especificar quais eventos nas suas classes do back4app ou funções de cloud code dispararão o webhook por exemplo, se você quiser notificar um canal do slack sempre que um novo todo for criado crie um aplicativo slack que aceite webhooks de entrada copie a url do webhook do slack no seu painel do back4app, defina o endpoint para essa url do slack para o evento “novo registro na classe todo ” você também pode adicionar cabeçalhos http ou payloads personalizados, se necessário você também pode definir webhooks no cloud code fazendo solicitações http personalizadas em gatilhos como beforesave, aftersave passo 9 – explorando o painel de administração do back4app o back4app admin app é uma interface de gerenciamento baseada na web projetada para usuários não técnicos realizarem operações crud e lidarem com tarefas rotineiras de dados sem escrever nenhum código ele fornece uma centrada em modelos , amigável ao usuário interface que simplifica a administração de banco de dados, gerenciamento de dados personalizados e operações em nível empresarial habilitando o app de administração habilite indo para app dashboard > mais > app de administração e clicando no botão “habilitar app de administração” crie um primeiro usuário administrador (nome de usuário/senha), que gera automaticamente um novo papel (b4aadminuser) e classes (b4asetting, b4amenuitem e b4acustomfield) no esquema do seu app escolha um subdomínio para acessar a interface de administração e complete a configuração entrar usando as credenciais de administrador que você criou para acessar o painel do seu novo aplicativo admin uma vez ativado, o aplicativo admin do back4app facilita a visualização, edição ou remoção de registros do seu banco de dados sem exigir o uso direto do parse dashboard ou código de backend com controles de acesso configuráveis, você pode compartilhar essa interface com segurança com membros da equipe ou clientes que precisam de uma maneira clara e intuitiva de gerenciar dados conclusão ao seguir este tutorial abrangente, você criou um backend seguro para um aplicativo reactjs no back4app configurou um banco de dados com esquemas de classe, tipos de dados e relacionamentos integrou consultas em tempo real (consultas ao vivo) para atualizações imediatas de dados aplicou medidas de segurança usando acls e clps para proteger e gerenciar o acesso aos dados implementou funções de cloud code para executar lógica de negócios personalizada no lado do servidor configurou autenticação de usuário com suporte para verificação de e mail e redefinições de senha gerenciou uploads de arquivos e recuperação, com controles de segurança de arquivos opcionais agendou cloud jobs para tarefas automatizadas em segundo plano usou webhooks para integrar com serviços externos explorou o painel de administração do back4app para gerenciamento de dados com um frontend reactjs sólido e um backend robusto no back4app, você está agora bem equipado para desenvolver aplicativos ricos em recursos, escaláveis e seguros continue explorando funcionalidades mais avançadas, integre sua lógica de negócios e aproveite o poder do back4app para economizar inúmeras horas na administração de servidores e bancos de dados boa codificação! próximos passos construa um aplicativo reactjs pronto para produção estendendo este backend para lidar com modelos de dados mais complexos, estratégias de cache e otimizações de desempenho integre recursos avançados como fluxos de autenticação especializados, controle de acesso baseado em funções ou apis externas (como gateways de pagamento) confira a documentação oficial do back4app para mergulhos mais profundos em segurança avançada, ajuste de desempenho e análise de logs explore outros tutoriais sobre aplicativos de chat em tempo real, painéis de iot ou serviços baseados em localização você pode combinar as técnicas aprendidas aqui com apis de terceiros para criar aplicativos complexos do mundo real