How to Create a Basic CRUD App with StencilJS? A Comprehensive Tutorial

descripción general en esta guía, aprenderás a construir una aplicación crud básica (crear, leer, actualizar y eliminar) utilizando stenciljs este tutorial te guiará a través de la construcción de una aplicación web que ejecuta operaciones esenciales para gestionar datos de manera efectiva comenzaremos lanzando un proyecto de back4app llamado basic crud app stenciljs , que servirá como tu robusto backend después, diseñarás una base de datos escalable definiendo colecciones y campos, ya sea manualmente o con la ayuda del agente ai de back4app este paso asegura que tu base de datos esté adaptada para soportar todas las operaciones crud de manera confiable a continuación, utilizarás la aplicación administrativa de back4app, una interfaz intuitiva de arrastrar y soltar, para gestionar tus colecciones sin problemas esta herramienta sin código simplifica el manejo de acciones crud finalmente, conectarás tu frontend de stenciljs a back4app a través de apis rest/graphql aunque el sdk de parse está disponible, nos centraremos en integraciones de api que se adaptan perfectamente a stenciljs, asegurando que tu backend permanezca seguro a través de controles de acceso avanzados al final de este tutorial, tendrás una aplicación web lista para producción que soporta funciones crud esenciales junto con autenticación de usuarios y gestión de datos robusta perspectivas esenciales domina el proceso de construcción de aplicaciones crud con un sistema backend confiable entiende cómo diseñar un backend escalable y conectarlo con un frontend stenciljs aprende a usar una herramienta de administración sin código (la aplicación back4app admin) para operaciones de datos eficientes descubre estrategias de implementación, incluyendo la contenedorización con docker, para lanzar tu aplicación web rápidamente requisitos previos antes de comenzar, asegúrate de tener una cuenta de back4app con un proyecto activo ¿necesitas ayuda? consulta introducción a back4app https //www back4app com/docs/get started/new parse app una configuración de desarrollo de stenciljs usa la documentación oficial de stenciljs https //stenciljs com/docs/introduction para configurar tu entorno asegúrate de que node js (v14 o posterior) esté instalado conocimientos básicos de javascript, componentes web y apis rest repasa los conceptos de stenciljs https //stenciljs com/docs si es necesario paso 1 – inicia tu proyecto lanzando un nuevo proyecto en back4app inicie sesión en su cuenta de back4app seleccione la opción “nueva aplicación” desde su panel de control nombre de su proyecto basic crud app stenciljs y siga las instrucciones en pantalla para completar la configuración crear nuevo proyecto una vez configurado, su proyecto será visible en el panel de control, proporcionando una base sólida para la configuración de su backend paso 2 – creando el esquema de su base de datos definiendo el modelo de datos para esta aplicación crud, necesitará configurar múltiples colecciones a continuación se presentan colecciones de ejemplo junto con sus campos y tipos de datos para ayudarle a estructurar su base de datos para operaciones crud eficientes 1\ colección artículos esta colección contiene detalles de cada artículo campo tipo de dato detalles id objectid clave primaria generada automáticamente título cadena nombre o título del artículo descripción cadena descripción breve del artículo creado en fecha marca de tiempo cuando se creó el elemento actualizado en fecha marca de tiempo para la última actualización 2\ colección usuarios esta colección gestiona los perfiles de usuario y la autenticación campo tipo de dato detalles id objectid identificador único generado automáticamente nombre de usuario cadena identificador único para el usuario correo electrónico cadena dirección de correo electrónico única hash de contraseña cadena contraseña encriptada para la autenticación creado en fecha marca de tiempo de creación de la cuenta actualizado en fecha última marca de tiempo actualizada para la cuenta de usuario puedes agregar estas colecciones manualmente en el panel de control de back4app creando una nueva clase para cada una y agregando columnas con los tipos de datos apropiados crear nueva clase sigue las indicaciones para seleccionar un tipo de dato, especificar un nombre de campo, establecer valores predeterminados y marcar si el campo es obligatorio crear columna utilizando el agente ai de back4app para la creación de esquemas el agente ai de back4app es una herramienta innovadora disponible dentro de tu panel que automatiza la generación de tu esquema de base de datos basado en un simple aviso esta función acelera la configuración del proyecto y asegura que tu esquema esté alineado con las necesidades de tu aplicación cómo aprovechar el agente ai accede al agente ai abre tu panel de back4app y encuentra el agente ai dentro del menú o en la configuración del proyecto ingresa tus requisitos de esquema proporciona un aviso detallado describiendo las colecciones y campos que necesitas revisa y confirma una vez que el agente ai procese tu aviso, revisa las sugerencias de esquema generadas y aplícalas 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) este método asegura que tu esquema sea tanto consistente como optimizado paso 3 – activando la aplicación de administración y funciones crud introducción a la aplicación de administración la aplicación de administración de back4app ofrece una interfaz sin código que facilita la gestión de datos en el backend su sistema intuitivo de arrastrar y soltar te permite realizar todas las operaciones crud crear, leer, actualizar y eliminar, con facilidad habilitando la aplicación de administración abre el menú “más” en tu panel de back4app selecciona “admin app” y luego haz clic en “habilitar admin app ” configura tus credenciales de administrador creando un usuario administrador este proceso también configura roles predeterminados como b4aadminuser y colecciones del sistema habilitar admin app una vez activado, inicia sesión en la admin app para comenzar a gestionar tus datos panel de admin app gestionando acciones crud a través de la admin app dentro de esta interfaz puedes agregar registros haz clic en la opción “agregar registro” dentro de cualquier colección (por ejemplo, artículos) para crear nuevas entradas ver y editar registros selecciona un registro para inspeccionar o modificar sus campos eliminar registros utiliza la función de eliminar para eliminar registros obsoletos esta herramienta simplificada mejora la experiencia del usuario al simplificar las tareas de gestión de datos paso 4 – vinculando stenciljs con back4app con tu backend configurado y gestionado a través de la admin app, el siguiente paso es conectar tu frontend de stenciljs a back4app opción a empleando apis rest o graphql para stenciljs nos enfocaremos en integraciones de api para mantener las cosas simples ejemplo recuperando datos a través de rest // example 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 (error) { console error('error retrieving items ', error); } }; fetchitems(); integra estas llamadas a la api en tus componentes de stenciljs según sea necesario opción b utilizando el sdk de parse (si lo deseas) si prefieres usar el sdk de parse, aún puedes integrarlo dentro de tu proyecto de stenciljs ya que es una biblioteca de javascript sin embargo, nuestro ejemplo aquí se centra en las llamadas a la api paso 5 – fortaleciendo tu backend implementando listas de control de acceso (acls) asegura la seguridad de los datos estableciendo acls en tus objetos por ejemplo, para crear un elemento privado async function createsecureitem(itemdata, owneruser) { const items = parse object extend('items'); const item = new items(); item set('title', itemdata title); item set('description', itemdata description); // define acl restrict read/write access to the owner const acl = new parse acl(owneruser); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); item setacl(acl); try { const saveditem = await item save(); console log('secure item created ', saveditem); } catch (error) { console error('error creating item ', error); } } configurando permisos a nivel de clase (clps) dentro del panel de control de back4app, establece clps para cada colección para asegurar que solo los usuarios autorizados puedan acceder a datos sensibles paso 6 – gestionando la autenticación de usuarios estableciendo cuentas de usuario back4app utiliza la clase user de parse para gestionar la autenticación en tu proyecto de stenciljs, implementa el registro y el inicio de sesión de usuarios de la siguiente manera // example component for user signup import { component, h, state } from '@stencil/core'; import parse from ' /parseconfig'; @component({ tag 'app auth', styleurl 'app auth css', shadow true, }) export class appauth { @state() username string = ''; @state() password string = ''; @state() email string = ''; async handlesignup(event event) { event preventdefault(); const user = new parse user(); user set('username', this username); user set('password', this password); user set('email', this email); try { await user signup(); alert('user registered successfully!'); } catch (error) { alert('registration error ' + error message); } } render() { return ( \<form onsubmit={(e) => this handlesignup(e)}> \<input type="text" placeholder="username" value={this username} oninput={(e any) => this username = e target value} /> \<input type="password" placeholder="password" value={this password} oninput={(e any) => this password = e target value} /> \<input type="email" placeholder="email" value={this email} oninput={(e any) => this email = e target value} /> \<button type="submit">register\</button> \</form> ); } } se puede aplicar una estructura similar para el inicio de sesión y la gestión de sesiones también puedes habilitar funciones como inicios de sesión sociales, verificación de correo electrónico y restablecimientos de contraseña directamente desde el panel de control de back4app paso 7 – lanzando tu frontend de stenciljs con despliegue web la función de despliegue web de back4app te permite alojar tu aplicación stenciljs desplegando código directamente desde un repositorio de github 7 1 construyendo tu paquete de producción abre tu directorio de proyecto en una terminal ejecuta el comando de construcción npm run build esto produce una www carpeta que contiene activos estáticos optimizados confirma la construcción asegúrate de que la www carpeta incluya un index html junto con los archivos css, js e imágenes necesarios 7 2 organizando y subiendo tu código fuente tu repositorio debe abarcar todos los archivos fuente de tu aplicación stenciljs una estructura de ejemplo podría ser basic crud app stenciljs frontend/ ├── node modules/ ├── www/ │ └── index html ├── src/ │ ├── components/ │ │ ├── app auth tsx │ │ └── app items tsx │ ├── global/ │ └── parseconfig ts ├── stencil config ts ├── package json └── readme md archivo fuente de ejemplo src/parseconfig ts // src/parseconfig ts 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; archivo fuente de ejemplo src/components/app items tsx import { component, h, state } from '@stencil/core'; import parse from ' /parseconfig'; @component({ tag 'app items', styleurl 'app items css', shadow true, }) export class appitems { @state() items any\[] = \[]; @state() newtitle string = ''; @state() newdescription string = ''; @state() editingid string | null = null; @state() editingtitle string = ''; @state() editingdescription string = ''; async componentwillload() { await this loaditems(); } async loaditems() { const items = parse object extend("items"); const query = new parse query(items); try { const results = await query find(); this items = results; } catch (error) { console error('error fetching items ', error); } } async additem() { const items = parse object extend("items"); const item = new items(); item set("title", this newtitle); item set("description", this newdescription); try { await item save(); this newtitle = ''; this newdescription = ''; this loaditems(); } catch (error) { console error('error adding item ', error); } } async deleteitem(id string) { try { const item = await parse object createwithoutdata("items", id); await item destroy(); this loaditems(); } catch (error) { console error('error deleting item ', error); } } startedit(item any) { this editingid = item id; this editingtitle = item get("title"); this editingdescription = item get("description"); } async updateitem() { try { const items = parse object extend("items"); const item = new items(); item id = this editingid!; item set("title", this editingtitle); item set("description", this editingdescription); await item save(); this editingid = null; this editingtitle = ''; this editingdescription = ''; this loaditems(); } catch (error) { console error('error updating item ', error); } } render() { return ( \<div style={{ padding '2rem' }}> \<h1>items\</h1> \<div> \<h2>add new item\</h2> \<input type="text" placeholder="title" value={this newtitle} oninput={(e any) => this newtitle = e target value} /> \<input type="text" placeholder="description" value={this newdescription} oninput={(e any) => this newdescription = e target value} /> \<button onclick={() => this additem()}>add item\</button> \</div> \<ul> {this items map(item => \<li key={item id}> {this editingid === item id ? ( \<div> \<input type="text" value={this editingtitle} oninput={(e any) => this editingtitle = e target value} /> \<input type="text" value={this editingdescription} oninput={(e any) => this editingdescription = e target value} /> \<button onclick={() => this updateitem()}>save\</button> \<button onclick={() => this editingid = null}>cancel\</button> \</div> ) ( \<div> \<strong>{item get("title")}\</strong> {item get("description")} \<button onclick={() => this startedit(item)}>edit\</button> \<button onclick={() => this deleteitem(item id)}>delete\</button> \</div> )} \</li> )} \</ul> \</div> ); } } comprometiendo tu código a github inicializa un repositorio de git en el directorio de tu proyecto (si no se ha hecho ya) git init prepara tus archivos git add confirma tus cambios git commit m "confirmación inicial del código frontend de stenciljs" crea un nuevo repositorio en github nómbralo algo como basic crud app stenciljs frontend sube tu código a github git remote add origin https //github com/tu nombre de usuario/basic crud app stenciljs frontend git git push u origin main 7 3 conectando tu repositorio a través de la implementación web acceder a la implementación web inicia sesión en tu panel de back4app, selecciona tu proyecto ( basic crud app stenciljs ), y haz clic en la sección implementación web integrar github conecta tu cuenta de github siguiendo las instrucciones proporcionadas esto permitirá que back4app acceda a tu repositorio selecciona el repositorio y la rama elige tu repositorio (por ejemplo, basic crud app stenciljs frontend ) y selecciona la rama apropiada (por ejemplo, main ) 7 4 configurando tu implementación ingrese detalles adicionales de implementación comando de construcción si su repositorio no incluye una www carpeta preconstruida, especifique un comando de construcción (por ejemplo, npm run build ) back4app ejecutará esto durante la implementación directorio de salida establezca el directorio de salida en www para que back4app sepa dónde localizar sus archivos estáticos variables de entorno agregue cualquier variable de entorno requerida (por ejemplo, claves api) en la configuración de implementación 7 5 contenerizando su proyecto stenciljs con docker si prefiere docker para la implementación, incluya un dockerfile en su repositorio similar a \# use an official node image to build the app from node 16 alpine as build \# set working directory workdir /app \# copy dependency files copy package json / \# install dependencies run npm install \# copy source code copy \# build the app run npm run build \# use nginx to serve the app from nginx\ stable alpine copy from=build /app/www /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] incluya este archivo en su repositorio y elija la implementación de docker en back4app 7 6 desplegando tu aplicación iniciar despliegue haz clic en el desplegar botón después de configurar tus ajustes observa el proceso de construcción back4app obtendrá tu código de github, ejecutará el comando de construcción (si está configurado) y desplegará tu aplicación en contenedor accede a tu aplicación una vez desplegada, back4app proporcionará una url donde tu aplicación stenciljs estará activa 7 7 validando tu despliegue visita la url abre la url proporcionada en tu navegador web prueba la funcionalidad asegúrate de que la aplicación se cargue correctamente, las rutas funcionen bien y todos los activos (css, js, imágenes) se sirvan sin problemas depura si es necesario utiliza las herramientas de desarrollador del navegador para inspeccionar cualquier error revisa los registros de back4app y verifica las configuraciones de github y de construcción si ocurren problemas paso 8 – resumen y direcciones futuras ¡bien hecho! has construido con éxito una aplicación crud completa utilizando stenciljs y back4app configuraste un proyecto titulado basic crud app stenciljs , diseñaste colecciones para artículos y usuarios, y gestionaste datos con la aplicación de administración además, conectaste tu frontend de stenciljs a tu backend e implementaste medidas de seguridad robustas próximos pasos mejora el frontend considera expandir tu aplicación stenciljs con características avanzadas como vistas detalladas de artículos, capacidades de búsqueda y notificaciones en tiempo real agrega más funcionalidades integra lógica de backend compleja (por ejemplo, funciones en la nube), integraciones de api de terceros o implementa permisos basados en roles profundiza tu conocimiento explora la documentación de back4app https //www back4app com/docs y otros tutoriales para obtener más información sobre la optimización del rendimiento y las integraciones personalizadas al seguir este tutorial, has adquirido las habilidades necesarias para crear un robust