Como Construir um App CRUD Básico com Marko? Um Guia Passo a Passo

visão geral este guia o orienta na criação de uma aplicação crud completa (criar, ler, atualizar, excluir) usando marko e back4app neste tutorial, você configurará um projeto—chamado basic crud app marko —no back4app, projetará um esquema de banco de dados robusto e integrará seu frontend marko com a api do back4app o tutorial também explica como proteger seu backend e implantar sua aplicação para uso em produção o que você vai aprender como construir aplicações crud que gerenciam dados de forma eficiente usando um backend confiável dicas para projetar um esquema escalável e vinculá lo a um frontend baseado em marko utilizando a interface administrativa amigável do back4app para gerenciar dados sem esforço estratégias de implantação, incluindo containerização com docker, para lançar sua aplicação web pré requisitos antes de começar, certifique se de que você tem uma conta back4app e um novo projeto siga as instruções em introdução ao back4app https //www back4app com/docs/get started/new parse app se necessário um ambiente de desenvolvimento marko configurado use o cli do marko ou seu método de configuração preferido certifique se de que o node js (v14 ou posterior) está instalado conhecimento básico de javascript, marko e apis rest visite a documentação do marko https //markojs com/docs/ para mais detalhes passo 1 – configurando seu projeto iniciando um novo projeto back4app faça login na sua conta back4app selecione “novo app” no seu painel digite o nome do projeto basic crud app marko e siga as instruções na tela criar novo projeto seu novo projeto agora aparecerá no seu painel do back4app, estabelecendo as bases para o seu backend passo 2 – criando o esquema do seu banco de dados construindo seu modelo de dados para este aplicativo crud, você criará algumas coleções abaixo estão exemplos de coleções com campos sugeridos para ajudá lo a projetar um esquema de banco de dados prático 1\ coleção produtos esta coleção conterá detalhes sobre cada produto campo tipo detalhes id objectid identificador primário gerado automaticamente nome string o nome do produto detalhes string uma breve descrição do produto criado em data timestamp marcando a criação do produto atualizado em data timestamp da última atualização 2\ coleta usuários esta coleção contém dados de usuário e autenticação campo tipo detalhes id objectid identificador único gerado automaticamente nome de usuário string um nome único para o usuário email string um endereço de e mail único senha string uma versão hash da senha do usuário criado em data timestamp de criação do registro atualizado em data timestamp da última modificação você pode definir manualmente essas coleções no painel do back4app criando uma nova classe para cada coleção e, em seguida, adicionando as colunas apropriadas criar nova classe você pode adicionar campos rapidamente escolhendo um tipo, nomeando sua coluna, definindo valores padrão e marcando como obrigatório, se necessário criar coluna utilizando o agente de ia do back4app para criação de esquemas o agente de ia do back4app simplifica o design de esquemas gerando definições de coleções e campos com base no seu prompt este recurso economiza tempo e garante consistência na configuração do seu banco de dados como usar o agente de ia acesse o agente de ia navegue até o seu painel do back4app e encontre o agente de ia nas configurações do seu projeto descreva seu esquema forneça um prompt detalhado descrevendo as coleções e campos que você precisa revise e implemente após a geração, revise o esquema sugerido e aplique as alterações exemplo de prompt create the following collections for my back4app project 1\) collection products \ fields \ id objectid (auto generated) \ name string \ details 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 string \ created at date (auto generated) \ updated at date (auto updated) essa abordagem simplifica o seu processo de criação de esquemas passo 3 – ativando a interface de administração e funcionalidade crud apresentando a interface de administração o app de administração do back4app é uma interface sem código que torna a gestão de dados sem esforço seus recursos de arrastar e soltar permitem que você adicione, modifique, visualize ou remova registros facilmente habilitando a interface de administração vá para a seção “mais” no seu painel do back4app selecione “admin app” e então clique em “habilitar admin app ” configurar credenciais de admin crie sua primeira conta de admin que também atribuirá funções do sistema como b4aadminuser habilitar admin app uma vez ativado, faça login no admin app para gerenciar seu backend painel do admin app gerenciando operações crud via a interface de admin dentro do admin app você pode adicionar novas entradas use a opção “adicionar registro” em uma coleção (por exemplo, produtos) visualizar/modificar registros clique em qualquer entrada para revisar ou atualizar seus detalhes remover entradas utilize a função de exclusão para remover registros obsoletos esta interface simplificada melhora a experiência do usuário ao simplificar as tarefas de gerenciamento de dados passo 4 – conectando marko com back4app agora que seu backend está configurado, é hora de integrar seu frontend marko com o back4app usando a api opção a empregando a api você usará chamadas de api rest para executar operações crud em sua aplicação marko exemplo buscando dados via rest // in a marko component script file (e g , fetchproducts marko) import { onmount } from 'marko/src/runtime/client'; onmount(async () => { try { const response = await fetch('https //parseapi back4app com/classes/products', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); const data = await response json(); console log('products ', data results); } catch (error) { console error('failed to fetch products ', error); } }); este trecho de código mostra como puxar dados de produtos do back4app usando uma chamada de api rest passo 5 – protegendo seu backend configurando controles de acesso aumente a segurança aplicando listas de controle de acesso (acls) aos seus registros por exemplo, para criar uma entrada de produto privada async function createsecureproduct(productdata, owner) { const product = { name productdata name, details productdata details }; // setup acl only the owner has read/write privileges product acl = { " " { read false, write false }, \[owner id] { read true, write true } }; try { const response = await fetch('https //parseapi back4app com/classes/products', { 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(product) }); const result = await response json(); console log('secure product created ', result); } catch (error) { console error('error creating product ', error); } } definindo permissões padrão use o painel do back4app para configurar permissões em nível de classe (clps) para cada coleção, garantindo que apenas usuários autorizados possam acessar dados sensíveis passo 6 – configuração de autenticação de usuário criando contas de usuário o back4app emprega uma classe de usuário para autenticação em seu aplicativo marko, implemente o cadastro e login de usuários assim // in a marko component script (e g , auth marko) import { onmount } from 'marko/src/runtime/client'; async function registeruser(username, email, password) { const userdata = { username, email, password }; 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(userdata) }); const result = await response json(); console log('user registered ', result); } catch (error) { console error('registration error ', error); } } este trecho demonstra um fluxo simples de registro de usuário usando chamadas rest passo 7 – implantando seu frontend marko o recurso de implantação web do back4app permite que você hospede seu projeto marko diretamente de um repositório do github 7 1 – construindo sua versão de produção abra o diretório do seu projeto em um terminal execute o comando de build npm run build isso produz um build diretório com seus arquivos estáticos otimizados confirme a build verifique se a build pasta inclui um index html e todos os diretórios de ativos 7 2 – organizando e carregando seu código seu repositório deve conter o código fonte completo do seu projeto marko um layout de diretório típico pode parecer assim basic crud app marko frontend/ ├── node modules/ ├── public/ │ └── index html ├── src/ │ ├── components/ │ │ ├── fetchproducts marko │ │ └── auth marko │ ├── app marko │ └── api js ├── package json └── readme md exemplo src/api js // src/api js export const api headers = { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }; export async function fetchproducts() { const response = await fetch('https //parseapi back4app com/classes/products', { headers api headers }); const data = await response json(); return data results; } comprometendo se com o github inicialize o git (se necessário) git init prepare seus arquivos git add confirme suas alterações git commit m "compromisso inicial para o frontend crud do marko" crie e envie para seu repositório github por exemplo, use um repositório chamado basic crud app marko frontend 7 3 – vinculando o github com a implantação na web acesse a implantação na web faça login no back4app, vá para seu projeto (basic crud app marko) e abra a seção de implantação na web conecte sua conta do github siga as instruções para vincular sua conta do github selecione o repositório e o branch escolha o repositório (por exemplo, basic crud app marko frontend ) e o branch (por exemplo, main ) para implantar 7 4 – configurando a implantação defina parâmetros adicionais comando de construção se não existir uma pasta de construção pré construída, defina um comando de construção (por exemplo, npm run build ) diretório de saída especifique build como a pasta de saída variáveis de ambiente insira quaisquer variáveis necessárias (como chaves de api) 7 5 – containerizando com docker se você preferir docker, inclua um dockerfile no repositório do seu projeto \# use a node image for building the app from node 16 alpine as build \# set working directory workdir /app \# install dependencies copy package json / run npm install \# copy all files and build the app copy run npm run build \# use nginx to serve the build from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] nas suas configurações de implantação, escolha a opção de implantação docker 7 6 – implantando seu aplicativo pressione o botão implantar back4app irá puxar seu repositório, executar a construção e implantar seu aplicativo monitore o processo observe os logs de implantação para quaisquer problemas de construção ou tempo de execução acesse seu site uma vez implantado, o back4app fornece uma url para seu aplicativo marko hospedado 7 7 – confirmando sua implantação abra a url fornecida verifique se seu aplicativo carrega corretamente navegue pelo aplicativo verifique se todas as páginas carregam e se as funcionalidades crud operam como esperado resolva problemas se necessário use as ferramentas de desenvolvedor do navegador e os logs do back4app para resolver quaisquer problemas passo 8 – considerações finais e melhorias futuras ótimo trabalho! você agora construiu uma aplicação crud completa com marko e back4app você configurou um projeto chamado basic crud app marko , elaborou coleções detalhadas para produtos e usuários, gerenciou dados através de uma interface de administração intuitiva, integrou seu frontend marko usando apis rest e protegeu seu backend com controles robustos próximos passos melhore sua ui considere adicionar recursos avançados como páginas de detalhes de produtos, funcionalidades de busca e notificações em tempo real expanda as capacidades do backend considere integrar funções serverless ou apis de terceiros para funcionalidades adicionais aprofunde seu conhecimento consulte a documentação do back4app https //www back4app com/docs e tutoriais adicionais para mais insights sobre otimização de desempenho e integrações personalizadas feliz codificação com marko e back4app!