Construyendo una Aplicación CRUD Básica con Mithril.js: Un Tutorial Detallado

descripción general esta guía te lleva a través de la creación de una aplicación crud (crear, leer, actualizar y eliminar) utilizando mithril js a lo largo de este tutorial, aprenderás a configurar un proyecto de back4app titulado basic crud app mithriljs para servir como un potente backend para tu aplicación web diseñaremos un esquema de datos eficiente, lo gestionaremos a través del panel de administración de back4app e integraremos tu frontend de mithril js utilizando llamadas a la api rest lo que aprenderás cómo configurar un sistema crud que maneje datos de manera confiable utilizando un backend robusto estrategias para construir un diseño de base de datos escalable y vincularlo a una aplicación mithril js utilizar la interfaz de administración intuitiva de arrastrar y soltar de back4app para realizar acciones crud métodos de implementación, incluida la contenedorización con docker, para poner tu aplicación en línea rápidamente requisitos antes de comenzar, por favor confirma que tienes una cuenta de back4app y un proyecto activo para asistencia, consulta introducción a back4app https //www back4app com/docs/get started/new parse app un entorno de desarrollo de mithril js puedes incluir mithril a través de npm o un cdn asegúrate de tener node js (v14+) instalado conocimientos fundamentales de javascript, mithril js y apis restful para orientación adicional, consulta la documentación de mithril js https //mithril js org/ paso 1 – inicializando tu proyecto configurando un nuevo proyecto en back4app inicia sesión en tu cuenta de back4app haz clic en el nuevo app botón desde tu panel proporciona el nombre del proyecto basic crud app mithriljs y sigue los pasos guiados crear nuevo proyecto una vez configurado, tu proyecto aparecerá en tu panel, sirviendo como el centro de backend para tu aplicación paso 2 – creando el esquema de tu base de datos construyendo el modelo de datos para esta aplicación crud, diseñarás un par de colecciones clave a continuación se presenta un esquema para crear colecciones con sus respectivos campos para manejar eficazmente las operaciones crud 1\ colección de artículos esta colección contiene los detalles de cada artículo campo tipo propósito id objectid identificador único generado automáticamente título cadena nombre o título del artículo descripción cadena resumen breve sobre el artículo creado en fecha marca de tiempo de creación actualizado en fecha marca de tiempo para la última actualización 2\ colección de usuarios esta colección gestiona los perfiles de usuario y los detalles de autenticación campo tipo propósito id objectid identificador único generado automáticamente nombre de usuario cadena nombre único del usuario correo electrónico cadena dirección de correo electrónico única del usuario hash de contraseña cadena contraseña hash para una autenticación segura creado en fecha marca de tiempo cuando el usuario fue registrado actualizado en fecha marca de tiempo para cualquier modificación puedes agregar manualmente estas colecciones y campos a través del panel de control de back4app creando nuevas clases y definiendo cada columna en consecuencia crear nueva clase para agregar campos, simplemente selecciona el tipo de dato apropiado, proporciona un nombre, establece valores predeterminados y marca si es obligatorio crear columna aprovechando el agente de ia de back4app para la automatización de esquemas el agente de ia integrado en back4app simplifica la creación de esquemas al generar automáticamente tus colecciones basadas en un aviso proporcionado cómo utilizar el agente de ia accede al agente de ia desde el panel de control de tu proyecto describe tu esquema deseado detallando las colecciones y campos revisa el esquema generado y aplica los cambios ejemplo de aviso create the following collections in my back4app project 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) esta herramienta ayuda a garantizar que el diseño de tu base de datos sea tanto consistente como óptimo para manejar operaciones crud paso 3 – activar la interfaz de administración y funcionalidades crud descripción general de la interfaz de administración la interfaz de administración de back4app es una solución sin código diseñada para ayudarte a gestionar tus datos de backend sin esfuerzo su diseño de arrastrar y soltar hace que realizar operaciones crud sea muy fácil cómo habilitar la interfaz de administración dirígete a la más sección en tu panel de control de back4app haz clic en aplicación de administración y luego selecciona habilitar aplicación de administración configura tus credenciales de administrador para crear tu primer usuario administrador este proceso también configura roles (como b4aadminuser ) y colecciones del sistema habilitar aplicación de administración después de la activación, inicie sesión en la interfaz de administración para gestionar sus colecciones panel de control de la aplicación administrativa realizando operaciones crud a través de la interfaz de administración agregar nuevos registros utilice la opción “agregar registro” en cualquier colección (por ejemplo, artículos) para crear entradas ver/modificar registros haga clic en un registro para inspeccionar detalles o editar sus campos eliminar registros utilice la función de eliminar para borrar entradas obsoletas esta interfaz intuitiva mejora la experiencia del usuario al simplificar las acciones rutinarias de crud paso 4 – vinculando mithril js con back4app con su backend listo y gestionado a través de la interfaz de administración, es hora de conectar su frontend de mithril js a back4app utilizando llamadas a la api rest usando llamadas a la api rest con mithril js confiamos en las llamadas a la api rest para interactuar con su backend de back4app ejemplo recuperando y mostrando artículos cree un componente de mithril que recupere artículos de la colección de artículos // src/components/itemslist js const itemslist = { items \[], loaditems async function() { 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(); itemslist items = data results; } catch (error) { console error('error retrieving items ', error); } }, oninit function() { itemslist loaditems(); }, view function() { return m('div', \[ m('h2', 'items'), m('ul', itemslist items map(item => m('li', { key item objectid }, `${item title} — ${item description}` ) ) ) ]); } }; export default itemslist; este componente emplea el método del ciclo de vida de mithril oninit para cargar datos cuando se inicializa el componente ejemplo agregar un nuevo elemento puedes integrar un formulario para enviar una solicitud post para agregar nuevos elementos // src/components/additem js const additem = { title '', description '', submititem async function() { try { 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 additem title, description additem description }) }); const data = await response json(); console log('item added ', data); // optionally, refresh the list or redirect the user } catch (error) { console error('error adding item ', error); } }, view function() { return m('div', \[ m('h2', 'add item'), m('input\[type=text]', { placeholder 'title', oninput m withattr('value', value => additem title = value), value additem title }), m('input\[type=text]', { placeholder 'description', oninput m withattr('value', value => additem description = value), value additem description }), m('button', { onclick additem submititem }, 'add item') ]); } }; export default additem; puedes implementar de manera similar operaciones de actualización y eliminación utilizando los métodos http correspondientes (put/patch para actualizaciones y delete para eliminaciones) paso 5 – mejorando la seguridad del backend implementando controles de acceso asegura tus datos aplicando listas de control de acceso (acl) a cada objeto por ejemplo, para crear un elemento que solo el propietario pueda modificar async function createsecureitem(itemdata, ownerid) { try { 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 itemdata title, description itemdata description, acl { \[ownerid] { read true, write true }, " " { read false, write false } } }) }); const data = await response json(); console log('secure item created ', data); } catch (error) { console error('error creating secure item ', error); } } configuración de permisos a nivel de clase (clps) dentro de tu panel de back4app, ajusta los clps para cada colección para definir políticas de seguridad predeterminadas esto asegura que solo los usuarios autorizados tengan acceso a información sensible paso 6 – configuración de autenticación de usuario configurando cuentas de usuario back4app utiliza la clase de usuario de parse para gestionar la autenticación con mithril js, puedes gestionar el registro y el inicio de sesión a través de llamadas a la api rest a continuación se muestra un ejemplo para el registro de usuarios // src/components/auth js const auth = { username '', email '', password '', signup async function() { 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 auth username, email auth email, password auth password }) }); const data = await response json(); alert('user registered successfully!'); } catch (error) { alert('registration error ' + error message); } }, view function() { return m('form', { onsubmit function(e) { e preventdefault(); auth signup(); } }, \[ m('input\[type=text]', { placeholder 'username', oninput m withattr('value', value => auth username = value), value auth username }), m('input\[type=email]', { placeholder 'email', oninput m withattr('value', value => auth email = value), value auth email }), m('input\[type=password]', { placeholder 'password', oninput m withattr('value', value => auth password = value), value auth password }), m('button', { type 'submit' }, 'sign up') ]); } }; export default auth; puedes adoptar un método similar para iniciar sesión y gestionar sesiones paso 7 – desplegando tu frontend de mithril js la función de despliegue web de back4app te permite alojar tu aplicación de mithril js sin problemas al vincular tu repositorio de github 7 1 construyendo la versión de producción abre tu directorio de proyecto en una terminal ejecuta el comando de construcción npm run build esto generará una build carpeta que contiene archivos estáticos optimizados 7 2 organizando y cometiendo tu código tu repositorio debería tener una estructura similar a basic crud app mithriljs frontend/ ├── node modules/ ├── public/ │ └── index html ├── src/ │ ├── index js │ ├── components/ │ │ ├── itemslist js │ │ ├── additem js │ │ └── auth js │ └── app js ├── package json └── readme md ejemplo src/index js import m from "mithril"; import itemslist from " /components/itemslist"; import additem from " /components/additem"; import auth from " /components/auth"; // define a simple routing system m route(document body, "/", { "/" { view function() { return m("div", \[ m(itemslist), m(additem), m(auth) ]); } } }); comprometiendo y empujando a github inicializa git (si no lo has hecho ya) git init agrega tus archivos git add confirma los cambios git commit m "initial commit of mithril js frontend" crea un repositorio en github (por ejemplo, basic crud app mithriljs frontend ) y empuja tu código git remote add origin https //github com/your username/basic crud app mithriljs frontend git git push u origin main 7 3 vinculando github con el despliegue web inicia sesión en tu panel de back4app, navega a tu proyecto ( basic crud app mithriljs ), y selecciona despliegue web conecta tu cuenta de github siguiendo las indicaciones en pantalla elige tu repositorio y rama (por ejemplo, main ) que contiene tu código fuente de mithril js 7 4 configurando las configuraciones de despliegue configura comando de construcción especifica npm run build si la carpeta de construcción no está presente directorio de salida establece esto en build para apuntar a tus activos estáticos variables de entorno agrega cualquier clave api o configuración necesaria 7 5 dockerizando tu aplicación (opcional) si prefieres la contenedorización, incluye un dockerfile \# use an official node image for building from node 16 alpine as builder workdir /app copy package json / run npm install copy run npm run build \# serve using nginx from nginx\ stable alpine copy from=builder /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] 7 6 desplegando tu aplicación haz clic en el desplegar botón en la sección de despliegue web de back4app monitorea el proceso de construcción mientras back4app extrae, construye y despliega tu aplicación una vez completado, recibirás una url para tu aplicación mithril js en vivo 7 7 verificando el despliegue abre la url proporcionada en tu navegador confirma que tu aplicación se carga, que las navegaciones funcionan y que los activos se sirven correctamente utiliza las herramientas de desarrollo del navegador para solucionar problemas si es necesario paso 8 – conclusiones y direcciones futuras ¡bien hecho! has construido con éxito una aplicación crud básica con mithril js integrada con back4app has configurado un proyecto llamado basic crud app mithriljs , definido tu esquema de base de datos para items y users, y gestionado tu backend a través de la interfaz de administración además, conectaste tu frontend de mithril js utilizando llamadas a la api rest y aplicaste medidas de seguridad para proteger tus datos ¿qué sigue? mejorar el frontend agrega características como vistas detalladas, capacidades de búsqueda o actualizaciones en vivo ampliar funciones del backend explora funciones en la nube, integraciones adicionales de api o permisos basados en roles aprender más profundiza en la documentación de back4app https //www back4app com/docs y guías de mithril js para mejoras avanzadas ¡feliz codificación y buena suerte con tu proyecto!