Cómo construir una aplicación CRUD básica con Riot.js: Una guía paso a paso

descripción general en esta guía, aprenderás a crear una aplicación crud (crear, leer, actualizar y eliminar) utilizando riot js pasaremos por la configuración de un proyecto back4app—llamado basic crud app riotjs —para servir como tu backend, y luego lo integraremos con un frontend de riot js este tutorial cubre todo, desde el diseño de tu esquema de base de datos y la gestión de datos con la aplicación de administración de back4app hasta la integración de tu frontend utilizando ya sea el sdk (si es aplicable) o llamadas a la api rest/graphql al final, tendrás una aplicación web completamente operativa y lista para producción con autenticación de usuarios y manejo seguro de datos principales beneficios domina las operaciones crud utilizando un sistema backend escalable obtén información sobre la integración de un frontend de riot js con back4app utiliza la intuitiva aplicación de administración de back4app para una gestión de datos sin esfuerzo aprende estrategias de implementación, incluyendo la contenedorización con docker requisitos previos antes de comenzar, asegúrate de tener una cuenta de back4app con un nuevo proyecto consulta introducción a back4app https //www back4app com/docs/get started/new parse app para obtener orientación una configuración de desarrollo para riot js puedes usar el cli de riot o incluir riot a través de una etiqueta de script asegúrate de que node js (v14 o posterior) esté instalado conocimientos básicos de javascript, riot js y apis rest si es necesario, consulta la documentación de riot js https //riot js org/ para obtener información adicional paso 1 – inicialización del proyecto creando un proyecto en back4app inicia sesión en tu cuenta de back4app haz clic en “nueva aplicación” en tu panel de control nombra tu proyecto basic crud app riotjs y sigue las instrucciones de configuración crear nuevo proyecto tu proyecto aparecerá ahora en tu panel de control de back4app, sirviendo como la columna vertebral de los datos de tu aplicación paso 2 – diseñando el esquema de tu base de datos creando tu modelo de datos para nuestra aplicación crud, definirás múltiples colecciones a continuación se presentan colecciones y campos de ejemplo para ayudarte a estructurar tu base de datos para operaciones crud eficientes 1\ colección de artículos esta colección contiene detalles sobre cada artículo campo tipo descripción id objectid identificador único generado automáticamente título cadena título del artículo descripción cadena descripción breve del artículo creado en fecha marca de tiempo cuando se agregó el artículo actualizado en fecha marca de tiempo cuando se modificó el elemento 2\ colección de usuarios esta colección contiene detalles de usuario e información de autenticación campo tipo descripción id objectid identificador único generado automáticamente nombre de usuario cadena nombre de usuario único correo electrónico cadena dirección de correo electrónico única hash de contraseña cadena contraseña encriptada creado en fecha marca de tiempo de creación de la cuenta actualizado en fecha última actualización de la cuenta puedes configurar estas colecciones manualmente en el panel de control de back4app creando nuevas clases y definiendo columnas crear nueva clase puedes agregar campos seleccionando un tipo de dato, asignando un nombre, estableciendo valores predeterminados y marcando si el campo es obligatorio crear columna aprovechando el agente ai de back4app para la creación de esquemas el agente ai de back4app, accesible desde tu panel de control, puede generar automáticamente tu esquema procesando un aviso detallado que describe tus colecciones y campos requeridos usando el agente ai abre el agente ai encuéntralo en la configuración de tu proyecto o menú ingresa tu modelo de datos pega un aviso que describa tus colecciones y sus campos revisa y confirma valida el esquema generado y aplícalo a tu proyecto ejemplo de aviso create these 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 acelera el proceso y asegura una configuración de esquema consistente paso 3 – activar la aplicación de administración y acciones crud descripción general de la aplicación de administración la aplicación de administración de back4app ofrece una interfaz sin código, de arrastrar y soltar para una gestión del backend sin esfuerzo, permitiéndote ejecutar operaciones crud rápidamente activar la aplicación de administración abre el menú “más” en tu panel de control de back4app selecciona “aplicación de administración” y haz clic en “habilitar aplicación de administración ” configura tu cuenta de administrador creando el usuario administrador inicial, lo que también establece los roles predeterminados habilitar aplicación de administración una vez habilitado, inicie sesión en la aplicación de administración para gestionar sus datos de backend panel de control de la aplicación de administración realizando operaciones crud a través de la aplicación de administración dentro de esta interfaz, puedes agregar registros utiliza el botón “agregar registro” dentro de una colección (por ejemplo, artículos) para crear nuevas entradas editar registros haz clic en cualquier registro para ver y modificar sus detalles eliminar registros elimina cualquier registro que ya no sea necesario esta herramienta optimiza su flujo de trabajo al ofrecer una interfaz sencilla para gestionar datos paso 4 – conectando riot js con back4app ahora que tu backend está configurado, es hora de conectar tu frontend de riot js a back4app opción a empleando el sdk de parse instala el sdk de parse npm install parse inicializa parse en tu proyecto de riot js crea un archivo (por ejemplo, src/parseconfig js ) // src/parseconfig js import parse from 'parse'; // insert your actual back4app credentials parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; usa parse en un tag de riot crea un tag de riot (por ejemplo, items riot ) para obtener y mostrar elementos items { item get("title") } — { item get("description") } opción b usando apis rest o graphql si el sdk de parse no es adecuado, ejecuta operaciones crud a través de llamadas a la api por ejemplo, para recuperar elementos usando rest // rest api example to get items async function fetchitems() { 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('fetched items ', data results); } catch (error) { console error('error fetching items ', error); } } fetchitems(); integra estas llamadas a la api dentro de tus etiquetas de riot js según sea necesario paso 5 – protegiendo tu backend configurando listas de control de acceso (acls) asegura tus datos configurando acls en tus objetos por ejemplo, para crear un elemento privado async function createprivateitem(itemdata, owneruser) { const items = parse object extend('items'); const item = new items(); item set('title', itemdata title); item set('description', itemdata description); // define acl only the owner has read/write access const acl = new parse acl(owneruser); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); item setacl(acl); try { const saveditem = await item save(); console log('private item created ', saveditem); } catch (error) { console error('error saving item ', error); } } ajustando permisos a nivel de clase (clps) dentro de tu panel de back4app, configura clps para cada colección para asegurar que solo los usuarios autenticados o autorizados accedan a datos sensibles paso 6 – autenticación de usuarios configurando cuentas de usuario las aplicaciones de riot js pueden manejar el registro y el inicio de sesión de usuarios utilizando la clase parse user integrada de back4app a continuación se muestra un ejemplo de etiqueta riot para el registro de usuarios sign up se puede aplicar una estrategia similar para el inicio de sesión y la gestión de sesiones se pueden configurar características adicionales como inicio de sesión social, verificación de correo electrónico o recuperación de contraseña en tu panel de control de back4app paso 7 – desplegando tu frontend de riot js la función de despliegue web de back4app te permite alojar tu aplicación de riot js vinculando tu repositorio de github sigue estos pasos para desplegar tu versión de producción 7 1 construye tus archivos de producción abre el directorio de tu proyecto en una terminal ejecuta tu comando de construcción npm run build esto crea una build carpeta con archivos estáticos optimizados (html, js, css, imágenes) confirma la construcción verifica que la build carpeta incluya un index html y los directorios de activos requeridos 7 2 organiza y sube tu código a github tu repositorio debe contener el código fuente completo del frontend de riot js una estructura típica podría ser basic crud app riotjs frontend/ \| node modules/ \| public/ \| └── index html \| src/ \| ├── app riot \| ├── parseconfig js \| └── tags/ \| ├── items riot \| └── auth riot \| package json \| readme md ejemplo src/parseconfig js // src/parseconfig js import parse from 'parse'; // insert your actual back4app keys here parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; ejemplo src/app riot riot js crud app confirma y envía tu código inicializa un repositorio git (si no se ha hecho) git init agrega tus archivos git add confirma tus cambios git commit m "confirmación inicial para el frontend de riot js" crea un repositorio en github (por ejemplo, basic crud app riotjs frontend ) y envía tu código git remote add origin https //github com/tu nombre de usuario/basic crud app riotjs frontend git git push u origin main 7 3 integra tu repositorio de github con el despliegue web de back4app despliegue web inicia sesión en tu panel de back4app, selecciona tu proyecto ( basic crud app riotjs ), y haz clic en despliegue web conéctate a github sigue las instrucciones para vincular tu cuenta y repositorio de github elige tu repositorio y rama selecciona tu repositorio (por ejemplo, basic crud app riotjs frontend ) y la rama apropiada (como main ) 7 4 configuración de despliegue comando de construcción si tu repositorio carece de una carpeta de construcción , especifica el comando de construcción (por ejemplo, npm run build ) back4app lo ejecutará directorio de salida establece esto en build para indicar dónde residen tus archivos estáticos variables de entorno incluye cualquier variable necesaria (como claves api) en tu configuración 7 5 dockerizando tu aplicación riot js (opcional) si prefieres un despliegue en contenedores, añade un dockerfile a tu proyecto \# use an official node image to build the app from node 16 alpine as build \# set working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy the entire app and build it 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;"] selecciona la opción docker en la configuración de despliegue web si eliges esta ruta 7 6 lanza tu aplicación desplegar haz clic en el desplegar botón después de configurar tus ajustes monitorea el proceso back4app obtendrá tu código, ejecutará el comando de construcción y desplegará tu aplicación en un contenedor obtén tu url una vez desplegada, back4app proporciona una url donde se aloja tu aplicación riot js 7 7 valida tu despliegue visita la url abre la url proporcionada en tu navegador prueba la aplicación confirma que todas las rutas y activos (css, javascript, imágenes) están funcionando correctamente soluciona problemas utiliza las herramientas de desarrollador del navegador y los registros de back4app si surgen problemas paso 8 – conclusiones y direcciones futuras ¡felicidades! has construido una aplicación crud completamente funcional utilizando riot js y back4app configuraste un proyecto llamado basic crud app riotjs , diseñaste un esquema de base de datos robusto para items y users, y gestionaste tus datos con la admin app integraste tu frontend de riot js e implementaste medidas de seguridad como acls próximos pasos mejorar el frontend agrega características como vistas detalladas, capacidades de búsqueda y actualizaciones en tiempo real expandir funcionalidad explora operaciones avanzadas en el backend como cloud functions o integra apis de terceros profundiza tu aprendizaje visita la documentación de back4app https //www back4app com/docs y otros recursos para optimizar y expandir tu aplicación con estos pasos, ahora tienes la experiencia para construir aplicaciones crud escalables utilizando riot js y back4app ¡feliz codificación!