Como Construir um Frontend Preact e Conectá-lo a um Backend?

neste tutorial, você construirá um aplicativo de lista de tarefas usando preact e o conectará a um backend robusto fornecido pelo back4app este guia é perfeito para começar, pois cobre operações crud (criar, ler, atualizar, excluir) essenciais e o orienta na criação de uma interface limpa e funcional ao final, você terá um aplicativo totalmente operacional que mostra como integrar um backend gerenciado enquanto usa preact para um frontend leve e rápido construir um aplicativo full stack pode ser complexo, especialmente ao lidar com configuração de backend, gerenciamento de banco de dados, autenticação e implantação para simplificar esses desafios, usamos o back4app—uma backend como serviço (baas) escalável—para que você possa se concentrar no desenvolvimento do seu frontend enquanto ele cuida da hospedagem, bancos de dados e apis o back4app oferece serviços de backend abrangentes, incluindo um banco de dados pronto para uso, autenticação, cloud code para lógica do lado do servidor e sdks para uma integração suave ele também suporta implantações em contêineres, tornando se uma excelente escolha para aplicativos full stack modernos com esses recursos, você pode desenvolver e implantar aplicativos rapidamente, sem o fardo de gerenciar a infraestrutura do servidor principais conclusões seguindo este tutorial, você aprenderá a inicializar um projeto moderno de preact usando vite integrar um serviço de backend para gerenciar os dados da sua aplicação implementar operações crud essenciais para uma interface de usuário interativa implantar uma aplicação de lista de tarefas totalmente funcional usando fluxos de trabalho em contêiner no back4app pré requisitos antes de começar, certifique se de ter o seguinte node js e npm instale a versão lts mais recente do node js em nodejs org https //nodejs org/ e verifique executando node v e npm v no seu terminal conhecimento básico de preact familiaridade com componentes funcionais, hooks (como usestate e useeffect ), e sintaxe jsx é esperada se você é novo no preact, considere revisar os conceitos básicos primeiro uma conta no back4app inscreva se em back4app https //www back4app com/ para configurar e gerenciar seus serviços de backend com esses pré requisitos em ordem, você está pronto para configurar seu projeto e começar a construir configuração do projeto comece configurando seu ambiente de desenvolvimento local e inicializando seu projeto preact usando vite para uma experiência de desenvolvimento simplificada confirme que node js (versão lts) está instalado se necessário, baixe e instale a partir de nodejs org https //nodejs org/ verifique executando node v npm v inicialize seu projeto preact usando vite execute o seguinte comando no seu terminal (substitua todo app pelo nome do seu projeto preferido) npm create vite\@latest todo app template preact navegue até o diretório do seu projeto cd todo app instale as dependências necessárias npm install inicie o servidor de desenvolvimento para verificar sua configuração npm run dev sua aplicação preact deve estar rodando localmente agora abra a url fornecida no seu navegador para confirmar em seguida, você configurará seu backend no back4app para gerenciar o armazenamento de dados e as interações da api criando o backend todo back4app oferece um serviço de backend totalmente gerenciado alimentado por parse , que fornece um banco de dados nosql, autenticação, cloud code e apis geradas automaticamente esta seção irá guiá lo na criação de um modelo de dados de tarefa para armazenar seus itens de lista de tarefas e conectá lo ao seu frontend preact configurando seu aplicativo backend faça login na sua painel do back4app https //www back4app com/ e clique "criar um novo app " nomeie seu aplicativo (por exemplo, todopreactapp ) e escolha nodejs/parse como o tipo de backend uma vez que o app é criado, navegue até "banco de dados" > "navegador" clique "criar uma classe" e selecione "personalizado" nomeie a classe tarefa e defina as permissões de nível de classe para permitir leitura e escrita públicas (você pode ajustar essas configurações mais tarde) na classe tarefa , adicione os seguintes campos título (string) – o título da tarefa descrição (string) – detalhes sobre a tarefa concluído (booleano) – indica se a tarefa está finalizada datadevencimento (data) – o prazo para a tarefa clique "salvar" para concluir a configuração do seu esquema integrando o back4app com preact integre o back4app ao seu projeto preact usando o parse javascript sdk instale o sdk via npm npm install parse configure o sdk inicializando o com seu application id e javascript key recupere essas credenciais no seu painel back4app em app settings > security & keys no seu src/main jsx , importe e configure o parse da seguinte forma import { render } from 'preact' import ' /index css' import app from ' /app jsx' import parse from 'parse/dist/parse min js' const parse app id = "your application id"; const parse js key = "your javascript key"; const parse server url = 'https //parseapi back4app com/'; parse initialize(parse app id, parse js key); parse serverurl = parse server url; render(\<app />, document getelementbyid('app')) com o backend conectado, você está pronto para construir a interface do to do list em preact e implementar operações crud desenvolvendo o frontend com preact agora que seu backend está configurado, construa a interface do usuário para seu aplicativo de lista de tarefas usando preact você criará componentes para adicionar, exibir, atualizar e excluir tarefas enquanto gerencia o estado com hooks organizando seus componentes seu aplicativo incluirá os seguintes componentes principais taskform jsx – gerencia a adição de novas tarefas tasklist jsx – exibe todas as tarefas e fornece controles para completá las ou excluí las taskitem jsx – representa uma tarefa individual com ações para alternar a conclusão ou remover a tarefa crie uma components pasta dentro de src e adicione esses arquivos mkdir src/components touch src/components/taskform jsx src/components/tasklist jsx src/components/taskitem jsx gerenciando o estado com hooks use os hooks do preact ( usestate e useeffect ) para gerenciamento de estado e efeitos colaterais comece configurando o estado em app jsx import { usestate, useeffect } from "preact/hooks"; import taskform from " /components/taskform jsx"; import tasklist from " /components/tasklist jsx"; import parse from "parse/dist/parse min js"; function app() { const \[tasks, settasks] = usestate(\[]); const fetchtasks = async () => { try { const task = parse object extend("task"); const query = new parse query(task); const results = await query find(); settasks(results map(task => ({ id task id, task tojson() }))); } catch (error) { console error("error fetching tasks ", error); } }; useeffect(() => { fetchtasks(); }, \[]); return ( \<div class="container"> \<h1>to do list\</h1> \<taskform fetchtasks={fetchtasks} /> \<tasklist tasks={tasks} fetchtasks={fetchtasks} /> \</div> ); } export default app; construindo o componente do formulário de tarefas em taskform jsx , crie um formulário controlado para adicionar tarefas use usestate para gerenciar os valores de entrada e enviar dados para o back4app import { usestate } from "preact/hooks"; import parse from "parse/dist/parse min js"; function taskform({ fetchtasks }) { const \[title, settitle] = usestate(""); const \[description, setdescription] = usestate(""); const handlesubmit = async (e) => { e preventdefault(); try { const task = parse object extend("task"); const task = new task(); task set("title", title); task set("description", description); task set("completed", false); await task save(); fetchtasks(); settitle(""); setdescription(""); } catch (error) { console error("error adding task ", error); } }; return ( \<form onsubmit={handlesubmit}> \<input type="text" placeholder="task title" value={title} oninput={(e) => settitle(e target value)} required /> \<input type="text" placeholder="description" value={description} oninput={(e) => setdescription(e target value)} required /> \<button type="submit">add task\</button> \</form> ); } export default taskform; exibindo a lista de tarefas em tasklist jsx , renderize a lista de tarefas mapeando através do array de tarefas e usando o taskitem componente import taskitem from " /taskitem jsx"; function tasklist({ tasks, fetchtasks }) { return ( \<div> {tasks length === 0 ? ( \<p>no tasks available\</p> ) ( tasks map(task => ( \<taskitem key={task id} task={task} fetchtasks={fetchtasks} /> )) )} \</div> ); } export default tasklist; criando o componente de item de tarefa em taskitem jsx , crie um componente que permite marcar uma tarefa como completa ou excluí la import parse from "parse/dist/parse min js"; function taskitem({ task, fetchtasks }) { const handlecomplete = async () => { try { const query = new parse query("task"); const tasktoupdate = await query get(task id); tasktoupdate set("completed", !task completed); await tasktoupdate save(); fetchtasks(); } catch (error) { console error("error updating task ", error); } }; const handledelete = async () => { try { const query = new parse query("task"); const tasktodelete = await query get(task id); await tasktodelete destroy(); fetchtasks(); } catch (error) { console error("error deleting task ", error); } }; return ( \<div class={`task item ${task completed ? "completed" ""}`}> \<h3>{task title}\</h3> \<p>{task description}\</p> \<button onclick={handlecomplete}> {task completed ? "undo" "complete"} \</button> \<button onclick={handledelete}>delete\</button> \</div> ); } export default taskitem; estilizando seu aplicativo adicione os seguintes estilos no index css arquivo na pasta src / container styling / container { max width 600px; margin 40px auto; padding 0 20px; text align center; font family sans serif; } container h1 { margin bottom 20px; } form { display flex; flex direction column; align items center; gap 10px; margin bottom 20px; } form input\[type="text"] { width 80%; max width 400px; padding 8px; box sizing border box; font size 1rem; } form button { padding 8px 16px; cursor pointer; font size 1rem; border none; background color #eaeaea; transition background color 0 2s ease; } form button\ hover { background color #ccc; } container p { font size 1rem; } task item { display flex; flex direction column; align items center; justify content center; gap 12px; border 1px solid #ccc; border radius 6px; padding 15px; margin 10px 0; background color #fafafa; text align center; transition background color 0 2s ease; } task item completed h3, task item completed p { text decoration line through; color #888; } task item h3 { margin 0; font size 1 1rem; } task item p { margin 0; font size 1rem; } task item button { padding 6px 12px; border none; background color #eaeaea; cursor pointer; font size 0 9rem; } task item button\ hover { background color #ccc; } @media (min width 600px) { task item { flex direction row; } } importe este css em seu src/main jsx import " /index css"; finalizando a ui seu aplicativo preact to do list agora possui um frontend dinâmico integrado com back4app e estilização personalizada o aplicativo permite que você adicione, exiba, atualize e exclua tarefas enquanto mantém uma comunicação eficiente entre frontend e backend em seguida, você implantará seu aplicativo preact usando a plataforma de implantação web do back4app implantando o frontend na implantação web do back4app a implantação web do back4app fornece um ambiente totalmente gerenciado e containerizado para implantar suas aplicações com implantações baseadas em docker, você pode empacotar seu frontend preact e implantá lo sem esforço configurando o vite para produção projetos preact construídos com vite rodam em modo de desenvolvimento por padrão para produção, construa uma versão estática e sirva a usando um servidor web leve como o nginx atualize seu vite config js para definir o caminho base correto import { defineconfig } from 'vite'; import preact from '@preact/preset vite'; export default defineconfig({ plugins \[preact()], base ' /', // ensures asset paths are correct in a containerized environment }); gere arquivos prontos para produção npm run build criando um dockerfile para seu app crie um dockerfile no diretório raiz para definir seu container \# build stage using a lightweight node js image from node 18 alpine as build workdir /app copy package json package lock json / run npm install copy run npm run build \# production stage using nginx to serve static files from nginx\ alpine copy from=build /app/dist /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] testando o container localmente antes de implantar, construa e teste seu container docker localmente docker build t todo preact frontend execute o contêiner docker run p 8080 80 todo preact frontend visite http //localhost 8080 no seu navegador para confirmar que seu aplicativo está sendo servido corretamente enviando para o github e implantando via back4app envie seu projeto para o github git init git add git commit m "initial commit for back4app deployment" git branch m main git remote add origin \<your github repository url> git push u origin main em seguida, faça a implantação usando o back4app web deployment faça login no back4app web deployment https //www back4app com/containers clique "criar novo app" , forneça um nome e selecione repositório github autorize o back4app a acessar seu repositório e selecione o todo preact repositório escolha implantação dockerfile e confirme as configurações de build clique "implantar" para iniciar o processo de build monitoramento e gerenciamento de implantações após a implantação, use o painel do back4app para ver logs para solução de problemas monitorar o desempenho do contêiner e o uso de recursos acionar novas implantações em novos commits configurar domínios personalizados, se necessário testando e depurando seu aplicativo após a implantação, teste minuciosamente seu aplicativo preact verifique a conectividade da api abra o console de desenvolvedor do seu navegador (f12 → rede) para monitorar chamadas de api durante as operações de tarefa adicionar e recuperar tarefas use a interface para adicionar tarefas, depois atualize a página para verificar a persistência no navegador de banco de dados back4app testar operações crud certifique se de que marcar tarefas como concluídas e a exclusão sejam refletidas corretamente no backend tratamento de casos limite valide as entradas do formulário e simule condições de rede lenta usando ferramentas de desenvolvedor se você encontrar problemas, revise os logs do back4app ou verifique sua configuração de api melhores práticas para usar os serviços do back4app melhore o desempenho e a segurança do seu aplicativo seguindo estas melhores práticas otimize chamadas de api use solicitações em lote para múltiplas operações e selecione apenas os campos necessários em suas consultas proteja dados sensíveis armazene credenciais como id do aplicativo e chave javascript em variáveis de ambiente com vite, crie um env arquivo vite parse app id=your app id vite parse js key=your js key ativar auto scaling ative o auto scaling na implantação da web do back4app para gerenciar alto tráfego aprimorar segurança restringir permissões de nível de classe (clps) para controlar modificações de dados e configurar acls conforme necessário utilizar cloud code descarregue lógica complexa para o cloud code para melhor desempenho e redução da exposição da api conclusão você agora construiu uma aplicação de lista de tarefas full stack usando preact para o frontend e os robustos serviços de backend do back4app este tutorial guiou você na inicialização de um projeto preact, na integração do parse sdk e na implantação do seu aplicativo usando fluxos de trabalho em contêiner no back4app à medida que você continua desenvolvendo, considere adicionar recursos como autenticação avançada de usuários, atualizações em tempo real e integrações de terceiros para detalhes adicionais e suporte, consulte a documentação do back4app https //www back4app com/docs