Como construir uma aplicação CRUD com Preact?

visão geral neste guia, você desenvolverá uma aplicação crud (criar, ler, atualizar e excluir) usando preact vamos guiá lo na construção de um sistema que gerencia operações básicas de dados, desde a inicialização de um projeto back4app chamado basic crud app preact até a gestão de dados de forma descomplicada este projeto fornece um backend robusto e um frontend elegante e minimalista construído com preact começaremos configurando um novo projeto no back4app, depois criaremos um esquema de banco de dados eficiente—manualmente ou com a ajuda do assistente de ia do back4app este design suportará todas as funcionalidades essenciais de crud em seguida, apresentamos o back4app admin app, uma interface de arrastar e soltar que simplifica a gestão de dados você pode rapidamente adicionar, modificar ou remover registros usando esta ferramenta finalmente, você conectará seu frontend preact ao back4app usando rest/graphql, garantindo que seu backend esteja seguro com regras de acesso avançadas ao final deste tutorial, você terá uma aplicação web pronta para produção com autenticação de usuário e gestão robusta de dados—tudo construído com preact e alimentado pelo back4app principais insights domine a construção de aplicações crud que gerenciam dados de forma eficiente usando um backend confiável aprenda a projetar um modelo de dados escalável e integrá lo com um frontend preact para uma experiência do usuário ideal descubra como o back4app admin app de arrastar e soltar simplifica as operações de criar, ler, atualizar e excluir entenda as estratégias de implantação, incluindo a containerização com docker, para lançar rapidamente sua aplicação pré requisitos antes de começar, por favor, certifique se de que você tem uma conta back4app e um projeto inicializado para orientações, confira introdução ao back4app https //www back4app com/docs/get started/new parse app um ambiente de desenvolvimento preact use ferramentas como preact cli https //github com/preactjs/preact cli ou equivalente, garantindo que o node js (v14 ou posterior) esteja instalado conhecimento básico de javascript, preact e apis rest consulte a documentação do preact https //preactjs com/guide/v10/ se necessário passo 1 – configurando seu projeto inicializando um projeto back4app faça login na sua conta back4app selecione a opção “novo app” no seu painel nomeie seu projeto basic crud app preact , e siga os prompts de configuração criar novo projeto após a criação, seu projeto será visível no seu painel do back4app, estabelecendo as bases para a configuração do backend passo 2 – elaborando o seu esquema de banco de dados estruturando seu modelo de dados para o nosso aplicativo crud, você precisará de várias coleções abaixo estão exemplos que delineiam as coleções e campos essenciais para suportar operações crud 1\ coleção de itens esta coleção mantém detalhes sobre cada item campo tipo de dados propósito id objectid chave primária gerada automaticamente título string o nome do item descrição string uma breve descrição do item criado em data a data de criação atualizado em data última atualização do timestamp 2\ coleção de usuários isso contém credenciais de usuário e detalhes do perfil campo tipo de dados propósito id objectid chave primária gerada automaticamente nome de usuário string nome de usuário único email string endereço de e mail único hash da senha string senha hash para autenticação criado em data timestamp de criação da conta atualizado em data última atualização da conta você pode criar essas coleções manualmente através do painel do back4app, adicionando uma nova classe para cada coleção e definindo os campos apropriados criar nova classe você pode adicionar colunas selecionando um tipo de dado, nomeando a coluna e definindo valores padrão e flags obrigatórias criar coluna usando o assistente de ia do back4app para criação de esquema o assistente de ia disponível no back4app pode gerar automaticamente seu esquema com base em um prompt descrevendo suas coleções e campos esse recurso acelera a configuração e garante consistência passos para usar o assistente de ia abra o assistente de ia a partir do seu painel do back4app insira uma descrição detalhada do seu modelo de dados revise as coleções e definições de campo geradas automaticamente e, em seguida, aplique as ao seu projeto prompt de exemplo create these collections in my back4app project 1\) collection items \ fields \ id objectid (auto generated) \ title string \ description string \ created at date (auto generated) \ updated at date (auto updated) 2\) collection users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ password hash string \ created at date (auto generated) \ updated at date (auto updated) essa abordagem economiza tempo e garante um esquema bem estruturado passo 3 – ativando o app de admin e gerenciando operações crud apresentando o aplicativo admin o aplicativo admin do back4app fornece uma interface sem código para gerenciar seus dados de backend sem esforço sua funcionalidade de arrastar e soltar permite que você execute operações crud sem complicações ativando o aplicativo admin vá para o menu “mais” no seu painel do back4app selecione “aplicativo admin” e clique “ativar aplicativo admin ” configure seu primeiro usuário admin, que também configurará funções como b4aadminuser e coleções do sistema ativar aplicativo admin após a ativação, faça login no aplicativo admin para gerenciar seus dados painel do aplicativo admin executando ações crud com o aplicativo admin dentro da interface você pode adicionar registros use a opção “adicionar registro” em qualquer coleção (por exemplo, itens) para criar novas entradas visualizar e editar registros selecione um registro para ver seus detalhes ou modificar seus campos remover registros exclua entradas que não são mais necessárias esta ferramenta intuitiva melhora a experiência do usuário ao simplificar a gestão de dados passo 4 – conectando seu frontend preact ao back4app com o backend em funcionamento, é hora de integrar seu frontend preact opção a utilizando o sdk parse instalar o sdk parse npm install parse configure o parse em seu projeto preact crie um arquivo (por exemplo, src/parseconfig js ) // src/parseconfig js import parse from 'parse'; // insert your back4app credentials here parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; integre o parse em um componente preact por exemplo, construa um componente para buscar e exibir itens // src/components/itemslist js import { h } from 'preact'; import { useeffect, usestate } from 'preact/hooks'; 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("error fetching items ", error); } }; fetchitems(); }, \[]); return ( \<div> \<h2>items\</h2> \<ul> {items map(item => ( \<li key={item id}> {item get("title")} — {item get("description")} \</li> ))} \</ul> \</div> ); }; export default itemslist; opção b aproveitando rest ou graphql se o sdk do parse não for viável, use rest ou graphql para operações crud por exemplo, para buscar itens via rest // sample rest call to retrieve 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(); opção b aproveitando rest ou graphql integre essas chamadas de api dentro dos seus componentes preact conforme necessário passo 5 – melhorando a segurança do backend usando listas de controle de acesso (acls) proteja seus dados atribuindo acls aos seus 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); // configure acl only the owner has read/write access 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 em nível de classe (clps) dentro do painel do back4app, ajuste os clps para cada coleção para restringir o acesso apenas a usuários autenticados ou autorizados passo 6 – implementando a autenticação do usuário configurando contas de usuário back4app utiliza a classe user do parse para gerenciar a autenticação em sua aplicação preact, gerencie o cadastro e login do usuário da seguinte forma // src/components/auth js import { h } from 'preact'; import { usestate } from 'preact/hooks'; 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 registration successful!'); } catch (error) { alert('registration error ' + 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> ); }; um método semelhante pode ser usado para login e gerenciamento de sessões recursos adicionais como autenticação social e recuperação de senha podem ser configurados através do painel do back4app passo 7 – lançando seu frontend preact com implantação web o recurso de implantação web do back4app permite que você hospede sua aplicação preact vinculando um repositório do github nesta parte, você irá preparar sua build de produção, commitar seu código, integrar com a implantação web e implantar seu site 7 1 crie seus arquivos de produção abra o diretório do seu projeto em um terminal execute o comando de build npm run build isso gera uma build pasta com ativos estáticos otimizados (html, js, css, imagens) 3\ confirme que a build pasta inclui um index html arquivo e os ativos necessários 7 2 organize e faça commit do seu código fonte seu repositório deve conter o código fonte completo do frontend preact uma estrutura de diretório de exemplo basic crud app preact frontend/ ├── node modules/ ├── public/ │ └── index html ├── src/ │ ├── app js │ ├── parseconfig js │ └── components/ │ ├── itemslist js │ └── auth js ├── package json └── readme md arquivos de exemplo src/parseconfig js // src/parseconfig js import parse from 'parse'; // enter your 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 { h } from 'preact'; import { useeffect, usestate } from 'preact/hooks'; 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; comprometendo seu código no github inicialize um repositório git (se ainda não tiver sido feito) git init prepare seus arquivos de origem git add confirme suas alterações git commit m "initial commit of preact frontend source code" crie um novo repositório no github, por exemplo, basic crud app preact frontend envie seu código git remote add origin https //github com/your username/basic crud app preact frontend git git push u origin main 7 3 conectando seu repositório com a implantação na web vá para a seção de implantação web no seu painel do back4app, abra seu projeto ( basic crud app preact ) e selecione implantação web vincule sua conta do github conforme solicitado, para que o back4app possa acessar seu repositório selecione o repositório (por exemplo, basic crud app preact frontend ) e escolha o branch apropriado (por exemplo, main ) 7 4 configuração de implantação especifique configurações adicionais comando de construção se uma pasta de build pré construída estiver ausente, defina o comando de construção (por exemplo, npm run build ) o back4app executará este comando durante a implantação diretório de saída defina a pasta de saída como build para que o back4app identifique os arquivos estáticos variáveis de ambiente adicione quaisquer chaves de api ou configurações necessárias para o seu aplicativo 7 5 containerizando seu aplicativo preact com docker se você preferir docker, inclua um dockerfile em seu repositório semelhante a \# use an official node image for building from node 16 alpine as build \# set working directory workdir /app \# copy package files copy package json / \# install dependencies run npm install \# copy the source code copy \# build the app run npm run build \# use nginx to serve the built app from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] selecione a opção de implantação do docker nas configurações de implantação web do back4app 7 6 implantando seu aplicativo clique no implantar botão assim que a configuração estiver completa monitore o processo de construção enquanto o back4app busca seu código, constrói e implanta seu aplicativo uma vez finalizado, o back4app fornecerá uma url onde seu aplicativo está hospedado 7 7 verificando sua implantação visite a url fornecida para ver seu site ao vivo teste todas as funcionalidades para garantir que cada recurso, incluindo rotas e ativos, carregue corretamente se ocorrerem problemas, revise os logs do console do navegador e os logs de implantação no back4app passo 8 – conclusão e direções futuras ótimo trabalho! você desenvolveu com sucesso uma aplicação crud completa usando preact e back4app você configurou um projeto chamado basic crud app preact , definiu coleções de banco de dados robustas e usou o admin app para uma gestão de dados eficiente em seguida, você conectou seu frontend preact ao seu backend e implementou controles de acesso rigorosos o que vem a seguir? aprimore seu aplicativo preact com recursos adicionais, como visualizações detalhadas, capacidades de busca e atualizações em tempo real incorpore lógica de backend mais avançada, como funções em nuvem ou integrações com apis de terceiros consulte a documentação do back4app https //www back4app com/docs e outros recursos para obter insights mais profundos sobre otimização e configurações personalizadas ao seguir este tutorial, você adquiriu as habilidades para construir um backend crud escalável e seguro para suas aplicações preact usando o back4app aproveite a codificação e a exploração de novos recursos!