Como construir uma aplicação CRUD com Deno? A Comprehensive Guide

visão geral este guia demonstra como criar uma aplicação crud simples (criar, ler, atualizar, excluir) usando deno vamos aproveitar o back4app como nossa plataforma de gerenciamento de backend, configurando o para operar como uma solução de banco de dados confiável e usaremos a abordagem de api para interagir com nossos serviços de backend neste tutorial, você irá configurar um projeto back4app chamado basic crud app deno projetar e configurar seu esquema de banco de dados com coleções e campos adaptados para operações crud utilizar o back4app admin app para gerenciar suas coleções através de uma interface intuitiva de arrastar e soltar conectar seu frontend deno com o back4app usando chamadas rest/graphql proteger seu backend com medidas robustas de controle de acesso ao final deste guia, você terá construído uma aplicação web pronta para produção que suporta operações de dados essenciais e autenticação de usuários insights essenciais dominar as funcionalidades crud para gerenciar dados de forma eficiente aprender como projetar um backend escalável integrado com um frontend baseado em deno usar o back4app admin app para gerenciamento de dados sem interrupções descobrir estratégias de implantação, incluindo containerização com docker pré requisitos antes de começar, por favor, certifique se de que você tem uma conta back4app e um projeto inicializado consulte introdução ao back4app https //www back4app com/docs/get started/new parse app se necessário uma configuração de desenvolvimento deno certifique se de que o deno está instalado e atualizado (versão 1 10+ é recomendada) familiaridade com javascript/typescript, deno e conceitos de api rest consulte o manual do deno https //deno land/manual para mais leituras passo 1 – inicializando seu projeto lançando um novo projeto back4app faça login na sua conta back4app clique no botão “novo app” no seu painel nomeie seu projeto basic crud app deno e siga as instruções na tela criar novo projeto após o projeto ser criado, ele será visível no seu painel, preparando o terreno para a configuração do seu backend passo 2 – elaborando o esquema do banco de dados estruturando seu modelo de dados para esta aplicação crud, você definirá várias coleções abaixo estão coleções de exemplo com campos sugeridos para facilitar operações básicas 1\ coleção itens esta coleção contém detalhes para cada item campo tipo propósito id objectid chave primária gerada automaticamente título string nome do item descrição string resumo breve do item criado em data timestamp para quando o item foi adicionado atualizado em data timestamp da última atualização 2\ coleta usuários esta coleção armazena perfis de usuários e dados de autenticação 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 único do usuário hash de senha string securely hashed password criado em data timestamp de criação da conta atualizado em data última atualização do timestamp você pode criar manualmente essas coleções no painel do back4app, estabelecendo uma nova classe para cada uma e adicionando colunas para definir cada campo criar nova classe você também pode adicionar campos selecionando seu tipo, nomeando os, definindo padrões e marcando os como obrigatórios criar coluna empregando o agente de ia do back4app para criação de esquema o agente de ia do back4app simplifica a geração de esquemas permitindo que você insira um prompt descritivo, que então cria automaticamente as coleções e campos necessários passos para usar o agente de ia acesse o agente de ia abra seu painel do back4app e localize a opção do agente de ia insira a descrição do seu modelo de dados forneça um prompt detalhado listando suas coleções e campos revise e aplique inspecione as sugestões de esquema geradas e implemente as em seu projeto prompt de exemplo create the following collections in my back4app application 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 garante consistência e eficiência na configuração do seu esquema de backend passo 3 – ativando a interface de administração e funções crud visão geral da interface de administração o aplicativo de administração do back4app oferece uma interface sem código para gerenciar seus dados de backend seu design intuitivo de arrastar e soltar facilita a gestão das operações crud ativando o aplicativo de administração vá para o menu “mais” no seu painel do back4app selecione “admin app” e clique em “ativar admin app ” configure suas credenciais de administrador criando um usuário administrador inicial, que também configura funções (por exemplo, b4aadminuser ) e coleções do sistema ativar admin app uma vez ativado, faça login no admin app para gerenciar suas coleções sem esforço painel do admin app gerenciando operações crud via admin app no admin app, você pode adicionar registros clique em “adicionar registro” em qualquer coleção (por exemplo, itens) para criar novas entradas ver/editar registros selecione registros para inspecionar ou modificar detalhes remover registros exclua entradas que não são mais necessárias esta ferramenta simples simplifica o processo de realizar operações básicas de dados passo 4 – conectando deno com back4app com seu backend configurado, é hora de vincular seu frontend deno usando apis rest ou graphql opção usando chamadas de api rest/graphql nós iremos depender de chamadas de api para interagir com o back4app exemplo buscando dados via rest em deno crie um módulo (por exemplo, fetchitems ts ) com o seguinte código const application id = "your application id"; const rest api key = "your rest api key"; const server url = "https //parseapi back4app com/classes/items"; export async function fetchitems() { try { const response = await fetch(server url, { headers { "x parse application id" application id, "x parse rest api key" rest api key, }, }); const data = await response json(); console log("retrieved items ", data results); } catch (error) { console error("error retrieving items ", error); } } fetchitems(); integre essas chamadas de api em sua aplicação deno conforme necessário passo 5 – fortalecendo a segurança do seu backend implementando listas de controle de acesso (acls) proteja seus dados atribuindo acls a cada objeto por exemplo, para garantir que um item seja privado async function createprivateitem(itemdata { title string; description string }, ownertoken string) { const server url = "https //parseapi back4app com/classes/items"; const response = await fetch(server url, { method "post", headers { "content type" "application/json", "x parse application id" "your application id", "x parse rest api key" "your rest api key", "x parse session token" ownertoken, }, body json stringify({ title itemdata title, description itemdata description, acl { " " { read false, write false }, \[ownertoken] { read true, write true } } }), }); const result = await response json(); console log("private item created ", result); } configurando permissões em nível de classe (clps) dentro do painel do back4app, ajuste os clps para cada coleção para definir políticas de acesso padrão, garantindo que apenas usuários autenticados ou autorizados possam acessar ou modificar dados sensíveis passo 6 – gerenciando a autenticação de usuários criando contas de usuário o back4app usa a classe parse user para autenticação em sua aplicação deno, gerencie o registro e login de usuários por meio de chamadas de api rest exemplo registro de usuário em deno async function registeruser(username string, password string, email string) { const server url = "https //parseapi back4app com/users"; try { const response = await fetch(server url, { 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 data = await response json(); console log("user registered ", data); } catch (error) { console error("registration error ", error); } } registeruser("newuser", "securepassword", "user\@example com"); essa abordagem pode ser aplicada da mesma forma ao login e gerenciamento de sessão passo 7 – implantando seu frontend deno com implantação web o recurso de implantação web do back4app permite que você hospede seu frontend baseado em deno implantando código diretamente de um repositório do github 7 1 – construindo sua versão de produção abra o diretório do seu projeto no terminal execute o comando de construção por exemplo, se estiver usando um empacotador como esbuild deno run allow read allow write build script ts confirme a saída da construção certifique se de que o diretório de saída (por exemplo, dist ) contém os arquivos estáticos necessários, como index html , javascript empacotado, css e imagens 7 2 – organizando e comprometendo seu código seu repositório deve incluir todos os arquivos fonte para seu frontend deno uma estrutura de exemplo pode ser basic crud app deno/ ├── deps ts ├── controllers/ ├── public/ │ └── index html ├── routes/ ├── src/ │ ├── app ts │ └── fetchitems ts ├── dockerfile ├── build script ts └── readme md arquivo de exemplo deps ts export { serve } from "https //deno land/std\@0 140 0/http/server ts"; arquivo de exemplo src/app ts import { serve } from " /deps ts"; import { fetchitems } from " /fetchitems ts"; serve(async (req) => { const { pathname } = new url(req url); if (pathname === "/api/items") { const items = await fetchitems(); return new response(json stringify(items), { headers { "content type" "application/json" }, }); } return new response(await deno readtextfile(" /public/index html"), { headers { "content type" "text/html" }, }); }); comitando seu código no github inicialize o git git init adicione todos os arquivos git add comite suas alterações git commit m "commit inicial para o frontend deno crud" envie para o github crie um repositório (por exemplo, basic crud app deno ) e envie git remote add origin https //github com/seu usuario/basic crud app deno git git push u origin main 7 3 – vinculando o github com a implantação web do back4app faça login no back4app e navegue até o seu projeto clique na funcionalidade de implantação web conecte sua conta do github seguindo as instruções selecione seu repositório e branch (por exemplo, main ) que contém seu código deno 7 4 – configurando as configurações de implantação especifique comando de construção se não existir uma dist pasta pré construída, defina o comando (por exemplo, deno run allow read allow write build script ts ) diretório de saída defina a pasta de saída, como dist variáveis de ambiente adicione quaisquer variáveis de ambiente necessárias (por exemplo, chaves de api) 7 5 – dockerizando sua aplicação deno para implantar com docker, inclua um dockerfile no seu projeto \# use the official deno image from denoland/deno\ alpine 1 25 0 \# set the working directory workdir /app \# cache dependencies copy deps ts run deno cache deps ts \# copy the application code copy \# expose port 8000 expose 8000 \# run the application cmd \["run", " allow net", " allow read", "src/app ts"] escolha a opção de implantação docker no back4app se preferir a containerização 7 6 – lançando seu aplicativo iniciar implantação clique no botão de implantar no seu painel do back4app monitorar o processo o back4app buscará seu código, executará as etapas de construção e implantará seu aplicativo acessar seu site após a implantação, uma url será fornecida onde seu aplicativo deno está ao vivo 7 7 – confirmando o sucesso da implantação visite a url fornecida abra a url no seu navegador teste seu aplicativo certifique se de que todas as rotas, ativos estáticos e pontos de extremidade da api funcionem corretamente solução de problemas se surgirem problemas, consulte os logs de implantação e verifique sua configuração passo 8 – conclusão e direções futuras parabéns! você construiu com sucesso uma aplicação crud básica usando deno com back4app como seu backend você configurou o projeto basic crud app deno , estruturou seu banco de dados, gerenciou dados através do admin app, conectou seu frontend deno via chamadas de api e protegeu seus dados com acls e clps melhorias futuras expanda o frontend adicione recursos como visualizações detalhadas, filtros de pesquisa ou atualizações em tempo real lógica avançada de backend integre funções em nuvem ou integrações adicionais de api aprofunde a segurança explore acesso baseado em funções e outras medidas de autenticação para mais detalhes, confira a documentação do back4app https //www back4app com/docs e explore recursos adicionais feliz codificação e aproveite a construção da sua aplicação crud escalável em deno!