How to Build a Basic CRUD App with Marko? A Step-by-Step Guide

descripción general esta guía te lleva a través de la creación de una aplicación crud completa (crear, leer, actualizar, eliminar) utilizando marko y back4app en este tutorial, configurarás un proyecto—llamado basic crud app marko —en back4app, diseñarás un esquema de base de datos robusto e integrarás tu frontend de marko con la api de back4app el tutorial también explica cómo asegurar tu backend y desplegar tu aplicación para uso en producción lo que aprenderás cómo construir aplicaciones crud que gestionen datos de manera eficiente utilizando un backend confiable consejos para diseñar un esquema escalable y vincularlo a un frontend basado en marko utilizar la interfaz de administración fácil de usar de back4app para gestionar datos sin esfuerzo estrategias de despliegue, incluyendo la contenedorización con docker, para lanzar tu aplicación web requisitos previos antes de comenzar, asegúrate de tener una cuenta de back4app y un nuevo proyecto sigue las instrucciones en introducción a back4app https //www back4app com/docs/get started/new parse app si es necesario un entorno de desarrollo marko configurado usa el cli de marko o tu método de configuración preferido asegúrate de que node js (v14 o posterior) esté instalado conocimientos básicos de javascript, marko y apis rest visita la documentación de marko https //markojs com/docs/ para más detalles paso 1 – configurando tu proyecto iniciando un nuevo proyecto en back4app inicia sesión en tu cuenta de back4app selecciona “nueva app” en tu panel de control ingresa el nombre del proyecto basic crud app marko y sigue las indicaciones en pantalla crear nuevo proyecto tu nuevo proyecto aparecerá ahora en tu panel de back4app, sentando las bases para tu backend paso 2 – creando el esquema de tu base de datos construyendo tu modelo de datos para esta aplicación crud, crearás un par de colecciones a continuación se presentan ejemplos de colecciones con campos sugeridos para ayudarte a diseñar un esquema de base de datos práctico 1\ colección productos esta colección contendrá detalles sobre cada producto campo tipo detalles id objectid identificador primario generado automáticamente nombre cadena el nombre del producto detalles cadena una breve descripción del producto creado en fecha marca de tiempo que indica la creación del producto actualizado en fecha marca de tiempo de la última actualización 2\ colección usuarios esta colección contiene datos de usuario y autenticación campo tipo detalles id objectid identificador único generado automáticamente nombre de usuario cadena un nombre único para el usuario correo electrónico cadena una dirección de correo electrónico única contraseña cadena una versión hash de la contraseña del usuario creado en fecha marca de tiempo de creación del registro actualizado en fecha última marca de tiempo modificada puedes definir manualmente estas colecciones en el panel de control de back4app creando una nueva clase para cada colección y luego agregando las columnas apropiadas crear nueva clase puedes agregar campos rápidamente eligiendo un tipo, nombrando tu columna, estableciendo valores predeterminados y marcándola como requerida si es necesario crear columna utilizando el agente ai de back4app para la creación de esquemas el agente ai de back4app simplifica el diseño de esquemas generando definiciones de colecciones y campos basadas en tu solicitud esta función ahorra tiempo y asegura consistencia en la configuración de tu base de datos cómo usar el agente ai accede al agente ai navega a tu panel de back4app y encuentra el agente ai en la configuración de tu proyecto describe tu esquema proporciona una solicitud detallada describiendo las colecciones y campos que necesitas revisa e implementa después de la generación, revisa el esquema sugerido y aplica los cambios ejemplo de solicitud create the following collections for my back4app project 1\) collection products \ fields \ id objectid (auto generated) \ name string \ details 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 string \ created at date (auto generated) \ updated at date (auto updated) este enfoque agiliza tu proceso de creación de esquemas paso 3 – activando la interfaz de administrador y funcionalidad crud introduciendo la interfaz de administrador la aplicación de administrador de back4app es una interfaz sin código que hace que la gestión de datos sea sencilla sus características de arrastrar y soltar te permiten agregar, modificar, ver o eliminar registros fácilmente habilitando la interfaz de administrador ve a la sección “más” en tu panel de back4app selecciona “admin app” y luego haz clic en “habilitar admin app ” configura las credenciales de administrador crea tu primera cuenta de administrador que también asignará roles del sistema como b4aadminuser habilitar admin app una vez activado, inicia sesión en la admin app para gestionar tu backend panel de admin app gestionando operaciones crud a través de la interfaz de administración dentro de la admin app puedes agregar nuevas entradas usa la opción “agregar registro” en una colección (por ejemplo, productos) ver/modificar registros haz clic en cualquier entrada para revisar o actualizar sus detalles eliminar entradas utiliza la función de eliminar para quitar registros obsoletos esta interfaz simplificada mejora la experiencia del usuario al simplificar las tareas de gestión de datos paso 4 – conectando marko con back4app ahora que tu backend está configurado, es hora de integrar tu frontend de marko con back4app usando la api opción a empleando la api utilizarás llamadas a la api rest para ejecutar operaciones crud en tu aplicación marko ejemplo recuperando datos a través de rest // in a marko component script file (e g , fetchproducts marko) import { onmount } from 'marko/src/runtime/client'; onmount(async () => { try { const response = await fetch('https //parseapi back4app com/classes/products', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); const data = await response json(); console log('products ', data results); } catch (error) { console error('failed to fetch products ', error); } }); este fragmento de código muestra cómo obtener datos de productos de back4app utilizando una llamada a la api rest paso 5 – protegiendo tu backend configurando controles de acceso mejora la seguridad aplicando listas de control de acceso (acl) a tus registros por ejemplo, para crear una entrada de producto privada async function createsecureproduct(productdata, owner) { const product = { name productdata name, details productdata details }; // setup acl only the owner has read/write privileges product acl = { " " { read false, write false }, \[owner id] { read true, write true } }; try { const response = await fetch('https //parseapi back4app com/classes/products', { 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(product) }); const result = await response json(); console log('secure product created ', result); } catch (error) { console error('error creating product ', error); } } configurando permisos predeterminados utiliza el panel de control de back4app para configurar permisos a nivel de clase (clps) para cada colección, asegurando que solo los usuarios autorizados puedan acceder a datos sensibles paso 6 – configuración de autenticación de usuarios creando cuentas de usuario back4app emplea una clase de usuario para la autenticación en tu aplicación marko, implementa el registro e inicio de sesión de usuarios de esta manera // in a marko component script (e g , auth marko) import { onmount } from 'marko/src/runtime/client'; async function registeruser(username, email, password) { const userdata = { username, email, password }; try { 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(userdata) }); const result = await response json(); console log('user registered ', result); } catch (error) { console error('registration error ', error); } } este fragmento demuestra un flujo simple de registro de usuario utilizando llamadas rest paso 7 – desplegando tu frontend de marko la función de despliegue web de back4app te permite alojar tu proyecto marko directamente desde un repositorio de github 7 1 – construyendo tu versión de producción abre tu directorio de proyecto en una terminal ejecuta el comando de construcción npm run build esto produce un directorio de construcción con tus archivos estáticos optimizados confirma la construcción verifica que la carpeta de construcción incluya un index html y todos los directorios de activos 7 2 – organizando y subiendo tu código tu repositorio debe contener el código fuente completo de tu proyecto marko un diseño típico de directorio podría verse así basic crud app marko frontend/ ├── node modules/ ├── public/ │ └── index html ├── src/ │ ├── components/ │ │ ├── fetchproducts marko │ │ └── auth marko │ ├── app marko │ └── api js ├── package json └── readme md ejemplo src/api js // src/api js export const api headers = { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }; export async function fetchproducts() { const response = await fetch('https //parseapi back4app com/classes/products', { headers api headers }); const data = await response json(); return data results; } comprometiéndose a github inicializa git (si es necesario) git init prepara tus archivos git add confirma tus cambios git commit m "compromiso inicial para el frontend crud de marko" crea y sube a tu repositorio de github por ejemplo, usa un repositorio llamado basic crud app marko frontend 7 3 – vinculando github con el despliegue web accede al despliegue web inicia sesión en back4app, ve a tu proyecto (basic crud app marko) y abre la sección de despliegue web conecta tu cuenta de github sigue las instrucciones para vincular tu cuenta de github selecciona el repositorio y la rama elige el repositorio (por ejemplo, basic crud app marko frontend ) y la rama (por ejemplo, main ) para desplegar 7 4 – configurando el despliegue establecer parámetros adicionales comando de construcción si no existe una carpeta de construcción , establece un comando de construcción (por ejemplo, npm run build ) directorio de salida especifica construcción como la carpeta de salida variables de entorno ingresa cualquier variable necesaria (como claves api) 7 5 – contenerizando con docker si prefieres docker, incluye un dockerfile en tu repositorio de proyecto \# use a node image for building the app from node 16 alpine as build \# set working directory workdir /app \# install dependencies copy package json / run npm install \# copy all files and build the app copy run npm run build \# use nginx to serve the build from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] en tus configuraciones de despliegue, elige la opción de despliegue de docker 7 6 – desplegando tu aplicación presiona el botón desplegar back4app tomará tu repositorio, ejecutará la construcción y desplegará tu aplicación monitorea el proceso observa los registros de despliegue para cualquier problema de construcción o en tiempo de ejecución accede a tu sitio una vez desplegado, back4app proporciona una url para tu aplicación marko alojada 7 7 – confirmando tu despliegue abre la url proporcionada verifica que tu aplicación se cargue correctamente navega por la aplicación verifica que todas las páginas se carguen y que las funcionalidades crud operen como se espera soluciona problemas si es necesario utiliza las herramientas de desarrollador del navegador y los registros de back4app para abordar cualquier problema paso 8 – reflexiones finales y mejoras futuras ¡gran trabajo! ahora has construido una aplicación crud completa con marko y back4app has configurado un proyecto llamado basic crud app marko , creado colecciones detalladas para productos y usuarios, gestionado datos a través de una intérface de administración intuitiva, integrado tu frontend de marko usando apis rest, y asegurado tu backend con controles robustos próximos pasos mejora tu ui considera agregar características avanzadas como páginas de detalles de productos, funcionalidades de búsqueda y notificaciones en vivo expande las capacidades del backend investiga la integración de funciones sin servidor o apis de terceros para mayor funcionalidad profundiza tu conocimiento consulta la documentación de back4app https //www back4app com/docs y tutoriales adicionales para obtener más información sobre la optimización del rendimiento y las integraciones personalizadas ¡feliz codificación con marko y back4app!