Como criar um app CRUD com Astro?

visão geral neste guia, você aprenderá como criar uma aplicação web crud (criar, ler, atualizar e deletar) usando astro este tutorial o guiará na configuração de um projeto back4app—nosso robusto backend—e no design de uma estrutura de dados que suporte operações fundamentais em seguida, construiremos um frontend astro que se comunica com o back4app via apis rest/graphql, garantindo uma gestão de dados segura e eficiente ao final deste guia, você terá uma aplicação web pronta para produção, completa com autenticação de usuário e manuseio seguro de dados o que você vai aprender como estruturar uma aplicação crud com astro e back4app projetando um backend escalável com coleções personalizadas usando uma interface de administração arrastar e soltar para gerenciamento de dados sem esforço integrando seu frontend astro com o back4app usando rest ou graphql implantando seu projeto astro e containerizando o com docker, se necessário pré requisitos antes de começar, por favor, confirme que você tem uma conta back4app com um novo projeto pronto confira introdução ao back4app https //www back4app com/docs/get started/new parse app para orientações um ambiente de desenvolvimento astro configurado use a documentação oficial do astro https //docs astro build para começar certifique se de que o node js (versão 14+) está instalado familiaridade básica com javascript, astro e apis rest visite a documentação do astro https //docs astro build se você precisar de uma atualização passo 1 – inicializando seu projeto iniciando um novo projeto back4app faça login na sua conta back4app clique em “novo app” no seu painel nomeie seu projeto basic crud app astro e siga as instruções para completar a configuração criar novo projeto após a criação, seu projeto aparecerá no seu painel back4app—sua base para configuração de backend passo 2 – elaborando o esquema do seu banco de dados estruturando seu modelo de dados para nossa aplicação crud, você definirá várias coleções abaixo estão coleções de exemplo com campos e tipos para ajudá lo a configurar seu esquema de banco de dados de forma eficaz esta estrutura suporta operações crud eficientes 1\ coleta de itens campo tipo propósito id objectid chave primária gerada automaticamente título string nome ou título do item descrição string uma breve visão geral do item criado em data timestamp de criação atualizado em data timestamp da última modificação 2\ coleção de usuários campo tipo propósito 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 do usuário hash senha string senha criptografada para autenticação criado em data quando a conta foi criada atualizado em data última hora de atualização da conta você pode configurar manualmente essas coleções no seu painel do back4app criando novas classes e adicionando colunas apropriadas criar nova classe para adicionar um campo, selecione um tipo de dado, forneça um nome de campo, defina um padrão se necessário e marque se o campo é obrigatório criar coluna aproveitando o agente de ia do back4app para configuração de esquema o agente de ia integrado no back4app pode gerar automaticamente seu esquema descreva suas coleções e campos desejados na interface do agente de ia, revise suas recomendações 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 created) \ 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 acelera a configuração enquanto garante que seu esquema atenda aos requisitos da aplicação passo 3 – ativando a interface de administração e ações crud explorando a interface de administração o aplicativo de administração do back4app é uma ferramenta sem código que fornece uma interface visual para gerenciar seus dados de backend seu design de arrastar e soltar permite que você execute facilmente operações crud ativando a interface de administração abra o menu “mais” no seu painel do back4app selecione “aplicativo de administração” e clique em “ativar aplicativo de administração ” configure suas credenciais de administrador criando o usuário administrador inicial isso também configurará funções padrão (por exemplo, b4aadminuser ) e coleções do sistema ativar aplicativo admin após a ativação, faça login no aplicativo admin para gerenciar suas coleções painel do aplicativo admin gerenciando dados com a interface admin dentro do aplicativo admin você pode adicionar registros clique em “adicionar registro” em uma coleção (como itens) para criar novas entradas visualizar/editar registros clique em um registro para inspecionar ou modificar seus campos remover registros exclua entradas obsoletas sem esforço esta ferramenta simplifica operações crud com uma interface intuitiva passo 4 – conectando astro com back4app com seu backend configurado, é hora de integrar seu frontend astro utilizando apis rest/graphql como o astro é um gerador de sites estáticos otimizado para desempenho, interagiremos com o back4app usando apis rest ou graphql essa abordagem evita a necessidade do sdk parse exemplo buscando itens via rest abaixo está um exemplo de uma chamada de api rest dentro de um componente astro // src/components/itemslist astro \ import { usestate, useeffect } from 'react'; const \[items, setitems] = usestate(\[]); useeffect(() => { 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(); setitems(data results); } catch (error) { console error('failed to fetch items ', error); } }; fetchitems(); }, \[]); \ \<div> \<h2>items\</h2> \<ul> {items map(item => ( \<li key={item objectid}> {item title} – {item description} \</li> ))} \</ul> \</div> integre chamadas de api semelhantes para criar, atualizar e excluir registros dentro de seus componentes astro passo 5 – protegendo seu backend implementando listas de controle de acesso (acls) proteja seus dados definindo acls em objetos por exemplo, para criar um item que apenas o proprietário pode modificar async function createprivateitem(data, owner) { 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 data title, description data description, acl { \[owner id] { read true, write true }, ' ' { read false, write false } } }) }); const result = await response json(); console log('created private item ', result); } configurando permissões em nível de classe (clps) dentro do painel do back4app, ajuste os clps para cada coleção para definir quem pode acessar e modificar seus dados passo 6 – adicionando autenticação de usuário configurando o registro e login do usuário back4app usa a classe user do parse para autenticação no seu projeto astro, crie componentes para registro e login de usuários aproveitando chamadas de api rest exemplo registro de usuário // src/components/signup astro \ import { usestate } from 'react'; const \[username, setusername] = usestate(''); const \[password, setpassword] = usestate(''); const \[email, setemail] = usestate(''); const handlesignup = async (event) => { event 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, password, email }) }); const result = await response json(); alert('sign up successful!'); } catch (error) { alert('error during sign up ' + error message); } }; \ \<form on\ submit={handlesignup}> \<input type="text" placeholder="username" value={username} oninput={(e) => setusername(e target value)} /> \<input type="password" placeholder="password" value={password} oninput={(e) => setpassword(e target value)} /> \<input type="email" placeholder="email" value={email} oninput={(e) => setemail(e target value)} /> \<button type="submit">register\</button> \</form> você pode construir componentes semelhantes para login de usuários e gerenciamento de sessão passo 7 – implantando seu frontend astro o recurso de implantação web do back4app permite que você hospede seu projeto astro de forma contínua conectando seu repositório do github 7 1 construindo sua versão de produção abra um terminal no diretório do seu projeto execute o comando de build npm run build isso gera uma dist pasta otimizada com seus ativos estáticos verifique a build certifique se de que a dist pasta contém um index html junto com outros diretórios de ativos 7 2 organizando seu repositório de projeto seu repositório deve incluir o código fonte completo do astro uma estrutura de exemplo pode ser basic crud app astro/ ├── node modules/ ├── public/ │ └── favicon ico ├── src/ │ ├── components/ │ │ ├── itemslist astro │ │ └── signup astro │ └── pages/ │ └── index astro ├── package json └── readme md arquivo de exemplo src/components/itemslist astro // src/components/itemslist astro \ import { usestate, useeffect } from 'react'; const \[items, setitems] = usestate(\[]); useeffect(() => { const getitems = async () => { try { const res = 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 json = await res json(); setitems(json results); } catch (err) { console error('error retrieving items ', err); } }; getitems(); }, \[]); \ \<div> \<h2>item list\</h2> \<ul> {items map(item => ( \<li key={item objectid}> {item title} — {item description} \</li> ))} \</ul> \</div> 7 3 comitando e enviando seu código para o github inicialize um repositório git (se não feito) git init adicione todos os arquivos git add confirme suas alterações git commit m "commit inicial para o frontend astro" crie um repositório no github (por exemplo, basic crud app astro ) e faça o push git remote add origin https //github com/seu usuario/basic crud app astro git git push u origin main 7 4 vinculando o github com a implantação web do back4app acessar implantação web faça login no seu painel do back4app, navegue até seu projeto ( basic crud app astro ) e selecione a opção implantação web conecte sua conta do github siga as instruções para autorizar o back4app a acessar seu repositório escolha seu repositório e branch selecione o repositório (por exemplo, basic crud app astro ) e o branch (normalmente main ) 7 5 configurando as configurações de implantação comando de construção especifique o comando de construção (por exemplo, npm run build ) se seu repositório não tiver uma saída pré construída diretório de saída defina como dist para que o back4app saiba onde localizar seus arquivos estáticos variáveis de ambiente adicione quaisquer variáveis necessárias, como chaves de api 7 6 dockerizando seu aplicativo astro (opcional) se você preferir implantações em contêineres, inclua um dockerfile como \# use an official node image for building from node 16 alpine as builder \# set the working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy source files and build the project copy run npm run build \# use nginx to serve the static files from nginx\ stable alpine copy from=builder /app/dist /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] integre as configurações do docker na sua configuração de implantação web, se desejado 7 7 lançando seu aplicativo clique no botão implantar na seção de implantação web monitore o processo de construção back4app irá recuperar seu código, construí lo e implantar seu aplicativo receba sua url uma vez implantado, o back4app fornecerá uma url onde seu site está ao vivo passo 8 – conclusão e melhorias futuras ótimo trabalho! você agora criou uma aplicação crud completa com astro e back4app seu projeto inclui um backend com coleções detalhadas para itens e usuários, e um frontend que realiza todas as operações crud através de apis rest/graphql próximos passos aprimorar o frontend adicione recursos como visualizações detalhadas, capacidades de busca e notificações em tempo real expandir a funcionalidade do backend considere integrar funções em nuvem ou endpoints de api adicionais para lógica mais complexa aprofundar se explore mais recursos na documentação do back4app https //www back4app com/docs e na documentação do astro https //docs astro build para tópicos avançados ao seguir este tutorial, você agora possui o conhecimento para construir uma aplicação crud robusta e escalável usando astro e back4app aproveite a codificação e a exploração de novas possibilidades!