Quickstarters
CRUD Samples
How to Create a CRUD Application with Koa.js?
38 min
introducción en esta guía, aprenderás cómo desarrollar una aplicación crud (crear, leer, actualizar, eliminar) utilizando koa js este tutorial te guiará a través de los pasos esenciales para gestionar datos y construir una api funcional integrando tu backend de koa js con back4app comenzarás configurando un proyecto de back4app llamado basic crud app koajs , que sirve como un potente backend para tu aplicación después, diseñarás un esquema de base de datos flexible estableciendo colecciones y definiendo campos, ya sea manualmente o con la ayuda del agente de ia de back4app esta configuración asegura que tus datos estén organizados para operaciones crud fluidas a continuación, utilizarás la aplicación administrativa de back4app, una herramienta sin código, de arrastrar y soltar que simplifica tareas de gestión de datos como crear, leer, actualizar y eliminar registros finalmente, configurarás tu servidor koa js para interactuar con back4app a través de apis rest, todo mientras implementas controles de acceso robustos para asegurar tu backend al final de este tutorial, habrás construido una aplicación del lado del servidor lista para producción que no solo soporta operaciones crud básicas, sino que también incluye autenticación de usuarios y manejo seguro de datos conclusiones clave descubre cómo construir aplicaciones crud con koa js mientras aprovechas un backend en la nube confiable obtén información sobre cómo diseñar un backend escalable e integrarlo con una api restful aprende a usar la intuitiva aplicación back4app admin para simplificar las operaciones crud explora estrategias de implementación, incluida la contenedorización con docker, para lanzar tu aplicación koa js rápidamente requisitos previos antes de comenzar, asegúrate de tener lo siguiente una cuenta de back4app con un proyecto activo consulta introducción a back4app https //www back4app com/docs/get started/new parse app para obtener orientación un entorno de desarrollo de node js en funcionamiento instala node js (v14 o posterior) y configura tu proyecto koa js conocimientos básicos de javascript, koa js y apis rest revisa la documentación de koa js https //koajs com/ si es necesario paso 1 – configurando tu proyecto de back4app creando un nuevo proyecto de back4app inicia sesión en tu cuenta de back4app haz clic en el botón “nueva app” desde tu panel de control nombra tu proyecto basic crud app koajs y sigue las instrucciones para completar la configuración crear nuevo proyecto una vez que tu proyecto esté establecido, será visible en tu panel de control, proporcionando el marco de backend requerido para tu aplicación paso 2 – creando el esquema de la base de datos diseñando su modelo de datos para esta aplicación crud, necesitarás configurar varias colecciones a continuación se presentan colecciones de ejemplo con campos y tipos sugeridos para ayudarte a configurar eficazmente el esquema de tu base de datos 1\ colección de artículos esta colección contiene detalles para cada artículo campo tipo descripción id objectid identificador único generado automáticamente título cadena el título del artículo descripción cadena una breve descripción del artículo creado en fecha marca de tiempo cuando se creó el elemento actualizado en fecha marca de tiempo para la actualización más reciente 2\ colección de usuarios esta colección gestiona los datos de usuario y las credenciales de autenticación campo tipo descripción id objectid clave primaria generada automáticamente nombre de usuario cadena un nombre de usuario único para el usuario correo electrónico cadena dirección de correo electrónico única del usuario hash de contraseña cadena contraseña hash segura creado en fecha marca de tiempo de la creación de la cuenta actualizado en fecha marca de tiempo de la última actualización de la cuenta puedes crear estas colecciones a través del panel de control de back4app añadiendo una nueva clase para cada una y definiendo las columnas correspondientes crear nueva clase puedes definir campos seleccionando el tipo apropiado, estableciendo valores predeterminados y especificando si el campo es obligatorio crear columna aprovechando el agente de ia de back4app para la configuración del esquema el agente de ia de back4app, disponible en tu panel de control, puede generar automáticamente el esquema de tu base de datos a partir de un aviso detallado que describe tus colecciones y campos esta función acelera la configuración del proyecto y asegura un esquema consistente para las operaciones crud cómo usar el agente de ia abre el agente de ia desde tu panel de control de back4app o dentro de la configuración del proyecto proporciona un aviso descriptivo que esboce las colecciones y campos que necesitas revisa el esquema generado y aplica la configuración 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 ayuda a garantizar que su esquema sea tanto consistente como optimizado paso 3 – activar la aplicación de administración y funcionalidad crud descripción general de la aplicación de administración la aplicación de administración de back4app es una interfaz fácil de usar que le permite gestionar sus datos de backend sin esfuerzo a través de controles de arrastrar y soltar esta herramienta sin código simplifica operaciones como crear, leer, actualizar y eliminar registros activar la aplicación de administración vaya al menú “más” en su panel de back4app seleccione “aplicación de administración” y haga clic en “habilitar aplicación de administración ” configure su cuenta de administrador inicial; este proceso establece roles del sistema como b4aadminuser y prepara colecciones del sistema habilitar aplicación de administración una vez activada, inicie sesión en la aplicación de administración para gestionar sus colecciones y registros panel de control de la aplicación de administración dentro de la aplicación de administración, puede agregar nuevos registros use el botón “agregar registro” en cualquier colección (por ejemplo, artículos) para crear nuevas entradas ver y editar registros seleccione un registro para inspeccionar sus detalles o modificar sus campos eliminar registros elimine entradas que ya no son necesarias paso 4 – conectando tu backend de koa js con back4app ahora que tu backend está configurado y gestionado, es hora de configurar tu servidor koa js para interactuar con back4app usando apis rest con koa js este tutorial demostrará cómo usar llamadas a la api rest desde tu servidor koa js para realizar operaciones crud en tus colecciones de back4app configurando un servidor koa js básico instala koa js y el middleware necesario npm install koa koa router koa bodyparser node fetch crea el archivo del servidor (por ejemplo, server js ) // server js const koa = require('koa'); const router = require('koa router'); const bodyparser = require('koa bodyparser'); const fetch = require('node fetch'); const app = new koa(); const router = new router(); const application id = 'your application id'; const rest api key = 'your rest api key'; const base url = 'https //parseapi back4app com'; // fetch all items router get('/items', async (ctx) => { try { const response = await fetch(`${base url}/classes/items`, { headers { 'x parse application id' application id, 'x parse rest api key' rest api key } }); const data = await response json(); ctx body = data results; } catch (error) { ctx status = 500; ctx body = { error 'failed to fetch items' }; } }); // create a new item router post('/items', async (ctx) => { const { title, description } = ctx request body; try { const response = await fetch(`${base url}/classes/items`, { method 'post', headers { 'x parse application id' application id, 'x parse rest api key' rest api key, 'content type' 'application/json' }, body json stringify({ title, description }) }); const newitem = await response json(); ctx body = newitem; } catch (error) { ctx status = 500; ctx body = { error 'error creating item' }; } }); // update an item router put('/items/\ id', async (ctx) => { const { id } = ctx params; const { title, description } = ctx request body; try { const response = await fetch(`${base url}/classes/items/${id}`, { method 'put', headers { 'x parse application id' application id, 'x parse rest api key' rest api key, 'content type' 'application/json' }, body json stringify({ title, description }) }); const updateditem = await response json(); ctx body = updateditem; } catch (error) { ctx status = 500; ctx body = { error 'error updating item' }; } }); // delete an item router delete('/items/\ id', async (ctx) => { const { id } = ctx params; try { await fetch(`${base url}/classes/items/${id}`, { method 'delete', headers { 'x parse application id' application id, 'x parse rest api key' rest api key } }); ctx body = { message 'item deleted successfully' }; } catch (error) { ctx status = 500; ctx body = { error 'error deleting item' }; } }); app use(bodyparser()); app use(router routes()) use(router allowedmethods()); const port = process env port || 3000; app listen(port, () => { console log(`server is running on port ${port}`); }); esta configuración te proporciona un servidor koa js que se comunica con back4app a través de llamadas rest, manejando todas las operaciones crud paso 5 – asegurando tu backend implementando controles de acceso protege tus datos aplicando listas de control de acceso (acls) a nivel de objeto por ejemplo, al crear un elemento privado, establece acls para restringir el acceso async function createsecureitem(itemdata, ownersessiontoken) { try { const response = await fetch(`${base url}/classes/items`, { method 'post', headers { 'x parse application id' application id, 'x parse rest api key' rest api key, 'content type' 'application/json', 'x parse session token' ownersessiontoken }, body json stringify({ title itemdata title, description itemdata description, acl { " " { "read" false, "write" false }, "owner" { "read" true, "write" true } } }) }); const result = await response json(); console log('secure item created ', result); } catch (error) { console error('error creating secure item ', error); } } configuración de permisos a nivel de clase (clps) dentro de tu panel de control de back4app, configura los clps para cada colección para establecer reglas predeterminadas, asegurando que solo los usuarios autorizados puedan acceder a datos sensibles paso 6 – autenticación de usuarios configuración de cuentas de usuario back4app utiliza una clase de usuario para manejar la autenticación en tu servidor koa js, gestiona el registro y el inicio de sesión de usuarios interfiriendo con la api rest de back4app ejemplo endpoint de registro de usuario router post('/signup', async (ctx) => { const { username, password, email } = ctx request body; try { const response = await fetch(`${base url}/users`, { method 'post', headers { 'x parse application id' application id, 'x parse rest api key' rest api key, 'content type' 'application/json' }, body json stringify({ username, password, email }) }); const userdata = await response json(); ctx body = userdata; } catch (error) { ctx status = 500; ctx body = { error 'error signing up' }; } }); puedes construir endpoints similares para el inicio de sesión y la gestión de sesiones según sea necesario paso 7 – desplegando tu aplicación koa js la función de despliegue web de back4app te permite alojar tu servidor koa js vinculándolo a tu repositorio de github 7 1 – construye y organiza tu proyecto asegúrate de que tu proyecto esté correctamente estructurado un diseño de muestra podría ser basic crud app koajs/ ├── node modules/ ├── server js ├── package json └── readme md confirma todos tus archivos fuente en un repositorio de git comandos de git de muestra git init git add git commit m "initial commit of koa js backend" git remote add origin https //github com/your username/basic crud app koajs git git push u origin main 7 2 – integra con el despliegue web de back4app inicia sesión en tu panel de back4app, abre tu proyecto basic crud app koajs , y navega a la sección despliegue web conecta tu cuenta de github si aún no lo has hecho selecciona tu repositorio y la rama relevante (por ejemplo, main ) 7 3 – configura tus ajustes de despliegue comando de construcción si tu proyecto necesita ser construido (por ejemplo, transpilar javascript moderno), especifica un comando de construcción como npm run build directorio de salida indica la carpeta que contiene tus archivos listos para producción, si corresponde variables de entorno agrega cualquier variable de entorno necesaria (como claves api) en la configuración de despliegue 7 4 – opcional dockeriza tu servidor koa js si deseas desplegar tu aplicación como un contenedor, incluye un dockerfile en tu repositorio \# use the official node js image as a base from node 16 alpine \# set the working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy the rest of the application code copy \# expose the desired port expose 3000 \# run the application cmd \["node", "server js"] 7 5 – lanza tu aplicación haz clic en el botón desplegar en back4app monitorea los registros de despliegue para asegurarte de que tu aplicación se construya y despliegue correctamente una vez finalizado, back4app proporcionará una url donde tu servidor koa js es accesible 7 6 – valida tu despliegue visita la url proporcionada para verificar que tu aplicación esté en funcionamiento prueba cada endpoint (operaciones crud, autenticación de usuarios) para confirmar el funcionamiento adecuado si ocurren problemas, revisa tus registros y configuraciones de despliegue para solucionar problemas paso 8 – conclusión y mejoras futuras ¡gran trabajo! ahora has construido una aplicación crud completamente operativa utilizando koa js integrado con back4app tu proyecto basic crud app koajs cuenta con colecciones cuidadosamente diseñadas para items y usuarios, una aplicación de administración fácil de usar para la gestión de datos y un backend seguro próximos pasos expande tu api mejora tu servidor koa js con rutas adicionales, middleware o incluso características en tiempo real mejora la autenticación considera implementar autenticación basada en tokens, inicios de sesión sociales o verificación de múltiples factores explora más documentación consulta la documentación de back4app https //www back4app com/docs y guías de koa js https //koajs com/ para temas más avanzados y optimizaciones al seguir este tutorial, ahora posees las habilidades para construir un backend crud escalable, seguro y eficiente con koa js y back4app ¡disfruta!