Como construir uma aplicação CRUD com SvelteKit? A Comprehensive Tutorial

visão geral neste guia, você criará uma aplicação crud simples (criar, ler, atualizar, excluir) usando sveltekit vamos demonstrar como realizar operações padrão de dados e gerenciar o backend da sua aplicação web com back4app o tutorial começa com a configuração de um projeto back4app intitulado basic crud app sveltekit , que serve como seu robusto backend você então projetará um esquema de banco de dados adaptável criando coleções e campos manualmente, ou aproveitando o agente de ia do back4app isso garante que seu modelo de dados seja otimizado para operações crud eficientes em seguida, você usará o back4app admin app—uma ferramenta sem código, de arrastar e soltar—para gerenciar suas coleções, simplificando seu processo de gerenciamento de dados finalmente, você integrará seu frontend sveltekit com o back4app usando apis rest medidas de segurança avançadas, como controles de acesso, também serão configuradas para proteger seu backend ao final deste tutorial, você terá uma aplicação web pronta para produção que suporta operações crud juntamente com autenticação de usuários e atualizações dinâmicas de dados pontos principais domine a criação de aplicações crud que lidam efetivamente com dados em um backend confiável entenda como estruturar um banco de dados escalável e conectá lo a um frontend sveltekit aprenda a utilizar uma ferramenta de administração visual (back4app admin app) para realizar operações de dados de forma integrada explore estratégias de implantação, incluindo a containerização com docker, para lançar rapidamente sua aplicação pré requisitos antes de começar, certifique se de que você tem uma conta back4app com um novo projeto pronto consulte introdução ao back4app https //www back4app com/docs/get started/new parse app para orientações um ambiente de desenvolvimento sveltekit instale o sveltekit seguindo a documentação oficial https //kit svelte dev/docs uma compreensão básica de javascript, sveltekit e rest apis confira a documentação do sveltekit https //kit svelte dev/docs para mais detalhes passo 1 – inicialização do projeto configurando um novo projeto back4app faça login no seu painel do back4app clique no botão “novo app” no seu painel insira o nome do projeto basic crud app sveltekit e siga as instruções na tela para criar seu projeto criar novo projeto após a criação, seu novo projeto aparece no seu painel, fornecendo uma plataforma estável para configuração do backend passo 2 – elaborando o esquema do banco de dados formulando seu modelo de dados para nosso app crud, precisamos criar várias coleções aqui estão exemplos que descrevem as coleções necessárias e seus campos para configurar seu esquema de banco de dados para realizar operações crud 1\ coleta de itens esta coleção contém detalhes sobre cada item campo tipo de dados descrição id objectid chave primária gerada automaticamente título string título do item descrição string visão geral do item criado em data timestamp quando o item foi criado atualizado em data timestamp da última atualização 2\ coleção de usuários esta coleção armazena credenciais de usuário e detalhes do perfil campo tipo de dados descrição id objectid chave primária gerada automaticamente nome de usuário string identificador único para o usuário email string endereço de e mail único do usuário hash da senha string senha criptografada para autenticação criado em data timestamp de criação da conta atualizado em data timestamp para a última atualização de perfil você pode criar manualmente essas coleções no painel do back4app, estabelecendo uma nova classe para cada uma e adicionando as respectivas colunas criar nova classe defina cada campo selecionando o tipo de dado apropriado, nomeando o, definindo valores padrão e marcando o como obrigatório, se necessário criar coluna automatizando a criação de esquemas com o agente ai do back4app o agente ai do back4app simplifica o processo de configuração do esquema diretamente do seu painel ao inserir um prompt que descreve suas coleções e campos, você pode gerar automaticamente a estrutura do seu banco de dados como usar o agente ai acesse o agente ai abra seu painel do back4app e navegue até o agente ai nas configurações do seu projeto descreva seu modelo cole uma descrição detalhada delineando as coleções e campos que você precisa revise e confirme após a submissão, revise as coleções geradas e as definições de campo, e então aplique as ao seu projeto prompt de exemplo create the following 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 que seu esquema seja consistente e otimizado passo 3 – ativando o app admin e executando operações crud apresentando o app admin o app admin do back4app oferece uma interface visual para gerenciar seu backend sem esforço com seus recursos de arrastar e soltar, realizar operações crud se torna simples ativando o app admin vá para a seção “mais” no seu painel do back4app selecione “app admin” e clique “ativar app admin ” configurar credenciais de admin crie um usuário admin inicial para estabelecer funções (por exemplo, b4aadminuser ) e coleções do sistema ativar app admin após a ativação, faça login no app admin para começar a gerenciar seus dados painel do app admin gerenciando operações crud com o app admin dentro do app admin você pode adicionar registros clique no botã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 use a opção de excluir para eliminar entradas que não são mais necessárias esta interface intuitiva simplifica significativamente seu processo de gerenciamento de dados passo 4 – conectando sveltekit com back4app com seu backend configurado via app admin, é hora de vincular seu frontend sveltekit ao back4app aproveitando apis rest no sveltekit você realizará operações crud usando chamadas de api rest exemplo de recuperação de dados crie um endpoint ou componente sveltekit que recupera itens do back4app \<! src/routes/items svelte > \<script> import { onmount } from 'svelte'; let items = \[]; const loaditems = 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(); items = data results; } catch (error) { console error('failed to fetch items ', error); } }; onmount(loaditems); \</script> \<h2>items\</h2> \<ul> {#each items as item (item objectid)} \<li>{item title} – {item description}\</li> {/each} \</ul> integre chamadas de api semelhantes dentro de seus componentes sveltekit para operações de criação, atualização e exclusão passo 5 – protegendo seu backend configurando listas de controle de acesso (acls) proteja seus dados configurando acls para cada objeto por exemplo, para criar um item privado async function createprivateitem(itemdata, ownerid) { const response = await fetch('https //parseapi back4app com/classes/items', { method 'post', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, body json stringify({ title itemdata title, description itemdata description, acl { \[ownerid] { read true, write true }, " " { read false, write false } } }) }); const result = await response json(); console log('created private item ', result); } configurando permissões em nível de classe (clps) no painel do back4app, configure clps para cada coleção para que apenas usuários autorizados possam acessar dados sensíveis passo 6 – implementando autenticação de usuário gerenciando contas de usuário o back4app utiliza a classe user do parse para autenticação em seu aplicativo sveltekit, configure formulários de registro e login que interajam com o back4app por meio de chamadas de api rest exemplo registro de usuário \<! src/routes/signup svelte > \<script> let username = ''; let email = ''; let password = ''; const handlesignup = async () => { try { const response = await fetch('https //parseapi back4app com/users', { method 'post', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, body json stringify({ username, email, password }) }); const data = await response json(); if (data objectid) { alert('registration successful!'); } else { alert('sign up failed ' + data error); } } catch (error) { console error('error during sign up ', error); } }; \</script> \<form on\ submit|preventdefault={handlesignup}> \<input type="text" placeholder="username" bind\ value={username} /> \<input type="email" placeholder="email" bind\ value={email} /> \<input type="password" placeholder="password" bind\ value={password} /> \<button type="submit">register\</button> \</form> um método semelhante pode ser implementado para login de usuário e gerenciamento de sessão passo 7 – implantando seu frontend sveltekit o recurso de implantação web do back4app permite que você hospede seu frontend sveltekit vinculando o a um repositório do github esta seção cobre como construir seus arquivos de produção, enviar seu código fonte e implantar seu site 7 1 criando uma build de produção abra seu terminal no diretório do projeto execute o comando de build npm run build isso gera uma build (ou output ) pasta com ativos estáticos otimizados verifique a build certifique se de que a pasta de build contém um index html e todos os diretórios de ativos necessários 7 2 estruturando e enviando seu código seu repositório deve ter o código fonte completo do sveltekit uma estrutura típica pode ser basic crud app sveltekit/ ├── node modules/ ├── static/ │ └── global css ├── src/ │ ├── routes/ │ │ ├── items svelte │ │ └── signup svelte │ └── lib/ │ └── api js ├── package json └── readme md arquivo de api de exemplo src/lib/api js export const fetchitems = async () => { const res = 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 res json(); return data results; }; comprometendo se com o github inicialize o git (se não feito) git init adicione seus arquivos git add confirme suas alterações git commit m "commit inicial para o frontend sveltekit" crie um repositório no github nomeie o, por exemplo, basic crud app sveltekit envie seu código git remote add origin https //github com/seu usuario/basic crud app sveltekit git git push u origin main 7 3 vinculando seu repositório do github com a implantação na web abra a implantação na web faça login no back4app, navegue até seu projeto (basic crud app sveltekit) e selecione a opção implantação na web conecte se ao github siga as instruções para vincular sua conta do github para que o back4app possa acessar seu repositório escolha seu repositório e branch selecione seu repositório sveltekit (por exemplo, basic crud app sveltekit ) e a branch que contém seu código (geralmente main ) 7 4 configurando sua implantação forneça estas configurações adicionais comando de construção se não houver uma pasta pré construída, defina o comando (por exemplo, npm run build ) diretório de saída especifique a pasta (tipicamente build ou output ) que contém seus arquivos estáticos variáveis de ambiente adicione quaisquer variáveis necessárias, como chaves de api 7 5 dockerizando sua aplicação sveltekit se o docker for sua escolha de implantação, inclua um dockerfile em seu repositório \# use a node image for building the app from node 16 alpine as build \# set working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy the entire source code and build the app copy run npm run build \# use nginx to serve the built files from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] configure a implantação web para usar docker, se preferir 7 6 implantando seu aplicativo clique no botão de implantação uma vez que a configuração estiver completa, clique no botão implantar monitore a implantação back4app irá recuperar seu código, executar a construção e implantar seu aplicativo em um contêiner obtenha sua url após a implantação bem sucedida, o back4app fornece uma url para seu aplicativo sveltekit hospedado 7 7 validando sua implantação visite a url abra a url fornecida em seu navegador teste a funcionalidade confirme se seu aplicativo carrega corretamente, se as rotas funcionam e se todos os ativos são servidos corretamente depure se necessário use as ferramentas de desenvolvedor do navegador para inspecionar erros e revise os logs do back4app para solução de problemas passo 8 – conclusão e direções futuras parabéns por construir uma aplicação crud completa com sveltekit e back4app! você configurou um projeto chamado basic crud app sveltekit , criou coleções detalhadas para itens e usuários, e gerenciou seu backend através do admin app além disso, você integrou seu frontend sveltekit através de apis rest e aplicou controles de acesso rigorosos melhorias futuras expanda seu frontend aprimore seu aplicativo sveltekit com visualizações detalhadas, capacidades de busca e notificações em tempo real adicione recursos avançados implemente lógica do lado do servidor (por exemplo, cloud functions), integre apis de terceiros ou habilite permissões baseadas em funções aprofunde seu conhecimento visite a documentação do back4app https //www back4app com/docs e explore mais tutoriais para melhorias de desempenho e integrações personalizadas este tutorial equipou você com as habilidades necessárias para criar um backend crud escalável para sua aplicação sveltekit usando o back4app aproveite a codificação e boas construções!