Building a CRUD Application with Qwik: A Comprehensive Tutorial

visão geral neste guia, você aprenderá a criar um aplicativo crud (criar, ler, atualizar, excluir) totalmente funcional usando qwik vamos demonstrar operações essenciais para gerenciar dados enquanto conectamos seu aplicativo ao back4app inicialmente, você configurará um projeto back4app intitulado basic crud app qwik para servir como o backend para gerenciamento de dados em seguida, você configurará um banco de dados escalável definindo coleções e campos—seja manualmente ou com a ajuda do agente de ia do back4app isso garante que seu modelo de dados esteja otimizado para lidar com tarefas crud de forma eficiente você então utilizará o back4app admin app, uma interface amigável de arrastar e soltar, para gerenciar suas coleções de forma simples esta ferramenta simplifica as operações de dados, oferecendo uma maneira intuitiva de criar, atualizar e excluir registros finalmente, você integrará seu frontend qwik com o back4app usando apis rest ou graphql, além de implementar controles de segurança robustos ao final deste tutorial, seu aplicativo pronto para produção não apenas lidará com operações crud, mas também suportará autenticação de usuários e acesso seguro aos dados insights essenciais domine a arte de desenvolver aplicações crud que gerenciam dados de forma eficaz usando um backend confiável descubra métodos para projetar um backend adaptável e integrá lo com um frontend qwik para melhorar a interatividade do usuário explore as vantagens de uma interface administrativa de arrastar e soltar (back4app admin app) para simplificar funções crud aprenda sobre estratégias de implantação, incluindo a containerização com docker, para lançar rapidamente sua aplicação web pré requisitos antes de começar, por favor, certifique se de que você tem uma conta back4app com um novo projeto configurado visite introdução ao back4app https //www back4app com/docs/get started/new parse app para assistência um ambiente de desenvolvimento qwik configure seu projeto usando a documentação do qwik https //qwik builder io/docs/getting started/ certifique se de que você tem o node js (versão 14 ou posterior) instalado uma compreensão básica de javascript, qwik e apis rest consulte a documentação do qwik https //qwik builder io/docs/ se você precisar de um lembrete passo 1 – inicialização do projeto estabelecendo um novo projeto back4app faça login na sua conta back4app clique em “novo app” no seu painel insira o nome do projeto basic crud app qwik e siga as instruções para criar seu projeto criar novo projeto seu novo projeto aparecerá então no seu painel, formando a base do backend para sua aplicação passo 2 – projetando seu esquema de banco de dados elaborando seu modelo de dados para este aplicativo crud, você definirá várias coleções abaixo estão exemplos que delineiam os campos e tipos necessários para ajudá lo a criar um esquema de banco de dados eficaz para lidar com operações crud 1\ coleta de itens esta coleção contém detalhes para cada item campo tipo de dados descrição id objectid chave primária gerada automaticamente título string nome do item descrição string detalhes breves sobre o item criado em data timestamp quando o item foi criado atualizado em data timestamp da última atualização 2\ coleção de usuários esta coleção armazena detalhes do usuário e informações de autenticação campo tipo de dados descrição 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 login 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 manualmente essas coleções através do painel do back4app, criando novas classes e configurando cada coluna conforme necessário criar nova classe adicione facilmente campos selecionando o tipo, fornecendo um nome e configurando valores padrão e restrições criar coluna aproveitando o agente de ia do back4app para criação de esquema o agente de ia do back4app pode gerar automaticamente seu esquema com base em um prompt descritivo este recurso acelera a configuração do projeto e garante consistência como operar o agente de ia acesse o agente de ia localize o no seu painel do back4app ou nas configurações do seu projeto detalhe seu modelo de dados forneça um prompt que descreva as coleções e campos que você precisa revise e implemente avalie as sugestões de esquema geradas e aplique as ao seu projeto 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) essa abordagem economiza tempo e garante um esquema bem estruturado adaptado para sua aplicação passo 3 – ativando o app de admin e gerenciando operações crud introdução ao app de admin o app de admin do back4app fornece uma interface sem código para gerenciar dados de backend sua funcionalidade intuitiva de arrastar e soltar permite que você realize facilmente operações crud como habilitar o aplicativo admin acesse o menu “mais” no seu painel do back4app selecione “aplicativo admin” e depois clique “habilitar aplicativo admin ” configure suas credenciais de admin criando um usuário admin, que automaticamente estabelecerá funções e coleções do sistema habilitar aplicativo admin após a ativação, faça login no aplicativo admin para gerenciar seus dados sem esforço painel do aplicativo admin executando ações crud via o aplicativo admin adicionar registros use o botão “adicionar registro” dentro de qualquer coleção (por exemplo, itens) para criar novas entradas visualizar/editar registros clique em qualquer registro para inspecionar seus detalhes ou fazer atualizações remover registros utilize a função de exclusão para eliminar entradas obsoletas esta ferramenta simplifica as operações de dados, garantindo uma experiência de usuário suave passo 4 – conectando qwik com back4app agora que seu backend está configurado, é hora de integrar seu frontend qwik com o back4app opção usando apis rest ou graphql usaremos chamadas de api rest para interagir com o back4app exemplo buscando itens via rest no qwik crie um componente qwik (por exemplo, src/components/itemslist tsx ) que recupera e exibe itens // src/components/itemslist tsx import { component$, usetask$ } from '@builder io/qwik'; export const itemslist = component$(() => { const items = \[]; usetask$(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(); items push( data results); } catch (error) { console error('error retrieving items ', error); } }); return ( \<div> \<h2>items\</h2> \<ul> {items map((item any) => ( \<li key={item objectid}> {item title} — {item description} \</li> ))} \</ul> \</div> ); }); export default itemslist; este componente usa a api fetch para chamar o endpoint rest do back4app, recuperando a lista de itens para outras operações crud (criar, atualizar, excluir), integre chamadas rest semelhantes em seus componentes qwik passo 5 – protegendo seu backend implementando listas de controle de acesso (acls) aumente a segurança dos seus dados definindo acls em seus objetos por exemplo, para restringir o acesso a um item específico async function createprivateitem(itemdata { title string; description string }, ownerid string) { 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 result = await response json(); console log('created private item ', result); } catch (error) { console error('error creating private item ', error); } } configurando permissões em nível de classe (clps) dentro do painel do back4app, ajuste os clps para cada coleção para impor políticas de acesso padrão, garantindo que apenas usuários autorizados possam interagir com dados sensíveis passo 6 – autenticação de usuário estabelecendo contas de usuário o back4app utiliza a classe user do parse para gerenciar a autenticação em seu aplicativo qwik, implemente o cadastro e login de usuários conforme mostrado abaixo exemplo componente de cadastro no qwik // src/components/auth tsx import { component$, usestore } from '@builder io/qwik'; export const signup = component$(() => { const store = usestore({ username '', password '', email '' }); const handlesignup = async (e event) => { e preventdefault(); 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 store username, password store password, email store email }) }); const data = await response json(); alert('user successfully registered!'); } catch (error any) { alert('registration error ' + error message); } }; return ( \<form onsubmit$={handlesignup}> \<input type="text" placeholder="username" value={store username} oninput$={(e) => (store username = (e target as htmlinputelement) value)} /> \<input type="password" placeholder="password" value={store password} oninput$={(e) => (store password = (e target as htmlinputelement) value)} /> \<input type="email" placeholder="email" value={store email} oninput$={(e) => (store email = (e target as htmlinputelement) value)} /> \<button type="submit">register\</button> \</form> ); }); uma abordagem semelhante pode ser aplicada ao login e gerenciamento de sessão opções adicionais, como autenticação social, verificação de email e recuperação de senha, podem ser configuradas via back4app passo 7 – implantando seu frontend qwik via implantação web o serviço de implantação web do back4app permite a hospedagem contínua do seu frontend qwik ao vincular seu repositório do github siga estas etapas para implantar seu site 7 1 crie sua build de produção abra a pasta do seu projeto no terminal execute o comando de build npm run build isso gera uma build pasta contendo ativos estáticos otimizados confirme o build certifique se de que a build pasta tenha um arquivo index html junto com diretórios de ativos associados 7 2 organize e comite seu código no github seu repositório deve incluir o código fonte completo do seu frontend qwik uma estrutura típica pode ser basic crud app qwik frontend/ \| node modules/ \| public/ \| └── index html \| src/ \| ├── root tsx \| ├── entry tsx \| └── components/ \| ├── itemslist tsx \| └── auth tsx \| package json \| readme md exemplo src/root tsx // src/root tsx import { component$ } from '@builder io/qwik'; import itemslist from ' /components/itemslist'; export default component$(() => { return ( \<div style={{ padding '2rem' }}> \<h1>crud application\</h1> \<itemslist /> \</div> ); }); comprometendo seu código inicialize o git (se ainda não feito) git init prepare seus arquivos git add confirme suas alterações git commit m "compromisso inicial do código frontend qwik" crie um repositório no github por exemplo, nomeie o como basic crud app qwik frontend envie seu código para o github git remote add origin https //github com/seu usuario/basic crud app qwik frontend git git push u origin main 7 3 conectando seu repositório à implantação web acesse a implantação web faça login no seu painel do back4app, selecione seu projeto (basic crud app qwik) e navegue até a seção implantação web vincule ao github siga as instruções na tela para conectar sua conta do github selecione o repositório e o branch escolha seu repositório (por exemplo, basic crud app qwik frontend ) e o branch relevante (por exemplo, main ) 7 4 configuração de implantação especifique configurações adicionais comando de construção se uma pasta de construção pré construída não estiver incluída, defina o comando (por exemplo, npm run build ) diretório de saída defina o diretório de saída como build variáveis de ambiente insira quaisquer variáveis necessárias, como chaves de api 7 5 containerizando seu app qwik com docker (opcional) se você optar pelo docker, inclua um dockerfile semelhante a \# use node for building the app from node 16 alpine as build workdir /app copy package json / run npm install copy run npm run build \# serve the built app with nginx from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] em seguida, selecione a opção docker nas suas configurações de implantação web 7 6 implantando seu aplicativo clique no botão implantar uma vez que a configuração estiver completa, clique em implantar assista à construção back4app irá puxar seu código, construí lo e implantar o contêiner receba sua url após a implantação, uma url será fornecida onde seu aplicativo está hospedado 7 7 verificando sua implantação visite a url abra o link fornecido em seu navegador teste a funcionalidade verifique se todas as rotas e ativos carregam corretamente depure se necessário use as ferramentas de desenvolvedor do navegador e os logs do back4app para solucionar problemas passo 8 – conclusão e melhorias futuras muito bem! você construiu com sucesso um aplicativo crud completo usando qwik e back4app você estabeleceu o projeto basic crud app qwik , elaborou um esquema de banco de dados detalhado para itens e usuários, e gerenciou os dados com o admin app além disso, você conectou seu frontend qwik ao backend e aplicou medidas de segurança robustas próximos passos expanda seu frontend melhore seu aplicativo qwik com recursos como visualizações detalhadas de itens, funcionalidades de busca ou atualizações em tempo real adicione mais funcionalidade considere integrar lógica de backend avançada, apis de terceiros ou controle de acesso baseado em funções explore recursos adicionais consulte a documentação do back4app https //www back4app com/docs e outros tutoriais do qwik para um conhecimento aprofundado sobre melhorias de desempenho e integrações personalizadas ao seguir este tutorial, você agora possui o conhecimento para criar