Building a CRUD App with Inferno.js: A Comprehensive Walkthrough

visão geral este guia mostrará como construir uma aplicação crud (criar, ler, atualizar, excluir) completa usando inferno js você aprenderá a lidar com operações de dados fundamentais desenvolvendo um sistema crud que manipula e atualiza informações de forma eficiente nossa base de backend é alimentada pelo back4app, onde você estabelecerá um projeto chamado basic crud app infernojs para gerenciar seus dados de forma integrada primeiro, você configurará seu projeto back4app e projetará um esquema de banco de dados escalável definindo classes e campos—seja manualmente ou com a assistente de ia do back4app esse processo garante que suas estruturas de dados sejam robustas o suficiente para todas as tarefas crud em seguida, você utilizará a interface de administração do back4app, uma ferramenta de arrastar e soltar sem código que torna o gerenciamento de dados simples finalmente, você conectará seu frontend inferno js com o back4app usando o sdk (se se adequar à sua configuração) ou por meio de chamadas de api, tudo isso enquanto emprega controles de acesso rigorosos para segurança ao final deste tutorial, você terá uma aplicação web em nível de produção com autenticação de usuário, manipulação dinâmica de dados e uma interface responsiva insights principais domine as funcionalidades crud com um backend robusto no back4app entenda como arquitetar um esquema de banco de dados escalável e integrá lo com seu frontend inferno js explore uma ferramenta de gerenciamento visual para executar operações de criar, ler, atualizar e excluir sem esforço aprenda estratégias de implantação, incluindo containerização com docker requisitos uma conta no back4app e um projeto recém criado se você precisar de orientação, confira introdução ao back4app https //www back4app com/docs/get started/new parse app uma configuração de desenvolvimento inferno js use seu starter ou boilerplate inferno favorito confirme se o node js (versão 14 ou mais recente) está instalado uma compreensão básica de javascript, inferno js e princípios de rest api para detalhes adicionais, consulte a documentação do inferno https //infernojs org/docs/introduction antes de começar, por favor, certifique se de que você tem passo 1 – inicializando seu 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 infernojs e siga os passos na tela para completar a criação criar novo projeto após a criação, seu projeto aparece no seu painel, fornecendo uma plataforma de backend sólida para seu app passo 2 – elaborando o esquema do banco de dados definindo seu modelo de dados para este aplicativo crud, você estabelecerá várias classes abaixo estão exemplos de duas classes essenciais com seus campos, configurados para suportar operações crud 1\ a classe de itens campo tipo detalhes id objectid chave primária gerada automaticamente título string o título do item descrição string uma breve explicação do item criado em data timestamp que marca quando o item foi criado atualizado em data timestamp para a atualização mais recente 2\ a classe de usuários campo tipo detalhes id objectid chave primária gerada automaticamente nome de usuário string identificador único para o usuário email string endereço de e mail único do usuário hash da senha string senha criptografada para autenticação segura criado em data carimbo de data/hora para a criação da conta atualizado em data carimbo de data/hora para a última atualização da conta crie manualmente essas classes no painel do back4app selecionando “nova classe” e adicionando as colunas necessárias criar nova classe você pode definir cada campo selecionando um tipo de dado, fornecendo um nome e definindo padrões ou requisitos criar coluna aproveitando o assistente de ia do back4app para configuração de esquema o assistente de ia do back4app simplifica a criação de esquemas gerando automaticamente classes com base em suas descrições como usar o assistente de ia acesse o assistente de ia faça login no seu painel do back4app e localize o assistente de ia nas configurações detalhe seu modelo de dados insira uma descrição abrangente das classes e campos que você precisa revise e implemente o assistente proporá definições de classe confirme e aplique essas configurações exemplo de prompt create the following classes in my back4app app 1\) class items \ fields \ id objectid (auto generated) \ title string \ description string \ created at date (auto set) \ updated at date (auto update) 2\) class users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ password hash string \ created at date (auto set) \ updated at date (auto update) usar o assistente de ia simplifica sua configuração, garantindo consistência e eficiência passo 3 – ativando a interface de administração e funções crud apresentando a interface de administração a interface de administração do back4app é uma ferramenta poderosa, sem código, que oferece uma experiência de arrastar e soltar para gerenciar seu backend ela permite que você execute operações crud sem esforço ativando a interface de administração vá para a seção “mais” no seu painel do back4app clique em “admin app” e depois clique em “habilitar admin app ” configure sua conta de administrador criando seu usuário administrador inicial este processo configura automaticamente funções e classes essenciais do sistema habilitar admin app após habilitar, faça login na interface de administração para gerenciar seus dados painel do admin app executando crud via a interface de administração dentro da interface de administração, você pode criar entradas use a opção “adicionar registro” dentro de uma classe (como itens) para inserir novos dados ler/modificar entradas clique em qualquer registro para visualizar ou atualizar seus detalhes remover entradas utilize a função de exclusão para eliminar registros indesejados esta interface melhora muito a usabilidade ao simplificar todas as tarefas crud passo 4 – conectando inferno js com back4app com seu backend configurado através da interface de administração, é hora de integrar seu frontend inferno js opção a utilizando o sdk do parse instale o sdk do parse npm install parse inicialize o parse em seu aplicativo inferno crie um arquivo de configuração (por exemplo, src/parseconfig js ) // src/parseconfig js import parse from 'parse'; // insira suas credenciais do back4app aqui parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; implemente o parse em um componente inferno por exemplo, construa um componente para recuperar e listar itens // src/components/itemslist js import { component } from 'inferno'; import parse from ' /parseconfig'; class itemslist extends component { constructor(props) { super(props); this state = { items \[] }; } componentdidmount() { this loaditems(); } async loaditems() { const items = parse object extend("items"); const query = new parse query(items); try { const results = await query find(); this setstate({ items results }); } catch (err) { console error("erro ao carregar itens ", err); } } render() { return ( \<div> \<h2>itens\</h2> \<ul> {this state items map(item => ( \<li key={item id}> {item get("title")} — {item get("description")} \</li> ))} \</ul> \</div> ); } } export default itemslist; opção b usando apis rest ou graphql se o sdk do parse não for ideal para o seu cenário, você pode executar ações crud via rest ou graphql por exemplo, para recuperar itens com rest // rest api call to retrieve items const fetchitems = async () => { 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('items retrieved ', data results); } catch (err) { console error('error fetching items ', err); } }; fetchitems(); incorpore essas chamadas de api dentro dos seus componentes inferno conforme necessário passo 5 – fortalecendo seu backend implementando listas de controle de acesso (acls) garanta a segurança dos dados atribuindo acls por exemplo, para gerar um item privado async function createprivateitem(itemdata, owner) { const items = parse object extend('items'); const item = new items(); item set('title', itemdata title); item set('description', itemdata description); // set acl so only the owner has access const acl = new parse acl(owner); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); item setacl(acl); try { const saveditem = await item save(); console log('private item created ', saveditem); } catch (err) { console error('error creating item ', err); } } configurando permissões em nível de classe (clps) dentro do seu painel do back4app, ajuste os clps para cada classe para impor políticas de acesso padrão, garantindo que apenas usuários autorizados possam interagir com dados sensíveis passo 6 – gerenciando a autenticação de usuários estabelecendo contas de usuário o back4app utiliza a classe user (via parse) para gerenciar a autenticação no seu aplicativo inferno js, implemente funções de registro e login conforme ilustrado abaixo // src/components/auth js import { component } from 'inferno'; import parse from ' /parseconfig'; export class signup extends component { constructor(props) { super(props); this state = { username '', password '', email '' }; } handlesignup = async (e) => { e preventdefault(); const user = new parse user(); user set('username', this state username); user set('password', this state password); user set('email', this state email); try { await user signup(); alert('registration successful!'); } catch (err) { alert('sign up error ' + err message); } }; render() { return ( \<form onsubmit={this handlesignup}> \<input type="text" placeholder="username" value={this state username} oninput={e => this setstate({ username e target value })} /> \<input type="password" placeholder="password" value={this state password} oninput={e => this setstate({ password e target value })} /> \<input type="email" placeholder="email" value={this state email} oninput={e => this setstate({ email e target value })} /> \<button type="submit">sign up\</button> \</form> ); } } uma estratégia semelhante se aplica para login e gerenciamento de sessão recursos adicionais como autenticação social, verificação de email e recuperação de senha podem ser configurados no painel do back4app passo 7 – implantando seu frontend inferno js a opção de implantação web do back4app permite que você hospede seu frontend inferno js sem esforço, vinculando seu repositório do github 7 1 construindo para produção abra o diretório do seu projeto em um terminal execute o comando de construção de produção npm run build este comando compila sua aplicação em uma build pasta contendo ativos estáticos otimizados confirme a construção verifique se a build pasta inclui um index html arquivo e outras pastas de ativos 7 2 organizando e carregando seu código seu repositório deve incluir o código fonte completo do seu frontend inferno js uma estrutura de diretório de exemplo basic crud app infernojs frontend/ \| node modules/ \| public/ \| ` index html \| src/ \| | app js \| | parseconfig js \| ` components/ \| | itemslist js \| ` auth js \| package json ` readme md arquivos de exemplo src/parseconfig js // src/parseconfig js import parse from 'parse'; // insert your back4app credentials here parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; src/app js // src/app js import { component } from 'inferno'; import parse from ' /parseconfig'; class app extends component { constructor(props) { super(props); this state = { items \[], newtitle "", newdescription "", editid null, edittitle "", editdescription "" }; } componentdidmount() { this loaditems(); } async loaditems() { const items = parse object extend("items"); const query = new parse query(items); try { const results = await query find(); this setstate({ items results }); } catch (err) { console error("error loading items ", err); } } handleadd = async () => { const items = parse object extend("items"); const item = new items(); item set("title", this state newtitle); item set("description", this state newdescription); try { await item save(); this setstate({ newtitle "", newdescription "" }); this loaditems(); } catch (err) { console error("error adding item ", err); } } handledelete = async (id) => { try { const item = await parse object createwithoutdata("items", id); await item destroy(); this loaditems(); } catch (err) { console error("error deleting item ", err); } } startedit = (item) => { this setstate({ editid item id, edittitle item get("title"), editdescription item get("description") }); } handleupdate = async () => { try { const items = parse object extend("items"); const item = new items(); item id = this state editid; item set("title", this state edittitle); item set("description", this state editdescription); await item save(); this setstate({ editid null, edittitle "", editdescription "" }); this loaditems(); } catch (err) { console error("error updating item ", err); } } render() { return ( \<div style={{ padding '2rem' }}> \<h1>items\</h1> \<div style={{ marginbottom '1rem' }}> \<h2>add new item\</h2> \<input type="text" placeholder="title" value={this state newtitle} oninput={e => this setstate({ newtitle e target value })} style={{ marginright '0 5rem' }} /> \<input type="text" placeholder="description" value={this state newdescription} oninput={e => this setstate({ newdescription e target value })} style={{ marginright '0 5rem' }} /> \<button onclick={this handleadd}>add item\</button> \</div> \<h2>items list\</h2> \<ul> {this state items map(item => ( \<li key={item id} style={{ marginbottom '1rem' }}> {this state editid === item id ? ( \<div> \<input type="text" value={this state edittitle} oninput={e => this setstate({ edittitle e target value })} style={{ marginright '0 5rem' }} /> \<input type="text" value={this state editdescription} oninput={e => this setstate({ editdescription e target value })} style={{ marginright '0 5rem' }} /> \<button onclick={this handleupdate}>save\</button> \<button onclick={() => this setstate({ editid null })} style={{ marginleft '0 5rem' }}> cancel \</button> \</div> ) ( \<div> \<strong>{item get("title")}\</strong> {item get("description")} \<button onclick={() => this startedit(item)} style={{ marginleft '1rem' }}> edit \</button> \<button onclick={() => this handledelete(item id)} style={{ marginleft '0 5rem' }}> delete \</button> \</div> )} \</li> ))} \</ul> \</div> ); } } export default app; enviando seu código para o github inicialize o git na sua pasta de projeto git init prepare seus arquivos git add confirme suas alterações git commit m "commit inicial para o frontend do inferno js" crie um repositório no github nomeie como basic crud app infernojs frontend envie seu projeto git remote add origin https //github com/seu usuario/basic crud app infernojs frontend git git push u origin main 7 3 conectando o github com a implantação web do back4app vá para a implantação web faça login no back4app, selecione seu projeto ( basic crud app infernojs ), e clique na função de implantação web integre com o github siga as instruções para vincular sua conta do github, permitindo que o back4app acesse seu repositório escolha seu repositório e branch escolha o repositório (por exemplo, basic crud app infernojs frontend ) e o branch (normalmente main ) que contém seu código 7 4 configurações de implantação insira configurações adicionais comando de construção se seu repositório não tiver uma pasta de construção , especifique um comando como npm run build o back4app executará isso durante a implantação pasta de saída defina a saída para build para que o back4app saiba onde seus arquivos estáticos estão variáveis de ambiente adicione quaisquer variáveis necessárias (como chaves de api) nas configurações de configuração 7 5 dockerizando sua aplicação se você optar pela containerização, inclua um dockerfile em seu repositório semelhante a \# use an official node image for the build stage 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 remaining files and build the app 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 implantação do docker no back4app se você escolher este método 7 6 lançando seu aplicativo clique em implantar uma vez que todas as configurações estejam configuradas, clique no botão implantar acompanhe a construção o back4app buscará seu código, construirá seu projeto e o implantará em um contêiner acesse seu app após a implantação, o back4app fornece uma url onde seu aplicativo inferno js está ao vivo 7 7 confirmando a implantação visite a url fornecida abra a url no seu navegador teste a funcionalidade certifique se de que o aplicativo carrega, todas as rotas funcionam corretamente e os ativos (css, js, imagens) são exibidos como esperado solução de problemas use ferramentas de desenvolvedor para inspecionar erros se problemas aparecerem, verifique os logs do back4app e verifique as configurações do github passo 8 – conclusão e direções futuras parabéns! você criou uma aplicação crud completa com inferno js e back4app você configurou o projeto basic crud app infernojs , projetou suas classes de dados e usou a intuitiva interface de administração para gerenciamento de dados seu frontend agora está conectado e protegido com controles de acesso robustos próximos passos aprimorar a ui expanda seu aplicativo inferno js com visualizações detalhadas, capacidades de busca e notificações em tempo real adicionar mais recursos considere implementar funções adicionais no backend (como cloud code), integrar apis de terceiros ou introduzir acesso baseado em funções explorar mais mergulhe na documentação do back4app https //www back4app com/docs e tutoriais adicionais para otimização de desempenho e integrações personalizadas feliz codificação e boa sorte com seus projetos futuros!