Construindo uma Aplicação CRUD Básica com Mithril.js: Um Tutorial Detalhado

visão geral este guia o orienta na criação de uma aplicação crud (criar, ler, atualizar e excluir) usando mithril js ao longo deste tutorial, você aprenderá como configurar um projeto back4app intitulado basic crud app mithriljs para servir como um backend poderoso para sua aplicação web vamos projetar um esquema de dados eficiente, gerenciá lo através do painel de administração do back4app e integrar seu frontend mithril js usando chamadas de api rest o que você vai aprender como configurar um sistema crud que lida com dados de forma confiável usando um backend robusto estratégias para construir um design de banco de dados escalável e vinculá lo a uma aplicação mithril js utilizando a interface de administração intuitiva de arrastar e soltar do back4app para realizar ações crud métodos de implantação, incluindo a containerização com docker, para colocar sua aplicação no ar rapidamente requisitos antes de começar, por favor confirme que você tem uma conta back4app e um projeto ativo para assistência, consulte introdução ao back4app https //www back4app com/docs/get started/new parse app um ambiente de desenvolvimento mithril js você pode incluir mithril via npm ou um cdn certifique se de ter o node js (v14+) instalado conhecimento fundamental de javascript, mithril js e apis restful para orientações adicionais, confira a documentação do mithril js https //mithril js org/ passo 1 – inicializando seu projeto configurando um novo projeto back4app faça login na sua conta back4app clique no botão novo app no seu painel forneça o nome do projeto basic crud app mithriljs e siga os passos guiados criar novo projeto uma vez configurado, seu projeto será listado no seu painel, servindo como o hub de backend para sua aplicação passo 2 – criando o esquema do seu banco de dados construindo o modelo de dados para este aplicativo crud, você irá projetar algumas coleções chave abaixo está um esboço para criar coleções com seus respectivos campos para lidar efetivamente com operações crud 1\ coleta de itens esta coleção contém os detalhes de cada item campo tipo propósito id objectid identificador único gerado automaticamente título string nome ou título do item descrição string resumo breve sobre o item criado em data timestamp de criação atualizado em data timestamp da última atualização 2\ coleta de usuários esta coleção gerencia perfis de usuários e detalhes de autenticação campo tipo propósito id objectid identificador único gerado automaticamente nome de usuário string nome único do 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 timestamp quando o usuário foi registrado atualizado em data timestamp para quaisquer modificações você pode adicionar manualmente essas coleções e campos através do painel do back4app, criando novas classes e definindo cada coluna de acordo criar nova classe para adicionar campos, basta selecionar o tipo de dado apropriado, fornecer um nome, definir padrões e marcar se é obrigatório criar coluna aproveitando o agente de ia do back4app para automação de esquemas o agente de ia integrado no back4app simplifica a criação de esquemas ao gerar automaticamente suas coleções com base em um prompt fornecido como utilizar o agente de ia acesse o agente de ia a partir do painel do seu projeto descreva seu esquema desejado detalhando as coleções e campos revise o esquema gerado e aplique as alterações prompt de exemplo create the following 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 ajuda a garantir que o design do seu banco de dados seja consistente e otimizado para lidar com operações crud passo 3 – ativando a interface de administração e funcionalidades crud visão geral da interface de administração a interface de administração do back4app é uma solução sem código projetada para ajudá lo a gerenciar seus dados de backend sem esforço seu design de arrastar e soltar torna a realização de operações crud muito fácil como habilitar a interface de administração vá para a mais seção no seu painel do back4app clique em admin app e selecione habilitar admin app configure suas credenciais de administrador para criar seu primeiro usuário administrador este processo também configura funções (como b4aadminuser ) e coleções do sistema habilitar admin app após a ativação, faça login na interface de administração para gerenciar suas coleções painel do app admin executando operações crud via a interface de administração adicionar novos registros use a opção “adicionar registro” em qualquer coleção (por exemplo, itens) para criar entradas visualizar/modificar registros clique em um registro para inspecionar detalhes ou editar seus campos remover registros utilize a função de exclusão para limpar entradas obsoletas esta interface intuitiva melhora a experiência do usuário ao simplificar ações rotineiras de crud passo 4 – vinculando mithril js com back4app com seu backend pronto e gerenciado através da interface de administração, é hora de conectar seu frontend mithril js ao back4app usando chamadas de api rest usando chamadas de api rest com mithril js nós iremos depender de chamadas de api rest para interagir com seu backend back4app exemplo buscando e exibindo itens crie um componente mithril que recupera itens da coleção itens // src/components/itemslist js const itemslist = { items \[], loaditems async function() { 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(); itemslist items = data results; } catch (error) { console error('error retrieving items ', error); } }, oninit function() { itemslist loaditems(); }, view function() { return m('div', \[ m('h2', 'items'), m('ul', itemslist items map(item => m('li', { key item objectid }, `${item title} — ${item description}` ) ) ) ]); } }; export default itemslist; este componente utiliza o método de ciclo de vida do mithril oninit para carregar dados quando o componente é inicializado exemplo adicionando um novo item você pode integrar um formulário para enviar uma solicitação post para adicionar novos itens // src/components/additem js const additem = { title '', description '', submititem async function() { try { const response = await fetch('https //parseapi back4app com/classes/items', { method 'post', headers { 'content type' 'application/json', 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, body json stringify({ title additem title, description additem description }) }); const data = await response json(); console log('item added ', data); // optionally, refresh the list or redirect the user } catch (error) { console error('error adding item ', error); } }, view function() { return m('div', \[ m('h2', 'add item'), m('input\[type=text]', { placeholder 'title', oninput m withattr('value', value => additem title = value), value additem title }), m('input\[type=text]', { placeholder 'description', oninput m withattr('value', value => additem description = value), value additem description }), m('button', { onclick additem submititem }, 'add item') ]); } }; export default additem; você pode implementar operações de atualização e exclusão de forma semelhante usando os métodos http correspondentes (put/patch para atualizações e delete para remoções) passo 5 – melhorando a segurança do backend implementando controles de acesso proteja seus dados aplicando listas de controle de acesso (acls) a cada objeto por exemplo, para criar um item que apenas o proprietário pode modificar async function createsecureitem(itemdata, ownerid) { try { const response = await fetch('https //parseapi back4app com/classes/items', { method 'post', headers { 'content type' 'application/json', 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, body json stringify({ title itemdata title, description itemdata description, acl { \[ownerid] { read true, write true }, " " { read false, write false } } }) }); const data = await response json(); console log('secure item created ', data); } catch (error) { console error('error creating secure item ', error); } } configurando permissões em nível de classe (clps) dentro do seu painel do back4app, ajuste os clps para cada coleção para definir políticas de segurança padrão isso garante que apenas usuários autorizados tenham acesso a informações sensíveis passo 6 – configuração de autenticação de usuário configurando contas de usuário o back4app usa a classe parse user para gerenciar a autenticação com mithril js, você pode gerenciar registro e login através de chamadas à api rest abaixo está um exemplo para registro de usuário // src/components/auth js const auth = { username '', email '', password '', signup async function() { try { const response = await fetch('https //parseapi back4app com/users', { method 'post', headers { 'content type' 'application/json', 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, body json stringify({ username auth username, email auth email, password auth password }) }); const data = await response json(); alert('user registered successfully!'); } catch (error) { alert('registration error ' + error message); } }, view function() { return m('form', { onsubmit function(e) { e preventdefault(); auth signup(); } }, \[ m('input\[type=text]', { placeholder 'username', oninput m withattr('value', value => auth username = value), value auth username }), m('input\[type=email]', { placeholder 'email', oninput m withattr('value', value => auth email = value), value auth email }), m('input\[type=password]', { placeholder 'password', oninput m withattr('value', value => auth password = value), value auth password }), m('button', { type 'submit' }, 'sign up') ]); } }; export default auth; você pode adotar um método semelhante para fazer login e gerenciar sessões passo 7 – implantando seu frontend mithril js o recurso de implantação web do back4app permite que você hospede sua aplicação mithril js de forma integrada, vinculando seu repositório do github 7 1 construindo a versão de produção abra o diretório do seu projeto em um terminal execute o comando de build npm run build isso irá gerar uma build pasta contendo arquivos estáticos otimizados 7 2 organizando e cometendo seu código seu repositório deve ter uma estrutura semelhante a basic crud app mithriljs frontend/ ├── node modules/ ├── public/ │ └── index html ├── src/ │ ├── index js │ ├── components/ │ │ ├── itemslist js │ │ ├── additem js │ │ └── auth js │ └── app js ├── package json └── readme md exemplo src/index js import m from "mithril"; import itemslist from " /components/itemslist"; import additem from " /components/additem"; import auth from " /components/auth"; // define a simple routing system m route(document body, "/", { "/" { view function() { return m("div", \[ m(itemslist), m(additem), m(auth) ]); } } }); comitando e enviando para o github inicialize o git (se ainda não estiver feito) git init adicione seus arquivos git add comite as mudanças git commit m "initial commit of mithril js frontend" crie um repositório no github (por exemplo, basic crud app mithriljs frontend ) e envie seu código git remote add origin https //github com/your username/basic crud app mithriljs frontend git git push u origin main 7 3 vinculando o github com a implantação na web faça login no seu painel do back4app, navegue até seu projeto ( basic crud app mithriljs ) e selecione implantação na web conecte sua conta do github seguindo as instruções na tela escolha seu repositório e branch (por exemplo, main ) que contém seu código fonte mithril js 7 4 configurando as configurações de implantação configure comando de construção especifique npm run build se a pasta de construção não estiver presente diretório de saída defina isso como build para apontar para seus ativos estáticos variáveis de ambiente adicione quaisquer chaves de api ou configurações necessárias 7 5 dockerizando sua aplicação (opcional) se você prefere a containerização, inclua um dockerfile \# use an official node image for building from node 16 alpine as builder workdir /app copy package json / run npm install copy run npm run build \# serve using nginx from nginx\ stable alpine copy from=builder /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] 7 6 implantando seu aplicativo clique no implantar botão na seção de implantação web do back4app monitore o processo de construção enquanto o back4app puxa, constrói e implanta seu aplicativo uma vez concluído, você receberá uma url para seu aplicativo mithril js ao vivo 7 7 verificando a implantação abra a url fornecida em seu navegador confirme se seu aplicativo carrega, as navegações funcionam e os ativos são servidos corretamente use as ferramentas de desenvolvedor do navegador para solucionar problemas, se necessário passo 8 – conclusão e direções futuras muito bem! você construiu com sucesso um aplicativo crud básico com mithril js integrado ao back4app você configurou um projeto chamado basic crud app mithriljs , definiu seu esquema de banco de dados para itens e usuários, e gerenciou seu backend através da interface de administração além disso, você conectou seu frontend mithril js usando chamadas de api rest e aplicou medidas de segurança para proteger seus dados o que vem a seguir? melhorar o frontend adicione recursos como visualizações detalhadas, capacidades de busca ou atualizações em tempo real expandir funções do backend explore funções em nuvem, integrações adicionais de api ou permissões baseadas em funções aprender mais aprofunde se na documentação do back4app https //www back4app com/docs e guias do mithril js para melhorias avançadas feliz codificação e boa sorte com seu projeto!