¿Cómo construir un frontend de Preact y conectarlo a un backend?

en este tutorial, construirás una aplicación de lista de tareas utilizando preact y la conectarás a un backend robusto proporcionado por back4app esta guía es perfecta para comenzar porque cubre las operaciones básicas de crud (crear, leer, actualizar, eliminar) y te guía a través de la creación de una interfaz de usuario limpia y funcional al final, tendrás una aplicación completamente operativa que te muestra cómo integrar un backend gestionado mientras usas preact para un frontend ligero y rápido construir una aplicación de pila completa puede ser complejo, especialmente al tratar con la configuración del backend, la gestión de bases de datos, la autenticación y el despliegue para simplificar estos desafíos, utilizamos back4app—una solución de backend como servicio (baas) —para que puedas concentrarte en desarrollar tu frontend mientras se encarga de la hospedaje, bases de datos y apis back4app ofrece servicios de backend integrales que incluyen una base de datos lista para usar, autenticación, cloud code para lógica del lado del servidor y sdks para una integración fluida también admite despliegues en contenedores, lo que lo convierte en una excelente opción para aplicaciones modernas de pila completa con estos recursos, puedes desarrollar y desplegar aplicaciones rápidamente sin la carga de gestionar la infraestructura del servidor conclusiones clave siguiendo este tutorial aprenderás a inicializar un proyecto moderno de preact usando vite integrar un servicio backend para gestionar los datos de tu aplicación implementar operaciones crud básicas para una interfaz de usuario interactiva desplegar una aplicación de lista de tareas completamente funcional utilizando flujos de trabajo en contenedores en back4app requisitos previos antes de comenzar, asegúrate de tener lo siguiente node js y npm instala la última versión lts de node js desde nodejs org https //nodejs org/ y verifica ejecutando node v y npm v en tu terminal conocimientos básicos de preact se espera familiaridad con componentes funcionales, hooks (como usestate y useeffect ), y la sintaxis jsx si eres nuevo en preact, considera revisar sus conceptos básicos primero una cuenta de back4app regístrate en back4app https //www back4app com/ para configurar y gestionar tus servicios backend con estos requisitos previos en su lugar, estás listo para configurar tu proyecto y comenzar a construir configuración del proyecto comienza configurando tu entorno de desarrollo local e inicializando tu proyecto de preact usando vite para una experiencia de desarrollo optimizada confirma que node js (versión lts) está instalado si es necesario, descárgalo e instálalo desde nodejs org https //nodejs org/ verifica ejecutando node v npm v inicializa tu proyecto de preact usando vite ejecuta el siguiente comando en tu terminal (reemplaza todo app con el nombre de proyecto que prefieras) npm create vite\@latest todo app template preact navega a tu directorio de proyecto cd todo app instala las dependencias requeridas npm install inicia el servidor de desarrollo para verificar tu configuración npm run dev tu aplicación de preact debería estar corriendo localmente ahora abre la url proporcionada en tu navegador para confirmarlo a continuación, configurarás tu backend en back4app para gestionar el almacenamiento de datos y las interacciones con la api creando el backend de todo back4app ofrece un servicio de backend completamente gestionado impulsado por parse , que proporciona una base de datos nosql, autenticación, cloud code y apis autogeneradas desde el principio esta sección te guiará a través de la creación de un modelo de datos de tarea para almacenar tus elementos de lista de tareas y conectarlo a tu frontend de preact configurando tu aplicación de backend inicia sesión en tu panel de back4app https //www back4app com/ y haz clic en "crear una nueva aplicación " nombra tu aplicación (por ejemplo, todopreactapp ) y elige nodejs/parse como el tipo de backend una vez que la aplicación esté creada, navega a "base de datos" > "navegador" haz clic en "crear una clase" y selecciona "personalizada" nombra la clase tarea y establece los permisos de nivel de clase para permitir lectura y escritura pública (puedes ajustar estas configuraciones más tarde) en la clase tarea , agrega los siguientes campos título (string) – el título de la tarea descripción (string) – detalles sobre la tarea completada (booleano) – indica si la tarea está terminada fechadevencimiento (fecha) – la fecha límite para la tarea haz clic en "guardar" para completar la configuración de tu esquema integrando back4app con preact integra back4app en tu proyecto de preact utilizando el parse javascript sdk instala el sdk a través de npm npm install parse configura el sdk inicializándolo con tu id de aplicación y clave de javascript recupera estas credenciales desde tu panel de control de back4app en configuración de la app > seguridad y claves en tu src/main jsx , importa y configura parse de la siguiente manera import { render } from 'preact' import ' /index css' import app from ' /app jsx' import parse from 'parse/dist/parse min js' const parse app id = "your application id"; const parse js key = "your javascript key"; const parse server url = 'https //parseapi back4app com/'; parse initialize(parse app id, parse js key); parse serverurl = parse server url; render(\<app />, document getelementbyid('app')) con el backend conectado, estás listo para construir la interfaz de usuario de la lista de tareas en preact e implementar operaciones crud desarrollando el frontend con preact ahora que tu backend está configurado, construye la interfaz de usuario para tu aplicación de lista de tareas utilizando preact crearás componentes para agregar, mostrar, actualizar y eliminar tareas mientras gestionas el estado con hooks organizando tus componentes tu aplicación incluirá los siguientes componentes clave taskform jsx – gestiona la adición de nuevas tareas tasklist jsx – muestra todas las tareas y proporciona controles para completarlas o eliminarlas taskitem jsx – representa una tarea individual con acciones para alternar la finalización o eliminar la tarea crea una components carpeta dentro de src y agrega estos archivos mkdir src/components touch src/components/taskform jsx src/components/tasklist jsx src/components/taskitem jsx gestionando el estado con hooks utiliza los hooks de preact ( usestate y useeffect ) para la gestión del estado y los efectos secundarios comienza configurando el estado en app jsx import { usestate, useeffect } from "preact/hooks"; import taskform from " /components/taskform jsx"; import tasklist from " /components/tasklist jsx"; import parse from "parse/dist/parse min js"; function app() { const \[tasks, settasks] = usestate(\[]); const fetchtasks = async () => { try { const task = parse object extend("task"); const query = new parse query(task); const results = await query find(); settasks(results map(task => ({ id task id, task tojson() }))); } catch (error) { console error("error fetching tasks ", error); } }; useeffect(() => { fetchtasks(); }, \[]); return ( \<div class="container"> \<h1>to do list\</h1> \<taskform fetchtasks={fetchtasks} /> \<tasklist tasks={tasks} fetchtasks={fetchtasks} /> \</div> ); } export default app; construyendo el componente del formulario de tareas en taskform jsx , crea un formulario controlado para agregar tareas usa usestate para gestionar los valores de entrada y enviar datos a back4app import { usestate } from "preact/hooks"; import parse from "parse/dist/parse min js"; function taskform({ fetchtasks }) { const \[title, settitle] = usestate(""); const \[description, setdescription] = usestate(""); const handlesubmit = async (e) => { e preventdefault(); try { const task = parse object extend("task"); const task = new task(); task set("title", title); task set("description", description); task set("completed", false); await task save(); fetchtasks(); settitle(""); setdescription(""); } catch (error) { console error("error adding task ", error); } }; return ( \<form onsubmit={handlesubmit}> \<input type="text" placeholder="task title" value={title} oninput={(e) => settitle(e target value)} required /> \<input type="text" placeholder="description" value={description} oninput={(e) => setdescription(e target value)} required /> \<button type="submit">add task\</button> \</form> ); } export default taskform; mostrando la lista de tareas en tasklist jsx , renderiza la lista de tareas mapeando a través del array de tareas y usando el taskitem componente import taskitem from " /taskitem jsx"; function tasklist({ tasks, fetchtasks }) { return ( \<div> {tasks length === 0 ? ( \<p>no tasks available\</p> ) ( tasks map(task => ( \<taskitem key={task id} task={task} fetchtasks={fetchtasks} /> )) )} \</div> ); } export default tasklist; creando el componente de tarea en taskitem jsx , crea un componente que te permita marcar una tarea como completa o eliminarla import parse from "parse/dist/parse min js"; function taskitem({ task, fetchtasks }) { const handlecomplete = async () => { try { const query = new parse query("task"); const tasktoupdate = await query get(task id); tasktoupdate set("completed", !task completed); await tasktoupdate save(); fetchtasks(); } catch (error) { console error("error updating task ", error); } }; const handledelete = async () => { try { const query = new parse query("task"); const tasktodelete = await query get(task id); await tasktodelete destroy(); fetchtasks(); } catch (error) { console error("error deleting task ", error); } }; return ( \<div class={`task item ${task completed ? "completed" ""}`}> \<h3>{task title}\</h3> \<p>{task description}\</p> \<button onclick={handlecomplete}> {task completed ? "undo" "complete"} \</button> \<button onclick={handledelete}>delete\</button> \</div> ); } export default taskitem; estilizando tu aplicación agrega los siguientes estilos en el index css archivo en la src carpeta / container styling / container { max width 600px; margin 40px auto; padding 0 20px; text align center; font family sans serif; } container h1 { margin bottom 20px; } form { display flex; flex direction column; align items center; gap 10px; margin bottom 20px; } form input\[type="text"] { width 80%; max width 400px; padding 8px; box sizing border box; font size 1rem; } form button { padding 8px 16px; cursor pointer; font size 1rem; border none; background color #eaeaea; transition background color 0 2s ease; } form button\ hover { background color #ccc; } container p { font size 1rem; } task item { display flex; flex direction column; align items center; justify content center; gap 12px; border 1px solid #ccc; border radius 6px; padding 15px; margin 10px 0; background color #fafafa; text align center; transition background color 0 2s ease; } task item completed h3, task item completed p { text decoration line through; color #888; } task item h3 { margin 0; font size 1 1rem; } task item p { margin 0; font size 1rem; } task item button { padding 6px 12px; border none; background color #eaeaea; cursor pointer; font size 0 9rem; } task item button\ hover { background color #ccc; } @media (min width 600px) { task item { flex direction row; } } importa este css en tu src/main jsx import " /index css"; finalizando la interfaz de usuario tu aplicación de lista de tareas de preact ahora cuenta con un frontend dinámico integrado con back4app y un estilo personalizado la aplicación te permite agregar, mostrar, actualizar y eliminar tareas mientras mantiene una comunicación eficiente entre el frontend y el backend a continuación, desplegarás tu aplicación de preact utilizando la plataforma de despliegue web de back4app desplegando el frontend en back4app web deployment back4app web deployment proporciona un entorno completamente gestionado y containerizado para desplegar tus aplicaciones con despliegues basados en docker, puedes empaquetar tu frontend de preact y desplegarlo sin esfuerzo configurando vite para producción los proyectos de preact construidos con vite se ejecutan en modo de desarrollo por defecto para producción, construye una versión estática y sírvela utilizando un servidor web ligero como nginx actualiza tu vite config js para establecer la ruta base correcta import { defineconfig } from 'vite'; import preact from '@preact/preset vite'; export default defineconfig({ plugins \[preact()], base ' /', // ensures asset paths are correct in a containerized environment }); genera archivos listos para producción npm run build creando un dockerfile para tu aplicación crea un dockerfile en el directorio raíz para definir tu contenedor \# build stage using a lightweight node js image from node 18 alpine as build workdir /app copy package json package lock json / run npm install copy run npm run build \# production stage using nginx to serve static files from nginx\ alpine copy from=build /app/dist /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] probando el contenedor localmente antes de desplegar, construye y prueba tu contenedor docker localmente docker build t todo preact frontend ejecuta el contenedor docker run p 8080 80 todo preact frontend visita http //localhost 8080 en tu navegador para confirmar que tu aplicación se sirve correctamente subiendo a github y desplegando a través de back4app sube tu proyecto a github git init git add git commit m "initial commit for back4app deployment" git branch m main git remote add origin \<your github repository url> git push u origin main luego, despliega usando back4app web deployment inicia sesión en back4app web deployment https //www back4app com/containers haz clic en "crear nueva aplicación" , proporciona un nombre y selecciona repositorio de github autoriza a back4app para acceder a tu repositorio y selecciona el todo preact repositorio elige despliegue de dockerfile y confirma la configuración de la construcción haz clic en "desplegar" para iniciar el proceso de construcción monitoreo y gestión de despliegues después del despliegue, usa el panel de control de back4app para ver registros para solucionar problemas monitorear el rendimiento del contenedor y el uso de recursos activar redeployments en nuevos commits configurar dominios personalizados si es necesario pruebas y depuración de su aplicación después del despliegue, pruebe a fondo su aplicación preact verificar conectividad api abra la consola de desarrollador de su navegador (f12 → red) para monitorear las llamadas a la api durante las operaciones de tarea agregar y recuperar tareas use la interfaz de usuario para agregar tareas, luego actualice la página para verificar la persistencia en el navegador de base de datos de back4app probar operaciones crud asegúrese de que marcar tareas como completas y la eliminación se reflejen correctamente en el backend manejo de casos límite valide las entradas del formulario y simule condiciones de red lentas utilizando herramientas de desarrollador si encuentra problemas, revise los registros de back4app o verifique su configuración de api mejores prácticas para usar los servicios de back4app mejore el rendimiento y la seguridad de su aplicación siguiendo estas mejores prácticas optimizar llamadas a la api use solicitudes por lotes para múltiples operaciones y seleccione solo los campos necesarios en sus consultas asegurar datos sensibles almacene credenciales como el id de la aplicación y la clave de javascript en variables de entorno con vite, cree un env archivo vite parse app id=your app id vite parse js key=your js key habilitar auto scaling activa el auto escalado en la implementación web de back4app para gestionar el alto tráfico mejorar la seguridad restringe los permisos a nivel de clase (clps) para controlar las modificaciones de datos y configura acls según sea necesario utilizar cloud code descarga la lógica compleja a cloud code para un mejor rendimiento y menor exposición de la api conclusión ahora has construido una aplicación de lista de tareas de pila completa utilizando preact para el frontend y los robustos servicios backend de back4app este tutorial te guió a través de la inicialización de un proyecto preact, la integración del sdk de parse y la implementación de tu aplicación utilizando flujos de trabajo en contenedores en back4app a medida que continúes desarrollando, considera agregar características como autenticación avanzada de usuarios, actualizaciones en tiempo real e integraciones de terceros para obtener detalles adicionales y soporte, consulta la documentación de back4app https //www back4app com/docs