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

neste tutorial, você construirá um aplicativo de lista de tarefas usando svelte e o conectará a um serviço de backend gerenciado alimentado pelo back4app este guia é projetado para você se deseja dominar operações crud essenciais (criar, ler, atualizar, excluir) e criar uma interface intuitiva usando svelte ao final, seu aplicativo interagirá perfeitamente com um backend que gerencia armazenamento de dados, autenticação e muito mais desenvolver um aplicativo full stack pode ser complexo devido à configuração do backend e gerenciamento de banco de dados para simplificar seu trabalho, usamos o back4app—um robusto backend como serviço —para que você possa se concentrar em construir um frontend dinâmico em svelte o back4app fornece um banco de dados nosql totalmente gerenciado, autenticação, cloud code para lógica personalizada e sdks para uma integração suave isso permite que você implante aplicativos escaláveis sem gerenciar a infraestrutura do servidor principais conclusões ao seguir este tutorial, você irá inicializar um projeto moderno em svelte com vite integrar perfeitamente um serviço de backend para gerenciar os dados do seu aplicativo implementar operações crud essenciais para uma lista de tarefas dinâmica implantar seu aplicativo totalmente funcional usando fluxos de trabalho em contêiner no back4app pré requisitos antes de começar, certifique se de que você tem node js e npm instalados em sua máquina verifique com node v e npm v conhecimento básico de svelte , incluindo componentes, variáveis reativas e manipulação de eventos uma conta back4app para gerenciar seus serviços de backend inscreva se em back4app https //www back4app com/ se você ainda não tiver uma com esses pré requisitos em ordem, você está pronto para começar a construir seu projeto configuração do projeto comece configurando seu ambiente de desenvolvimento local e inicializando um novo projeto svelte usando vite certifique se de que você tem node js (versão lts) instalado se não, baixe o de nodejs org https //nodejs org/ crie seu projeto svelte executando npm create vite\@latest todo app template svelte mude para o diretório do seu projeto cd todo app instale as dependências necessárias npm install inicie o servidor de desenvolvimento para verificar a configuração npm run dev abra a url fornecida no seu navegador para ver seu aplicativo svelte em ação com o frontend pronto, prossiga para criar seu backend no back4app criando o backend todo back4app oferece um serviço de backend totalmente gerenciado alimentado por parse inclui um banco de dados nosql, autenticação, cloud code e apis geradas automaticamente siga estas etapas para configurar seu backend faça login na sua painel do back4app https //www back4app com/ e clique em "criar um novo app " nomeie seu app (por exemplo, todoapp ) e selecione nodejs/parse como o tipo de backend navegue até "banco de dados" > "navegador" , clique em "criar uma classe" , e escolha "personalizado" nomeie a classe tarefa e defina permissões para permitir leitura e escrita públicas (você pode refinar isso 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) – status de conclusão da tarefa datadevencimento (data) – o prazo para a tarefa clique em "salvar" para criar o esquema integrando o back4app com svelte para conectar seu aplicativo svelte com o back4app, você usará o parse javascript sdk instale o sdk parse npm install parse configure o sdk editando o src/main js arquivo importe o sdk e inicialize o com seu application id e javascript key do painel do back4app (encontre isso em app settings > security & keys ) import app from ' /app svelte'; 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; const app = new app({ target document getelementbyid('app') }); export default app; com seu backend conectado, você pode agora construir a interface da lista de tarefas e implementar operações crud desenvolvendo o frontend seu aplicativo svelte consistirá em componentes que permitem adicionar, exibir, atualizar e excluir tarefas você aproveitará a reatividade do svelte para atualizações dinâmicas estruturando seus componentes crie uma components pasta dentro de src para organizar seus componentes svelte mkdir src/components você criará os seguintes componentes taskform svelte – para adicionar novas tarefas tasklist svelte – para exibir a lista de tarefas taskitem svelte – para representar tarefas individuais taskform svelte este componente renderiza um formulário que captura os detalhes da tarefa e os envia para o back4app \<script> import { createeventdispatcher } from 'svelte'; import parse from 'parse/dist/parse min js'; let title = ''; let description = ''; const dispatch = createeventdispatcher(); async function handlesubmit(event) { event 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(); dispatch('refresh'); title = ''; description = ''; } catch (error) { console error('error adding task ', error); } } \</script> \<form on\ submit|preventdefault={handlesubmit}> \<input type="text" placeholder="task title" bind\ value={title} required /> \<input type="text" placeholder="description" bind\ value={description} required /> \<button type="submit">add task\</button> \</form> taskitem svelte este componente representa uma tarefa individual, permitindo que você altere seu status de conclusão ou a exclua \<script> import parse from 'parse/dist/parse min js'; export let task; export let refresh; async function togglecomplete() { try { const query = new parse query('task'); const tasktoupdate = await query get(task id); tasktoupdate set('completed', !task completed); await tasktoupdate save(); refresh(); } catch (error) { console error('error updating task ', error); } } async function deletetask() { try { const query = new parse query('task'); const tasktodelete = await query get(task id); await tasktodelete destroy(); refresh(); } catch (error) { console error('error deleting task ', error); } } \</script> \<div class="task item {task completed ? 'completed' ''}"> \<div> \<h3>{task title}\</h3> \<p>{task description}\</p> \</div> \<div> \<button on\ click={togglecomplete}> {task completed ? 'undo' 'complete'} \</button> \<button on\ click={deletetask}>delete\</button> \</div> \</div> tasklist svelte este componente exibe todas as tarefas iterando sobre elas e renderizando cada uma usando taskitem \<script> import taskitem from ' /taskitem svelte'; export let tasks = \[]; export let refresh; \</script> {#if tasks length === 0} \<p>no tasks available\</p> {\ else} {#each tasks as task (task id)} \<taskitem {task} {refresh} /> {/each} {/if} app svelte no seu componente principal, gerencie o estado da aplicação e integre seus componentes de tarefa \<script> import { onmount } from 'svelte'; import parse from 'parse/dist/parse min js'; import taskform from ' /components/taskform svelte'; import tasklist from ' /components/tasklist svelte'; let tasks = \[]; async function fetchtasks() { try { const task = parse object extend('task'); const query = new parse query(task); const results = await query find(); tasks = results map(task => ({ id task id, task tojson() })); } catch (error) { console error('error fetching tasks ', error); } } onmount(fetchtasks); \</script> \<div class="container"> \<h1>to do list\</h1> \<taskform on\ refresh={fetchtasks} /> \<tasklist {tasks} refresh={fetchtasks} /> \</div> estilizando a aplicação crie um src/global css arquivo para adicionar estilos básicos 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; } 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 arquivo de estilo em seu src/main js import ' /global css'; implantando o frontend na implantação web do back4app a implantação web do back4app oferece um ambiente containerizado para hospedar sua aplicação svelte configurando o vite para produção ajuste vite config js se necessário para definir o caminho base corretamente para um ambiente containerizado import { defineconfig } from 'vite'; import { svelte } from '@sveltejs/vite plugin svelte'; export default defineconfig({ plugins \[svelte()], base ' /', }); gere o build de produção npm run build criando um dockerfile crie um dockerfile no diretório raiz com o seguinte conteúdo \# stage 1 build the svelte app from node 18 alpine as build workdir /app copy package json package lock json / run npm install copy run npm run build \# stage 2 serve the app using nginx from nginx\ alpine copy from=build /app/dist /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] testando o contêiner docker localmente construa sua imagem docker docker build t todo frontend execute o contêiner docker run p 8080 80 todo frontend abra http //localhost 8080 no seu navegador para verificar se seu aplicativo svelte está sendo servido corretamente implantando no back4app inicialize um repositório git, adicione seus arquivos de projeto e faça um commit 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 faça login no back4app web deployment https //www back4app com/containers clique "criar novo app" , forneça o nome do seu projeto e selecione seu repositório do github autorize o back4app e escolha implantação do dockerfile confirme as configurações de build e clique "implantar" para iniciar a primeira build monitorando sua implantação após a implantação, use o painel do back4app para ver logs para depuração monitorar o desempenho do contêiner e o uso de recursos acionar reconstruções em novos commits configurar domínios personalizados, se necessário acesse seu aplicativo ao vivo em https //todoapp ku5ofg8s b4a run/ https //todoapp ku5ofg8s b4a run/ https //todoapp ku5ofg8s b4a run/ testes e depuração após a implantação, confirme que seu frontend svelte se comunica corretamente com o backend do back4app verificação da api use as ferramentas de desenvolvedor do seu navegador (f12 → rede) para inspecionar chamadas de api operações de tarefas adicione, complete e exclua tarefas pela interface do usuário e verifique as atualizações no navegador de banco de dados do back4app tratamento de erros verifique os logs do console em busca de erros e teste casos extremos, como enviar tarefas vazias teste de desempenho simule condições de rede lentas usando ferramentas do navegador para avaliar a capacidade de resposta melhores práticas para usar o back4app com svelte para otimizar seu aplicativo requisições eficientes use operações em lote ao lidar com várias tarefas const tasks = \[task1, task2, task3]; parse object saveall(tasks); consultas otimizadas recupere apenas os campos necessários query select('title', 'completed'); variáveis de ambiente armazene chaves sensíveis em um env arquivo vite parse app id=your app id vite parse js key=your js key segurança use acls para restringir o acesso task setacl(new parse acl(parse user current())); descarregamento de backend aproveite o cloud code para lógica de negócios complexa para reduzir a exposição da api conclusão você agora construiu uma aplicação de lista de tarefas full stack criando um frontend svelte, integrando o com o backend do back4app e implantando o usando fluxos de trabalho em contêiner este tutorial o guiou por cada etapa—desde o desenvolvimento local até a implantação na nuvem—garantindo uma interação suave entre sua interface svelte e os serviços de backend olhando para o futuro, considere aprimorar seu aplicativo com atualizações em tempo real, autenticação melhorada e integrações de terceiros para mais aprendizado, visite a documentação do back4app https //www back4app com/docs e explore recursos da comunidade