How to Create a CRUD App with Gatsby?

introdução neste guia, você descobrirá como construir uma aplicação web crud (criar, ler, atualizar, excluir) usando gatsby usaremos o back4app como seu backend na nuvem para gerenciar dados sem esforço este guia o orienta na configuração de um projeto back4app, definindo um esquema flexível e conectando seu aplicativo gatsby com chamadas de api rest ou graphql para realizar operações crud inicialmente, você configurará um projeto back4app chamado basic crud app gatsby este projeto oferece acesso a um robusto banco de dados não relacional você projetará seu esquema de dados criando manualmente classes e campos no painel do back4app ou aproveitando o agente de ia do back4app em seguida, você usará o back4app admin app—uma interface de arrastar e soltar—para lidar com tarefas de gerenciamento de dados sem esforço finalmente, você integrará seu aplicativo gatsby com a api do back4app (via rest ou graphql) para executar operações crud seguras ao final deste tutorial, você terá desenvolvido um aplicativo gatsby pronto para produção que realiza operações crud básicas com manuseio seguro de dados e autenticação de usuários principais conclusões aprenda a criar uma aplicação crud com gatsby apoiada por um backend de baixo código entenda como estruturar seu backend e conectá lo a um site moderno do gatsby utilize o intuitivo admin app do back4app para gerenciar a criação, leitura, atualização e exclusão de dados descubra opções de implantação, incluindo estratégias de containerização para seu aplicativo gatsby pré requisitos antes de começar, certifique se de que você tem uma conta back4app com um projeto ativo precisa de ajuda? veja introdução ao back4app https //www back4app com/docs/get started/new parse app um ambiente node js com gatsby cli instalado use node js https //nodejs org/ e instale o gatsby via npm install g gatsby cli familiaridade com react, graphql e apis rest revise a documentação do react https //reactjs org/docs/getting started html se necessário passo 1 – configurando seu projeto criando um novo projeto back4app faça login na sua conta back4app clique em “novo app” no seu painel nomeie seu projeto basic crud app gatsby e complete as etapas de configuração criar novo projeto após a criação, seu projeto aparecerá no painel, pronto para configuração do backend passo 2 – definindo seu modelo de dados configurando seu esquema para este aplicativo crud, você precisa configurar várias classes no back4app abaixo estão exemplos das classes e campos essenciais 1\ classe itens esta classe armazena detalhes sobre cada item campo tipo de dados descrição id objectid identificador único gerado automaticamente título string nome do item descrição string descrição breve do item criadoem data timestamp quando o item foi criado atualizadoem data timestamp quando o item foi atualizado pela última vez 2\ classe de usuários esta classe lida com credenciais de usuário e autenticação campo tipo de dados descrição id objectid id único gerado automaticamente nome de usuário string identificador único para o usuário email string endereço de e mail único do usuário hashdasenha string senha criptografada para login criadoem data timestamp de criação da conta atualizadoem data timestamp da última atualização da conta você pode adicionar essas classes e campos diretamente no painel do back4app criar nova classe você pode definir campos escolhendo um tipo de dado, nomeando o campo, definindo padrões e marcando campos obrigatórios criar coluna usando o agente de ia back4app para geração de esquema o agente de ia do back4app pode construir automaticamente seu esquema com base em suas especificações isso acelera a configuração e garante que seu modelo de dados suporte todas as operações crud como usar o agente de ia abra o agente de ia faça login no seu painel do back4app e encontre o agente de ia nas configurações do seu projeto insira seus requisitos descreva as classes e campos que você precisa revise e aplique o agente sugerirá um esquema revise o e confirme para implementar exemplo de prompt create the following classes in my back4app project 1\) class items \ fields \ id objectid (auto generated) \ title string \ description string \ createdat date (auto generated) \ updatedat date (auto updated) 2\) class users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ passwordhash string \ createdat date (auto generated) \ updatedat date (auto updated) essa abordagem assistida por ia garante um esquema de dados consistente e eficiente passo 3 – habilitando o app admin e gerenciando operações crud visão geral do app admin o app admin do back4app fornece uma interface sem código para gerenciamento de dados de backend seus recursos de arrastar e soltar facilitam operações crud como adicionar, visualizar, atualizar e excluir registros ativando o app admin vá para o menu “mais” no seu painel do back4app selecione “app admin” e clique em “habilitar app admin ” configure suas credenciais de admin configurando a primeira conta de admin este passo também cria funções (por exemplo, b4aadminuser ) e classes de sistema habilitar app admin uma vez ativado, faça login no app admin para gerenciar seus dados de backend painel do app admin usando o app admin para tarefas crud dentro do app admin, você pode inserir registros use o recurso “adicionar registro” em uma classe (como itens) para criar novas entradas inspecionar/atualizar registros clique em qualquer entrada para ver detalhes ou modificar informações excluir registros remova registros desatualizados ou desnecessários esta interface simplificada torna o gerenciamento de dados rápido e intuitivo passo 4 – conectando seu aplicativo gatsby com back4app com seu backend configurado, a próxima fase é vincular sua aplicação gatsby ao back4app usando chamadas de api no gatsby utilizaremos chamadas rest ou graphql para nos comunicar com o back4app uma segunda opção é usar o sdk buscando dados usando rest você pode usar o fetch da api do javascript para recuperar dados por exemplo, para carregar itens do back4app // src/services/api js export const fetchitems = async () => { try { const response = await fetch('https //parseapi back4app com/classes/items', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', }, }); const data = await response json(); return data results; } catch (error) { console error('error fetching items ', error); return \[]; } }; enviando dados via rest para adicionar um novo item, use uma requisição post // src/services/api js export const createitem = async (title, description) => { try { const response = await fetch('https //parseapi back4app com/classes/items', { 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({ title, description }), }); const data = await response json(); return data; } catch (error) { console error('error creating item ', error); } }; você pode implementar funções de atualização e exclusão de forma semelhante usando os métodos put/post e delete integre essas chamadas de api em suas páginas ou componentes gatsby para gerenciar dados dinamicamente passo 5 – protegendo seu backend implementando controles de acesso proteja seus dados configurando listas de controle de acesso (acls) no back4app por exemplo, para criar um item visível apenas para seu proprietário // example payload for a private item const privateitem = { title 'private title', description 'this item is private', acl { " " { "read" false, "write" false }, "user object id" { "read" true, "write" true } } }; permissões de nível de classe (clps) configure clps no seu painel do back4app para impor regras de acesso padrão, garantindo que apenas usuários autenticados possam acessar classes específicas passo 6 – adicionando autenticação de usuário configurando contas de usuário no gatsby o back4app utiliza a classe de usuário embutida do parse para autenticação em seu aplicativo gatsby, gerencie o registro e login de usuários por meio de chamadas de api exemplo registro de usuário // src/services/auth js export const signup = async (username, password, email) => { try { const response = await fetch('https //parseapi back4app com/users', { 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({ username, password, email }), }); const data = await response json(); return data; } catch (error) { console error('error during sign up ', error); } }; exemplo login de usuário // src/services/auth js export const login = async (username, password) => { try { const response = await fetch(`https //parseapi back4app com/login?username=${username}\&password=${password}`, { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', }, }); const data = await response json(); return data; } catch (error) { console error('login error ', error); } }; essa abordagem pode ser estendida para gerenciar sessões, redefinições de senha e mais passo 7 – implantando sua aplicação gatsby back4app suporta um processo de implantação suave você pode implantar seu aplicativo gatsby usando vários métodos, incluindo a containerização 7 1 construindo seu site gatsby instalar dependências execute npm install construir o site use o comando de construção do gatsby gatsby build testar localmente sirva sua construção de produção para verificar a funcionalidade gatsby serve 7 2 visão geral da estrutura do projeto uma estrutura típica de projeto gatsby pode parecer basic crud app gatsby/ \| node modules/ \| src/ \| | components/ \| | | itemform js \| | | itemlist js \| | pages/ \| | index js \| | login js \| static/ \| gatsby config js \| package json \| readme md 7 3 dockerizando sua aplicação gatsby se você prefere implantações em contêineres, adicione um dockerfile \# use an official node js image as the base from node 14 alpine \# set the working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy the remaining source code copy \# build the gatsby site run npm run build \# expose port (adjust if needed) expose 8000 \# serve the built site cmd \["npx", "gatsby", "serve", " h", "0 0 0 0"] 7 4 implantando via implantação web back4app vincule seu repositório hospede seu código fonte gatsby no github configure a implantação no painel do back4app, selecione implantação web , conecte seu repositório (por exemplo, basic crud app gatsby ), e escolha o branch defina os comandos de construção especifique o comando de construção (por exemplo, npm run build ) e o diretório de saída implantar clique em implantar e monitore os logs até que seu site esteja ao vivo passo 8 – conclusão e próximos passos ótimo trabalho! você construiu uma aplicação crud baseada em gatsby integrada com back4app você configurou um projeto chamado basic crud app gatsby , definiu seu modelo de dados, gerenciou dados com o admin app e conectou seu front end gatsby ao back4app usando chamadas de api rest/graphql próximos passos aprimore seu app considere adicionar busca avançada, visualizações detalhadas ou atualizações em tempo real expanda as capacidades do backend explore funções em nuvem, integrações de api de terceiros ou controles de acesso baseados em funções refinados saiba mais visite a documentação do back4app https //www back4app com/docs para mais insights e tutoriais feliz codificação e aproveite a construção da sua aplicação crud em gatsby!