How to Create a CRUD Application with Remix?

descripción general en este tutorial, aprenderás cómo construir una aplicación crud (crear, leer, actualizar, eliminar) utilizando remix js usaremos back4app como nuestro servicio backend para manejar el almacenamiento de datos sin problemas esta guía cubre la configuración de un proyecto de back4app, el diseño de un esquema de datos dinámico y la conexión de operaciones crud en tu aplicación remix js inicialmente, configurarás un proyecto de back4app, que llamaremos basic crud app remix , proporcionando un almacén de datos no relacional escalable luego crearás un modelo de datos estableciendo manualmente colecciones y campos a través del panel de control de back4app, o incluso usar el agente ai integrado para una configuración automatizada a continuación, explorarás la aplicación administrativa de back4app, una interfaz fácil de usar que te permite gestionar tus datos fácilmente utilizando operaciones de arrastrar y soltar finalmente, conectarás tu aplicación remix js a back4app a través de llamadas a la api rest, asegurando que tus funcionalidades crud, junto con la autenticación de usuarios, sean robustas y seguras al final de este tutorial, tendrás una aplicación remix js lista para producción capaz de realizar operaciones crud básicas junto con una gestión de usuarios segura lo que aprenderás cómo construir una aplicación crud con remix js y un backend confiable mejores prácticas para estructurar tu backend e integrarlo con un frontend de remix js cómo usar la aplicación back4app admin para simplificar las tareas de gestión de datos técnicas para desplegar tu aplicación remix js, incluyendo la contenedorización con docker requisitos previos antes de comenzar, asegúrate de tener una cuenta de back4app con un nuevo proyecto listo ¿necesitas ayuda? visita introducción a back4app https //www back4app com/docs/get started/new parse app un entorno de desarrollo de remix js en funcionamiento puedes usar cualquier editor de código moderno como vs code node js (versión 14 o posterior) debe estar instalado conocimientos básicos de javascript, react y apis restful para un repaso, consulta la documentación de remix https //remix run/docs paso 1 – configurando tu proyecto lanzando un nuevo proyecto en back4app inicia sesión en tu cuenta de back4app haz clic en el botón “nueva app” desde tu panel de control nombra tu proyecto basic crud app remix y sigue los pasos para completar el proceso de creación crear nuevo proyecto una vez que tu proyecto esté listo, aparecerá en tu panel de control, proporcionando la base para tu backend paso 2 – creando tu modelo de datos estableciendo estructuras de datos para esta aplicación crud, definirás varias colecciones en back4app a continuación se presentan ejemplos de las principales colecciones y campos que apoyarán tus funcionalidades crud 1\ colección de artículos esta colección almacenará detalles sobre cada artículo campo tipo de dato descripción id objectid identificador único generado automáticamente título cadena el nombre o título del artículo descripción cadena un breve resumen que describe el artículo creadoen fecha marca de tiempo de cuando se agregó el elemento actualizadoen fecha marca de tiempo para la última modificación 2\ colección de usuarios esta colección gestiona las credenciales de usuario y la información de autenticación campo tipo de dato descripción id objectid identificador único generado automáticamente nombre de usuario cadena nombre de usuario único para el usuario correo electrónico cadena dirección de correo electrónico única del usuario hashdecontraseña cadena contraseña hash para una autenticación segura creadoen fecha marca de tiempo de cuando se creó la cuenta actualizadoen fecha marca de tiempo de cuando se actualizó la cuenta puedes crear estas colecciones y agregar campos directamente desde el panel de control de back4app crear nueva clase para agregar un nuevo campo, simplemente elige un tipo de dato, ingresa el nombre del campo y establece valores predeterminados u opciones obligatorias según sea necesario crear columna uso del agente ai de back4app para la generación de esquemas el agente de ia integrado en back4app puede generar automáticamente tu esquema basado en tu descripción, agilizando la configuración inicial cómo usar el agente de ia accede al agente de ia inicia sesión en tu panel de back4app y encuentra el agente de ia en la configuración de tu proyecto describe tu modelo de datos proporciona una explicación detallada de las colecciones y campos que necesitas revisa y confirma el agente de ia presentará un esquema propuesto verifica los detalles y confirma la configuración ejemplo de solicitud 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) este método asistido por ia acelera el proceso y asegura que tu esquema esté perfectamente adaptado a las necesidades de tu aplicación paso 3 – activar la aplicación de administración y manejar operaciones crud descripción general de la aplicación de administración la aplicación de administración de back4app proporciona una interfaz sin código que simplifica la gestión de datos en el backend sus características de arrastrar y soltar hacen que las operaciones crud—como agregar, editar y eliminar registros—sean más intuitivas habilitando la aplicación de administración dirígete al menú “más” en tu panel de back4app selecciona “aplicación de administración” y haz clic en “habilitar aplicación de administración ” configura tu cuenta de administrador ingresando tus credenciales esto también configurará roles (por ejemplo, b4aadminuser ) y clases del sistema habilitar aplicación de administración después de la activación, inicia sesión en la aplicación de administración para gestionar tus datos con facilidad panel de control de la aplicación de administración realizando tareas crud a través de la aplicación de administración dentro de la aplicación de administración, puedes insertar nuevos registros usa el botón “agregar registro” dentro de una colección (como artículos) para crear nuevas entradas inspeccionar y modificar registros haz clic en cualquier registro para ver sus detalles y hacer ediciones eliminar registros elimina cualquier registro que ya no sea necesario esta interfaz intuitiva mejora enormemente tu experiencia de gestión de datos paso 4 – conectando tu aplicación remix js con back4app ahora que tu backend está configurado, es hora de integrar tu aplicación remix js con back4app usando llamadas a la api rest en remix js dado que el sdk de parse no se utiliza típicamente con remix js, realizarás operaciones crud a través de solicitudes a la api rest 1\ configurando tu proyecto remix js si aún no lo has hecho, crea un nuevo proyecto remix npx create remix\@latest sigue las indicaciones para elegir tu objetivo de implementación 2\ haciendo solicitudes a la api desde remix crea archivos de ruta de api en el app/routes directorio para manejar operaciones crud por ejemplo, podrías tener un archivo llamado items server js que incluya funciones para obtener, crear, actualizar y eliminar elementos ejemplo obteniendo elementos // 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); } de manera similar, puedes crear rutas post, put y delete para manejar la creación, actualización y eliminación de elementos 3\ conectando componentes de ui en tus componentes de remix, puedes usar hooks como useloaderdata para obtener datos y fetch funciones de api o acción para enviar datos de vuelta a back4app por ejemplo, en tu componente de 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> ); } integra llamadas a la api similares para operaciones de actualización y eliminación en tus acciones de remix paso 5 – asegurando tu backend implementación de listas de control de acceso (acls) fortalece la seguridad de los datos estableciendo acls para tus objetos por ejemplo, para crear un artículo que sea accesible solo por su creador // 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(); } permisos a nivel de clase (clps) ajusta los clps en tu panel de back4app para hacer cumplir políticas de seguridad predeterminadas, asegurando que solo los usuarios autenticados puedan acceder a colecciones específicas paso 6 – agregando autenticación de usuario configurando la gestión de usuarios back4app utiliza la clase de usuario integrada de parse para gestionar la autenticación en tu aplicación remix, maneja el registro y el inicio de sesión de usuarios utilizando llamadas a la api ejemplo endpoint de registro de usuario // 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"); } implementa endpoints similares para el inicio de sesión, la gestión de sesiones y los restablecimientos de contraseña paso 7 – desplegando tu aplicación remix js back4app soporta un despliegue sin problemas puedes desplegar tu aplicación remix js utilizando varias estrategias, incluyendo docker 7 1 construyendo tu aplicación remix js compilar y agrupar usa tu gestor de paquetes y scripts de construcción (por ejemplo, a través de npm run build ) para compilar tu aplicación verificar la salida asegúrate de que la salida de tu construcción contenga todos los archivos necesarios 7 2 ejemplo de estructura del proyecto un proyecto típico de remix js puede verse así 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 construyendo tu aplicación remix js 7 3 dockerizando tu aplicación si eliges la contenedorización, añade un dockerfile en la raíz de tu proyecto \# 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 despliegue a través de back4app web deployment conecta tu repositorio aloja tu código fuente de remix js en github configura el despliegue en tu panel de back4app, selecciona la web deployment característica, vincula tu repositorio (por ejemplo, basic crud app remix ), y elige la rama correcta establece los comandos de construcción y salida especifica tu comando de construcción (como npm run build ) y el directorio de salida despliega tu aplicación haz clic en desplegar y monitorea los registros hasta que tu aplicación esté en línea paso 8 – conclusiones y direcciones futuras ¡bien hecho! ahora has construido una aplicación crud utilizando remix js integrado con back4app en esta guía, configuraste un proyecto llamado basic crud app remix , definiste colecciones para items y usuarios, y gestionaste datos a través de la aplicación de administración de back4app luego conectaste tu aplicación remix js a back4app a través de llamadas a la api rest, e implementaste medidas de autenticación de usuarios seguras y protección de datos próximos pasos mejora tu aplicación considera agregar más funciones como funcionalidad de búsqueda, vistas detalladas de los elementos o actualizaciones en tiempo real expande las capacidades del backend investiga funciones en la nube, integraciones de api externas o control de acceso más avanzado sigue aprendiendo visita la documentación de back4app https //www back4app com/docs y explora tutoriales adicionales de remix js para optimizar aún más tu aplicación ¡feliz codificación y los mejores deseos en tu viaje con remix js!