Construyendo la aplicación de venta de entradas con Next.js, Vercel y Back4App

en este tutorial, construiremos un sistema de tickets utilizando next js con el enrutador de aplicaciones, back4app como el servicio backend, y tailwind css para el estilo la aplicación permite a los usuarios crear, actualizar, ver y eliminar tickets, mientras utiliza parse server en back4app para la gestión de bases de datos 1\ requisitos previos antes de comenzar, asegúrate de tener node js instalado en tu máquina ( guía de instalación de node js https //nodejs org/ ) cuenta de back4app ( regístrate gratis https //www back4app com/ ) cuenta de vercel para el despliegue ( regístrate en vercel https //vercel com/ ) 2\ configurando back4app inicia sesión en tu panel de back4app y crea un nuevo proyecto navega a la interfaz de datos y crea una nueva clase llamada ticket con el siguiente esquema nombre del campo tipo título cadena descripción cadena categoría cadena prioridad número progreso número estado cadena creadoen fecha (generado automáticamente) actualizadoen fecha (generado automáticamente) 3\ configuración del frontend (next js) 3 1 crear un nuevo proyecto next js ejecuta el siguiente comando para crear un nuevo proyecto de next js npx create next app\@latest ticketing app cd ticketing app 3 2 instalar dependencias instalar tailwind css , font awesome , y parse sdk para operaciones de backend npm install tailwindcss postcss autoprefixer @fortawesome/fontawesome free parse npx tailwindcss init p 3 3 configurar tailwind css edita el tailwind config js archivo para configurar las rutas de contenido de tailwind css module exports = { content \[ ' /app/ / {js,ts,jsx,tsx}', ' /components/ / {js,ts,jsx,tsx}', ], theme { extend {}, }, plugins \[], } en styles/globals css , añade las importaciones de tailwind @tailwind base; @tailwind components; @tailwind utilities; 3 4 crear la estructura del proyecto siguiendo la estructura proporcionada, crea los directorios y componentes necesarios estructura de directorios /app /tickets /\[id] page js layout js page js /components deleteblock jsx nav jsx prioritydisplay jsx progressdisplay jsx statusdisplay jsx ticketcard jsx ticketform jsx /lib parseclient js 4\ configuración del cliente parse en la /lib carpeta, crea un parseclient js archivo para configurar el sdk de parse import parse from 'parse'; // initialize parse sdk parse initialize('your app id', 'your js key'); parse serverurl = 'https //parseapi back4app com'; export default parse; reemplaza 'your app id' y 'your js key' con las credenciales de tu proyecto de back4app 5\ creando los componentes clave 5 1 ticketform este componente manejará tanto la creación como la actualización de tickets en /components/ticketform jsx , crea lo siguiente import { usestate } from 'react'; import parse from ' /lib/parseclient'; export default function ticketform({ ticket }) { const \[title, settitle] = usestate(ticket? title || ''); const \[description, setdescription] = usestate(ticket? description || ''); const handlesubmit = async (e) => { e preventdefault(); const ticket = parse object extend('ticket'); const newticket = ticket || new ticket(); newticket set('title', title); newticket set('description', description); try { await newticket save(); alert('ticket saved successfully!'); } catch (error) { console error('error saving ticket ', error); } }; return ( \<form onsubmit={handlesubmit}> \<input type="text" value={title} onchange={(e) => settitle(e target value)} placeholder="title" required /> \<textarea value={description} onchange={(e) => setdescription(e target value)} placeholder="description" required /> \<button type="submit">save ticket\</button> \</form> ); } 5 2 ticketcard este componente mostrará información individual del ticket en /components/ticketcard jsx import link from 'next/link'; import progressdisplay from ' /progressdisplay'; export default function ticketcard({ ticket }) { return ( \<div classname="border p 4"> \<h2>{ticket title}\</h2> \<p>{ticket description}\</p> \<progressdisplay progress={ticket progress} /> \<link href={`/tickets/${ticket objectid}`}>edit\</link> \</div> ); } 5 3 eliminarbloque un componente de confirmación para eliminar tickets en /components/deleteblock jsx import parse from ' /lib/parseclient'; export default function deleteblock({ ticketid, ondelete }) { const handledelete = async () => { const query = new parse query('ticket'); const ticket = await query get(ticketid); try { await ticket destroy(); alert('ticket deleted successfully'); ondelete(); } catch (error) { console error('error deleting ticket ', error); } }; return ( \<button onclick={handledelete}>delete ticket\</button> ); } 5 4 mostrarprogreso este componente muestra el progreso como una barra de porcentaje en /components/progressdisplay jsx export default function progressdisplay({ progress }) { return ( \<div> \<div classname="w full bg gray 200 rounded"> \<div classname="bg blue 600 text xs font medium text blue 100 text center p 0 5 leading none rounded" style={{ width `${progress}%` }} \> {progress}% \</div> \</div> \</div> ); } 5 4 mostrarprogreso 6\ páginas y enrutamiento 6 1 lista de tickets en /app/page js , muestra la lista de tickets import { useeffect, usestate } from 'react'; import parse from ' /lib/parseclient'; import ticketcard from ' /components/ticketcard'; export default function home() { const \[tickets, settickets] = usestate(\[]); useeffect(() => { const fetchtickets = async () => { const query = new parse query('ticket'); const results = await query find(); settickets(results); }; fetchtickets(); }, \[]); return ( \<div> \<h1>tickets\</h1> {tickets map(ticket => ( \<ticketcard key={ticket id} ticket={ticket} /> ))} \</div> ); } 6 2 detalle y edición de ticket en /app/tickets/\[id]/page js import { useeffect, usestate } from 'react'; import { userouter } from 'next/router'; import parse from ' / / /lib/parseclient'; import ticketform from ' / / /components/ticketform'; import deleteblock from ' / / /components/deleteblock'; export default function ticketdetail() { const router = userouter(); const { id } = router query; const \[ticket, setticket] = usestate(null); useeffect(() => { if (!id) return; const fetchticket = async () => { const query = new parse query('ticket'); const result = await query get(id); setticket(result); }; fetchticket(); }, \[id]); const handledelete = () => { router push('/'); }; if (!ticket) return \<div>loading \</div>; return ( \<div> \<ticketform ticket={ticket} /> \<deleteblock ticketid={ticket id} ondelete={handledelete} /> \</div> ); } 7\ desplegando en vercel 7 1 crear una cuenta en vercel si aún no tienes una cuenta de vercel, dirígete a vercel com https //vercel com/ y crea una cuenta puedes registrarte con github, gitlab o bitbucket vercel facilita la vinculación de tu repositorio directamente para despliegues 7 2 sube tu código a github para desplegar tu aplicación en vercel, necesitas tener tu proyecto alojado en una plataforma de control de versiones como github (o gitlab/bitbucket) si tu proyecto aún no está en github, sigue estos pasos inicializa git en el directorio de tu proyecto agrega tu proyecto a github 7 3 instalar vercel cli (opcional) si prefieres desplegar directamente desde la línea de comandos, instala el vercel cli globalmente alternativamente, puedes desplegar a través del panel de control de vercel, que cubriremos a continuación 7 4 conectar tu repositorio de github a vercel ve a vercel https //vercel com/ haz clic en nuevo proyecto elige el repositorio de git que contiene tu proyecto next js configura tu proyecto vercel detectará automáticamente que es un proyecto next js y aplicará la configuración de construcción correcta establece el directorio raíz en la carpeta del proyecto (si es necesario) 7 5 establecer variables de entorno necesitarás configurar tus credenciales de back4app y cualquier otra variable de entorno en vercel en la configuración del proyecto , ve a la sección de variables de entorno agrega las siguientes variables de entorno 7 6 configurar parse en env local (opcional) si usas variables de entorno locales durante el desarrollo, asegúrate de crear un archivo env local en el directorio raíz de tu proyecto con las siguientes variables estas variables de entorno también serán utilizadas por vercel una vez que estén configuradas en el panel de control de vercel 7 7 configurar ajustes de construcción (opcional) asegúrate de que la versión de node js y el comando de construcción estén correctamente configurados (vercel lo detecta automáticamente) para aplicaciones de next js , la configuración predeterminada debería ser comando de construcción npm run build directorio de salida next/ 7 8 desplegar el proyecto después de vincular tu repositorio de github, vercel activará automáticamente un proceso de construcción y despliegue puedes ver el estado de tu construcción en el panel de vercel 7 9 verificar los registros de despliegue si surgen problemas durante el despliegue, puedes inspeccionar los registros de despliegue para depurarlos 7 10 acceder a tu aplicación desplegada una vez que el despliegue sea exitoso, vercel te proporcionará una url única donde tu aplicación next js está activa puedes visitar la url para acceder a tu aplicación de ticketing desplegada por ejemplo https //your app name vercel app/ 8\ asegurando un despliegue fluido credenciales de back4app verifica que tus variables de entorno de back4app estén configuradas correctamente tanto en env local (para desarrollo local) como en el panel de vercel (para producción) cors (compartición de recursos de origen cruzado) asegúrate de que back4app permita tu url de vercel en su configuración de cors, que puedes configurar en el panel de back4app bajo seguridad prueba tu api antes de desplegar, prueba tus interacciones con la api de back4app localmente para asegurarte de que todo funcione sin problemas 9\ conclusión con estos pasos, tu aplicación de ticketing next js ahora debería estar desplegada en vercel , utilizando back4app para el backend esto completa el ciclo completo de desarrollo, desde la configuración de back4app, la creación del frontend en next js, hasta el despliegue de la aplicación en vivo en vercel si deseas hacer actualizaciones, simplemente envía cambios a tu repositorio de github, y vercel activará automáticamente un nuevo despliegue