Como criar uma aplicação CRUD básica com StencilJS? Um tutorial abrangente

visão geral neste guia, você aprenderá como construir uma aplicação crud básica (criar, ler, atualizar e excluir) usando stenciljs este tutorial o guiará na construção de um aplicativo web que executa operações essenciais para gerenciar dados de forma eficaz começaremos lançando um projeto back4app chamado basic crud app stenciljs , que servirá como seu robusto backend depois, você projetará um banco de dados escalável definindo coleções e campos—seja manualmente ou com a ajuda do agente de ia do back4app esta etapa garante que seu banco de dados seja adaptado para suportar todas as operações crud de forma confiável em seguida, você utilizará o back4app admin app, uma interface intuitiva de arrastar e soltar, para gerenciar suas coleções de forma tranquila esta ferramenta sem código simplifica o manuseio das ações crud finalmente, você conectará seu frontend stenciljs ao back4app via apis rest/graphql embora o sdk parse esteja disponível, focaremos nas integrações de api que se adequam perfeitamente ao stenciljs, garantindo que seu backend permaneça seguro por meio de controles de acesso avançados ao final deste tutorial, você terá uma aplicação web pronta para produção que suporta funções crud essenciais, juntamente com autenticação de usuários e gerenciamento robusto de dados insights essenciais domine o processo de construção de aplicativos crud com um sistema backend confiável entenda como projetar um backend escalável e conectá lo a um frontend stenciljs aprenda a usar uma ferramenta de administração sem código (o back4app admin app) para operações de dados eficientes descubra estratégias de implantação, incluindo a containerização docker, para lançar seu aplicativo web rapidamente pré requisitos antes de começar, certifique se de que você tem uma conta back4app com um projeto ativo precisa de ajuda? confira introdução ao back4app https //www back4app com/docs/get started/new parse app uma configuração de desenvolvimento stenciljs use a documentação do stenciljs https //stenciljs com/docs/introduction para configurar seu ambiente certifique se de que o node js (v14 ou posterior) está instalado conhecimento básico de javascript, componentes web e apis rest reveja os conceitos do stenciljs https //stenciljs com/docs se necessário passo 1 – inicie seu projeto lançando 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 stenciljs e siga as instruções na tela para concluir a configuração criar novo projeto uma vez configurado, seu projeto será visível no painel, fornecendo uma base sólida para a configuração do seu backend passo 2 – elaborando o seu esquema de banco de dados definindo o modelo de dados para este aplicativo crud, você precisará configurar várias coleções abaixo estão coleções de exemplo junto com seus campos e tipos de dados para ajudá lo a estruturar seu banco de dados para operações crud eficientes 1\ coleção itens esta coleção contém detalhes para cada item campo tipo de dados detalhes id objectid chave primária gerada automaticamente título string nome ou título do item descrição string descrição breve do item criado em data timestamp quando o item foi criado atualizado em data timestamp da última atualização 2\ coleta usuários esta coleção gerencia perfis de usuário e autenticação campo tipo de dados detalhes id objectid identificador único gerado automaticamente nome de usuário string identificador único para o usuário email string endereço de e mail único hash de senha string senha criptografada para autenticação criado em data timestamp de criação da conta atualizado em data última atualização do timestamp para a conta do usuário você pode adicionar essas coleções manualmente no painel do back4app criando uma nova classe para cada uma e adicionando colunas com tipos de dados apropriados criar nova classe siga as instruções para selecionar um tipo de dado, especificar um nome de campo, definir valores padrão e marcar se o campo é obrigatório criar coluna utilizando o agente de ia do back4app para criação de esquema o agente de ia do back4app é uma ferramenta inovadora disponível em seu painel que automatiza a geração do esquema do seu banco de dados com base em um simples prompt este recurso acelera a configuração do projeto e garante que seu esquema esteja alinhado com as necessidades da sua aplicação como aproveitar o agente de ia acesse o agente de ia abra seu painel do back4app e encontre o agente de ia no menu ou nas configurações do projeto insira seus requisitos de esquema forneça um prompt detalhado descrevendo as coleções e campos que você precisa revise e confirme uma vez que o agente de ia processe seu prompt, revise as sugestões de esquema geradas e aplique as 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 método garante que seu esquema seja consistente e otimizado passo 3 – ativando o app admin e funções crud introdução ao app admin o app admin do back4app oferece uma interface sem código que facilita a gestão de dados de backend seu sistema intuitivo de arrastar e soltar permite que você realize todas as operações crud—criar, ler, atualizar e excluir—com facilidade habilitando o app admin abra o menu “mais” no seu painel do back4app selecione “admin app” e então clique em “ativar admin app ” configure suas credenciais de administrador criando um usuário administrador este processo também configura funções padrão como b4aadminuser e coleções do sistema ativar admin app uma vez ativado, faça login no admin app para começar a gerenciar seus dados painel do admin app gerenciando ações crud via o admin app dentro desta interface você pode adicionar registros clique na opção “adicionar registro” dentro de qualquer coleção (por exemplo, itens) para criar novas entradas visualizar e editar registros selecione um registro para inspecionar ou modificar seus campos remover registros utilize a função de exclusão para eliminar registros obsoletos esta ferramenta simplificada melhora a experiência do usuário ao simplificar as tarefas de gerenciamento de dados passo 4 – vinculando stenciljs com back4app com seu backend configurado e gerenciado através do admin app, o próximo passo é conectar seu frontend stenciljs ao back4app opção a empregando apis rest ou graphql para stenciljs, vamos focar em integrações de api para manter as coisas simples exemplo buscando dados via rest // example 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 (error) { console error('error retrieving items ', error); } }; fetchitems(); integre essas chamadas de api em seus componentes stenciljs conforme necessário opção b utilizando o sdk do parse (se desejado) se você preferir usar o sdk do parse, ainda pode integrá lo em seu projeto stenciljs, uma vez que é uma biblioteca javascript no entanto, nosso exemplo aqui foca em chamadas de api passo 5 – fortalecendo seu backend implementando listas de controle de acesso (acls) garanta a segurança dos dados definindo acls em seus objetos por exemplo, para criar um item privado async function createsecureitem(itemdata, owneruser) { const items = parse object extend('items'); const item = new items(); item set('title', itemdata title); item set('description', itemdata description); // define acl restrict read/write access to the owner const acl = new parse acl(owneruser); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); item setacl(acl); try { const saveditem = await item save(); console log('secure item created ', saveditem); } catch (error) { console error('error creating item ', error); } } configurando permissões em nível de classe (clps) dentro do painel do back4app, defina clps para cada coleção para garantir que apenas usuários autorizados possam acessar dados sensíveis passo 6 – gerenciando a autenticação de usuários estabelecendo contas de usuário o back4app usa a classe user do parse para gerenciar a autenticação em seu projeto stenciljs, implemente o registro e login de usuários da seguinte forma // example component for user signup import { component, h, state } from '@stencil/core'; import parse from ' /parseconfig'; @component({ tag 'app auth', styleurl 'app auth css', shadow true, }) export class appauth { @state() username string = ''; @state() password string = ''; @state() email string = ''; async handlesignup(event event) { event preventdefault(); const user = new parse user(); user set('username', this username); user set('password', this password); user set('email', this email); try { await user signup(); alert('user registered successfully!'); } catch (error) { alert('registration error ' + error message); } } render() { return ( \<form onsubmit={(e) => this handlesignup(e)}> \<input type="text" placeholder="username" value={this username} oninput={(e any) => this username = e target value} /> \<input type="password" placeholder="password" value={this password} oninput={(e any) => this password = e target value} /> \<input type="email" placeholder="email" value={this email} oninput={(e any) => this email = e target value} /> \<button type="submit">register\</button> \</form> ); } } uma estrutura semelhante pode ser aplicada para login e gerenciamento de sessão você também pode habilitar recursos como logins sociais, verificação de email e redefinições de senha diretamente do painel do back4app passo 7 – lançando seu frontend stenciljs com implantação web o recurso de implantação web do back4app permite que você hospede sua aplicação stenciljs implantando código diretamente de um repositório do github 7 1 construindo seu pacote de produção abra o diretório do seu projeto em um terminal execute o comando de build npm run build isso produz uma www pasta contendo ativos estáticos otimizados confirme a build certifique se de que a www pasta inclui um index html junto com os arquivos css, js e de imagem necessários 7 2 organizando e carregando seu código fonte seu repositório deve abranger todos os arquivos fonte para sua aplicação stenciljs uma estrutura de exemplo pode ser basic crud app stenciljs frontend/ ├── node modules/ ├── www/ │ └── index html ├── src/ │ ├── components/ │ │ ├── app auth tsx │ │ └── app items tsx │ ├── global/ │ └── parseconfig ts ├── stencil config ts ├── package json └── readme md arquivo fonte de exemplo src/parseconfig ts // src/parseconfig ts 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; arquivo fonte de exemplo src/components/app items tsx import { component, h, state } from '@stencil/core'; import parse from ' /parseconfig'; @component({ tag 'app items', styleurl 'app items css', shadow true, }) export class appitems { @state() items any\[] = \[]; @state() newtitle string = ''; @state() newdescription string = ''; @state() editingid string | null = null; @state() editingtitle string = ''; @state() editingdescription string = ''; async componentwillload() { await this loaditems(); } async loaditems() { const items = parse object extend("items"); const query = new parse query(items); try { const results = await query find(); this items = results; } catch (error) { console error('error fetching items ', error); } } async additem() { const items = parse object extend("items"); const item = new items(); item set("title", this newtitle); item set("description", this newdescription); try { await item save(); this newtitle = ''; this newdescription = ''; this loaditems(); } catch (error) { console error('error adding item ', error); } } async deleteitem(id string) { try { const item = await parse object createwithoutdata("items", id); await item destroy(); this loaditems(); } catch (error) { console error('error deleting item ', error); } } startedit(item any) { this editingid = item id; this editingtitle = item get("title"); this editingdescription = item get("description"); } async updateitem() { try { const items = parse object extend("items"); const item = new items(); item id = this editingid!; item set("title", this editingtitle); item set("description", this editingdescription); await item save(); this editingid = null; this editingtitle = ''; this editingdescription = ''; this loaditems(); } catch (error) { console error('error updating item ', error); } } render() { return ( \<div style={{ padding '2rem' }}> \<h1>items\</h1> \<div> \<h2>add new item\</h2> \<input type="text" placeholder="title" value={this newtitle} oninput={(e any) => this newtitle = e target value} /> \<input type="text" placeholder="description" value={this newdescription} oninput={(e any) => this newdescription = e target value} /> \<button onclick={() => this additem()}>add item\</button> \</div> \<ul> {this items map(item => \<li key={item id}> {this editingid === item id ? ( \<div> \<input type="text" value={this editingtitle} oninput={(e any) => this editingtitle = e target value} /> \<input type="text" value={this editingdescription} oninput={(e any) => this editingdescription = e target value} /> \<button onclick={() => this updateitem()}>save\</button> \<button onclick={() => this editingid = null}>cancel\</button> \</div> ) ( \<div> \<strong>{item get("title")}\</strong> {item get("description")} \<button onclick={() => this startedit(item)}>edit\</button> \<button onclick={() => this deleteitem(item id)}>delete\</button> \</div> )} \</li> )} \</ul> \</div> ); } } comitando seu código no github inicialize um repositório git no diretório do seu projeto (se ainda não feito) git init prepare seus arquivos git add confirme suas alterações git commit m "commit inicial do código frontend stenciljs" crie um novo repositório no github nomeie o como basic crud app stenciljs frontend envie seu código para o github git remote add origin https //github com/seu usuario/basic crud app stenciljs frontend git git push u origin main 7 3 conectando seu repositório via implantação web acesse a implantação web faça login no seu painel do back4app, selecione seu projeto ( basic crud app stenciljs ) e clique na seção implantação web integre o github conecte sua conta do github seguindo as instruções fornecidas isso permitirá que o back4app acesse seu repositório selecione o repositório e o branch escolha seu repositório (por exemplo, basic crud app stenciljs frontend ) e escolha o branch apropriado (por exemplo, main ) 7 4 configurando sua implantação insira detalhes adicionais de implantação comando de construção se o seu repositório não incluir uma www pasta pré construída, especifique um comando de construção (por exemplo, npm run build ) o back4app executará isso durante a implantação diretório de saída defina o diretório de saída para www para que o back4app saiba onde localizar seus arquivos estáticos variáveis de ambiente adicione quaisquer variáveis de ambiente necessárias (por exemplo, chaves de api) nas configurações de implantação 7 5 containerizando seu projeto stenciljs com docker se você prefere docker para implantação, inclua um dockerfile em seu repositório semelhante a \# use an official node image to build the app from node 16 alpine as build \# set working directory workdir /app \# copy dependency files copy package json / \# install dependencies run npm install \# copy source code copy \# build the app run npm run build \# use nginx to serve the app from nginx\ stable alpine copy from=build /app/www /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] inclua este arquivo em seu repositório e escolha a implantação docker no back4app 7 6 implantando seu aplicativo iniciar implantação clique no implantar botão após configurar suas definições acompanhar o processo de construção back4app buscará seu código do github, executará o comando de construção (se definido) e implantará seu aplicativo containerizado acessar seu aplicativo uma vez implantado, o back4app fornecerá uma url onde seu aplicativo stenciljs está ao vivo 7 7 validando sua implantação visite a url abra a url fornecida em seu navegador testar funcionalidade certifique se de que o aplicativo carrega corretamente, as rotas funcionam corretamente e todos os ativos (css, js, imagens) são servidos sem problemas depurar se necessário use as ferramentas de desenvolvedor do navegador para inspecionar quaisquer erros verifique os logs do back4app e verifique as configurações do github e de construção se ocorrerem problemas passo 8 – resumo e direções futuras muito bem! você construiu com sucesso uma aplicação crud completa usando stenciljs e back4app você configurou um projeto intitulado basic crud app stenciljs , projetou coleções para itens e usuários, e gerenciou dados com o admin app além disso, você conectou seu frontend stenciljs ao seu backend e implementou medidas de segurança robustas próximos passos aprimore o frontend considere expandir seu aplicativo stenciljs com recursos avançados, como visualizações detalhadas de itens, capacidades de busca e notificações em tempo real adicione mais funcionalidades integre lógica de backend complexa (por exemplo, cloud functions), integrações de api de terceiros ou implemente permissões baseadas em funções aprofunde seu conhecimento explore a documentação do back4app https //www back4app com/docs e outros tutoriais para mais insights sobre otimização de desempenho e integrações personalizadas ao seguir este tutorial, você adquiriu as habilidades necessárias para criar um robust