How to Build a Backend for Gatsby?

introdução neste tutorial, você aprenderá como construir um backend para gatsby usando o back4app nós vamos mostrar como integrar os recursos do back4app—como gerenciamento de banco de dados, funções de cloud code, api rest e capabilidades de consulta graphql , autenticação de usuário e consultas em tempo real (consultas ao vivo)—para criar um backend seguro, escalável e robusto que pode ser acessado a partir do seu site gatsby 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 necessários para lidar com tarefas de backend ao final, você saberá exatamente como construir um backend para gatsby que armazena e recupera dados, lida com autenticação, integra funções em nuvem e muito mais isso prepara você para incorporar facilmente lógica personalizada, adicionar apis de terceiros ou expandir seu modelo de dados sem se preocupar com a manutenção tradicional do servidor o que você vai construir e por que é valioso integração completa de backend você criará uma estrutura de backend escalável para seu site gatsby, incorporando o parse sdk, que é perfeito para necessidades de dados dinâmicos economia de tempo o back4app fornece ferramentas como o agente de ia, consultas em tempo real e trabalhos em nuvem que aceleram a criação de backend habilidades expansíveis após terminar, você será capaz de adaptar esses conceitos para recursos mais avançados do gatsby, como criar páginas no tempo de construção ou conectar se a funções sem servidor para operações dinâmicas pré requisitos 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 gatsby você pode configurar isso instalando o gatsby cli https //www gatsbyjs com/docs/tutorial/part 0/#install gatsby cli e executando node js (versão 14 ou superior) instalado instalando o node js https //nodejs org/en/download/ familiaridade com javascript e conceitos do gatsby documentação oficial do gatsby https //www gatsbyjs com/docs/ leia a documentação ou um tutorial para iniciantes se você é novo no gatsby certifique se de que você tenha esses requisitos configurados isso garante uma experiência tranquila enquanto você cria um novo arquivo para configuração ou executa consultas graphql em seu ambiente gatsby passo 1 – configurando o projeto back4app criar um novo projeto o primeiro passo em como construir um backend para gatsby no back4app é criar um novo projeto se você ainda não fez isso faça login na sua conta back4app clique no botão “novo app” no seu painel dê um nome ao seu app (por exemplo, “gatsby backend tutorial”) depois de criar o projeto, ele aparecerá no seu painel do back4app usaremos este projeto como o núcleo do nosso backend conectar o sdk do parse o back4app usa a plataforma parse para gerenciar seus dados, oferecer recursos em tempo real, lidar com autenticação de usuários e mais para gatsby, você ainda pode npm install parse e depois integrá lo em seus arquivos de origem recupere suas chaves do parse no seu painel do back4app, localize seu id da aplicação e chave javascript , normalmente sob “configurações do app” ou “segurança & chaves ” você também encontrará a url do servidor parse (geralmente algo como https //parseapi back4app com ) instale o sdk do parse no seu site gatsby npm install parse crie um parseconfig js no diretório raiz do seu projeto gatsby ou dentro de 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; sempre que você importar o parse de parseconfig js em seus arquivos gatsby (por exemplo, em gatsby node js , gatsby browser js , ou páginas/componentes), você terá uma instância pré configurada pronta para fazer consultas ao seu backend do back4app passo 2 – configurando o banco de dados criando um modelo de dados no back4app, os dados são gerenciados como “classes” (semelhantes a tabelas) com campos para seus dados vamos criar uma classe “todo” para demonstração mostraremos algumas maneiras de você salvar e recuperar dados no gatsby com o parse navegue até a seção “banco de dados” no seu painel do back4app crie uma nova classe (por exemplo, “todo”) e adicione colunas como título (string) e iscompleted (boolean) ou você pode deixar o parse criar colunas automaticamente quando os objetos forem salvos pela primeira vez a partir do seu código criando um modelo de dados com o agente de ia o back4app fornece um agente de ia para ajudar a definir sua estrutura de dados abra o agente de ia a partir do seu painel de aplicativos ou menu descreva seu modelo de dados (por exemplo, “por favor, crie um novo esquema de aplicativo todo com um título e status de conclusão ”) deixe o agente de ia gerar o esquema para você lendo e escrevendo dados usando sdk um trecho de exemplo em gatsby poderia parecer assim (por exemplo, em uma página baseada em react ou em gatsby browser js ) 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); } } 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); } } lendo e escrevendo dados usando a api rest alternativamente, você pode interagir com o banco de dados via a api rest 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 lendo e escrevendo dados usando a api graphql back4app também suporta uma api graphql , então você poderia executar consultas ou mutações como mutation { createtodo(input { fields { title "clean the house" iscompleted false } }) { todo { objectid title iscompleted } } } isso é especialmente conveniente se você quiser que seu site gatsby busque dados por meio de consultas graphql no momento da construção trabalhando com consultas ao vivo gatsby é um gerador de sites estáticos, mas você ainda pode configurar conexões dinâmicas em tempo real usando parse consultas ao vivo isso pode ser útil em código executado no navegador ou em seus próprios hooks sem servidor ativar consultas ao vivo no seu painel do back4app (em configurações do servidor) adicione a url do servidor de consultas ao vivo em parseconfig js parse livequeryserverurl = 'wss\ //your subdomain here b4a io'; inscreva se em uma classe para notificações em tempo real async function subscribetotodos(callback) { const query = new parse query('todo'); const subscription = await query subscribe(); subscription on('create', (newtodo) => { callback('create', newtodo); }); subscription on('update', (updatedtodo) => { callback('update', updatedtodo); }); subscription on('delete', (deletedtodo) => { callback('delete', deletedtodo); }); return subscription; } isso enviará atualizações de dados em tempo real para o front end do seu projeto gatsby passo 3 – aplicando segurança com acls e clps o que são acls e clps? acls (listas de controle de acesso) permitem que você defina permissões em objetos individuais, enquanto clps (permissões de nível de classe) se aplicam a classes inteiras em seu banco de dados back4app configurando permissões de nível de classe vá para banco de dados no seu painel do back4app selecione a classe (por exemplo, todo ) clique na permissões de nível de classe aba configure se a classe é legível publicamente, requer autenticação ou é restrita a certos papéis usando acls no código no seu código gatsby, você pode definir acls para cada novo objeto async function createprivatetodo(title, owneruser) { const todo = parse object extend('todo'); const todo = new todo(); todo set('title', title); 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); } } passo 4 – escrevendo funções de cloud code por que cloud code? com o cloud code, você pode adicionar lógica personalizada do lado do servidor ao seu backend do back4app isso é ótimo para regras de negócios, transformações de api rest , gatilhos ou validações de dados que você pode querer manter seguras e fora do lado do cliente exemplo de função cloud // 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 código em nuvem via back4app cli instale e configure o cli, depois execute b4a deploy via dashboard vá para cloud code > functions no seu painel, cole seu código em main js , e clique em deploy chamando sua função do gatsby/parse sdk 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); } } passo 5 – configurando a autenticação classe de usuário parse back4app usa a parse user classe para autenticação por padrão, ela lida com a hash de senhas, sessões e armazenamento seguro cadastro e login no gatsby import parse from ' /parseconfig'; // signup 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); } } // login 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); } } após fazer login, você pode chamar parse user current() para verificar se um usuário está logado login social você pode integrar google , facebook , apple , e outros provedores com configurações adicionais leia mais na documentação de login social https //www back4app com/docs/platform/sign in with apple passo 6 – gerenciando armazenamento de arquivos fazendo upload de arquivos use parse file para fazer upload de imagens ou outros arquivos por exemplo, em um componente gatsby async function uploadimage(file) { 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); } } você pode então anexar este arquivo a um objeto parse, armazená lo e depois recuperar a url do arquivo para exibir em seu site gatsby passo 7 – verificação de email e redefinição de senha por que isso é importante a verificação de e mail confirma o endereço de e mail do usuário, e os fluxos de redefinição de senha melhoram a experiência do usuário ambos são facilmente configurados no back4app navegue até as configurações de e mail do seu aplicativo no painel ative a verificação de e mail e configure o modelo de e mail de redefinição de senha use os métodos do sdk parse (por exemplo, parse user requestpasswordreset(email) ) para acionar e mails de redefinição passo 8 – agendando tarefas com cloud jobs visão geral dos cloud jobs use cloud jobs para automatizar tarefas recorrentes, como remover dados obsoletos ou enviar resumos diários por exemplo // 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); } }); em seguida, agende o em configurações do aplicativo > configurações do servidor > tarefas em segundo plano passo 9 – integrando webhooks webhooks permitem que seu aplicativo back4app envie requisições http para serviços externos quando eventos específicos acontecem—como a criação de um novo registro vá para seu painel do back4app > mais > webhooks adicione um novo webhook , especificando a url do endpoint para um serviço externo selecione o que aciona o webhook (por exemplo, aftersave na classe todo) você também pode integrar com slack ou gateways de pagamento adicionando o endpoint apropriado passo 10 – explorando o painel de administração do back4app o admin app do back4app é uma interface centrada em modelos para gerenciamento de dados você pode dar acesso seguro a usuários não técnicos para realizar operações crud em suas classes habilitando o admin app vá para app dashboard > mais > admin app e clique em “habilitar admin app ” então crie um usuário admin e escolha um subdomínio para a interface de administração agora você pode fazer login no seu admin app para visualizar e modificar dados sem escrever código conclusão neste tutorial, você descobriu como construir um backend para gatsby usando o back4app você aprendeu a configurar um banco de dados seguro com classes, campos personalizados e relacionamentos usar o parse sdk , junto com rest api e opções de consulta graphql , para transações de dados configurar acls e clps para segurança de dados escrever e implantar cloud code para estender a lógica de negócios e gatilhos gerenciar autenticação de usuários com registro, login, redefinição de senha e verificação de e mail gerenciar armazenamento de arquivos para imagens e documentos agendar tarefas automatizadas com cloud jobs integrar serviços externos através de webhooks aproveitar o admin app para fácil administração de dados com essas habilidades, seu site gatsby pode aproveitar recursos dinâmicos poderosos enquanto ainda se beneficia da renderização estática do gatsby a partir daqui, você pode expandir seu modelo de dados e adicionar lógica de negócios avançada integrar mais apis externas para uma plataforma verdadeiramente abrangente seguir a documentação oficial do back4app para mergulhos mais profundos em segurança, desempenho e análises experimente os recursos de tempo de construção do gatsby —por exemplo, “ criar páginas ” a partir de dados dinâmicos ou configurar um “ gatsby source ” plugin para seu backend back4app agora você tem uma base sólida para construir aplicativos orientados a dados e à prova de futuro com gatsby e back4app