Como criar um app CRUD com Svelte?

visão geral neste guia, você aprenderá como construir um aplicativo crud completo (criar, ler, atualizar, excluir) usando svelte utilizaremos o back4app como nossa plataforma de backend, que oferece um backend robusto de baixo código para gerenciar os dados do seu aplicativo este guia explica como configurar um projeto back4app, projetar um esquema de dados versátil e implementar operações crud dentro de uma aplicação svelte inicialmente, você criará um projeto back4app intitulado basic crud app svelte este projeto forma a base da sua configuração de backend, onde você definirá seu esquema de dados manualmente ou com a ajuda do agente de ia integrado do back4app em seguida, você explorará o back4app admin app—uma interface amigável para gerenciamento de dados—que permite realizar operações crud facilmente finalmente, você conectará sua aplicação svelte ao back4app, utilizando o sdk javascript do parse ou chamadas diretas à api rest/graphql, garantindo um manuseio seguro dos dados ao final deste tutorial, você terá uma aplicação svelte totalmente funcional que realiza tarefas básicas de crud juntamente com autenticação de usuário segura o que você vai aprender como configurar um aplicativo crud baseado em svelte com um backend flexível métodos para organizar seu backend e conectá lo ao seu aplicativo svelte como aproveitar o back4app admin app para operações de dados sem costura estratégias para implantar sua aplicação svelte, incluindo a containerização com docker pré requisitos antes de começar, certifique se de que você tem uma conta back4app com um projeto ativo precisa de ajuda? visite back4app começando https //www back4app com/docs/get started/new parse app para orientações uma configuração de desenvolvimento svelte você pode usar um editor de código como o vscode e garantir que o node js esteja instalado familiaridade básica com svelte, javascript e apis rest revise a documentação do svelte https //svelte dev/docs se necessário passo 1 – configurando seu projeto iniciando um novo projeto back4app faça login na sua conta back4app clique no botão “novo app” no seu painel nomeie seu projeto basic crud app svelte e siga as instruções na tela para completar a configuração criar novo projeto após criar seu projeto, você o verá no seu painel, que serve como a base para configurar seu backend passo 2 – elaborando o esquema de dados estruturando seus dados para este aplicativo crud, você precisa definir algumas coleções em seu projeto back4app abaixo estão exemplos das coleções e campos principais necessários para suportar suas operações crud em svelte 1\ coleção de itens esta coleção armazena informações para cada item campo tipo detalhes id objectid identificador único gerado automaticamente título string nome ou título do item descrição string descrição breve do item criadoem data timestamp quando o item foi criado atualizadoem data timestamp da última atualização do item 2\ coleção de usuários esta coleção gerencia credenciais de usuário e detalhes de autenticação campo tipo detalhes id objectid identificador único gerado automaticamente nome de usuário string nome de usuário exclusivo para cada usuário email string endereço de e mail do usuário hashdasenha string senha criptografada para autenticação criadoem data timestamp de criação da conta atualizadoem data carimbo de data/hora para a última atualização da conta você pode criar essas coleções e definir campos diretamente do seu painel do back4app criar nova classe você pode adicionar campos escolhendo o tipo apropriado, nomeando o campo, definindo valores padrão e marcando o como obrigatório criar coluna usando o agente de ia do back4app para geração rápida de esquema o agente de ia integrado no back4app pode configurar automaticamente seu esquema de dados com base em uma descrição simples esta ferramenta simplifica o processo de configuração e garante que seu esquema esteja otimizado para operações crud como utilizar o agente de ia abra o agente de ia nas configurações do seu projeto no painel do back4app, encontre o agente de ia detalhe os requisitos do seu esquema forneça um prompt claro que descreva as coleções e campos que você precisa revise e confirme verifique o esquema proposto e confirme para aplicá lo exemplo de prompt create the following collections in my back4app project 1\) collection items \ fields \ id objectid (auto generated) \ title string \ description string \ createdat date (auto generated) \ updatedat date (auto updated) 2\) collection users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ passwordhash string \ createdat date (auto generated) \ updatedat date (auto updated) esse método economiza tempo e garante que seu esquema de backend esteja perfeitamente alinhado com as necessidades do seu aplicativo passo 3 – gerenciando dados com o aplicativo admin visão geral do aplicativo admin o aplicativo admin do back4app oferece um ambiente sem código para gerenciar seus dados de backend com sua interface de arrastar e soltar, você pode facilmente realizar operações como adicionar, editar e excluir registros ativando o aplicativo admin vá para o menu “mais” no seu painel do back4app selecione “aplicativo admin” e então clique em “ativar aplicativo admin ” configure sua conta de administrador seguindo os prompts para estabelecer suas credenciais esse processo também configurará funções (como b4aadminuser ) e outras configurações do sistema ativar aplicativo admin uma vez ativado, faça login no aplicativo admin para gerenciar efetivamente os dados do seu projeto painel do aplicativo admin como usar o aplicativo admin inserir novos registros use o recurso “adicionar registro” em uma coleção (como itens) para introduzir novos dados examinar ou editar registros clique em um registro para ver seus detalhes ou modificar seus campos excluir registros remova entradas de dados desatualizadas ou desnecessárias esta interface intuitiva torna o gerenciamento dos seus dados de backend simples e eficiente passo 4 – conectando seu aplicativo svelte ao back4app agora que seu backend está configurado, é hora de vincular seu aplicativo svelte ao back4app opção a usando o sdk javascript do parse instale o sdk use npm ou yarn para instalar o sdk javascript do parse npm install parse inicialize o parse em seu aplicativo svelte no seu arquivo javascript principal (por exemplo, src/main js , inicialize o parse // src/main js import parse from 'parse'; parse initialize("your application id", "your javascript key"); parse serverurl = 'https //parseapi back4app com'; // o código de inicialização do seu aplicativo svelte segue implemente funções crud crie um módulo (por exemplo, src/services/items js ) para lidar com operações crud // src/services/items js import parse from 'parse'; export async function fetchitems() { const query = new parse query("items"); try { const results = await query find(); return results; } catch (error) { console error("erro ao buscar itens ", error); return \[]; } } export async function additem(title, description) { const item = parse object extend("items"); const item = new item(); item set("title", title); item set("description", description); try { await item save(); console log("item criado com sucesso!"); } catch (error) { console error("erro ao criar item ", error); } } export async function updateitem(objectid, newtitle, newdescription) { const query = new parse query("items"); try { const item = await query get(objectid); item set("title", newtitle); item set("description", newdescription); await item save(); console log("item atualizado com sucesso!"); } catch (error) { console error("erro ao atualizar item ", error); } } export async function removeitem(objectid) { const query = new parse query("items"); try { const item = await query get(objectid); await item destroy(); console log("item deletado com sucesso!"); } catch (error) { console error("erro ao deletar item ", error); } } opção b usando apis rest/graphql se o sdk do parse não for ideal para o seu caso de uso, você pode invocar diretamente os endpoints rest ou graphql do back4app por exemplo, para recuperar itens via rest export async function getitemsrest() { 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(); return data results; } catch (error) { console error("rest error fetching items ", error); return \[]; } } integre essas chamadas de api dentro dos seus componentes svelte conforme necessário passo 5 – protegendo seu backend usando listas de controle de acesso (acls) aumente a segurança dos seus dados configurando acls em seus objetos por exemplo, para criar um item visível apenas para seu proprietário import parse from 'parse'; export async function createprivateitem(title, description, owner) { const item = parse object extend("items"); const item = new item(); item set("title", title); item set("description", description); const acl = new parse acl(); acl setreadaccess(owner, true); acl setwriteaccess(owner, true); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); item setacl(acl); try { await item save(); console log("private item successfully created!"); } catch (error) { console error("error saving private item ", error); } } configurando permissões em nível de classe (clps) configure clps diretamente no seu painel do back4app para restringir o acesso, de modo que apenas usuários autenticados possam interagir com certas coleções passo 6 – implementando autenticação de usuário em svelte configurando contas de usuário o back4app utiliza a coleção de usuários embutida do parse para gerenciar autenticação no seu aplicativo svelte, implemente funções de registro e login semelhantes aos exemplos abaixo import parse from 'parse'; export async function registeruser(username, password, email) { const user = new parse user(); user set("username", username); user set("password", password); user set("email", email); try { await user signup(); console log("user registered successfully!"); } catch (error) { console error("registration error ", error); } } export async function loginuser(username, password) { try { const user = await parse user login(username, password); console log("user logged in ", user get("username")); } catch (error) { console error("login failed ", error); } } essa abordagem pode ser estendida para gerenciar sessões, redefinições de senha e recursos adicionais de autenticação passo 7 – implantando sua aplicação svelte back4app simplifica o processo de implantação você pode implantar seu aplicativo svelte usando vários métodos, incluindo a containerização com docker 7 1 compile sua aplicação svelte compile seu app execute seu comando de build svelte, tipicamente npm run build revise a build certifique se de que os arquivos gerados (geralmente na public ou build pasta) incluam todos os ativos necessários 7 2 exemplo de estrutura de projeto uma estrutura típica de projeto svelte pode parecer basic crud app svelte/ \| public/ \| | build/ \| | global css \| | index html \| src/ \| | components/ \| | | itemlist svelte \| | | itemform svelte \| | services/ \| | | items js \| | | auth js \| | app svelte \| | main js \| package json \| readme md 7 3 dockerizando seu app svelte se você preferir a implantação em contêiner, crie um dockerfile na raiz do seu projeto \# use a node js image to build the app from node 16 alpine as build \# set the working directory workdir /app \# copy package files and install dependencies copy package json package lock json / run npm install \# copy the rest of the project files and build the app copy run npm run build \# use a lightweight server to serve the built files from nginx\ alpine copy from=build /app/public /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] 7 4 implantação via back4app web deployment vincule seu repositório do github hospede seu projeto svelte no github configure a implantação no back4app no painel do back4app, escolha a implantação web opção, conecte seu repositório (por exemplo, basic crud app svelte ), e selecione seu branch de destino defina as configurações de build especifique seu comando de build (como npm run build ) e aponte para o diretório de saída do build implante seu aplicativo clique em implantar e monitore os logs até que seu aplicativo esteja ao vivo passo 8 – conclusão e melhorias futuras parabéns! você construiu uma aplicação crud baseada em svelte que se conecta ao back4app você configurou um projeto chamado basic crud app svelte , configurou coleções para itens e usuários, e gerenciou seus dados através do back4app admin app você então integrou seu frontend svelte usando o parse javascript sdk (ou rest/graphql) e adicionou medidas de segurança robustas o que vem a seguir? expandir funcionalidade adicionar recursos como busca avançada, visualizações detalhadas ou atualizações em tempo real aprimorar lógica de backend experimente com funções em nuvem, integrações de api de terceiros ou controle de acesso baseado em funções aprofundar seu aprendizado explore mais tutoriais e a documentação do back4app https //www back4app com/docs para otimizar seu aplicativo feliz codificação e aproveite a construção de sua aplicação crud em svelte!