Como criar um app CRUD com Remix?

visão geral neste guia, você aprenderá como construir uma aplicação crud (criar, ler, atualizar, excluir) usando remix js usaremos o back4app como nosso serviço de backend para gerenciar o armazenamento de dados de forma integrada este guia cobre a configuração de um projeto back4app, o design de um esquema de dados dinâmico e a implementação de operações crud em sua aplicação remix js inicialmente, você configurará um projeto back4app, que chamaremos de basic crud app remix , fornecendo um armazenamento de dados não relacional escalável você então criará um modelo de dados estabelecendo manualmente coleções e campos através do painel do back4app, ou até mesmo usará o agente de ia integrado para uma configuração automatizada em seguida, você explorará o app admin do back4app—uma interface amigável que permite gerenciar seus dados facilmente usando operações de arrastar e soltar finalmente, você conectará sua aplicação remix js ao back4app através de chamadas de api rest, garantindo que suas funcionalidades crud, juntamente com a autenticação de usuários, sejam robustas e seguras ao final deste tutorial, você terá uma aplicação remix js pronta para produção, capaz de realizar operações crud básicas juntamente com gerenciamento seguro de usuários o que você vai aprender como construir um aplicativo crud com remix js e um backend confiável melhores práticas para estruturar seu backend e integrá lo com um frontend remix js como usar o back4app admin app para simplificar tarefas de gerenciamento de dados técnicas para implantar sua aplicação remix js, incluindo containerização com docker pré requisitos antes de começar, certifique se de que você tem uma conta back4app com um novo projeto pronto precisa de ajuda? visite introdução ao back4app https //www back4app com/docs/get started/new parse app um ambiente de desenvolvimento remix js funcional você pode usar qualquer editor de código moderno como o vs code o node js (versão 14 ou posterior) deve estar instalado conhecimento básico de javascript, react e apis restful para uma atualização, confira a documentação do remix https //remix run/docs passo 1 – configurando seu projeto iniciando 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 remix e siga os passos para completar o processo de criação criar novo projeto uma vez que seu projeto esteja pronto, ele aparecerá no seu painel, fornecendo a base para seu backend passo 2 – elaborando seu modelo de dados estabelecendo estruturas de dados para este aplicativo crud, você definirá várias coleções no back4app abaixo estão exemplos das principais coleções e campos que apoiarão suas funcionalidades crud 1\ coleção de itens esta coleção armazenará detalhes sobre cada item campo tipo de dados descrição id objectid identificador único gerado automaticamente título string o nome ou título do item descrição string um breve resumo descrevendo o item criadoem data timestamp para quando o item foi adicionado atualizadoem data timestamp da última modificação 2\ coleção de usuários esta coleção gerencia credenciais de usuário e informações de autenticação campo tipo de dados descrição id objectid identificador único gerado automaticamente nome de usuário string nome de usuário único para o usuário email string endereço de e mail único do usuário hashdasenha string senha hash para autenticação segura criadoem data timestamp para quando a conta foi criada atualizadoem data timestamp para quando a conta foi atualizada você pode criar essas coleções e adicionar campos diretamente do painel do back4app criar nova classe para adicionar um novo campo, basta escolher um tipo de dado, inserir o nome do campo e definir valores padrão ou opções obrigatórias conforme necessário criar coluna usando o agente de ia back4app para geração de esquema o agente de ia integrado ao back4app pode gerar automaticamente seu esquema com base na sua descrição, simplificando a configuração inicial como usar o agente de ia acesse o agente de ia faça login no seu painel do back4app e encontre o agente de ia nas configurações do seu projeto descreva seu modelo de dados forneça uma explicação detalhada das coleções e campos que você precisa revise e confirme o agente de ia apresentará um esquema proposto verifique os detalhes e confirme a configuração exemplo de prompt create the following collections in my back4app project 1\) collection items \ fields \ id objectid (auto generated) \ title string \ description string \ createdat date (auto generated) \ updatedat date (auto updated) 2\) collection users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ passwordhash string \ createdat date (auto generated) \ updatedat date (auto updated) esse método assistido por ia acelera o processo e garante que seu esquema esteja perfeitamente adaptado às necessidades do seu aplicativo passo 3 – ativando o app admin e gerenciando operações crud visão geral do app admin o app admin do back4app fornece uma interface sem código que simplifica o gerenciamento de dados de backend seus recursos de arrastar e soltar tornam as operações crud—como adicionar, editar e excluir registros—mais intuitivas habilitando o app admin vá até o menu “mais” no seu painel do back4app selecione “app admin” e clique em “habilitar app admin ” configure sua conta de administrador inserindo suas credenciais isso também configurará funções (por exemplo, b4aadminuser ) e classes do sistema habilitar app admin após a ativação, faça login no app admin para gerenciar seus dados com facilidade painel do app admin executando tarefas crud via o app admin dentro do app admin, você pode inserir novos registros use o botão “adicionar registro” dentro de uma coleção (como itens) para criar novas entradas inspecionar e modificar registros clique em qualquer registro para ver seus detalhes e fazer edições excluir registros remova quaisquer registros que não sejam mais necessários esta interface intuitiva melhora muito sua experiência de gerenciamento de dados passo 4 – conectando seu aplicativo remix js com back4app agora que seu backend está configurado, é hora de integrar seu aplicativo remix js com o back4app usando chamadas de api rest no remix js como o sdk do parse não é tipicamente usado com o remix js, você realizará operações crud via requisições de api rest 1\ configurando seu projeto remix js se você ainda não fez isso, crie um novo projeto remix npx create remix\@latest siga as instruções para escolher seu alvo de implantação 2\ fazendo requisições de api a partir do remix crie arquivos de rota de api na app/routes diretório para lidar com operações crud por exemplo, você pode ter um arquivo chamado items server js que inclui funções para buscar, criar, atualizar e deletar itens exemplo buscando itens // app/routes/items server js import { json } from "@remix run/node"; export async function loader() { const response = await fetch("https //parseapi back4app com/classes/items", { method "get", headers { "x parse application id" "your application id", "x parse rest api key" "your rest api key", }, }); const data = await response json(); return json(data); } da mesma forma, você pode criar rotas post, put e delete para lidar com a criação, atualizações e deleções de itens 3\ conectando componentes de ui nos seus componentes remix, você pode usar hooks como useloaderdata para buscar dados e fetch funções de api ou ações para enviar dados de volta para o back4app por exemplo, no seu componente react // app/routes/items jsx import { useloaderdata, form } from "@remix run/react"; export default function items() { const data = useloaderdata(); return ( \<div> \<h1>items list\</h1> {data results map((item) => ( \<div key={item objectid}> \<h2>{item title}\</h2> \<p>{item description}\</p> \</div> ))} \<form method="post"> \<input type="text" name="title" placeholder="item title" required /> \<textarea name="description" placeholder="item description" required /> \<button type="submit">add item\</button> \</form> \</div> ); } integre chamadas de api semelhantes para operações de atualização e exclusão em suas ações remix passo 5 – protegendo seu backend implementando listas de controle de acesso (acls) fortaleça a segurança dos dados definindo acls para seus objetos por exemplo, para criar um item que é acessível apenas pelo seu criador // example api call to create a private item using acls async function createprivateitem(title, description, usersessiontoken) { const response = await fetch("https //parseapi back4app com/classes/items", { method "post", headers { "x parse application id" "your application id", "x parse rest api key" "your rest api key", "content type" "application/json", "x parse session token" usersessiontoken, }, body json stringify({ title, description, acl { " " { "read" false, "write" false }, "user object id" { "read" true, "write" true } }, }), }); return response json(); } permissões em nível de classe (clps) ajuste os clps no seu painel do back4app para impor políticas de segurança padrão, garantindo que apenas usuários autenticados possam acessar coleções específicas passo 6 – adicionando autenticação de usuário configurando a gestão de usuários back4app utiliza a classe de usuário embutida do parse para gerenciar a autenticação em sua aplicação remix, gerencie o registro e login de usuários usando chamadas de api exemplo endpoint de registro de usuário // app/routes/signup server js import { json, redirect } from "@remix run/node"; export async function action({ request }) { const formdata = await request formdata(); const username = formdata get("username"); const password = formdata get("password"); const email = formdata get("email"); const response = await fetch("https //parseapi back4app com/users", { method "post", headers { "x parse application id" "your application id", "x parse rest api key" "your rest api key", "content type" "application/json", }, body json stringify({ username, password, email }), }); if (!response ok) { throw new error("signup failed"); } return redirect("/login"); } implemente endpoints semelhantes para login, gerenciamento de sessão e redefinições de senha passo 7 – implantando sua aplicação remix js back4app suporta implantação sem costura você pode implantar seu aplicativo remix js usando várias estratégias, incluindo docker 7 1 construindo sua aplicação remix js compilar e agrupar use seu gerenciador de pacotes e scripts de construção (por exemplo, via npm run build ) para compilar seu aplicativo verifique a saída certifique se de que a saída da sua construção contenha todos os arquivos necessários 7 2 exemplo de estrutura de projeto um projeto típico remix js pode parecer basic crud app remix/ \| app/ \| | routes/ \| | | items jsx \| | | items server js \| | | signup server js \| | components/ \| | itemform jsx \| public/ \| package json \| remix config js \| readme md 7 1 construindo sua aplicação remix js 7 3 dockerizando sua aplicação se você escolher a containerização, adicione um dockerfile na raiz do seu projeto \# use an official node js runtime as a base from node 16 alpine \# set the working directory in the container workdir /app \# copy package files and install dependencies copy package json package lock json / run npm install \# copy the rest of the application code copy \# build the remix app run npm run build \# expose the port the app runs on expose 3000 \# start the application cmd \["npm", "start"] 7 4 implantando via implantação web back4app conecte seu repositório hospede seu código fonte remix js no github configure a implantação no seu painel do back4app, selecione a implantação web funcionalidade, vincule seu repositório (por exemplo, basic crud app remix ) e escolha o branch correto defina os comandos de construção e saída especifique seu comando de construção (como npm run build ) e o diretório de saída implante seu app clique em implantar e monitore os logs até que seu app esteja ao vivo passo 8 – conclusão e direções futuras bem feito! você agora construiu uma aplicação crud usando remix js integrado com back4app neste guia, você configurou um projeto chamado basic crud app remix , definiu coleções para itens e usuários, e gerenciou dados através do back4app admin app você então conectou seu aplicativo remix js ao back4app via chamadas de api rest, e implementou autenticação de usuário segura e medidas de proteção de dados próximos passos aprimore seu aplicativo considere adicionar mais recursos como funcionalidade de busca, visualizações detalhadas de itens ou atualizações em tempo real expanda as capacidades do backend considere funções em nuvem, integrações de api externas ou controle de acesso mais avançado continue aprendendo visite a documentação do back4app https //www back4app com/docs e explore tutoriais adicionais de remix js para otimizar ainda mais seu aplicativo feliz codificação e melhores desejos em sua jornada com remix js!