How to Build a Basic CRUD App with Ractive.js: A Step-by-Step Guide

visão geral neste guia, você aprenderá como construir uma aplicação crud (criar, ler, atualizar, excluir) totalmente funcional usando ractive js este tutorial cobre todo o fluxo de trabalho, desde a configuração do seu projeto back4app até o design do seu esquema de banco de dados, e finalmente a integração de um frontend ractive js com seu backend o projeto, chamado basic crud app ractive , servirá como uma solução robusta de gerenciamento de dados para sua aplicação web você começará inicializando um projeto back4app, configurando coleções e campos manualmente ou com a ajuda do agente de ia do back4app em seguida, você usará o intuitivo app admin do back4app para um manuseio de dados simples, seguido pela integração da sua interface ractive js com o back4app através de chamadas de api rest este guia também explica como proteger seu backend usando métodos avançados de controle de acesso ao final, você terá um aplicativo crud de nível de produção que não apenas realiza operações essenciais, mas também suporta autenticação de usuários e gerenciamento seguro de dados pontos essenciais dominar a construção de aplicações crud que gerenciam dados com um backend confiável entender como projetar um esquema de dados extensível e conectá lo a um frontend ractive js utilizar uma interface de gerenciamento de arrastar e soltar (back4app admin app) para ações crud sem esforço aprender estratégias de implantação, incluindo a containerização docker para lançamentos rápidos de aplicativos web pré requisitos antes de começar, certifique se de que você tem uma conta back4app ativa com um novo projeto criado consulte introdução ao back4app https //www back4app com/docs/get started/new parse app para orientações uma configuração de desenvolvimento ractive js configure seu projeto usando um boilerplate ou sua configuração preferida, garantindo que você tenha o node js (v14 ou posterior) instalado conhecimento básico de javascript, ractive js e apis rest revise a documentação do ractive js https //ractive js org/ conforme necessário passo 1 – inicialização do projeto iniciando um novo projeto back4app faça login na sua conta back4app selecione a opção “novo app” no seu painel nomeie seu projeto basic crud app ractive e siga as instruções na tela para criá lo criar novo projeto após a configuração, seu projeto estará visível no painel, pronto para mais configurações de backend passo 2 – projetando o esquema do seu banco de dados elaborando seu modelo de dados para este aplicativo crud, você definirá várias coleções para gerenciar seus dados abaixo estão exemplos das coleções com campos e tipos de dados sugeridos, garantindo que o backend esteja otimizado para funcionalidades crud 1\ coleção itens esta coleção contém detalhes para cada item campo tipo propósito id objectid identificador primário gerado automaticamente título string título do item descrição string resumo breve do item criado em data timestamp de criação do registro atualizado em data última atualização do timestamp 2\ coleta usuários esta coleção gerencia dados de usuários e autenticação campo tipo propósito id objectid identificador primário gerado automaticamente nome de usuário string identificador único para o usuário email string endereço de e mail único do usuário hash senha string senha hash para autenticação segura criado em data carimbo de data/hora para a criação da conta atualizado em data timestamp da última atualização da conta você pode estabelecer manualmente essas coleções através do painel do back4app, criando novas classes e adicionando as colunas necessárias criar nova classe defina os campos selecionando o tipo de dado apropriado, nomeando a coluna e definindo valores padrão ou obrigatórios criar coluna utilizando o agente de ia do back4app para automação de esquema o agente de ia do back4app pode gerar automaticamente seu esquema com base no seu prompt esta ferramenta eficiente simplifica o gerenciamento de projetos ao estabelecer rapidamente suas coleções e campos como operar o agente de ia acesse o agente de ia a partir do painel do seu projeto insira um prompt detalhado descrevendo suas coleções e campos desejados revise e aplique o esquema gerado automaticamente ao seu projeto prompt de exemplo create these collections for 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) esta abordagem garante que seu esquema seja consistente e adaptado às necessidades do seu aplicativo passo 3 – ativando o app de admin e gerenciando operações crud sobre a interface de admin o aplicativo admin do back4app oferece uma solução sem código para gerenciar seus dados de backend sua interface de arrastar e soltar permite operações crud sem esforço, como adicionar, modificar ou excluir registros como habilitar o aplicativo admin vá para o menu “mais” no seu painel do back4app selecione “aplicativo admin” e clique “habilitar aplicativo admin ” configure seu primeiro usuário admin, que também configura funções (como b4aadminuser ) e coleções do sistema habilitar aplicativo admin uma vez ativado, faça login no aplicativo admin para gerenciar suas coleções painel do aplicativo admin gerenciando dados via o aplicativo admin adicionando entradas use a opção “adicionar registro” em uma coleção (como itens) para inserir novos dados visualizando/editando registros selecione qualquer registro para inspecionar detalhes ou atualizar campos removendo entradas use a função de exclusão para eliminar registros obsoletos esta interface amigável simplifica todas as funções crud passo 4 – conectando ractive js com back4app agora que seu backend está pronto, é hora de conectar seu frontend ractive js ao back4app usando chamadas de api rest com ractive js como o ractive js não possui um sdk parse dedicado, você usará chamadas de api rest para realizar operações crud exemplo buscando itens crie um componente ractive que recupera e exibe dados da sua coleção de itens do back4app items html items list {{#each items}} {{title}} {{description}} edit delete {{/each}} add new item add items js import ractive from "ractive"; const api url = "https //parseapi back4app com/classes/items"; const headers = { "x parse application id" "your application id", "x parse rest api key" "your rest api key", "content type" "application/json" }; const ractive = new ractive({ target "#items container", template "#items template", data { items \[], newtitle "", newdescription "" } }); // function to load items async function loaditems() { try { const response = await fetch(api url, { headers headers }); const result = await response json(); ractive set("items", result results map(item => ({ id item objectid, title item title, description item description }))); } catch (error) { console error("error fetching items ", error); } } ractive on("additem", async function () { const title = ractive get("newtitle"); const description = ractive get("newdescription"); try { await fetch(api url, { method "post", headers headers, body json stringify({ title, description }) }); ractive set({ newtitle "", newdescription "" }); loaditems(); } catch (error) { console error("error adding item ", error); } }); // additional functions for editing and deleting would follow a similar rest approach loaditems(); você pode incorporar essas interações de api em seus componentes ractive js para lidar com todas as operações crud passo 5 – fortalecendo a segurança do backend implementando controles de acesso aumente a segurança definindo listas de controle de acesso (acls) em seus objetos por exemplo, para tornar um item privado async function createprivateitem(itemdata, owneruserid) { const data = { title itemdata title, description itemdata description, acl { \[owneruserid] { read true, write true }, " " { read false, write false } } }; try { const response = await fetch(api url, { method "post", headers headers, body json stringify(data) }); const result = await response json(); console log("private item created ", result); } catch (error) { console error("error creating private item ", error); } } configurando permissões em nível de classe dentro do painel do back4app, ajuste as permissões de nível de classe (clps) para cada coleção para definir políticas de acesso padrão esta etapa garante que apenas usuários autorizados possam acessar dados sensíveis passo 6 – gerenciando a autenticação de usuários configurando contas de usuário o back4app usa a classe user do parse para gerenciar a autenticação implemente o registro e login de usuários por meio de chamadas de api rest em sua aplicação ractive js exemplo cadastro de usuário async function signupuser(username, email, password) { const response = await fetch("https //parseapi back4app com/users", { method "post", headers headers, body json stringify({ username, email, password }) }); const result = await response json(); if (result objectid) { alert("user registered successfully!"); } else { alert("error during sign up " + result error); } } implemente rotinas semelhantes para login e gerenciamento de sessão recursos adicionais como recuperação de senha e verificação de e mail podem ser configurados através do painel do back4app passo 7 – implantando seu frontend ractive js o recurso de implantação web do back4app permite que você hospede sua aplicação ractive js vinculando a ao seu repositório do github 7 1 construindo sua versão de produção abra sua pasta de projeto em um terminal execute o processo de construção (isso pode ser um comando personalizado com base na sua configuração, por exemplo, usando rollup ou webpack) certifique se de que sua pasta de produção (comumente chamada de dist ou build ) contém seus arquivos estáticos 7 2 organizando e comprometendo seu código o repositório do seu projeto deve ter uma estrutura clara, por exemplo basic crud app ractive/ \| node modules/ \| public/ \| └── index html \| src/ \| ├── main js \| ├── ractiveconfig js \| └── components/ \| ├── items html \| └── auth html \| package json \| readme md arquivo de exemplo ractiveconfig js // ractiveconfig js // this file can include global configuration for your ractive app export const api url = "https //parseapi back4app com"; export const headers = { "x parse application id" "your application id", "x parse rest api key" "your rest api key", "content type" "application/json" }; comprometendo seu código inicialize um repositório git git init adicione seus arquivos git add comite as mudanças git commit m "commit inicial para o frontend ractive js" crie um repositório no github (por exemplo, basic crud app ractive ) e envie seu código git remote add origin https //github com/seu usuario/basic crud app ractive git git push u origin main 7 3 vinculando seu repositório à implantação web do back4app faça login no seu painel do back4app, selecione seu projeto ( basic crud app ractive ), e escolha a implantação web opção conecte sua conta do github conforme solicitado selecione o repositório e a branch (normalmente main ) que contém seu código ractive js 7 4 configurando parâmetros de implantação configure o seguinte comando de construção especifique seu comando de construção (por exemplo, npm run build ) diretório de saída defina o para sua pasta de produção (por exemplo, build ou dist ) variáveis de ambiente inclua quaisquer chaves de api ou variáveis de configuração necessárias 7 5 containerizando com docker (opcional) se você deseja implantar via docker, inclua um dockerfile em seu projeto \# base build stage using node js from node 16 alpine as build \# set the working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy the entire app and build it copy run npm run build \# production stage using nginx from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] 7 6 lançando seu aplicativo clique no botão de implantação no back4app monitore o processo de implantação enquanto o back4app puxa e constrói seu repositório uma vez concluído, o back4app fornecerá uma url para seu aplicativo ractive js hospedado 7 7 verificando a implantação abra a url fornecida em seu navegador teste todas as rotas, garantindo que todos os ativos (css, js, imagens) sejam carregados corretamente se ocorrerem problemas, consulte os logs de implantação e verifique suas configurações de construção passo 8 – conclusão e direções futuras ótimo trabalho! você construiu com sucesso uma aplicação crud completa usando ractive js e back4app você configurou um projeto chamado basic crud app ractive , definiu coleções precisas para itens e usuários, e usou o intuitivo admin app para gerenciamento de backend além disso, você integrou seu frontend ractive js com o backend e fortaleceu a segurança dos seus dados próximos passos melhore sua ui adicione recursos como visualizações detalhadas, funções de busca ou atualizações em tempo real expanda seu backend integre lógica de backend avançada, como funções em nuvem ou serviços de api de terceiros aprofunde seu aprendizado explore a documentação do back4app https //www back4app com/docs para configurações e otimizações mais avançadas com este tutorial, você agora tem a expertise para criar um backend crud escalável para sua aplicação ractive js usando back4app feliz codificação!