Como Construir um App CRUD com ReactJS?

introdução neste tutorial, você construirá uma aplicação crud abrangente (criar, ler, atualizar e excluir) usando reactjs este guia é projetado para realizar as operações básicas de uma aplicação de software, demonstrando como construir aplicativos crud que gerenciam e atualizam dados de forma eficaz você começará criando e configurando um projeto back4app chamado basic crud app reactjs , que atua como um sistema de backend robusto para sua aplicação web em seguida, você projetará um esquema de banco de dados escalável definindo coleções e campos detalhados—seja manualmente ou com a ajuda do agente de ia do back4app depois, você aproveitará o back4app admin app—uma ferramenta de gerenciamento amigável com uma interface de arrastar e soltar—para gerenciar facilmente seus dados e coleções esta interface de administração melhora a experiência do usuário e simplifica a interface do usuário, permitindo que os usuários realizem rapidamente operações crud finalmente, você implantará seu frontend reactjs e o integrará com o back4app usando rest/graphql (ou o parse sdk, onde disponível), tudo isso enquanto protege seu backend com controles de acesso avançados ao final deste guia, você terá construído uma aplicação web pronta para produção que não apenas suporta operações básicas de crud, mas também inclui autenticação de usuário e robustas capacidades de atualização de dados principais conclusões aprenda a construir aplicações crud que gerenciam dados de forma eficiente usando um sistema de gerenciamento de banco de dados confiável obtenha insights práticos sobre como projetar um backend escalável e integrá lo com um frontend reactjs para melhorar a experiência do usuário descubra como usar uma ferramenta de gerenciamento de arrastar e soltar (o back4app admin app) para simplificar operações de criar, ler, atualizar e excluir entenda técnicas de implantação, incluindo a containerização com docker, para lançar rapidamente sua aplicação web pré requisitos antes de começar, certifique se de ter o seguinte uma conta back4app e um novo projeto configurado se você precisar de ajuda, consulte introdução ao back4app https //www back4app com/docs/get started/new parse app um ambiente de desenvolvimento reactjs use create react app https //create react app dev/docs/getting started/ ou uma ferramenta similar certifique se de que o node js (versão 14 ou superior) está instalado compreensão básica de javascript, reactjs e rest apis revise a documentação do reactjs https //reactjs org/docs/getting started html se necessário passo 1 – configuração do projeto criando um novo projeto back4app faça login na sua conta back4app clique no botão “novo app” no seu painel digite o nome do projeto basic crud app reactjs e siga as instruções para criar seu projeto criar novo projeto uma vez criado, seu novo projeto aparecerá no seu painel back4app, fornecendo uma base sólida para a configuração do backend e gerenciamento do projeto passo 2 – design do esquema do banco de dados projetando seu modelo de dados para o aplicativo crud básico, você criará várias coleções abaixo estão alguns exemplos das coleções que você precisará, delineando os campos e tipos de dados necessários para ajudá lo a configurar seu esquema de banco de dados de forma eficaz essas coleções são projetadas para realizar as operações crud fundamentais que permitem aos usuários criar, ler, atualizar e excluir dados 1\ coleção de itens esta coleção armazena informações sobre cada item campo tipo de dados descrição id objectid chave primária gerada automaticamente título string o título do item descrição string uma breve descrição do item criado em data timestamp quando o item foi criado atualizado em data timestamp quando o item foi atualizado pela última vez 2\ coleção de usuários esta coleção armazena informações do usuário e detalhes de autenticação campo tipo de dados descrição id objectid chave primária gerada automaticamente nome de usuário string nome de usuário único para o usuário email string endereço de e mail único hash senha string senha hash para autenticação criado em data timestamp quando a conta do usuário foi criada atualizado em data timestamp em que a conta do usuário foi atualizada você pode configurar essas coleções manualmente no painel do back4app criando uma nova classe para cada coleção e adicionando colunas para definir os campos criar nova classe você pode facilmente criar campos para seu banco de dados selecionando um tipo de dado, nomeando o campo, definindo um valor padrão e determinando se é obrigatório criar coluna usando o agente de ia back4app para geração de esquema o agente de ia back4app é uma ferramenta poderosa disponível diretamente no seu painel do back4app ele permite que você gere automaticamente o esquema do seu banco de dados com base em um prompt que descreve suas coleções e campos desejados essa funcionalidade é uma economia de tempo significativa para o gerenciamento de projetos e ajuda a garantir que seu sistema de gerenciamento de banco de dados esteja configurado para realizar as operações básicas exigidas pelo seu aplicativo web como usar o agente de ia abra o agente de ia faça login no seu painel do back4app e localize o agente de ia no menu ou nas configurações do seu projeto descreva seu modelo de dados na interface do agente de ia, cole um prompt detalhado que descreva as coleções e campos que você precisa revise e aplique uma vez enviado, o agente de ia gerará as coleções e definições de campo revise essas sugestões e aplique as ao seu projeto exemplo de prompt create the following collections in my back4app application 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) usar o agente de ia dessa forma economiza tempo e garante que seu esquema seja consistente e otimizado para as necessidades do seu aplicativo passo 3 – habilitando o app admin e operações crud visão geral do app admin o app admin do back4app é uma interface poderosa, sem código, que permite gerenciar seus dados de backend esta ferramenta de gerenciamento fornece uma interface de usuário de arrastar e soltar que permite aos usuários realizar facilmente operações crud, como criar, ler, atualizar e excluir registros habilitando o app admin navegue até o menu “mais” no seu painel do back4app clique em “app admin” e depois em “habilitar app admin ” configure suas credenciais de admin criando seu primeiro usuário admin este processo também configura funções (por exemplo, b4aadminuser ) e coleções do sistema habilitar app admin após habilitar, faça login no app admin para gerenciar seus dados painel do aplicativo admin usando o aplicativo admin para operações crud dentro do aplicativo admin você pode criar registros clique no botão “adicionar registro” dentro de uma coleção (por exemplo, itens) para criar novas entradas ler/atualizar registros selecione qualquer registro para visualizar seus detalhes ou editar campos, garantindo uma atualização de dados suave excluir registros use a opção de exclusão para remover registros que não são mais necessários esta ferramenta de gerenciamento fácil de usar melhora a experiência geral do usuário, fornecendo uma interface simples de arrastar e soltar para funções crud passo 4 – integrando reactjs com back4app agora que seu backend está configurado e gerenciado via o aplicativo admin, é hora de conectar seu frontend reactjs ao back4app opção a usando o parse sdk instale o parse sdk npm install parse inicialize o parse em seu aplicativo react crie um arquivo (por exemplo, src/parseconfig js ) // src/parseconfig js import parse from 'parse'; // substitua pelas suas credenciais reais do back4app parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; use o parse em um componente react por exemplo, crie um componente para buscar e exibir itens // src/components/itemslist js import react, { useeffect, usestate } from 'react'; import parse from ' /parseconfig'; const itemslist = () => { const \[items, setitems] = usestate(\[]); useeffect(() => { const fetchitems = async () => { const items = parse object extend("items"); const query = new parse query(items); try { const results = await query find(); setitems(results); } catch (error) { console error("erro ao buscar itens ", error); } }; fetchitems(); }, \[]); return ( \<div> \<h2>itens\</h2> \<ul> {items map(item => ( \<li key={item id}> {item get("title")} — {item get("description")} \</li> ))} \</ul> \</div> ); }; export default itemslist; opção b usando rest ou graphql se o seu ambiente não suportar o parse sdk, você pode realizar operações crud usando rest ou graphql por exemplo, para buscar itens usando rest // example rest call to fetch items 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(); console log('fetched items ', data results); } catch (error) { console error('error fetching items ', error); } }; fetchitems(); integre essas chamadas de api em seus componentes react conforme necessário passo 5 – protegendo seu backend listas de controle de acesso (acls) proteja seus dados atribuindo acls a objetos por exemplo, para criar um item privado async function createprivateitem(itemdata, owneruser) { const items = parse object extend('items'); const item = new items(); item set('title', itemdata title); item set('description', itemdata description); // set acl only the owner can read and write const acl = new parse acl(owneruser); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); item setacl(acl); try { const saveditem = await item save(); console log('private item created ', saveditem); } catch (error) { console error('error saving item ', error); } } permissões de nível de classe (clps) no painel do back4app, configure clps para cada coleção para definir regras de acesso padrão isso garante que apenas usuários autenticados ou autorizados possam acessar dados sensíveis passo 6 – autenticação de usuário configurando contas de usuário back4app aproveita a classe user do parse para autenticação no seu aplicativo react, gerencie o registro e o login do usuário da seguinte forma // src/components/auth js import react, { usestate } from 'react'; import parse from ' /parseconfig'; export const signup = () => { const \[username, setusername] = usestate(''); const \[password, setpassword] = usestate(''); const \[email, setemail] = usestate(''); const handlesignup = async (e) => { e preventdefault(); const user = new parse user(); user set('username', username); user set('password', password); user set('email', email); try { await user signup(); alert('user signed up successfully!'); } catch (error) { alert('error signing up ' + error message); } }; return ( \<form onsubmit={handlesignup}> \<input type="text" placeholder="username" value={username} onchange={e => setusername(e target value)} /> \<input type="password" placeholder="password" value={password} onchange={e => setpassword(e target value)} /> \<input type="email" placeholder="email" value={email} onchange={e => setemail(e target value)} /> \<button type="submit">sign up\</button> \</form> ); }; uma abordagem semelhante pode ser usada para login e gerenciamento de sessão recursos adicionais, como logins sociais, verificação de email e redefinições de senha, podem ser configurados no painel do back4app passo 7 – implantando seu frontend reactjs com implantação web o recurso de implantação web do back4app permite que você hospede seu frontend reactjs de forma contínua, implantando seu código a partir de um repositório do github nesta seção, você aprenderá como preparar sua build de produção, enviar seu código fonte para o github, integrar seu repositório com a implantação web e implantar seu site 7 1 prepare sua build de produção abra a pasta do seu projeto em um terminal execute o comando de build npm run build este comando cria uma build pasta contendo todos os arquivos estáticos otimizados (incluindo index html , javascript, css e imagens) verifique a build certifique se de que a build pasta contém um arquivo index html junto com os subdiretórios de ativos necessários 7 2 organize e faça o upload do seu código fonte seu repositório deve incluir o código fonte completo do seu frontend em reactjs uma estrutura de arquivos típica pode ser assim basic crud app reactjs frontend/ ├── node modules/ ├── public/ │ └── index html ├── src/ │ ├── app js │ ├── parseconfig js │ └── components/ │ ├── itemslist js │ └── auth js ├── package json └── readme md arquivos de código fonte de exemplo src/parseconfig js // src/parseconfig js import parse from 'parse'; // replace with your actual back4app credentials parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; src/app js // src/app js import react, { useeffect, usestate } from 'react'; import parse from ' /parseconfig'; function app() { const \[items, setitems] = usestate(\[]); const \[newitemtitle, setnewitemtitle] = usestate(""); const \[newitemdescription, setnewitemdescription] = usestate(""); const \[editingitemid, seteditingitemid] = usestate(null); const \[editingtitle, seteditingtitle] = usestate(""); const \[editingdescription, seteditingdescription] = usestate(""); const fetchitems = async () => { const items = parse object extend("items"); const query = new parse query(items); try { const results = await query find(); setitems(results); } catch (error) { console error("error fetching items ", error); } }; useeffect(() => { fetchitems(); }, \[]); const handleadditem = async () => { const items = parse object extend("items"); const item = new items(); item set("title", newitemtitle); item set("description", newitemdescription); try { await item save(); setnewitemtitle(""); setnewitemdescription(""); fetchitems(); } catch (error) { console error("error saving item ", error); } }; const handledeleteitem = async (id) => { try { const item = await parse object createwithoutdata("items", id); await item destroy(); fetchitems(); } catch (error) { console error("error deleting item ", error); } }; const starteditingitem = (item) => { seteditingitemid(item id); seteditingtitle(item get("title")); seteditingdescription(item get("description")); }; const handleupdateitem = async () => { try { const items = parse object extend("items"); const item = new items(); item id = editingitemid; item set("title", editingtitle); item set("description", editingdescription); await item save(); seteditingitemid(null); seteditingtitle(""); seteditingdescription(""); fetchitems(); } catch (error) { console error("error updating item ", error); } }; return ( \<div style={{ padding '2rem' }}> \<h1>items\</h1> \<div style={{ marginbottom '1rem' }}> \<h2>add item\</h2> \<input type="text" placeholder="title" value={newitemtitle} onchange={(e) => setnewitemtitle(e target value)} style={{ marginright '0 5rem' }} /> \<input type="text" placeholder="description" value={newitemdescription} onchange={(e) => setnewitemdescription(e target value)} style={{ marginright '0 5rem' }} /> \<button onclick={handleadditem}>add item\</button> \</div> \<h2>item list\</h2> \<ul> {items map((item) => ( \<li key={item id} style={{ marginbottom '1rem' }}> {editingitemid === item id ? ( \<div> \<input type="text" value={editingtitle} onchange={(e) => seteditingtitle(e target value)} style={{ marginright '0 5rem' }} /> \<input type="text" value={editingdescription} onchange={(e) => seteditingdescription(e target value)} style={{ marginright '0 5rem' }} /> \<button onclick={handleupdateitem}>save\</button> \<button onclick={() => seteditingitemid(null)} style={{ marginleft '0 5rem' }}> cancel \</button> \</div> ) ( \<div> \<strong>{item get("title")}\</strong> {item get("description")} \<button onclick={() => starteditingitem(item)} style={{ marginleft '1rem' }}> edit \</button> \<button onclick={() => handledeleteitem(item id)} style={{ marginleft '0 5rem' }}> delete \</button> \</div> )} \</li> ))} \</ul> \</div> ); } export default app; \#### commit your code to github 1\ initialize a git repository in your project folder (if you haven’t already) ```bash git init adicione seus arquivos de origem git add confirme suas alterações git commit m "commit inicial do código fonte do frontend reactjs" crie um repositório no github por exemplo, crie um repositório chamado basic crud app reactjs frontend no github envie seu código para o github git remote add origin https //github com/seu nome de usuario/basic crud app reactjs frontend git git push u origin main 7 3 integre seu repositório do github com a implantação web acesse a implantação web faça login no seu painel do back4app, navegue até o seu projeto (basic crud app reactjs) e clique na função de implantação web conecte se ao github se você ainda não fez isso, integre sua conta do github seguindo as instruções na tela essa conexão permite que o back4app acesse seu repositório selecione seu repositório e branch escolha o repositório que você criou (por exemplo, basic crud app reactjs frontend ) e selecione a branch (por exemplo, main ) que contém seu código reactjs 7 4 configure seu deployment forneça detalhes adicionais de configuração comando de build se seu repositório não incluir uma pasta de build , especifique o comando de build (por exemplo, npm run build ) o back4app executará este comando durante o deployment diretório de saída defina o diretório de saída como build para que o back4app saiba qual pasta contém seus arquivos de site estáticos variáveis de ambiente se sua aplicação depender de variáveis de ambiente (por exemplo, chaves de api), adicione as nas configurações de configuração 7 5 dockerize seu projeto de aplicação reactjs se você preferir usar docker para deployment, pode containerizar sua aplicação reactjs inclua um dockerfile em seu repositório com conteúdo semelhante ao seguinte \# use an official node runtime as a parent image from node 16 alpine as build \# set the working directory workdir /app \# copy package json and package lock json copy package json / \# install dependencies run npm install \# copy the rest of the application copy \# build the react app run npm run build \# use nginx to serve the build from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] inclua este dockerfile no seu repositório em seguida, na sua configuração de implantação web, selecione a opção de implantação docker para construir e implantar sua aplicação containerizada 7 6 implemente sua aplicação clique no botão de implantação depois de configurar as configurações de implantação, clique no botão implantar monitore o processo de construção back4app puxará seu código do github, executará o comando de construção (se configurado) e implantará seu aplicativo dentro de um contêiner obtenha sua url após a conclusão da implantação, o back4app fornecerá uma url onde sua aplicação reactjs está hospedada 7 7 verifique sua implantação visite a url fornecida abra a url no seu navegador para visualizar seu site implantado teste a aplicação verifique se sua aplicação carrega corretamente, se todas as rotas funcionam como esperado e se todos os ativos (css, javascript, imagens) estão sendo servidos corretamente resolva problemas se necessário use as ferramentas de desenvolvedor do seu navegador para verificar se há erros se surgirem problemas, revise os logs de implantação no back4app e verifique sua integração com o github e as configurações de construção passo 8 – conclusão e próximos passos parabéns! você construiu um aplicativo crud básico completo usando reactjs e back4app você configurou um projeto chamado basic crud app reactjs , projetou coleções de banco de dados detalhadas para itens e usuários, e gerenciou seus dados através do poderoso admin app você também integrou seu frontend reactjs com seu backend e protegeu seus dados com controles de acesso robustos próximos passos aprimore seu frontend amplie seu aplicativo reactjs com recursos como visualizações detalhadas de itens, funcionalidade de busca e notificações em tempo real integre recursos adicionais considere adicionar lógica de backend mais avançada (por exemplo, cloud functions), integrações de api de terceiros ou controles de acesso baseados em função explore recursos adicionais revise a documentação do back4app https //www back4app com/docs e tutoriais adicionais para mergulhos mais profundos em otimização de desempenho e integrações personalizadas ao seguir este tutorial, você agora tem as habilidades para criar um backend crud robusto e escalável para sua aplicação reactjs usando back4app boa codificação!