Cómo construir un backend para Gatsby?

introducción en este tutorial, aprenderás cómo construir un backend para gatsby utilizando back4app te mostraremos cómo integrar las características de back4app—como la gestión de bases de datos, funciones de cloud code, rest api y capacidades de consulta graphql , autenticación de usuarios y consultas en tiempo real (live queries)—para crear un backend seguro, escalable y robusto que se pueda acceder desde tu sitio gatsby también verás cómo la configuración rápida de back4app y su entorno intuitivo pueden reducir drásticamente el tiempo y el esfuerzo necesarios para manejar tareas de backend al final, sabrás exactamente cómo construir un backend para gatsby que almacena y recupera datos, maneja la autenticación, integra funciones en la nube y más esto te prepara para incorporar fácilmente lógica personalizada, agregar apis de terceros o expandir tu modelo de datos sin tener que preocuparte por el mantenimiento tradicional del servidor lo que construirás y por qué es valioso integración completa de backend crearás una estructura de backend escalable para tu sitio gatsby, incorporando parse sdk, que es perfecta para necesidades de datos dinámicos ahorro de tiempo back4app proporciona herramientas como el agente ai, consultas en tiempo real y trabajos en la nube que aceleran la creación de backend habilidades extendibles después de terminar, podrás adaptar estos conceptos para características más avanzadas de gatsby, como crear páginas en el tiempo de construcción o conectarte a funciones sin servidor para operaciones dinámicas requisitos previos una cuenta de back4app y un nuevo proyecto de back4app comenzando con back4app https //www back4app com/docs/get started/new parse app si no tienes una cuenta, puedes crear una gratis sigue la guía anterior para preparar tu proyecto entorno básico de desarrollo de gatsby puedes configurarlo instalando el gatsby cli https //www gatsbyjs com/docs/tutorial/part 0/#install gatsby cli y ejecutando node js (versión 14 o superior) instalado instalando node js https //nodejs org/en/download/ familiaridad con javascript y los conceptos de gatsby documentación oficial de gatsby https //www gatsbyjs com/docs/ lee la documentación o un tutorial para principiantes si eres nuevo en gatsby asegúrate de tener estos requisitos configurados esto garantiza una experiencia fluida mientras creas un nuevo archivo para la configuración o ejecutas consultas graphql en tu entorno de gatsby paso 1 – configuración del proyecto back4app crear un nuevo proyecto el primer paso en cómo construir un backend para gatsby en back4app es crear un nuevo proyecto si aún no lo has hecho inicia sesión en tu cuenta de back4app haz clic en el botón “nueva app” en tu panel dale un nombre a tu app (por ejemplo, “gatsby backend tutorial”) después de crear el proyecto, aparecerá en tu panel de control de back4app usaremos este proyecto como el núcleo de nuestro backend conectar el sdk de parse back4app utiliza la plataforma parse para gestionar tus datos, ofrecer características en tiempo real, manejar la autenticación de usuarios y más para gatsby, aún puedes npm install parse y luego integrarlo en tus archivos fuente recupera tus claves de parse en tu panel de control de back4app, localiza tu id de aplicación y clave de javascript , típicamente bajo “configuración de la app” o “seguridad y claves ” también encontrarás la url del servidor de parse (a menudo algo como https //parseapi back4app com ) instala el sdk de parse en tu sitio de gatsby npm install parse crea un parseconfig js en el directorio raíz de tu proyecto gatsby o dentro de src/ src/parseconfig js // src/parseconfig js import parse from 'parse'; // replace the placeholders with your back4app credentials parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; cada vez que importes parse desde parseconfig js en tus archivos de gatsby (por ejemplo, en gatsby node js , gatsby browser js , o páginas/componentes), tendrás una instancia preconfigurada lista para hacer consultas a tu backend de back4app paso 2 – configurando la base de datos creando un modelo de datos en back4app, los datos se gestionan como “clases” (similares a tablas) con campos para tus datos vamos a crear una clase “todo” para demostración mostraremos algunas formas en que puedes guardar y recuperar datos en gatsby con parse navega a la sección “base de datos” en tu panel de control de back4app crea una nueva clase (por ejemplo, “todo”) y añade columnas como título (string) y iscompleted (boolean) o puedes dejar que parse cree automáticamente columnas cuando los objetos se guardan por primera vez desde tu código creando un modelo de datos con el agente de ia back4app proporciona un agente de ia para ayudar a definir tu estructura de datos abre el agente de ia desde tu panel de control de la aplicación o menú describe tu modelo de datos (por ejemplo, “por favor, crea un nuevo esquema de aplicación todo con un título y estado de finalización ”) deja que el agente de ia genere el esquema por ti lectura y escritura de datos usando sdk un fragmento de muestra en gatsby podría verse así (por ejemplo, en una página basada en react o en gatsby browser js ) import parse from ' /parseconfig'; async function createtodoitem(title, iscompleted) { const todo = parse object extend('todo'); const todo = new todo(); todo set('title', title); todo set('iscompleted', iscompleted); try { const savedtodo = await todo save(); console log('todo saved successfully ', savedtodo); return savedtodo; } catch (error) { console error('error saving todo ', error); } } async function fetchtodos() { const todo = parse object extend('todo'); const query = new parse query(todo); try { const results = await query find(); console log('fetched todo items ', results); return results; } catch (error) { console error('error fetching todos ', error); } } lectura y escritura de datos usando rest api alternativamente, puedes interactuar con la base de datos a través de la rest api curl x post \\ h "x parse application id your application id" \\ h "x parse rest api key your rest api key" \\ h "content type application/json" \\ d '{"title" "buy groceries", "iscompleted" false}' \\ https //parseapi back4app com/classes/todo lectura y escritura de datos usando graphql api back4app también soporta una graphql api , por lo que podrías ejecutar consultas o mutaciones como mutation { createtodo(input { fields { title "clean the house" iscompleted false } }) { todo { objectid title iscompleted } } } esto es especialmente conveniente si deseas que tu sitio de gatsby obtenga datos a través de consultas graphql en el momento de la construcción trabajando con consultas en vivo gatsby es un generador de sitios estáticos, pero aún puedes configurar conexiones dinámicas en tiempo real usando parse consultas en vivo esto puede ser útil en código ejecutado en el navegador o en tus propios hooks sin servidor habilitar consultas en vivo en tu panel de control de back4app (bajo configuración del servidor) agregar la url del servidor de consultas en vivo a parseconfig js parse livequeryserverurl = 'wss\ //your subdomain here b4a io'; suscribirse a una clase para notificaciones en tiempo real async function subscribetotodos(callback) { const query = new parse query('todo'); const subscription = await query subscribe(); subscription on('create', (newtodo) => { callback('create', newtodo); }); subscription on('update', (updatedtodo) => { callback('update', updatedtodo); }); subscription on('delete', (deletedtodo) => { callback('delete', deletedtodo); }); return subscription; } esto enviará actualizaciones de datos en tiempo real a la interfaz de tu proyecto gatsby paso 3 – aplicando seguridad con acls y clps ¿qué son acls y clps? acls (listas de control de acceso) te permiten definir permisos en objetos individuales, mientras que clps (permisos a nivel de clase) se aplican a clases enteras en tu base de datos de back4app configurando permisos a nivel de clase ve a base de datos en tu panel de control de back4app selecciona la clase (por ejemplo, todo ) haz clic en la pestaña permisos a nivel de clase configura si la clase es legible públicamente, requiere autenticación o está restringida a ciertos roles uso de acls en el código en tu código de gatsby, puedes definir acls para cada nuevo objeto async function createprivatetodo(title, owneruser) { const todo = parse object extend('todo'); const todo = new todo(); todo set('title', title); const acl = new parse acl(owneruser); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); todo setacl(acl); try { return await todo save(); } catch (err) { console error('error saving private todo ', err); } } paso 4 – escribiendo funciones de cloud code ¿por qué cloud code? con cloud code, puedes agregar lógica personalizada del lado del servidor a tu backend de back4app esto es excelente para reglas de negocio, transformaciones de api rest , disparadores o validaciones de datos que desees mantener seguras y fuera del lado del cliente ejemplo de función en la nube // main js parse cloud define('calculatetextlength', async (request) => { const { text } = request params; if (!text) { throw new error('no text provided'); } return { length text length }; }); desplegando cloud code a través de back4app cli instala y configura el cli, luego ejecuta b4a deploy a través del dashboard ve a cloud code > functions en tu dashboard, pega tu código en main js , y haz clic en deploy llamando a tu función desde gatsby/parse sdk import parse from ' /parseconfig'; async function gettextlength(text) { try { const result = await parse cloud run('calculatetextlength', { text }); console log('text length ', result length); } catch (err) { console error('error calling cloud function ', err); } } paso 5 – configuración de la autenticación clase de usuario de parse back4app utiliza la parse user clase para la autenticación por defecto, maneja el hash de contraseñas, sesiones y almacenamiento seguro registro e inicio de sesión en gatsby import parse from ' /parseconfig'; // signup async function signupuser(username, password, email) { const user = new parse user(); user set('username', username); user set('password', password); user set('email', email); try { await user signup(); console log('user signed up successfully!'); } catch (error) { console error('error signing up user ', error); } } // login async function loginuser(username, password) { try { const user = await parse user login(username, password); console log('user logged in ', user); } catch (error) { console error('error logging in user ', error); } } después de iniciar sesión, puedes llamar a parse user current() para verificar si un usuario ha iniciado sesión inicio de sesión social puedes integrar google , facebook , apple , y otros proveedores con configuraciones adicionales lee más en la documentación de inicio de sesión social https //www back4app com/docs/platform/sign in with apple paso 6 – manejo del almacenamiento de archivos subiendo archivos usa parse file para subir imágenes u otros archivos por ejemplo, en un componente de gatsby async function uploadimage(file) { const name = file name; const parsefile = new parse file(name, file); try { const savedfile = await parsefile save(); console log('file saved ', savedfile url()); return savedfile url(); } catch (err) { console error('error uploading file ', err); } } luego puedes adjuntar este archivo a un objeto parse, almacenarlo y más tarde recuperar la url del archivo para mostrarla en tu sitio de gatsby paso 7 – verificación de correo electrónico y restablecimiento de contraseña por qué es importante la verificación de correo electrónico confirma la dirección de correo del usuario, y los flujos de restablecimiento de contraseña mejoran la experiencia del usuario ambos se configuran fácilmente en back4app navega a la configuración de correo electrónico de tu aplicación en el panel de control habilita la verificación de correo electrónico y configura la plantilla de correo electrónico para restablecimiento de contraseña utiliza los métodos del sdk de parse (por ejemplo, parse user requestpasswordreset(email) ) para activar los correos electrónicos de restablecimiento paso 8 – programación de tareas con cloud jobs descripción general de cloud jobs utiliza cloud jobs para automatizar tareas recurrentes, como eliminar datos obsoletos o enviar resúmenes diarios por ejemplo // main js parse cloud job('cleanupoldtodos', async (request) => { const todo = parse object extend('todo'); const query = new parse query(todo); const now = new date(); const thirty days = 30 24 60 60 1000; const cutoff = new date(now thirty days); query lessthan('createdat', cutoff); try { const oldtodos = await query find({ usemasterkey true }); await parse object destroyall(oldtodos, { usemasterkey true }); return `deleted ${oldtodos length} old todos `; } catch (err) { throw new error('error during cleanup ' + err message); } }); luego prográmalo en configuración de la aplicación > configuración del servidor > tareas en segundo plano paso 9 – integrando webhooks los webhooks permiten que tu aplicación back4app envíe solicitudes http a servicios externos cuando ocurren eventos específicos, como la creación de un nuevo registro ve a tu panel de control de back4app > más > webhooks agrega un nuevo webhook , especificando la url del endpoint para un servicio externo selecciona qué desencadena el webhook (por ejemplo, aftersave en la clase todo) también puedes integrarte con slack o pasarelas de pago agregando el endpoint adecuado paso 10 – explorando el panel de administración de back4app la admin app de back4app es una interfaz centrada en el modelo para la gestión de datos puedes dar acceso seguro a usuarios no técnicos para realizar operaciones crud en tus clases habilitando la admin app ve a app dashboard > más > admin app y haz clic en “habilitar admin app ” luego crea un usuario administrador y elige un subdominio para la interfaz de administración ahora puedes iniciar sesión en tu admin app para ver y modificar datos sin escribir código conclusión en este tutorial, descubriste cómo construir un backend para gatsby usando back4app has aprendido a configurar una base de datos segura con clases, campos personalizados y relaciones usar el sdk de parse , junto con rest api y opciones de consulta graphql para transacciones de datos configurar acls y clps para la seguridad de los datos escribir y desplegar cloud code para extender la lógica de negocio y los triggers gestionar la autenticación de usuarios con registro, inicio de sesión, restablecimiento de contraseña y verificación de correo electrónico manejar el almacenamiento de archivos para imágenes y documentos programar tareas automatizadas con cloud jobs integrar servicios externos a través de webhooks aprovechar la admin app para una fácil administración de datos con estas habilidades, tu sitio de gatsby puede aprovechar potentes características dinámicas mientras sigue beneficiándose de la renderización estática de gatsby desde aquí, puedes expandir tu modelo de datos y agregar lógica empresarial avanzada integrar más apis externas para una plataforma verdaderamente integral seguir la documentación oficial de back4app para profundizar en seguridad, rendimiento y análisis experimentar con las características de tiempo de construcción de gatsby —por ejemplo, “ crear páginas ” a partir de datos dinámicos o configurar un “ gatsby source ” plugin para tu backend de back4app ahora tienes una base sólida para construir aplicaciones impulsadas por datos y a prueba de futuro con gatsby y back4app