¿Cómo crear una aplicación CRUD básica con Preact?

descripción general en esta guía, desarrollarás una aplicación crud (crear, leer, actualizar y eliminar) utilizando preact te guiaremos a través de la construcción de un sistema que maneje operaciones básicas de datos, desde la inicialización de un proyecto back4app llamado basic crud app preact hasta la gestión de datos sin esfuerzo este proyecto proporciona un backend robusto y un frontend elegante y minimalista construido con preact comenzaremos configurando un nuevo proyecto en back4app, luego crearemos un esquema de base de datos eficiente, ya sea manualmente o con la ayuda del asistente de ia de back4app este diseño soportará todas las funcionalidades crud esenciales a continuación, introducimos la aplicación administrativa de back4app, una interfaz de arrastrar y soltar que simplifica la gestión de datos puedes agregar, modificar o eliminar registros rápidamente utilizando esta herramienta finalmente, conectarás tu frontend de preact a back4app utilizando rest/graphql, asegurando que tu backend esté seguro con reglas de acceso avanzadas al final de este tutorial, tendrás una aplicación web lista para producción con autenticación de usuarios y gestión de datos robusta, todo construido con preact y potenciado por back4app principales ideas domina la construcción de aplicaciones crud que gestionen datos de manera eficiente utilizando un backend confiable aprende a diseñar un modelo de datos escalable e integrarlo con un frontend de preact para una experiencia de usuario óptima descubre cómo la aplicación administrativa de back4app de arrastrar y soltar simplifica las operaciones de crear, leer, actualizar y eliminar comprende las estrategias de implementación, incluida la contenedorización con docker, para lanzar rápidamente tu aplicación requisitos previos antes de comenzar, asegúrate de tener una cuenta de back4app y un proyecto inicializado para obtener orientación, consulta introducción a back4app https //www back4app com/docs/get started/new parse app un entorno de desarrollo de preact utiliza herramientas como preact cli https //github com/preactjs/preact cli o equivalente, asegurándote de que node js (v14 o posterior) esté instalado conocimientos básicos de javascript, preact y rest apis consulta la documentación de preact https //preactjs com/guide/v10/ si es necesario paso 1 – configurando tu proyecto inicializando un proyecto de back4app inicia sesión en tu cuenta de back4app selecciona la opción “nueva aplicación” en tu panel nombra tu proyecto basic crud app preact y sigue las indicaciones de configuración crear nuevo proyecto después de la creación, su proyecto será visible en su panel de control de back4app, sentando las bases para la configuración del backend paso 2 – creando el esquema de su base de datos estructurando su modelo de datos para nuestra aplicación crud, necesitarás varias colecciones a continuación se presentan ejemplos que describen las colecciones y campos esenciales para soportar operaciones crud 1\ colección de artículos esta colección mantiene detalles sobre cada artículo campo tipo de dato propósito id objectid clave primaria generada automáticamente título cadena el nombre del artículo descripción cadena una breve descripción del artículo creado en fecha la marca de tiempo de creación actualizado en fecha última marca de tiempo de actualización 2\ colección de usuarios esto contiene las credenciales de usuario y los detalles del perfil campo tipo de dato propósito id objectid clave primaria generada 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 hash para autenticación creado en fecha marca de tiempo de creación de la cuenta actualizado en fecha última actualización de la cuenta puedes crear estas colecciones manualmente a través del panel de control de back4app añadiendo una nueva clase para cada colección y definiendo los campos apropiados crear nueva clase puedes agregar columnas seleccionando un tipo de dato, nombrando la columna y estableciendo valores predeterminados y banderas requeridas crear columna usando el asistente de ia de back4app para la creación de esquemas el asistente de ia disponible en back4app puede generar automáticamente tu esquema basado en un aviso que describe tus colecciones y campos esta función acelera la configuración y asegura la consistencia pasos para usar el asistente de ia abre el asistente de ia desde tu panel de control de back4app ingresa una descripción detallada de tu modelo de datos revisa las colecciones y definiciones de campo generadas automáticamente, luego 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 enfoque ahorra tiempo y garantiza un esquema bien estructurado paso 3 – activar la aplicación de administración y gestionar operaciones crud presentando la aplicación de administración la aplicación de administración de back4app proporciona una interfaz sin código para gestionar tus datos de backend sin esfuerzo su funcionalidad de arrastrar y soltar te permite realizar operaciones crud sin complicaciones activando la aplicación de administración ve al menú “más” en tu panel de back4app selecciona “aplicación de administración” y haz clic en “habilitar aplicación de administración ” configura tu primer usuario administrador, que también configurará roles como b4aadminuser y colecciones del sistema habilitar aplicación de administración después de la activación, inicia sesión en la aplicación de administración para gestionar tus datos panel de control de la aplicación de administración realizando acciones crud con la aplicación de administración dentro de la interfaz puedes agregar registros usa la opción “agregar registro” en cualquier colección (por ejemplo, artículos) para crear nuevas entradas ver y editar registros selecciona un registro para ver sus detalles o modificar sus campos eliminar registros elimina entradas que ya no son necesarias esta herramienta intuitiva mejora la experiencia del usuario al simplificar la gestión de datos paso 4 – conectando tu frontend de preact a back4app con el backend en su lugar, es hora de integrar tu frontend de preact opción a utilizando el sdk de parse instalar el sdk de parse npm install parse configura parse en tu proyecto de preact crea un archivo (por 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; integra parse en un componente de preact por ejemplo, construye un componente para obtener y mostrar elementos // src/components/itemslist js import { h } from 'preact'; import { useeffect, usestate } from 'preact/hooks'; import parse from ' /parseconfig'; const itemslist = () => { const \[items, setitems] = usestate(\[]); useeffect(() => { const fetchitems = async () => { const items = parse object extend("items"); const query = new parse query(items); try { const results = await query find(); setitems(results); } catch (error) { console error("error fetching items ", error); } }; fetchitems(); }, \[]); return ( \<div> \<h2>items\</h2> \<ul> {items map(item => ( \<li key={item id}> {item get("title")} — {item get("description")} \</li> ))} \</ul> \</div> ); }; export default itemslist; opción b aprovechando rest o graphql si el sdk de parse no es viable, utiliza rest o graphql para operaciones crud por ejemplo, para obtener elementos a través de rest // sample rest 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('fetched items ', data results); } catch (error) { console error('error fetching items ', error); } }; fetchitems(); opción b aprovechando rest o graphql integra estas llamadas a la api dentro de tus componentes de preact según sea necesario paso 5 – mejorando la seguridad del backend uso de listas de control de acceso (acls) asegura tus datos asignando acls a 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); // configure 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); } } permisos a nivel de clase (clps) dentro del panel de control de back4app, ajusta los clps para cada colección para restringir el acceso solo a usuarios autenticados o autorizados paso 6 – implementación de la autenticación de usuarios configuración de cuentas de usuario back4app utiliza la clase user de parse para gestionar la autenticación en tu aplicación preact, gestiona el registro e inicio de sesión de usuarios de la siguiente manera // src/components/auth js import { h } from 'preact'; import { usestate } from 'preact/hooks'; import parse from ' /parseconfig'; export const signup = () => { const \[username, setusername] = usestate(''); const \[password, setpassword] = usestate(''); const \[email, setemail] = usestate(''); const handlesignup = async (e) => { e preventdefault(); const user = new parse user(); user set('username', username); user set('password', password); user set('email', email); try { await user signup(); alert('user registration successful!'); } catch (error) { alert('registration error ' + error message); } }; return ( \<form onsubmit={handlesignup}> \<input type="text" placeholder="username" value={username} onchange={e => setusername(e target value)} /> \<input type="password" placeholder="password" value={password} onchange={e => setpassword(e target value)} /> \<input type="email" placeholder="email" value={email} onchange={e => setemail(e target value)} /> \<button type="submit">sign up\</button> \</form> ); }; se puede utilizar un método similar para iniciar sesión y gestionar sesiones funciones adicionales como la autenticación social y la recuperación de contraseñas se pueden configurar a través del panel de control de back4app paso 7 – lanzamiento de tu frontend preact con despliegue web la función de despliegue web de back4app te permite alojar tu aplicación preact vinculando un repositorio de github en esta parte, prepararás tu construcción de producción, harás commit de tu código, integrarás con el despliegue web y desplegarás tu sitio 7 1 construya sus archivos de producción abra el directorio de su proyecto en una terminal ejecute el comando de construcción npm run build esto genera una build carpeta con activos estáticos optimizados (html, js, css, imágenes) 3\ confirme que la build carpeta incluye un index html archivo y los activos necesarios 7 2 organice y confirme su código fuente su repositorio debe contener el código fuente completo del frontend de preact una estructura de directorio de ejemplo basic crud app preact frontend/ ├── node modules/ ├── public/ │ └── index html ├── src/ │ ├── app js │ ├── parseconfig js │ └── components/ │ ├── itemslist js │ └── auth js ├── package json └── readme md ejemplos de archivos src/parseconfig js // src/parseconfig js import parse from 'parse'; // enter your back4app credentials parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; src/app js // src/app js import { h } from 'preact'; import { useeffect, usestate } from 'preact/hooks'; import parse from ' /parseconfig'; function app() { const \[items, setitems] = usestate(\[]); const \[newitemtitle, setnewitemtitle] = usestate(""); const \[newitemdescription, setnewitemdescription] = usestate(""); const \[editingitemid, seteditingitemid] = usestate(null); const \[editingtitle, seteditingtitle] = usestate(""); const \[editingdescription, seteditingdescription] = usestate(""); const fetchitems = async () => { const items = parse object extend("items"); const query = new parse query(items); try { const results = await query find(); setitems(results); } catch (error) { console error("error fetching items ", error); } }; useeffect(() => { fetchitems(); }, \[]); const handleadditem = async () => { const items = parse object extend("items"); const item = new items(); item set("title", newitemtitle); item set("description", newitemdescription); try { await item save(); setnewitemtitle(""); setnewitemdescription(""); fetchitems(); } catch (error) { console error("error saving item ", error); } }; const handledeleteitem = async (id) => { try { const item = await parse object createwithoutdata("items", id); await item destroy(); fetchitems(); } catch (error) { console error("error deleting item ", error); } }; const starteditingitem = (item) => { seteditingitemid(item id); seteditingtitle(item get("title")); seteditingdescription(item get("description")); }; const handleupdateitem = async () => { try { const items = parse object extend("items"); const item = new items(); item id = editingitemid; item set("title", editingtitle); item set("description", editingdescription); await item save(); seteditingitemid(null); seteditingtitle(""); seteditingdescription(""); fetchitems(); } catch (error) { console error("error updating item ", error); } }; return ( \<div style={{ padding '2rem' }}> \<h1>items\</h1> \<div style={{ marginbottom '1rem' }}> \<h2>add item\</h2> \<input type="text" placeholder="title" value={newitemtitle} onchange={(e) => setnewitemtitle(e target value)} style={{ marginright '0 5rem' }} /> \<input type="text" placeholder="description" value={newitemdescription} onchange={(e) => setnewitemdescription(e target value)} style={{ marginright '0 5rem' }} /> \<button onclick={handleadditem}>add item\</button> \</div> \<h2>item list\</h2> \<ul> {items map((item) => ( \<li key={item id} style={{ marginbottom '1rem' }}> {editingitemid === item id ? ( \<div> \<input type="text" value={editingtitle} onchange={(e) => seteditingtitle(e target value)} style={{ marginright '0 5rem' }} /> \<input type="text" value={editingdescription} onchange={(e) => seteditingdescription(e target value)} style={{ marginright '0 5rem' }} /> \<button onclick={handleupdateitem}>save\</button> \<button onclick={() => seteditingitemid(null)} style={{ marginleft '0 5rem' }}> cancel \</button> \</div> ) ( \<div> \<strong>{item get("title")}\</strong> {item get("description")} \<button onclick={() => starteditingitem(item)} style={{ marginleft '1rem' }}> edit \</button> \<button onclick={() => handledeleteitem(item id)} style={{ marginleft '0 5rem' }}> delete \</button> \</div> )} \</li> ))} \</ul> \</div> ); } export default app; comprometiendo tu código a github inicializa un repositorio de git (si no se ha hecho ya) git init organiza tus archivos fuente git add confirma tus cambios git commit m "initial commit of preact frontend source code" crea un nuevo repositorio en github, por ejemplo, basic crud app preact frontend sube tu código git remote add origin https //github com/your username/basic crud app preact frontend git git push u origin main 7 3 conectando tu repositorio con el despliegue web ve a la sección de despliegue web en tu panel de back4app, abre tu proyecto ( basic crud app preact ) y selecciona despliegue web vincula tu cuenta de github según se te indique, para que back4app pueda acceder a tu repositorio selecciona el repositorio (por ejemplo, basic crud app preact frontend ) y elige la rama apropiada (por ejemplo, main ) 7 4 configuración de despliegue especifica configuraciones adicionales comando de construcción si no hay una carpeta de build preconstruida, establece el comando de construcción (por ejemplo, npm run build ) back4app ejecutará este comando durante el despliegue directorio de salida define la carpeta de salida como build para que back4app identifique los archivos estáticos variables de entorno agrega cualquier clave api o configuración necesaria requerida por tu aplicación 7 5 contenerizando tu aplicación preact con docker si prefieres docker, incluye un dockerfile en tu repositorio similar a \# use an official node image for building from node 16 alpine as build \# set working directory workdir /app \# copy package files copy package json / \# install dependencies run npm install \# copy the source code copy \# build the app 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 opción de implementación de docker en la configuración de implementación web de back4app 7 6 desplegando su aplicación haga clic en el desplegar botón una vez que la configuración esté completa monitoree el proceso de construcción mientras back4app obtiene su código, construye y despliega su aplicación una vez finalizado, back4app proporcionará una url donde su aplicación está alojada 7 7 verificando su despliegue visite la url proporcionada para ver su sitio en vivo pruebe todas las funcionalidades para asegurarse de que cada característica, incluidas las rutas y los activos, se cargue correctamente si ocurren problemas, revise los registros de la consola del navegador y los registros de implementación en back4app paso 8 – conclusión y direcciones futuras ¡gran trabajo! has desarrollado con éxito una aplicación crud completa utilizando preact y back4app configuraste un proyecto llamado basic crud app preact , definiste colecciones de base de datos robustas y utilizaste la admin app para una gestión de datos eficiente luego conectaste tu frontend de preact a tu backend e implementaste controles de acceso estrictos ¿qué sigue? mejora tu aplicación preact con características adicionales como vistas detalladas, capacidades de búsqueda y actualizaciones en tiempo real incorpora lógica de backend más avanzada como cloud functions o integraciones de api de terceros consulta la documentación de back4app https //www back4app com/docs y otros recursos para obtener información más profunda sobre optimización y configuraciones personalizadas al seguir este tutorial, has adquirido las habilidades para construir un backend crud escalable y seguro para tus aplicaciones preact utilizando back4app ¡disfruta programando y explorando nuevas características!