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

visão geral neste guia, você aprenderá a criar uma aplicação crud (criar, ler, atualizar e excluir) usando riot js vamos passar pelo processo de configuração de um projeto back4app—chamado basic crud app riotjs —para servir como seu backend, e depois integrá lo com um frontend em riot js este tutorial cobre tudo, desde o design do seu esquema de banco de dados e gerenciamento de dados com o back4app admin app até a integração do seu frontend usando o sdk (se aplicável) ou chamadas de api rest/graphql ao final, você terá uma aplicação web totalmente operacional e pronta para produção, com autenticação de usuário e manuseio seguro de dados principais benefícios domine operações crud usando um sistema de backend escalável obtenha insights sobre a integração de um frontend em riot js com o back4app utilize o intuitivo back4app admin app para gerenciamento de dados sem esforço aprenda estratégias de implantação, incluindo a containerização com docker pré requisitos antes de começar, certifique se de que você tem uma conta back4app com um novo projeto consulte introdução ao back4app https //www back4app com/docs/get started/new parse app para orientações uma configuração de desenvolvimento para riot js você pode usar o riot cli ou incluir o riot via uma tag de script certifique se de que o node js (v14 ou posterior) está instalado conhecimento básico de javascript, riot js e apis rest se necessário, consulte a documentação do riot js https //riot js org/ para mais informações passo 1 – inicialização do projeto criando um projeto back4app faça login na sua conta back4app clique em “novo app” no seu painel nomeie seu projeto basic crud app riotjs e siga as instruções de configuração criar novo projeto seu projeto agora aparecerá no seu painel do back4app, servindo como a espinha dorsal para os dados do seu aplicativo passo 2 – projetando o esquema do seu banco de dados elaborando seu modelo de dados para nosso aplicativo crud, você definirá várias coleções abaixo estão coleções e campos de exemplo para ajudá lo a estruturar seu banco de dados para operações crud eficientes 1\ coleção de itens esta coleção contém detalhes sobre cada item campo tipo descrição id objectid identificador único gerado automaticamente título string título do item descrição string descrição breve do item criado em data timestamp quando o item foi adicionado atualizado em data timestamp quando o item foi modificado 2\ coleção de usuários esta coleção contém detalhes do usuário e informações de autenticação campo tipo descrição id objectid identificador único gerado automaticamente nome de usuário string nome de usuário único email string endereço de e mail único hash senha string senha criptografada criado em data timestamp de criação da conta atualizado em data última atualização da conta você pode configurar essas coleções manualmente no painel do back4app criando novas classes e definindo colunas criar nova classe você pode adicionar campos selecionando um tipo de dado, atribuindo um nome, definindo padrões e marcando se o campo é obrigatório criar coluna aproveitando o agente de ia do back4app para criação de esquema o agente de ia do back4app, acessível a partir do seu painel, pode gerar automaticamente seu esquema processando um prompt detalhado que descreve suas coleções e campos necessários usando o agente de ia abra o agente de ia encontre o nas configurações do seu projeto ou menu insira seu modelo de dados cole um prompt descrevendo suas coleções e seus campos revise e confirme valide o esquema gerado e aplique o ao seu projeto prompt de exemplo create these 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) esta ferramenta acelera o processo e garante uma configuração de esquema consistente passo 3 – ativando o app admin e ações crud visão geral do app admin o app admin do back4app oferece uma interface sem código, arrastar e soltar para gerenciamento de backend sem esforço, permitindo que você execute operações crud rapidamente ativando o app admin abra o menu “mais” no seu painel do back4app selecione “app admin” e clique “ativar app admin ” configure sua conta de admin criando o usuário admin inicial, que também estabelece funções padrão ativar app admin uma vez habilitado, faça login no app admin para gerenciar seus dados de backend painel do app admin executando operações crud via o app admin dentro desta interface, você pode adicionar registros use o botão “adicionar registro” dentro de uma coleção (por exemplo, itens) para criar novas entradas editar registros clique em qualquer registro para visualizar e modificar seus detalhes remover registros exclua qualquer registro que não seja mais necessário esta ferramenta simplifica seu fluxo de trabalho ao oferecer uma interface direta para gerenciar dados passo 4 – conectando riot js com back4app agora que seu backend está configurado, é hora de conectar seu frontend riot js ao back4app opção a usando o sdk parse instale o sdk parse npm install parse inicialize o parse em seu projeto riot js crie um arquivo (por exemplo, src/parseconfig js ) // src/parseconfig js import parse from 'parse'; // insert your actual back4app credentials parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; use o parse em um tag riot crie um tag riot (por exemplo, items riot ) para buscar e exibir itens items { item get("title") } — { item get("description") } opção b usando apis rest ou graphql se o sdk do parse não for adequado, execute operações crud por meio de chamadas de api por exemplo, para recuperar itens usando rest // rest api example to get items async function fetchitems() { 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(); console log('fetched items ', data results); } catch (error) { console error('error fetching items ', error); } } fetchitems(); integre essas chamadas de api dentro de suas tags riot js conforme necessário passo 5 – protegendo seu backend configurando listas de controle de acesso (acls) proteja seus dados definindo acls em seus objetos por exemplo, para criar um item privado async function createprivateitem(itemdata, owneruser) { const items = parse object extend('items'); const item = new items(); item set('title', itemdata title); item set('description', itemdata description); // define acl only the owner has read/write access const acl = new parse acl(owneruser); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); item setacl(acl); try { const saveditem = await item save(); console log('private item created ', saveditem); } catch (error) { console error('error saving item ', error); } } ajustando permissões em nível de classe (clps) dentro do seu painel do back4app, configure clps para cada coleção para garantir que apenas usuários autenticados ou autorizados acessem dados sensíveis passo 6 – autenticação de usuário configurando contas de usuário aplicações riot js podem lidar com registro e login de usuários usando a classe parse user integrada do back4app abaixo está um exemplo de tag riot para cadastro de usuário sign up uma estratégia semelhante pode ser aplicada para login e gerenciamento de sessão recursos adicionais como login social, verificação de email ou recuperação de senha podem ser configurados no seu painel do back4app passo 7 – implantando seu frontend riot js o recurso de implantação web do back4app permite que você hospede seu aplicativo riot js vinculando seu repositório do github siga estas etapas para implantar sua versão de produção 7 1 crie seus arquivos de produção abra o diretório do seu projeto em um terminal execute seu comando de build npm run build isso cria uma build pasta com arquivos estáticos otimizados (html, js, css, imagens) confirme a build verifique se a build pasta inclui um index html e diretórios de ativos necessários 7 2 organize e envie seu código para o github seu repositório deve conter o código fonte completo do frontend riot js uma estrutura típica poderia ser basic crud app riotjs frontend/ \| node modules/ \| public/ \| └── index html \| src/ \| ├── app riot \| ├── parseconfig js \| └── tags/ \| ├── items riot \| └── auth riot \| package json \| readme md exemplo src/parseconfig js // src/parseconfig js import parse from 'parse'; // insert your actual back4app keys here parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; exemplo src/app riot riot js crud app confirme e envie seu código inicialize um repositório git (se não feito) git init adicione seus arquivos git add confirme suas alterações git commit m "commit inicial para o frontend riot js" crie um repositório no github (por exemplo, basic crud app riotjs frontend ) e envie seu código git remote add origin https //github com/seu usuario/basic crud app riotjs frontend git git push u origin main 7 3 integre seu repositório github com a implantação web do back4app implantação web faça login no seu painel do back4app, selecione seu projeto ( basic crud app riotjs ) e clique em implantação web conectar ao github siga as instruções para vincular sua conta e repositório do github escolha seu repositório e branch selecione seu repositório (por exemplo, basic crud app riotjs frontend ) e a branch apropriada (como main ) 7 4 configuração de implantação comando de construção se o seu repositório não tiver uma pasta de construção , especifique o comando de construção (por exemplo, npm run build ) o back4app irá executá lo diretório de saída defina isso como build para indicar onde seus arquivos estáticos residem variáveis de ambiente inclua quaisquer variáveis necessárias (como chaves de api) em sua configuração 7 5 dockerizando seu app riot js (opcional) se você preferir implantação em contêiner, adicione um dockerfile ao seu projeto \# use an official node image to build 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 app and build it copy run npm run build \# use nginx to serve the built app from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] selecione a opção docker nas suas configurações de implantação web se você escolher esse caminho 7 6 lance seu aplicativo implantar clique no implantar botão após configurar suas definições monitore o processo back4app buscará seu código, executará o comando de construção e implantará seu aplicativo em um contêiner obtenha sua url uma vez implantado, o back4app fornece uma url onde seu aplicativo riot js está hospedado 7 7 valide sua implantação visite a url abra a url fornecida em seu navegador teste o aplicativo confirme que todas as rotas e ativos (css, javascript, imagens) estão funcionando corretamente solução de problemas use as ferramentas de desenvolvedor do navegador e os logs do back4app se surgirem problemas passo 8 – conclusão e direções futuras parabéns! você construiu um aplicativo crud totalmente funcional usando riot js e back4app você configurou um projeto chamado basic crud app riotjs , projetou um esquema de banco de dados robusto para itens e usuários, e gerenciou seus dados com o admin app você integrou seu frontend riot js e implementou medidas de segurança como acls próximos passos aprimorar o frontend adicione recursos como visualizações detalhadas, capacidades de busca e atualizações em tempo real expandir funcionalidade explore operações avançadas de backend, como cloud functions ou integre apis de terceiros aprofundar seu aprendizado visite a documentação do back4app https //www back4app com/docs e outros recursos para otimizar e expandir seu aplicativo com esses passos, você agora tem a expertise para construir aplicativos crud escaláveis usando riot js e back4app boa codificação!