Construyendo una aplicación CRUD con Inferno.js: Una guía completa

descripción general esta guía te mostrará cómo construir una aplicación crud (crear, leer, actualizar, eliminar) completa utilizando inferno js aprenderás a manejar operaciones de datos fundamentales desarrollando un sistema crud que manipula y actualiza información de manera eficiente nuestra base de backend está impulsada por back4app, donde establecerás un proyecto llamado basic crud app infernojs para gestionar tus datos sin problemas primero configurarás tu proyecto de back4app y diseñarás un esquema de base de datos escalable definiendo clases y campos, ya sea manualmente o con el asistente de ia de back4app este proceso asegura que tus estructuras de datos sean lo suficientemente robustas para todas las tareas crud después, utilizarás la interfaz de administración de back4app, una herramienta de arrastrar y soltar sin código que facilita la gestión de datos finalmente, vincularás tu frontend de inferno js con back4app utilizando el sdk (si se ajusta a tu configuración) o a través de llamadas a la api, todo mientras empleas controles de acceso estrictos para la seguridad al final de este tutorial, tendrás una aplicación web de nivel de producción con autenticación de usuarios, manejo dinámico de datos y una interfaz receptiva perspectivas clave domina las funcionalidades crud con un backend robusto en back4app entiende cómo arquitectar un esquema de base de datos escalable e integrarlo con tu frontend de inferno js explora una herramienta de gestión visual para ejecutar sin esfuerzo operaciones de crear, leer, actualizar y eliminar aprende estrategias de despliegue, incluyendo la contenedorización con docker requisitos una cuenta de back4app y un proyecto recién creado si necesitas orientación, consulta introducción a back4app https //www back4app com/docs/get started/new parse app una configuración de desarrollo de inferno js usa tu iniciador o plantilla favorita de inferno confirma que node js (versión 14 o más reciente) esté instalado un entendimiento básico de javascript, inferno js y principios de api rest para más detalles, consulta la documentación de inferno https //infernojs org/docs/introduction antes de comenzar, asegúrate de tener paso 1 – inicializando tu proyecto lanzando un nuevo proyecto en back4app inicia sesión en tu cuenta de back4app selecciona la opción “nueva aplicación” desde tu panel de control nombra tu proyecto basic crud app infernojs y sigue los pasos en pantalla para completar la creación crear nuevo proyecto después de la creación, tu proyecto aparece en tu panel de control, proporcionando una sólida plataforma backend para tu aplicación paso 2 – creando el esquema de la base de datos definiendo su modelo de datos para esta aplicación crud, establecerás varias clases a continuación se presentan ejemplos de dos clases esenciales con sus campos, configuradas para soportar operaciones crud 1\ la clase de artículos campo tipo detalles id objectid clave primaria generada automáticamente título cadena el título del artículo descripción cadena una breve explicación del artículo creado en fecha marca de tiempo que indica cuándo se creó el elemento actualizado en fecha marca de tiempo para la actualización más reciente 2\ la clase de usuarios campo tipo detalles id objectid clave primaria generada automáticamente nombre de usuario cadena identificador único para el usuario correo electrónico cadena la dirección de correo electrónico única del usuario hash de contraseña cadena contraseña encriptada para una autenticación segura creado en fecha marca de tiempo para la creación de la cuenta actualizado en fecha marca de tiempo para la última actualización de la cuenta crea manualmente estas clases en el panel de control de back4app seleccionando “nueva clase” y añadiendo las columnas necesarias crear nueva clase puedes definir cada campo seleccionando un tipo de dato, proporcionando un nombre y estableciendo valores predeterminados o requisitos crear columna aprovechando el asistente de ia de back4app para la configuración del esquema el asistente de ia de back4app simplifica la creación de esquemas al generar automáticamente clases basadas en tus descripciones cómo usar el asistente de ia accede al asistente de ia inicia sesión en tu panel de back4app y localiza el asistente de ia en la configuración detalla tu modelo de datos ingresa una descripción completa de las clases y campos que necesitas revisa e implementa el asistente propondrá definiciones de clases confirma y aplica estas configuraciones ejemplo de solicitud create the following classes in my back4app app 1\) class items \ fields \ id objectid (auto generated) \ title string \ description string \ created at date (auto set) \ updated at date (auto update) 2\) class users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ password hash string \ created at date (auto set) \ updated at date (auto update) usar el asistente de ia agiliza tu configuración, asegurando consistencia y eficiencia paso 3 – activando la interfaz de administrador y funciones crud introduciendo la interfaz de administrador la interfaz de administrador de back4app es una herramienta poderosa sin código que ofrece una experiencia de arrastrar y soltar para gestionar tu backend te permite ejecutar operaciones crud sin esfuerzo activando la interfaz de administración ve a la sección “más” en tu panel de back4app haz clic en “admin app” y luego presiona “habilitar admin app ” configura tu cuenta de administrador creando tu usuario administrador inicial este proceso configura automáticamente roles y clases del sistema esenciales habilitar admin app después de habilitar, inicia sesión en la interfaz de administración para gestionar tus datos panel de admin app realizando crud a través de la interfaz de administración dentro de la interfaz de administración, puedes crear entradas utiliza la opción “agregar registro” dentro de una clase (como artículos) para insertar nuevos datos leer/modificar entradas haz clic en cualquier registro para ver o actualizar sus detalles eliminar entradas utiliza la función de eliminar para borrar registros no deseados esta interfaz mejora enormemente la usabilidad al simplificar todas las tareas crud paso 4 – conectando inferno js con back4app con tu backend configurado a través de la interfaz de administración, es hora de integrar tu frontend de inferno js opción a utilizando el sdk de parse instala el sdk de parse npm install parse inicializa parse en tu aplicación inferno crea un archivo de configuración (por ejemplo, src/parseconfig js ) // src/parseconfig js import parse from 'parse'; // inserta tus credenciales de back4app aquí parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; implementa parse en un componente de inferno por ejemplo, construye un componente para recuperar y listar elementos // src/components/itemslist js import { component } from 'inferno'; import parse from ' /parseconfig'; class itemslist extends component { constructor(props) { super(props); this state = { items \[] }; } componentdidmount() { this loaditems(); } async loaditems() { const items = parse object extend("items"); const query = new parse query(items); try { const results = await query find(); this setstate({ items results }); } catch (err) { console error("error al cargar los elementos ", err); } } render() { return ( \<div> \<h2>elementos\</h2> \<ul> {this state items map(item => ( \<li key={item id}> {item get("title")} — {item get("description")} \</li> ))} \</ul> \</div> ); } } export default itemslist; opción b usando apis rest o graphql si el sdk de parse no es ideal para tu escenario, puedes ejecutar acciones crud a través de rest o graphql por ejemplo, para recuperar elementos con rest // rest api call to retrieve items 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(); console log('items retrieved ', data results); } catch (err) { console error('error fetching items ', err); } }; fetchitems(); incorpora estas llamadas a la api dentro de tus componentes de inferno según sea necesario paso 5 – fortaleciendo tu backend implementando listas de control de acceso (acls) asegura la seguridad de los datos asignando acls por ejemplo, para generar un elemento privado async function createprivateitem(itemdata, owner) { const items = parse object extend('items'); const item = new items(); item set('title', itemdata title); item set('description', itemdata description); // set acl so only the owner has access const acl = new parse acl(owner); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); item setacl(acl); try { const saveditem = await item save(); console log('private item created ', saveditem); } catch (err) { console error('error creating item ', err); } } configurando permisos a nivel de clase (clps) dentro de tu panel de back4app, ajusta los clps para cada clase para hacer cumplir las políticas de acceso predeterminadas, asegurando que solo los usuarios autorizados puedan interactuar con datos sensibles paso 6 – gestionando la autenticación de usuarios estableciendo cuentas de usuario back4app utiliza la clase de usuario (a través de parse) para manejar la autenticación en tu aplicación inferno js, implementa funciones de registro e inicio de sesión como se ilustra a continuación // src/components/auth js import { component } from 'inferno'; import parse from ' /parseconfig'; export class signup extends component { constructor(props) { super(props); this state = { username '', password '', email '' }; } handlesignup = async (e) => { e preventdefault(); const user = new parse user(); user set('username', this state username); user set('password', this state password); user set('email', this state email); try { await user signup(); alert('registration successful!'); } catch (err) { alert('sign up error ' + err message); } }; render() { return ( \<form onsubmit={this handlesignup}> \<input type="text" placeholder="username" value={this state username} oninput={e => this setstate({ username e target value })} /> \<input type="password" placeholder="password" value={this state password} oninput={e => this setstate({ password e target value })} /> \<input type="email" placeholder="email" value={this state email} oninput={e => this setstate({ email e target value })} /> \<button type="submit">sign up\</button> \</form> ); } } una estrategia similar se aplica para el inicio de sesión y la gestión de sesiones se pueden configurar características adicionales como autenticación social, verificación de correo electrónico y recuperación de contraseña en el panel de control de back4app paso 7 – desplegando tu frontend de inferno js la opción de despliegue web de back4app te permite alojar tu frontend de inferno js sin esfuerzo al vincular tu repositorio de github 7 1 construyendo para producción abre tu directorio de proyecto en una terminal ejecuta el comando de construcción de producción npm run build este comando compila tu aplicación en una carpeta de construcción que contiene activos estáticos optimizados confirma la construcción verifica que la carpeta de construcción incluya un archivo index html y otras carpetas de activos 7 2 organizando y subiendo tu código tu repositorio debe incluir el código fuente completo de tu frontend de inferno js una estructura de directorio de ejemplo basic crud app infernojs frontend/ \| node modules/ \| public/ \| ` index html \| src/ \| | app js \| | parseconfig js \| ` components/ \| | itemslist js \| ` auth js \| package json ` readme md archivos de ejemplo src/parseconfig js // src/parseconfig js import parse from 'parse'; // insert your back4app credentials here parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; src/app js // src/app js import { component } from 'inferno'; import parse from ' /parseconfig'; class app extends component { constructor(props) { super(props); this state = { items \[], newtitle "", newdescription "", editid null, edittitle "", editdescription "" }; } componentdidmount() { this loaditems(); } async loaditems() { const items = parse object extend("items"); const query = new parse query(items); try { const results = await query find(); this setstate({ items results }); } catch (err) { console error("error loading items ", err); } } handleadd = async () => { const items = parse object extend("items"); const item = new items(); item set("title", this state newtitle); item set("description", this state newdescription); try { await item save(); this setstate({ newtitle "", newdescription "" }); this loaditems(); } catch (err) { console error("error adding item ", err); } } handledelete = async (id) => { try { const item = await parse object createwithoutdata("items", id); await item destroy(); this loaditems(); } catch (err) { console error("error deleting item ", err); } } startedit = (item) => { this setstate({ editid item id, edittitle item get("title"), editdescription item get("description") }); } handleupdate = async () => { try { const items = parse object extend("items"); const item = new items(); item id = this state editid; item set("title", this state edittitle); item set("description", this state editdescription); await item save(); this setstate({ editid null, edittitle "", editdescription "" }); this loaditems(); } catch (err) { console error("error updating item ", err); } } render() { return ( \<div style={{ padding '2rem' }}> \<h1>items\</h1> \<div style={{ marginbottom '1rem' }}> \<h2>add new item\</h2> \<input type="text" placeholder="title" value={this state newtitle} oninput={e => this setstate({ newtitle e target value })} style={{ marginright '0 5rem' }} /> \<input type="text" placeholder="description" value={this state newdescription} oninput={e => this setstate({ newdescription e target value })} style={{ marginright '0 5rem' }} /> \<button onclick={this handleadd}>add item\</button> \</div> \<h2>items list\</h2> \<ul> {this state items map(item => ( \<li key={item id} style={{ marginbottom '1rem' }}> {this state editid === item id ? ( \<div> \<input type="text" value={this state edittitle} oninput={e => this setstate({ edittitle e target value })} style={{ marginright '0 5rem' }} /> \<input type="text" value={this state editdescription} oninput={e => this setstate({ editdescription e target value })} style={{ marginright '0 5rem' }} /> \<button onclick={this handleupdate}>save\</button> \<button onclick={() => this setstate({ editid null })} style={{ marginleft '0 5rem' }}> cancel \</button> \</div> ) ( \<div> \<strong>{item get("title")}\</strong> {item get("description")} \<button onclick={() => this startedit(item)} style={{ marginleft '1rem' }}> edit \</button> \<button onclick={() => this handledelete(item id)} style={{ marginleft '0 5rem' }}> delete \</button> \</div> )} \</li> ))} \</ul> \</div> ); } } export default app; subiendo tu código a github inicializa git en tu carpeta de proyecto git init prepara tus archivos git add confirma tus cambios git commit m "commit inicial para el frontend de inferno js" crea un repositorio en github nómbralo basic crud app infernojs frontend sube tu proyecto git remote add origin https //github com/tu nombre de usuario/basic crud app infernojs frontend git git push u origin main 7 3 conectando github con el despliegue web de back4app ir a despliegue web inicia sesión en back4app, selecciona tu proyecto ( basic crud app infernojs ), y haz clic en la función de despliegue web integrar con github sigue las instrucciones para vincular tu cuenta de github, permitiendo que back4app acceda a tu repositorio elige tu repositorio y rama selecciona el repositorio (por ejemplo, basic crud app infernojs frontend ) y la rama (típicamente main ) que contiene tu código 7 4 configuraciones de despliegue ingrese configuraciones adicionales comando de construcción si su repositorio carece de una carpeta de construcción , especifique un comando como npm run build back4app ejecutará esto durante el despliegue carpeta de salida establezca la salida en build para que back4app sepa dónde residen sus archivos estáticos variables de entorno agregue cualquier variable necesaria (como claves api) dentro de la configuración 7 5 dockerizando su aplicación si opta por la contenedorización, incluya un dockerfile en su repositorio similar a \# use an official node image for the build stage from node 16 alpine as build \# set the working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy remaining files and build the app copy run npm run build \# use nginx to serve the built app from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] seleccione la implementación de docker en back4app si elige este método 7 6 lanzando su aplicación haga clic en desplegar una vez que todas las configuraciones estén configuradas, presione el botón desplegar mire la construcción back4app obtendrá su código, construirá su proyecto y lo desplegará en un contenedor acceda a su aplicación después del despliegue, back4app proporciona una url donde su aplicación inferno js está activa 7 7 confirmando el despliegue visite la url proporcionada abra la url en su navegador pruebe la funcionalidad asegúrese de que la aplicación se cargue, todas las rutas funcionen correctamente y los activos (css, js, imágenes) se muestren como se espera solucionar problemas utilice herramientas de desarrollador para inspeccionar errores si aparecen problemas, verifique los registros de back4app y confirme la configuración de github paso 8 – conclusiones y direcciones futuras ¡felicidades! has creado una aplicación crud completa con inferno js y back4app configuraste el proyecto basic crud app infernojs , diseñaste tus clases de datos y utilizaste la intuitiva interfaz de administración para la gestión de datos tu frontend ahora está conectado y asegurado con controles de acceso robustos próximos pasos mejorar la ui expande tu aplicación inferno js con vistas detalladas, capacidades de búsqueda y notificaciones en vivo agregar más funciones considera implementar funciones adicionales en el backend (como cloud code), integrar apis de terceros o introducir acceso basado en roles explorar más sumérgete en la documentación de back4app https //www back4app com/docs y tutoriales adicionales para la optimización del rendimiento y las integraciones personalizadas ¡feliz codificación y buena suerte con tus futuros proyectos!