Construindo uma Aplicação CRUD Básica com Cycle.js: Um Guia Abrangente

visão geral este guia irá te conduzir na construção de uma aplicação crud (criar, ler, atualizar e deletar) completa usando cycle js neste tutorial, você irá configurar um projeto back4app intitulado basic crud app cyclejs que servirá como um backend robusto para sua aplicação você aprenderá a projetar um modelo de dados escalável, gerenciar seus dados através do intuitivo back4app admin app e integrar seu frontend cycle js com o back4app usando chamadas rest/graphql ao final, você terá um aplicativo web pronto para produção capaz de executar operações crud juntamente com autenticação de usuários e manuseio seguro de dados principais insights construa um sistema crud funcional com um backend confiável ganhe experiência prática em arquitetar um modelo de dados escalável utilize uma ferramenta de administração arrastar e soltar para gerenciamento de dados sem esforço integre um frontend cycle js com o back4app através de rest/graphql 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 projeto ativo se você precisar de assistência, confira introdução ao back4app https //www back4app com/docs/get started/new parse app uma configuração de desenvolvimento cycle js use ferramentas como create cycle app https //github com/cyclejs community/create cycle app e certifique se de que o node js (versão 14 ou posterior) está instalado familiaridade com javascript, cycle js e apis rest para uma atualização, consulte a documentação do cycle js https //cycle js org/ passo 1 – inicialização do projeto criando um novo projeto back4app faça login na sua conta back4app pressione o botão “novo app” no seu painel atribua o nome do projeto basic crud app cyclejs e siga os prompts de configuração criar novo projeto após a criação, seu projeto estará visível no painel, pronto para configuração e gerenciamento de backend passo 2 – definindo o esquema do seu banco de dados estruturando seu modelo de dados para este aplicativo crud, você criará várias coleções para gerenciar seus dados abaixo estão coleções de exemplo com campos essenciais e tipos de dados 1\ coleção de itens esta coleção armazenará os detalhes de cada item campo tipo de dados descrição id objectid identificador único gerado automaticamente título string o título do item descrição string um breve resumo do item criado em data a data e hora em que o item foi adicionado atualizado em data a data e hora da última atualização 2\ coleção de usuários esta coleção lida com detalhes do usuário e autenticação campo tipo de dados descrição id objectid identificador único gerado automaticamente nome de usuário string o identificador único do usuário email string o endereço de e mail do usuário hash da senha string senha criptografada para autenticação segura criado em data timestamp de criação da conta atualizado em data timestamp para a atualização mais recente você pode definir essas coleções manualmente através do painel do back4app, criando novas classes e configurando os campos correspondentes criar nova classe para adicionar campos, escolha o tipo de dado, forneça um nome de campo, defina opcionalmente um valor padrão e marque o campo 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 a criação de esquemas gerando automaticamente seu modelo de dados com base em um prompt fornecido isso garante um design de banco de dados consistente e eficiente passos para utilizar o agente ai acesse o agente ai faça login no seu painel do back4app e selecione o agente ai no menu ou nas configurações do projeto detalhe seus requisitos de dados insira um prompt abrangente que liste as coleções necessárias e seus campos revise e implemente examine o esquema gerado automaticamente 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) este recurso não apenas economiza tempo, mas também garante um esquema bem estruturado e otimizado passo 3 – ativando o app admin e gerenciando operações crud explorando o app admin o app admin do back4app fornece uma interface sem código, de arrastar e soltar, para gerenciamento de dados de backend sem esforço ele simplifica as operações crud para suas coleções habilitando o app admin abra o menu “mais” no seu painel do back4app selecione “app admin” e depois clique em “habilitar app admin ” configure suas credenciais de administrador criando seu primeiro usuário administrador esta ação também inicializará os papéis do sistema (por exemplo, b4aadminuser ) habilitar app admin após a ativação, faça login no app admin para começar a gerenciar suas coleções painel do app admin executando operações crud via 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 inserir novas entradas visualizar/modificar registros selecione um registro existente para inspecionar detalhes ou modificar campos remover registros utilize a opção de exclusão para descartar entradas indesejadas esta interface amigável melhora significativamente a gestão e administração dos seus dados passo 4 – integrando cycle js com back4app agora que seu backend está operacional via back4app, é hora de integrar seu frontend cycle js opção utilizando apis rest/graphql focaremos em chamadas de api rest para interagir com seu backend abaixo está um exemplo de componente cycle js que recupera e exibe itens do seu banco de dados back4app usando o driver http do cycle exemplo buscando e exibindo itens com cycle js import xs from 'xstream'; import {run} from '@cycle/run'; import {div, h1, ul, li, input, button, makedomdriver} from '@cycle/dom'; import {makehttpdriver} from '@cycle/http'; function main(sources) { // intent capture add item interactions const addclick$ = sources dom select(' add') events('click'); // model make an http request to fetch items const request$ = xs of({ url 'https //parseapi back4app com/classes/items', category 'items', method 'get', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); // intent handle http responses const items$ = sources http select('items') flatten() map(res => res body results); // view render the items list const vdom$ = items$ startwith(\[]) map(items => div(\[ h1('items'), button(' add', 'add item'), ul( items map(item => li(`${item title} — ${item description}`) ) ) ]) ); return { dom vdom$, http request$ }; } const drivers = { dom makedomdriver('#app'), http makehttpdriver() }; run(main, drivers); este código de exemplo demonstra como usar o cycle js para realizar uma requisição http get para buscar itens e renderizá los dinamicamente passo 5 – protegendo seu backend aplicando listas de controle de acesso (acls) proteja seus objetos definindo acls por exemplo, ao criar um item privado async function createprivateitem(data, owneruser) { const newitem = { title data title, description data description }; // define acl restrict access to the owner only newitem acl = { \[owneruser id] { read true, write true }, ' ' { read false, write false } }; try { 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(newitem) }); const result = await response json(); console log('created item ', result); } catch (error) { console error('error creating item ', error); } } configurando permissões em nível de classe (clps) dentro do painel do back4app, ajuste os clps para cada coleção para garantir que apenas usuários autenticados possam acessar informações sensíveis passo 6 – implementando a autenticação de usuário configurando registro de conta e login back4app utiliza uma classe de usuário para autenticação use chamadas de api rest para gerenciar inscrições e logins de usuários dentro da sua aplicação cycle js abaixo está um exemplo de como lidar com o registro de usuários async function signupuser(userdata) { 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 userdata username, password userdata password, email userdata email }) }); const result = await response json(); alert('registration successful!'); return result; } catch (error) { alert('registration error ' + error message); } } você pode replicar padrões semelhantes para login de usuários e gerenciamento de sessões passo 7 – implantando seu frontend cycle js com implantação web o recurso de implantação web do back4app permite que você hospede sua aplicação cycle js sem esforço através da integração com seu repositório github 7 1 preparando sua build de produção abra o diretório do seu projeto em um terminal execute o comando de build npm run build isso cria um build diretório com arquivos estáticos otimizados confirme a build certifique se de que a build pasta contém um index html e diretórios de ativos relacionados 7 2 organizando e enviando seu código fonte seu repositório git deve incluir todo o código fonte da aplicação cycle js um exemplo de estrutura de arquivos basic crud app cyclejs frontend/ ├── node modules/ ├── public/ │ └── index html ├── src/ │ ├── main js │ ├── httpdrivers js │ └── components/ │ ├── itemslist js │ └── auth js ├── package json └── readme md arquivo de exemplo src/main js import xs from 'xstream'; import {run} from '@cycle/run'; import {div, h1, makedomdriver} from '@cycle/dom'; import {makehttpdriver} from '@cycle/http'; import itemslist from ' /components/itemslist'; function main(sources) { const itemsvtree$ = itemslist(sources); const vdom$ = itemsvtree$ map(tree => div(\[ h1('cycle js crud application'), tree ]) ); return { dom vdom$ }; } const drivers = { dom makedomdriver('#app'), http makehttpdriver() }; run(main, drivers); fazendo commit no github inicialize um repositório git (se ainda não feito) git init adicione seus arquivos git add faça o commit do seu trabalho git commit m "commit inicial para o frontend cycle js" crie um repositório no github (por exemplo, basic crud app cyclejs frontend ) envie seu repositório git remote add origin https //github com/seu usuario/basic crud app cyclejs frontend git git push u origin main 7 3 vinculando seu repositório com a implantação web acessar implantação web faça login no back4app, navegue até seu projeto ( basic crud app cyclejs ), e selecione a função de implantação web conectar ao github siga as instruções para vincular sua conta do github para que o back4app possa acessar seu repositório selecionar o repositório e o branch escolha seu repositório (por exemplo, basic crud app cyclejs frontend ) e o branch (normalmente main ) 7 4 configurações de implantação comando de construção se o seu repositório não tiver uma pasta de construção , especifique um comando de construção (por exemplo, npm run build ) diretório de saída defina isso como build para que o back4app saiba onde encontrar os arquivos estáticos variáveis de ambiente inclua quaisquer chaves de api ou detalhes de configuração necessários 7 5 dockerizando sua aplicação cycle js se você optar pela implantação com docker, adicione um dockerfile ao seu repositório \# use an official node image for building the app from node 16 alpine as build \# set working directory workdir /app \# copy dependency definitions copy package json / \# install dependencies run npm install \# copy the remaining files copy \# build the cycle js application 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;"] selecione a opção de implantação docker na sua configuração de implantação web se você escolher containerizar seu app 7 6 lançando seu aplicativo implante seu app clique no implantar botão após configurar suas definições monitore a implantação back4app puxará seu código do github, construirá o aplicativo (se configurado) e o implantará acesse seu aplicativo uma vez que a implantação esteja completa, o back4app fornecerá uma url para seu aplicativo cycle js ao vivo 7 7 testando sua implantação visite a url implantada abra a url fornecida em seu navegador confirme a funcionalidade certifique se de que todas as rotas e ativos carreguem corretamente depure se necessário use as ferramentas de desenvolvedor do navegador e revise os logs de implantação do back4app para solucionar quaisquer problemas passo 8 – conclusão e melhorias futuras parabéns! você construiu com sucesso uma aplicação crud usando cycle js e back4app você configurou um projeto intitulado basic crud app cyclejs , definiu seu esquema de banco de dados para itens e usuários, e gerenciou seus dados através do intuitivo admin app além disso, você integrou seu frontend cycle js com seu backend usando rest/graphql e protegeu seus dados com controles de acesso adequados próximos passos expanda seu frontend adicione visualizações mais avançadas, filtragem ou atualizações em tempo real integre recursos adicionais de backend considere adicionar funções em nuvem, apis de terceiros ou controle de acesso baseado em funções aprendizado adicional explore a documentação do back4app https //www back4app com/docs para mais insights sobre otimização de desempenho e integrações personalizadas com este guia, você agora possui as habilidades para construir um backend crud escalável para sua aplicação cycle js usando back4app boa codificação!