Como construir uma aplicação CRUD com Redwood?

visão geral neste guia, você aprenderá como criar uma aplicação crud básica (criar, ler, atualizar, excluir) usando redwoodjs este tutorial o guiará pelo processo de configuração do seu projeto com o back4app como seu serviço de backend, projetando um esquema de banco de dados robusto e integrando o com um frontend redwoodjs seguindo estas etapas, você construirá uma aplicação pronta para produção que gerencia dados de forma eficaz enquanto emprega técnicas modernas de desenvolvimento insights essenciais domine a criação de uma aplicação crud que gerencia dados de forma eficiente com um poderoso serviço de backend descubra como arquitetar um banco de dados escalável e integrá lo com uma interface redwoodjs para melhorar a interação do usuário explore o uso de uma ferramenta de gerenciamento sem código de arrastar e soltar—o back4app admin app—para simplificar operações crud aprenda estratégias de implantação, incluindo a containerização com docker, para lançar rapidamente sua aplicação web pré requisitos antes de começar, verifique se você tem o seguinte uma conta ativa no back4app com um novo projeto pronto se você precisar de orientação, confira introdução ao back4app https //www back4app com/docs/get started/new parse app um ambiente de desenvolvimento redwoodjs configurado use o cli do redwoodjs para criar sua aplicação certifique se de que o node js (versão 14 ou posterior) está instalado uma compreensão básica de javascript, redwoodjs e graphql para mais detalhes, visite a documentação do redwoodjs https //redwoodjs com/docs/introduction passo 1 – inicie seu projeto iniciando um novo projeto no back4app faça login no seu painel do back4app selecione “novo app” para iniciar um novo projeto nomeie seu projeto basic crud app redwoodjs e siga as instruções de configuração criar novo projeto seu projeto agora aparecerá no painel, estabelecendo as bases para sua configuração e gerenciamento de backend passo 2 – elaborando o esquema do banco de dados estruturando seu modelo de dados para este aplicativo crud, você irá projetar várias coleções abaixo estão exemplos de duas coleções essenciais junto com os campos necessários essas configurações são cruciais para habilitar funcionalidades crud confiáveis 1\ coleção itens esta coleção contém detalhes sobre cada item campo tipo de dados propósito id objectid identificador único gerado automaticamente título string o nome ou título do item descrição string um breve resumo descrevendo o item criado em data timestamp de criação do registro atualizado em data timestamp da última atualização 2\ coleta usuários esta coleção armazena credenciais e detalhes do usuário campo tipo de dados propósito id objectid identificador ú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 hash senha string senha criptografada para autenticação criado em data timestamp de criação da conta atualizado em data timestamp da última atualização você pode configurar essas coleções diretamente no painel do back4app criando novas classes e adicionando colunas apropriadas criar nova classe defina cada campo escolhendo seu tipo, nomeando o e definindo seu status padrão ou obrigatório criar coluna empregando o agente de ia do back4app para criação de esquema o agente de ia do back4app, acessível a partir do seu painel, pode gerar automaticamente o esquema do seu banco de dados com base em um prompt descritivo este recurso acelera significativamente a configuração de um esquema consistente para sua aplicação como usar o agente de ia inicie o agente de ia acesse o agente a partir do seu painel do back4app ou configurações do projeto detalhe seu modelo de dados insira um prompt abrangente descrevendo as coleções e campos que você precisa revise e implemente examine as sugestões de esquema geradas e aplique as ao seu projeto prompt de exemplo create these collections in my back4app project 1\) collection items \ fields \ id objectid (auto generated primary key) \ title string \ description string \ created at date (auto generated) \ updated at date (auto updated) 2\) collection users \ fields \ id objectid (auto generated primary key) \ username string (unique) \ email string (unique) \ password hash string \ created at date (auto generated) \ updated at date (auto updated) utilizar esta abordagem impulsionada por ia não apenas economiza tempo, mas também garante um esquema bem otimizado e uniforme passo 3 – ativando o app de admin e gerenciando operações crud introdução ao app de admin o aplicativo admin do back4app é uma interface amigável e sem código que permite que você gerencie seus dados de backend sem esforço sua funcionalidade de arrastar e soltar torna a realização de operações crud—como adicionar, visualizar, atualizar e excluir registros—muito fácil como habilitar o aplicativo admin vá para o menu “mais” no seu painel do back4app selecione “aplicativo admin” e depois clique em “habilitar aplicativo admin ” configure suas credenciais de admin criando um usuário admin inicial, que também estabelece funções (por exemplo, b4aadminuser ) e coleções do sistema habilitar aplicativo admin após a ativação, faça login no aplicativo admin para gerenciar seus dados painel do aplicativo admin realizando crud via o aplicativo admin dentro do aplicativo admin, você pode adicionar novos registros use o botão “adicionar registro” em uma coleção (por exemplo, itens) para inserir novos dados visualizar e modificar registros clique em um registro para ver seus detalhes e fazer atualizações remover registros selecione a opção de excluir para eliminar dados que não são mais necessários esta interface intuitiva simplifica muito as tarefas de gerenciamento de dados passo 4 – integrando redwoodjs com back4app agora que seu backend está configurado e gerenciável através do admin app, é hora de conectar seu frontend redwoodjs com o back4app usando a integração da api graphql redwoodjs é construído em torno do graphql, tornando o uma combinação perfeita para integrar com o back4app via chamadas de api em vez de usar o sdk, você interagirá com seu backend usando consultas e mutações graphql configurando seu projeto redwoodjs crie uma nova aplicação redwoodjs yarn create redwood app basic crud app redwood navegue até o diretório do seu projeto cd basic crud app redwood configure suas variáveis de ambiente no seu env arquivo, adicione suas credenciais do back4app back4app app id=your application id back4app rest api key=your rest api key back4app server url=https //parseapi back4app com buscando dados com redwoodjs cells as cells do redwoodjs simplificam a busca de dados aqui está um exemplo de uma cell que recupera itens // web/src/components/itemscell/itemscell js export const query = gql` query items query { items itemscollection { id title description } } `; export const loading = () => \<div>loading items…\</div>; export const empty = () => \<div>no items available \</div>; export const failure = ({ error }) => \<div>error {error message}\</div>; export const success = ({ items }) => { return ( \<ul> {items map((item) => ( \<li key={item id}> \<strong>{item title}\</strong> — {item description} \</li> ))} \</ul> ); }; você pode integrar consultas e mutações graphql semelhantes em seus componentes redwoodjs para realizar operações crud passo 5 – protegendo seu backend implementando controle de acesso proteja seus dados definindo listas de controle de acesso (acls) diretamente nos objetos por exemplo, ao criar um item privado, você pode garantir que apenas o proprietário tenha privilégios de leitura/gravação async function createprivateitem(itemdata, owner) { const response = await fetch(`${process env back4app server url}/classes/items`, { method 'post', headers { 'x parse application id' process env back4app app id, 'x parse rest api key' process env back4app rest api key, 'content type' 'application/json' }, body json stringify({ title itemdata title, description itemdata description, acl { \[owner] { read true, write true }, " " { read false, write false } } }) }); return response json(); } configurando permissões em nível de classe dentro do painel do back4app, defina permissões em nível de classe (clps) para cada coleção para restringir o acesso a usuários autenticados ou funções específicas, garantindo que seus dados permaneçam seguros passo 6 – gerenciando a autenticação de usuários configurando o gerenciamento de contas o back4app aproveita um sistema de usuários robusto, que você pode integrar ao redwoodjs para autenticação de usuários em seu aplicativo redwoodjs, gerencie inscrições e logins de usuários através de chamadas de api exemplo registro de usuário // web/src/components/auth/signup js import { usestate } from 'react'; const signup = () => { const \[username, setusername] = usestate(''); const \[email, setemail] = usestate(''); const \[password, setpassword] = usestate(''); const handlesignup = async (e) => { e preventdefault(); try { const response = await fetch(`${process env back4app server url}/users`, { method 'post', headers { 'x parse application id' process env back4app app id, 'x parse rest api key' process env back4app rest api key, 'content type' 'application/json' }, body json stringify({ username, email, password }) }); const data = await response json(); if (data error) { alert('sign up failed ' + data error); } else { alert('user successfully registered!'); } } catch (error) { console error('registration error ', error); } }; return ( \<form onsubmit={handlesignup}> \<input type="text" placeholder="username" value={username} onchange={(e) => setusername(e target value)} /> \<input type="email" placeholder="email" value={email} onchange={(e) => setemail(e target value)} /> \<input type="password" placeholder="password" value={password} onchange={(e) => setpassword(e target value)} /> \<button type="submit">sign up\</button> \</form> ); }; export default signup; um método semelhante pode ser aplicado para fazer login e manter sessões de usuário passo 7 – implantando seu frontend redwoodjs via implantação web o recurso de implantação web do back4app torna o hospedagem do seu frontend redwoodjs sem complicações siga estes passos para enviar seu código para produção 7 1 crie sua versão de produção abra a pasta do seu projeto no terminal execute o comando de build yarn rw build isso irá gerar uma web/dist pasta contendo seus arquivos estáticos otimizados verifique a saída do build certifique se de que a web/dist pasta contém um index html junto com todos os ativos necessários 7 2 organize e comite seu código fonte seu repositório deve hospedar o código fonte completo da sua aplicação redwoodjs uma estrutura típica pode ser basic crud app redwood/ ├── api/ ├── web/ │ ├── dist/ │ ├── src/ │ │ ├── components/ │ │ │ ├── itemscell/ │ │ │ └── auth/ │ │ └── app js │ └── index html ├── env └── package json fazendo commit no github inicialize o git (se necessário) git init adicione seus arquivos ao stage git add faça o commit do seu código git commit m "commit inicial para o frontend crud do redwoodjs" crie um repositório no github (por exemplo, basic crud app redwood ) e envie seu código git remote add origin https //github com/seu usuario/basic crud app redwood git git push u origin main 7 3 integrar com a implantação web acesse a implantação web a partir do seu painel back4app sob seu projeto (basic crud app redwood) conecte sua conta do github se ainda não o fez, seguindo as instruções selecione seu repositório e branch (por exemplo, main ) contendo seu código redwoodjs 7 4 definir parâmetros de implantação comando de construção especifique yarn rw build se seu repositório não incluir uma distribuição pré construída diretório de saída configure o diretório de saída como web/dist variáveis de ambiente inclua quaisquer variáveis de ambiente necessárias, como suas chaves do back4app 7 5 containerizando com docker se você prefere docker para implantação, inclua um dockerfile em seu repositório por exemplo \# use an official node image for building the app from node 16 alpine as builder \# set the working directory workdir /app \# copy dependency definitions copy package json / \# install dependencies run yarn install \# copy the project files copy \# build the redwoodjs app run yarn rw build \# use nginx to serve the static files from nginx\ stable alpine copy from=builder /app/web/dist /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] 7 6 implantando a aplicação pressione o botão implantar no back4app após finalizar sua configuração monitore o processo de implantação o back4app buscará seu código, construirá o projeto e o implantará em um ambiente containerizado recupere a url da sua aplicação uma vez implantada, uma url será fornecida onde sua aplicação redwoodjs está hospedada 7 7 valide sua implantação abra a url fornecida no seu navegador para confirmar que o site carrega teste a funcionalidade da aplicação certifique se de que todas as páginas, rotas e ativos carreguem corretamente resolva problemas se necessário utilize as ferramentas de desenvolvedor do navegador e os logs de implantação do back4app para qualquer depuração necessária passo 8 – considerações finais e direções futuras parabéns por construir sua aplicação crud baseada em redwoodjs usando back4app! você configurou com sucesso um projeto intitulado basic crud app redwood , criou coleções de banco de dados detalhadas para itens e usuários, e integrou um frontend limpo com gerenciamento de dados robusto e segurança o que vem a seguir? refine seu frontend aprimore sua aplicação redwoodjs com recursos como páginas de itens detalhadas, funcionalidades de busca e atualizações em tempo real incorpore recursos avançados considere adicionar funções serverless, integrações de terceiros ou controles de acesso mais complexos explore recursos adicionais aprofunde se na documentação do back4app https //www back4app com/docs e guias do redwoodjs https //redwoodjs com/docs para mais melhorias ao seguir este tutorial, você agora possui o conhecimento para desenvolver um backend crud escalável e integrá lo perfeitamente com um frontend moderno redwoodjs usando back4app aproveite sua jornada de codificação!